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

package/dist/_chunk/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/meter/PixelMeter.tsx","../../src/meter/index.tsx"],"sourcesContent":["// Local addition — no S2 counterpart. See the JSDoc on PixelMeter below.\n\nimport { For, Show, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Label as HeadlessLabel,\n  Meter as HeadlessMeter,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { tglRingBlink } from \"../style/motion\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { RefLike } from \"../button/spectrum-context\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\n/** The three pixel forms the register draws a measurement in. */\nexport type PixelMeterShape = \"row\" | \"ring\" | \"grid\";\n/** The register's four status channels; the ink the lit cells take. */\nexport type PixelMeterChannel = \"info\" | \"signal\" | \"metric\" | \"fault\";\n/**\n * How many ink strengths the cells use, counting the unlit rest state: `2` is\n * rest + full (the streak row), `4` is the activity map's rest + three heats.\n */\nexport type PixelMeterLevels = 2 | 3 | 4;\n\nexport interface PixelMeterProps {\n  /** Which pixel form to draw. @default 'row' */\n  shape?: PixelMeterShape;\n  /** The current value (controlled). @default 0 */\n  value?: number;\n  /**\n   * The largest value allowed. In `row` it also sets the block count (the streak\n   * length), clamped to 64. `ring` is always 16 blocks and `grid` always 26 × 7.\n   * @default 14 for `row`, 16 for `ring`, 182 for `grid`\n   */\n  maxValue?: number;\n  /**\n   * The number of ink strengths, rest included.\n   * @default 2 for `row` and `ring`, 4 for `grid`\n   */\n  levels?: PixelMeterLevels;\n  /** The status channel the lit cells take their ink from. @default 'info' */\n  channel?: PixelMeterChannel;\n  /** The meter's visible label, and its accessible name. `ring` centres it. */\n  label?: 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\n/* Geometry. The handoff draws the ring as 16 blocks on a circle, not as an arc —\n * the same construction ProgressCircle's L ring uses (6px blocks, radius 26, in a\n * 64px box), computed once at module load so server and client agree. */\nconst RING_COUNT = 16;\nconst RING_BOX = 64;\nconst RING_RADIUS = 26;\nconst RING_BLOCK = 6;\nconst GRID_COLUMNS = 26;\nconst GRID_ROWS = 7;\nconst GRID_COUNT = GRID_COLUMNS * GRID_ROWS;\nconst ROW_DEFAULT_MAX = 14;\nconst ROW_MAX_BLOCKS = 64;\n\nconst RING_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(RING_BOX / 2 + RING_RADIUS * Math.cos(a) - RING_BLOCK / 2),\n    y: Math.round(RING_BOX / 2 + RING_RADIUS * Math.sin(a) - RING_BLOCK / 2),\n  };\n});\n\n/* The register's ring chase, shared through style/motion.ts (2.6s, step-end,\n * staggered 0.16s per block) so it cannot drift from ProgressCircle's ring. */\nconst ringBlink = tglRingBlink();\n\ntype CellInk = \"rest\" | \"low\" | \"mid\" | \"full\";\n\ntype PixelMeterStyleState = {\n  shape: PixelMeterShape;\n  channel: PixelMeterChannel;\n};\n\ntype CellStyleState = PixelMeterStyleState & {\n  ink: CellInk;\n  isLead: boolean;\n};\n\nconst wrapperStyles = style<PixelMeterStyleState>(\n  {\n    display: \"flex\",\n    flexDirection: \"column\",\n    rowGap: 4,\n    alignItems: \"start\",\n    width: \"fit\",\n    /* Containing block for the ring's centred label, which must stay OUTSIDE the\n     * aria-hidden cell container: it is the meter's <label>, and burying a\n     * labelledby target in a hidden subtree is how an accessible name goes empty. */\n    position: {\n      shape: {\n        ring: \"relative\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\n/* One ink source for every cell, so a channel change is a single custom-property\n * swap instead of four duplicated colour conditions per level. The four values are\n * the register's status channels — the same tokens a StatusLight dot and a log line\n * report with, so a metric meter can never drift into a different cyan. */\nconst fieldStyles = style<PixelMeterStyleState>({\n  \"--pv-pixel-ink\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"[var(--status-info)]\",\n      channel: {\n        signal: \"[var(--status-signal)]\",\n        metric: \"[var(--status-metric)]\",\n        fault: \"[var(--status-fault)]\",\n      },\n      forcedColors: \"ButtonText\",\n    },\n  },\n  display: {\n    shape: {\n      row: \"flex\",\n      ring: \"block\",\n      grid: \"grid\",\n    },\n  },\n  alignItems: {\n    shape: {\n      row: \"center\",\n    },\n  },\n  columnGap: {\n    shape: {\n      row: \"[3px]\",\n      grid: \"[4px]\",\n    },\n  },\n  rowGap: {\n    shape: {\n      grid: \"[4px]\",\n    },\n  },\n  gridTemplateColumns: {\n    shape: {\n      grid: \"[repeat(26, 1fr)]\",\n    },\n  },\n  gridAutoRows: {\n    shape: {\n      grid: \"[16px]\",\n    },\n  },\n  width: {\n    shape: {\n      ring: 64,\n      grid: \"full\",\n    },\n  },\n  height: {\n    shape: {\n      ring: 64,\n    },\n  },\n});\n\nconst cellStyles = style<CellStyleState>({\n  boxSizing: \"border-box\",\n  position: {\n    shape: {\n      ring: \"absolute\",\n    },\n  },\n  width: {\n    shape: {\n      row: 10,\n      ring: 6,\n      grid: \"full\",\n    },\n  },\n  height: {\n    shape: {\n      row: 10,\n      ring: 6,\n      grid: \"full\",\n    },\n  },\n  /* Rest is the register's hairline, not a dim tint of the channel: an unlit cell\n   * reports \"nothing here\", and tinting it with the channel makes an empty meter\n   * read as a very low reading. The lit strengths are the handoff's activity ramp\n   * (28% / 62% / full), mixed off the one ink property above. */\n  backgroundColor: {\n    ink: {\n      rest: \"[var(--border-subtle)]\",\n      low: \"[color-mix(in srgb, var(--pv-pixel-ink) 28%, transparent)]\",\n      mid: \"[color-mix(in srgb, var(--pv-pixel-ink) 62%, transparent)]\",\n      full: \"[var(--pv-pixel-ink)]\",\n    },\n    isLead: \"transparent\",\n    forcedColors: {\n      ink: {\n        rest: \"Background\",\n        low: \"ButtonText\",\n        mid: \"ButtonText\",\n        full: \"ButtonText\",\n      },\n    },\n  },\n  /* The leading edge is the one cell in flight: the register's ordered dither, a\n   * conic checker at 3px, so the surface shows through its off quarters. */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-pixel-ink) 0% 25%, transparent 0% 50%)]\",\n    forcedColors: \"none\",\n  },\n  backgroundSize: {\n    isLead: \"[3px 3px]\",\n  },\n  boxShadow: \"edge-glass\",\n  /* Only the ring blinks — a chase around a circle reads as live work; the same\n   * blink on a 182-cell map is a strobe. Gate is the CSS media condition, never a\n   * runtime matchMedia read: Solid hydration trusts the server DOM (see Badge). */\n  animation: {\n    shape: {\n      ring: {\n        default: ringBlink,\n        \"@media (prefers-reduced-motion: reduce)\": \"none\",\n      },\n    },\n  },\n  animationDuration: {\n    shape: {\n      ring: 2600,\n    },\n  },\n  animationTimingFunction: {\n    shape: {\n      ring: \"[step-end]\",\n    },\n  },\n  animationIterationCount: {\n    shape: {\n      ring: \"infinite\",\n    },\n  },\n});\n\nconst labelStyles = style({\n  font: \"ui-sm\",\n  color: \"neutral\",\n});\n\n/* The ring's label sits in the hole, which is where the register puts the readout;\n * it is the same <label> element, only positioned. */\nconst ringLabelStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\n  font: \"title-xs\",\n  color: \"neutral\",\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\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  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  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * A meter drawn as discrete pixel cells — the register's streak row, pixel ring\n * and activity map — instead of a continuous bar.\n *\n * Local addition — no S2 counterpart. It wraps the same headless Meter as\n * {@link Meter}, so the root keeps `role=\"meter\"` with `aria-valuenow`/`min`/`max`\n * and an accessible name from `label`; the cells are decoration and are hidden\n * from assistive technology.\n *\n * The fill rule is one rule in all three shapes: the value quantizes to a lit cell\n * count, the cells before the boundary are lit (fading over the last `levels - 1`\n * of them), the cell at the boundary is the dithered leading edge, and the rest sit\n * on the hairline.\n */\nexport function PixelMeter(props: PixelMeterProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"shape\",\n    \"value\",\n    \"maxValue\",\n    \"levels\",\n    \"channel\",\n    \"label\",\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 shape = () => local.shape ?? \"row\";\n  const channel = () => local.channel ?? \"info\";\n  const state = (): PixelMeterStyleState => ({ shape: shape(), channel: channel() });\n  const cellCount = createMemo(() => {\n    switch (shape()) {\n      case \"ring\":\n        return RING_COUNT;\n      case \"grid\":\n        return GRID_COUNT;\n      default: {\n        const max = local.maxValue ?? ROW_DEFAULT_MAX;\n        return Number.isFinite(max) && max >= 1\n          ? clamp(Math.round(max), 1, ROW_MAX_BLOCKS)\n          : ROW_DEFAULT_MAX;\n      }\n    }\n  });\n  const maxValue = () => {\n    if (local.maxValue != null) return local.maxValue;\n    return shape() === \"row\" ? ROW_DEFAULT_MAX : cellCount();\n  };\n  const levels = (): PixelMeterLevels => local.levels ?? (shape() === \"grid\" ? 4 : 2);\n  const litCount = (percentage: number) =>\n    clamp(Math.round((percentage / 100) * cellCount()), 0, cellCount());\n  /* Depth back from the boundary picks the strength: the last lit cell is the\n   * dimmest available one, and everything `levels - 1` cells or further back is\n   * full. With `levels` 2 there is no partial strength and every lit cell is full,\n   * which is exactly the streak row. */\n  const inkFor = (index: number, lit: number): CellInk => {\n    if (index >= lit) return \"rest\";\n    const depth = lit - index;\n    const strengths: CellInk[] =\n      levels() === 4 ? [\"low\", \"mid\", \"full\"] : levels() === 3 ? [\"mid\", \"full\"] : [\"full\"];\n    return strengths[Math.min(depth, strengths.length) - 1]!;\n  };\n  const isLead = (index: number, lit: number) => index === lit && lit > 0 && lit < cellCount();\n  const resolvedStyles = () => (typeof local.styles === \"function\" ? local.styles() : local.styles);\n\n  return (\n    <HeadlessMeter\n      {...getDataAttributes(props)}\n      id={local.id}\n      value={local.value}\n      maxValue={maxValue()}\n      aria-label={local[\"aria-label\"]}\n      aria-labelledby={local[\"aria-labelledby\"]}\n      aria-describedby={local[\"aria-describedby\"]}\n      aria-details={local[\"aria-details\"]}\n      ref={local.ref}\n      class={[local.UNSAFE_className, wrapperStyles(state(), resolvedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={local.UNSAFE_style}\n      slot={local.slot ?? undefined}\n    >\n      {({ percentage }) => (\n        <>\n          <Show when={shape() !== \"ring\" && local.label != null}>\n            <HeadlessLabel class={labelStyles}>{local.label}</HeadlessLabel>\n          </Show>\n          <div class={fieldStyles(state())} aria-hidden=\"true\">\n            <For each={Array.from({ length: cellCount() })}>\n              {(_, index) => {\n                const lit = () => litCount(percentage);\n                const position = () =>\n                  shape() === \"ring\" ? RING_POSITIONS[index() % RING_COUNT]! : undefined;\n                return (\n                  <div\n                    class={cellStyles({\n                      ...state(),\n                      ink: inkFor(index(), lit()),\n                      isLead: isLead(index(), lit()),\n                    })}\n                    style={\n                      shape() === \"ring\"\n                        ? {\n                            left: `${position()!.x}px`,\n                            top: `${position()!.y}px`,\n                            /* The handoff's stagger: i × 0.16s inside the 2.6s\n                             * loop. Inert once the media gate zeroes the name. */\n                            \"animation-delay\": `${(index() * 0.16).toFixed(2)}s`,\n                          }\n                        : undefined\n                    }\n                  />\n                );\n              }}\n            </For>\n          </div>\n          <Show when={shape() === \"ring\" && local.label != null}>\n            <HeadlessLabel class={ringLabelStyles}>{local.label}</HeadlessLabel>\n          </Show>\n        </>\n      )}\n    </HeadlessMeter>\n  );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Meter.tsx\n\n// Port of packages/@react-spectrum/s2/src/Meter.tsx.\n\nimport { For, createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  Label as HeadlessLabel,\n  Meter as HeadlessMeter,\n} from \"@proyecto-viviana/solidaria-components\";\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 { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\n/* `metric` is the register's fourth status channel — the cyan that reports a\n * measurement rather than a state. Badge and StatusLight already expose it; without it\n * a metric meter has to borrow `informative`, which is a different channel reporting a\n * different thing. Local addition — no S2 counterpart. */\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\" | \"metric\";\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  /**\n   * The visual style variant. `success`/`warning` alias `positive`/`notice`.\n   * `metric` is a local addition — no S2 counterpart — for the register's cyan\n   * measurement channel.\n   * @default 'informative'\n   */\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  /* The register's bar is 8px, so the band is shifted one rung up to put the DEFAULT\n   * size on the drawn value instead of two rungs under it. Four distinct rungs are\n   * kept — the size axis still moves, it just starts where the register draws. */\n  height: {\n    default: 8,\n    size: {\n      S: 6,\n      M: 8,\n      L: 10,\n      XL: 12,\n    },\n  },\n});\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\n/* One channel map, three call sites: the bar's fill, and the blocks' border and their\n * fill. The register reports a status with a CHANNEL TOKEN, not with a ramp stop —\n * `--status-info` · `--status-signal` · `--status-metric` · `--status-fault` are the\n * same four a log line and a StatusLight dot use, so a meter can no longer drift into\n * a different red from the dot reporting the same fault. They are the ink-strength\n * stops of each channel deliberately: a bar is a non-text graphic held to 3:1, and the\n * raw signal FILL (`--yellow-500`) reads ~1.6:1 against a daylight track where\n * `--status-signal` clears the floor. `positive` has no status channel — success is the\n * library's own green — and keeps its ramp pair. */\nconst channelFill = {\n  default: \"[var(--status-info)]\",\n  variant: {\n    positive: lightDark(\"positive-800\", \"positive-900\"),\n    notice: \"[var(--status-signal)]\",\n    negative: \"[var(--status-fault)]\",\n    metric: \"[var(--status-metric)]\",\n  },\n} as const;\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    ...channelFill,\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    ...channelFill,\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      ...channelFill,\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 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 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 = (percentage: number) => {\n    const segments = segmentCount();\n    return segments == null ? 0 : clamp(Math.round((percentage / 100) * segments), 0, segments);\n  };\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <HeadlessMeter\n      {...getDataAttributes(merged)}\n      id={local.id}\n      value={local.value}\n      minValue={local.minValue}\n      maxValue={local.maxValue}\n      valueLabel={stringValueLabel(local.valueLabel)}\n      formatOptions={local.formatOptions}\n      aria-label={local[\"aria-label\"]}\n      aria-labelledby={local[\"aria-labelledby\"]}\n      aria-describedby={local[\"aria-describedby\"]}\n      aria-details={local[\"aria-details\"]}\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      {({ percentage, valueText }) => (\n        <>\n          {local.label && (\n            <div class={labelWrapperStyles(state(\"start\"))}>\n              <HeadlessLabel class={labelStyles(state(\"start\"))}>{local.label}</HeadlessLabel>\n            </div>\n          )}\n          {local.label && (\n            <Text styles={valueStyles(state(\"end\"))}>{local.valueLabel ?? valueText}</Text>\n          )}\n          <SkeletonWrapper>\n            {segmentCount() != null ? (\n              <div class={segmentRowStyles} aria-hidden=\"true\">\n                <For each={Array.from({ length: segmentCount() ?? 0 })}>\n                  {(_, index) => (\n                    <div\n                      class={segmentStyles({\n                        ...state(),\n                        isFilled: index() < filledCount(percentage),\n                      })}\n                    />\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        </>\n      )}\n    </HeadlessMeter>\n  );\n}\n\nexport { PixelMeter } from \"./PixelMeter\";\nexport type {\n  PixelMeterProps,\n  PixelMeterShape,\n  PixelMeterChannel,\n  PixelMeterLevels,\n} from \"./PixelMeter\";\n"],"mappings":"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"}

package/dist/_chunk/meter.jsx

@@ -0,0 +1,564 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Meter.tsx
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
+import { SkeletonWrapper } from "../skeleton/index.jsx";
+import { s as Text$1 } from "./text.jsx";
+import { For, Show, createContext, createMemo, useContext } from "solid-js";
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
+import { Label, Meter } from "@proyecto-viviana/solidaria-components";
+//#region src/meter/PixelMeter.tsx
+const RING_COUNT = 16;
+const RING_BOX = 64;
+const RING_RADIUS = 26;
+const RING_BLOCK = 6;
+const GRID_COUNT = 182;
+const ROW_DEFAULT_MAX = 14;
+const ROW_MAX_BLOCKS = 64;
+const RING_POSITIONS = Array.from({ length: RING_COUNT }, (_, i) => {
+	const a = i / RING_COUNT * Math.PI * 2 - Math.PI / 2;
+	return {
+		x: Math.round(RING_BOX / 2 + RING_RADIUS * Math.cos(a) - RING_BLOCK / 2),
+		y: Math.round(RING_BOX / 2 + RING_RADIUS * Math.sin(a) - RING_BLOCK / 2)
+	};
+});
+const wrapperStyles$1 = function anonymous(props, overrides) {
+	let rules = " ";
+	let width = false;
+	let position = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "Z") width = true;
+		if (p[1] === "_P") position = true;
+		rules += p[0];
+	}
+	rules += " sd17";
+	rules += " _ta17";
+	rules += " Ub17";
+	rules += " ed17";
+	if (!width) rules += " ZJ17";
+	if (props.shape === "ring") {
+		if (!position) rules += " _Pc17";
+	}
+	return rules;
+};
+const fieldStyles = function anonymous(props) {
+	let rules = " ";
+	if (props.channel === "fault") rules += " -r3Ujre-gGBFq4b17";
+	else if (props.channel === "metric") rules += " -r3Ujre-gmb1iPc17";
+	else if (props.channel === "signal") rules += " -r3Ujre-go3eV3b17";
+	else rules += " -r3Ujre-gyJJ1Ud17";
+	rules += " -r3Ujre-lgc17";
+	if (props.shape === "grid") rules += " se17";
+	else if (props.shape === "ring") rules += " sb17";
+	else if (props.shape === "row") rules += " sd17";
+	if (props.shape === "row") rules += " eb17";
+	if (props.shape === "grid") rules += " qT4Nfn17";
+	else if (props.shape === "row") rules += " qkNNfn17";
+	if (props.shape === "grid") rules += " UT4Nfn17";
+	if (props.shape === "grid") rules += " DEHUKw17";
+	if (props.shape === "grid") rules += " __y6Drurc17";
+	if (props.shape === "grid") rules += " Za17";
+	else if (props.shape === "ring") rules += " ZG17";
+	if (props.shape === "ring") rules += " FA17";
+	return rules;
+};
+const cellStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " _oa17";
+	if (props.shape === "ring") rules += " _Pa17";
+	if (props.shape === "grid") rules += " Za17";
+	else if (props.shape === "ring") rules += " Zg17";
+	else if (props.shape === "row") rules += " Zi17";
+	if (props.shape === "grid") rules += " Fb17";
+	else if (props.shape === "ring") rules += " Fg17";
+	else if (props.shape === "row") rules += " Fj17";
+	if (props.isLead) rules += " g917";
+	else if (props.ink === "full") rules += " gj8PfDd17";
+	else if (props.ink === "mid") rules += " ge65Mae17";
+	else if (props.ink === "low") rules += " gc87k8d17";
+	else if (props.ink === "rest") rules += " grHHOgb17";
+	if (props.ink === "full") rules += " glc17";
+	else if (props.ink === "mid") rules += " glc17";
+	else if (props.ink === "low") rules += " glc17";
+	else if (props.ink === "rest") rules += " gla17";
+	if (props.isLead) rules += " _ibvazRc17";
+	rules += " _ilc17";
+	if (props.isLead) rules += " __mlgTz3b17";
+	rules += " _nbkwzSb17";
+	if (props.shape === "ring") {
+		rules += " _gfEXdW17";
+		rules += " _gdklsgch3TDrc17";
+	}
+	if (props.shape === "ring") rules += " _eLaQYvc17";
+	if (props.shape === "ring") rules += " _h3jWUfc17";
+	if (props.shape === "ring") rules += " __ea17";
+	return rules;
+};
+const labelStyles$1 = " uxe7h417 -_6BNtrc-b17 vx17 xb17 _xa17 _Fd17 _FnuYUweb17 pmiKvLd17";
+const ringLabelStyles = " _Pa17 Wr17 _lr17 _Ar17 _zr17 sd17 eb17 _Ca17 _Ob17 uiWD3ad17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xd17 _xa17 xX0cczbc17 _xX0cczba17 xfd17 _xfa17 xfX0cczbc17 _xfX0cczba17 _Fd17 _FnuYUweb17 pmiKvLd17";
+function clamp$1(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function getDataAttributes$1(source) {
+	const record = source;
+	const attributes = {};
+	for (const key in record) if (key.startsWith("data-")) {
+		const value = record[key];
+		attributes[key] = value == null ? void 0 : String(value);
+	}
+	return attributes;
+}
+/**
+* A meter drawn as discrete pixel cells — the register's streak row, pixel ring
+* and activity map — instead of a continuous bar.
+*
+* Local addition — no S2 counterpart. It wraps the same headless Meter as
+* {@link Meter}, so the root keeps `role="meter"` with `aria-valuenow`/`min`/`max`
+* and an accessible name from `label`; the cells are decoration and are hidden
+* from assistive technology.
+*
+* The fill rule is one rule in all three shapes: the value quantizes to a lit cell
+* count, the cells before the boundary are lit (fading over the last `levels - 1`
+* of them), the cell at the boundary is the dithered leading edge, and the rest sit
+* on the hairline.
+*/ function PixelMeter(props) {
+	const [local] = splitProps(props, [
+		"shape",
+		"value",
+		"maxValue",
+		"levels",
+		"channel",
+		"label",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"slot",
+		"ref",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const shape = () => local.shape ?? "row";
+	const channel = () => local.channel ?? "info";
+	const state = () => ({
+		shape: shape(),
+		channel: channel()
+	});
+	const cellCount = createMemo(() => {
+		switch (shape()) {
+			case "ring": return RING_COUNT;
+			case "grid": return GRID_COUNT;
+			default: {
+				const max = local.maxValue ?? ROW_DEFAULT_MAX;
+				return Number.isFinite(max) && max >= 1 ? clamp$1(Math.round(max), 1, ROW_MAX_BLOCKS) : ROW_DEFAULT_MAX;
+			}
+		}
+	});
+	const maxValue = () => {
+		if (local.maxValue != null) return local.maxValue;
+		return shape() === "row" ? ROW_DEFAULT_MAX : cellCount();
+	};
+	const levels = () => local.levels ?? (shape() === "grid" ? 4 : 2);
+	const litCount = (percentage) => clamp$1(Math.round(percentage / 100 * cellCount()), 0, cellCount());
+	const inkFor = (index, lit) => {
+		if (index >= lit) return "rest";
+		const depth = lit - index;
+		const strengths = levels() === 4 ? [
+			"low",
+			"mid",
+			"full"
+		] : levels() === 3 ? ["mid", "full"] : ["full"];
+		return strengths[Math.min(depth, strengths.length) - 1];
+	};
+	const isLead = (index, lit) => index === lit && lit > 0 && lit < cellCount();
+	const resolvedStyles = () => typeof local.styles === "function" ? local.styles() : local.styles;
+	return <Meter {...getDataAttributes$1(props)} id={local.id} value={local.value} maxValue={maxValue()} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} ref={local.ref} class={[local.UNSAFE_className, wrapperStyles$1(state(), resolvedStyles())].filter(Boolean).join(" ")} style={local.UNSAFE_style} slot={local.slot ?? void 0}>
+      {({ percentage }) => <>
+          <Show when={shape() !== "ring" && local.label != null}>
+            <Label class={labelStyles$1}>{local.label}</Label>
+          </Show>
+          <div class={fieldStyles(state())} aria-hidden="true">
+            <For each={Array.from({ length: cellCount() })}>
+              {(_, index) => {
+		const lit = () => litCount(percentage);
+		const position = () => shape() === "ring" ? RING_POSITIONS[index() % RING_COUNT] : void 0;
+		return <div class={cellStyles({
+			...state(),
+			ink: inkFor(index(), lit()),
+			isLead: isLead(index(), lit())
+		})} style={shape() === "ring" ? {
+			left: `${position().x}px`,
+			top: `${position().y}px`,
+			"animation-delay": `${(index() * .16).toFixed(2)}s`
+		} : void 0} />;
+	}}
+            </For>
+          </div>
+          <Show when={shape() === "ring" && local.label != null}>
+            <Label class={ringLabelStyles}>{local.label}</Label>
+          </Show>
+        </>}
+    </Meter>;
+}
+//#endregion
+//#region src/meter/index.tsx
+function normalizeVariant(variant) {
+	switch (variant) {
+		case "success": return "positive";
+		case "warning": return "notice";
+		default: return variant ?? "informative";
+	}
+}
+const MeterContext = createContext(null);
+const wrapperStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let minWidth = false;
+	let maxWidth = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		if (p[1] === "N") minWidth = true;
+		if (p[1] === "L") maxWidth = true;
+		rules += p[0];
+	}
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr17";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s17";
+	if (!position) rules += " _Pc17";
+	rules += " se17";
+	if (props.labelPosition === "side") rules += " DPlN5qb17";
+	else if (props.labelPosition === "top") rules += " Dxumf9b17";
+	if (props.labelPosition === "side") rules += " Cvv4gue17";
+	else if (props.labelPosition === "top") rules += " Cc1xmg17";
+	rules += " ea17";
+	rules += " _Bb17";
+	if (!minWidth) rules += " Nl17";
+	if (!maxWidth) rules += " Lk17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " -dTMmze-Fe17";
+	rules += " -AJjOLd-UCwrhQe17";
+	rules += " qg17";
+	return rules;
+};
+const labelWrapperStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.labelAlign === "end") rules += " _Wb17";
+	else if (props.labelAlign === "start") rules += " _Wd17";
+	if (props.labelPosition === "top") rules += " QgOnRt17";
+	if (props.labelPosition === "top") {
+		if (props.isSegmented) rules += " _qd17";
+		else rules += " _qb17";
+	}
+	return rules;
+};
+const labelStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h417";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
+	}
+	if (props.size === "XL") {
+		rules += " xb17";
+		rules += " _xa17";
+	} else if (props.size === "L") {
+		rules += " xb17";
+		rules += " _xa17";
+	} else if (props.size === "S") {
+		rules += " xb17";
+		rules += " _xa17";
+	} else if (props.size === "XS") {
+		rules += " xb17";
+		rules += " _xa17";
+	} else {
+		rules += " xb17";
+		rules += " _xa17";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "L") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "S") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "XS") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	}
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
+	return rules;
+};
+const valueStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h417";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	}
+	rules += " xb17";
+	rules += " _xa17";
+	if (props.size === "XL") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "L") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "S") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "XS") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	}
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
+	rules += " z8bmXs17";
+	rules += " y8bmXs17";
+	rules += " B8bmXs17";
+	rules += " A8bmXs17";
+	return rules;
+};
+const trackStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zMY0fn17";
+	rules += " yMY0fn17";
+	rules += " BMY0fn17";
+	rules += " AMY0fn17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " _Pc17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	if (props.isStaticColor) rules += " gh17";
+	else rules += " gW36Rud17";
+	rules += " glb17";
+	rules += " _Ma17";
+	rules += " _Mlb17";
+	rules += " _Le17";
+	rules += " _Llf17";
+	rules += " Oj17";
+	rules += " Olb17";
+	rules += " _9c17";
+	if (props.size === "XL") rules += " Fk17";
+	else if (props.size === "L") rules += " Fj17";
+	else if (props.size === "M") rules += " Fi17";
+	else if (props.size === "S") rules += " Fg17";
+	else rules += " Fi17";
+	return rules;
+};
+const trackRimStyles = " _Pa17 Wr17 _lr17 _Ar17 _zr17 _Ob17 oi17 ni17 ki17 ji17 _nbkwzSb17";
+const fillStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " Fb17";
+	rules += " _je17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	if (props.isStaticColor) rules += " gj17";
+	else if (props.variant === "metric") rules += " gmb1iPc17";
+	else if (props.variant === "negative") rules += " gGBFq4b17";
+	else if (props.variant === "notice") rules += " go3eV3b17";
+	else if (props.variant === "positive") rules += " gbiKgae17";
+	else rules += " gyJJ1Ud17";
+	rules += " glc17";
+	return rules;
+};
+const segmentRowStyles = " zMY0fn17 yMY0fn17 BMY0fn17 AMY0fn17 sd17 eb17 qkNNfn17";
+const segmentStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " ZsWXEHc17";
+	rules += " Fk17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	if (props.isStaticColor) rules += " ij17";
+	else if (props.variant === "metric") rules += " imb1iPc17";
+	else if (props.variant === "negative") rules += " iGBFq4b17";
+	else if (props.variant === "notice") rules += " io3eV3b17";
+	else if (props.variant === "positive") rules += " ibiKgae17";
+	else rules += " iyJJ1Ud17";
+	rules += " ilb17";
+	if (props.isFilled) {
+		if (props.isStaticColor) rules += " gj17";
+		else if (props.variant === "metric") rules += " gmb1iPc17";
+		else if (props.variant === "negative") rules += " gGBFq4b17";
+		else if (props.variant === "notice") rules += " go3eV3b17";
+		else if (props.variant === "positive") rules += " gbiKgae17";
+		else rules += " gyJJ1Ud17";
+		rules += " glc17";
+	} else rules += " g917";
+	return rules;
+};
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function stringValueLabel(value) {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+}
+function getDataAttributes(source) {
+	const record = source;
+	const attributes = {};
+	for (const key in record) if (key.startsWith("data-")) {
+		const value = record[key];
+		attributes[key] = value == null ? void 0 : String(value);
+	}
+	return attributes;
+}
+function Meter$1(props) {
+	const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);
+	const merged = mergeProps(contextProps ?? {}, props);
+	const [local] = splitProps(merged, [
+		"value",
+		"minValue",
+		"maxValue",
+		"valueLabel",
+		"formatOptions",
+		"size",
+		"segments",
+		"variant",
+		"label",
+		"staticColor",
+		"labelPosition",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"slot",
+		"ref",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"class",
+		"role",
+		"style",
+		"showValueLabel",
+		"children"
+	]);
+	const size = () => local.size ?? "M";
+	const variant = () => normalizeVariant(local.variant);
+	const labelPosition = () => local.labelPosition ?? "top";
+	const isStaticColor = () => !!local.staticColor;
+	const state = (labelAlign) => ({
+		size: size(),
+		variant: variant(),
+		staticColor: local.staticColor,
+		labelPosition: labelPosition(),
+		labelAlign,
+		isStaticColor: isStaticColor(),
+		isSegmented: segmentCount() != null
+	});
+	const segmentCount = () => {
+		const segments = local.segments;
+		return segments != null && Number.isFinite(segments) && segments >= 1 ? Math.floor(segments) : null;
+	};
+	const filledCount = (percentage) => {
+		const segments = segmentCount();
+		return segments == null ? 0 : clamp(Math.round(percentage / 100 * segments), 0, segments);
+	};
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	return <Meter {...getDataAttributes(merged)} id={local.id} value={local.value} minValue={local.minValue} maxValue={local.maxValue} valueLabel={stringValueLabel(local.valueLabel)} formatOptions={local.formatOptions} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} ref={mergeContextRefs(contextProps?.ref, props.ref)} class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())].filter(Boolean).join(" ")} style={mergedUnsafeStyle()} slot={local.slot ?? void 0}>
+      {({ percentage, valueText }) => <>
+          {local.label && <div class={labelWrapperStyles(state("start"))}>
+              <Label class={labelStyles(state("start"))}>{local.label}</Label>
+            </div>}
+          {local.label && <Text$1 styles={valueStyles(state("end"))}>{local.valueLabel ?? valueText}</Text$1>}
+          <SkeletonWrapper>
+            {segmentCount() != null ? <div class={segmentRowStyles} aria-hidden="true">
+                <For each={Array.from({ length: segmentCount() ?? 0 })}>
+                  {(_, index) => <div class={segmentStyles({
+		...state(),
+		isFilled: index() < filledCount(percentage)
+	})} />}
+                </For>
+              </div> : <div class={trackStyles(state())}>
+                <div class={fillStyles(state())} style={{ width: `${percentage}%` }} />
+                <div aria-hidden="true" class={trackRimStyles} />
+              </div>}
+          </SkeletonWrapper>
+        </>}
+    </Meter>;
+}
+//#endregion
+export { MeterContext as n, PixelMeter as r, Meter$1 as t };
+
+//# sourceMappingURL=meter.jsx.map