sherick-ui 2.5.0 → 2.6.0

package/dist/esm/components/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field } from \"@base-ui/react/field\";\nimport React, {\n  forwardRef,\n  type ComponentProps,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  fieldLayout,\n  fieldMessage,\n  focusRing,\n  material,\n  rim,\n  shape,\n  state,\n  text,\n} from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: boolean;\n  errorMessage?: ReactNode;\n  textareaClassName?: string;\n  /** Base's value-change callback, event details included. */\n  onValueChange?: ComponentProps<typeof Field.Control>[\"onValueChange\"];\n}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({\n    label,\n    description,\n    className,\n    textareaClassName,\n    required,\n    error = false,\n    errorMessage,\n    id,\n    name,\n    disabled,\n    onValueChange,\n    value,\n    defaultValue,\n    ...textareaProps\n  }, ref) => {\n    return (\n      <Field.Root\n        className={cn(fieldLayout, className)}\n        name={name}\n        disabled={disabled}\n        invalid={error}\n      >\n        {label && (\n          <Field.Label className={cn(\"mb-2 text-sm font-medium\", text.high)}>\n            {label}\n            {required && <span className={cn(\"ms-1 text-sherick-danger\")} aria-hidden=\"true\">*</span>}\n          </Field.Label>\n        )}\n        <Field.Control\n          render={<textarea {...textareaProps} ref={ref} />}\n          id={id}\n          name={name}\n          required={required}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          className={cn(\n            \"min-w-0 w-full resize-y\",\n            density.normal,\n            \"min-h-28 px-5 py-4\",\n            shape.control,\n            motionFeedback,\n            focusRing,\n            error ? material.controlError : material.control,\n            error ? rim.fieldError : rim.field,\n            !disabled && (error ? state.field.errorHover : state.field.hover),\n            !disabled && (error ? state.field.errorFocus : state.field.focus),\n            disabled ? state.disabled : state.text,\n            textareaClassName\n          )}\n        />\n        {description && (\n          <Field.Description className={cn(fieldMessage.description)}>\n            {description}\n          </Field.Description>\n        )}\n        {errorMessage && (\n          <Field.Error\n            match={error}\n            className={cn(fieldMessage.error)}\n          >\n            {errorMessage}\n          </Field.Error>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field } from \"@base-ui/react/field\";\nimport React, {\n  forwardRef,\n  type ComponentProps,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  fieldLayout,\n  fieldMessage,\n  focusRing,\n  material,\n  rim,\n  shape,\n  state,\n  text,\n} from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: boolean;\n  errorMessage?: ReactNode;\n  textareaClassName?: string;\n  /** Base's value-change callback, event details included. */\n  onValueChange?: ComponentProps<typeof Field.Control>[\"onValueChange\"];\n}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({\n    label,\n    description,\n    className,\n    textareaClassName,\n    required,\n    error = false,\n    errorMessage,\n    id,\n    name,\n    disabled,\n    onValueChange,\n    value,\n    defaultValue,\n    ...textareaProps\n  }, ref) => {\n    return (\n      <Field.Root\n        className={cn(fieldLayout, className)}\n        name={name}\n        disabled={disabled}\n        invalid={error}\n      >\n        {label && (\n          <Field.Label className={cn(\"mb-2 text-sm font-medium\", text.high)}>\n            {label}\n            {required && <span className={cn(\"ms-1 text-sherick-danger\")} aria-hidden=\"true\">*</span>}\n          </Field.Label>\n        )}\n        <Field.Control\n          render={<textarea {...textareaProps} ref={ref} />}\n          id={id}\n          name={name}\n          required={required}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          className={(controlState) => {\n            /* Invalid by its own prop, or by what Base reports — a failed constraint, or the error a\n               `Form` returns for this field's name: one field, one ladder. */\n            const invalid = error || controlState.valid === false;\n            return cn(\n              \"min-w-0 w-full resize-y\",\n              density.normal,\n              \"min-h-28 px-5 py-4\",\n              shape.control,\n              motionFeedback,\n              focusRing,\n              invalid ? material.controlError : material.control,\n              invalid ? rim.fieldError : rim.field,\n              !disabled && (invalid ? state.field.errorHover : state.field.hover),\n              !disabled && (invalid ? state.field.errorFocus : state.field.focus),\n              disabled ? state.disabled : state.text,\n              textareaClassName\n            );\n          }}\n        />\n        {description && (\n          <Field.Description className={cn(fieldMessage.description)}>\n            {description}\n          </Field.Description>\n        )}\n        {/* Mounted whether or not a message was passed, as `Field`'s is: without `match` this part\n            renders what Base reports, including the error a `Form` returns for this field's name. */}\n        {!(error && !errorMessage) && (\n          <Field.Error\n            match={error ? true : undefined}\n            className={cn(fieldMessage.error)}\n            {...(error ? { children: errorMessage } : {})}\n          />\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/choice-row.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Field } from '@base-ui/react/field';
+import { cn } from '../libs/utils.js';
+import { text, selectableRowSupporting, type, density, state, focusRingWithin, stateLayerQuietComposite, selectableRowSurface, material, shape } from './ui.common.js';
+import { motionFeedback } from './ui.motion.js';
+
+/* Each part is a class list rather than a finished class name: the component composes it through its
+   own `cn()`, which is what scopes it. */
+/** The `Field.Item` that scopes one choice's label and description. */
+const choiceItemClasses = (appearance) => [
+    "group flex items-stretch",
+    density.normal,
+    appearance === "surface" &&
+        cn("relative min-w-0 forced-colors:has-[:focus-visible]:[outline-style:none]", shape.control, material.matteQuiet, selectableRowSurface, stateLayerQuietComposite, focusRingWithin, motionFeedback),
+    state.enabled,
+    state.effectiveDisabled,
+    state.disabledRow,
+];
+/* The row itself is the label, so the whole row stays the pointer target. Inside it the mark and the
+   copy are one first-line group: a wrapped label then aligns the mark to its first line instead of
+   centring it on the block, while a one-line row is still centred in the row's own density height.
+   The copy declares its own line height — `density.normal` sets the type step but no leading, and this
+   package ships no reset — so the 20px mark plus its 2px of block margin and the line it is centred on
+   are the same 24px whatever line height a host happens to inherit. */
+const choiceLabelClasses = (appearance) => [
+    "flex min-w-0 flex-1 items-center",
+    appearance === "surface" && "px-4 py-3",
+];
+const choiceLineClassName = "flex w-full items-start gap-3";
+/**
+ * A choice's copy. Without a description it is the label alone, and the control is named by the
+ * whole row. With one, the label is the name and the description is the control's description:
+ * Base links it through the `Field.Item` around the row, so a reader hears "Casino A, checkbox,
+ * casino-a.com and casino-a.net" rather than one run-on name. Both stay inside the row, so a press
+ * on the supporting line still makes the choice.
+ */
+function ChoiceCopy({ appearance, label, description, labelId }) {
+    if (description == null) {
+        return jsx("span", { className: cn(text.high, "min-w-0 leading-6", appearance === "surface" && "flex-1"), children: label });
+    }
+    return (jsxs("span", { className: cn("flex min-w-0 flex-col", appearance === "surface" && "flex-1"), children: [jsx("span", { id: labelId, className: cn(text.high, "leading-6"), children: label }), jsx(Field.Description, { render: jsx("span", {}), className: cn("mt-0.5 block", type.supporting, text.medium, appearance === "surface" && selectableRowSupporting), children: description })] }));
+}
+
+export { ChoiceCopy, choiceItemClasses, choiceLabelClasses, choiceLineClassName };
+//# sourceMappingURL=choice-row.js.map

package/dist/esm/components/choice-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-row.js","sources":["../../../src/components/choice-row.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field } from \"@base-ui/react/field\";\nimport type { ClassValue } from \"clsx\";\nimport React, { type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  focusRingWithin,\n  material,\n  selectableRowSupporting,\n  selectableRowSurface,\n  shape,\n  state,\n  stateLayerQuietComposite,\n  text,\n  type,\n} from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\n/* The row a choice in a group sits on — a radio in `RadioGroup`, a checkbox in `CheckboxGroup`. The\n   two groups hold different marks and different values, but a choice is the same object in both: the\n   whole row is its label, the mark holds the first line of the copy, and the opt-in `surface` row is\n   the same held-choice surface. One anatomy keeps the two from drifting into two designs. */\n\nexport type ChoiceAppearance = \"default\" | \"surface\";\n\n/* Each part is a class list rather than a finished class name: the component composes it through its\n   own `cn()`, which is what scopes it. */\n\n/** The `Field.Item` that scopes one choice's label and description. */\nexport const choiceItemClasses = (appearance: ChoiceAppearance): ClassValue[] => [\n  \"group flex items-stretch\",\n  density.normal,\n  appearance === \"surface\" &&\n    cn(\n      \"relative min-w-0 forced-colors:has-[:focus-visible]:[outline-style:none]\",\n      shape.control,\n      material.matteQuiet,\n      selectableRowSurface,\n      stateLayerQuietComposite,\n      focusRingWithin,\n      motionFeedback\n    ),\n  state.enabled,\n  state.effectiveDisabled,\n  state.disabledRow,\n];\n\n/* The row itself is the label, so the whole row stays the pointer target. Inside it the mark and the\n   copy are one first-line group: a wrapped label then aligns the mark to its first line instead of\n   centring it on the block, while a one-line row is still centred in the row's own density height.\n   The copy declares its own line height — `density.normal` sets the type step but no leading, and this\n   package ships no reset — so the 20px mark plus its 2px of block margin and the line it is centred on\n   are the same 24px whatever line height a host happens to inherit. */\nexport const choiceLabelClasses = (appearance: ChoiceAppearance): ClassValue[] => [\n  \"flex min-w-0 flex-1 items-center\",\n  appearance === \"surface\" && \"px-4 py-3\",\n];\n\nexport const choiceLineClassName = \"flex w-full items-start gap-3\";\n\ninterface ChoiceCopyProps {\n  appearance: ChoiceAppearance;\n  label: ReactNode;\n  description?: ReactNode;\n  /** The id the control is named by when a description follows its label. */\n  labelId: string;\n}\n\n/**\n * A choice's copy. Without a description it is the label alone, and the control is named by the\n * whole row. With one, the label is the name and the description is the control's description:\n * Base links it through the `Field.Item` around the row, so a reader hears \"Casino A, checkbox,\n * casino-a.com and casino-a.net\" rather than one run-on name. Both stay inside the row, so a press\n * on the supporting line still makes the choice.\n */\nexport function ChoiceCopy({ appearance, label, description, labelId }: ChoiceCopyProps) {\n  if (description == null) {\n    return <span className={cn(text.high, \"min-w-0 leading-6\", appearance === \"surface\" && \"flex-1\")}>{label}</span>;\n  }\n  return (\n    <span className={cn(\"flex min-w-0 flex-col\", appearance === \"surface\" && \"flex-1\")}>\n      <span id={labelId} className={cn(text.high, \"leading-6\")}>{label}</span>\n      {/* A label holds phrasing content only, so the description renders as a span. */}\n      <Field.Description\n        render={<span />}\n        className={cn(\"mt-0.5 block\", type.supporting, text.medium, appearance === \"surface\" && selectableRowSupporting)}\n      >\n        {description}\n      </Field.Description>\n    </span>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AA2BA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAC0C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAE1C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;MACa,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB,CAAA,CAAA,CAAG,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA4B,CAAA,CAAA,CAAA,CAAA,CAAmB;IAC/E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA0B;AAC1B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM;AACd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,KAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA;AACtB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAE,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA0E,EAC1E,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,OAAO,CAAA,CACb,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CACnB,oBAAoB,CAAA,CACpB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAwB,EACxB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAe,CAAA,CACf,cAAc,CACf;AACH,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO;AACb,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB;AACvB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW;;AAGnB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;AAKuE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;MAC1D,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAkB,CAAA,CAAA,CAAG,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA4B,CAAA,CAAA,CAAA,CAAA,CAAmB;IAChF,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAkC;IAClC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW;;AAGlC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,mBAAmB,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAUnC,CAAA,CAAA;;;;;;AAMG,CAAA,CAAA;AACG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAC,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAmB,CAAA,CAAA;AACrF,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAI,CAAA,CAAE;QACvB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOA,CAAAA,CAAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,CAAA,CAAE,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAI,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmB,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,EAAQ;IAClH;AACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACEC,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,EAAE,CAAA,CAAE,CAAC,uBAAuB,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,KAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,QAAQ,CAAC,CAAA,CAAA,QAAA,CAAA,CAAA,CAChFD,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAM,CAAA,CAAE,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAE,SAAS,CAAA,CAAE,CAAA,CAAE,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,IAAI,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAG,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAQ,CAAA,CAExEA,CAAAA,CAAAA,CAAA,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,WAAW,CAAA,CAAA,CAAA,CAChB,MAAM,CAAA,CAAEA,CAAAA,CAAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAQ,CAAA,CAChB,SAAS,CAAA,CAAE,CAAA,CAAE,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAE,IAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,EAAE,CAAA,CAAA,CAAA,CAAI,CAAC,MAAM,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,KAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,uBAAuB,CAAC,CAAA,CAAA,QAAA,CAAA,CAE/G,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAA,CACM,CAAA,EAAA,CACf,CAAA;AAEX;;"}

package/dist/esm/components/option-groups.js

@@ -0,0 +1,30 @@
+/* Option groups — the one shape `Select` and `Combobox` accept for a list filed under headings, such
+   as channels under the category they belong to.
+
+   A list is any mix of options and groups, in the order it should read: an option outside every group
+   is listed where it stands, exactly as a channel with no category is listed above the first category.
+   The primitives only know a list of sections, so consecutive ungrouped options become one section
+   without a heading. That normalization is the whole of this module; rendering, filtering and the
+   group semantics stay with the primitive. */
+const isOptionGroup = (entry) => typeof entry === "object" && entry !== null && Array.isArray(entry.options);
+const hasOptionGroups = (entries) => entries.some(isOptionGroup);
+/** Every option in reading order, whichever group it is filed under. */
+const flattenOptions = (entries) => entries.flatMap((entry) => (isOptionGroup(entry) ? entry.options : [entry]));
+const toOptionSections = (entries) => {
+    const sections = [];
+    for (const entry of entries) {
+        if (isOptionGroup(entry)) {
+            sections.push({ key: `group:${sections.length}:${entry.label}`, label: entry.label, items: entry.options });
+            continue;
+        }
+        const previous = sections[sections.length - 1];
+        if (previous && previous.label === undefined)
+            previous.items.push(entry);
+        else
+            sections.push({ key: `ungrouped:${sections.length}`, items: [entry] });
+    }
+    return sections;
+};
+
+export { flattenOptions, hasOptionGroups, isOptionGroup, toOptionSections };
+//# sourceMappingURL=option-groups.js.map

package/dist/esm/components/option-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-groups.js","sources":["../../../src/components/option-groups.ts"],"sourcesContent":["/* Option groups — the one shape `Select` and `Combobox` accept for a list filed under headings, such\n   as channels under the category they belong to.\n\n   A list is any mix of options and groups, in the order it should read: an option outside every group\n   is listed where it stands, exactly as a channel with no category is listed above the first category.\n   The primitives only know a list of sections, so consecutive ungrouped options become one section\n   without a heading. That normalization is the whole of this module; rendering, filtering and the\n   group semantics stay with the primitive. */\n\nexport interface OptionGroup<Option> {\n  /** The heading the group is filed under. The primitive names the group from it. */\n  label: string;\n  options: Option[];\n}\n\n/** One rendered section: a group with its heading, or a run of ungrouped options without one. */\nexport interface OptionSection<Option> {\n  key: string;\n  label?: string;\n  items: Option[];\n}\n\nexport const isOptionGroup = <Option>(entry: Option | OptionGroup<Option>): entry is OptionGroup<Option> =>\n  typeof entry === \"object\" && entry !== null && Array.isArray((entry as OptionGroup<Option>).options);\n\nexport const hasOptionGroups = <Option>(entries: ReadonlyArray<Option | OptionGroup<Option>>) =>\n  entries.some(isOptionGroup);\n\n/** Every option in reading order, whichever group it is filed under. */\nexport const flattenOptions = <Option>(entries: ReadonlyArray<Option | OptionGroup<Option>>): Option[] =>\n  entries.flatMap((entry) => (isOptionGroup(entry) ? entry.options : [entry]));\n\nexport const toOptionSections = <Option>(\n  entries: ReadonlyArray<Option | OptionGroup<Option>>\n): OptionSection<Option>[] => {\n  const sections: OptionSection<Option>[] = [];\n  for (const entry of entries) {\n    if (isOptionGroup(entry)) {\n      sections.push({ key: `group:${sections.length}:${entry.label}`, label: entry.label, items: entry.options });\n      continue;\n    }\n    const previous = sections[sections.length - 1];\n    if (previous && previous.label === undefined) previous.items.push(entry);\n    else sections.push({ key: `ungrouped:${sections.length}`, items: [entry] });\n  }\n  return sections;\n};\n"],"names":[],"mappings":"AAAA;;;;;;;AAO8C;AAevC,MAAM,aAAa,GAAG,CAAS,KAAmC,KACvE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,CAAE,KAA6B,CAAC,OAAO;AAE9F,MAAM,eAAe,GAAG,CAAS,OAAoD,KAC1F,OAAO,CAAC,IAAI,CAAC,aAAa;AAE5B;AACO,MAAM,cAAc,GAAG,CAAS,OAAoD,KACzF,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,MAAM,aAAa,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;AAEtE,MAAM,gBAAgB,GAAG,CAC9B,OAAoD,KACzB;IAC3B,MAAM,QAAQ,GAA4B,EAAE;AAC5C,IAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AAC3B,QAAA,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA,MAAA,EAAS,QAAQ,CAAC,MAAM,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAA,CAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;YAC3G;QACF;QACA,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;AAC9C,QAAA,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AACnE,YAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,aAAa,QAAQ,CAAC,MAAM,CAAA,CAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC7E;AACA,IAAA,OAAO,QAAQ;AACjB;;"}

package/dist/esm/components/ui.common.js

@@ -1,5 +1,5 @@
 import { cx } from '../libs/utils.js';
-import { motionRim, motionFeedback, motionRowLayer, motionStateLayer, motionDisclose } from './ui.motion.js';
+import { motionRim, motionFeedback, motionStateLayer, motionRowLayer, motionDisclose } from './ui.motion.js';
 
 /* Sherick UI design primitives
    ==========================================================================
@@ -597,6 +597,13 @@ const list = {
        row still shows where the navigation is while saying it cannot be used. The ring is inset
        because the row lives inside the sheet it belongs to, as a segment does in its track. */
     option: /* @__PURE__ */ cx("flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none", type.control.normal, shape.control, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled),
+    /* The heading of a group of options — a category above the channels filed under it. It is a
+       caption, not a row: it takes no state layer, no highlight and no focus, because the reader never
+       lands on it; the primitive names the group from it, so a screen reader hears the category as it
+       enters the group. Its inline padding is the option's, so a heading and the labels beneath it
+       share one start edge, and the space above it is what separates one group from the last: a
+       group inside a sheet is grouped by spacing and a type role, never by a rule or a nested card. */
+    groupLabel: /* @__PURE__ */ cx("px-4 pb-1 pt-3 font-medium", type.caption, text.medium),
     /* The same object at the density a list of short actions wants, where the row is scanned
        rather than read and the list is a control rather than a page. `shape.row` keeps the
        command's corner proportional to its own height, so its highlight nests in the tighter
@@ -693,6 +700,11 @@ const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium
    selection authoritative at the primitive rather than mirroring it in component state.
    Keep this independent so unrelated consumers of the mark recipes can tree-shake it. */
 const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+/* Supporting copy inside such a row — a choice's description. `text.medium` is measured against the
+   resting surfaces and falls just short of 4.5:1 on the selected step (4.25:1 light, 4.32:1 dark), so
+   while the row holds the selection its supporting line takes full ink; the supporting type step
+   keeps it subordinate to the label. Keyed on the same primitive marker as the surface itself. */
+const selectableRowSupporting = "group-has-[[data-checked]]:text-sherick-ink";
 const selectable = {
     surface: /* @__PURE__ */ cx("relative", elevation.recessed, motionFeedback),
     /* A selection mark — a checkbox box, a radio socket — rests in the same groove a Switch track
@@ -776,5 +788,5 @@ const fieldMessage = {
     error: /* @__PURE__ */ cx("mt-2", type.supporting, tone.text.danger),
 };
 
-export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 //# sourceMappingURL=ui.common.js.map

package/dist/esm/components/ui.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.common.js","sources":["../../../src/components/ui.common.ts"],"sourcesContent":["import { cx } from \"@/libs/utils\";\nimport type { Variant } from \"./ui.types\";\nimport { motionDisclose, motionFeedback, motionRim, motionRowLayer, motionStateLayer } from \"./ui.motion\";\n\n/* Sherick UI design primitives\n   ==========================================================================\n   One module owns every visual rule in the library. A component composes these\n   primitives; it does not write a color, shadow, radius, duration or hairline of\n   its own. The system has these parts:\n\n     material   what a surface is made of          (canvas, matte, control, acrylic)\n     elevation  how far it sits off the page       (flat, raised, floating, control, recessed)\n     shape      its corner role                    (control, prominent, surface, expressive, pill, circle)\n     edge       the hairline between stacked parts (row, header, rule)\n     state      how it responds                    (rest, hover, pressed, selected, disabled, focus)\n     stateLayer the composited hover/press overlay (quiet, tonal, filled, track, activeRow)\n     disclosure one expandable region and its row (trigger, panel)\n     tone       its color role                     (text, soft, tonal, selected, strong)\n     text       the readable emphasis ladder       (high, medium)\n     density    how tightly it is packed           (compact, normal, prominent, target)\n     overlay    floating shells                    (menu, tooltip, popup, toast, sheet, dialog)\n    focusRing  the one focus language             (focusRing, focusRingInset, focusRingHeld, focusRingWithin, groupFocusRing)\n\n   Temporal behavior is deliberately not here: `ui.motion.ts` owns every transition,\n   duration, curve and reduced-motion rule, and a recipe below names one of its recipes\n   rather than writing a timing of its own.\n\n   The canonical statement of these rules — and of what is deliberately left to a\n   component's own anatomy, such as layout, spacing, padding, intrinsic size,\n   responsive arrangement and content typography — is `docs/DESIGN_LANGUAGE.md`.\n   Extend that document and this module together; never implement a visual rule in\n   a component.\n\n   material, elevation and edge are orthogonal, and that is the point:\n   a material is a fill, an elevation is a distance, and an edge is a structural\n   line. A component adds elevation only where its anatomy is genuinely lifted,\n   and a hairline only where two parts actually meet. Nothing is baked in.\n\n   The physical language, in order:\n     flat matte by default\n       -> tactile depth on manipulated controls\n       -> recessed depth for tracks, grooves and wells, and for a raised control\n          while it is held\n       -> acrylic only for surfaces that genuinely float above the page\n\n   Elevation composites from the light values in `theme.css` (light above the\n   surface plane). The structural edge tone is its own token, and the acrylic\n   recipes are tokenized separately and calibrated per theme, but both follow the\n   same model: light above, shade below. So a highlight, a shadow, a floating\n   sheet's gradient and a pressed inset stay physically related without sharing\n   one set of numbers. */\n\n/* Focus visibility — one language for every interactive element.\n   `focusRing` draws the ring outside the shape, for a control that stands alone, and it follows\n   **visible** focus: a button does not announce itself when a pointer presses it.\n   `focusRingInset` draws it inside, for a control nested within another surface\n   where an outer ring would collide with the parent's edge. Fields use the outer\n   ring only: no inner rim is added, so focus reads as one ring, never two.\n   `focusRingHeld` and `focusRingWithin` are the same ring for a control that **holds a value**,\n   where the platform moves focus somewhere a plain ring cannot follow: the first for a control\n   that is itself focusable and hands focus to the surface it opens, the second for one whose\n   focus lives in a borderless input inside it. `focusRingHeld` follows *any* focus, because a\n   select has no focus left to follow once its list has taken it; `focusRingWithin` follows\n   *visible* focus, so what a field does is what the platform does — a text field is\n   `:focus-visible` whenever it is focused, a range input only for the keyboard — and a select\n   trigger and an editable combobox field end up identical in every state: neither looks ringed at\n   rest, both look ringed the moment either is used, and both lose it together. `groupFocusRing`\n   draws it from the wrapping control instead of the track it contains. */\nexport const focusRing =\n  \"focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]\";\n\nexport const focusRingInset =\n  \"focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus\";\n\n/* A focus owner that also contains a subtree paints the inset ring on its direct row only. */\nexport const parentFocusRingInset =\n  \"[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus\";\n\n/* The ring of a value control that is itself the focusable element: it wears it whenever it\n   holds focus, however it was focused, and whenever the surface it opened is on screen. A select\n   hands the DOM focus to its list while that list is open, so the ring follows the control's\n   engagement rather than the focus — which is exactly what a native `select` shows, and the only\n   focus indication the field has left once the list has taken over. */\nexport const focusRingHeld =\n  \"focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]\";\n\n/* The same ring for a value control whose focus lives in a borderless input inside it. It follows\n   **visible** focus rather than any focus, which is what makes a field and a slider differ for\n   the platform's reasons instead of by local say-so: a text field is `:focus-visible` whenever it\n   is focused, so a combobox or search field wears the ring the moment it is used, while a range\n   input is `:focus-visible` only for the keyboard, so a slider's handle saves its ring for the\n   keyboard and lets its own engagement answer the pointer. */\nexport const focusRingWithin =\n  \"has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]\";\n\n/* A file drag marks the same target with the same outline as visible keyboard focus. */\nexport const focusRingDrag =\n  \"data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]\";\n\nexport const groupFocusRing =\n  \"group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]\";\n\n/* Motion is not owned here. Every physical event — feedback, tactile, arrive, orient,\n   relocate, direct, presence and activity — is a named recipe in `ui.motion.ts`, which\n   owns the timing and the reduced-motion behavior for it. A recipe in this module\n   interpolates one of those names; it never writes a duration, a curve, a transition or\n   an animation of its own. */\n\n/* Elevation — distance from the surface plane, and nothing else. Three depth roles\n   exist, and the last two are a single tactile pair:\n   - flat:     at rest on the page. Separation comes from tone alone.\n   - raised:   a manipulated control, lifted a hair above its own track so it feels\n               touchable; pressing it returns it to the track.\n   - floating: a surface that genuinely sits above the application.\n   - control:  the resting half of the tactile pair, for a part the user moves —\n               a switch thumb, a selected segment or a held option/date selection.\n   - recessed: the other half of that pair: a groove, a track or a well, which is\n               recessed by definition, and a raised control while it is held, which\n               lands at the same depth.\n   A passive surface is flat unless its anatomy is sunk by design: a well, a groove and\n   a code well are `recessed` while they sit there, and `flat` is the default for\n   everything else passive. A flat control never gains depth by being pressed. */\nexport const elevation = {\n  flat: \"shadow-sherick-flat\",\n  raised: \"shadow-sherick-raised\",\n  floating: \"shadow-sherick-floating\",\n  control: \"shadow-sherick-control\",\n  recessed: \"shadow-sherick-recessed\",\n  /* One rung further down: the depth a small selection mark sinks to while it is held. A mark\n     rests in the ordinary groove; this is its press, never its identity. See\n     `selectable.markSurface`. */\n  well: \"shadow-sherick-well\",\n} as const;\n/* An inset sheet's shaded upper wall, without a lower rim. Kept independent so\n   unrelated components do not bundle this recipe. */\nexport const recessedTop = \"shadow-sherick-recessed-top\";\n\n/* Shape — semantic corner roles, never an arbitrary radius. Softness grows with\n   the size of the object and the emphasis it carries, and silhouette says what an object does:\n   a **capsule acts** (buttons, chips, badges, toggles are `pill`) and a **rounded rectangle\n   holds** (fields, alerts, tables, sheets). Container roles therefore stay clearly short of a\n   capsule at their own height — `control` is a third of a 48px field — so a field never reads as\n   an almost-button beside a real one. Nested roles stay concentric: an inner corner is the outer\n   corner minus the inset between them (a 20px track around a 16px indicator at 4px, a 24px list\n   sheet around 16px options at 8px).\n   - control:     ordinary controls and dense data regions — fields, rows, options,\n                  chips, tables.\n   - mark:        a compact square selection mark — a 20px checkbox box. `control` is a role\n                  for objects the size of a field; its radius exceeds the half-extent of a\n                  20px square, so a mark needs a step of its own — a corner under a third of\n                  its side, so the box stays a rounded square and never reads as a radio.\n   - row:         a row at command density — a row in a list that is scanned rather than\n                  read holds a corner proportional to its own height, because `control`\n                  would reach a 36px row's half-extent and read as a capsule.\n   - prominent:   prominent controls and compact floating surfaces.\n   - surface:     large surfaces — cards, menus, panels.\n   - sheet:       a surface attached to one edge of the viewport. Its exposed corners step\n                  below `prominent` rather than above it, because a surface that meets an\n                  edge is read as an extension of the page: a corner sized for a\n                  free-floating object makes it read as an oversized floating card. It is a\n                  role of its own rather than a smaller `prominent`, because `prominent`\n                  also holds compact floating controls, and those must keep their softness.\n   - expressive:  an expressive surface that owns the viewport — a dialog, tightened so it\n                  reads as a focused surface rather than a pillowy one.\n   - pill:        fully rounded controls whose width follows their content.\n   - circle:      fully rounded square targets. */\nexport const shape = {\n  control: \"rounded-[1rem]\",\n  mark: \"rounded-[0.375rem]\",\n  row: \"rounded-[0.75rem]\",\n  prominent: \"rounded-[1.25rem]\",\n  surface: \"rounded-[1.5rem]\",\n  sheet: \"rounded-[1rem]\",\n  expressive: \"rounded-[1.75rem]\",\n  pill: \"rounded-full\",\n  circle: \"rounded-full\",\n} as const;\n\n/* Structural edges — the hairline where two parts of one surface meet, and the\n   only structural lines in the library. A matte control has no rim: a 1px inset\n   ring that traces a filled object is still a drawn border, so filled controls\n   are separated by tone, not by a line. Light does the rest: a raised control\n   carries a lower shadow, and the elevation steps add the upper highlight.\n   One tone serves every line, so table rows, dividers, the `Divider` component and\n   code sections agree with each other. A Markdown blockquote is not one of these: it\n   takes a primary accent, because a quote is content-level emphasis rather than a\n   structural join between two parts.\n\n   The three roles are a tone each, and two of them carry the direction the row draws. The tone\n   is authored once and separately, because a `Divider` draws its own direction: a row's line and\n   a standalone rule have to agree on the tone without sharing a border. */\nexport const edgeTone = {\n  row: \"border-sherick-edge/[0.06]\",\n  header: \"border-sherick-edge/[0.10]\",\n  rule: \"border-sherick-edge/[0.075]\",\n} as const;\n\n/* Rim — the boundary of a *hollow* control: a text field, or an empty checkbox or radio. Nothing\n   inside such a control says what it is — an empty field holds at most a placeholder, an empty mark\n   holds nothing — and it still has to be identifiable at 3:1, which no neutral fill step and no\n   depth the light model can draw achieves on its own. So a hollow control carries one rim in the\n   `rim` tone, tuned to clear 3:1 on every surface by a small margin and no more, and that rim is\n   the only border a control has. A filled control — a button, a chip, a selected mark — is identified by its fill and\n   never carries one.\n   The field rim is a real border: forced colors repaints a border in a system colour, where it\n   would remove an inset shadow, and the scoped baseline sizes boxes by their border edge, so the\n   rim never changes a field's footprint. Its states ride on the field ladder in `state.field`.\n   A drop target's rim is dashed, and the dashes are a mask over an overlay rather than the native\n   `dashed` style, whose dash length and corner joins the platform decides: the mask fixes the dash\n   rhythm and follows the `control` corner exactly. The mask is authored in `tokens.ts`. */\nconst dashedRimMask =\n  \"after:[mask-image:var(--sui-rim-dashed)] after:[mask-size:100%_100%] after:[mask-repeat:no-repeat]\";\n\nexport const rim = {\n  field: \"border-[1.5px] border-sherick-rim\",\n  fieldError: \"border-[1.5px] border-sherick-danger\",\n  dashed: /* @__PURE__ */ cx(\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']\",\n    \"after:bg-sherick-rim\",\n    dashedRimMask,\n    motionRim\n  ),\n  /* The dashes step up under the pointer and take the primary tone while a file is held over them. */\n  dashedHover: \"hover:after:bg-sherick-ink-muted\",\n  dashedDragging: \"data-[dragging]:after:bg-sherick-primary\",\n} as const;\n\nexport const edge = {\n  /* Rows of a stacked list or table. */\n  row: /* @__PURE__ */ cx(\"border-b\", edgeTone.row, \"last:border-b-0\"),\n  /* The heavier rule beneath a column header. */\n  header: /* @__PURE__ */ cx(\"border-b\", edgeTone.header),\n  /* A section break inside one surface, or a standalone rule. Pair it with the\n     directional border class at the call site (`border-t`, `border-l`). */\n  rule: edgeTone.rule,\n} as const;\n\nconst effectiveDisabled =\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 disabled:cursor-not-allowed disabled:opacity-45\";\n\n/* Interaction states:\n     rest       the material, at whatever elevation its anatomy calls for\n     hover      one tonality step, never a change in depth or a new border\n     pressed    a raised control returning to the recessed depth of its own track, plus\n                a slight compression; a flat control stays flat and a floating one keeps\n                its elevation\n     selected   a held choice: selected tone plus control elevation on a segment,\n                option/tree row or date surface; never on mere navigation highlight\n     disabled   45% opacity, no pointer affordance, no interactive state at all\n     focus      the shared outer focus ring, visible on keyboard focus */\nexport const state = {\n  /* A raised matte control presses back into the track beneath it — the same physical\n     depth a groove or a well sits at. How far the press itself travels is motion amplitude, and\n     it belongs with the tactile intent in `ui.motion.ts`. */\n  recess: \"active:shadow-sherick-recessed\",\n  /* The disabled step for a control whose disabled state is a Sherick prop. */\n  disabled: \"cursor-not-allowed opacity-45\",\n  /* The same step, keyed on the primitive's own markers rather than on a Sherick prop: Base marks\n     an effectively disabled control — including one disabled by the field around it — with\n     `data-disabled`, and a part that disables itself at a bound carries `disabled` as well. */\n  effectiveDisabled,\n  /* A row whose control is disabled by any means — its own option, its group, or the field around\n     it — dims from the control's own marker rather than from a Sherick prop. */\n  disabledRow: \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45\",\n  /* A control nested inside a disabled composite. The composite already applied the opacity step,\n     and a second one would dim the field unevenly; this carries only the disabled cursor. */\n  disabledDescendant: \"cursor-not-allowed\",\n  /* A part dims independently at a bound, but never a second time inside a disabled field. */\n  disabledPart: /* @__PURE__ */ cx(effectiveDisabled, \"group-data-[disabled]/field:opacity-100\"),\n  /* A part the pointer is engaging — the handle of a value control. It sits matte and settled at\n     rest and takes its accent, a little larger, while the pointer is on it. Drag covers the case\n     where the pointer has been captured and left the control. */\n  engaged:\n    \"group-[:not([data-disabled])]:hover:scale-110 group-[:not([data-disabled])]:hover:bg-sherick-primary-strong group-[:not([data-disabled])]:hover:text-sherick-on-primary data-[dragging]:scale-110 data-[dragging]:bg-sherick-primary-strong data-[dragging]:text-sherick-on-primary\",\n  /* A control with a hit area of its own. */\n  enabled: \"cursor-pointer\",\n  /* A text field: the normal text cursor, never a pointer. */\n  text: \"cursor-text\",\n  /* Quiet scan feedback for non-interactive data rows: tonality only. */\n  rowHover: \"hover:bg-sherick-ink/[0.05]\",\n  /* The matte field family — one tonality ladder, four triggers, no rims. A field\n     steps its surface up once on hover and once more while it is engaged; a\n     composite field focuses its outer surface while the input inside stays\n     borderless; an expanded control holds the engaged step while its popup is\n     open. Tonality carries the state, so no border appears and disappears. */\n  /* A field is a well: its fill sits below the surface around it, and engaging it sinks it further\n     while its rim steps up. An invalid field is the same well with a danger rim: the rim, the\n     danger placeholder and the field's message carry the error, so the fill never trades its\n     depth for a tinted wash. The error steps keep the well's depth ladder and leave the rim alone. */\n  field: {\n    hover: \"hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted\",\n    focus: \"focus:bg-sherick-canvas focus:border-sherick-ink-muted\",\n    /* A composite's engaged tone outranks hover, independent of variant emission order. */\n    focusWithin: \"[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted\",\n    engaged: \"bg-sherick-canvas border-sherick-ink-muted\",\n    errorHover: \"hover:bg-sherick-canvas/[0.85]\",\n    errorFocus: \"focus:bg-sherick-canvas\",\n    errorEngaged: \"bg-sherick-canvas\",\n    /* The error ladder again, keyed on Base UI's validity attribute for a part that learns its\n       validity from the field it sits in. Two variants outrank the single-variant ladder above,\n       so neither ladder has to be conditional. */\n    invalid: \"data-[invalid]:border-sherick-danger\",\n    invalidHover: \"data-[invalid]:hover:border-sherick-danger\",\n    invalidEngaged: \"data-[invalid]:border-sherick-danger\",\n    invalidFocusWithin: \"[&&]:data-[invalid]:focus-within:border-sherick-danger\",\n  },\n\n} as const;\n\n/* State layers.\n   A layer is `relative` itself, because its overlay is absolutely positioned inside the control.\n   A component that positions the control — an absolutely placed close or submit control — writes\n   that position *after* the layer in its class list: `tailwind-merge` keeps the last class in a\n   conflicting group, so a position written before the layer is silently replaced by the layer's\n   own.\n   Replacing `background-color` on hover erases whatever fill a control owns: an\n   opaque fill collapses to a bare tint and a tinted fill loses most of its step.\n   This overlay instead composites over the fill, tinted with `currentColor` — the\n   container's own on-color, which is also the color furthest from that fill, and\n   the same color as the label, so the glyphs themselves are unaffected. Opacity\n   carries the state, so it fades on the shared motion curve instead of snapping,\n   and it takes the press timing while the control is held.\n   One step per fill strength: a quiet surface tints lightly, an opaque accent fill\n   takes the heaviest step.\n   Both interactive steps are gated on the primitive's own disabled markers, so an effectively\n   disabled control neither tints nor presses — whether it was disabled by a prop, by its group or\n   by the field around it. `:disabled` alone cannot gate a press: a row in a collection is a\n   `div`, so `:active` matches it while the pointer is down on it and the marker is the only gate\n   there is. */\nconst stateLayerBase = /* @__PURE__ */ cx(\n  \"before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:opacity-0\",\n  motionStateLayer\n);\n\n/* A part answers the pointer only while it is interactive. A native control carries `disabled`, and\n   a collection primitive marks its rows with `data-disabled` instead. One rule covers both, in the\n   same shape for hover and for press, and the group form is that rule for a part whose pointer\n   arrives from the wrapping control.\n\n   Each step is written out as a whole class name rather than assembled from a variant fragment and\n   a suffix, because the stylesheet compiler reads class names as literal text: a name that only\n   exists once the recipe is evaluated compiles to no rule at all, and the step silently disappears.\n   Interpolating one of these consts is safe — the name is still written here in full. */\nconst hoverQuiet = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.05]\";\nconst hoverTonal = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.09]\";\nconst hoverFilled = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]\";\nconst hoverTrack = \"group-[:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]\";\nconst pressQuiet = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.09]\";\nconst pressTonal = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.15]\";\n/* A neutral fill's label is ink, so a 15% ink veil turns the whole control a flat grey while it is\n   held — and the recess and the compression already say \"pressed\". The neutral press is lighter;\n   coloured fills keep the stronger step their labels were measured through. */\nconst pressTonalNeutral = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.12]\";\nconst pressFilled = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]\";\nconst pressTrack = \"group-[:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]\";\n/* A selection mark answers hover with the light tonal step: it is a 20px glyph beside its own\n   label, and the track's step would turn an empty well into a grey disc. Its press is depth, not\n   a heavier veil — `selectable.markSurface` sinks the well — so the layer only holds its hover\n   step while the pointer is down. A read-only mark accepts no change and advertises none.\n   The pseudo-class sits *inside* the group selector: written after it, as `…]:hover:`, it would\n   match the mark's own 20px box rather than the control and the row around it. */\nconst hoverMark =\n  \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:before:opacity-[0.09]\";\n\n/* A labelled control surface paints its state on a row that owns the pointer area while the\n   actual disabled marker belongs to a descendant control. Gate the same quiet response on that\n   descendant so a disabled or read-only choice does not advertise a press it cannot accept. */\nexport const stateLayerQuietComposite = /* @__PURE__ */ cx(\n  \"relative\",\n  stateLayerBase,\n  \"before:rounded-[inherit] before:bg-current\",\n  \"[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:hover:before:opacity-[0.05]\",\n  \"[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:active:before:opacity-[0.09]\"\n);\n\nexport const stateLayer = {\n  /* Quiet surfaces — ghost controls, navigation rows, menu options. */\n  quiet: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverQuiet, pressQuiet),\n  /* Tinted containers: the fill is nearly page color already, so the container's own\n     on-color (`current`) carries the state at a light step. Shared by every matte\n     control with a fill — tonal buttons, icon buttons, acrylic buttons. */\n  tonal: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTonal, pressTonal),\n  /* The same layer for a neutral (`secondary`) tonal fill, with the lighter press. */\n  tonalNeutral: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTonal, pressTonalNeutral),\n  /* Opaque fills: `current` is the fill's own on-color — the color furthest from it in\n     either theme — so one step reads on a saturated blue and a neutral gray alike. */\n  filled: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverFilled, pressFilled),\n  /* A switch track or a selection well: the same layer, but hover and press arrive from the\n     wrapping control rather than from the surface itself. */\n  track: /* @__PURE__ */ cx(stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTrack, pressTrack),\n  /* A checkbox box or a radio socket: the hover arrives from the wrapping control, at the light\n     tonal step, and the press is carried by the well's own depth rather than by this layer. */\n  mark: /* @__PURE__ */ cx(stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverMark),\n  /* A row highlighted by keyboard or pointer navigation. Base UI collection primitives expose\n     `data-highlighted`; this is the one canonical visual treatment for it, and it pairs with a\n     row's own `quiet` layer — the row carries both, so a highlighted row and a hovered row are the\n     same tone at the same strength. That strength is written twice because a class name has to be\n     literal to be compiled; that the two rendered layers agree is asserted in the browser suite\n     rather than left to these lines to stay in step.\n     It is deliberately not gated on the disabled markers: a disabled command stays reachable by\n     keyboard so it can be discovered and announced as unavailable, and a reader still has to see\n     which row the navigation is on when it lands there. */\n  activeRow: \"data-[highlighted]:before:opacity-[0.05]\",\n} as const;\n\n/* Hit area — the interactive region of a control whose visible mark is smaller than a comfortable\n   target, drawn outside the layout box so a column, a row gap and the space beside a label are all\n   measured from the control the user sees. The expansion is capped at the accessible target floor;\n   CSS cannot see neighbouring geometry, so it keeps clearance only while surrounding rows are at\n   least as tall as that floor — which this library's own `density.normal` rhythm is, and a 40px\n   table row is not. */\nexport const hitArea =\n  \"relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']\";\n\n/* Material — fill only. No material carries elevation or a rim: the same matte\n   fill appears flat in a card, lifted on a button and recessed in a groove.\n   - canvas:      the page itself.\n   - matteQuiet:  the quietest matte step, for dense data regions and wells that\n                  should sit back from the surface around them.\n   - matte:       a matte surface that separates from the canvas by tone alone.\n   - matteHigh:   the second matte step, for nesting inside another matte surface.\n   - matteInset:  a passive sheet tucked under a stronger control; subdued without\n                  blending into the canvas or needing a drawn rim.\n   - control:     the fill every text control shares, plus its placeholder tone. It is a well:\n                  the canvas tone, which sits below a card in both themes, so a field reads as\n                  sunk into the surface rather than as a pad raised from it. Its rim, not its\n                  fill, is what separates it (see `rim`).\n   - handle:      the fill of a small part the user has to find — a value control's handle.\n                  Surface steps sit within a few percent of their neighbours, so this role\n                  takes the mid-emphasis tone, which inverts with the theme and separates in\n                  both.\n   - acrylic:     a translucent sheet lit from above, for surfaces that float above\n                  the application. The gradient, fill, blur and saturation are part of\n                  the material. A gradient arrives as a typed image arbitrary value\n                  rather than through the colour scale, because `tailwind-merge`\n                  collapses two background utilities into one and would silently drop\n                  either the fill or the gradient. Each one is written out literally, so\n                  the class scanner never meets a half-built name. The fill stays an\n                  ordinary background colour, so a caller can retone a sheet without\n                  touching its lighting. An anchored sheet carries most of its own tone,\n                  because it has to stay legible over whatever it happens to sit on: a\n                  saturated button behind a popup must not read as the popup's own\n                  state. `acrylicDense` is the same sheet at higher opacity still, for\n                  the smallest floating surfaces — a tooltip, a floating control.\n   - acrylicHero: the large-overlay sheet, for a surface that owns the viewport. It is\n                  markedly more opaque and calmer than the smaller sheets: it has to\n                  read first as a physical surface and only secondarily as glass, so the\n                  scrim behind it does the separating, the blur only defocuses, and the\n                  gradient is a restrained top-to-bottom light rather than a frosted\n                  haze. Its tone is a subtle step above the canvas in every theme —\n                  in dark mode a small step above the canvas rather than a light grey\n                  sheet — which is how it separates without leaning on its shadow, and\n                  `--sui-overlay-fill` tunes how much of the sheet is its own tone rather\n                  than the defocused page — a large overlay leans on that, not on blur. */\nexport const material = {\n  canvas: \"bg-sherick-canvas text-sherick-ink\",\n  matteQuiet: \"bg-sherick-surface/[0.42] text-sherick-ink\",\n  matte: \"bg-sherick-surface/[0.78] text-sherick-ink\",\n  matteHigh: \"bg-sherick-surface-high/[0.72] text-sherick-ink\",\n  control: \"bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted\",\n  /* The invalid fill carries its placeholder at the *full* danger tone, not at a fraction of it. A\n     placeholder is text, so it answers to the same 4.5:1 the copy beside it does, and a partial\n     opacity of an accent is a different colour from the accent: the 72%-opacity placeholder\n     measured 2.8–3.0:1 light and 3.4–3.9:1 dark on this fill, while the token it was mixed from\n     measures 4.1–4.7:1 light and 5.2–6.2:1 dark on it. There is no dimmer step of a semantic tone\n     that is still readable, and a normal field's placeholder is `ink-muted` at full strength\n     already — so the error form is the same rule, in the tone the field is in. */\n  controlError: \"bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger\",\n  handle: \"bg-sherick-ink-muted text-sherick-canvas\",\n  acrylic:\n    \"bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]\",\n  acrylicDense:\n    \"bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]\",\n  acrylicHero:\n    \"bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]\",\n} as const;\n/* Dark neutral behind native video, including poster loading and letterboxing. */\nexport const mediaCanvas = \"bg-sherick-media\";\n/* A passive sheet tucked below a stronger control; independently tree-shakeable. */\nexport const matteInset = \"bg-sherick-surface-high/[0.35] text-sherick-ink\";\n\n/* Type roles — the recurring kinds of text the library sets, each with one size, line height and,\n   where the role owns it, one weight. A component still owns copy that only it renders; these are\n   the roles that recur across families and have to agree wherever they appear:\n   - control:    the type step of a control, owned through `density` below.\n   - supporting: a field's description, hint and error, and the secondary line under a row's label.\n   - caption:    compact labels — a badge, a tooltip, a group label, a calendar weekday.\n   - title:      the heading of a compact surface — a popover, a toast, a command palette.\n   - heading:    the title of a surface that owns the viewport — a dialog, an alert dialog, a drawer.\n   - numeric:    figures that are compared down a column or updated in place.\n   Every size lands on a whole-pixel line box, so stacked rows keep one rhythm. */\nexport const type = {\n  control: {\n    compact: \"text-sm\",\n    normal: \"text-[0.9375rem] leading-[1.375rem]\",\n    prominent: \"text-lg\",\n  },\n  supporting: \"text-[0.8125rem] leading-5\",\n  caption: \"text-xs leading-4\",\n  title: \"text-[0.9375rem] leading-[1.375rem] font-semibold\",\n  heading: \"text-xl leading-7 font-semibold tracking-[-0.02em]\",\n  numeric: \"tabular-nums\",\n} as const;\n\n/* Density — three control steps plus the accessible hit target.\n   Density owns height and the type step, so controls of one density share a\n   rhythm. A component's anatomy owns its padding: a button's inline padding is\n   set by how it is gripped, a field's by how much text it holds, and neither is\n   derived from the other. The default step is comfortable rather than dense: a\n   48px control is Sherick's resting proportion, and `compact` is the step for\n   dense product regions. Body copy, headings and labels are content, not\n   controls, and take a type role above. */\nexport const density = {\n  compact: /* @__PURE__ */ cx(\"min-h-10\", type.control.compact),\n  normal: /* @__PURE__ */ cx(\"min-h-12\", type.control.normal),\n  prominent: /* @__PURE__ */ cx(\"min-h-14\", type.control.prominent),\n  /* Minimum interactive target for an icon-only control that stands on its own. */\n  target: \"min-h-11 min-w-11\",\n  /* A control that is one part of a composite field — the trailing controls a Combobox owns. It\n     keeps the floor's height, because it has to sit in the field's row, and takes only the width\n     its glyph needs: the two of them are gripped as one cluster at the field's edge, and two full\n     squares there read as two controls beside a field rather than as parts of it.\n     The narrower step still clears the 24px pointer-target minimum WCAG AA asks for. It is below\n     this system's own 44px floor on purpose: that floor belongs to a control that is the whole\n     target of its own action, and this one is a part of a field the pointer is already in. */\n  part: \"min-h-11 min-w-9\",\n} as const;\n\n/* Icon slot — the fixed box a leading or trailing mark occupies, sized by the type step it sits\n   beside so the icon-to-label ratio is the same at every size: a 14px label takes a 16px mark, a\n   15px label a 20px mark, an 18px label a 24px mark, and a 12px caption a 14px mark. The box, not\n   the artwork's own whitespace, is what aligns with the label, and a spinner that replaces the icon\n   lands in the same box. */\nexport const iconSlot = {\n  caption: \"inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5\",\n  compact: \"inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\",\n  normal: \"inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5\",\n  prominent: \"inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6\",\n} as const;\n\n/* Stacking level — where anything that floats sits relative to the application.\n\n   One interaction level, deliberately. Base UI nests a popup's portal *inside* the portal of the surface it\n   was opened from, and appends it last, so document order already says which floating surface is\n   on top: the innermost — the one opened last — wins. A scale that ranked surfaces by kind would\n   fight that, and it cannot be right: a popup opened from inside a dialog is the innermost\n   surface there is, yet a ranking puts the dialog above it and the popup renders behind the modal\n   that owns it. Sharing one level lets the nesting Base already built decide, at any depth.\n\n   The level's job is to clear the application's own content, not to rank Sherick surfaces against\n   each other. */\nexport const stacking = {\n  float: \"z-50\",\n  /* A persistent app notification portal predates the modal it reports on. */\n  notification: \"z-[60]\",\n} as const;\n\n/* Floating overlay shells.\n   Base UI owns popup presence, focus, dismissal, portals and anchored positioning.\n   Sherick UI owns only the visual shell: material, elevation and shape. Where the entrance\n   grows from and how it moves on the way are the presence recipes' in `ui.motion.ts`, so a\n   surface's shell never depends on the primitive's open state. `scrim` is the plane\n   *behind* a surface that owns the viewport, so it is a fill and a blur with no elevation\n   or shape of its own. It is shared rather than written per component so a dialog and an\n   alert dialog separate from the page identically. */\nexport const overlay = {\n  /* The plane behind a surface that owns the viewport. */\n  scrim: /* @__PURE__ */ cx(\"fixed inset-0\", stacking.float, \"bg-sherick-scrim/[0.38] backdrop-blur-[var(--sui-scrim-blur)]\"),\n  /* An anchored surface with room to breathe: a selection list (Select, Combobox) or\n     structured content (Popover). It grows out of its trigger and carries the softer\n     surface corner, because what it holds is read rather than scanned.\n     When not to use it: a short list of commands wants `menu`, and a hint wants\n     `tooltip`. */\n  popup: /* @__PURE__ */ cx(shape.surface, material.acrylic, elevation.floating),\n  /* A compact list of commands. The same sheet, the same presence and the same lighting as\n     `popup`, tightened in shape so a handful of short actions reads as a list rather than a\n     page: a command list should feel like one more control on the surface it came from.\n     When not to use it: a list of options that are chosen rather than performed, or a\n     surface holding structured content, wants `popup`. */\n  menu: /* @__PURE__ */ cx(shape.control, material.acrylic, elevation.floating),\n  /* A short hint is a compact sheet, not a capsule button. */\n  tooltip: /* @__PURE__ */ cx(shape.row, material.acrylicDense, elevation.floating),\n  /* A toast is a floating status surface that arrives on its own and leaves on its own. It\n     holds a line or two of copy rather than being read as a page, so it takes the compact\n     floating corner rather than the wide sheet a popup is.\n     When not to use it: a hint attached to a control wants `tooltip`, and anything the user\n     opened themselves wants `popup`. */\n  toast: /* @__PURE__ */ cx(shape.prominent, material.acrylic, elevation.floating),\n  /* A dialog rises further than a menu. It is anchored to the viewport rather than to a trigger,\n     so it has no side to grow from and takes the modal presence instead of the anchored one.\n     Its corner is the most generous in the library, because a surface that floats free of every\n     edge has nothing to line up with. */\n  dialog: /* @__PURE__ */ cx(shape.expressive, material.acrylicHero, elevation.floating),\n  /* A sheet is the same viewport-owning surface as a dialog, attached to one edge of the\n     viewport. Its exposed corners take `shape.sheet` — one step below a compact floating\n     surface rather than above it — because a surface that meets an edge is read as an extension\n     of the page, and its attached edge is squared by the component's own anatomy. Which corners\n     those are is decided by the edge; the radius the other two keep is still `shape`'s.\n     When not to use it: a surface with no edge to attach to wants `dialog`. */\n  sheet: /* @__PURE__ */ cx(shape.sheet, material.acrylicHero, elevation.floating),\n} as const;\n\n/* Text hierarchy — two roles, because only two can carry readable text. High emphasis carries\n   labels and values, medium emphasis carries supporting copy, descriptions and placeholders. Both\n   clear 4.5:1 on every surface the library composites over, in both themes.\n   \n   There is deliberately no third text step. A third step would have to sit between `medium` and\n   the dimmest tone a surface allows, and at these surfaces the value that clears 4.5:1 collapses\n   into `ink-muted` — a step that measures the same as the one above it is not a hierarchy, it is a\n   role pretending to be one. The dimmest tone is a *non-text* role instead (see `detail` below). */\nexport const text = {\n  high: \"text-sherick-ink\",\n  medium: \"text-sherick-ink-muted\",\n} as const;\n\n/* Detail — the non-text furniture tone: a gutter, a rail, a mark's frame, secondary graphical\n   detail that carries meaning without being read. It answers to the 3:1 non-text requirement on\n   every surface it is permitted on, and it is never a foreground for text: a hint, a placeholder,\n   a line number or any other readable step uses `text.medium`. */\nexport const detail = {\n  /** A mark's own frame, or a rail drawn as a line. */\n  mark: \"border-sherick-detail\",\n  /** The same tone as a block, for a gutter or a rail with thickness. */\n  fill: \"bg-sherick-detail\",\n} as const;\n\n/* A list surface — the sheet a collection of rows sits in, and the two row densities it can\n   hold. Select, Combobox and Menu all compose these, so an option and a command are the same\n   object at two densities instead of three independent designs.\n\n   The sheet never exceeds what the viewport leaves it, and scrolls inside itself rather than\n   growing. Its width is the list's own decision: a control's list is never narrower than the\n   control it came from and grows to fit its own content until the viewport clamp, and a command\n   list only ever grows to its content. Unselected rows and commands stay flat; held options\n   compose `tone.selected` with `elevation.control`. One row step of `stateLayer.quiet` plus\n   `stateLayer.activeRow` carries both its hover and\n   its keyboard highlight, so an option and a command are highlighted by the same tone at the\n   same strength. Keyboard focus adds the shared inset ring independently of that highlight.\n   Selection is a tint of the sheet through `tone.selected` and never the opaque\n   accent, which belongs to the one primary action in the view rather than to a row that happens\n   to be chosen.\n   A row that cannot be used takes no hover and no press, and its tone step says so on its own —\n   but it keeps the navigation highlight. A disabled option or command stays reachable by\n   keyboard so it can be discovered and announced as unavailable, and a reader still has to see\n   which row the navigation is on when it arrives there. Disabled means \"cannot be chosen or\n   performed\", never \"cannot be found\". */\nexport const list = {\n  sheet: \"max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto\",\n  /* A row in a selection list: one line, read one at a time and chosen.\n     The row carries two separate things that both have to be visible. Its *navigation highlight*\n     is the state layer — one tone shared with the pointer, because a row under the pointer and a\n     row under the arrow keys are the same thing happening. Its *focus treatment* is the shared\n     inset ring, and it is gated on `:focus-visible`, which is what separates the two cases: Base\n     gives the active row real DOM focus, and the platform reports that focus as visible when the\n     keyboard put it there and not when a pointer did. So a pointer that opens a list and moves\n     over a row gets the highlight and no ring, a keyboard that opens one and steps down it gets\n     both, a selected row keeps its selection tint under the ring, and a disabled-but-navigable\n     row still shows where the navigation is while saying it cannot be used. The ring is inset\n     because the row lives inside the sheet it belongs to, as a segment does in its track. */\n  option: /* @__PURE__ */ cx(\n    \"flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none\",\n    type.control.normal,\n    shape.control,\n    motionFeedback,\n    focusRingInset,\n    text.high,\n    stateLayer.quiet,\n    stateLayer.activeRow,\n    motionRowLayer,\n    state.effectiveDisabled\n  ),\n  /* The same object at the density a list of short actions wants, where the row is scanned\n     rather than read and the list is a control rather than a page. `shape.row` keeps the\n     command's corner proportional to its own height, so its highlight nests in the tighter\n     sheet the menu is. */\n  command: /* @__PURE__ */ cx(\n    \"flex w-full items-center gap-3 px-3 py-2 text-start outline-none\",\n    type.control.compact,\n    shape.row,\n    motionFeedback,\n    focusRingInset,\n    text.high,\n    stateLayer.quiet,\n    stateLayer.activeRow,\n    motionRowLayer,\n    state.effectiveDisabled\n  ),\n} as const;\n\n/* A disclosure — one row that opens the region beneath it. An item in an `Accordion` and a\n   standalone `Collapsible` are the same object: a stacked row, and the in-flow panel its\n   primitive measures. They share this recipe so the two cannot drift into two designs, and the\n   height itself is the primitive's — it arrives as `--sui-disclose-height`, which each\n   component maps its own primitive's panel variable onto, because the measured geometry is\n   anatomy and only the interpolation is temporal. */\nexport const disclosure = {\n  /* The row: a full-width row in a stacked group, activated like a selectable row. Its own focus\n     indicator is the shared inset ring, because an offset one drawn outside the row would land on\n     the divider or the panel beside it rather than around the row it belongs to — which is the same\n     reason a segment inside a track takes the inset form. The chevron the component puts in the\n     row is the disclosure's own affordance and turns in place under `motionOrient`. */\n  trigger: /* @__PURE__ */ cx(\n    \"group [overflow-wrap:anywhere]\",\n    list.option,\n    state.enabled\n  ),\n  panel: /* @__PURE__ */ cx(\"h-[var(--sui-disclose-height)] overflow-hidden text-sm leading-7 [overflow-wrap:anywhere]\", text.medium, motionDisclose),\n} as const;\n\n/* Tone hierarchy — the color roles a surface can take, in rising strength:\n     text      foreground only, for quiet rows and links.\n     soft      a de-emphasised tinted surface: alerts, badges, quiet cards.\n     tonal     a matte control fill at rest: tonal buttons, icon buttons.\n     selected  the fill a selected control holds: options, segments, calendar days, tree rows.\n     strong    the opaque accent fill that marks priority.\n   The semantic soft and selected steps are the role's own authored surfaces (`--sui-<role>-soft`,\n   `--sui-<role>-selected`), not a fraction of its foreground: the foreground is tuned for text\n   contrast, and a fraction of it is a greyed version of the hue. They are opaque, so one tone reads\n   the same on the canvas, inside a card and on an acrylic sheet. The neutral soft step is a step\n   *within* whatever holds it rather than the card fill itself, so a neutral badge or tag stays\n   visible inside a card. */\nexport const tone = {\n  text: {\n    primary: \"text-sherick-primary\",\n    secondary: \"text-sherick-ink\",\n    danger: \"text-sherick-danger\",\n    warning: \"text-sherick-warning\",\n    success: \"text-sherick-success\",\n  },\n  soft: {\n    primary: \"bg-sherick-primary-soft text-sherick-primary\",\n    secondary: \"bg-sherick-surface-high/[0.72] text-sherick-ink\",\n    danger: \"bg-sherick-danger-soft text-sherick-danger\",\n    warning: \"bg-sherick-warning-soft text-sherick-warning\",\n    success: \"bg-sherick-success-soft text-sherick-success\",\n  },\n  tonal: {\n    primary: \"bg-sherick-primary-soft\",\n    secondary: \"bg-sherick-surface-high/[0.56]\",\n    danger: \"bg-sherick-danger-soft\",\n    warning: \"bg-sherick-warning-soft\",\n    success: \"bg-sherick-success-soft\",\n  },\n  selected: {\n    primary: \"bg-sherick-primary-selected text-sherick-ink\",\n    secondary: \"bg-sherick-surface-high/[0.82] text-sherick-ink\",\n    danger: \"bg-sherick-danger-selected text-sherick-ink\",\n    warning: \"bg-sherick-warning-selected text-sherick-ink\",\n    success: \"bg-sherick-success-selected text-sherick-ink\",\n  },\n  strong: {\n    primary: \"bg-sherick-primary-strong text-sherick-on-primary\",\n    secondary: \"bg-sherick-surface-high text-sherick-ink\",\n    danger: \"bg-sherick-danger text-sherick-on-danger\",\n    warning: \"bg-sherick-warning text-sherick-on-warning\",\n    success: \"bg-sherick-success text-sherick-on-success\",\n  },\n  /* The strong fills again, keyed on the primitive's own selection marker rather than on a\n     Sherick prop. A control that holds its selection in the primitive — an uncontrolled\n     `Switch` — has to take its fill from the same source of truth as a controlled one, and a\n     keyed fill has to be written out literally to be compiled, so it is a role here rather\n     than a conditional at the call site. */\n  strongChecked: {\n    primary: \"group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary\",\n    secondary: \"group-data-[checked]:bg-sherick-surface-high group-data-[checked]:text-sherick-ink\",\n    danger: \"group-data-[checked]:bg-sherick-danger group-data-[checked]:text-sherick-on-danger\",\n    warning: \"group-data-[checked]:bg-sherick-warning group-data-[checked]:text-sherick-on-warning\",\n    success: \"group-data-[checked]:bg-sherick-success group-data-[checked]:text-sherick-on-success\",\n  },\n} satisfies Record<string, Record<Variant, string>>;\n\n/* Current location — where the reader is, as opposed to a value they chose. A navigation row, the\n   current page of a pagination and any other `aria-current` destination hold the role's soft\n   container, full ink and a touch of weight, and stay flat: depth and the stronger selected step\n   belong to held values (`tone.selected` with `elevation.control`). */\nexport const currentDestination = \"bg-sherick-primary-soft text-sherick-ink font-medium\";\n\n/* Selectable surface — the recessed surface of a control that fills once it is selected: a\n   switch track, a checkbox box, a radio circle, a slider groove. Selection is keyed on the\n   primitive's own `data-checked` / `data-indeterminate`, so an uncontrolled control is styled\n   from the same source of truth as a controlled one. A mixed box is selected but is not\n   ticked, which is why the second attribute stands beside the first. */\n/* A radio's opt-in full row follows the Base control it labels. `:has` keeps uncontrolled\n   selection authoritative at the primitive rather than mirroring it in component state.\n   Keep this independent so unrelated consumers of the mark recipes can tree-shake it. */\nexport const selectableRowSurface =\n  \"has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control\";\n\nexport const selectable = {\n  surface: /* @__PURE__ */ cx(\"relative\", elevation.recessed, motionFeedback),\n  /* A selection mark — a checkbox box, a radio socket — rests in the same groove a Switch track\n     does. While the wrapping control is held it sinks to the `well`: the floor darkens and the\n     boundary stays exactly where it was, which is how a mark that must not move under the pointer\n     answers a press. */\n  markSurface: /* @__PURE__ */ cx(\n    \"relative\",\n    elevation.recessed,\n    \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):active]:shadow-sherick-well\",\n    motionFeedback\n  ),\n  /* The resting fill a *groove* holds — a segmented control's track, a tab list — and nothing more.\n     A groove that holds labelled segments is identified by those segments, exactly as a tab list is\n     identified by its labels, so it takes no boundary of its own. */\n  rest: /* @__PURE__ */ cx(material.matteHigh, text.medium),\n  /* An *empty mark* — an unchecked box, an unselected radio — is a hollow control: nothing inside it\n     says what it is, and it still has to be identifiable at 3:1. Neither the neutral fill (about\n     1.3:1 against the surface around it) nor any depth the light model can draw gets it there\n     without turning the mark into a shaded orb. So an empty mark is the one control that carries\n     a **rim**: the `rim` tone, tuned to just clear 3:1 on every surface, drawn as the lip of the\n     recess it sits in rather than as an outline over a filled control. The rim belongs to the empty\n     state only — a selected mark is identified by its fill, and the rim dissolves into it.\n     The rim is an overlay rather than the mark's own border, so the fill, the hover layer and the\n     recess all reach the mark's real edge: a border would leave a 1.5px frame of untinted fill\n     around a hovered selected box. Hover steps the rim to the mid-emphasis tone — darker in light\n     mode, lighter in dark — which is a visible answer on a 20px mark where a tint alone is not. */\n  mark: /* @__PURE__ */ cx(\n    \"bg-sherick-canvas/[0.7]\",\n    text.medium,\n    \"after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:content-['']\",\n    \"after:border-sherick-rim\",\n    \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:after:border-sherick-ink-muted\",\n    motionRim\n  ),\n  /* A selected mark is the strong accent, edge to edge, and it settles flat: it is identified by\n     its fill and its glyph, and the rim fades out as the fill arrives. The rim fades by opacity\n     rather than by colour, so forced colors cannot repaint a transparent rim as a visible one. */\n  selected:\n    \"group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0\",\n  indeterminate:\n    \"group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0\",\n  /* A selected radio's dot: the socket's on-colour, flat. A Switch thumb is lifted because it is a\n     24px part the user moves; an 8px dot under the same shadow reads as a bead with a halo. */\n  thumb: \"bg-current\",\n} as const;\n\n/* The authored alphas the contrast contract measures. They are derived from the class names above\n   rather than restated, so a change to a state step, a tint strength or the field ladder moves the\n   measurement with it: `scripts/smoke-package.mjs` passes this model to\n   `scripts/contrast-contract.mjs`, and the same module proves every class here has a rule in the\n   published stylesheet. */\nconst recipeAlpha = (recipe: string, pattern: RegExp, label: string) => {\n  const match = recipe.match(pattern);\n  if (!match) throw new Error(`recipe alpha missing for ${label}`);\n  return Number(match[1]);\n};\nconst stateAlpha = (recipe: string, label: string) =>\n  recipeAlpha(recipe, /opacity-\\[(0?\\.\\d+)\\]/, label);\nconst fillAlpha = (recipe: string, label: string) => recipeAlpha(recipe, /\\/\\[(0?\\.\\d+)\\]/, label);\n/* A field well's canvas step: written without an alpha, the step is the opaque canvas. */\nconst wellAlpha = (recipe: string, label: string) => {\n  const match = recipe.match(/bg-sherick-canvas(?:\\/\\[(0?\\.\\d+)\\])?(?:\\s|$)/);\n  if (!match) throw new Error(`recipe alpha missing for ${label}`);\n  return match[1] === undefined ? 1 : Number(match[1]);\n};\n\nexport const recipeAlphas = {\n  state: {\n    quiet: { hover: stateAlpha(hoverQuiet, \"state.quiet.hover\"), press: stateAlpha(pressQuiet, \"state.quiet.press\") },\n    tonal: { hover: stateAlpha(hoverTonal, \"state.tonal.hover\"), press: stateAlpha(pressTonal, \"state.tonal.press\") },\n    tonalNeutral: { hover: stateAlpha(hoverTonal, \"state.tonalNeutral.hover\"), press: stateAlpha(pressTonalNeutral, \"state.tonalNeutral.press\") },\n    filled: { hover: stateAlpha(hoverFilled, \"state.filled.hover\"), press: stateAlpha(pressFilled, \"state.filled.press\") },\n    mark: { hover: stateAlpha(hoverMark, \"state.mark.hover\") },\n  },\n  tint: {\n    neutralSoft: fillAlpha(tone.soft.secondary, \"tint.neutralSoft\"),\n    neutralRest: fillAlpha(tone.tonal.secondary, \"tint.neutralRest\"),\n  },\n  field: {\n    quiet: fillAlpha(material.matteQuiet, \"field.quiet\"),\n    card: fillAlpha(material.matte, \"field.card\"),\n    groove: fillAlpha(material.matteHigh, \"field.groove\"),\n    control: wellAlpha(material.control, \"field.control\"),\n    hover: wellAlpha(state.field.hover, \"field.hover\"),\n    engaged: wellAlpha(state.field.engaged, \"field.engaged\"),\n  },\n} as const;\n\n/* A labelled field is a shrinkable column. Its explanatory copy wraps, including identifiers;\n   the input itself keeps its native single-line scrolling behavior. */\nexport const fieldLayout = \"flex min-w-0 w-full flex-col [overflow-wrap:anywhere]\";\n\n/* The messages under a field: its description or hint, and its error. One role for every field in\n   the family, so a hint reads the same under a text field, a date range and a file chooser. */\nexport const fieldMessage = {\n  description: /* @__PURE__ */ cx(\"mt-2\", type.supporting, text.medium),\n  error: /* @__PURE__ */ cx(\"mt-2\", type.supporting, tone.text.danger),\n} as const;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui.common.js","sources":["../../../src/components/ui.common.ts"],"sourcesContent":["import { cx } from \"@/libs/utils\";\nimport type { Variant } from \"./ui.types\";\nimport { motionDisclose, motionFeedback, motionRim, motionRowLayer, motionStateLayer } from \"./ui.motion\";\n\n/* Sherick UI design primitives\n   ==========================================================================\n   One module owns every visual rule in the library. A component composes these\n   primitives; it does not write a color, shadow, radius, duration or hairline of\n   its own. The system has these parts:\n\n     material   what a surface is made of          (canvas, matte, control, acrylic)\n     elevation  how far it sits off the page       (flat, raised, floating, control, recessed)\n     shape      its corner role                    (control, prominent, surface, expressive, pill, circle)\n     edge       the hairline between stacked parts (row, header, rule)\n     state      how it responds                    (rest, hover, pressed, selected, disabled, focus)\n     stateLayer the composited hover/press overlay (quiet, tonal, filled, track, activeRow)\n     disclosure one expandable region and its row (trigger, panel)\n     tone       its color role                     (text, soft, tonal, selected, strong)\n     text       the readable emphasis ladder       (high, medium)\n     density    how tightly it is packed           (compact, normal, prominent, target)\n     overlay    floating shells                    (menu, tooltip, popup, toast, sheet, dialog)\n    focusRing  the one focus language             (focusRing, focusRingInset, focusRingHeld, focusRingWithin, groupFocusRing)\n\n   Temporal behavior is deliberately not here: `ui.motion.ts` owns every transition,\n   duration, curve and reduced-motion rule, and a recipe below names one of its recipes\n   rather than writing a timing of its own.\n\n   The canonical statement of these rules — and of what is deliberately left to a\n   component's own anatomy, such as layout, spacing, padding, intrinsic size,\n   responsive arrangement and content typography — is `docs/DESIGN_LANGUAGE.md`.\n   Extend that document and this module together; never implement a visual rule in\n   a component.\n\n   material, elevation and edge are orthogonal, and that is the point:\n   a material is a fill, an elevation is a distance, and an edge is a structural\n   line. A component adds elevation only where its anatomy is genuinely lifted,\n   and a hairline only where two parts actually meet. Nothing is baked in.\n\n   The physical language, in order:\n     flat matte by default\n       -> tactile depth on manipulated controls\n       -> recessed depth for tracks, grooves and wells, and for a raised control\n          while it is held\n       -> acrylic only for surfaces that genuinely float above the page\n\n   Elevation composites from the light values in `theme.css` (light above the\n   surface plane). The structural edge tone is its own token, and the acrylic\n   recipes are tokenized separately and calibrated per theme, but both follow the\n   same model: light above, shade below. So a highlight, a shadow, a floating\n   sheet's gradient and a pressed inset stay physically related without sharing\n   one set of numbers. */\n\n/* Focus visibility — one language for every interactive element.\n   `focusRing` draws the ring outside the shape, for a control that stands alone, and it follows\n   **visible** focus: a button does not announce itself when a pointer presses it.\n   `focusRingInset` draws it inside, for a control nested within another surface\n   where an outer ring would collide with the parent's edge. Fields use the outer\n   ring only: no inner rim is added, so focus reads as one ring, never two.\n   `focusRingHeld` and `focusRingWithin` are the same ring for a control that **holds a value**,\n   where the platform moves focus somewhere a plain ring cannot follow: the first for a control\n   that is itself focusable and hands focus to the surface it opens, the second for one whose\n   focus lives in a borderless input inside it. `focusRingHeld` follows *any* focus, because a\n   select has no focus left to follow once its list has taken it; `focusRingWithin` follows\n   *visible* focus, so what a field does is what the platform does — a text field is\n   `:focus-visible` whenever it is focused, a range input only for the keyboard — and a select\n   trigger and an editable combobox field end up identical in every state: neither looks ringed at\n   rest, both look ringed the moment either is used, and both lose it together. `groupFocusRing`\n   draws it from the wrapping control instead of the track it contains. */\nexport const focusRing =\n  \"focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]\";\n\nexport const focusRingInset =\n  \"focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus\";\n\n/* A focus owner that also contains a subtree paints the inset ring on its direct row only. */\nexport const parentFocusRingInset =\n  \"[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus\";\n\n/* The ring of a value control that is itself the focusable element: it wears it whenever it\n   holds focus, however it was focused, and whenever the surface it opened is on screen. A select\n   hands the DOM focus to its list while that list is open, so the ring follows the control's\n   engagement rather than the focus — which is exactly what a native `select` shows, and the only\n   focus indication the field has left once the list has taken over. */\nexport const focusRingHeld =\n  \"focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]\";\n\n/* The same ring for a value control whose focus lives in a borderless input inside it. It follows\n   **visible** focus rather than any focus, which is what makes a field and a slider differ for\n   the platform's reasons instead of by local say-so: a text field is `:focus-visible` whenever it\n   is focused, so a combobox or search field wears the ring the moment it is used, while a range\n   input is `:focus-visible` only for the keyboard, so a slider's handle saves its ring for the\n   keyboard and lets its own engagement answer the pointer. */\nexport const focusRingWithin =\n  \"has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]\";\n\n/* A file drag marks the same target with the same outline as visible keyboard focus. */\nexport const focusRingDrag =\n  \"data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]\";\n\nexport const groupFocusRing =\n  \"group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]\";\n\n/* Motion is not owned here. Every physical event — feedback, tactile, arrive, orient,\n   relocate, direct, presence and activity — is a named recipe in `ui.motion.ts`, which\n   owns the timing and the reduced-motion behavior for it. A recipe in this module\n   interpolates one of those names; it never writes a duration, a curve, a transition or\n   an animation of its own. */\n\n/* Elevation — distance from the surface plane, and nothing else. Three depth roles\n   exist, and the last two are a single tactile pair:\n   - flat:     at rest on the page. Separation comes from tone alone.\n   - raised:   a manipulated control, lifted a hair above its own track so it feels\n               touchable; pressing it returns it to the track.\n   - floating: a surface that genuinely sits above the application.\n   - control:  the resting half of the tactile pair, for a part the user moves —\n               a switch thumb, a selected segment or a held option/date selection.\n   - recessed: the other half of that pair: a groove, a track or a well, which is\n               recessed by definition, and a raised control while it is held, which\n               lands at the same depth.\n   A passive surface is flat unless its anatomy is sunk by design: a well, a groove and\n   a code well are `recessed` while they sit there, and `flat` is the default for\n   everything else passive. A flat control never gains depth by being pressed. */\nexport const elevation = {\n  flat: \"shadow-sherick-flat\",\n  raised: \"shadow-sherick-raised\",\n  floating: \"shadow-sherick-floating\",\n  control: \"shadow-sherick-control\",\n  recessed: \"shadow-sherick-recessed\",\n  /* One rung further down: the depth a small selection mark sinks to while it is held. A mark\n     rests in the ordinary groove; this is its press, never its identity. See\n     `selectable.markSurface`. */\n  well: \"shadow-sherick-well\",\n} as const;\n/* An inset sheet's shaded upper wall, without a lower rim. Kept independent so\n   unrelated components do not bundle this recipe. */\nexport const recessedTop = \"shadow-sherick-recessed-top\";\n\n/* Shape — semantic corner roles, never an arbitrary radius. Softness grows with\n   the size of the object and the emphasis it carries, and silhouette says what an object does:\n   a **capsule acts** (buttons, chips, badges, toggles are `pill`) and a **rounded rectangle\n   holds** (fields, alerts, tables, sheets). Container roles therefore stay clearly short of a\n   capsule at their own height — `control` is a third of a 48px field — so a field never reads as\n   an almost-button beside a real one. Nested roles stay concentric: an inner corner is the outer\n   corner minus the inset between them (a 20px track around a 16px indicator at 4px, a 24px list\n   sheet around 16px options at 8px).\n   - control:     ordinary controls and dense data regions — fields, rows, options,\n                  chips, tables.\n   - mark:        a compact square selection mark — a 20px checkbox box. `control` is a role\n                  for objects the size of a field; its radius exceeds the half-extent of a\n                  20px square, so a mark needs a step of its own — a corner under a third of\n                  its side, so the box stays a rounded square and never reads as a radio.\n   - row:         a row at command density — a row in a list that is scanned rather than\n                  read holds a corner proportional to its own height, because `control`\n                  would reach a 36px row's half-extent and read as a capsule.\n   - prominent:   prominent controls and compact floating surfaces.\n   - surface:     large surfaces — cards, menus, panels.\n   - sheet:       a surface attached to one edge of the viewport. Its exposed corners step\n                  below `prominent` rather than above it, because a surface that meets an\n                  edge is read as an extension of the page: a corner sized for a\n                  free-floating object makes it read as an oversized floating card. It is a\n                  role of its own rather than a smaller `prominent`, because `prominent`\n                  also holds compact floating controls, and those must keep their softness.\n   - expressive:  an expressive surface that owns the viewport — a dialog, tightened so it\n                  reads as a focused surface rather than a pillowy one.\n   - pill:        fully rounded controls whose width follows their content.\n   - circle:      fully rounded square targets. */\nexport const shape = {\n  control: \"rounded-[1rem]\",\n  mark: \"rounded-[0.375rem]\",\n  row: \"rounded-[0.75rem]\",\n  prominent: \"rounded-[1.25rem]\",\n  surface: \"rounded-[1.5rem]\",\n  sheet: \"rounded-[1rem]\",\n  expressive: \"rounded-[1.75rem]\",\n  pill: \"rounded-full\",\n  circle: \"rounded-full\",\n} as const;\n\n/* Structural edges — the hairline where two parts of one surface meet, and the\n   only structural lines in the library. A matte control has no rim: a 1px inset\n   ring that traces a filled object is still a drawn border, so filled controls\n   are separated by tone, not by a line. Light does the rest: a raised control\n   carries a lower shadow, and the elevation steps add the upper highlight.\n   One tone serves every line, so table rows, dividers, the `Divider` component and\n   code sections agree with each other. A Markdown blockquote is not one of these: it\n   takes a primary accent, because a quote is content-level emphasis rather than a\n   structural join between two parts.\n\n   The three roles are a tone each, and two of them carry the direction the row draws. The tone\n   is authored once and separately, because a `Divider` draws its own direction: a row's line and\n   a standalone rule have to agree on the tone without sharing a border. */\nexport const edgeTone = {\n  row: \"border-sherick-edge/[0.06]\",\n  header: \"border-sherick-edge/[0.10]\",\n  rule: \"border-sherick-edge/[0.075]\",\n} as const;\n\n/* Rim — the boundary of a *hollow* control: a text field, or an empty checkbox or radio. Nothing\n   inside such a control says what it is — an empty field holds at most a placeholder, an empty mark\n   holds nothing — and it still has to be identifiable at 3:1, which no neutral fill step and no\n   depth the light model can draw achieves on its own. So a hollow control carries one rim in the\n   `rim` tone, tuned to clear 3:1 on every surface by a small margin and no more, and that rim is\n   the only border a control has. A filled control — a button, a chip, a selected mark — is identified by its fill and\n   never carries one.\n   The field rim is a real border: forced colors repaints a border in a system colour, where it\n   would remove an inset shadow, and the scoped baseline sizes boxes by their border edge, so the\n   rim never changes a field's footprint. Its states ride on the field ladder in `state.field`.\n   A drop target's rim is dashed, and the dashes are a mask over an overlay rather than the native\n   `dashed` style, whose dash length and corner joins the platform decides: the mask fixes the dash\n   rhythm and follows the `control` corner exactly. The mask is authored in `tokens.ts`. */\nconst dashedRimMask =\n  \"after:[mask-image:var(--sui-rim-dashed)] after:[mask-size:100%_100%] after:[mask-repeat:no-repeat]\";\n\nexport const rim = {\n  field: \"border-[1.5px] border-sherick-rim\",\n  fieldError: \"border-[1.5px] border-sherick-danger\",\n  dashed: /* @__PURE__ */ cx(\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']\",\n    \"after:bg-sherick-rim\",\n    dashedRimMask,\n    motionRim\n  ),\n  /* The dashes step up under the pointer and take the primary tone while a file is held over them. */\n  dashedHover: \"hover:after:bg-sherick-ink-muted\",\n  dashedDragging: \"data-[dragging]:after:bg-sherick-primary\",\n} as const;\n\nexport const edge = {\n  /* Rows of a stacked list or table. */\n  row: /* @__PURE__ */ cx(\"border-b\", edgeTone.row, \"last:border-b-0\"),\n  /* The heavier rule beneath a column header. */\n  header: /* @__PURE__ */ cx(\"border-b\", edgeTone.header),\n  /* A section break inside one surface, or a standalone rule. Pair it with the\n     directional border class at the call site (`border-t`, `border-l`). */\n  rule: edgeTone.rule,\n} as const;\n\nconst effectiveDisabled =\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 disabled:cursor-not-allowed disabled:opacity-45\";\n\n/* Interaction states:\n     rest       the material, at whatever elevation its anatomy calls for\n     hover      one tonality step, never a change in depth or a new border\n     pressed    a raised control returning to the recessed depth of its own track, plus\n                a slight compression; a flat control stays flat and a floating one keeps\n                its elevation\n     selected   a held choice: selected tone plus control elevation on a segment,\n                option/tree row or date surface; never on mere navigation highlight\n     disabled   45% opacity, no pointer affordance, no interactive state at all\n     focus      the shared outer focus ring, visible on keyboard focus */\nexport const state = {\n  /* A raised matte control presses back into the track beneath it — the same physical\n     depth a groove or a well sits at. How far the press itself travels is motion amplitude, and\n     it belongs with the tactile intent in `ui.motion.ts`. */\n  recess: \"active:shadow-sherick-recessed\",\n  /* The disabled step for a control whose disabled state is a Sherick prop. */\n  disabled: \"cursor-not-allowed opacity-45\",\n  /* The same step, keyed on the primitive's own markers rather than on a Sherick prop: Base marks\n     an effectively disabled control — including one disabled by the field around it — with\n     `data-disabled`, and a part that disables itself at a bound carries `disabled` as well. */\n  effectiveDisabled,\n  /* A row whose control is disabled by any means — its own option, its group, or the field around\n     it — dims from the control's own marker rather than from a Sherick prop. */\n  disabledRow: \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45\",\n  /* A control nested inside a disabled composite. The composite already applied the opacity step,\n     and a second one would dim the field unevenly; this carries only the disabled cursor. */\n  disabledDescendant: \"cursor-not-allowed\",\n  /* A part dims independently at a bound, but never a second time inside a disabled field. */\n  disabledPart: /* @__PURE__ */ cx(effectiveDisabled, \"group-data-[disabled]/field:opacity-100\"),\n  /* A part the pointer is engaging — the handle of a value control. It sits matte and settled at\n     rest and takes its accent, a little larger, while the pointer is on it. Drag covers the case\n     where the pointer has been captured and left the control. */\n  engaged:\n    \"group-[:not([data-disabled])]:hover:scale-110 group-[:not([data-disabled])]:hover:bg-sherick-primary-strong group-[:not([data-disabled])]:hover:text-sherick-on-primary data-[dragging]:scale-110 data-[dragging]:bg-sherick-primary-strong data-[dragging]:text-sherick-on-primary\",\n  /* A control with a hit area of its own. */\n  enabled: \"cursor-pointer\",\n  /* A text field: the normal text cursor, never a pointer. */\n  text: \"cursor-text\",\n  /* Quiet scan feedback for non-interactive data rows: tonality only. */\n  rowHover: \"hover:bg-sherick-ink/[0.05]\",\n  /* The matte field family — one tonality ladder, four triggers, no rims. A field\n     steps its surface up once on hover and once more while it is engaged; a\n     composite field focuses its outer surface while the input inside stays\n     borderless; an expanded control holds the engaged step while its popup is\n     open. Tonality carries the state, so no border appears and disappears. */\n  /* A field is a well: its fill sits below the surface around it, and engaging it sinks it further\n     while its rim steps up. An invalid field is the same well with a danger rim: the rim, the\n     danger placeholder and the field's message carry the error, so the fill never trades its\n     depth for a tinted wash. The error steps keep the well's depth ladder and leave the rim alone. */\n  field: {\n    hover: \"hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted\",\n    focus: \"focus:bg-sherick-canvas focus:border-sherick-ink-muted\",\n    /* A composite's engaged tone outranks hover, independent of variant emission order. */\n    focusWithin: \"[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted\",\n    engaged: \"bg-sherick-canvas border-sherick-ink-muted\",\n    errorHover: \"hover:bg-sherick-canvas/[0.85]\",\n    errorFocus: \"focus:bg-sherick-canvas\",\n    errorEngaged: \"bg-sherick-canvas\",\n    /* The error ladder again, keyed on Base UI's validity attribute for a part that learns its\n       validity from the field it sits in. Two variants outrank the single-variant ladder above,\n       so neither ladder has to be conditional. */\n    invalid: \"data-[invalid]:border-sherick-danger\",\n    invalidHover: \"data-[invalid]:hover:border-sherick-danger\",\n    invalidEngaged: \"data-[invalid]:border-sherick-danger\",\n    invalidFocusWithin: \"[&&]:data-[invalid]:focus-within:border-sherick-danger\",\n  },\n\n} as const;\n\n/* State layers.\n   A layer is `relative` itself, because its overlay is absolutely positioned inside the control.\n   A component that positions the control — an absolutely placed close or submit control — writes\n   that position *after* the layer in its class list: `tailwind-merge` keeps the last class in a\n   conflicting group, so a position written before the layer is silently replaced by the layer's\n   own.\n   Replacing `background-color` on hover erases whatever fill a control owns: an\n   opaque fill collapses to a bare tint and a tinted fill loses most of its step.\n   This overlay instead composites over the fill, tinted with `currentColor` — the\n   container's own on-color, which is also the color furthest from that fill, and\n   the same color as the label, so the glyphs themselves are unaffected. Opacity\n   carries the state, so it fades on the shared motion curve instead of snapping,\n   and it takes the press timing while the control is held.\n   One step per fill strength: a quiet surface tints lightly, an opaque accent fill\n   takes the heaviest step.\n   Both interactive steps are gated on the primitive's own disabled markers, so an effectively\n   disabled control neither tints nor presses — whether it was disabled by a prop, by its group or\n   by the field around it. `:disabled` alone cannot gate a press: a row in a collection is a\n   `div`, so `:active` matches it while the pointer is down on it and the marker is the only gate\n   there is. */\nconst stateLayerBase = /* @__PURE__ */ cx(\n  \"before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:opacity-0\",\n  motionStateLayer\n);\n\n/* A part answers the pointer only while it is interactive. A native control carries `disabled`, and\n   a collection primitive marks its rows with `data-disabled` instead. One rule covers both, in the\n   same shape for hover and for press, and the group form is that rule for a part whose pointer\n   arrives from the wrapping control.\n\n   Each step is written out as a whole class name rather than assembled from a variant fragment and\n   a suffix, because the stylesheet compiler reads class names as literal text: a name that only\n   exists once the recipe is evaluated compiles to no rule at all, and the step silently disappears.\n   Interpolating one of these consts is safe — the name is still written here in full. */\nconst hoverQuiet = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.05]\";\nconst hoverTonal = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.09]\";\nconst hoverFilled = \"[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]\";\nconst hoverTrack = \"group-[:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]\";\nconst pressQuiet = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.09]\";\nconst pressTonal = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.15]\";\n/* A neutral fill's label is ink, so a 15% ink veil turns the whole control a flat grey while it is\n   held — and the recess and the compression already say \"pressed\". The neutral press is lighter;\n   coloured fills keep the stronger step their labels were measured through. */\nconst pressTonalNeutral = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.12]\";\nconst pressFilled = \"[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]\";\nconst pressTrack = \"group-[:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]\";\n/* A selection mark answers hover with the light tonal step: it is a 20px glyph beside its own\n   label, and the track's step would turn an empty well into a grey disc. Its press is depth, not\n   a heavier veil — `selectable.markSurface` sinks the well — so the layer only holds its hover\n   step while the pointer is down. A read-only mark accepts no change and advertises none.\n   The pseudo-class sits *inside* the group selector: written after it, as `…]:hover:`, it would\n   match the mark's own 20px box rather than the control and the row around it. */\nconst hoverMark =\n  \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:before:opacity-[0.09]\";\n\n/* A labelled control surface paints its state on a row that owns the pointer area while the\n   actual disabled marker belongs to a descendant control. Gate the same quiet response on that\n   descendant so a disabled or read-only choice does not advertise a press it cannot accept. */\nexport const stateLayerQuietComposite = /* @__PURE__ */ cx(\n  \"relative\",\n  stateLayerBase,\n  \"before:rounded-[inherit] before:bg-current\",\n  \"[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:hover:before:opacity-[0.05]\",\n  \"[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:active:before:opacity-[0.09]\"\n);\n\nexport const stateLayer = {\n  /* Quiet surfaces — ghost controls, navigation rows, menu options. */\n  quiet: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverQuiet, pressQuiet),\n  /* Tinted containers: the fill is nearly page color already, so the container's own\n     on-color (`current`) carries the state at a light step. Shared by every matte\n     control with a fill — tonal buttons, icon buttons, acrylic buttons. */\n  tonal: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTonal, pressTonal),\n  /* The same layer for a neutral (`secondary`) tonal fill, with the lighter press. */\n  tonalNeutral: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTonal, pressTonalNeutral),\n  /* Opaque fills: `current` is the fill's own on-color — the color furthest from it in\n     either theme — so one step reads on a saturated blue and a neutral gray alike. */\n  filled: /* @__PURE__ */ cx(\"relative\", stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverFilled, pressFilled),\n  /* A switch track or a selection well: the same layer, but hover and press arrive from the\n     wrapping control rather than from the surface itself. */\n  track: /* @__PURE__ */ cx(stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverTrack, pressTrack),\n  /* A checkbox box or a radio socket: the hover arrives from the wrapping control, at the light\n     tonal step, and the press is carried by the well's own depth rather than by this layer. */\n  mark: /* @__PURE__ */ cx(stateLayerBase, \"before:rounded-[inherit] before:bg-current\", hoverMark),\n  /* A row highlighted by keyboard or pointer navigation. Base UI collection primitives expose\n     `data-highlighted`; this is the one canonical visual treatment for it, and it pairs with a\n     row's own `quiet` layer — the row carries both, so a highlighted row and a hovered row are the\n     same tone at the same strength. That strength is written twice because a class name has to be\n     literal to be compiled; that the two rendered layers agree is asserted in the browser suite\n     rather than left to these lines to stay in step.\n     It is deliberately not gated on the disabled markers: a disabled command stays reachable by\n     keyboard so it can be discovered and announced as unavailable, and a reader still has to see\n     which row the navigation is on when it lands there. */\n  activeRow: \"data-[highlighted]:before:opacity-[0.05]\",\n} as const;\n\n/* Hit area — the interactive region of a control whose visible mark is smaller than a comfortable\n   target, drawn outside the layout box so a column, a row gap and the space beside a label are all\n   measured from the control the user sees. The expansion is capped at the accessible target floor;\n   CSS cannot see neighbouring geometry, so it keeps clearance only while surrounding rows are at\n   least as tall as that floor — which this library's own `density.normal` rhythm is, and a 40px\n   table row is not. */\nexport const hitArea =\n  \"relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']\";\n\n/* Material — fill only. No material carries elevation or a rim: the same matte\n   fill appears flat in a card, lifted on a button and recessed in a groove.\n   - canvas:      the page itself.\n   - matteQuiet:  the quietest matte step, for dense data regions and wells that\n                  should sit back from the surface around them.\n   - matte:       a matte surface that separates from the canvas by tone alone.\n   - matteHigh:   the second matte step, for nesting inside another matte surface.\n   - matteInset:  a passive sheet tucked under a stronger control; subdued without\n                  blending into the canvas or needing a drawn rim.\n   - control:     the fill every text control shares, plus its placeholder tone. It is a well:\n                  the canvas tone, which sits below a card in both themes, so a field reads as\n                  sunk into the surface rather than as a pad raised from it. Its rim, not its\n                  fill, is what separates it (see `rim`).\n   - handle:      the fill of a small part the user has to find — a value control's handle.\n                  Surface steps sit within a few percent of their neighbours, so this role\n                  takes the mid-emphasis tone, which inverts with the theme and separates in\n                  both.\n   - acrylic:     a translucent sheet lit from above, for surfaces that float above\n                  the application. The gradient, fill, blur and saturation are part of\n                  the material. A gradient arrives as a typed image arbitrary value\n                  rather than through the colour scale, because `tailwind-merge`\n                  collapses two background utilities into one and would silently drop\n                  either the fill or the gradient. Each one is written out literally, so\n                  the class scanner never meets a half-built name. The fill stays an\n                  ordinary background colour, so a caller can retone a sheet without\n                  touching its lighting. An anchored sheet carries most of its own tone,\n                  because it has to stay legible over whatever it happens to sit on: a\n                  saturated button behind a popup must not read as the popup's own\n                  state. `acrylicDense` is the same sheet at higher opacity still, for\n                  the smallest floating surfaces — a tooltip, a floating control.\n   - acrylicHero: the large-overlay sheet, for a surface that owns the viewport. It is\n                  markedly more opaque and calmer than the smaller sheets: it has to\n                  read first as a physical surface and only secondarily as glass, so the\n                  scrim behind it does the separating, the blur only defocuses, and the\n                  gradient is a restrained top-to-bottom light rather than a frosted\n                  haze. Its tone is a subtle step above the canvas in every theme —\n                  in dark mode a small step above the canvas rather than a light grey\n                  sheet — which is how it separates without leaning on its shadow, and\n                  `--sui-overlay-fill` tunes how much of the sheet is its own tone rather\n                  than the defocused page — a large overlay leans on that, not on blur. */\nexport const material = {\n  canvas: \"bg-sherick-canvas text-sherick-ink\",\n  matteQuiet: \"bg-sherick-surface/[0.42] text-sherick-ink\",\n  matte: \"bg-sherick-surface/[0.78] text-sherick-ink\",\n  matteHigh: \"bg-sherick-surface-high/[0.72] text-sherick-ink\",\n  control: \"bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted\",\n  /* The invalid fill carries its placeholder at the *full* danger tone, not at a fraction of it. A\n     placeholder is text, so it answers to the same 4.5:1 the copy beside it does, and a partial\n     opacity of an accent is a different colour from the accent: the 72%-opacity placeholder\n     measured 2.8–3.0:1 light and 3.4–3.9:1 dark on this fill, while the token it was mixed from\n     measures 4.1–4.7:1 light and 5.2–6.2:1 dark on it. There is no dimmer step of a semantic tone\n     that is still readable, and a normal field's placeholder is `ink-muted` at full strength\n     already — so the error form is the same rule, in the tone the field is in. */\n  controlError: \"bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger\",\n  handle: \"bg-sherick-ink-muted text-sherick-canvas\",\n  acrylic:\n    \"bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]\",\n  acrylicDense:\n    \"bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]\",\n  acrylicHero:\n    \"bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]\",\n} as const;\n/* Dark neutral behind native video, including poster loading and letterboxing. */\nexport const mediaCanvas = \"bg-sherick-media\";\n/* A passive sheet tucked below a stronger control; independently tree-shakeable. */\nexport const matteInset = \"bg-sherick-surface-high/[0.35] text-sherick-ink\";\n\n/* Type roles — the recurring kinds of text the library sets, each with one size, line height and,\n   where the role owns it, one weight. A component still owns copy that only it renders; these are\n   the roles that recur across families and have to agree wherever they appear:\n   - control:    the type step of a control, owned through `density` below.\n   - supporting: a field's description, hint and error, and the secondary line under a row's label.\n   - caption:    compact labels — a badge, a tooltip, a group label, a calendar weekday.\n   - title:      the heading of a compact surface — a popover, a toast, a command palette.\n   - heading:    the title of a surface that owns the viewport — a dialog, an alert dialog, a drawer.\n   - numeric:    figures that are compared down a column or updated in place.\n   Every size lands on a whole-pixel line box, so stacked rows keep one rhythm. */\nexport const type = {\n  control: {\n    compact: \"text-sm\",\n    normal: \"text-[0.9375rem] leading-[1.375rem]\",\n    prominent: \"text-lg\",\n  },\n  supporting: \"text-[0.8125rem] leading-5\",\n  caption: \"text-xs leading-4\",\n  title: \"text-[0.9375rem] leading-[1.375rem] font-semibold\",\n  heading: \"text-xl leading-7 font-semibold tracking-[-0.02em]\",\n  numeric: \"tabular-nums\",\n} as const;\n\n/* Density — three control steps plus the accessible hit target.\n   Density owns height and the type step, so controls of one density share a\n   rhythm. A component's anatomy owns its padding: a button's inline padding is\n   set by how it is gripped, a field's by how much text it holds, and neither is\n   derived from the other. The default step is comfortable rather than dense: a\n   48px control is Sherick's resting proportion, and `compact` is the step for\n   dense product regions. Body copy, headings and labels are content, not\n   controls, and take a type role above. */\nexport const density = {\n  compact: /* @__PURE__ */ cx(\"min-h-10\", type.control.compact),\n  normal: /* @__PURE__ */ cx(\"min-h-12\", type.control.normal),\n  prominent: /* @__PURE__ */ cx(\"min-h-14\", type.control.prominent),\n  /* Minimum interactive target for an icon-only control that stands on its own. */\n  target: \"min-h-11 min-w-11\",\n  /* A control that is one part of a composite field — the trailing controls a Combobox owns. It\n     keeps the floor's height, because it has to sit in the field's row, and takes only the width\n     its glyph needs: the two of them are gripped as one cluster at the field's edge, and two full\n     squares there read as two controls beside a field rather than as parts of it.\n     The narrower step still clears the 24px pointer-target minimum WCAG AA asks for. It is below\n     this system's own 44px floor on purpose: that floor belongs to a control that is the whole\n     target of its own action, and this one is a part of a field the pointer is already in. */\n  part: \"min-h-11 min-w-9\",\n} as const;\n\n/* Icon slot — the fixed box a leading or trailing mark occupies, sized by the type step it sits\n   beside so the icon-to-label ratio is the same at every size: a 14px label takes a 16px mark, a\n   15px label a 20px mark, an 18px label a 24px mark, and a 12px caption a 14px mark. The box, not\n   the artwork's own whitespace, is what aligns with the label, and a spinner that replaces the icon\n   lands in the same box. */\nexport const iconSlot = {\n  caption: \"inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5\",\n  compact: \"inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\",\n  normal: \"inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5\",\n  prominent: \"inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6\",\n} as const;\n\n/* Stacking level — where anything that floats sits relative to the application.\n\n   One interaction level, deliberately. Base UI nests a popup's portal *inside* the portal of the surface it\n   was opened from, and appends it last, so document order already says which floating surface is\n   on top: the innermost — the one opened last — wins. A scale that ranked surfaces by kind would\n   fight that, and it cannot be right: a popup opened from inside a dialog is the innermost\n   surface there is, yet a ranking puts the dialog above it and the popup renders behind the modal\n   that owns it. Sharing one level lets the nesting Base already built decide, at any depth.\n\n   The level's job is to clear the application's own content, not to rank Sherick surfaces against\n   each other. */\nexport const stacking = {\n  float: \"z-50\",\n  /* A persistent app notification portal predates the modal it reports on. */\n  notification: \"z-[60]\",\n} as const;\n\n/* Floating overlay shells.\n   Base UI owns popup presence, focus, dismissal, portals and anchored positioning.\n   Sherick UI owns only the visual shell: material, elevation and shape. Where the entrance\n   grows from and how it moves on the way are the presence recipes' in `ui.motion.ts`, so a\n   surface's shell never depends on the primitive's open state. `scrim` is the plane\n   *behind* a surface that owns the viewport, so it is a fill and a blur with no elevation\n   or shape of its own. It is shared rather than written per component so a dialog and an\n   alert dialog separate from the page identically. */\nexport const overlay = {\n  /* The plane behind a surface that owns the viewport. */\n  scrim: /* @__PURE__ */ cx(\"fixed inset-0\", stacking.float, \"bg-sherick-scrim/[0.38] backdrop-blur-[var(--sui-scrim-blur)]\"),\n  /* An anchored surface with room to breathe: a selection list (Select, Combobox) or\n     structured content (Popover). It grows out of its trigger and carries the softer\n     surface corner, because what it holds is read rather than scanned.\n     When not to use it: a short list of commands wants `menu`, and a hint wants\n     `tooltip`. */\n  popup: /* @__PURE__ */ cx(shape.surface, material.acrylic, elevation.floating),\n  /* A compact list of commands. The same sheet, the same presence and the same lighting as\n     `popup`, tightened in shape so a handful of short actions reads as a list rather than a\n     page: a command list should feel like one more control on the surface it came from.\n     When not to use it: a list of options that are chosen rather than performed, or a\n     surface holding structured content, wants `popup`. */\n  menu: /* @__PURE__ */ cx(shape.control, material.acrylic, elevation.floating),\n  /* A short hint is a compact sheet, not a capsule button. */\n  tooltip: /* @__PURE__ */ cx(shape.row, material.acrylicDense, elevation.floating),\n  /* A toast is a floating status surface that arrives on its own and leaves on its own. It\n     holds a line or two of copy rather than being read as a page, so it takes the compact\n     floating corner rather than the wide sheet a popup is.\n     When not to use it: a hint attached to a control wants `tooltip`, and anything the user\n     opened themselves wants `popup`. */\n  toast: /* @__PURE__ */ cx(shape.prominent, material.acrylic, elevation.floating),\n  /* A dialog rises further than a menu. It is anchored to the viewport rather than to a trigger,\n     so it has no side to grow from and takes the modal presence instead of the anchored one.\n     Its corner is the most generous in the library, because a surface that floats free of every\n     edge has nothing to line up with. */\n  dialog: /* @__PURE__ */ cx(shape.expressive, material.acrylicHero, elevation.floating),\n  /* A sheet is the same viewport-owning surface as a dialog, attached to one edge of the\n     viewport. Its exposed corners take `shape.sheet` — one step below a compact floating\n     surface rather than above it — because a surface that meets an edge is read as an extension\n     of the page, and its attached edge is squared by the component's own anatomy. Which corners\n     those are is decided by the edge; the radius the other two keep is still `shape`'s.\n     When not to use it: a surface with no edge to attach to wants `dialog`. */\n  sheet: /* @__PURE__ */ cx(shape.sheet, material.acrylicHero, elevation.floating),\n} as const;\n\n/* Text hierarchy — two roles, because only two can carry readable text. High emphasis carries\n   labels and values, medium emphasis carries supporting copy, descriptions and placeholders. Both\n   clear 4.5:1 on every surface the library composites over, in both themes.\n   \n   There is deliberately no third text step. A third step would have to sit between `medium` and\n   the dimmest tone a surface allows, and at these surfaces the value that clears 4.5:1 collapses\n   into `ink-muted` — a step that measures the same as the one above it is not a hierarchy, it is a\n   role pretending to be one. The dimmest tone is a *non-text* role instead (see `detail` below). */\nexport const text = {\n  high: \"text-sherick-ink\",\n  medium: \"text-sherick-ink-muted\",\n} as const;\n\n/* Detail — the non-text furniture tone: a gutter, a rail, a mark's frame, secondary graphical\n   detail that carries meaning without being read. It answers to the 3:1 non-text requirement on\n   every surface it is permitted on, and it is never a foreground for text: a hint, a placeholder,\n   a line number or any other readable step uses `text.medium`. */\nexport const detail = {\n  /** A mark's own frame, or a rail drawn as a line. */\n  mark: \"border-sherick-detail\",\n  /** The same tone as a block, for a gutter or a rail with thickness. */\n  fill: \"bg-sherick-detail\",\n} as const;\n\n/* A list surface — the sheet a collection of rows sits in, and the two row densities it can\n   hold. Select, Combobox and Menu all compose these, so an option and a command are the same\n   object at two densities instead of three independent designs.\n\n   The sheet never exceeds what the viewport leaves it, and scrolls inside itself rather than\n   growing. Its width is the list's own decision: a control's list is never narrower than the\n   control it came from and grows to fit its own content until the viewport clamp, and a command\n   list only ever grows to its content. Unselected rows and commands stay flat; held options\n   compose `tone.selected` with `elevation.control`. One row step of `stateLayer.quiet` plus\n   `stateLayer.activeRow` carries both its hover and\n   its keyboard highlight, so an option and a command are highlighted by the same tone at the\n   same strength. Keyboard focus adds the shared inset ring independently of that highlight.\n   Selection is a tint of the sheet through `tone.selected` and never the opaque\n   accent, which belongs to the one primary action in the view rather than to a row that happens\n   to be chosen.\n   A row that cannot be used takes no hover and no press, and its tone step says so on its own —\n   but it keeps the navigation highlight. A disabled option or command stays reachable by\n   keyboard so it can be discovered and announced as unavailable, and a reader still has to see\n   which row the navigation is on when it arrives there. Disabled means \"cannot be chosen or\n   performed\", never \"cannot be found\". */\nexport const list = {\n  sheet: \"max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto\",\n  /* A row in a selection list: one line, read one at a time and chosen.\n     The row carries two separate things that both have to be visible. Its *navigation highlight*\n     is the state layer — one tone shared with the pointer, because a row under the pointer and a\n     row under the arrow keys are the same thing happening. Its *focus treatment* is the shared\n     inset ring, and it is gated on `:focus-visible`, which is what separates the two cases: Base\n     gives the active row real DOM focus, and the platform reports that focus as visible when the\n     keyboard put it there and not when a pointer did. So a pointer that opens a list and moves\n     over a row gets the highlight and no ring, a keyboard that opens one and steps down it gets\n     both, a selected row keeps its selection tint under the ring, and a disabled-but-navigable\n     row still shows where the navigation is while saying it cannot be used. The ring is inset\n     because the row lives inside the sheet it belongs to, as a segment does in its track. */\n  option: /* @__PURE__ */ cx(\n    \"flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none\",\n    type.control.normal,\n    shape.control,\n    motionFeedback,\n    focusRingInset,\n    text.high,\n    stateLayer.quiet,\n    stateLayer.activeRow,\n    motionRowLayer,\n    state.effectiveDisabled\n  ),\n  /* The heading of a group of options — a category above the channels filed under it. It is a\n     caption, not a row: it takes no state layer, no highlight and no focus, because the reader never\n     lands on it; the primitive names the group from it, so a screen reader hears the category as it\n     enters the group. Its inline padding is the option's, so a heading and the labels beneath it\n     share one start edge, and the space above it is what separates one group from the last: a\n     group inside a sheet is grouped by spacing and a type role, never by a rule or a nested card. */\n  groupLabel: /* @__PURE__ */ cx(\"px-4 pb-1 pt-3 font-medium\", type.caption, text.medium),\n  /* The same object at the density a list of short actions wants, where the row is scanned\n     rather than read and the list is a control rather than a page. `shape.row` keeps the\n     command's corner proportional to its own height, so its highlight nests in the tighter\n     sheet the menu is. */\n  command: /* @__PURE__ */ cx(\n    \"flex w-full items-center gap-3 px-3 py-2 text-start outline-none\",\n    type.control.compact,\n    shape.row,\n    motionFeedback,\n    focusRingInset,\n    text.high,\n    stateLayer.quiet,\n    stateLayer.activeRow,\n    motionRowLayer,\n    state.effectiveDisabled\n  ),\n} as const;\n\n/* A disclosure — one row that opens the region beneath it. An item in an `Accordion` and a\n   standalone `Collapsible` are the same object: a stacked row, and the in-flow panel its\n   primitive measures. They share this recipe so the two cannot drift into two designs, and the\n   height itself is the primitive's — it arrives as `--sui-disclose-height`, which each\n   component maps its own primitive's panel variable onto, because the measured geometry is\n   anatomy and only the interpolation is temporal. */\nexport const disclosure = {\n  /* The row: a full-width row in a stacked group, activated like a selectable row. Its own focus\n     indicator is the shared inset ring, because an offset one drawn outside the row would land on\n     the divider or the panel beside it rather than around the row it belongs to — which is the same\n     reason a segment inside a track takes the inset form. The chevron the component puts in the\n     row is the disclosure's own affordance and turns in place under `motionOrient`. */\n  trigger: /* @__PURE__ */ cx(\n    \"group [overflow-wrap:anywhere]\",\n    list.option,\n    state.enabled\n  ),\n  panel: /* @__PURE__ */ cx(\"h-[var(--sui-disclose-height)] overflow-hidden text-sm leading-7 [overflow-wrap:anywhere]\", text.medium, motionDisclose),\n} as const;\n\n/* Tone hierarchy — the color roles a surface can take, in rising strength:\n     text      foreground only, for quiet rows and links.\n     soft      a de-emphasised tinted surface: alerts, badges, quiet cards.\n     tonal     a matte control fill at rest: tonal buttons, icon buttons.\n     selected  the fill a selected control holds: options, segments, calendar days, tree rows.\n     strong    the opaque accent fill that marks priority.\n   The semantic soft and selected steps are the role's own authored surfaces (`--sui-<role>-soft`,\n   `--sui-<role>-selected`), not a fraction of its foreground: the foreground is tuned for text\n   contrast, and a fraction of it is a greyed version of the hue. They are opaque, so one tone reads\n   the same on the canvas, inside a card and on an acrylic sheet. The neutral soft step is a step\n   *within* whatever holds it rather than the card fill itself, so a neutral badge or tag stays\n   visible inside a card. */\nexport const tone = {\n  text: {\n    primary: \"text-sherick-primary\",\n    secondary: \"text-sherick-ink\",\n    danger: \"text-sherick-danger\",\n    warning: \"text-sherick-warning\",\n    success: \"text-sherick-success\",\n  },\n  soft: {\n    primary: \"bg-sherick-primary-soft text-sherick-primary\",\n    secondary: \"bg-sherick-surface-high/[0.72] text-sherick-ink\",\n    danger: \"bg-sherick-danger-soft text-sherick-danger\",\n    warning: \"bg-sherick-warning-soft text-sherick-warning\",\n    success: \"bg-sherick-success-soft text-sherick-success\",\n  },\n  tonal: {\n    primary: \"bg-sherick-primary-soft\",\n    secondary: \"bg-sherick-surface-high/[0.56]\",\n    danger: \"bg-sherick-danger-soft\",\n    warning: \"bg-sherick-warning-soft\",\n    success: \"bg-sherick-success-soft\",\n  },\n  selected: {\n    primary: \"bg-sherick-primary-selected text-sherick-ink\",\n    secondary: \"bg-sherick-surface-high/[0.82] text-sherick-ink\",\n    danger: \"bg-sherick-danger-selected text-sherick-ink\",\n    warning: \"bg-sherick-warning-selected text-sherick-ink\",\n    success: \"bg-sherick-success-selected text-sherick-ink\",\n  },\n  strong: {\n    primary: \"bg-sherick-primary-strong text-sherick-on-primary\",\n    secondary: \"bg-sherick-surface-high text-sherick-ink\",\n    danger: \"bg-sherick-danger text-sherick-on-danger\",\n    warning: \"bg-sherick-warning text-sherick-on-warning\",\n    success: \"bg-sherick-success text-sherick-on-success\",\n  },\n  /* The strong fills again, keyed on the primitive's own selection marker rather than on a\n     Sherick prop. A control that holds its selection in the primitive — an uncontrolled\n     `Switch` — has to take its fill from the same source of truth as a controlled one, and a\n     keyed fill has to be written out literally to be compiled, so it is a role here rather\n     than a conditional at the call site. */\n  strongChecked: {\n    primary: \"group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary\",\n    secondary: \"group-data-[checked]:bg-sherick-surface-high group-data-[checked]:text-sherick-ink\",\n    danger: \"group-data-[checked]:bg-sherick-danger group-data-[checked]:text-sherick-on-danger\",\n    warning: \"group-data-[checked]:bg-sherick-warning group-data-[checked]:text-sherick-on-warning\",\n    success: \"group-data-[checked]:bg-sherick-success group-data-[checked]:text-sherick-on-success\",\n  },\n} satisfies Record<string, Record<Variant, string>>;\n\n/* Current location — where the reader is, as opposed to a value they chose. A navigation row, the\n   current page of a pagination and any other `aria-current` destination hold the role's soft\n   container, full ink and a touch of weight, and stay flat: depth and the stronger selected step\n   belong to held values (`tone.selected` with `elevation.control`). */\nexport const currentDestination = \"bg-sherick-primary-soft text-sherick-ink font-medium\";\n\n/* Selectable surface — the recessed surface of a control that fills once it is selected: a\n   switch track, a checkbox box, a radio circle, a slider groove. Selection is keyed on the\n   primitive's own `data-checked` / `data-indeterminate`, so an uncontrolled control is styled\n   from the same source of truth as a controlled one. A mixed box is selected but is not\n   ticked, which is why the second attribute stands beside the first. */\n/* A radio's opt-in full row follows the Base control it labels. `:has` keeps uncontrolled\n   selection authoritative at the primitive rather than mirroring it in component state.\n   Keep this independent so unrelated consumers of the mark recipes can tree-shake it. */\nexport const selectableRowSurface =\n  \"has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control\";\n\n/* Supporting copy inside such a row — a choice's description. `text.medium` is measured against the\n   resting surfaces and falls just short of 4.5:1 on the selected step (4.25:1 light, 4.32:1 dark), so\n   while the row holds the selection its supporting line takes full ink; the supporting type step\n   keeps it subordinate to the label. Keyed on the same primitive marker as the surface itself. */\nexport const selectableRowSupporting = \"group-has-[[data-checked]]:text-sherick-ink\";\n\nexport const selectable = {\n  surface: /* @__PURE__ */ cx(\"relative\", elevation.recessed, motionFeedback),\n  /* A selection mark — a checkbox box, a radio socket — rests in the same groove a Switch track\n     does. While the wrapping control is held it sinks to the `well`: the floor darkens and the\n     boundary stays exactly where it was, which is how a mark that must not move under the pointer\n     answers a press. */\n  markSurface: /* @__PURE__ */ cx(\n    \"relative\",\n    elevation.recessed,\n    \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):active]:shadow-sherick-well\",\n    motionFeedback\n  ),\n  /* The resting fill a *groove* holds — a segmented control's track, a tab list — and nothing more.\n     A groove that holds labelled segments is identified by those segments, exactly as a tab list is\n     identified by its labels, so it takes no boundary of its own. */\n  rest: /* @__PURE__ */ cx(material.matteHigh, text.medium),\n  /* An *empty mark* — an unchecked box, an unselected radio — is a hollow control: nothing inside it\n     says what it is, and it still has to be identifiable at 3:1. Neither the neutral fill (about\n     1.3:1 against the surface around it) nor any depth the light model can draw gets it there\n     without turning the mark into a shaded orb. So an empty mark is the one control that carries\n     a **rim**: the `rim` tone, tuned to just clear 3:1 on every surface, drawn as the lip of the\n     recess it sits in rather than as an outline over a filled control. The rim belongs to the empty\n     state only — a selected mark is identified by its fill, and the rim dissolves into it.\n     The rim is an overlay rather than the mark's own border, so the fill, the hover layer and the\n     recess all reach the mark's real edge: a border would leave a 1.5px frame of untinted fill\n     around a hovered selected box. Hover steps the rim to the mid-emphasis tone — darker in light\n     mode, lighter in dark — which is a visible answer on a 20px mark where a tint alone is not. */\n  mark: /* @__PURE__ */ cx(\n    \"bg-sherick-canvas/[0.7]\",\n    text.medium,\n    \"after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:content-['']\",\n    \"after:border-sherick-rim\",\n    \"group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:after:border-sherick-ink-muted\",\n    motionRim\n  ),\n  /* A selected mark is the strong accent, edge to edge, and it settles flat: it is identified by\n     its fill and its glyph, and the rim fades out as the fill arrives. The rim fades by opacity\n     rather than by colour, so forced colors cannot repaint a transparent rim as a visible one. */\n  selected:\n    \"group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0\",\n  indeterminate:\n    \"group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0\",\n  /* A selected radio's dot: the socket's on-colour, flat. A Switch thumb is lifted because it is a\n     24px part the user moves; an 8px dot under the same shadow reads as a bead with a halo. */\n  thumb: \"bg-current\",\n} as const;\n\n/* The authored alphas the contrast contract measures. They are derived from the class names above\n   rather than restated, so a change to a state step, a tint strength or the field ladder moves the\n   measurement with it: `scripts/smoke-package.mjs` passes this model to\n   `scripts/contrast-contract.mjs`, and the same module proves every class here has a rule in the\n   published stylesheet. */\nconst recipeAlpha = (recipe: string, pattern: RegExp, label: string) => {\n  const match = recipe.match(pattern);\n  if (!match) throw new Error(`recipe alpha missing for ${label}`);\n  return Number(match[1]);\n};\nconst stateAlpha = (recipe: string, label: string) =>\n  recipeAlpha(recipe, /opacity-\\[(0?\\.\\d+)\\]/, label);\nconst fillAlpha = (recipe: string, label: string) => recipeAlpha(recipe, /\\/\\[(0?\\.\\d+)\\]/, label);\n/* A field well's canvas step: written without an alpha, the step is the opaque canvas. */\nconst wellAlpha = (recipe: string, label: string) => {\n  const match = recipe.match(/bg-sherick-canvas(?:\\/\\[(0?\\.\\d+)\\])?(?:\\s|$)/);\n  if (!match) throw new Error(`recipe alpha missing for ${label}`);\n  return match[1] === undefined ? 1 : Number(match[1]);\n};\n\nexport const recipeAlphas = {\n  state: {\n    quiet: { hover: stateAlpha(hoverQuiet, \"state.quiet.hover\"), press: stateAlpha(pressQuiet, \"state.quiet.press\") },\n    tonal: { hover: stateAlpha(hoverTonal, \"state.tonal.hover\"), press: stateAlpha(pressTonal, \"state.tonal.press\") },\n    tonalNeutral: { hover: stateAlpha(hoverTonal, \"state.tonalNeutral.hover\"), press: stateAlpha(pressTonalNeutral, \"state.tonalNeutral.press\") },\n    filled: { hover: stateAlpha(hoverFilled, \"state.filled.hover\"), press: stateAlpha(pressFilled, \"state.filled.press\") },\n    mark: { hover: stateAlpha(hoverMark, \"state.mark.hover\") },\n  },\n  tint: {\n    neutralSoft: fillAlpha(tone.soft.secondary, \"tint.neutralSoft\"),\n    neutralRest: fillAlpha(tone.tonal.secondary, \"tint.neutralRest\"),\n  },\n  field: {\n    quiet: fillAlpha(material.matteQuiet, \"field.quiet\"),\n    card: fillAlpha(material.matte, \"field.card\"),\n    groove: fillAlpha(material.matteHigh, \"field.groove\"),\n    control: wellAlpha(material.control, \"field.control\"),\n    hover: wellAlpha(state.field.hover, \"field.hover\"),\n    engaged: wellAlpha(state.field.engaged, \"field.engaged\"),\n  },\n} as const;\n\n/* A labelled field is a shrinkable column. Its explanatory copy wraps, including identifiers;\n   the input itself keeps its native single-line scrolling behavior. */\nexport const fieldLayout = \"flex min-w-0 w-full flex-col [overflow-wrap:anywhere]\";\n\n/* The messages under a field: its description or hint, and its error. One role for every field in\n   the family, so a hint reads the same under a text field, a date range and a file chooser. */\nexport const fieldMessage = {\n  description: /* @__PURE__ */ cx(\"mt-2\", type.supporting, text.medium),\n  error: /* @__PURE__ */ cx(\"mt-2\", type.supporting, tone.text.danger),\n} as const;\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CyB;AAEzB;;;;;;;;;;;;;;;AAe0E;AACnE,MAAM,SAAS,GACpB;AAEK,MAAM,cAAc,GACzB;AAEF;AACO,MAAM,oBAAoB,GAC/B;AAEF;;;;AAIuE;AAChE,MAAM,aAAa,GACxB;AAEF;;;;;AAK8D;AACvD,MAAM,eAAe,GAC1B;AAEF;AACO,MAAM,aAAa,GACxB;AAEK,MAAM,cAAc,GACzB;AAEF;;;;AAI8B;AAE9B;;;;;;;;;;;;;AAaiF;AAC1E,MAAM,SAAS,GAAG;AACvB,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,MAAM,EAAE,uBAAuB;AAC/B,IAAA,QAAQ,EAAE,yBAAyB;AACnC,IAAA,OAAO,EAAE,wBAAwB;AACjC,IAAA,QAAQ,EAAE,yBAAyB;AACnC;;AAE+B;AAC/B,IAAA,IAAI,EAAE,qBAAqB;;AAE7B;AACqD;AAC9C,MAAM,WAAW,GAAG;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BkD;AAC3C,MAAM,KAAK,GAAG;AACnB,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,GAAG,EAAE,mBAAmB;AACxB,IAAA,SAAS,EAAE,mBAAmB;AAC9B,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,UAAU,EAAE,mBAAmB;AAC/B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,MAAM,EAAE,cAAc;;AAGxB;;;;;;;;;;;;AAY2E;AACpE,MAAM,QAAQ,GAAG;AACtB,IAAA,GAAG,EAAE,4BAA4B;AACjC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,IAAI,EAAE,6BAA6B;;AAGrC;;;;;;;;;;;;AAY2F;AAC3F,MAAM,aAAa,GACjB,oGAAoG;AAE/F,MAAM,GAAG,GAAG;AACjB,IAAA,KAAK,EAAE,mCAAmC;AAC1C,IAAA,UAAU,EAAE,sCAAsC;AAClD,IAAA,MAAM,kBAAkB,EAAE,CACxB,mGAAmG,EACnG,sBAAsB,EACtB,aAAa,EACb,SAAS,CACV;;AAED,IAAA,WAAW,EAAE,kCAAkC;AAC/C,IAAA,cAAc,EAAE,0CAA0C;;AAGrD,MAAM,IAAI,GAAG;;AAElB,IAAA,GAAG,kBAAkB,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,iBAAiB,CAAC;;IAEpE,MAAM,kBAAkB,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC;AACvD;AACyE;IACzE,IAAI,EAAE,QAAQ,CAAC,IAAI;;AAGrB,MAAM,iBAAiB,GACrB,+GAA+G;AAEjH;;;;;;;;;AASyE;AAClE,MAAM,KAAK,GAAG;AACnB;;AAE2D;AAC3D,IAAA,MAAM,EAAE,gCAAgC;;AAExC,IAAA,QAAQ,EAAE,+BAA+B;AACzC;;AAE6F;IAC7F,iBAAiB;AACjB;AAC8E;AAC9E,IAAA,WAAW,EAAE,2EAA2E;AACxF;AAC2F;AAC3F,IAAA,kBAAkB,EAAE,oBAAoB;;IAExC,YAAY,kBAAkB,EAAE,CAAC,iBAAiB,EAAE,yCAAyC,CAAC;AAC9F;;AAE+D;AAC/D,IAAA,OAAO,EACL,qRAAqR;;AAEvR,IAAA,OAAO,EAAE,gBAAgB;;AAEzB,IAAA,IAAI,EAAE,aAAa;;AAEnB,IAAA,QAAQ,EAAE,6BAA6B;AACvC;;;;AAI4E;AAC5E;;;AAGoG;AACpG,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,+DAA+D;AACtE,QAAA,KAAK,EAAE,wDAAwD;;AAE/D,QAAA,WAAW,EAAE,gFAAgF;AAC7F,QAAA,OAAO,EAAE,4CAA4C;AACrD,QAAA,UAAU,EAAE,gCAAgC;AAC5C,QAAA,UAAU,EAAE,yBAAyB;AACrC,QAAA,YAAY,EAAE,mBAAmB;AACjC;;AAE8C;AAC9C,QAAA,OAAO,EAAE,sCAAsC;AAC/C,QAAA,YAAY,EAAE,4CAA4C;AAC1D,QAAA,cAAc,EAAE,sCAAsC;AACtD,QAAA,kBAAkB,EAAE,wDAAwD;AAC7E,KAAA;;AAIH;;;;;;;;;;;;;;;;;;;AAmBe;AACf,MAAM,cAAc,mBAAmB,EAAE,CACvC,gGAAgG,EAChG,gBAAgB,CACjB;AAED;;;;;;;;AAQyF;AACzF,MAAM,UAAU,GAAG,qEAAqE;AACxF,MAAM,UAAU,GAAG,qEAAqE;AACxF,MAAM,WAAW,GAAG,qEAAqE;AACzF,MAAM,UAAU,GAAG,0EAA0E;AAC7F,MAAM,UAAU,GAAG,sEAAsE;AACzF,MAAM,UAAU,GAAG,sEAAsE;AACzF;;AAE+E;AAC/E,MAAM,iBAAiB,GAAG,sEAAsE;AAChG,MAAM,WAAW,GAAG,sEAAsE;AAC1F,MAAM,UAAU,GAAG,2EAA2E;AAC9F;;;;;AAKkF;AAClF,MAAM,SAAS,GACb,+FAA+F;AAEjG;;AAE+F;AACxF,MAAM,wBAAwB,mBAAmB,EAAE,CACxD,UAAU,EACV,cAAc,EACd,4CAA4C,EAC5C,gJAAgJ,EAChJ,iJAAiJ;AAG5I,MAAM,UAAU,GAAG;;AAExB,IAAA,KAAK,kBAAkB,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,4CAA4C,EAAE,UAAU,EAAE,UAAU,CAAC;AAC3H;;AAEyE;AACzE,IAAA,KAAK,kBAAkB,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,4CAA4C,EAAE,UAAU,EAAE,UAAU,CAAC;;AAE3H,IAAA,YAAY,kBAAkB,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,4CAA4C,EAAE,UAAU,EAAE,iBAAiB,CAAC;AACzI;AACoF;AACpF,IAAA,MAAM,kBAAkB,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,4CAA4C,EAAE,WAAW,EAAE,WAAW,CAAC;AAC9H;AAC2D;AAC3D,IAAA,KAAK,kBAAkB,EAAE,CAAC,cAAc,EAAE,4CAA4C,EAAE,UAAU,EAAE,UAAU,CAAC;AAC/G;AAC6F;IAC7F,IAAI,kBAAkB,EAAE,CAAC,cAAc,EAAE,4CAA4C,EAAE,SAAS,CAAC;AACjG;;;;;;;;AAQyD;AACzD,IAAA,SAAS,EAAE,0CAA0C;;AAGvD;;;;;AAKuB;AAChB,MAAM,OAAO,GAClB;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuC0F;AACnF,MAAM,QAAQ,GAAG;AACtB,IAAA,MAAM,EAAE,oCAAoC;AAC5C,IAAA,UAAU,EAAE,4CAA4C;AACxD,IAAA,KAAK,EAAE,4CAA4C;AACnD,IAAA,SAAS,EAAE,iDAAiD;AAC5D,IAAA,OAAO,EAAE,6EAA6E;AACtF;;;;;;AAMgF;AAChF,IAAA,YAAY,EAAE,0EAA0E;AACxF,IAAA,MAAM,EAAE,0CAA0C;AAClD,IAAA,OAAO,EACL,gPAAgP;AAClP,IAAA,YAAY,EACV,8QAA8Q;AAChR,IAAA,WAAW,EACT,wQAAwQ;;AAE5Q;AACO,MAAM,WAAW,GAAG;AAC3B;AACO,MAAM,UAAU,GAAG;AAE1B;;;;;;;;;AASkF;AAC3E,MAAM,IAAI,GAAG;AAClB,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,MAAM,EAAE,qCAAqC;AAC7C,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA;AACD,IAAA,UAAU,EAAE,4BAA4B;AACxC,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,KAAK,EAAE,mDAAmD;AAC1D,IAAA,OAAO,EAAE,oDAAoD;AAC7D,IAAA,OAAO,EAAE,cAAc;;AAGzB;;;;;;;AAO2C;AACpC,MAAM,OAAO,GAAG;AACrB,IAAA,OAAO,kBAAkB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAC7D,IAAA,MAAM,kBAAkB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;AAC3D,IAAA,SAAS,kBAAkB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;;AAEjE,IAAA,MAAM,EAAE,mBAAmB;AAC3B;;;;;;AAM4F;AAC5F,IAAA,IAAI,EAAE,kBAAkB;;AAG1B;;;;AAI4B;AACrB,MAAM,QAAQ,GAAG;AACtB,IAAA,OAAO,EAAE,4EAA4E;AACrF,IAAA,OAAO,EAAE,wEAAwE;AACjF,IAAA,MAAM,EAAE,wEAAwE;AAChF,IAAA,SAAS,EAAE,wEAAwE;;AAGrF;;;;;;;;;;AAUiB;AACV,MAAM,QAAQ,GAAG;AACtB,IAAA,KAAK,EAAE,MAAM;;AAEb,IAAA,YAAY,EAAE,QAAQ;;AAGxB;;;;;;;AAOsD;AAC/C,MAAM,OAAO,GAAG;;AAErB,IAAA,KAAK,kBAAkB,EAAE,CAAC,eAAe,EAAE,QAAQ,CAAC,KAAK,EAAE,+DAA+D,CAAC;AAC3H;;;;AAIgB;AAChB,IAAA,KAAK,kBAAkB,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC;AAC9E;;;;AAIwD;AACxD,IAAA,IAAI,kBAAkB,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC;;AAE7E,IAAA,OAAO,kBAAkB,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,YAAY,EAAE,SAAS,CAAC,QAAQ,CAAC;AACjF;;;;AAIsC;AACtC,IAAA,KAAK,kBAAkB,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC;AAChF;;;AAGuC;AACvC,IAAA,MAAM,kBAAkB,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC;AACtF;;;;;AAK6E;AAC7E,IAAA,KAAK,kBAAkB,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC;;AAGlF;;;;;;;AAOoG;AAC7F,MAAM,IAAI,GAAG;AAClB,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,MAAM,EAAE,wBAAwB;;AAGlC;;;AAGkE;AAC3D,MAAM,MAAM,GAAG;;AAEpB,IAAA,IAAI,EAAE,uBAAuB;;AAE7B,IAAA,IAAI,EAAE,mBAAmB;;AAG3B;;;;;;;;;;;;;;;;;;;AAmB0C;AACnC,MAAM,IAAI,GAAG;AAClB,IAAA,KAAK,EAAE,gFAAgF;AACvF;;;;;;;;;;AAU2F;AAC3F,IAAA,MAAM,kBAAkB,EAAE,CACxB,kFAAkF,EAClF,IAAI,CAAC,OAAO,CAAC,MAAM,EACnB,KAAK,CAAC,OAAO,EACb,cAAc,EACd,cAAc,EACd,IAAI,CAAC,IAAI,EACT,UAAU,CAAC,KAAK,EAChB,UAAU,CAAC,SAAS,EACpB,cAAc,EACd,KAAK,CAAC,iBAAiB,CACxB;AACD;;;;;AAKmG;AACnG,IAAA,UAAU,kBAAkB,EAAE,CAAC,4BAA4B,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC;AACvF;;;AAGwB;AACxB,IAAA,OAAO,kBAAkB,EAAE,CACzB,kEAAkE,EAClE,IAAI,CAAC,OAAO,CAAC,OAAO,EACpB,KAAK,CAAC,GAAG,EACT,cAAc,EACd,cAAc,EACd,IAAI,CAAC,IAAI,EACT,UAAU,CAAC,KAAK,EAChB,UAAU,CAAC,SAAS,EACpB,cAAc,EACd,KAAK,CAAC,iBAAiB,CACxB;;AAGH;;;;;AAKqD;AAC9C,MAAM,UAAU,GAAG;AACxB;;;;AAIqF;AACrF,IAAA,OAAO,kBAAkB,EAAE,CACzB,gCAAgC,EAChC,IAAI,CAAC,MAAM,EACX,KAAK,CAAC,OAAO,CACd;AACD,IAAA,KAAK,kBAAkB,EAAE,CAAC,2FAA2F,EAAE,IAAI,CAAC,MAAM,EAAE,cAAc,CAAC;;AAGrJ;;;;;;;;;;;AAW4B;AACrB,MAAM,IAAI,GAAG;AAClB,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,sBAAsB;AAC/B,QAAA,SAAS,EAAE,kBAAkB;AAC7B,QAAA,MAAM,EAAE,qBAAqB;AAC7B,QAAA,OAAO,EAAE,sBAAsB;AAC/B,QAAA,OAAO,EAAE,sBAAsB;AAChC,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,8CAA8C;AACvD,QAAA,SAAS,EAAE,iDAAiD;AAC5D,QAAA,MAAM,EAAE,4CAA4C;AACpD,QAAA,OAAO,EAAE,8CAA8C;AACvD,QAAA,OAAO,EAAE,8CAA8C;AACxD,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,yBAAyB;AAClC,QAAA,SAAS,EAAE,gCAAgC;AAC3C,QAAA,MAAM,EAAE,wBAAwB;AAChC,QAAA,OAAO,EAAE,yBAAyB;AAClC,QAAA,OAAO,EAAE,yBAAyB;AACnC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,8CAA8C;AACvD,QAAA,SAAS,EAAE,iDAAiD;AAC5D,QAAA,MAAM,EAAE,6CAA6C;AACrD,QAAA,OAAO,EAAE,8CAA8C;AACvD,QAAA,OAAO,EAAE,8CAA8C;AACxD,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,mDAAmD;AAC5D,QAAA,SAAS,EAAE,0CAA0C;AACrD,QAAA,MAAM,EAAE,0CAA0C;AAClD,QAAA,OAAO,EAAE,4CAA4C;AACrD,QAAA,OAAO,EAAE,4CAA4C;AACtD,KAAA;AACD;;;;AAI0C;AAC1C,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,6FAA6F;AACtG,QAAA,SAAS,EAAE,oFAAoF;AAC/F,QAAA,MAAM,EAAE,oFAAoF;AAC5F,QAAA,OAAO,EAAE,sFAAsF;AAC/F,QAAA,OAAO,EAAE,sFAAsF;AAChG,KAAA;;AAGH;;;AAGuE;AAChE,MAAM,kBAAkB,GAAG;AAElC;;;;AAIwE;AACxE;;AAEyF;AAClF,MAAM,oBAAoB,GAC/B;AAEF;;;AAGkG;AAC3F,MAAM,uBAAuB,GAAG;AAEhC,MAAM,UAAU,GAAG;AACxB,IAAA,OAAO,kBAAkB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,QAAQ,EAAE,cAAc,CAAC;AAC3E;;;AAGsB;AACtB,IAAA,WAAW,kBAAkB,EAAE,CAC7B,UAAU,EACV,SAAS,CAAC,QAAQ,EAClB,8FAA8F,EAC9F,cAAc,CACf;AACD;;AAEmE;AACnE,IAAA,IAAI,kBAAkB,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC;AACzD;;;;;;;;;;AAUiG;AACjG,IAAA,IAAI,kBAAkB,EAAE,CACtB,yBAAyB,EACzB,IAAI,CAAC,MAAM,EACX,yIAAyI,EACzI,0BAA0B,EAC1B,wGAAwG,EACxG,SAAS,CACV;AACD;;AAEgG;AAChG,IAAA,QAAQ,EACN,2KAA2K;AAC7K,IAAA,aAAa,EACX,mMAAmM;AACrM;AAC6F;AAC7F,IAAA,KAAK,EAAE,YAAY;;AAGrB;;;;AAI2B;AAC3B,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,OAAe,EAAE,KAAa,KAAI;IACrE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;AACnC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,4BAA4B,KAAK,CAAA,CAAE,CAAC;AAChE,IAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC;AACD,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,KAAa,KAC/C,WAAW,CAAC,MAAM,EAAE,uBAAuB,EAAE,KAAK,CAAC;AACrD,MAAM,SAAS,GAAG,CAAC,MAAc,EAAE,KAAa,KAAK,WAAW,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC;AAClG;AACA,MAAM,SAAS,GAAG,CAAC,MAAc,EAAE,KAAa,KAAI;IAClD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,+CAA+C,CAAC;AAC3E,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,4BAA4B,KAAK,CAAA,CAAE,CAAC;IAChE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACtD,CAAC;AAEM,MAAM,YAAY,GAAG;AAC1B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAE;AACjH,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAE;AACjH,QAAA,YAAY,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,0BAA0B,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,EAAE,0BAA0B,CAAC,EAAE;AAC7I,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EAAE;QACtH,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAAE;AAC3D,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,kBAAkB,CAAC;QAC/D,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,kBAAkB,CAAC;AACjE,KAAA;AACD,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC;QACpD,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;QAC7C,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;QACrD,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;QACrD,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC;QAClD,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC;AACzD,KAAA;;AAGH;AACuE;AAChE,MAAM,WAAW,GAAG;AAE3B;AAC+F;AACxF,MAAM,YAAY,GAAG;AAC1B,IAAA,WAAW,kBAAkB,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC;AACrE,IAAA,KAAK,kBAAkB,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;;"}

package/dist/esm/dev.js

@@ -1,4 +1,4 @@
-export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type } from './components/ui.common.js';
+export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type } from './components/ui.common.js';
 export { motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide } from './components/ui.motion.js';
 export { cn } from './libs/utils.js';
 //# sourceMappingURL=dev.js.map

package/dist/esm/index.js

@@ -9,6 +9,7 @@ export { default as Breadcrumb } from './components/Breadcrumb.js';
 export { default as Calendar } from './components/Calendar.js';
 export { Card } from './components/Card.js';
 export { Checkbox } from './components/Checkbox.js';
+export { CheckboxGroup } from './components/CheckboxGroup.js';
 export { Chip } from './components/Chip.js';
 export { ChipGroup } from './components/ChipGroup.js';
 export { default as Combobox } from './components/Combobox.js';
@@ -21,6 +22,7 @@ export { default as Divider } from './components/Divider.js';
 export { default as Select } from './components/Select.js';
 export { Field } from './components/Field.js';
 export { default as FileUpload } from './components/FileUpload.js';
+export { Form } from './components/Form.js';
 export { default as IconButton } from './components/IconButton.js';
 export { default as Input } from './components/Input.js';
 export { default as Dialog } from './components/Dialog.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}