@proyecto-viviana/ui 0.5.0 → 0.6.1

package/dist/_chunk/numberfield.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberfield.jsx","names":[],"sources":["../../src/icon/ui-icons/Add.tsx","../../src/numberfield/index.tsx"],"sourcesContent":["/*\n * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-\n * optimized — pixel parity requires the shipped path data, not the raw\n * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)\n * fall back to the vendored sources.\n * Do not edit by hand.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createUIIcon } from \"../spectrum-icon\";\n\nexport type AddProps = JSX.SvgSVGAttributes<SVGSVGElement> & {\n  size?: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\n};\n\nfunction Add_XSSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, width: _width, height: _height, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      {...rest}\n      class={className}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"M6.625 3.078H4.922V1.375a.922.922 0 0 0-1.844 0v1.703H1.375a.922.922 0 0 0 0 1.844h1.703v1.703a.922.922 0 0 0 1.844 0V4.922h1.703a.922.922 0 0 0 0-1.844\"\n      />\n    </svg>\n  );\n}\n\nfunction Add_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, width: _width, height: _height, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      {...rest}\n      class={className}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"M7 3.04H4.96V1a.96.96 0 1 0-1.92 0v2.04H1a.96.96 0 1 0 0 1.92h2.04V7a.96.96 0 1 0 1.92 0V4.96H7a.96.96 0 1 0 0-1.92\"\n      />\n    </svg>\n  );\n}\n\nfunction Add_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, width: _width, height: _height, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      {...rest}\n      class={className}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"M8.5 4H6V1.5a1 1 0 1 0-2 0V4H1.5a1 1 0 1 0 0 2H4v2.5a1 1 0 1 0 2 0V6h2.5a1 1 0 1 0 0-2\"\n      />\n    </svg>\n  );\n}\n\nfunction Add_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, width: _width, height: _height, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      {...rest}\n      class={className}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"M10.021 4.959h-2.98v-2.98a1.04 1.04 0 1 0-2.082 0v2.98h-2.98a1.04 1.04 0 1 0 0 2.082h2.98v2.98a1.04 1.04 0 1 0 2.082 0v-2.98h2.98a1.04 1.04 0 1 0 0-2.082\"\n      />\n    </svg>\n  );\n}\n\nfunction Add_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, width: _width, height: _height, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      {...rest}\n      class={className}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"M10.61 4.915H7.085V1.39a1.084 1.084 0 1 0-2.17 0v3.525H1.39a1.084 1.084 0 1 0 0 2.17h3.525v3.525a1.084 1.084 0 1 0 2.17 0V7.085h3.525a1.084 1.084 0 1 0 0-2.17\"\n      />\n    </svg>\n  );\n}\n\nconst Add_XS = createUIIcon(Add_XSSvg);\nconst Add_S = createUIIcon(Add_SSvg);\nconst Add_M = createUIIcon(Add_MSvg);\nconst Add_L = createUIIcon(Add_LSvg);\nconst Add_XL = createUIIcon(Add_XLSvg);\n\nexport default function Add(props: AddProps): JSX.Element {\n  const { size = \"M\", class: className, width: _width, height: _height, ...rest } = props;\n  switch (size) {\n    case \"XS\":\n      return <Add_XS {...rest} class={className} />;\n    case \"S\":\n      return <Add_S {...rest} class={className} />;\n    case \"M\":\n      return <Add_M {...rest} class={className} />;\n    case \"L\":\n      return <Add_L {...rest} class={className} />;\n    case \"XL\":\n      return <Add_XL {...rest} class={className} />;\n    default:\n      return <Add_M {...rest} class={className} />;\n  }\n}\n\nexport const AddIcon = Add;\n","// @ts-nocheck\nimport {\n  type JSX,\n  createContext,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport {\n  NumberField as HeadlessNumberField,\n  NumberFieldLabel as HeadlessNumberFieldLabel,\n  NumberFieldGroup as HeadlessNumberFieldGroup,\n  NumberFieldInput as HeadlessNumberFieldInput,\n  NumberFieldIncrementButton as HeadlessNumberFieldIncrementButton,\n  NumberFieldDecrementButton as HeadlessNumberFieldDecrementButton,\n  NumberFieldContext as HeadlessNumberFieldContext,\n  type NumberFieldProps as HeadlessNumberFieldProps,\n  type NumberFieldRenderProps,\n  type NumberFieldInputRenderProps,\n  type NumberFieldButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, space, style } from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport AddIcon from \"../icon/ui-icons/Add\";\nimport DashIcon from \"../icon/ui-icons/Dash\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport { useProviderProps } from \"../provider\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type NumberFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype S2NumberFieldSize = NumberFieldSize;\nexport type NumberFieldLabelPosition = \"top\" | \"side\";\nexport type NumberFieldLabelAlign = \"start\" | \"end\";\nexport type NumberFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface NumberFieldProps extends Omit<\n  HeadlessNumberFieldProps,\n  \"class\" | \"style\" | \"children\" | \"label\"\n> {\n  /** The size of the number field. */\n  size?: NumberFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label text for the input. */\n  label?: JSX.Element;\n  /** Description text shown below the input. */\n  description?: JSX.Element;\n  /** Error message shown when invalid. */\n  errorMessage?: JSX.Element;\n  /** Whether to hide the stepper buttons. */\n  hideStepper?: boolean;\n  /** Position of the label relative to the input. */\n  labelPosition?: NumberFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: NumberFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: NumberFieldNecessityIndicator;\n  /** An icon or text rendered before the input. */\n  prefix?: JSX.Element;\n}\n\nexport const NumberFieldContext = createContext<SpectrumContextValue<NumberFieldProps>>(null);\n\ninterface NumberFieldStyleProps extends NumberFieldRenderProps {\n  size?: S2NumberFieldSize;\n  labelPosition?: NumberFieldLabelPosition;\n  labelAlign?: NumberFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStepperHidden?: boolean;\n  isInForm?: boolean;\n}\n\nconst numberFieldRoot = style<NumberFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst numberFieldLabelWrapper = style<NumberFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst numberFieldLabel = style<NumberFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst numberFieldGroup = style<NumberFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  paddingStart: \"edge-to-text\",\n  paddingEnd: {\n    default: 0,\n    isStepperHidden: \"edge-to-text\",\n  },\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst numberFieldInput = style({\n  padding: 0,\n  backgroundColor: \"transparent\",\n  color: {\n    default: \"inherit\",\n    \"::placeholder\": {\n      default: \"gray-600\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  fontFamily: \"inherit\",\n  fontSize: \"inherit\",\n  fontWeight: \"inherit\",\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  width: \"full\",\n  outlineStyle: \"none\",\n  borderStyle: \"none\",\n  // Upstream S2 NumberField renders the shared `<Input>` from `Field.tsx`, whose style\n  // ends in `truncate: true` (→ overflow:hidden; text-overflow:ellipsis; white-space:nowrap)\n  // — NOT `textAlign: 'start'`. The hardcoded `textAlign` was a self-inflicted divergence\n  // that dropped truncation; reverted to `truncate` to match the shared Input byte-for-byte.\n  truncate: true,\n});\n\nconst stepperContainer = style<NumberFieldStyleProps>({\n  display: \"flex\",\n  flexDirection: \"row\",\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8,\n    },\n  },\n  marginEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6),\n    },\n  },\n});\n\nconst inputButton = style<\n  NumberFieldButtonRenderProps & { size?: S2NumberFieldSize; type: \"decrement\" | \"increment\" }\n>({\n  ...controlBorderRadius(\"sm\"),\n  display: \"flex\",\n  outlineStyle: \"none\",\n  textAlign: \"center\",\n  borderStyle: \"none\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32,\n    },\n  },\n  height: \"auto\",\n  marginStart: {\n    default: \"text-to-control\",\n    type: {\n      increment: 0,\n    },\n  },\n  aspectRatio: \"square\",\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: \"default\",\n    forcedColors: \"none\",\n  },\n  backgroundColor: {\n    default: baseColor(\"gray-100\"),\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isHovered: \"Highlight\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonFace\",\n    },\n  },\n  cursor: \"default\",\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst helpTextStyles = style<NumberFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  // Faithful to upstream `helpTextStyles` (S2 Field.tsx) which uses `font: controlFont()`\n  // — the full font shorthand (family, size, weight, line-height), not a bare fontSize\n  // map. The prior fontSize-only map left family/weight/line-height to cascade, producing\n  // a subpixel help-text rendering divergence (D3) vs React. Mirrors green `textFieldInput`\n  // helpTextStyles.\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\n// Upstream S2 renders help text via the shared `<HelpText>`, whose description is a\n// `<Text slot=\"description\">` (a `<span>`), NOT a `<p>`: a `<p>` carries the UA\n// `margin` the hand-roll then had to zero out (see `helpTextStyles` — upstream's has\n// none), and an implicit `paragraph` role that a `<span>` does not. Reverted to match.\nfunction NumberFieldDescription(props: {\n  class?: string;\n  children?: JSX.Element;\n}): JSX.Element | null {\n  const context = useContext(HeadlessNumberFieldContext);\n  if (!context?.descriptionProps) return null;\n  const descriptionProps = () => {\n    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <span {...descriptionProps()} slot=\"description\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\n// Upstream S2's `<HelpText>` renders the error message via `<FieldError>` →\n// `<Text slot=\"errorMessage\">` (a `<span>`), not a `<p>`.\nfunction NumberFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessNumberFieldContext);\n  if (!context?.errorMessageProps) return null;\n  const errorMessageProps = () => {\n    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <span {...errorMessageProps()} slot=\"errorMessage\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nfunction normalizeNumberFieldSize(size: NumberFieldSize | undefined): S2NumberFieldSize {\n  return size ?? \"M\";\n}\n\nfunction focusFieldInput(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n\n  if (target?.closest(\"button,input,textarea,[role='button']\")) {\n    return;\n  }\n\n  event.preventDefault();\n  event.currentTarget.querySelector<HTMLElement>(\"input\")?.focus();\n}\n\nfunction requiredIconStyle(size: S2NumberFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"L\" || size === \"XL\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nfunction buttonPressScaleStyle(\n  element: HTMLDivElement | undefined,\n  renderProps: NumberFieldButtonRenderProps,\n): JSX.CSSProperties {\n  const pressStyle = { \"will-change\": \"transform\" } as JSX.CSSProperties;\n\n  if (renderProps.isPressed && element) {\n    const { width, height } = element.getBoundingClientRect();\n    pressStyle.transform = `perspective(${Math.max(height, width / 3, 24)}px) translate3d(0, 0, -2px)`;\n  }\n\n  return pressStyle;\n}\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport function NumberField(props: NumberFieldProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(NumberFieldContext), props.slot);\n  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"placeholder\",\n    \"description\",\n    \"errorMessage\",\n    \"hideStepper\",\n    \"onInput\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"prefix\",\n  ]);\n  const prefixId = createUniqueId();\n  const size = () => normalizeNumberFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  let decrementButtonElement: HTMLDivElement | undefined;\n  let incrementButtonElement: HTMLDivElement | undefined;\n\n  // Match upstream's root style INVOCATION args exactly: S2 `NumberField.tsx` passes\n  // only `{ isInForm: !!formContext, labelPosition, size }` to `style(field(), …)(…)`\n  // — NOT the render-prop bag. `isDisabled`/`isFocused`/… are threaded DOWN to the\n  // FieldGroup/label/help text, not applied to the field grid. The grid's `field()` has\n  // no such conditions today, but spreading `…renderProps` here would silently light any\n  // future one; keep the arg set faithful (same lesson as SearchField's root-color fix).\n  const rootClassName = (_renderProps: NumberFieldRenderProps) =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      numberFieldRoot(\n        {\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm: false,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    numberFieldLabelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: NumberFieldRenderProps) =>\n    numberFieldLabel({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n    });\n\n  const groupClass = (renderProps: NumberFieldRenderProps) =>\n    numberFieldGroup({\n      ...renderProps,\n      size: size(),\n      isFocusWithin: isFocusWithin(),\n      isStepperHidden: local.hideStepper,\n    });\n\n  const stepperClass = () => stepperContainer({ size: size() });\n\n  const inputClass = (_renderProps: NumberFieldInputRenderProps) => numberFieldInput;\n\n  const buttonClass =\n    (type: \"decrement\" | \"increment\") => (renderProps: NumberFieldButtonRenderProps) =>\n      inputButton({\n        ...renderProps,\n        size: size(),\n        type,\n      });\n\n  const helpClass = (renderProps: NumberFieldRenderProps, isInvalid: boolean) =>\n    helpTextStyles({\n      ...renderProps,\n      size: size(),\n      isInvalid,\n    });\n\n  return (\n    <HeadlessNumberField\n      {...headlessProps}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n      children={(renderProps: NumberFieldRenderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <HeadlessNumberFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"label\"}\n                      fallback={\n                        <AsteriskIcon\n                          aria-hidden=\"true\"\n                          size=\"XS\"\n                          class={requiredIcon}\n                          style={requiredIconStyle(size())}\n                        />\n                      }\n                    >\n                      (required)\n                    </Show>\n                  </span>\n                </Show>\n              </HeadlessNumberFieldLabel>\n            </div>\n          </Show>\n\n          <HeadlessNumberFieldGroup\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setIsFocusWithin(false);\n              }\n            }}\n            data-focused={isFocusWithin() ? \"true\" : undefined}\n            data-disabled={renderProps.isDisabled ? \"true\" : undefined}\n            data-invalid={renderProps.isInvalid ? \"true\" : undefined}\n          >\n            <Show\n              when={local.prefix}\n              fallback={\n                <HeadlessNumberFieldInput\n                  class={inputClass}\n                  placeholder={local.placeholder}\n                  onInput={local.onInput}\n                />\n              }\n            >\n              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>\n              <PrefixInputProvider context={HeadlessNumberFieldContext} prefixId={prefixId}>\n                <HeadlessNumberFieldInput\n                  class={inputClass}\n                  placeholder={local.placeholder}\n                  onInput={local.onInput}\n                />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={renderProps.isInvalid}>\n              <AlertTriangleIcon aria-hidden=\"true\" styles={fieldErrorIcon} />\n            </Show>\n            <Show when={!local.hideStepper}>\n              <div class={stepperClass()}>\n                <HeadlessNumberFieldDecrementButton\n                  ref={decrementButtonElement}\n                  class={buttonClass(\"decrement\")}\n                  style={(buttonRenderProps: NumberFieldButtonRenderProps) =>\n                    buttonPressScaleStyle(decrementButtonElement, buttonRenderProps)\n                  }\n                >\n                  <DashIcon size={size()} class={iconStyles} />\n                </HeadlessNumberFieldDecrementButton>\n                <HeadlessNumberFieldIncrementButton\n                  ref={incrementButtonElement}\n                  class={buttonClass(\"increment\")}\n                  style={(buttonRenderProps: NumberFieldButtonRenderProps) =>\n                    buttonPressScaleStyle(incrementButtonElement, buttonRenderProps)\n                  }\n                >\n                  <AddIcon size={size()} class={iconStyles} />\n                </HeadlessNumberFieldIncrementButton>\n              </div>\n            </Show>\n          </HeadlessNumberFieldGroup>\n\n          <Show when={local.description && !renderProps.isInvalid}>\n            <NumberFieldDescription class={helpClass(renderProps, false)}>\n              {local.description}\n            </NumberFieldDescription>\n          </Show>\n          <Show when={local.errorMessage && renderProps.isInvalid}>\n            <NumberFieldError class={helpClass(renderProps, true)}>\n              {local.errorMessage}\n            </NumberFieldError>\n          </Show>\n        </>\n      )}\n    />\n  );\n}\n\nexport type { NumberFieldState } from \"@proyecto-viviana/solid-stately\";\n"],"mappings":"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"}

package/dist/_chunk/prefix.jsx

@@ -0,0 +1,72 @@
+import { CenterBaseline } from "../icon/center-baseline.jsx";
+import { t as IconContext } from "./spectrum-icon.jsx";
+import { useContext } from "solid-js";
+//#region src/field/prefix.tsx
+/**
+* Shared field `prefix` slot.
+*
+* Port of the `prefix` slot on upstream S2's `FieldGroup`
+* (`@react-spectrum/s2/src/Field.tsx`). Upstream centralizes the prefix in a
+* single shared `FieldGroup`; we compose a field group per component, so the
+* prefix is threaded into each field (TextField, ColorField, NumberField,
+* ComboBox) through these shared primitives instead.
+*
+* Two pieces, matching upstream:
+*  - `FieldPrefix` renders the prefix node (text or icon) before the input with
+*    the upstream styling (`gray-600`, `flex-shrink: 0`, `margin-end:
+*    text-to-visual`, icon sized to `fontRelative(20)`).
+*  - `PrefixInputProvider` associates the prefix with the input by appending the
+*    prefix's id to the input's `aria-labelledby`, mirroring upstream's
+*    `InputContext.Provider value={{...ctx, 'aria-labelledby': ...}}`.
+*/ const prefixStyles = " pQKeKoe151 _va151 Ht151 Hsu151";
+const prefixIconContext = { styles: " ZuUmpre151 FuUmpre151 -_8sjo0b-t5ZbAob151" };
+/** Renders a field prefix node (text or icon) with the upstream prefix styling. */ function FieldPrefix(props) {
+	return <IconContext.Provider value={prefixIconContext}>
+      <CenterBaseline id={props.id} styles={prefixStyles}>
+        {props.children}
+      </CenterBaseline>
+    </IconContext.Provider>;
+}
+function appendLabelledBy(inputProps, prefixId) {
+	const base = inputProps?.["aria-labelledby"];
+	const labelledBy = typeof base === "string" && base.length > 0 ? `${base} ${prefixId}` : prefixId;
+	return {
+		...inputProps,
+		"aria-labelledby": labelledBy
+	};
+}
+/**
+* Returns a proxy over a field context that delegates every property to the
+* original value and overrides only `inputProps`, appending `prefixId` to its
+* `aria-labelledby`. The delegation keeps the underlying getters live, so the
+* input stays reactive. `inputPropsIsFunction` handles ComboBox's function-form
+* `inputProps` (Text/Color/NumberField expose it as an object).
+*
+* `prefixId` may carry several space-separated slot ids (prefix + suffix) and
+* may be a thunk — resolved on each `inputProps` access — so a field whose
+* adornments appear or disappear after mount keeps its `aria-labelledby` live.
+*/ function withPrefixLabelledBy(context, prefixId, inputPropsIsFunction = false) {
+	if (!context) return context;
+	const resolveId = () => typeof prefixId === "function" ? prefixId() : prefixId;
+	return new Proxy(context, { get(target, property, receiver) {
+		if (property === "inputProps") {
+			if (inputPropsIsFunction) return () => {
+				return appendLabelledBy(Reflect.get(target, property, target)(), resolveId());
+			};
+			return appendLabelledBy(Reflect.get(target, property, target), resolveId());
+		}
+		return Reflect.get(target, property, receiver);
+	} });
+}
+/**
+* Wraps a field input so its `aria-labelledby` is extended to include the prefix
+* id. Reads the nearest field context, augments only `inputProps`, and re-provides
+* the augmented value to the input.
+*/ function PrefixInputProvider(props) {
+	const value = withPrefixLabelledBy(useContext(props.context), () => props.prefixId, props.inputPropsIsFunction);
+	return <props.context.Provider value={value}>{props.children}</props.context.Provider>;
+}
+//#endregion
+export { PrefixInputProvider as n, FieldPrefix as t };
+
+//# sourceMappingURL=prefix.jsx.map

package/dist/_chunk/prefix.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefix.jsx","names":[],"sources":["../../src/field/prefix.tsx"],"sourcesContent":["/**\n * Shared field `prefix` slot.\n *\n * Port of the `prefix` slot on upstream S2's `FieldGroup`\n * (`@react-spectrum/s2/src/Field.tsx`). Upstream centralizes the prefix in a\n * single shared `FieldGroup`; we compose a field group per component, so the\n * prefix is threaded into each field (TextField, ColorField, NumberField,\n * ComboBox) through these shared primitives instead.\n *\n * Two pieces, matching upstream:\n *  - `FieldPrefix` renders the prefix node (text or icon) before the input with\n *    the upstream styling (`gray-600`, `flex-shrink: 0`, `margin-end:\n *    text-to-visual`, icon sized to `fontRelative(20)`).\n *  - `PrefixInputProvider` associates the prefix with the input by appending the\n *    prefix's id to the input's `aria-labelledby`, mirroring upstream's\n *    `InputContext.Provider value={{...ctx, 'aria-labelledby': ...}}`.\n */\nimport { type Context, type JSX, useContext } from \"solid-js\";\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { IconContext, type IconContextValue } from \"../icon\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\n\nconst prefixStyles = style({\n  color: \"gray-600\",\n  flexShrink: 0,\n  marginEnd: \"text-to-visual\",\n});\n\nconst prefixIconStyles = style({\n  size: fontRelative(20),\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst prefixIconContext: IconContextValue = { styles: prefixIconStyles };\n\n/** Renders a field prefix node (text or icon) with the upstream prefix styling. */\nexport function FieldPrefix(props: { id: string; children: JSX.Element }): JSX.Element {\n  return (\n    <IconContext.Provider value={prefixIconContext}>\n      <CenterBaseline id={props.id} styles={prefixStyles}>\n        {props.children}\n      </CenterBaseline>\n    </IconContext.Provider>\n  );\n}\n\nfunction appendLabelledBy(\n  inputProps: Record<string, unknown> | undefined,\n  prefixId: string,\n): Record<string, unknown> {\n  const base = inputProps?.[\"aria-labelledby\"];\n  const labelledBy = typeof base === \"string\" && base.length > 0 ? `${base} ${prefixId}` : prefixId;\n  return { ...inputProps, \"aria-labelledby\": labelledBy };\n}\n\n/**\n * Returns a proxy over a field context that delegates every property to the\n * original value and overrides only `inputProps`, appending `prefixId` to its\n * `aria-labelledby`. The delegation keeps the underlying getters live, so the\n * input stays reactive. `inputPropsIsFunction` handles ComboBox's function-form\n * `inputProps` (Text/Color/NumberField expose it as an object).\n *\n * `prefixId` may carry several space-separated slot ids (prefix + suffix) and\n * may be a thunk — resolved on each `inputProps` access — so a field whose\n * adornments appear or disappear after mount keeps its `aria-labelledby` live.\n */\nexport function withPrefixLabelledBy<T extends object>(\n  context: T | null,\n  prefixId: string | (() => string),\n  inputPropsIsFunction = false,\n): T | null {\n  if (!context) {\n    return context;\n  }\n  const resolveId = () => (typeof prefixId === \"function\" ? prefixId() : prefixId);\n  return new Proxy(context, {\n    get(target, property, receiver) {\n      if (property === \"inputProps\") {\n        if (inputPropsIsFunction) {\n          return () => {\n            const inputProps = (\n              Reflect.get(target, property, target) as () => Record<string, unknown>\n            )();\n            return appendLabelledBy(inputProps, resolveId());\n          };\n        }\n        const inputProps = Reflect.get(target, property, target) as\n          | Record<string, unknown>\n          | undefined;\n        return appendLabelledBy(inputProps, resolveId());\n      }\n      return Reflect.get(target, property, receiver);\n    },\n  });\n}\n\n/**\n * Wraps a field input so its `aria-labelledby` is extended to include the prefix\n * id. Reads the nearest field context, augments only `inputProps`, and re-provides\n * the augmented value to the input.\n */\nexport function PrefixInputProvider<T extends object>(props: {\n  context: Context<T | null>;\n  prefixId: string;\n  inputPropsIsFunction?: boolean;\n  children: JSX.Element;\n}): JSX.Element {\n  const context = useContext(props.context);\n  // `props.prefixId` is read through a thunk so a caller passing a computed id\n  // set (prefix + suffix) stays live across adornment changes.\n  const value = withPrefixLabelledBy(context, () => props.prefixId, props.inputPropsIsFunction);\n  return <props.context.Provider value={value}>{props.children}</props.context.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;GAmBA,MAAM,eAAe;4BAGrB,QAAM,6CACN;oFACe,SAAA,YAAA,OAAA;CAIf,OAAM,CAAA,YAAmB,SAAM,OAAA,mBAAA;MACzB,CAAC,eAAc,IAAG,MAAA,IAAA,QAAA,cAAA;SACnB,MAAA,SAAc;MACf,EAAI,eAAQ;IACZ,EAAA,YAAQ;AACZ;AACA,SAAE,iBAAA,YAAA,UAAA;;CAEF,MAAM,aAAiB,OAAE,SAAA,YAAqB,KAAQ,SAAA,IAAA,GAAkB,KAAA,GAAA,aAAA;;EAEpE,GAAO;EACJ,mBAAoB;CACzB;AACF;;;;;;;;;;;GAWG,SAAe,qBAAS,SAAA,UAAA,uBAAA,OAAA;CACzB,IAAM,CAAA,SACA,OAAA;CAER,MAAA,kBAAA,OAAA,aAAA,aAAA,SAAA,IAAA;6BAEE,IAAA,QAAA,UAAA,UAAA;EACU,IAAC,aAAa,cAAc;GAC5B,IAAM,sBACE,aAAM;IAEJ,OAAM,iBADF,QAAsB,IAAQ,QAAQ,UAAG,MAAS,EACpB,GAAA,UAAO,CAAA;GAC9D;GAGa,OAAS,iBADS,QAAM,IAAA,QAAY,UAAc,MAClB,GAAM,UAAU,CAAA;EAC5D;EACK,OAAS,QAAA,IAAA,QAAuB,UAAQ,QAAO;CACpD,EACA,CAAA;AACF;;;;;GAKE,SAAkB,oBAAsC,OAK1C;CAIZ,MAAM,QAAQ,qBAHA,WAAa,MAAA,OAGK,SAAY,MAAU,UAAE,MAAA,oBAAA;CACxD,OAAO,CAAA,MAAA,QAAA,SAAA,OAAA,QAAA,MAAA,SAAA,EAAA,MAAA,QAAA;AACX"}

package/dist/_chunk/runtime.jsx

@@ -0,0 +1,68 @@
+//#region src/style/runtime.ts
+const env = globalThis.process?.env ?? {};
+/**
+* Merges multiple style strings together, combining the CSS properties from each.
+* Later styles take precedence over earlier ones for the same property.
+* Useful for composing styles from multiple `style()` macro calls.
+*
+* @example
+* ```tsx
+* import {mergeStyles} from '@react-spectrum/s2';
+* import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+*
+* const baseStyles = style({padding: 8});
+* const overrideStyles = style({padding: 16, color: 'heading'});
+* const merged = mergeStyles(baseStyles, overrideStyles);
+* // merged has `padding: 16` and `color: heading`.
+* ```
+*/ function mergeStyles(...styles) {
+	let definedStyles = styles.filter(Boolean);
+	if (definedStyles.length === 1) {
+		let first = definedStyles[0];
+		if (typeof first !== "string") return first.toString();
+		return first;
+	}
+	let map = /* @__PURE__ */ new Map();
+	for (let style of definedStyles) {
+		let str = style.toString();
+		for (let [k, v] of parse(str)) map.set(k, v);
+	}
+	let res = "";
+	for (let value of map.values()) res += value;
+	return res;
+}
+function parse(s) {
+	let properties = /* @__PURE__ */ new Map();
+	let i = 0;
+	while (i < s.length) {
+		while (i < s.length && s[i] === " ") i++;
+		let start = i;
+		readValue();
+		let condition = i;
+		while (i < s.length && s[i] !== " ") readValue();
+		let property = s.slice(start, condition);
+		if (env.NODE_ENV !== "production" && property.startsWith("-macro-")) {
+			let value = s.slice(start, i);
+			properties.set(value, " " + value);
+		} else properties.set(property, (properties.get(property) || "") + " " + s.slice(start, i));
+	}
+	function readValue() {
+		if (s[i] === "-") while (i < s.length && s[i] !== " ") {
+			i++;
+			if (s[i] === "-") {
+				i++;
+				break;
+			}
+		}
+		else while (i < s.length) if (s[i] === "_") i++;
+		else {
+			i++;
+			break;
+		}
+	}
+	return properties;
+}
+//#endregion
+export { mergeStyles as t };
+
+//# sourceMappingURL=runtime.jsx.map

package/dist/_chunk/runtime.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.jsx","names":[],"sources":["../../src/style/runtime.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { StyleString } from \"./types\";\n// import {RuntimeStyleFunction, RenderProps} from './types';\n\n// Read process.env without depending on Node global types in the dts build\n// (tsconfig.build.json omits `types: [\"node\"]`) — mirrors the build-safe\n// globalThis cast already used in image/ and statuslight/.\nconst env: Record<string, string | undefined> =\n  (globalThis as typeof globalThis & { process?: { env?: Record<string, string | undefined> } })\n    .process?.env ?? {};\n\n// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379\n// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;\n// type NullToObject<T> = T extends (null | undefined) ? {} : T;\n// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;\n// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;\n// type NoInfer<T> = [T, void][T extends any ? 0 : 1];\n// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;\n// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;\n\n// Two overloads:\n// 1. If a render props type is expected based on the return type, forward that type to all arguments.\n// 2. Otherwise, infer the return type based on the arguments.\n// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;\n// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;\n// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {\n//   return (props) => {\n//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));\n//   };\n// }\n\n/**\n * Merges multiple style strings together, combining the CSS properties from each.\n * Later styles take precedence over earlier ones for the same property.\n * Useful for composing styles from multiple `style()` macro calls.\n *\n * @example\n * ```tsx\n * import {mergeStyles} from '@react-spectrum/s2';\n * import {style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const baseStyles = style({padding: 8});\n * const overrideStyles = style({padding: 16, color: 'heading'});\n * const merged = mergeStyles(baseStyles, overrideStyles);\n * // merged has `padding: 16` and `color: heading`.\n * ```\n */\nexport function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {\n  let definedStyles = styles.filter(Boolean) as StyleString[];\n  if (definedStyles.length === 1) {\n    let first = definedStyles[0];\n    if (typeof first !== \"string\") {\n      // static macro has a toString method so that we generate the style macro map for the entry\n      // it's automatically called in other places, but for our merging, we have to call it ourselves\n      return (first as StyleString).toString() as StyleString;\n    }\n    return first;\n  }\n\n  let map = new Map<string, string>();\n\n  for (let style of definedStyles) {\n    // must call toString here for the static macro\n    let str = style.toString();\n\n    for (let [k, v] of parse(str)) {\n      map.set(k, v);\n    }\n  }\n\n  let res = \"\";\n  for (let value of map.values()) {\n    res += value;\n  }\n\n  return res as StyleString;\n}\n\nfunction parse(s: string) {\n  let properties = new Map<string, string>();\n  let i = 0;\n  while (i < s.length) {\n    while (i < s.length && s[i] === \" \") {\n      i++;\n    }\n\n    let start = i;\n    readValue(); // property index\n\n    // read conditions (up to the last segment)\n    let condition = i;\n    while (i < s.length && s[i] !== \" \") {\n      readValue();\n    }\n\n    let property = s.slice(start, condition);\n    if (env.NODE_ENV !== \"production\" && property.startsWith(\"-macro-\")) {\n      let value = s.slice(start, i);\n      properties.set(value, \" \" + value);\n    } else {\n      properties.set(property, (properties.get(property) || \"\") + \" \" + s.slice(start, i));\n    }\n  }\n\n  function readValue() {\n    if (s[i] === \"-\") {\n      // the beginning and end of arbitrary values are marked with -\n      while (i < s.length && s[i] !== \" \") {\n        i++;\n        if (s[i] === \"-\") {\n          i++;\n          break;\n        }\n      }\n    } else {\n      while (i < s.length) {\n        if (s[i] === \"_\") {\n          i++;\n        } else {\n          i++;\n          break;\n        }\n      }\n    }\n  }\n\n  return properties;\n}\n"],"mappings":";AAeA,MAAG,MAA2C,WAI3C,SAAA,OAAc,CAAA;;;;;;;;;;;;;;;;GAqCd,SAAM,YAAuB,GAAC,QAA+B;CAC7D,IAAK,gBAAU,OAAY,OAAA,OAAY;CACtC,IAAE,cAAY,WAAa,GAAK;EAC/B,IAAA,QAAA,cAAA;EACH,IAAA,OAAA,UAAA,UAGI,OAAc,MAAc,SAAA;EAE1B,OAAO;CACX;CACA,IAAI,sBAAM,IAAA,IAAwB;CAClC,KAAE,IAAO,SAAS,eAAc;EAEhC,IAAO,MAAK,MAAA,SAAA;EACd,KAAA,IAAA,CAAA,GAAA,MAAA,MAAA,GAAA,GAAA,IAAA,IAAA,GAAA,CAAA;;CAIA,IAAK,MAAI;CACP,KAAG,IAAK,SAAK,IAAS,OAAK,GACvB,OAAM;CAEV,OAAK;AACT;AACA,SAAI,MAAA,GAAA;CACF,IAAA,6BAAA,IAAA,IAAA;;CAEA,OAAQ,IAAI,EAAA,QAAA;EACP,OAAI,IAAM,EAAG,UAAU,EAAE,OAAE,KACvB;;EAGH,UAAQ;;EAGR,OAAM,IAAI,EAAA,UAAQ,EAAA,OAAA,KACpB,UAAgB;EAEd,IAAI,WAAW,EAAA,MAAA,OAAA,SAAA;EACnB,IAAQ,IAAI,aAAa,gBAAY,SAAA,WAAA,SAAA,GAAA;GAChC,IAAA,QAAA,EAAA,MAAA,OAAA,CAAA;GACL,WAAA,IAAA,OAAA,MAAA,KAAA;SAEI,WAAS,IAAA,WAAA,WAAA,IAAA,QAAA,KAAA,MAAA,MAAA,EAAA,MAAA,OAAA,CAAA,CAAA;;CAGb,SAAQ,YAAY;EAChB,IAAA,EAAA,OAAa,KAEf,OAAW,IAAA,EAAA,UAAA,EAAA,OAAA,KAAA;GACb;;IAEgB;IACA;GACJ;EACV;OAEA,OAAW,IAAI,EAAA,QACjB,IAAA,EAAA,OAAA,KACF;;GAEkB;GACA;EACP;CAGT;CACA,OAAO;AACX"}

package/dist/_chunk/s2-action-button-styles.js

@@ -0,0 +1,341 @@
+/* empty css                                                                       */
+import { createContext, useContext } from "solid-js";
+//#region src/button/group-context.ts
+const ButtonGroupContext = createContext(null);
+const ActionButtonGroupContext = createContext(null);
+const ToggleButtonGroupContext = createContext(null);
+function useButtonGroupContext() {
+	return useContext(ButtonGroupContext);
+}
+function useActionButtonGroupContext() {
+	return useContext(ActionButtonGroupContext);
+}
+function useToggleButtonGroupContext() {
+	return useContext(ToggleButtonGroupContext);
+}
+//#endregion
+//#region src/button/s2-action-button-styles.ts
+const s2ActionButton = function anonymous(props, overrides) {
+	let rules = " ";
+	let minWidth = false;
+	let flexShrink = false;
+	let flexGrow = false;
+	let flexBasis = false;
+	let width = false;
+	let position = false;
+	let zIndex = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "N") minWidth = true;
+		if (p[1] === "_v") flexShrink = true;
+		if (p[1] === "_u") flexGrow = true;
+		if (p[1] === "_s") flexBasis = true;
+		if (p[1] === "Z") width = true;
+		if (p[1] === "_P") position = true;
+		if (p[1] === "_9") zIndex = true;
+		rules += p[0];
+	}
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isDisabled) rules += " pUvnvv151";
+	else if (props.isSelected) if (props.isEmphasized) rules += " px151";
+	else rules += " pLZZSrd151";
+	else if (props.isPressed) rules += " pMwyHo151";
+	else if (props.isFocusVisible) rules += " pMwyHo151";
+	else if (props.isHovered) rules += " pMwyHo151";
+	else rules += " pHKLAu151";
+	if (props.isDisabled) rules += " plc151";
+	else if (props.isSelected) rules += " ple151";
+	else rules += " plb151";
+	rules += " se151";
+	rules += " eb151";
+	rules += " _oa151";
+	rules += " Sv151";
+	rules += " SnpkAwdd151";
+	rules += " SpJYBPbd151";
+	rules += " Rv151";
+	rules += " RnpkAwdd151";
+	rules += " RpJYBPbd151";
+	if (props.size === "XL") {
+		if (!minWidth) rules += " Nl151";
+	} else if (props.size === "L") {
+		if (!minWidth) rules += " Nj151";
+	} else if (props.size === "S") {
+		if (!minWidth) rules += " Nf151";
+	} else if (props.size === "XS") {
+		if (!minWidth) rules += " Ne151";
+	} else if (!minWidth) rules += " Nk151";
+	if (props.density === "compact") {
+		rules += " od151";
+		rules += " obsmOfn151";
+	} else rules += " osmOfn151";
+	if (props.density === "compact") if (props.orientation === "vertical") {
+		rules += " nd151";
+		rules += " nbsmOfn151";
+	} else if (props.orientation === "horizontal") {
+		rules += " nd151";
+		rules += " nksmOfn151";
+	} else rules += " nd151";
+	else rules += " nsmOfn151";
+	if (props.density === "compact") if (props.orientation === "vertical") {
+		rules += " kd151";
+		rules += " kksmOfn151";
+	} else if (props.orientation === "horizontal") {
+		rules += " kd151";
+		rules += " kbsmOfn151";
+	} else rules += " kd151";
+	else rules += " ksmOfn151";
+	if (props.density === "compact") {
+		rules += " jd151";
+		rules += " jksmOfn151";
+	} else rules += " jsmOfn151";
+	rules += " _neYWWze151";
+	rules += " qc151";
+	rules += " qsd151";
+	rules += " -Qg41Lb-IAxCW0c151";
+	rules += " -Qg41Lb-jInYsbIy151";
+	rules += " -Qg41Lb-pJYBPbIy151";
+	rules += " FRuFGYc151";
+	rules += " _Ca151";
+	if (props.isInGroup) {
+		if (!flexShrink) rules += " _va151";
+	} else if (!flexShrink) rules += " _vb151";
+	if (props.isJustified) {
+		if (!flexGrow) rules += " _ub151";
+	}
+	if (props.isJustified) {
+		if (!flexBasis) rules += " _sb151";
+	}
+	if (!width) rules += " ZJ151";
+	rules += " _4c151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	rules += " _yb151";
+	if (!position) rules += " _Pc151";
+	rules += " CjpxCZ151";
+	rules += " CjInYsb2sgPTb151";
+	rules += " Cd7BehbUolIUb151";
+	rules += " DZQmDFe151";
+	rules += " DjInYsbQgYBrc151";
+	rules += " Dd7BehbQgYBrc151";
+	if (props.isSelected) if (props.isDisabled) if (props.isQuiet) rules += " g9151";
+	else rules += " gkDWoNd151";
+	else if (props.isEmphasized) if (props.isFocusVisible) rules += " gJLwrv151";
+	else if (props.isPressed) rules += " gJLwrv151";
+	else if (props.isHovered) rules += " gJLwrv151";
+	else rules += " gI9Ko6c151";
+	else if (props.isPressed) rules += " gMwyHo151";
+	else if (props.isFocusVisible) rules += " gMwyHo151";
+	else if (props.isHovered) rules += " gMwyHo151";
+	else rules += " gHKLAu151";
+	else if (props.isFocusVisible) rules += " gvHkjsd151";
+	else if (props.isPressed) rules += " gvHkjsd151";
+	else if (props.isHovered) rules += " gvHkjsd151";
+	else if (props.isQuiet) rules += " g9151";
+	else rules += " gykFHp151";
+	if (props.isSelected) if (props.isDisabled) rules += " glb151";
+	else rules += " gle151";
+	else rules += " glb151";
+	rules += " -_8sjo0b-t5ZbAob151";
+	rules += " _jf151";
+	rules += " _kb151";
+	rules += " hb151";
+	rules += " mb151";
+	rules += " lb151";
+	if (props.isDisabled) if (props.isQuiet) rules += " iA151";
+	else rules += " ifbAdGe151";
+	else if (props.isSelected) if (props.isEmphasized) if (props.isFocusVisible) rules += " iJLwrv151";
+	else if (props.isPressed) rules += " iJLwrv151";
+	else if (props.isHovered) rules += " iJLwrv151";
+	else rules += " iI9Ko6c151";
+	else if (props.isPressed) rules += " iMwyHo151";
+	else if (props.isFocusVisible) rules += " iMwyHo151";
+	else if (props.isHovered) rules += " iMwyHo151";
+	else rules += " iHKLAu151";
+	else if (props.isQuiet) rules += " iA151";
+	else rules += " irHHOgb151";
+	if (props.isDisabled) rules += " ilc151";
+	else if (props.isSelected) rules += " ild151";
+	else rules += " ila151";
+	if (props.isFocusVisible) {
+		if (!zIndex) rules += " _9d151";
+	}
+	rules += " __ca151";
+	rules += " -B5H9Ae-WXN7eQb151";
+	rules += " -B5H9Ae-d7BehbWr151";
+	rules += " -SqFa4c-ZuUmpre151";
+	rules += " -dcAs1c-ZaP94G151";
+	rules += " -dcAs1c-d7BehbZa151";
+	if (props.size === "XL") rules += " -F_-Fz151";
+	else if (props.size === "L") rules += " -F_-Fv151";
+	else if (props.size === "S") rules += " -F_-Fp151";
+	else if (props.size === "XS") rules += " -F_-Fn151";
+	else rules += " -F_-Fx151";
+	return rules;
+};
+const s2ActionButtonStaticColor = function anonymous(props, overrides) {
+	let rules = " ";
+	rules += (String(overrides || "").match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g) || []).join("");
+	if (props.isDisabled) if (props.isQuiet) rules += " iA151";
+	else rules += " ig151";
+	else if (props.isSelected) if (props.isPressed) rules += " ij151";
+	else if (props.isFocusVisible) rules += " ij151";
+	else if (props.isHovered) rules += " ij151";
+	else rules += " ii151";
+	else if (props.isQuiet) rules += " iA151";
+	else if (props.isPressed) rules += " ih151";
+	else if (props.isFocusVisible) rules += " ih151";
+	else if (props.isHovered) rules += " ih151";
+	else rules += " ig151";
+	if (props.isDisabled) rules += " ilc151";
+	else if (props.isSelected) rules += " ild151";
+	else rules += " ila151";
+	rules += " gqMFGYc151";
+	if (props.isDisabled) rules += " pi151";
+	else if (props.isSelected) rules += " ph151";
+	else rules += " pl151";
+	if (props.isDisabled) rules += " plc151";
+	else if (props.isSelected) rules += " ple151";
+	else rules += " plb151";
+	rules += " Oe151";
+	rules += " Olc151";
+	if (props.isSelected) if (props.isDisabled) if (props.isQuiet) rules += " -g_-g9151";
+	else rules += " -g_-gf151";
+	else if (props.isPressed) rules += " -g_-gj151";
+	else if (props.isFocusVisible) rules += " -g_-gj151";
+	else if (props.isHovered) rules += " -g_-gj151";
+	else rules += " -g_-gi151";
+	else if (props.isFocusVisible) rules += " -g_-gg151";
+	else if (props.isPressed) rules += " -g_-gg151";
+	else if (props.isHovered) rules += " -g_-gg151";
+	else if (props.isQuiet) rules += " -g_-g9151";
+	else rules += " -g_-gf151";
+	if (props.isSelected) if (props.isDisabled) rules += " -g_-lgb151";
+	else rules += " -g_-lge151";
+	else rules += " -g_-lgb151";
+	return rules;
+};
+const s2ActionButtonText = function anonymous(props) {
+	let rules = " ";
+	rules += " zYoLErc151";
+	rules += " yYoLErc151";
+	rules += " BYoLErc151";
+	rules += " AYoLErc151";
+	rules += " _Nc151";
+	rules += " Pc151";
+	rules += " _Yb151";
+	rules += " _7c151";
+	if (props.isProgressVisible) rules += " _6b151";
+	return rules;
+};
+const s2ToggleButtonText = " TAzEcG151 QAzEcG151 _Jb151 _Nc151 Pc151 _Yb151 _7c151";
+const s2ActionButtonPendingIndicator = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa151";
+	rules += " WF151";
+	rules += " _EF151";
+	rules += " _Zc151";
+	if (props.isProgressVisible) rules += " _6c151";
+	else rules += " _6b151";
+	return rules;
+};
+const s2ActionButtonGroup = function anonymous(props, overrides) {
+	let rules = " ";
+	rules += (String(overrides || "").match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g) || []).join("");
+	rules += " sd151";
+	if (props.orientation === "vertical") rules += " _ta151";
+	else if (props.orientation === "horizontal") rules += " _tc151";
+	if (props.density === "regular") {
+		if (props.size === "XL") rules += " Ue151";
+		else if (props.size === "L") rules += " Ue151";
+		else if (props.size === "M") rules += " Ue151";
+		else if (props.size === "S") rules += " Ub151";
+		else if (props.size === "XS") rules += " Ub151";
+	} else if (props.density === "compact") rules += " Ua151";
+	if (props.density === "regular") {
+		if (props.size === "XL") rules += " qe151";
+		else if (props.size === "L") rules += " qe151";
+		else if (props.size === "M") rules += " qe151";
+		else if (props.size === "S") rules += " qb151";
+		else if (props.size === "XS") rules += " qb151";
+	} else if (props.density === "compact") rules += " qa151";
+	return rules;
+};
+const s2ButtonGroup = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let maxWidth = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		if (p[1] === "L") maxWidth = true;
+		rules += p[0];
+	}
+	rules += " sh151";
+	if (!position) rules += " _Pc151";
+	if (!maxWidth) rules += " La151";
+	if (props.size === "XL") rules += " Ug151";
+	else if (props.size === "L") rules += " Ug151";
+	else if (props.size === "M") rules += " Ug151";
+	else if (props.size === "S") rules += " Ue151";
+	if (props.size === "XL") rules += " qg151";
+	else if (props.size === "L") rules += " qg151";
+	else if (props.size === "M") rules += " qg151";
+	else if (props.size === "S") rules += " qe151";
+	if (props.orientation === "vertical") rules += " _ta151";
+	else rules += " _tc151";
+	if (props.orientation === "vertical") if (props.align === "center") rules += " eb151";
+	else if (props.align === "end") rules += " ec151";
+	else rules += " ed151";
+	else rules += " eb151";
+	if (props.orientation === "vertical") if (props.align === "center") rules += " _Ca151";
+	else if (props.align === "end") rules += " _Cb151";
+	else rules += " _Cg151";
+	return rules;
+};
+//#endregion
+export { s2ActionButtonText as a, ActionButtonGroupContext as c, useActionButtonGroupContext as d, useButtonGroupContext as f, s2ActionButtonStaticColor as i, ButtonGroupContext as l, s2ActionButtonGroup as n, s2ButtonGroup as o, useToggleButtonGroupContext as p, s2ActionButtonPendingIndicator as r, s2ToggleButtonText as s, s2ActionButton as t, ToggleButtonGroupContext as u };
+
+//# sourceMappingURL=s2-action-button-styles.js.map

package/dist/_chunk/s2-action-button-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"s2-action-button-styles.js","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n  children?: JSX.Element;\n  orientation?: ActionButtonOrientation;\n  align?: ButtonGroupAlign;\n  size?: ButtonSize;\n  isDisabled?: boolean;\n  isHidden?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n  children?: JSX.Element;\n  size?: ActionButtonSize;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isQuiet?: boolean;\n  isJustified?: boolean;\n  isEmphasized?: boolean;\n  staticColor?: StaticColor;\n  isDisabled?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n  selectionMode?: \"single\" | \"multiple\";\n  disallowEmptySelection?: boolean;\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  disabledKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n  createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n  createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n  createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n  return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n  return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n  return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n  ActionButtonDensity,\n  ActionButtonOrientation,\n  ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocused?: boolean;\n  isFocusVisible?: boolean;\n  isDisabled?: boolean;\n  isPending?: boolean;\n  isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n  size: ActionButtonSize;\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n  isQuiet?: boolean;\n  isEmphasized?: boolean;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isJustified?: boolean;\n  isInGroup: boolean;\n}\n\nconst iconOnly =\n  \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n  \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n  \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n  default: {\n    default: \"btn-secondary\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"surface-hover\",\n  isPressed: \"surface-hover\",\n  isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n  default: {\n    default: \"transparent-overlay-100\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"transparent-overlay-200\",\n  isPressed: \"transparent-overlay-200\",\n  isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...controlStyle,\n    display: \"grid\",\n    justifyContent: \"center\",\n    flexShrink: {\n      default: 1,\n      isInGroup: 0,\n    },\n    flexGrow: {\n      isJustified: 1,\n    },\n    flexBasis: {\n      isJustified: 0,\n    },\n    /* Spectrum set action buttons a step heavier than regular buttons so they read\n     * as chrome. The Glasselated register doesn't use weight for that — it has one\n     * control weight (`--type-button` is 400) and separates chrome from action with\n     * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n     * a Button no longer looks like a different typeface. */\n    width: \"fit\",\n    userSelect: \"none\",\n    transition: \"default\",\n    forcedColorAdjust: \"none\",\n    position: \"relative\",\n    gridTemplateAreas: {\n      default: [\"icon text\"],\n      [iconOnly]: [\"icon\"],\n      [textOnly]: [\"text\"],\n    },\n    gridTemplateColumns: {\n      default: [\"auto\", \"auto\"],\n      [iconOnly]: [\"auto\"],\n      [textOnly]: [\"auto\"],\n    },\n    backgroundColor: {\n      default: defaultActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"neutral\"),\n        isEmphasized: {\n          default: lightDark(\"accent-900\", \"accent-700\"),\n          isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n        },\n        isDisabled: {\n          default: \"gray-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isSelected: {\n        default: \"gray-25\",\n        isEmphasized: \"white\",\n      },\n      isDisabled: \"disabled\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    \"--iconPrimary\": {\n      type: \"fill\",\n      value: \"currentColor\",\n    },\n    outlineColor: {\n      default: \"focus-ring\",\n      forcedColors: \"Highlight\",\n    },\n    /* Chrome buttons wear the register's 1px edge like every other button the handoff\n     * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n     * and since `control()` at the `glass` register emits no border keys either, Action,\n     * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n     *\n     * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n     * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n     * button is filled — `isSelected` in the `backgroundColor` map above declares no\n     * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n     * tracks that fill here for the same reason.\n     *\n     * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n     * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n     * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n     * so nothing here collides with them. */\n    borderStyle: \"solid\",\n    borderWidth: 1,\n    borderColor: {\n      default: {\n        default: \"border-subtle\",\n        isQuiet: \"transparent\",\n      },\n      /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n       * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n       *\n       * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n       * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n       * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n       * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n       * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n       * resolves to `{gray-800}`, so this is the same colour by a name the property\n       * accepts, and it is the same substitution `s2Button` already makes for its\n       * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n      isSelected: {\n        default: baseColor(\"gray-800\"),\n        isEmphasized: {\n          default: lightDark(\"accent-900\", \"accent-700\"),\n          isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n        },\n      },\n      isDisabled: {\n        default: \"disabled\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    borderTopStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          \":first-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    borderTopEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          \":last-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    zIndex: {\n      isFocusVisible: 2,\n    },\n    disableTapHighlight: true,\n    \"--badgeTop\": {\n      type: \"top\",\n      value: {\n        default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n        [textOnly]: 0,\n      },\n    },\n    \"--iconWidth\": {\n      type: \"width\",\n      value: fontRelative(20),\n    },\n    \"--badgePosition\": {\n      type: \"width\",\n      value: {\n        default: \"--iconWidth\",\n        [textOnly]: \"full\",\n      },\n    },\n    paddingX: {\n      default: controlStyle.paddingX,\n      [avatarOnly]: 0,\n    },\n    \"--iconMargin\": {\n      type: \"marginStart\",\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0,\n        [avatarOnly]: 0,\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n  {\n    /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n     * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n     * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n     * already does for fill, ink and focus ring below, and as `s2Button` does for its\n     * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n     * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n     * so it overrides per property rather than replacing the whole rule — which is also\n     * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n     * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n     *\n     * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n     * on the base class, so the geometry is already right and only the colour differs. */\n    borderColor: {\n      default: {\n        default: baseColor(\"transparent-overlay-300\"),\n        isQuiet: \"transparent\",\n      },\n      isSelected: baseColor(\"transparent-overlay-800\"),\n      isDisabled: {\n        default: \"transparent-overlay-300\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    backgroundColor: {\n      default: staticActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: {\n          default: \"transparent-overlay-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: \"transparent-overlay-1000\",\n      isSelected: \"auto\",\n      isDisabled: \"transparent-overlay-400\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    outlineColor: {\n      default: \"transparent-overlay-1000\",\n      forcedColors: \"Highlight\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n  gridArea: \"text\",\n  truncate: true,\n  visibility: {\n    isProgressVisible: \"hidden\",\n  },\n});\n\nexport const s2ToggleButtonText = style({\n  paddingY: \"--labelPadding\",\n  order: 1,\n  truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  visibility: {\n    default: \"hidden\",\n    isProgressVisible: \"visible\",\n  },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n  size: {\n    size: {\n      XS: 12,\n      S: 14,\n      M: 18,\n      L: 20,\n      XL: 24,\n    },\n  },\n});\n\nexport const s2ActionButtonGroup = style(\n  {\n    display: \"flex\",\n    flexDirection: {\n      orientation: {\n        horizontal: \"row\",\n        vertical: \"column\",\n      },\n    },\n    gap: {\n      density: {\n        compact: 2,\n        regular: {\n          size: {\n            XS: 4,\n            S: 4,\n            M: 8,\n            L: 8,\n            XL: 8,\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n  {\n    display: \"inline-flex\",\n    position: \"relative\",\n    // Cap the group at its container's width so an inline-flex row can actually\n    // overflow: without this the group grows to fit its buttons and the\n    // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n    // `maxWidth: 'full'`.\n    maxWidth: \"full\",\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12,\n      },\n    },\n    flexDirection: {\n      default: \"row\",\n      orientation: {\n        vertical: \"column\",\n      },\n    },\n    alignItems: {\n      default: \"center\",\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n"],"mappings":";;;AAmDA,MAAa,qBACX,cAA6D,IAAI;AACnE,MAAa,2BACX,cAAmE,IAAI;AACzE,MAAa,2BACX,cAAmE,IAAI;AAEzE,SAAgB,wBAAuE;CACrF,OAAO,WAAW,kBAAkB;AACtC;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;;;ACoBA,MAAa,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Nb,MAAa,4BAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEb,MAAa,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAQb,MAAa,qBAAA;AAMb,MAAa,iCAAA,SAAA,UAAA,OAAA;;;;;;;;;;AAuBb,MAAa,sBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;AA2Bb,MAAa,gBAAA,SAAA,UAAA,OAAA,WAAA"}