{"version":3,"file":"progress.css.cjs","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}