@epilot/volt-ui-experimental-griffel 0.2.0 → 0.2.3

package/dist/components/date-time-picker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n  /**\n   * Accessible name for the hours column. Pass a translated string.\n   *\n   * These are ACCESSIBLE NAMES, not visible headers, and the distinction is deliberate. v1 ≤1.3.x\n   * had `hoursLabel`/`minutesLabel` that rendered visible \"HH\"/\"MM\" headings; v1 deleted them in\n   * `138fe05` (2026-06-25) and this package mirrors v1's current output, which Rule 0 makes the\n   * fidelity target. But v1 replaced them with nothing, so both libraries now hand a screen reader\n   * two unnamed columns of bare numbers. Naming them via `aria-label` closes that without moving a\n   * pixel — the VR gate still matches v1 specimen for specimen.\n   */\n  hoursLabel?: string\n  /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n  minutesLabel?: string\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n      hoursLabel = \"Hours\",\n      minutesLabel = \"Minutes\",\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={hoursLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={minutesLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}

package/dist/components/dialog/dialog.js

@@ -5,7 +5,7 @@ import { shorthands as s } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as W } from "../../styles/make-styles.js";
-import { spacingElement2 as f, spacingGroup2 as p, grayA1 as L, leadingSm as N, textSm as T, grayA11 as A, grayA12 as O, fontWeightSemibold as F, leadingLg as k, textLg as P, accentA8 as x, semAccentSoft as H, accentA11 as I, container5xl as X, container4xl as j, container3xl as B, container2xl as E, containerXl as _, containerLg as M, containerMd as G, containerSm as Q, body as V, radiusXl as Z, spacingLayout1 as q } from "../../tokens/index.js";
+import { spacingElement2 as f, spacingGroup2 as p, grayA1 as L, radiusXl as N, spacingLayout1 as T, leadingSm as A, textSm as O, grayA11 as F, grayA12 as k, fontWeightSemibold as P, leadingLg as H, textLg as I, accentA8 as x, semAccentSoft as X, accentA11 as j, container5xl as B, container4xl as E, container3xl as _, container2xl as M, containerXl as G, containerLg as Q, containerMd as V, containerSm as Z, body as q } from "../../tokens/index.js";
 const c = W({
   overlay: {
     position: "fixed",
@@ -31,7 +31,7 @@ const c = W({
     }
   },
   content: {
-    backgroundColor: V,
+    backgroundColor: q,
     position: "fixed",
     top: "50%",
     left: "50%",
@@ -41,8 +41,8 @@ const c = W({
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
     transform: "translate(-50%, -50%)",
-    ...s.gap(q),
-    ...s.borderRadius(Z),
+    ...s.gap(T),
+    ...s.borderRadius(N),
     ...s.border("1px", "solid", L),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
@@ -74,14 +74,14 @@ const c = W({
       animationDuration: "150ms",
       animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
     },
-    "&[data-size='sm']": { maxWidth: Q },
-    "&[data-size='md']": { maxWidth: G },
-    "&[data-size='lg']": { maxWidth: M },
-    "&[data-size='xl']": { maxWidth: _ },
-    "&[data-size='2xl']": { maxWidth: E },
-    "&[data-size='3xl']": { maxWidth: B },
-    "&[data-size='4xl']": { maxWidth: j },
-    "&[data-size='5xl']": { maxWidth: X },
+    "&[data-size='sm']": { maxWidth: Z },
+    "&[data-size='md']": { maxWidth: V },
+    "&[data-size='lg']": { maxWidth: Q },
+    "&[data-size='xl']": { maxWidth: G },
+    "&[data-size='2xl']": { maxWidth: M },
+    "&[data-size='3xl']": { maxWidth: _ },
+    "&[data-size='4xl']": { maxWidth: E },
+    "&[data-size='5xl']": { maxWidth: B },
     "&[data-size='full-width']": { maxWidth: "100%" }
   },
   contentPadding: {
@@ -103,9 +103,9 @@ const c = W({
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: I,
+    color: j,
     ":hover": {
-      backgroundColor: H
+      backgroundColor: X
     },
     ":focus-visible": {
       outlineWidth: "2px",
@@ -135,15 +135,15 @@ const c = W({
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: P,
-    lineHeight: k,
-    fontWeight: F,
-    color: O
+    fontSize: I,
+    lineHeight: H,
+    fontWeight: P,
+    color: k
   },
   description: {
-    color: A,
-    fontSize: T,
-    lineHeight: N
+    color: F,
+    fontSize: O,
+    lineHeight: A
   },
   srOnly: {
     position: "absolute",

package/dist/components/drawer/drawer.js

@@ -5,7 +5,7 @@ import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as L } from "../../styles/make-styles.js";
-import { spacingElement2 as g, grayA1 as p, spacingElement3 as y, leadingSm as X, textSm as A, grayA11 as O, grayA12 as Y, fontWeightSemibold as k, leadingLg as E, textLg as P, accentA8 as h, semAccentSoft as B, accentA11 as H, spacingGroup2 as b, spacingElement1 as n, gray2 as I, radius2xl as W } from "../../tokens/index.js";
+import { spacingElement2 as g, grayA1 as p, spacingElement3 as y, radius2xl as X, spacingGroup2 as h, leadingSm as A, textSm as O, grayA11 as Y, grayA12 as k, fontWeightSemibold as E, leadingLg as P, textLg as B, accentA8 as b, semAccentSoft as H, accentA11 as I, spacingElement1 as n, gray2 as W } from "../../tokens/index.js";
 const d = L({
   overlay: {
     position: "fixed",
@@ -31,14 +31,14 @@ const d = L({
     }
   },
   content: {
-    backgroundColor: I,
+    backgroundColor: W,
     position: "fixed",
     // v1's z-1300 is the overlay tier; no z-index token exists in this package.
     zIndex: 1300,
     display: "flex",
     flexDirection: "column",
-    ...i.gap(b),
-    ...i.borderRadius(W),
+    ...i.gap(h),
+    ...i.borderRadius(X),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a"
   },
@@ -191,27 +191,27 @@ const d = L({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: h
+      outlineColor: b
     }
   },
   closeButton: {
     position: "absolute",
     // v1 top-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
     top: y,
-    right: b,
+    right: h,
     ...i.padding(g),
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: H,
+    color: I,
     ":hover": {
-      backgroundColor: B
+      backgroundColor: H
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: h
+      outlineColor: b
     },
     ":disabled": {
       pointerEvents: "none"
@@ -238,15 +238,15 @@ const d = L({
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: P,
-    lineHeight: E,
-    fontWeight: k,
-    color: Y
+    fontSize: B,
+    lineHeight: P,
+    fontWeight: E,
+    color: k
   },
   description: {
-    color: O,
-    fontSize: A,
-    lineHeight: X
+    color: Y,
+    fontSize: O,
+    lineHeight: A
   },
   srOnly: {
     position: "absolute",

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -5,7 +5,7 @@ import { shorthands as g } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as z } from "../../styles/make-styles.js";
-import { spacingElement1 as u, grayA11 as W, leadingXs as X, textXs as B, grayA3 as E, fontWeightSemibold as $, leadingSm as b, textSm as x, spacingElement2 as m, semAccentSoft as f, semErrorSoft as w, errorA8 as P, errorA11 as j, grayA12 as Y, body as _, accentA11 as F, radiusMd as H, radiusXl as Z } from "../../tokens/index.js";
+import { radiusMd as W, spacingElement2 as m, spacingElement1 as u, radiusXl as X, grayA11 as B, leadingXs as E, textXs as $, grayA3 as P, fontWeightSemibold as j, leadingSm as b, textSm as x, semAccentSoft as f, semErrorSoft as w, errorA8 as Y, errorA11 as _, grayA12 as F, body as H, accentA11 as Z } from "../../tokens/index.js";
 const O = (r) => /* @__PURE__ */ e(
   "svg",
   {
@@ -41,17 +41,17 @@ const O = (r) => /* @__PURE__ */ e(
   }
 ), l = z({
   trigger: {
-    color: F
+    color: Z
   },
   portal: {
     display: "contents"
   },
   popup: {
-    backgroundColor: _,
-    color: Y,
+    backgroundColor: H,
+    color: F,
     minWidth: "10rem",
     overflow: "hidden",
-    ...g.borderRadius(Z),
+    ...g.borderRadius(X),
     ...g.padding(u),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
@@ -118,7 +118,7 @@ const O = (r) => /* @__PURE__ */ e(
     userSelect: "none",
     alignItems: "center",
     ...g.gap(m),
-    ...g.borderRadius(H),
+    ...g.borderRadius(W),
     paddingLeft: m,
     paddingRight: m,
     paddingTop: "0.375rem",
@@ -153,7 +153,7 @@ const O = (r) => /* @__PURE__ */ e(
     paddingLeft: "2rem"
   },
   itemDestructive: {
-    color: j,
+    color: _,
     ":hover": {
       backgroundColor: w
     },
@@ -161,7 +161,7 @@ const O = (r) => /* @__PURE__ */ e(
       backgroundColor: w,
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: P
+      outlineColor: Y
     },
     "&[data-highlighted]": {
       backgroundColor: w
@@ -204,7 +204,7 @@ const O = (r) => /* @__PURE__ */ e(
     paddingBottom: "0.375rem",
     fontSize: x,
     lineHeight: b,
-    fontWeight: $
+    fontWeight: j
   },
   separator: {
     marginLeft: `calc(-1 * ${u})`,
@@ -212,14 +212,14 @@ const O = (r) => /* @__PURE__ */ e(
     marginTop: u,
     marginBottom: u,
     height: "1px",
-    backgroundColor: E
+    backgroundColor: P
   },
   shortcut: {
     marginLeft: "auto",
-    fontSize: B,
-    lineHeight: X,
+    fontSize: $,
+    lineHeight: E,
     letterSpacing: "0.1em",
-    color: W
+    color: B
   }
 }), ro = d.forwardRef(
   function(o, t) {

package/dist/components/field/field-combobox.js

@@ -4,7 +4,7 @@ import { shorthands as s } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as p } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as R } from "../../styles/make-styles.js";
-import { spacingElement2 as b, grayA8 as S, accentA11 as I, spacingGroup1 as x, grayA11 as f, spacingElement1 as y, semGraySoft as L, leadingXs as N, textXs as q, fontWeightSemibold as P, leadingSm as h, textSm as C, grayA12 as g, radiusMd as T, radiusLg as V } from "../../tokens/index.js";
+import { radiusMd as S, spacingElement2 as b, radiusLg as I, grayA8 as L, accentA11 as N, spacingGroup1 as x, grayA11 as f, spacingElement1 as y, semGraySoft as q, leadingXs as P, textXs as T, fontWeightSemibold as V, leadingSm as h, textSm as C, grayA12 as g } from "../../tokens/index.js";
 import { Command as G, CommandEmpty as B, CommandGroup as D, CommandInput as k, CommandItem as A, CommandList as E, CommandLoading as j, CommandSeparator as H } from "../command/command.js";
 import { Label as z } from "../label/label.js";
 import { Popover as M, PopoverPortal as W, PopoverContent as X, PopoverTrigger as Z } from "../popover/popover.js";
@@ -49,7 +49,7 @@ const _ = (n) => /* @__PURE__ */ a(
     alignItems: "center",
     justifyContent: "space-between",
     ...s.gap(b),
-    ...s.borderRadius(V),
+    ...s.borderRadius(I),
     backgroundColor: "transparent",
     fontSize: C,
     lineHeight: h,
@@ -109,7 +109,7 @@ const _ = (n) => /* @__PURE__ */ a(
     cursor: "default",
     alignItems: "center",
     ...s.gap(b),
-    ...s.borderRadius(T),
+    ...s.borderRadius(S),
     fontSize: C,
     lineHeight: h,
     outlineStyle: "none",
@@ -142,16 +142,16 @@ const _ = (n) => /* @__PURE__ */ a(
   },
   groupLabel: {
     color: f,
-    fontWeight: P,
+    fontWeight: V,
     paddingLeft: b,
     paddingRight: b,
     paddingTop: b,
     paddingBottom: b,
-    fontSize: q,
-    lineHeight: N
+    fontSize: T,
+    lineHeight: P
   },
   separator: {
-    backgroundColor: L,
+    backgroundColor: q,
     pointerEvents: "none",
     marginLeft: `calc(-1 * ${y})`,
     marginRight: `calc(-1 * ${y})`,
@@ -178,7 +178,7 @@ const _ = (n) => /* @__PURE__ */ a(
     ...s.borderRadius("9999px"),
     backgroundColor: "transparent",
     ...s.border("0"),
-    color: I
+    color: N
   },
   clearSvg: {
     width: "1.25rem",
@@ -201,7 +201,7 @@ const _ = (n) => /* @__PURE__ */ a(
     color: "currentColor"
   },
   placeholder: {
-    color: S
+    color: L
   }
 }), io = l.forwardRef(
   function(t, o) {

package/dist/components/field/field.js

@@ -4,7 +4,7 @@ import { shorthands as r } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as W } from "../../styles/make-styles.js";
-import { fontWeightNormal as x, leadingSm as S, textSm as w, grayA11 as L, grayA8 as N, grayA12 as F, leadingXs as z, textXs as v, errorA11 as G, errorA8 as A, errorA4 as P, semErrorSoft as E, accentA8 as D, grayA3 as k, accentA4 as X, accentA3 as $, grayA4 as j, spacingElement3 as I, spacingElement2 as y, spacingElement1 as R, spacingLayout2 as M, radiusLg as q } from "../../tokens/index.js";
+import { spacingElement2 as y, spacingElement1 as S, spacingLayout2 as P, radiusLg as X, fontWeightNormal as x, leadingSm as w, textSm as z, grayA11 as L, grayA8 as N, grayA12 as F, leadingXs as D, textXs as v, errorA11 as G, errorA8 as A, errorA4 as $, semErrorSoft as E, accentA8 as R, grayA3 as k, accentA4 as j, accentA3 as M, grayA4 as q, spacingElement3 as I } from "../../tokens/index.js";
 const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createContext(null), T = () => {
   const l = a.useContext(H);
   if (!l)
@@ -24,8 +24,8 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     // silently loses 4px per side. See STATUS: the scale gap is the root cause.
     paddingLeft: I,
     paddingRight: I,
-    ...r.gap(R),
-    ...r.borderRadius(q),
+    ...r.gap(S),
+    ...r.borderRadius(X),
     transitionProperty: "all",
     transitionDuration: "75ms",
     outlineOffset: "2px",
@@ -59,31 +59,31 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   rootDefault: {
     backgroundColor: k,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: q
     },
     "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: D
+      outlineColor: R
     }
   },
   rootHighlight: {
-    backgroundColor: $,
+    backgroundColor: M,
     ":hover": {
-      backgroundColor: X
+      backgroundColor: j
     },
     "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: D
+      outlineColor: R
     }
   },
   rootReadonly: {
     backgroundColor: k,
     "&[data-focused='true'], &[data-focus-visible]": {
-      outlineColor: D
+      outlineColor: R
     }
   },
   rootDestructive: {
     backgroundColor: E,
     ":hover": {
-      backgroundColor: P
+      backgroundColor: $
     },
     "&[data-focused='true'], &[data-focus-visible]": {
       outlineColor: A
@@ -92,7 +92,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   fieldSet: {
     display: "flex",
     flexDirection: "column",
-    ...r.gap(M),
+    ...r.gap(P),
     ...r.border("0"),
     ...r.padding(0),
     ...r.margin(0)
@@ -120,7 +120,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   label: {
     minHeight: "1rem",
     fontSize: v,
-    lineHeight: z,
+    lineHeight: D,
     display: "flex",
     width: "fit-content",
     ...r.gap(y),
@@ -133,7 +133,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   labelContent: {
     display: "inline-flex",
     alignItems: "center",
-    ...r.gap(R),
+    ...r.gap(S),
     transitionProperty: "opacity",
     transitionDuration: "150ms"
   },
@@ -164,7 +164,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   error: {
     color: G,
     fontSize: v,
-    lineHeight: z,
+    lineHeight: D,
     fontWeight: x
   },
   errorList: {
@@ -177,7 +177,7 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   errorListItem: {
     color: G,
     fontSize: v,
-    lineHeight: z,
+    lineHeight: D,
     fontWeight: x,
     marginTop: "0.25rem",
     marginBottom: "0.25rem"
@@ -186,8 +186,8 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     width: "100%",
     height: "1.5rem",
     outlineStyle: "none",
-    fontSize: w,
-    lineHeight: S,
+    fontSize: z,
+    lineHeight: w,
     color: F,
     backgroundColor: "transparent",
     ...r.border("0"),
@@ -202,14 +202,14 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
   inputGroup: {
     display: "flex",
     alignItems: "center",
-    ...r.gap(R),
+    ...r.gap(S),
     width: "100%"
   },
   textarea: {
     width: "100%",
     outlineStyle: "none",
-    fontSize: w,
-    lineHeight: S,
+    fontSize: z,
+    lineHeight: w,
     color: F,
     backgroundColor: "transparent",
     ...r.border("0"),
@@ -239,8 +239,8 @@ const Q = "div", U = "label", Y = "input", _ = "p", J = "div", H = a.createConte
     alignItems: "center",
     justifyContent: "center",
     ...r.gap(y),
-    fontSize: w,
-    lineHeight: S,
+    fontSize: z,
+    lineHeight: w,
     fontWeight: x,
     userSelect: "none"
   },

package/dist/components/label/label.js

@@ -4,12 +4,12 @@ import { shorthands as n } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as p } from "../../styles/make-styles.js";
-import { leadingBase as g, textBase as c, leadingSm as d, textSm as y, leadingXs as b, textXs as S, errorA12 as h, grayA12 as x, fontWeightNormal as u, spacingElement2 as z } from "../../tokens/index.js";
+import { spacingElement2 as g, leadingBase as c, textBase as d, leadingSm as y, textSm as b, leadingXs as S, textXs as h, errorA12 as x, grayA12 as u, fontWeightNormal as z } from "../../tokens/index.js";
 const A = p({
   root: {
     display: "flex",
     alignItems: "center",
-    ...n.gap(z),
+    ...n.gap(g),
     // The leading lives on the size slots below, and which value it takes is a decided question --
     // see DECISIONS.md D9 and the label specimens in vr/specimens that pin it.
     //
@@ -34,7 +34,7 @@ const A = p({
     // and both belong in a STABLE360 ticket against v1. When v1 is fixed, delete the VR shim (see
     // vr/run.mjs V1_DECLARED_LEADING_SHIM); vr/v1-leading-references.test.ts fails on purpose to
     // force that, so the decision gets revisited together with the fix rather than silently.
-    fontWeight: u,
+    fontWeight: z,
     "&[for]": {
       cursor: "pointer"
     },
@@ -53,23 +53,23 @@ const A = p({
   },
   // Variants
   primary: {
-    color: x
+    color: u
   },
   destructive: {
-    color: h
+    color: x
   },
   // Sizes
   sm: {
-    fontSize: S,
-    lineHeight: b
+    fontSize: h,
+    lineHeight: S
   },
   base: {
-    fontSize: y,
-    lineHeight: d
+    fontSize: b,
+    lineHeight: y
   },
   lg: {
-    fontSize: c,
-    lineHeight: g
+    fontSize: d,
+    lineHeight: c
   }
 }), N = l.forwardRef(
   function({ variant: t = "primary", size: o = "base", className: r, ...a }, s) {