@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-bar/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  createContext,\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar, useLocale } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  centerPadding,\n  controlSize,\n  fieldInput,\n  fieldLabel,\n  fieldValue,\n  getAllowedOverrides,\n  staticColor as staticColorStyles,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ProgressBarSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ProgressBarStaticColor = \"white\" | \"black\" | \"auto\";\nexport type ProgressBarLabelPosition = \"top\" | \"side\";\n\nexport interface ProgressBarProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /**\n   * A second value beyond `value` rendered as a dithered extension of the fill —\n   * the register's \"in flight\" segment (the XP bar's 6% checker after the 84%\n   * solid, TerminalGlassLab.tsx:773-780). Purely visual; the accessible value\n   * stays `value`. Ignored while indeterminate.\n   */\n  pendingValue?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** The content to display as the value's label, e.g. \"1 of 4\". */\n  valueLabel?: JSX.Element;\n  /** Whether presentation is indeterminate when progress isn't known. */\n  isIndeterminate?: boolean;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the progress bar. @default 'M' */\n  size?: ProgressBarSize;\n  /** The label to display above or beside the progress bar. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressBarStaticColor;\n  /** The label's overall position relative to the progress bar. @default 'top' */\n  labelPosition?: ProgressBarLabelPosition;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport const ProgressBarContext = createContext<SpectrumContextValue<ProgressBarProps>>(null);\n\ntype ProgressBarStyleState = {\n  size: ProgressBarSize;\n  staticColor?: ProgressBarStaticColor;\n  labelPosition: ProgressBarLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isIndeterminate: boolean;\n};\n\nconst progressBarIndeterminateLtr = keyframes(`\n  0% {\n    transform: translateX(-70%) scaleX(0.7);\n  }\n\n  100% {\n    transform: translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst progressBarIndeterminateRtl = keyframes(`\n  0% {\n    transform: translateX(100%) scaleX(0.7);\n  }\n\n  100% {\n    transform: translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapperStyles = style<ProgressBarStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      default: {\n        labelPosition: {\n          top: [\"1fr\", \"auto\"],\n          side: [\"auto\", \"1fr\", \"auto\"],\n        },\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: [\"1fr\"],\n          side: [\"auto\", \"1fr\"],\n        },\n      },\n    },\n    gridTemplateAreas: {\n      default: {\n        labelPosition: {\n          top: [\"label value\", \"bar bar\"],\n          side: [\"label bar value\"],\n        },\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: [\"label\", \"bar\"],\n          side: [\"label bar\"],\n        },\n      },\n    },\n    alignItems: \"baseline\",\n    isolation: \"isolate\",\n    minWidth: 48,\n    maxWidth: 768,\n    \"--field-height\": {\n      type: \"height\",\n      value: controlSize(),\n    },\n    \"--track-to-label\": {\n      type: \"height\",\n      value: 4,\n    },\n    \"--field-gap\": {\n      type: \"rowGap\",\n      value: centerPadding(\"calc(var(--field-height) + var(--track-to-label))\"),\n    },\n    columnGap: 12,\n  },\n  getAllowedOverrides(),\n);\n\nconst labelWrapperStyles = style<ProgressBarStyleState>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst labelStyles = style<ProgressBarStyleState>({\n  ...fieldLabel(),\n});\n\n/* The readout is the quieter sibling of the label, not a copy of it: the handoff\n * sets the label to `var(--type-label)` (TerminalGlassLab.tsx:749) and the readout\n * beside it to mono 10.5px in --text-secondary (:753-758). Spreading `fieldLabel()`\n * here made the pair byte-identical. */\nconst valueStyles = style<ProgressBarStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<ProgressBarStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. `fieldInput()` spreads only SIZE\n   * containment (`contain: \"inline-size\"`, s2-internal/style-utils.ts:160-165), and\n   * size containment does not make an element a containing block for absolutely\n   * positioned descendants — only layout/paint containment does. Without this the\n   * overlay's `inset: 0` would resolve against wrapperStyles (`position: \"relative\"`,\n   * :107) and rim the label and value rows along with the bar.\n   * Stacking is unchanged: `zIndex: 1` below already applied to this grid item and\n   * already established a stacking context. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Row layout so the pending segment sits flush after the fill — the handoff's\n   * track is itself `display: flex` (TerminalGlassLab.tsx:763-770) for exactly\n   * this: solid fill then dithered lead, left to right. The rim overlay is\n   * absolutely positioned and thus not a flex item. */\n  display: \"flex\",\n  /* Square, not a pill. The register's one drawn progress bar is the XP bar at\n   * TerminalGlassLab.tsx:763-770 — an 8px-tall div in --surface-inset with\n   * `overflow: hidden` and no border-radius declaration on the track, on the 84%\n   * fill (:772), or on the dithered lead (:773-780). 9999px was Spectrum's. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's bar track is the inset surface (TerminalGlassLab.tsx:767) — a\n     * recess. gray-300 is a mid-slate slab that read LIGHTER than its host panel in\n     * dark, inverting the recess. */\n    default: \"pasteboard\",\n    isStaticColor: \"transparent-overlay-300\",\n    forcedColors: \"ButtonFace\",\n  },\n  outlineWidth: {\n    default: 0,\n    forcedColors: 1,\n  },\n  outlineStyle: {\n    default: \"none\",\n    forcedColors: \"solid\",\n  },\n  outlineColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  zIndex: 1,\n  height: {\n    default: 6,\n    size: {\n      S: 4,\n      M: 6,\n      L: 8,\n      XL: 10,\n    },\n  },\n});\n\n/* The handoff rims the bar with --edge-glass, but paints the rim on a separate\n * absolutely-positioned overlay rather than on the track itself\n * (TerminalGlassLab.tsx:781-788). That is not incidental: an inset box-shadow is\n * painted with the element's own background, i.e. UNDER every in-flow child, and\n * `overflow: hidden` clips children without lifting the shadow above them. A rim\n * declared on trackStyles would therefore be occluded across the filled fraction of\n * the bar and survive only on the empty remainder — a half-rim that reads as a bug.\n * Since this register casts no drop shadows, the rim is the only thing seating the\n * bar in its surface, so it has to be drawn where it can be seen.\n * `borderRadius: \"inherit\"` so it keeps tracking the track's corner if that moves.\n * Static (no conditions), so the macro yields a string used directly as a class —\n * same pattern as color/ColorSwatchPicker.tsx:119-133, applied at :233. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<ProgressBarStyleState>({\n  width: \"full\",\n  height: \"full\",\n  borderStyle: \"none\",\n  /* Square, to match the track. Redundant against the track's `overflow: hidden`,\n   * but kept explicit so the two agree on the page — the handoff's fill segment\n   * (TerminalGlassLab.tsx:772) is a bare `width: \"84%\"` div with no radius. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: \"accent\",\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  // Mirror upstream `fill`: the origin only matters for the indeterminate sweep\n  // (translateX/scaleX). Applying it unconditionally shifts the determinate\n  // bar's computed `transform-origin` off centre with no visual effect — a\n  // self-inflicted divergence D1 flags on the `fill` part.\n  transformOrigin: {\n    isIndeterminate: \"left\",\n  },\n});\n\n/* The \"in flight\" segment: the register's ordered-dither checker\n * (repeating-conic at a 4px tile, TerminalGlassLab.tsx:773-780) continuing the\n * fill at half visual density. The accent has to reach the gradient through a\n * custom property because the macro's color vocabulary stops at backgroundColor —\n * same trick as Badge's `--iconPrimary` and ProgressCircle's `--pv-ring-fill`. */\nconst pendingStyles = style<ProgressBarStyleState>({\n  height: \"full\",\n  flexShrink: 0,\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundImage: \"[repeating-conic-gradient(var(--pv-pending-fill) 0% 25%, transparent 0% 50%)]\",\n  backgroundSize: \"[4px 4px]\",\n  \"--pv-pending-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction safeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\nfunction stringValueLabel(value: JSX.Element | undefined): string | undefined {\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n  return undefined;\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\nfunction indeterminateAnimation(direction: \"ltr\" | \"rtl\" | string): string {\n  const keyframe = direction === \"rtl\" ? progressBarIndeterminateRtl : progressBarIndeterminateLtr;\n  return `${keyframe} 1000ms cubic-bezier(.37, 0, .63, 1) infinite`;\n}\n\nexport function ProgressBar(props: ProgressBarProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressBarContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressBarProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"pendingValue\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"isIndeterminate\",\n    \"formatOptions\",\n    \"size\",\n    \"label\",\n    \"staticColor\",\n    \"labelPosition\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const locale = useLocale();\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): ProgressBarStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isIndeterminate: isIndeterminate(),\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const progressAria = createProgressBar({\n    get id() {\n      return local.id;\n    },\n    get value() {\n      return local.value;\n    },\n    get minValue() {\n      return local.minValue;\n    },\n    get maxValue() {\n      return local.maxValue;\n    },\n    get valueLabel() {\n      return stringValueLabel(local.valueLabel);\n    },\n    get isIndeterminate() {\n      return isIndeterminate();\n    },\n    get formatOptions() {\n      return local.formatOptions;\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return accessibleLabelledBy();\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const value = clamp(local.value ?? 0, minValue, maxValue);\n    return ((value - minValue) / safeRange(minValue, maxValue)) * 100;\n  });\n  const pendingWidth = createMemo(() => {\n    if (local.pendingValue == null) {\n      return null;\n    }\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const pending = clamp(local.pendingValue, minValue, maxValue);\n    const pendingPercentage = ((pending - minValue) / safeRange(minValue, maxValue)) * 100;\n    return Math.max(0, pendingPercentage - percentage());\n  });\n  const valueText = () =>\n    local.valueLabel ?? (progressAria.progressBarProps[\"aria-valuetext\"] as string | undefined);\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <div\n      {...getDataAttributes(merged)}\n      {...progressAria.progressBarProps}\n      data-rac=\"\"\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={mergedUnsafeStyle()}\n      slot={local.slot ?? undefined}\n    >\n      {local.label && (\n        <div class={labelWrapperStyles(state(\"start\"))}>\n          <span id={labelId} class={labelStyles(state(\"start\"))}>\n            {local.label}\n          </span>\n        </div>\n      )}\n      {local.label && !isIndeterminate() && (\n        <span class={valueStyles(state(\"end\"))}>{valueText()}</span>\n      )}\n      <div class={trackStyles(state())}>\n        <div\n          class={fillStyles(state())}\n          style={{\n            width: isIndeterminate() ? undefined : `${percentage()}%`,\n            animation: isIndeterminate() ? indeterminateAnimation(locale().direction) : undefined,\n          }}\n        />\n        {!isIndeterminate() && pendingWidth() != null && (\n          <div\n            aria-hidden=\"true\"\n            class={pendingStyles(state())}\n            style={{ width: `${pendingWidth()}%` }}\n          />\n        )}\n        <div aria-hidden=\"true\" class={trackRimStyles} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAgFA,MAAa,qBAAqB,cAAsD,IAAA;AAWxF,MAAM,8BAAA;AAUN,MAAM,8BAAA;AAUN,MAAM,gBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDN,MAAM,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAqBN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EN,MAAM,aAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;AA2BN,MAAM,gBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;AAiBN,SAAS,MAAM,OAAe,KAAa,KAAoB;CAC7D,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAA,GAAM,GAAA;AACxC;AAEA,SAAS,UAAU,KAAa,KAAoB;CAClD,MAAM,QAAQ,MAAM;CACpB,OAAO,OAAO,SAAS,KAAA,KAAU,QAAQ,IAAI,QAAQ;AACvD;AAEA,SAAS,iBAAiB,OAAmD;CAC3E,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,OAAO,KAAA;AAGlB;AAEA,SAAS,kBAAkB,QAAoC;CAC7D,MAAM,SAAS;CACf,MAAM,aAAiD,CAAC;CAExD,KAAK,MAAM,OAAO,QAChB,IAAI,IAAI,WAAW,OAAA,GAAU;EAC3B,MAAM,QAAQ,OAAO;EACrB,WAAW,OAAO,SAAS,OAAO,KAAA,IAAY,OAAO,KAAA;CACvD;CAGF,OAAO;AACT;AAEA,SAAS,uBAAuB,WAA0C;CAExE,OAAO,GADU,cAAc,QAAQ,8BAA8B,4BAC3D;AACZ;AAEA,SAAgB,YAAY,OAA8B;CACxD,MAAM,eAAe,uBAAuB,WAAW,kBAAA,GAAqB,MAAM,IAAI;CACtF,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAA;CAC9C,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CACD,MAAM,SAAS,UAAA;CACf,MAAM,UAAU,eAAA;CAChB,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,sBAAsB,MAAM,iBAAiB;CACnD,MAAM,wBAAwB,MAAM,mBAAmB;CACvD,MAAM,sBAAsB,CAAC,CAAC,MAAM;CACpC,MAAM,SAAS,gBAAyD;EACtE,MAAM,KAAA;EACN,aAAa,MAAM;EACnB,eAAe,cAAA;EACf;EACA,eAAe,cAAA;EACf,iBAAiB,gBAAA;CACnB;CACA,MAAM,6BACJ,MAAM,uBAAuB,CAAC,MAAM,iBAAiB,MAAM,QAAQ,UAAU,KAAA;CAE/E,MAAM,eAAe,kBAAkB;EACrC,IAAI,KAAK;GACP,OAAO,MAAM;EACf;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,iBAAiB,MAAM,UAAU;EAC1C;EACA,IAAI,kBAAkB;GACpB,OAAO,gBAAA;EACT;EACA,IAAI,gBAAgB;GAClB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,qBAAA;EACT;EACA,IAAI,qBAAqB;GACvB,OAAO,MAAM;EACf;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;CACF,CAAA;CAEA,MAAM,aAAa,iBAAW;EAC5B,MAAM,WAAW,MAAM,YAAY;EACnC,MAAM,WAAW,MAAM,YAAY;EAEnC,QADc,MAAM,MAAM,SAAS,GAAG,UAAU,QACvC,IAAQ,YAAY,UAAU,UAAU,QAAA,IAAa;CAChE,CAAA;CACA,MAAM,eAAe,iBAAW;EAC9B,IAAI,MAAM,gBAAgB,MACxB,OAAO;EAET,MAAM,WAAW,MAAM,YAAY;EACnC,MAAM,WAAW,MAAM,YAAY;EAEnC,MAAM,qBADU,MAAM,MAAM,cAAc,UAAU,QACxB,IAAU,YAAY,UAAU,UAAU,QAAA,IAAa;EACnF,OAAO,KAAK,IAAI,GAAG,oBAAoB,WAAA,CAAA;CACzC,CAAA;CACA,MAAM,kBACJ,MAAM,cAAe,aAAa,iBAAiB;CACrD,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAExE,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA,GAAA,QAAA,KAAA,YAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA,aAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA,aAAA,QAAA,MAAA,YAAA,QAAA,MAAA,aAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA;EAAA,MAAA;EAAA,IAAA,QAKS,iBACF,cAA2D,KAC5D,MAAM,GAAG;EAAA,OAAA,UAAA,cAAA,IAAA,OAAA,IAAA;EAAA,OAAA,MAAA,iBALP,kBAAkB,MAAA,SAClB,aAAa,kBAAgB;GAAA,YACxB;GAAA,KAAA,WAAA;IAAA,OAKF,CAAC,MAAM,kBAAkB,cAAc,MAAA,GAAS,aAAA,CAAA,CAAA,EACpD,OAAO,OAAA,EACP,KAAK,GAAA;GAAA;GAAA,IACR,QAAA;IAAA,OAAO,kBAAA;GAAA;GAAA,IACP,OAAA;IAAA,OAAM,MAAM,QAAQ,KAAA;GAAA;EAAA,CAAA,GAAA,OAAA,IAAA;EAAA,OAAA,aAAA;GAAA,IAAA,MAAA,WAAA,CAAA,CAEnB,MAAM,KAAK;GAAA,aAAX,IAAA,YAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,SAAA,MAAA;IAAA,aAAA,QAAA,MAEa,OAAA;IAAA,OAAA,cACP,MAAM,KAAK;IAAA,QAAA,QAAA;KAAA,IAAA,OAFJ,mBAAmB,MAAM,OAAA,CAAA,GAAA,OACT,YAAY,MAAM,OAAA,CAAA;KAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;KAAA,SAAA,IAAA,KAAA,UAAA,QAAA,IAAA,IAAA,IAAA;KAAA,OAAA;IAAA,GAAA;KAAA,GAAA,KAAA;KAAA,GAAA,KAAA;IAAA,CAAA;IAAA,OAAA;GAAA,GAAA;EAIhD,GAAA,GAAA,OAAA,KAAA;EAAA,OAAA,aAAA;GAAA,IAAA,OAAA,WAAA,CAAA,EACC,MAAM,SAAS,CAAC,gBAAA,EAAA;GAAA,aAAhB,KAAA,YAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,OAAA,QAC0C,SAAA;IAAA,aAAA,UAAA,QAA5B,YAAY,MAAM,KAAA,CAAA,CAAA,CAAA;IAAA,OAAA;GAAA,GAAA;EACjC,GAAA,GAAA,OAAA,KAAA;EAAA,OAAA,cAAA;GAAA,IAAA,OAAA,WAAA,CAAA,EASG,CAAC,gBAAA,KAAqB,aAAA,KAAkB,KAAA;GAAA,aAAxC,KAAA,YAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,QAAA,QAAA;KAAA,IAAA,OAGU,cAAc,MAAA,CAAA,GAAA,OACL,GAAG,aAAA,EAAA;KAAiB,SAAA,IAAA,KAAA,UAAA,QAAA,IAAA,IAAA,IAAA;KAAA,SAAA,IAAA,KAAA,iBAAA,QAAA,SAAA,IAAA,IAAA,IAAA;KAAA,OAAA;IAAA,GAAA;KAAA,GAAA,KAAA;KAAA,GAAA,KAAA;IAAA,CAAA;IAAA,OAAA;GAAA,GAAA;EAExC,GAAA,GAAA,OAAA,IAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAdU,YAAY,MAAA,CAAA,GAAA,OAEb,WAAW,MAAA,CAAA,GAAA,OAET,gBAAA,IAAoB,KAAA,IAAY,GAAG,WAAA,EAAA,IAAe,OAC9C,gBAAA,IAAoB,uBAAuB,OAAA,EAAS,SAAS,IAAI,KAAA;GAAA,QAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,iBAAA,OAAA,SAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,iBAAA,OAAA,aAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,mBAAA;EAAA,OAAA;CAAA,GAAA;AAcxF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/progress-bar/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ProgressBar.tsx\n\n// Port of packages/@react-spectrum/s2/src/ProgressBar.tsx.\n\nimport { For, createContext, createMemo, createUniqueId, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps, createProgressBar, useLocale } from \"@proyecto-viviana/solidaria\";\nimport { mergeStyles } from \"../style/runtime\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  centerPadding,\n  controlFontStep,\n  controlSize,\n  fieldInput,\n  fieldLabel,\n  fieldValue,\n  getAllowedOverrides,\n  staticColor as staticColorStyles,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ProgressBarSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ProgressBarStaticColor = \"white\" | \"black\" | \"auto\";\nexport type ProgressBarLabelPosition = \"top\" | \"side\";\nexport type ProgressBarTrackStyle = \"bar\" | \"bracket\";\n\n/* The register draws its bracket at ten cells (`[▮▮▮▮▯▯▯▯▯▯]`), so a percentage maps\n * to one cell per 10%. Fixed rather than a prop: the glyph run's whole point is that\n * every bracket in a log column is the same width, so rows stack into a chart. */\nconst BRACKET_CELLS = 10;\nconst BRACKET_FILLED = \"▮\";\nconst BRACKET_EMPTY = \"▯\";\n\nexport interface ProgressBarProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /**\n   * A second value beyond `value` rendered as a dithered extension of the fill —\n   * the register's \"in flight\" segment (the XP bar's 6% checker after the 84%\n   * solid, TerminalGlassLab.tsx:773-780). Purely visual; the accessible value\n   * stays `value`. Ignored while indeterminate.\n   */\n  pendingValue?: number;\n  /**\n   * How the track is drawn. `\"bar\"` is the filled 8px recess; `\"bracket\"` replaces it\n   * with the register's mono readout of the same value — `[▮▮▮▮▯▯▯▯▯▯]` — for rows that\n   * live inside a terminal well, where a painted bar reads as a foreign object among\n   * text. The bracket is decorative (`aria-hidden`): the accessible value is the\n   * `progressbar` role's own, identical in both forms. Indeterminate progress always\n   * draws the bar — a fixed glyph run cannot sweep without inventing motion.\n   *\n   * Local addition — no S2 counterpart.\n   * @default 'bar'\n   */\n  trackStyle?: ProgressBarTrackStyle;\n  /**\n   * Relative widths of the track's sections, e.g. `[3, 1, 2]` for a three-chapter run.\n   * The bar is cut into that many sections, each proportional to its number and split\n   * from its neighbour by a hairline gap; the fill (and the `pendingValue` dither)\n   * flows across them exactly as it does across the undivided bar. Values ≤ 0 and\n   * arrays shorter than two entries are ignored. Purely visual — the accessible value\n   * is unchanged.\n   *\n   * Local addition — no S2 counterpart.\n   */\n  segments?: number[];\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** The content to display as the value's label, e.g. \"1 of 4\". */\n  valueLabel?: JSX.Element;\n  /** Whether presentation is indeterminate when progress isn't known. */\n  isIndeterminate?: boolean;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the progress bar. @default 'M' */\n  size?: ProgressBarSize;\n  /** The label to display above or beside the progress bar. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressBarStaticColor;\n  /** The label's overall position relative to the progress bar. @default 'top' */\n  labelPosition?: ProgressBarLabelPosition;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport const ProgressBarContext = createContext<SpectrumContextValue<ProgressBarProps>>(null);\n\ntype ProgressBarStyleState = {\n  size: ProgressBarSize;\n  staticColor?: ProgressBarStaticColor;\n  labelPosition: ProgressBarLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isIndeterminate: boolean;\n  hasSegments: boolean;\n};\n\nconst progressBarIndeterminateLtr = keyframes(`\n  0% {\n    transform: translateX(-70%) scaleX(0.7);\n  }\n\n  100% {\n    transform: translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst progressBarIndeterminateRtl = keyframes(`\n  0% {\n    transform: translateX(100%) scaleX(0.7);\n  }\n\n  100% {\n    transform: translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapperStyles = style<ProgressBarStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      default: {\n        labelPosition: {\n          top: [\"1fr\", \"auto\"],\n          side: [\"auto\", \"1fr\", \"auto\"],\n        },\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: [\"1fr\"],\n          side: [\"auto\", \"1fr\"],\n        },\n      },\n    },\n    gridTemplateAreas: {\n      default: {\n        labelPosition: {\n          top: [\"label value\", \"bar bar\"],\n          side: [\"label bar value\"],\n        },\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: [\"label\", \"bar\"],\n          side: [\"label bar\"],\n        },\n      },\n    },\n    alignItems: \"baseline\",\n    isolation: \"isolate\",\n    minWidth: 48,\n    maxWidth: 768,\n    \"--field-height\": {\n      type: \"height\",\n      value: controlSize(),\n    },\n    \"--track-to-label\": {\n      type: \"height\",\n      value: 4,\n    },\n    \"--field-gap\": {\n      type: \"rowGap\",\n      value: centerPadding(\"calc(var(--field-height) + var(--track-to-label))\"),\n    },\n    columnGap: 12,\n  },\n  getAllowedOverrides(),\n);\n\nconst labelWrapperStyles = style<ProgressBarStyleState>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst labelStyles = style<ProgressBarStyleState>({\n  ...fieldLabel(),\n});\n\n/* The readout is the quieter sibling of the label, not a copy of it: the handoff\n * sets the label to `var(--type-label)` (TerminalGlassLab.tsx:749) and the readout\n * beside it to mono 10.5px in --text-secondary (:753-758). Spreading `fieldLabel()`\n * here made the pair byte-identical. */\nconst valueStyles = style<ProgressBarStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<ProgressBarStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. `fieldInput()` spreads only SIZE\n   * containment (`contain: \"inline-size\"`, s2-internal/style-utils.ts:160-165), and\n   * size containment does not make an element a containing block for absolutely\n   * positioned descendants — only layout/paint containment does. Without this the\n   * overlay's `inset: 0` would resolve against wrapperStyles (`position: \"relative\"`,\n   * :107) and rim the label and value rows along with the bar.\n   * Stacking is unchanged: `zIndex: 1` below already applied to this grid item and\n   * already established a stacking context. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Row layout so the pending segment sits flush after the fill — the handoff's\n   * track is itself `display: flex` (TerminalGlassLab.tsx:763-770) for exactly\n   * this: solid fill then dithered lead, left to right. The rim overlay is\n   * absolutely positioned and thus not a flex item. */\n  display: \"flex\",\n  /* Square, not a pill. The register's one drawn progress bar is the XP bar at\n   * TerminalGlassLab.tsx:763-770 — an 8px-tall div in --surface-inset with\n   * `overflow: hidden` and no border-radius declaration on the track, on the 84%\n   * fill (:772), or on the dithered lead (:773-780). 9999px was Spectrum's. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's bar track is the inset surface (TerminalGlassLab.tsx:767) — a\n     * recess. gray-300 is a mid-slate slab that read LIGHTER than its host panel in\n     * dark, inverting the recess. */\n    default: \"pasteboard\",\n    isStaticColor: \"transparent-overlay-300\",\n    forcedColors: \"ButtonFace\",\n  },\n  outlineWidth: {\n    default: 0,\n    forcedColors: 1,\n  },\n  outlineStyle: {\n    default: \"none\",\n    forcedColors: \"solid\",\n  },\n  outlineColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  zIndex: 1,\n  /* The register's bar is 8px (the XP bar, TerminalGlassLab.tsx:763-770), so the band\n   * is shifted one rung up to put the DEFAULT size on the drawn value rather than two\n   * rungs under it. Four distinct rungs are kept — the size axis still moves, it just\n   * starts where the register draws. */\n  height: {\n    default: 8,\n    size: {\n      S: 6,\n      M: 8,\n      L: 10,\n      XL: 12,\n    },\n  },\n  /* A divided bar has to SHOW the division, and the only thing that can show it is the\n   * track's own recess between the sections — this register has no rules and no drop\n   * shadows to draw a separator with. `overflow: hidden` above clips the gap's outer\n   * halves at the ends, so the run still starts and finishes flush. */\n  columnGap: {\n    hasSegments: 2,\n  },\n});\n\n/* The handoff rims the bar with --edge-glass, but paints the rim on a separate\n * absolutely-positioned overlay rather than on the track itself\n * (TerminalGlassLab.tsx:781-788). That is not incidental: an inset box-shadow is\n * painted with the element's own background, i.e. UNDER every in-flow child, and\n * `overflow: hidden` clips children without lifting the shadow above them. A rim\n * declared on trackStyles would therefore be occluded across the filled fraction of\n * the bar and survive only on the empty remainder — a half-rim that reads as a bug.\n * Since this register casts no drop shadows, the rim is the only thing seating the\n * bar in its surface, so it has to be drawn where it can be seen.\n * `borderRadius: \"inherit\"` so it keeps tracking the track's corner if that moves.\n * Static (no conditions), so the macro yields a string used directly as a class —\n * same pattern as color/ColorSwatchPicker.tsx:119-133, applied at :233. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<ProgressBarStyleState>({\n  width: \"full\",\n  height: \"full\",\n  borderStyle: \"none\",\n  /* Square, to match the track. Redundant against the track's `overflow: hidden`,\n   * but kept explicit so the two agree on the page — the handoff's fill segment\n   * (TerminalGlassLab.tsx:772) is a bare `width: \"84%\"` div with no radius. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: \"accent\",\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  // Mirror upstream `fill`: the origin only matters for the indeterminate sweep\n  // (translateX/scaleX). Applying it unconditionally shifts the determinate\n  // bar's computed `transform-origin` off centre with no visual effect — a\n  // self-inflicted divergence D1 flags on the `fill` part.\n  transformOrigin: {\n    isIndeterminate: \"left\",\n  },\n});\n\n/* The \"in flight\" segment: the register's ordered-dither checker\n * (repeating-conic at a 4px tile, TerminalGlassLab.tsx:773-780) continuing the\n * fill at half visual density. The accent has to reach the gradient through a\n * custom property because the macro's color vocabulary stops at backgroundColor —\n * same trick as Badge's `--iconPrimary` and ProgressCircle's `--pv-ring-fill`. */\nconst pendingStyles = style<ProgressBarStyleState>({\n  height: \"full\",\n  flexShrink: 0,\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundImage: \"[repeating-conic-gradient(var(--pv-pending-fill) 0% 25%, transparent 0% 50%)]\",\n  backgroundSize: \"[4px 4px]\",\n  \"--pv-pending-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\n/* One section of a divided bar. It is a track in miniature — the fill and the pending\n * dither are the SAME two elements as in the undivided bar, just clipped to this slice\n * — so a chapter bar cannot drift away from a plain one. Width is inline: it is data\n * (the caller's ratio), not a style variant. */\nconst segmentStyles = style({\n  position: \"relative\",\n  height: \"full\",\n  display: \"flex\",\n  overflow: \"hidden\",\n  flexShrink: 0,\n});\n\n/* The bracket form. Mono at the readout's own step so the glyph run and the \"40%\"\n * beside it sit on one baseline in one face — the two are read as a single line of\n * terminal output, which is the whole reason this form exists. No tracking: the cells\n * are meant to touch, the way they do inside a bracket in a log. */\nconst bracketStyles = style<ProgressBarStyleState>({\n  gridArea: \"bar\",\n  alignSelf: \"center\",\n  fontFamily: \"code\",\n  fontSize: controlFontStep(1),\n  fontWeight: \"normal\",\n  whiteSpace: \"nowrap\",\n  color: {\n    default: \"accent\",\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/**\n * The bracket's glyph run for a percentage: filled cells, then empty ones, inside\n * literal brackets. Rounds rather than floors so a bar that is visually nearly full\n * does not read `▮▮▮▮▮▮▮▮▮▯` at 99%; 0 and 100 are exact because clamping happens on\n * the percentage before it arrives.\n */\nfunction bracketRun(percentage: number): string {\n  const filled = clamp(Math.round((percentage / 100) * BRACKET_CELLS), 0, BRACKET_CELLS);\n  return `[${BRACKET_FILLED.repeat(filled)}${BRACKET_EMPTY.repeat(BRACKET_CELLS - filled)}]`;\n}\n\n/**\n * Turns the caller's relative weights into painted sections: each one carries its share\n * of the track's width plus the fraction of ITSELF that the fill and the pending dither\n * cover. Non-finite and non-positive weights are dropped (a zero-width section is not a\n * section), and fewer than two survivors means there is nothing to divide — the caller\n * gets the plain bar back rather than a single section pretending to be one.\n */\nfunction resolveSegments(\n  weights: number[] | undefined,\n  percentage: number,\n  pendingWidth: number,\n): { width: number; fill: number; pending: number }[] | null {\n  if (!weights) {\n    return null;\n  }\n  const usable = weights.filter((weight) => Number.isFinite(weight) && weight > 0);\n  if (usable.length < 2) {\n    return null;\n  }\n  const total = usable.reduce((sum, weight) => sum + weight, 0);\n  const filledEnd = percentage;\n  const pendingEnd = percentage + pendingWidth;\n  let start = 0;\n  return usable.map((weight) => {\n    const width = (weight / total) * 100;\n    const end = start + width;\n    const fill = (clamp(filledEnd, start, end) - start) / width;\n    const pending = (clamp(pendingEnd, start, end) - start) / width - fill;\n    start = end;\n    return { width, fill: fill * 100, pending: pending * 100 };\n  });\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction safeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\nfunction stringValueLabel(value: JSX.Element | undefined): string | undefined {\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n  return undefined;\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\nconst indeterminateAnimation = style<{ direction?: \"ltr\" | \"rtl\" | string }>({\n  animation: {\n    direction: {\n      ltr: progressBarIndeterminateLtr,\n      rtl: progressBarIndeterminateRtl,\n    },\n  },\n  animationDuration: 1000,\n  animationIterationCount: \"infinite\",\n  animationTimingFunction: \"in-out\",\n  willChange: \"transform\",\n  position: \"relative\",\n});\n\nexport function ProgressBar(props: ProgressBarProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressBarContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressBarProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"pendingValue\",\n    \"trackStyle\",\n    \"segments\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"isIndeterminate\",\n    \"formatOptions\",\n    \"size\",\n    \"label\",\n    \"staticColor\",\n    \"labelPosition\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const locale = useLocale();\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): ProgressBarStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isIndeterminate: isIndeterminate(),\n    hasSegments: segments() != null,\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const progressAria = createProgressBar({\n    get id() {\n      return local.id;\n    },\n    get value() {\n      return local.value;\n    },\n    get minValue() {\n      return local.minValue;\n    },\n    get maxValue() {\n      return local.maxValue;\n    },\n    get valueLabel() {\n      return stringValueLabel(local.valueLabel);\n    },\n    get isIndeterminate() {\n      return isIndeterminate();\n    },\n    get formatOptions() {\n      return local.formatOptions;\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return accessibleLabelledBy();\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const value = clamp(local.value ?? 0, minValue, maxValue);\n    return ((value - minValue) / safeRange(minValue, maxValue)) * 100;\n  });\n  const pendingWidth = createMemo(() => {\n    if (local.pendingValue == null) {\n      return null;\n    }\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const pending = clamp(local.pendingValue, minValue, maxValue);\n    const pendingPercentage = ((pending - minValue) / safeRange(minValue, maxValue)) * 100;\n    return Math.max(0, pendingPercentage - percentage());\n  });\n  /* Indeterminate wins over both local forms: neither a fixed glyph run nor a set of\n   * fixed sections can express \"unknown\", and faking either would report a value the\n   * component does not have. */\n  const isBracket = () => local.trackStyle === \"bracket\" && !isIndeterminate();\n  const segments = createMemo(() =>\n    isIndeterminate() ? null : resolveSegments(local.segments, percentage(), pendingWidth() ?? 0),\n  );\n  const valueText = () =>\n    local.valueLabel ?? (progressAria.progressBarProps[\"aria-valuetext\"] as string | undefined);\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <div\n      {...getDataAttributes(merged)}\n      {...progressAria.progressBarProps}\n      data-rac=\"\"\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={mergedUnsafeStyle()}\n      slot={local.slot ?? undefined}\n    >\n      {local.label && (\n        <div class={labelWrapperStyles(state(\"start\"))}>\n          <span id={labelId} class={labelStyles(state(\"start\"))}>\n            {local.label}\n          </span>\n        </div>\n      )}\n      {local.label && !isIndeterminate() && (\n        <span class={valueStyles(state(\"end\"))}>{valueText()}</span>\n      )}\n      {isBracket() ? (\n        <span aria-hidden=\"true\" class={bracketStyles(state())}>\n          {bracketRun(percentage())}\n        </span>\n      ) : (\n        <div class={trackStyles(state())}>\n          {segments() ? (\n            <For each={segments()!}>\n              {(segment) => (\n                <div class={segmentStyles} style={{ width: `${segment.width}%` }}>\n                  <div class={fillStyles(state())} style={{ width: `${segment.fill}%` }} />\n                  {segment.pending > 0 && (\n                    <div\n                      aria-hidden=\"true\"\n                      class={pendingStyles(state())}\n                      style={{ width: `${segment.pending}%` }}\n                    />\n                  )}\n                </div>\n              )}\n            </For>\n          ) : (\n            <>\n              <div\n                class={mergeStyles(\n                  fillStyles(state()),\n                  isIndeterminate()\n                    ? indeterminateAnimation({ direction: locale().direction })\n                    : null,\n                )}\n                style={{\n                  width: isIndeterminate() ? undefined : `${percentage()}%`,\n                }}\n              />\n              {!isIndeterminate() && pendingWidth() != null && (\n                <div\n                  aria-hidden=\"true\"\n                  class={pendingStyles(state())}\n                  style={{ width: `${pendingWidth()}%` }}\n                />\n              )}\n            </>\n          )}\n          <div aria-hidden=\"true\" class={trackRimStyles} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}