@proyecto-viviana/ui 0.6.1 → 0.6.3

package/dist/meter/index.js

@@ -118,7 +118,7 @@ const labelStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -162,7 +162,7 @@ const valueStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	rules += " z8bmXs151";

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createMeter } from \"@proyecto-viviana/solidaria\";\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { lightDark, style } from \"../style\" 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\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\";\n/* `success` and `warning` are accepted alias names for `positive`/`notice` — the\n * negative/warning/success status trio Button and Badge also expose — folded onto\n * the canonical channel by normalizeVariant before styling. */\ntype MeterVariantProp = MeterVariant | \"success\" | \"warning\";\ntype MeterStaticColor = \"white\" | \"black\" | \"auto\";\ntype MeterLabelPosition = \"top\" | \"side\";\n\nfunction normalizeVariant(variant: MeterVariantProp | undefined): MeterVariant {\n  switch (variant) {\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    default:\n      return variant ?? \"informative\";\n  }\n}\n\nexport interface MeterProps {\n  /** The current value (controlled). @default 0 */\n  value?: 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. \"75 GB\"). */\n  valueLabel?: JSX.Element;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the meter. @default 'M' */\n  size?: MeterSize;\n  /**\n   * Render the meter as this many discrete blocks instead of a continuous bar —\n   * the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory\n   * rows, TerminalGlassLab.tsx:914-931). The value quantizes to\n   * `round(fraction × segments)` filled blocks; the accessible value stays\n   * continuous.\n   */\n  segments?: number;\n  /** The visual style variant. `success`/`warning` alias `positive`/`notice`. @default 'informative' */\n  variant?: MeterVariantProp;\n  /** The label to display above the meter. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: MeterStaticColor;\n  /** The label's overall position relative to the meter. @default 'top' */\n  labelPosition?: MeterLabelPosition;\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 MeterContext = createContext<SpectrumContextValue<MeterProps>>(null);\n\ntype MeterStyleState = {\n  size: MeterSize;\n  variant: MeterVariant;\n  staticColor?: MeterStaticColor;\n  labelPosition: MeterLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isSegmented: boolean;\n};\n\nconst wrapperStyles = style<MeterStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"1fr\", \"auto\"],\n        side: [\"auto\", \"1fr\"],\n      },\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: [\"label value\", \"bar bar\"],\n        side: [\"label bar value\"],\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<MeterStyleState>({\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      /* Size containment here relies on the bar row to size the grid — the\n       * continuous track advertises a 208px intrinsic width (fieldInput's\n       * containIntrinsicWidth). The segment row is content-sized (a handful of\n       * 7px blocks), so with segments the label must contribute its own width\n       * or the value overprints it. */\n      top: {\n        default: \"inline-size\",\n        isSegmented: \"none\",\n      },\n    },\n  },\n});\n\nconst labelStyles = style<MeterStyleState>({\n  ...fieldLabel(),\n});\n\nconst valueStyles = style<MeterStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<MeterStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. wrapperStyles above is already\n   * `position: \"relative\"`, so without this the overlay's `inset: 0` would\n   * resolve against the whole component and rim the label and value rows too.\n   * `zIndex: 1` below is unaffected: it already applied without positioning\n   * (the track is a grid item), and it keeps applying now. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Square, matching ProgressBar's track. The register's bar primitive (the XP\n   * bar in design-handoff-v2/TerminalGlassLab.tsx) declares no border-radius on\n   * either the track or the fill, so both compute to 0. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's recessed surface: the same `var(--surface-inset)` the\n     * handoff's bar track paints, and the same one ProgressBar uses. */\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 rim goes on its own absolutely-positioned layer rather than on trackStyles,\n * which is how the handoff paints it too (design-handoff-v2/TerminalGlassLab.tsx\n * lays an `inset: 0` / `pointer-events: none` / `box-shadow: var(--edge-glass)`\n * div over the bar's fills). The reason it cannot live on the track: an inset\n * box-shadow is painted with the element's own background, beneath every in-flow\n * descendant. `overflow: hidden` clips the fill but does not lift the track's\n * inset shadow above it, so a rim declared on the track would be occluded across\n * the filled fraction and survive only on the empty remainder — a half-rim that\n * reads as a bug. Kept local rather than shared with ProgressBar: the two have no\n * common style module today and inventing one widens a two-site fix. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/* The discrete form. The register draws it as literal ▮/▯ glyphs in mono text\n * (TerminalGlassLab.tsx:918: `[▮▮▮▯▯] 3/5`); as a library primitive the blocks\n * are drawn divs at the glyph's box (7×12 — U+25AE's ink at the wells' 11.5px\n * mono), because a glyph's rendered size shifts with the consumer's font stack.\n * Filled and empty share one ink — the glyph pair differs only in fill, and the\n * register keeps channel color OFF the blocks (it lives on the row label). Here\n * the ink follows the variant so the meter still reads outside a well. No rim:\n * the blocks are marks, not a recessed surface. */\n/* Static (no conditions), so the macro yields a string used directly as a\n * class — same pattern as trackRimStyles above. */\nconst segmentRowStyles = style({\n  gridArea: \"bar\",\n  display: \"flex\",\n  alignItems: \"center\",\n  columnGap: \"[3px]\",\n});\n\ntype MeterSegmentStyleState = MeterStyleState & { isFilled: boolean };\n\nconst segmentStyles = style<MeterSegmentStyleState>({\n  width: 7,\n  height: 12,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      default: lightDark(\"informative-800\", \"informative-900\"),\n      variant: {\n        positive: lightDark(\"positive-800\", \"positive-900\"),\n        notice: lightDark(\"notice-800\", \"notice-900\"),\n        negative: lightDark(\"negative-800\", \"negative-900\"),\n      },\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 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\nexport function Meter(props: MeterProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as MeterProps & {\n    class?: string;\n    role?: string;\n    style?: JSX.CSSProperties;\n    showValueLabel?: boolean;\n    children?: JSX.Element;\n  };\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"formatOptions\",\n    \"size\",\n    \"segments\",\n    \"variant\",\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    \"class\",\n    \"role\",\n    \"style\",\n    \"showValueLabel\",\n    \"children\",\n  ]);\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const variant = () => normalizeVariant(local.variant);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): MeterStyleState => ({\n    size: size(),\n    variant: variant(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isSegmented: segmentCount() != null,\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const meterAria = createMeter({\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 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) / (maxValue - minValue)) * 100;\n  });\n  const valueText = () =>\n    local.valueLabel ?? (meterAria.meterProps[\"aria-valuetext\"] as string | undefined);\n  const segmentCount = () => {\n    const segments = local.segments;\n    return segments != null && Number.isFinite(segments) && segments >= 1\n      ? Math.floor(segments)\n      : null;\n  };\n  const filledCount = createMemo(() => {\n    const segments = segmentCount();\n    return segments == null\n      ? 0\n      : clamp(Math.round((percentage() / 100) * segments), 0, segments);\n  });\n  const showValue = () => !!local.label;\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      {...meterAria.meterProps}\n      role=\"meter\"\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      {showValue() && <Text styles={valueStyles(state(\"end\"))}>{valueText()}</Text>}\n      <SkeletonWrapper>\n        {segmentCount() != null ? (\n          <div class={segmentRowStyles} aria-hidden=\"true\">\n            <For each={Array.from({ length: segmentCount() ?? 0 })}>\n              {(_, index) => (\n                <div class={segmentStyles({ ...state(), isFilled: index() < filledCount() })} />\n              )}\n            </For>\n          </div>\n        ) : (\n          <div class={trackStyles(state())}>\n            <div class={fillStyles(state())} style={{ width: `${percentage()}%` }} />\n            <div aria-hidden=\"true\" class={trackRimStyles} />\n          </div>\n        )}\n      </SkeletonWrapper>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createMeter } from \"@proyecto-viviana/solidaria\";\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { lightDark, style } from \"../style\" 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\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\";\n/* `success` and `warning` are accepted alias names for `positive`/`notice` — the\n * negative/warning/success status trio Button and Badge also expose — folded onto\n * the canonical channel by normalizeVariant before styling. */\ntype MeterVariantProp = MeterVariant | \"success\" | \"warning\";\ntype MeterStaticColor = \"white\" | \"black\" | \"auto\";\ntype MeterLabelPosition = \"top\" | \"side\";\n\nfunction normalizeVariant(variant: MeterVariantProp | undefined): MeterVariant {\n  switch (variant) {\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    default:\n      return variant ?? \"informative\";\n  }\n}\n\nexport interface MeterProps {\n  /** The current value (controlled). @default 0 */\n  value?: 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. \"75 GB\"). */\n  valueLabel?: JSX.Element;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the meter. @default 'M' */\n  size?: MeterSize;\n  /**\n   * Render the meter as this many discrete blocks instead of a continuous bar —\n   * the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory\n   * rows, TerminalGlassLab.tsx:914-931). The value quantizes to\n   * `round(fraction × segments)` filled blocks; the accessible value stays\n   * continuous.\n   */\n  segments?: number;\n  /** The visual style variant. `success`/`warning` alias `positive`/`notice`. @default 'informative' */\n  variant?: MeterVariantProp;\n  /** The label to display above the meter. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: MeterStaticColor;\n  /** The label's overall position relative to the meter. @default 'top' */\n  labelPosition?: MeterLabelPosition;\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 MeterContext = createContext<SpectrumContextValue<MeterProps>>(null);\n\ntype MeterStyleState = {\n  size: MeterSize;\n  variant: MeterVariant;\n  staticColor?: MeterStaticColor;\n  labelPosition: MeterLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isSegmented: boolean;\n};\n\nconst wrapperStyles = style<MeterStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"1fr\", \"auto\"],\n        side: [\"auto\", \"1fr\"],\n      },\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: [\"label value\", \"bar bar\"],\n        side: [\"label bar value\"],\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<MeterStyleState>({\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      /* Size containment here relies on the bar row to size the grid — the\n       * continuous track advertises a 208px intrinsic width (fieldInput's\n       * containIntrinsicWidth). The segment row is content-sized (a handful of\n       * 7px blocks), so with segments the label must contribute its own width\n       * or the value overprints it. */\n      top: {\n        default: \"inline-size\",\n        isSegmented: \"none\",\n      },\n    },\n  },\n});\n\nconst labelStyles = style<MeterStyleState>({\n  ...fieldLabel(),\n});\n\nconst valueStyles = style<MeterStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<MeterStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. wrapperStyles above is already\n   * `position: \"relative\"`, so without this the overlay's `inset: 0` would\n   * resolve against the whole component and rim the label and value rows too.\n   * `zIndex: 1` below is unaffected: it already applied without positioning\n   * (the track is a grid item), and it keeps applying now. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Square, matching ProgressBar's track. The register's bar primitive (the XP\n   * bar in design-handoff-v2/TerminalGlassLab.tsx) declares no border-radius on\n   * either the track or the fill, so both compute to 0. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's recessed surface: the same `var(--surface-inset)` the\n     * handoff's bar track paints, and the same one ProgressBar uses. */\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 rim goes on its own absolutely-positioned layer rather than on trackStyles,\n * which is how the handoff paints it too (design-handoff-v2/TerminalGlassLab.tsx\n * lays an `inset: 0` / `pointer-events: none` / `box-shadow: var(--edge-glass)`\n * div over the bar's fills). The reason it cannot live on the track: an inset\n * box-shadow is painted with the element's own background, beneath every in-flow\n * descendant. `overflow: hidden` clips the fill but does not lift the track's\n * inset shadow above it, so a rim declared on the track would be occluded across\n * the filled fraction and survive only on the empty remainder — a half-rim that\n * reads as a bug. Kept local rather than shared with ProgressBar: the two have no\n * common style module today and inventing one widens a two-site fix. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/* The discrete form. The register draws it as literal ▮/▯ glyphs in mono text\n * (TerminalGlassLab.tsx:918: `[▮▮▮▯▯] 3/5`); as a library primitive the blocks\n * are drawn divs at the glyph's box (7×12 — U+25AE's ink at the wells' 11.5px\n * mono), because a glyph's rendered size shifts with the consumer's font stack.\n * Filled and empty share one ink — the glyph pair differs only in fill, and the\n * register keeps channel color OFF the blocks (it lives on the row label). Here\n * the ink follows the variant so the meter still reads outside a well. No rim:\n * the blocks are marks, not a recessed surface. */\n/* Static (no conditions), so the macro yields a string used directly as a\n * class — same pattern as trackRimStyles above. */\nconst segmentRowStyles = style({\n  gridArea: \"bar\",\n  display: \"flex\",\n  alignItems: \"center\",\n  columnGap: \"[3px]\",\n});\n\ntype MeterSegmentStyleState = MeterStyleState & { isFilled: boolean };\n\nconst segmentStyles = style<MeterSegmentStyleState>({\n  width: 7,\n  height: 12,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      default: lightDark(\"informative-800\", \"informative-900\"),\n      variant: {\n        positive: lightDark(\"positive-800\", \"positive-900\"),\n        notice: lightDark(\"notice-800\", \"notice-900\"),\n        negative: lightDark(\"negative-800\", \"negative-900\"),\n      },\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 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\nexport function Meter(props: MeterProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as MeterProps & {\n    class?: string;\n    role?: string;\n    style?: JSX.CSSProperties;\n    showValueLabel?: boolean;\n    children?: JSX.Element;\n  };\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"formatOptions\",\n    \"size\",\n    \"segments\",\n    \"variant\",\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    \"class\",\n    \"role\",\n    \"style\",\n    \"showValueLabel\",\n    \"children\",\n  ]);\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const variant = () => normalizeVariant(local.variant);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): MeterStyleState => ({\n    size: size(),\n    variant: variant(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isSegmented: segmentCount() != null,\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const meterAria = createMeter({\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 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) / (maxValue - minValue)) * 100;\n  });\n  const valueText = () =>\n    local.valueLabel ?? (meterAria.meterProps[\"aria-valuetext\"] as string | undefined);\n  const segmentCount = () => {\n    const segments = local.segments;\n    return segments != null && Number.isFinite(segments) && segments >= 1\n      ? Math.floor(segments)\n      : null;\n  };\n  const filledCount = createMemo(() => {\n    const segments = segmentCount();\n    return segments == null ? 0 : clamp(Math.round((percentage() / 100) * segments), 0, segments);\n  });\n  const showValue = () => !!local.label;\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      {...meterAria.meterProps}\n      role=\"meter\"\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      {showValue() && <Text styles={valueStyles(state(\"end\"))}>{valueText()}</Text>}\n      <SkeletonWrapper>\n        {segmentCount() != null ? (\n          <div class={segmentRowStyles} aria-hidden=\"true\">\n            <For each={Array.from({ length: segmentCount() ?? 0 })}>\n              {(_, index) => (\n                <div class={segmentStyles({ ...state(), isFilled: index() < filledCount() })} />\n              )}\n            </For>\n          </div>\n        ) : (\n          <div class={trackStyles(state())}>\n            <div class={fillStyles(state())} style={{ width: `${percentage()}%` }} />\n            <div aria-hidden=\"true\" class={trackRimStyles} />\n          </div>\n        )}\n      </SkeletonWrapper>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/meter/index.jsx

@@ -113,7 +113,7 @@ const labelStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -157,7 +157,7 @@ const valueStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	rules += " z8bmXs151";

package/dist/meter/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/meter/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createMeter } from \"@proyecto-viviana/solidaria\";\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { lightDark, style } from \"../style\" 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\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\";\n/* `success` and `warning` are accepted alias names for `positive`/`notice` — the\n * negative/warning/success status trio Button and Badge also expose — folded onto\n * the canonical channel by normalizeVariant before styling. */\ntype MeterVariantProp = MeterVariant | \"success\" | \"warning\";\ntype MeterStaticColor = \"white\" | \"black\" | \"auto\";\ntype MeterLabelPosition = \"top\" | \"side\";\n\nfunction normalizeVariant(variant: MeterVariantProp | undefined): MeterVariant {\n  switch (variant) {\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    default:\n      return variant ?? \"informative\";\n  }\n}\n\nexport interface MeterProps {\n  /** The current value (controlled). @default 0 */\n  value?: 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. \"75 GB\"). */\n  valueLabel?: JSX.Element;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the meter. @default 'M' */\n  size?: MeterSize;\n  /**\n   * Render the meter as this many discrete blocks instead of a continuous bar —\n   * the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory\n   * rows, TerminalGlassLab.tsx:914-931). The value quantizes to\n   * `round(fraction × segments)` filled blocks; the accessible value stays\n   * continuous.\n   */\n  segments?: number;\n  /** The visual style variant. `success`/`warning` alias `positive`/`notice`. @default 'informative' */\n  variant?: MeterVariantProp;\n  /** The label to display above the meter. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: MeterStaticColor;\n  /** The label's overall position relative to the meter. @default 'top' */\n  labelPosition?: MeterLabelPosition;\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 MeterContext = createContext<SpectrumContextValue<MeterProps>>(null);\n\ntype MeterStyleState = {\n  size: MeterSize;\n  variant: MeterVariant;\n  staticColor?: MeterStaticColor;\n  labelPosition: MeterLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isSegmented: boolean;\n};\n\nconst wrapperStyles = style<MeterStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"1fr\", \"auto\"],\n        side: [\"auto\", \"1fr\"],\n      },\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: [\"label value\", \"bar bar\"],\n        side: [\"label bar value\"],\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<MeterStyleState>({\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      /* Size containment here relies on the bar row to size the grid — the\n       * continuous track advertises a 208px intrinsic width (fieldInput's\n       * containIntrinsicWidth). The segment row is content-sized (a handful of\n       * 7px blocks), so with segments the label must contribute its own width\n       * or the value overprints it. */\n      top: {\n        default: \"inline-size\",\n        isSegmented: \"none\",\n      },\n    },\n  },\n});\n\nconst labelStyles = style<MeterStyleState>({\n  ...fieldLabel(),\n});\n\nconst valueStyles = style<MeterStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<MeterStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. wrapperStyles above is already\n   * `position: \"relative\"`, so without this the overlay's `inset: 0` would\n   * resolve against the whole component and rim the label and value rows too.\n   * `zIndex: 1` below is unaffected: it already applied without positioning\n   * (the track is a grid item), and it keeps applying now. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Square, matching ProgressBar's track. The register's bar primitive (the XP\n   * bar in design-handoff-v2/TerminalGlassLab.tsx) declares no border-radius on\n   * either the track or the fill, so both compute to 0. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's recessed surface: the same `var(--surface-inset)` the\n     * handoff's bar track paints, and the same one ProgressBar uses. */\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 rim goes on its own absolutely-positioned layer rather than on trackStyles,\n * which is how the handoff paints it too (design-handoff-v2/TerminalGlassLab.tsx\n * lays an `inset: 0` / `pointer-events: none` / `box-shadow: var(--edge-glass)`\n * div over the bar's fills). The reason it cannot live on the track: an inset\n * box-shadow is painted with the element's own background, beneath every in-flow\n * descendant. `overflow: hidden` clips the fill but does not lift the track's\n * inset shadow above it, so a rim declared on the track would be occluded across\n * the filled fraction and survive only on the empty remainder — a half-rim that\n * reads as a bug. Kept local rather than shared with ProgressBar: the two have no\n * common style module today and inventing one widens a two-site fix. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/* The discrete form. The register draws it as literal ▮/▯ glyphs in mono text\n * (TerminalGlassLab.tsx:918: `[▮▮▮▯▯] 3/5`); as a library primitive the blocks\n * are drawn divs at the glyph's box (7×12 — U+25AE's ink at the wells' 11.5px\n * mono), because a glyph's rendered size shifts with the consumer's font stack.\n * Filled and empty share one ink — the glyph pair differs only in fill, and the\n * register keeps channel color OFF the blocks (it lives on the row label). Here\n * the ink follows the variant so the meter still reads outside a well. No rim:\n * the blocks are marks, not a recessed surface. */\n/* Static (no conditions), so the macro yields a string used directly as a\n * class — same pattern as trackRimStyles above. */\nconst segmentRowStyles = style({\n  gridArea: \"bar\",\n  display: \"flex\",\n  alignItems: \"center\",\n  columnGap: \"[3px]\",\n});\n\ntype MeterSegmentStyleState = MeterStyleState & { isFilled: boolean };\n\nconst segmentStyles = style<MeterSegmentStyleState>({\n  width: 7,\n  height: 12,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      default: lightDark(\"informative-800\", \"informative-900\"),\n      variant: {\n        positive: lightDark(\"positive-800\", \"positive-900\"),\n        notice: lightDark(\"notice-800\", \"notice-900\"),\n        negative: lightDark(\"negative-800\", \"negative-900\"),\n      },\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 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\nexport function Meter(props: MeterProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as MeterProps & {\n    class?: string;\n    role?: string;\n    style?: JSX.CSSProperties;\n    showValueLabel?: boolean;\n    children?: JSX.Element;\n  };\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"formatOptions\",\n    \"size\",\n    \"segments\",\n    \"variant\",\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    \"class\",\n    \"role\",\n    \"style\",\n    \"showValueLabel\",\n    \"children\",\n  ]);\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const variant = () => normalizeVariant(local.variant);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): MeterStyleState => ({\n    size: size(),\n    variant: variant(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isSegmented: segmentCount() != null,\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const meterAria = createMeter({\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 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) / (maxValue - minValue)) * 100;\n  });\n  const valueText = () =>\n    local.valueLabel ?? (meterAria.meterProps[\"aria-valuetext\"] as string | undefined);\n  const segmentCount = () => {\n    const segments = local.segments;\n    return segments != null && Number.isFinite(segments) && segments >= 1\n      ? Math.floor(segments)\n      : null;\n  };\n  const filledCount = createMemo(() => {\n    const segments = segmentCount();\n    return segments == null\n      ? 0\n      : clamp(Math.round((percentage() / 100) * segments), 0, segments);\n  });\n  const showValue = () => !!local.label;\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      {...meterAria.meterProps}\n      role=\"meter\"\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      {showValue() && <Text styles={valueStyles(state(\"end\"))}>{valueText()}</Text>}\n      <SkeletonWrapper>\n        {segmentCount() != null ? (\n          <div class={segmentRowStyles} aria-hidden=\"true\">\n            <For each={Array.from({ length: segmentCount() ?? 0 })}>\n              {(_, index) => (\n                <div class={segmentStyles({ ...state(), isFilled: index() < filledCount() })} />\n              )}\n            </For>\n          </div>\n        ) : (\n          <div class={trackStyles(state())}>\n            <div class={fillStyles(state())} style={{ width: `${percentage()}%` }} />\n            <div aria-hidden=\"true\" class={trackRimStyles} />\n          </div>\n        )}\n      </SkeletonWrapper>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/meter/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createMeter } from \"@proyecto-viviana/solidaria\";\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { lightDark, style } from \"../style\" 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\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\";\n/* `success` and `warning` are accepted alias names for `positive`/`notice` — the\n * negative/warning/success status trio Button and Badge also expose — folded onto\n * the canonical channel by normalizeVariant before styling. */\ntype MeterVariantProp = MeterVariant | \"success\" | \"warning\";\ntype MeterStaticColor = \"white\" | \"black\" | \"auto\";\ntype MeterLabelPosition = \"top\" | \"side\";\n\nfunction normalizeVariant(variant: MeterVariantProp | undefined): MeterVariant {\n  switch (variant) {\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    default:\n      return variant ?? \"informative\";\n  }\n}\n\nexport interface MeterProps {\n  /** The current value (controlled). @default 0 */\n  value?: 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. \"75 GB\"). */\n  valueLabel?: JSX.Element;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the meter. @default 'M' */\n  size?: MeterSize;\n  /**\n   * Render the meter as this many discrete blocks instead of a continuous bar —\n   * the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory\n   * rows, TerminalGlassLab.tsx:914-931). The value quantizes to\n   * `round(fraction × segments)` filled blocks; the accessible value stays\n   * continuous.\n   */\n  segments?: number;\n  /** The visual style variant. `success`/`warning` alias `positive`/`notice`. @default 'informative' */\n  variant?: MeterVariantProp;\n  /** The label to display above the meter. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: MeterStaticColor;\n  /** The label's overall position relative to the meter. @default 'top' */\n  labelPosition?: MeterLabelPosition;\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 MeterContext = createContext<SpectrumContextValue<MeterProps>>(null);\n\ntype MeterStyleState = {\n  size: MeterSize;\n  variant: MeterVariant;\n  staticColor?: MeterStaticColor;\n  labelPosition: MeterLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isSegmented: boolean;\n};\n\nconst wrapperStyles = style<MeterStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"1fr\", \"auto\"],\n        side: [\"auto\", \"1fr\"],\n      },\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: [\"label value\", \"bar bar\"],\n        side: [\"label bar value\"],\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<MeterStyleState>({\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      /* Size containment here relies on the bar row to size the grid — the\n       * continuous track advertises a 208px intrinsic width (fieldInput's\n       * containIntrinsicWidth). The segment row is content-sized (a handful of\n       * 7px blocks), so with segments the label must contribute its own width\n       * or the value overprints it. */\n      top: {\n        default: \"inline-size\",\n        isSegmented: \"none\",\n      },\n    },\n  },\n});\n\nconst labelStyles = style<MeterStyleState>({\n  ...fieldLabel(),\n});\n\nconst valueStyles = style<MeterStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<MeterStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. wrapperStyles above is already\n   * `position: \"relative\"`, so without this the overlay's `inset: 0` would\n   * resolve against the whole component and rim the label and value rows too.\n   * `zIndex: 1` below is unaffected: it already applied without positioning\n   * (the track is a grid item), and it keeps applying now. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Square, matching ProgressBar's track. The register's bar primitive (the XP\n   * bar in design-handoff-v2/TerminalGlassLab.tsx) declares no border-radius on\n   * either the track or the fill, so both compute to 0. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's recessed surface: the same `var(--surface-inset)` the\n     * handoff's bar track paints, and the same one ProgressBar uses. */\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 rim goes on its own absolutely-positioned layer rather than on trackStyles,\n * which is how the handoff paints it too (design-handoff-v2/TerminalGlassLab.tsx\n * lays an `inset: 0` / `pointer-events: none` / `box-shadow: var(--edge-glass)`\n * div over the bar's fills). The reason it cannot live on the track: an inset\n * box-shadow is painted with the element's own background, beneath every in-flow\n * descendant. `overflow: hidden` clips the fill but does not lift the track's\n * inset shadow above it, so a rim declared on the track would be occluded across\n * the filled fraction and survive only on the empty remainder — a half-rim that\n * reads as a bug. Kept local rather than shared with ProgressBar: the two have no\n * common style module today and inventing one widens a two-site fix. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/* The discrete form. The register draws it as literal ▮/▯ glyphs in mono text\n * (TerminalGlassLab.tsx:918: `[▮▮▮▯▯] 3/5`); as a library primitive the blocks\n * are drawn divs at the glyph's box (7×12 — U+25AE's ink at the wells' 11.5px\n * mono), because a glyph's rendered size shifts with the consumer's font stack.\n * Filled and empty share one ink — the glyph pair differs only in fill, and the\n * register keeps channel color OFF the blocks (it lives on the row label). Here\n * the ink follows the variant so the meter still reads outside a well. No rim:\n * the blocks are marks, not a recessed surface. */\n/* Static (no conditions), so the macro yields a string used directly as a\n * class — same pattern as trackRimStyles above. */\nconst segmentRowStyles = style({\n  gridArea: \"bar\",\n  display: \"flex\",\n  alignItems: \"center\",\n  columnGap: \"[3px]\",\n});\n\ntype MeterSegmentStyleState = MeterStyleState & { isFilled: boolean };\n\nconst segmentStyles = style<MeterSegmentStyleState>({\n  width: 7,\n  height: 12,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: lightDark(\"informative-800\", \"informative-900\"),\n    variant: {\n      positive: lightDark(\"positive-800\", \"positive-900\"),\n      notice: lightDark(\"notice-800\", \"notice-900\"),\n      negative: lightDark(\"negative-800\", \"negative-900\"),\n    },\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      default: lightDark(\"informative-800\", \"informative-900\"),\n      variant: {\n        positive: lightDark(\"positive-800\", \"positive-900\"),\n        notice: lightDark(\"notice-800\", \"notice-900\"),\n        negative: lightDark(\"negative-800\", \"negative-900\"),\n      },\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 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\nexport function Meter(props: MeterProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as MeterProps & {\n    class?: string;\n    role?: string;\n    style?: JSX.CSSProperties;\n    showValueLabel?: boolean;\n    children?: JSX.Element;\n  };\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"formatOptions\",\n    \"size\",\n    \"segments\",\n    \"variant\",\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    \"class\",\n    \"role\",\n    \"style\",\n    \"showValueLabel\",\n    \"children\",\n  ]);\n  const labelId = createUniqueId();\n  const size = () => local.size ?? \"M\";\n  const variant = () => normalizeVariant(local.variant);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): MeterStyleState => ({\n    size: size(),\n    variant: variant(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isSegmented: segmentCount() != null,\n  });\n  const accessibleLabelledBy = () =>\n    local[\"aria-labelledby\"] ?? (!local[\"aria-label\"] && local.label ? labelId : undefined);\n\n  const meterAria = createMeter({\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 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) / (maxValue - minValue)) * 100;\n  });\n  const valueText = () =>\n    local.valueLabel ?? (meterAria.meterProps[\"aria-valuetext\"] as string | undefined);\n  const segmentCount = () => {\n    const segments = local.segments;\n    return segments != null && Number.isFinite(segments) && segments >= 1\n      ? Math.floor(segments)\n      : null;\n  };\n  const filledCount = createMemo(() => {\n    const segments = segmentCount();\n    return segments == null ? 0 : clamp(Math.round((percentage() / 100) * segments), 0, segments);\n  });\n  const showValue = () => !!local.label;\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      {...meterAria.meterProps}\n      role=\"meter\"\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      {showValue() && <Text styles={valueStyles(state(\"end\"))}>{valueText()}</Text>}\n      <SkeletonWrapper>\n        {segmentCount() != null ? (\n          <div class={segmentRowStyles} aria-hidden=\"true\">\n            <For each={Array.from({ length: segmentCount() ?? 0 })}>\n              {(_, index) => (\n                <div class={segmentStyles({ ...state(), isFilled: index() < filledCount() })} />\n              )}\n            </For>\n          </div>\n        ) : (\n          <div class={trackStyles(state())}>\n            <div class={fillStyles(state())} style={{ width: `${percentage()}%` }} />\n            <div aria-hidden=\"true\" class={trackRimStyles} />\n          </div>\n        )}\n      </SkeletonWrapper>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/notificationbadge/index.js

@@ -57,7 +57,7 @@ const notificationBadge = function anonymous(props, overrides) {
 	rules += " kh151";
 	rules += " jh151";
 	if (props.isStaticColor) rules += " -g_-g_c151";
-	else rules += " -g_-gdeCgNc151";
+	else rules += " -g_-gnhAeB151";
 	rules += " -g_-lgb151";
 	if (props.size === "XL") if (props.isIndicatorOnly) rules += " -F_-Fspvr8c151";
 	else rules += " -F_-Fm151";

package/dist/notificationbadge/index.jsx

@@ -55,7 +55,7 @@ const notificationBadge = function anonymous(props, overrides) {
 	rules += " kh151";
 	rules += " jh151";
 	if (props.isStaticColor) rules += " -g_-g_c151";
-	else rules += " -g_-gdeCgNc151";
+	else rules += " -g_-gnhAeB151";
 	rules += " -g_-lgb151";
 	if (props.size === "XL") if (props.isIndicatorOnly) rules += " -F_-Fspvr8c151";
 	else rules += " -F_-Fm151";

package/dist/picker/index.js

@@ -152,7 +152,7 @@ const pickerLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -312,7 +312,7 @@ const pickerValue = function anonymous(props) {
 	rules += " eb151";
 	rules += " Fb151";
 	rules += " p40ub4c151";
-	rules += " pg8a8eUUi0Fe151";
+	rules += " pg8a8eWQ7V3d151";
 	return rules;
 };
 const pickerChevron = function anonymous(props) {
@@ -419,7 +419,7 @@ const pickerHelpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " _qb151";
 	rules += " TgOnRt151";
 	return rules;

package/dist/picker/index.jsx

@@ -143,7 +143,7 @@ const pickerLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -304,7 +304,7 @@ const pickerValue = function anonymous(props) {
 	rules += " eb151";
 	rules += " Fb151";
 	rules += " p40ub4c151";
-	rules += " pg8a8eUUi0Fe151";
+	rules += " pg8a8eWQ7V3d151";
 	return rules;
 };
 const pickerValueText = " sb151 _ub151 _Nc151 Pc151 _Yb151 _7c151";
@@ -412,7 +412,7 @@ const pickerHelpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " _qb151";
 	rules += " TgOnRt151";
 	return rules;

package/dist/popover/index.js

@@ -4,7 +4,7 @@ import { className, createComponent, effect, getNextElement, getNextMarker, inse
 import { Show, splitProps } from "solid-js";
 import { OverlayArrow, Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "@proyecto-viviana/solidaria-components";
 //#region src/popover/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 18 10"><path transform="translate(0 -1)"d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1">`), _tmpl$3 = /*#__PURE__*/ template(`<p class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pUUi0Fe151 Js151">`), _tmpl$4 = /*#__PURE__*/ template(`<div><h3 class=" uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151"></h3><!$><!/>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 18 10"><path transform="translate(0 -1)"d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1">`), _tmpl$3 = /*#__PURE__*/ template(`<p class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pWQ7V3d151 Js151">`), _tmpl$4 = /*#__PURE__*/ template(`<div><h3 class=" uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151"></h3><!$><!/>`);
 const popoverStyles = function anonymous(props) {
 	let rules = " ";
 	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";

package/dist/popover/index.jsx

@@ -235,7 +235,7 @@ function PopoverArrow(props) {
 }
 const popoverHeaderStyles = " Gx151";
 const popoverTitleStyles = " uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151";
-const popoverDescriptionStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pUUi0Fe151 Js151";
+const popoverDescriptionStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pWQ7V3d151 Js151";
 /**
 * Header section for popover with title and optional description.
 */ function PopoverHeader(props) {

package/dist/progress/ProgressCircle.js

@@ -64,7 +64,7 @@ const blockStyles = function anonymous(props) {
 	else if (props.isLit) rules += " gj151";
 	else rules += " gh151";
 	else if (props.isLead) rules += " g9151";
-	else if (props.isLit) rules += " gdeCgNc151";
+	else if (props.isLit) rules += " gnhAeB151";
 	else rules += " gW36Rud151";
 	if (props.isLit) rules += " glc151";
 	else rules += " gla151";
@@ -82,7 +82,7 @@ const blockStyles = function anonymous(props) {
 	if (props.isLit) rules += " _h3jWUfc151";
 	if (props.isLit) rules += " __ea151";
 	if (props.isStaticColor) rules += " -oArxZd-gj151";
-	else rules += " -oArxZd-gdeCgNc151";
+	else rules += " -oArxZd-gnhAeB151";
 	rules += " -oArxZd-lgc151";
 	return rules;
 };

package/dist/progress/ProgressCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.js","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } 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  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 ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\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 ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\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 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\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\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 size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\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 isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\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  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\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      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n        * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressCircle.js","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } 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  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 ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\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 ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\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 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\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\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 size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\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 isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\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  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\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      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n       * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAiEA,MAAa,wBAAwB,cAAyD,IAAA;AAqB9F,MAAM,aAAa;AAOnB,SAAS,aAAa,WAAmB,QAAgB,OAAgB;CACvE,OAAO;EACL;EACA,WAAW,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,MAAA;GAChD,MAAM,IAAK,IAAI,aAAc,KAAK,KAAK,IAAI,KAAK,KAAK;GACrD,OAAO;IACL,GAAG,KAAK,MAAM,YAAY,IAAI,SAAS,KAAK,IAAI,CAAA,IAAK,QAAQ,CAAA;IAC7D,GAAG,KAAK,MAAM,YAAY,IAAI,SAAS,KAAK,IAAI,CAAA,IAAK,QAAQ,CAAA;GAC/D;EACF,CAAA;CACF;AACF;AAEA,MAAM,gBAA0D;CAC9D,GAAG,aAAa,IAAI,GAAG,CAAA;CACvB,GAAG,aAAa,IAAI,IAAI,CAAA;CACxB,GAAG,aAAa,IAAI,IAAI,CAAA;AAC1B;AAuBA,MAAM,gBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EN,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,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,SAAgB,eAAe,OAAiC;CAC9D,MAAM,eAAe,uBAAuB,WAAW,qBAAA,GAAwB,MAAM,IAAI;CACzF,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;CAAA,CACD;CACD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,wBAAwB,MAAM,mBAAmB;CACvD,MAAM,sBAAsB,CAAC,CAAC,MAAM;CACpC,MAAM,eAAyC;EAC7C,MAAM,KAAA;EACN,aAAa,MAAM;EACnB,eAAe,cAAA;CACjB;CACA,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,kBAAkB;GACpB,OAAO,gBAAA;EACT;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA,IAAI,qBAAqB;GACvB,OAAO,MAAM;EACf;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;CACF,CAAA;CACA,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;CAKA,MAAM,WAAW,iBACf,gBAAA,IACI,aACA,MAAM,KAAK,MAAO,WAAA,IAAe,MAAO,UAAA,GAAa,GAAG,UAAA,CAAA;CAE9D,MAAM,iBAAiB,cAAc,KAAA;CACrC,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,QAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA,aAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA;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,MAAA,gBAEnB,KAAA;GAAA,IAAI,OAAA;IAAA,OAAM,SAAA,EAAW;GAAS;GAAA,WAC3B,UAAU,UAAA;IACV,MAAM,cAAc,MAAA,IAAU,SAAA;IAC9B,MAAM,eACJ,CAAC,gBAAA,KACD,SAAA,IAAa,KACb,SAAA,IAAa,cACb,MAAA,KACA,MAAA,KAAW,SAAA,IAAa;IAC1B,cAAA;KAAA,IAAA,QAAA,eAAA,OAAA;KAAA,QAAA,QAAA;MAAA,IAAA,MAGW,YAAY;OACjB,GAAG,MAAA;OACH,OAAO,MAAA;OACP,QAAQ,OAAA;OACR,iBAAiB,gBAAA;MACnB,CAAA,GAAA,OAEQ,GAAG,SAAS,EAAC,KAAI,OAClB,GAAG,SAAS,EAAC,KAAI,OAGH,MAAA,IAAU,IAAI,MAAA,IAAU,KAAM,QAAQ,CAAA,EAAA,KAAQ,KAAA;MAAA,QAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,GAAA;MAAA,SAAA,IAAA,KAAA,iBAAA,OAAA,QAAA,IAAA,IAAA,IAAA;MAAA,SAAA,IAAA,KAAA,iBAAA,OAAA,OAAA,IAAA,IAAA,IAAA;MAAA,SAAA,IAAA,KAAA,iBAAA,OAAA,mBAAA,IAAA,IAAA,IAAA;MAAA,OAAA;KAAA,GAAA;MAAA,GAAA,KAAA;MAAA,GAAA,KAAA;MAAA,GAAA,KAAA;MAAA,GAAA,KAAA;KAAA,CAAA;KAAA,OAAA;IAAA,GAAA;GAIzE;EAAA,CAAA,GAAA,OAAA,IAAA;EAAA,OAAA,YAIA;GACA,MAAM,UAAU,MAAM;GACtB,OAAO,WAAW,cAAA;IAAA,IAAA,QAAA,eAAA,OAAA;IAAA,OAAA,OAAkC,OAAA;IAAA,OAAA;GAAA,GAAA,IAAiB,KAAA;EACvE,GAAC,OAAA,KAAA;EAAA,mBAAA;EAAA,OAAA;CAAA,GAAA;AAGP"}

package/dist/progress/ProgressCircle.jsx

@@ -62,7 +62,7 @@ const blockStyles = function anonymous(props) {
 	else if (props.isLit) rules += " gj151";
 	else rules += " gh151";
 	else if (props.isLead) rules += " g9151";
-	else if (props.isLit) rules += " gdeCgNc151";
+	else if (props.isLit) rules += " gnhAeB151";
 	else rules += " gW36Rud151";
 	if (props.isLit) rules += " glc151";
 	else rules += " gla151";
@@ -80,7 +80,7 @@ const blockStyles = function anonymous(props) {
 	if (props.isLit) rules += " _h3jWUfc151";
 	if (props.isLit) rules += " __ea151";
 	if (props.isStaticColor) rules += " -oArxZd-gj151";
-	else rules += " -oArxZd-gdeCgNc151";
+	else rules += " -oArxZd-gnhAeB151";
 	rules += " -oArxZd-lgc151";
 	return rules;
 };

package/dist/progress/ProgressCircle.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.jsx","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } 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  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 ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\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 ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\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 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\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\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 size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\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 isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\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  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\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      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n        * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressCircle.jsx","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } 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  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 ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\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 ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\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 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\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\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 size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\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 isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\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  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\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      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n       * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":";;;;AA+BA,MAAU,wBAA2B,cAAA,IAAA;AAiBb,MAAA,aAAA;AAQxB,SAAS,aAAa,WAAA,QAAA,OAAA;CACpB,OAAM;EACA;EACA,WAAW,MAAG,KAAM,EACpB,QAAY,WACZ,IAAA,GAAO,MAAI;GACV,MAAO,IAAO,IAAI,aAAS,KAAS,KAAA,IAAA,KAAA,KAAA;GAC7C,OAAA;;IAEa,GAAA,KAAA,MAAA,YAAwB,IAAA,SAAc,KAAA,IAAA,CAAA,IAAA,QAAqB,CAAA;;EAEnE,CAAA;CACH;AACF;AACA,MAAE,gBAAsB;CACvB,GAAA,aAAA,IAAA,GAAA,CAAA;;CAEG,GAAC,aAAA,IAAmB,IAAG,CAAA;AAC3B;AAQA,MAAG,gBAAmB,SAAS,UAAM,OAAW,WAAW;CACxD,IAAG,QAAO;CACV,IAAK,WAAS;CACd,IAAK,QAAO;CACf,IAAM,SAAW;;CAEjB,KAAS,IAAC,KAAA,SAAa;EACf,IAAC,EAAA,OAAM,MAAA,WAAA;EACb,IAAU,EAAE,OAAI,KAAQ,QAAG;EAC7B,IAAA,EAAA,OAAA,KAAA,SAAA;;CAEA;CACE,IAAM,MAAC,gBAAA,SACL,SAAK;MACL,IAAW,MAAM,gBAAe,SAC9B,SAAW;CAEb,IAAI,CAAC,UAAO,SAAM;CAClB,IAAI,MAAG,SAAW;MACf,CAAA,OAAA,SAAA;CAAA,OACD,IAAA,MAAA,SAAA;MACH,CAAA,OAAA,SAAA;CAAA,OAAA,IAAA,CAAA,OAAA,SAAA;CAIC,IAAC,MAAA,SAAkB;MAClB,CAAA,QAAgB,SAAO;CAAA,OACvB,IAAA,MAAgB,SAAO;MAC3B,CAAA,QAAA,SAAA;CAAA,OAEM,IAAK,CAAC,QAAC,SAAc;CAExB,SAAC;CACF,OAAQ;AACX;AACA,MAAK,cAAY,SAAW,UAAW,OAAO;CAC3C,IAAA,QAAQ;CACX,SAAM;CACF,IAAC,MAAA,SAAA,KACD,SAAa;MACf,IAAA,MAAA,SAAA,KAAA,SAAA;MAGE,SAAU;yBAGP,SAAA;MACI,IAAG,MAAA,SAAA,KACZ,SAAA;;CAIA,IAAA,MAAA,eACK,IAAA,MAAA,QACK,SAAG;MACL,IAAA,MAAA,OACJ,SAAW;MAEN,SAAE;MAEN,IAAA,MAAA,QACF,SAAA;MACD,IAAW,MAAG,OACf,SAAA;MAEF,SAAA;CAED,IAAM,MAAA,OACJ,SAAW;MAET,SAAU;CAEV,IAAI,MAAE,QACF,SAAE;CAEP,IAAA,MAAA,SAAA,KACD,SAAe;MACV,IAAM,MAAO,SAAO,KACnB,SAAC;MACE,IAAI,MAAE,SAAa,KACvB,SAAQ;CAEX,SAAS;CACT,IAAA,MAAQ,iBACR,SAAS;MACT,IAAA,MAAe,OAAA;EACb,SAAU;EACV,SAAQ;CACV;CACA,IAAC,MAAA,OACD,SAAa;CAEb,IAAE,MAAQ,OACT,SAAA;CAED,IAAI,MAAC,OACJ,SAAU;CAEb,IAAA,MAAA,eACE,SAAU;MAEZ,SAAe;CAEb,SAAO;CACP,OAAO;AACX;AACA,MAAK,eAAA;AACL,SAAG,MAAA,OAAA,KAAA,KAAA;CACD,OAAS,KAAG,IAAK,KAAM,IAAA,OAAA,GAAA,GAAA,GAAA;AACzB;AACA,SAAS,UAAE,KAAA,KAAA;CACP,MAAE,QAAS,MAAS;CACpB,OAAI,OAAO,SAAQ,KAAQ,KAAM,QAAQ,IAAI,QAAM;AACvD;AACA,SAAI,kBAAiB,QAAS;CAC3B,MAAA,SAAA;CACD,MAAA,aAAmB,CAAA;CACjB,KAAA,MAAO,OAAI,QACZ,IAAA,IAAA,WAAA,OAAA,GAAA;EACD,MAAA,QAAwB,OAAC;EACf,WAAW,OAAA,SAAA,OAAA,KAAA,IAAA,OAAA,KAAA;CACpB;CAEC,OAAO;AACX;AACA,SAAa,eAAO,OAAA;CAChB,MAAM,eAAC,uBAAgB,WAAA,qBAAA,GAAA,MAAA,IAAA;CACvB,MAAM,SAAC,WAAA,gBAAA,CAAA,GAAA,KAAA;CACP,MAAE,CAAA,SAAU,WAAO,QAAA;EACjB;EACA;EACD;EACF;EACD;;EAEI;EACJ;EACM;EACN;EACA;EACA;EACA;EACA;EACA;;EAEM;CACN,CAAA;CACF,MAAA,aAAA,MAAA,QAAA;;CAEA,MAAS,sBAAqB,CAAC,CAAC,MAAK;CACnC,MAAM,eAAiB;EAChB,MAAO,KAAA;EAChB,aAAA,MAAA;;CAEQ;CACN,MAAM,eAAgB,kBAAkB;EAClC,IAAA,KAAU;;EAEX;EACC,IAAI,QAAA;GACA,OAAO,MAAC;EACd;EACF,IAAA,WAAA;GACF,OAAA,MAAA;;EAEM,IAAC,WAAc;GACvB,OAAA,MAAA;;EAEO,IAAA,kBAAwB;GACvB,OAAA,gBAAe;EACf;EACA,IAAC,eAAmB;GACjB,OAAA,MAAA;EACN;EACA,IAAA,oBAAS;GACT,OAAA,MAAgB;EAChB;EACA,IAAA,qBAAY;GACZ,OAAS,MAAA;EACT;EACA,IAAA,iBAAiB;GACjB,OAAa,MAAA;EACb;CACD,CAAC;CACD,MAAI,aAAA,iBAAA;EACH,MAAK,WAAM,MAAA,YAAA;EACX,MAAK,WAAW,MAAA,YAAA;EAEhB,QADiB,MAAA,MAAA,SAAA,GAAA,UAAA,QACJ,IAAA,YAAA,UAAA,UAAA,QAAA,IAAA;CACd,CAAA;CAI6C,MAAA,WAAA,iBAAA,gBAAA,IAAA,aAAA,MAAA,KAAA,MAAA,WAAA,IAAA,MAAA,UAAA,GAAA,GAAA,UAAA,CAAA;CAC7C,MAAM,iBAAM,cAAA,KAAA;CACZ,MAAA,qBAAmB,mBAAW,cAAA,QAAA,MAAA,MAAA;CAC9B,MAAA,0BAA8B,wBAAA,cAAA,cAAA,MAAA,YAAA;CAC9B,OAAA,CAAA,QAAA,kBAAA,MAAA,OAAA,aAAA,kBAAA,YAAA,KAAA,iBAAA,cAES,KAAA,MAAA,GAAA,GAAA,OAAA,CACP,MAAO,kBACR,cAAA,MAAA,GAAA,aAAA,CAAA,CACD,EAAA,OAAS,OAAG,EAAA,KAAA,GAAA,GAAA,OAAA,kBAAA,GAAA,MAAA,MAAA,QAAA,KAAA,GAAA;MACV,CAAA,IAAA,MAAO,SAAW,EAAA,WAAA;UACnB,UAAA,UAAA;EACG,MAAA,cAAW,MAAA,IAAA,SAAA;EACb,MAAO,eAAc,CAAA,gBAAA,KAAA,SAAA,IAAA,KAAA,SAAA,IAAA,cAAA,MAAA,KAAA,MAAA,KAAA,SAAA,IAAA;EACtB,OAAA,CAAA,IAAA,mBAAA,OAAA,YAAA;GACG,GAAA,MAAW;GACP,OAAO,MAAA;GACd,QAAA,OAAA;GACG,iBAAkB,gBAAA;EACpB,CAAA,GAAM,OAAC;GACR,MAAA,GAAA,SAAA,EAAA;GACI,KAAK,GAAM,SAAG,EAAA;GAElB,mBAAA,MAAA,IAAA,IAAA,MAAA,IAAA,KAAA,QAAA,CAAA,EAAA,KAAA,KAAA;EACG;CACJ,EAAE;MACD,EAAA,IAAA;QACG;cACI;EACP,MAAA,UAAA,MAAA;EACG,OAAM,WAAW,OAAA,CAAA,IAAA,OAAA,eAAA,QAAA,EAAA,OAAA,KAAA;CACrB,GAAE,EAAA;IACF,EAAC;AACL"}

package/dist/progress-bar/index.js

@@ -116,7 +116,7 @@ const labelStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -160,7 +160,7 @@ const valueStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	rules += " z8bmXs151";
@@ -222,7 +222,7 @@ const fillStyles = function anonymous(props) {
 	rules += " kd151";
 	rules += " jd151";
 	if (props.isStaticColor) rules += " gj151";
-	else rules += " gdeCgNc151";
+	else rules += " gnhAeB151";
 	rules += " glc151";
 	if (props.isIndeterminate) rules += " _0e151";
 	return rules;
@@ -239,7 +239,7 @@ const pendingStyles = function anonymous(props) {
 	rules += " _iNW847b151";
 	rules += " __mrmLYsd151";
 	if (props.isStaticColor) rules += " -lMNcGb-gj151";
-	else rules += " -lMNcGb-gdeCgNc151";
+	else rules += " -lMNcGb-gnhAeB151";
 	rules += " -lMNcGb-lgc151";
 	return rules;
 };