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

package/dist/_chunk/color.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"color.jsx","names":[],"sources":["../../src/color/ColorEditor.tsx","../../src/color/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport {\n  ColorEditor as HeadlessColorEditor,\n  type ColorEditorProps as HeadlessColorEditorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style\" with { type: \"macro\" };\n\nexport interface ColorEditorProps extends Omit<HeadlessColorEditorProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// ColorEditor composes several headless primitives (ColorArea, ColorSlider,\n// ColorField) plus a native format <select>, and styles them through descendant\n// selectors — the internal parts hardcode their own class names and expose no\n// per-part class hook. The single-element style() macro can't express\n// descendant/native-element targeting, so styling flows through the css() macro\n// escape hatch instead: it ships real CSS in the package bundle (same asset\n// pipeline as style()) and supports the nesting these parts need. There is no S2\n// upstream for ColorEditor; values mirror the S2 neutral palette (fixed\n// light-dark pairs, scheme-aware via the Provider's color-scheme).\nconst editorStyles = css(`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  --pv-field-bg: light-dark(#fff, #222);\n  --pv-field-border: light-dark(#d5d5d5, #3d3d3d);\n  --pv-text: light-dark(#222, #e6e6e6);\n  --pv-text-subtle: light-dark(#6b6b6b, #b9b9b9);\n  --pv-focus: light-dark(#4b75ff, #4069fd);\n\n  & label { color: var(--pv-text-subtle); }\n  & input { color: var(--pv-text); }\n\n  & .solidaria-ColorEditor-top { display: flex; flex-direction: column; gap: 8px; }\n  & .solidaria-ColorEditor-bottom { display: flex; gap: 8px; align-items: flex-end; }\n\n  /* The headless parts ship gradients and thumb positions as inline styles but\n   * carry NO dimensions — unsized they collapse to 0x0 and the editor renders\n   * as just its bottom row. Sizes mirror the standalone styled ColorArea /\n   * ColorSlider (192px surface, 24px track, 16px white-ring thumb). */\n  & .solidaria-ColorArea {\n    position: relative;\n    width: 192px;\n    height: 192px;\n    border-radius: 6px;\n    outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));\n    outline-offset: -1px;\n  }\n  & .solidaria-ColorArea-gradient {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n  }\n  & .solidaria-ColorSlider { width: 192px; }\n  & .solidaria-ColorSlider-track {\n    position: relative;\n    height: 24px;\n    border-radius: 6px;\n    outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));\n    outline-offset: -1px;\n  }\n  & .solidaria-ColorArea-thumb,\n  & .solidaria-ColorSlider-thumb {\n    width: 16px;\n    height: 16px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    outline: 1px solid rgb(0 0 0 / 0.42);\n  }\n\n  & .solidaria-ColorEditor-format {\n    height: 32px;\n    padding-inline: 8px;\n    font-size: 0.875rem;\n    border-radius: 6px;\n    border: 1px solid var(--pv-field-border);\n    background: var(--pv-field-bg);\n    color: var(--pv-text-subtle);\n    outline: none;\n  }\n  & .solidaria-ColorEditor-format:focus-visible {\n    outline: 2px solid var(--pv-focus);\n    outline-offset: 2px;\n  }\n\n  & .solidaria-ColorField-input {\n    background: var(--pv-field-bg);\n    border: 1px solid var(--pv-field-border);\n    color: var(--pv-text);\n    border-radius: 6px;\n  }\n`);\n\n/**\n * A complete color editor with area, hue slider, alpha slider,\n * color space selector, and channel fields.\n */\nexport function ColorEditor(props: ColorEditorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n\n  return (\n    <HeadlessColorEditor\n      {...headlessProps}\n      class={[editorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n","import {\n  type JSX,\n  splitProps,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  useContext,\n  Show,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { useLocale } from \"@proyecto-viviana/solidaria\";\nimport {\n  ColorSlider as HeadlessColorSlider,\n  ColorSliderLabel as HeadlessColorSliderLabel,\n  ColorSliderOutput as HeadlessColorSliderOutput,\n  ColorSliderTrack as HeadlessColorSliderTrack,\n  ColorSliderThumb as HeadlessColorSliderThumb,\n  ColorSliderContext as HeadlessColorSliderContext,\n  ColorArea as HeadlessColorArea,\n  ColorAreaThumb as HeadlessColorAreaThumb,\n  ColorAreaContext as HeadlessColorAreaContext,\n  ColorWheel as HeadlessColorWheel,\n  ColorWheelTrack as HeadlessColorWheelTrack,\n  ColorWheelThumb as HeadlessColorWheelThumb,\n  ColorWheelContext as HeadlessColorWheelContext,\n  ColorField as HeadlessColorField,\n  ColorFieldInput as HeadlessColorFieldInput,\n  ColorFieldContext as HeadlessColorFieldContext,\n  ColorSwatch as HeadlessColorSwatch,\n  ColorSwatchContext as HeadlessColorSwatchContext,\n  type ColorSliderProps as HeadlessColorSliderProps,\n  type ColorAreaProps as HeadlessColorAreaProps,\n  type ColorWheelProps as HeadlessColorWheelProps,\n  type ColorFieldProps as HeadlessColorFieldProps,\n  type ColorSwatchProps as HeadlessColorSwatchProps,\n  type ColorSliderRenderProps,\n  type ColorSliderTrackRenderProps,\n  type ColorSliderThumbRenderProps,\n  type ColorAreaRenderProps,\n  type ColorAreaThumbRenderProps,\n  type ColorWheelRenderProps,\n  type ColorWheelTrackRenderProps,\n  type ColorWheelThumbRenderProps,\n  type ColorFieldRenderProps,\n  type ColorSwatchRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type {\n  Color,\n  ColorAxes,\n  ColorChannel,\n  ColorChannelRange,\n  ColorFormat,\n  ColorSpace,\n} from \"@proyecto-viviana/solid-stately\";\nimport { normalizeColor } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { StylesProp, StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  control,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport {\n  InternalColorSwatchContext,\n  type InternalColorSwatchRounding,\n  type InternalColorSwatchSize,\n} from \"./color-swatch-internal\";\n\nexport type ColorSize = \"sm\" | \"md\" | \"lg\";\n\ninterface ColorContextValue {\n  size: ColorSize;\n}\n\nconst ColorSizeContext = createContext<ColorContextValue>({ size: \"md\" });\n\ninterface ColorSliderStyleProps extends Partial<ColorSliderRenderProps> {}\n\nconst colorSliderRoot = style<ColorSliderStyleProps>(\n  {\n    width: {\n      orientation: {\n        horizontal: 192,\n      },\n    },\n    height: {\n      orientation: {\n        vertical: 192,\n      },\n    },\n    display: {\n      orientation: {\n        horizontal: \"grid\",\n        vertical: \"block\",\n      },\n    },\n    gridTemplateColumns: [\"1fr\", \"auto\"],\n    gridTemplateAreas: [\"label output\", \"track track\"],\n    rowGap: 4,\n  },\n  getAllowedOverrides(),\n);\n\nconst colorSliderLabelWrapper = style<ColorSliderStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  cursor: {\n    default: \"default\",\n    isDisabled: \"default\",\n  },\n});\n\nconst colorSliderLabel = style<ColorSliderStyleProps>({\n  ...fieldLabel(),\n});\n\nconst colorSliderOutput = style<ColorSliderStyleProps>({\n  gridArea: \"output\",\n  font: controlFont(),\n  cursor: \"default\",\n  color: {\n    default: \"neutral-subdued\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorSliderTrack = style<ColorSliderTrackRenderProps>({\n  gridArea: \"track\",\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: 24,\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: 24,\n      vertical: \"full\",\n    },\n  },\n  borderRadius: \"default\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorSliderThumb = style<ColorSliderThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nexport interface ColorSliderProps extends Omit<\n  HeadlessColorSliderProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Spectrum-defined generated classes. */\n  styles?: StylesProp;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Deprecated legacy size prop. ColorSlider uses the Spectrum 2 fixed track size. */\n  size?: ColorSize;\n  /** Deprecated legacy value visibility prop. Spectrum 2 shows horizontal output. */\n  showValue?: boolean;\n  /** Contextual help shown next to the visible label. */\n  contextualHelp?: JSX.Element;\n}\n\n/**\n * A color slider allows users to adjust a single color channel.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorSlider\n *   channel=\"hue\"\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Hue\"\n * />\n * ```\n */\nexport function ColorSlider(props: ColorSliderProps): JSX.Element {\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"size\",\n    \"showValue\",\n    \"label\",\n    \"contextualHelp\",\n  ]);\n  const locale = useLocale();\n\n  const orientation = () => headlessProps.orientation ?? \"horizontal\";\n  const hasExplicitAriaLabel = () =>\n    Boolean(headlessProps[\"aria-label\"] || headlessProps[\"aria-labelledby\"]);\n  const hasVisibleLabel = () =>\n    orientation() === \"horizontal\" &&\n    (Boolean(local.label) || (local.label === undefined && !hasExplicitAriaLabel()));\n  const labelForAria = () => (hasVisibleLabel() ? (local.label ?? \" \") : undefined);\n  const ariaLabel = () =>\n    headlessProps[\"aria-label\"] ??\n    (orientation() === \"vertical\" && typeof local.label === \"string\" ? local.label : undefined);\n\n  return (\n    <HeadlessColorSlider\n      {...headlessProps}\n      label={labelForAria()}\n      aria-label={ariaLabel()}\n      class={(renderProps: ColorSliderRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          colorSliderRoot(renderProps, mergeStyles(local.styles)),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={() => ({\n        \"grid-template-areas\": '\"label output\" \"track track\"',\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorSliderRenderProps) => (\n        <>\n          <Show when={hasVisibleLabel()}>\n            <div class={colorSliderLabelWrapper(renderProps)} style={{ \"grid-area\": \"label\" }}>\n              <HeadlessColorSliderLabel class={colorSliderLabel(renderProps)}>\n                {local.label ??\n                  renderProps.color.getChannelName(renderProps.channel, locale().locale)}\n                <Show when={local.contextualHelp}>\n                  <span data-slot=\"contextualHelp\">{local.contextualHelp}</span>\n                </Show>\n              </HeadlessColorSliderLabel>\n            </div>\n          </Show>\n          <Show when={renderProps.orientation === \"horizontal\"}>\n            <HeadlessColorSliderOutput\n              class={colorSliderOutput(renderProps)}\n              style={{ \"grid-area\": \"output\" }}\n            />\n          </Show>\n          <ColorSliderTrack>{() => <ColorSliderThumb />}</ColorSliderTrack>\n        </>\n      )}\n    </HeadlessColorSlider>\n  );\n}\n\ninterface ColorSliderTrackProps {\n  /** The children of the track. */\n  children?: JSX.Element | ((renderProps: ColorSliderTrackRenderProps) => JSX.Element);\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The track component for a color slider.\n */\nfunction ColorSliderTrack(props: ColorSliderTrackProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n\n  return (\n    <HeadlessColorSliderTrack\n      {...headlessProps}\n      class={(renderProps: ColorSliderTrackRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorSliderTrack(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorSliderTrackRenderProps) => {\n        const background = renderProps.defaultStyle.background;\n        return {\n          \"grid-area\": \"track\",\n          background:\n            renderProps.isDisabled || !background\n              ? undefined\n              : `${background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n          ...local.UNSAFE_style,\n        };\n      }}\n    >\n      {local.children}\n    </HeadlessColorSliderTrack>\n  );\n}\n\ninterface ColorSliderThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorSliderThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The thumb component for a color slider.\n */\nfunction ColorSliderThumb(props: ColorSliderThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorSliderThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorSliderThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorSliderThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorSliderThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorSliderThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorSliderThumb>\n  );\n}\n\nexport interface ColorAreaProps extends Omit<\n  HeadlessColorAreaProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Spectrum-defined generated classes. */\n  styles?: StylesPropWithHeight;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n}\n\nconst legacyColorAreaSizes: Record<ColorSize, string> = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n};\n\nconst colorAreaRoot = style<ColorAreaRenderProps>(\n  {\n    position: \"relative\",\n    size: 192,\n    minSize: 64,\n    borderRadius: \"default\",\n    outlineColor: {\n      default: \"gray-1000/10\",\n      forcedColors: \"ButtonBorder\",\n    },\n    outlineWidth: 1,\n    outlineOffset: -1,\n    outlineStyle: {\n      default: \"solid\",\n      isDisabled: \"none\",\n    },\n    backgroundColor: {\n      isDisabled: \"disabled\",\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst colorAreaThumb = style<ColorAreaThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nconst colorAreaThumbRing = style({\n  size: \"full\",\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nconst colorAreaLoupe = style({\n  filter: \"elevated\",\n  pointerEvents: \"none\",\n  animationDuration: 125,\n  animationFillMode: \"forwards\",\n  animationTimingFunction: \"in-out\",\n  isolation: \"isolate\",\n});\n\nconst colorAreaLoupeEnterAnimation = keyframes(`\n  from {\n    transform: translateY(8px);\n    opacity: 0;\n  }\n`);\n\nconst colorAreaLoupeExitAnimation = keyframes(`\n  to {\n    transform: translateY(8px);\n    opacity: 0;\n  }\n`);\n\n/**\n * A color area allows users to select a color by dragging in a 2D gradient.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorArea\n *   value={color()}\n *   onChange={setColor}\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n */\nexport function ColorArea(props: ColorAreaProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"styles\", \"UNSAFE_className\", \"UNSAFE_style\"]);\n\n  return (\n    <HeadlessColorArea\n      {...headlessProps}\n      class={(renderProps: ColorAreaRenderProps) =>\n        [local.UNSAFE_className, colorAreaRoot(renderProps, mergeStyles(local.styles))]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorAreaRenderProps) => ({\n        ...renderProps.defaultStyle,\n        background: renderProps.isDisabled ? undefined : renderProps.defaultStyle.background,\n        position: undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {() => <ColorAreaThumb />}\n    </HeadlessColorArea>\n  );\n}\n\n/**\n * The thumb component for a color area.\n */\ninterface ColorAreaThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorAreaThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nfunction ColorAreaThumb(props: ColorAreaThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"class\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorAreaThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorAreaThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorAreaThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorAreaThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorAreaThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorAreaThumb>\n  );\n}\n\nfunction ColorAreaLoupe(props: {\n  isOpen: boolean;\n  color: Color;\n  anchor: () => HTMLElement | undefined;\n}): JSX.Element {\n  const patternId = createUniqueId();\n  const [phase, setPhase] = createSignal<\"open\" | \"exiting\" | \"closed\">(\n    props.isOpen ? \"open\" : \"closed\",\n  );\n  const [rect, setRect] = createSignal<{\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  createEffect(() => {\n    if (props.isOpen) {\n      setPhase(\"open\");\n    } else if (phase() === \"open\") {\n      setPhase(\"exiting\");\n    }\n  });\n\n  createEffect(() => {\n    props.color.toString(\"css\");\n\n    if ((phase() === \"closed\" && !props.isOpen) || typeof window === \"undefined\") {\n      setRect(null);\n      return;\n    }\n\n    const update = () => {\n      const element = props.anchor();\n      if (!element) {\n        setRect(null);\n        return;\n      }\n\n      const next = element.getBoundingClientRect();\n      setRect({\n        top: next.top,\n        left: next.left,\n        width: next.width,\n        height: next.height,\n      });\n    };\n\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    onCleanup(() => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    });\n  });\n\n  return (\n    <Show when={phase() !== \"closed\" && typeof document !== \"undefined\" && rect()}>\n      {(currentRect) => {\n        const loupeWidth = 48;\n        const loupeHeight = 64;\n        const borderWidth = 1;\n        const handleSize = 16;\n        const offset = 12;\n        const r = currentRect();\n\n        return (\n          <Portal mount={document.body}>\n            <svg\n              aria-hidden=\"true\"\n              class={colorAreaLoupe}\n              width={loupeWidth + borderWidth * 2}\n              height={loupeHeight + borderWidth * 2}\n              style={{\n                position: \"fixed\",\n                top: `${r.top + r.height / 2}px`,\n                left: `${r.left + r.width / 2}px`,\n                \"margin-top\": `${-loupeHeight - borderWidth * 2 - handleSize / 2 - offset}px`,\n                \"margin-left\": `${-loupeWidth / 2 - borderWidth}px`,\n                \"animation-name\":\n                  phase() === \"exiting\"\n                    ? colorAreaLoupeExitAnimation\n                    : colorAreaLoupeEnterAnimation,\n              }}\n              onAnimationEnd={(event) => {\n                if (phase() === \"exiting\" && event.animationName === colorAreaLoupeExitAnimation) {\n                  setPhase(\"closed\");\n                }\n              }}\n            >\n              <pattern\n                id={patternId}\n                x=\"0\"\n                y=\"0\"\n                width=\"16\"\n                height=\"16\"\n                patternUnits=\"userSpaceOnUse\"\n              >\n                <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n                <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n                <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n              </pattern>\n              <path\n                d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n                fill={`url(#${patternId})`}\n              />\n              <path\n                d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n                fill={props.color.toString(\"css\")}\n              />\n              <path\n                class={style({\n                  strokeWidth: 1,\n                  stroke: {\n                    default: \"transparent-black-200\",\n                    forcedColors: \"ButtonBorder\",\n                  },\n                  fill: \"white\",\n                })}\n                d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n              />\n            </svg>\n          </Portal>\n        );\n      }}\n    </Show>\n  );\n}\n\ninterface ColorWheelStyleProps extends Partial<ColorWheelRenderProps> {}\n\nconst colorWheelRoot = style<ColorWheelStyleProps>(\n  {\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst colorWheelTrack = style<ColorWheelTrackRenderProps>({\n  borderRadius: \"full\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorWheelInnerBorder = style<ColorWheelStyleProps>({\n  position: \"absolute\",\n  inset: 24,\n  pointerEvents: \"none\",\n  borderRadius: \"full\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n});\n\nconst colorWheelThumb = style<ColorWheelThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nexport interface ColorWheelProps extends Omit<HeadlessColorWheelProps, \"class\" | \"style\"> {\n  /** Diameter of the authored Spectrum control in pixels. */\n  size?: number;\n  /** Spectrum-defined generated classes. */\n  styles?: StylesProp;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * A color wheel allows users to select a hue by dragging around a circular track.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorWheel\n *   value={color()}\n *   onChange={setColor}\n * />\n * ```\n */\nexport function ColorWheel(props: ColorWheelProps): JSX.Element {\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"children\",\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  const thickness = 24;\n  const authoredSize = () => local.size ?? 192;\n  const outerRadius = () => Math.max(authoredSize(), 175) / 2;\n  const innerRadius = () => outerRadius() - thickness;\n\n  const renderChildren = (renderProps: ColorWheelRenderProps) => {\n    const children = local.children;\n    return children ? (\n      typeof children === \"function\" ? (\n        children(renderProps)\n      ) : (\n        children\n      )\n    ) : (\n      <>\n        <ColorWheelTrack />\n        <div class={colorWheelInnerBorder(renderProps)} />\n        <ColorWheelThumb />\n      </>\n    );\n  };\n\n  return (\n    <HeadlessColorWheel\n      {...headlessProps}\n      outerRadius={outerRadius()}\n      innerRadius={innerRadius()}\n      class={(renderProps: ColorWheelRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          colorWheelRoot(renderProps, mergeStyles(local.styles)),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={() => ({\n        width: `${outerRadius() * 2}px`,\n        height: `${outerRadius() * 2}px`,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {renderChildren}\n    </HeadlessColorWheel>\n  );\n}\n\ninterface ColorWheelTrackProps {\n  /** Custom track children. */\n  children?: JSX.Element | ((renderProps: ColorWheelTrackRenderProps) => JSX.Element);\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The circular track for a color wheel.\n */\nexport function ColorWheelTrack(props: ColorWheelTrackProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n\n  return (\n    <HeadlessColorWheelTrack\n      {...headlessProps}\n      class={(renderProps: ColorWheelTrackRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorWheelTrack(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorWheelTrackRenderProps) => ({\n        background:\n          renderProps.isDisabled || !renderProps.defaultStyle.background\n            ? undefined\n            : renderProps.defaultStyle.background,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {local.children}\n    </HeadlessColorWheelTrack>\n  );\n}\n\ninterface ColorWheelThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorWheelThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The thumb component for a color wheel.\n */\nexport function ColorWheelThumb(props: ColorWheelThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorWheelThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorWheelThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorWheelThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorWheelThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorWheelThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorWheelThumb>\n  );\n}\n\nexport type ColorFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2ColorFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ColorFieldLabelPosition = \"top\" | \"side\";\nexport type ColorFieldLabelAlign = \"start\" | \"end\";\nexport type ColorFieldNecessityIndicator = \"icon\" | \"label\";\n\ninterface ColorFieldStyleProps extends Partial<Omit<ColorFieldRenderProps, \"color\">> {\n  size?: S2ColorFieldSize;\n  labelPosition?: ColorFieldLabelPosition;\n  labelAlign?: ColorFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStaticColor?: boolean;\n  isInForm?: boolean;\n  isQuiet?: boolean;\n}\n\nfunction createColorFieldStyles() {\n  return {\n    root: style<ColorFieldStyleProps>(\n      {\n        ...field(),\n      },\n      getAllowedOverrides(),\n    ),\n    labelWrapper: style<ColorFieldStyleProps>({\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        isQuiet: \"none\",\n      },\n    }),\n    label: style<ColorFieldStyleProps>({\n      ...fieldLabel(),\n    }),\n    group: style<ColorFieldStyleProps>({\n      ...focusRing(),\n      ...control({ shape: \"default\", register: \"matte\" }),\n      ...fieldInput(),\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    input: 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      truncate: true,\n    }),\n    helpText: style<ColorFieldStyleProps>({\n      gridArea: \"helptext\",\n      display: \"flex\",\n      alignItems: \"baseline\",\n      gap: \"text-to-visual\",\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    errorIcon: 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    requiredIcon: style({\n      \"--iconPrimary\": {\n        type: \"fill\",\n        value: \"currentColor\",\n      },\n    }),\n    noWrap: style({\n      whiteSpace: \"nowrap\",\n    }),\n  };\n}\n\nlet colorFieldStyles: ReturnType<typeof createColorFieldStyles> | undefined;\n\nfunction getColorFieldStyles(): ReturnType<typeof createColorFieldStyles> {\n  colorFieldStyles ??= createColorFieldStyles();\n  return colorFieldStyles;\n}\n\nexport interface ColorFieldProps extends Omit<\n  HeadlessColorFieldProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the color field. */\n  size?: ColorFieldSize;\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  /** Description text below the input. */\n  description?: JSX.Element;\n  /** Error message to display. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the input. */\n  labelPosition?: ColorFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: ColorFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: ColorFieldNecessityIndicator;\n  /** An icon or text rendered before the input. */\n  prefix?: JSX.Element;\n}\n\n/**\n * A color field allows users to enter a color value as text.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('#ff0000'))\n *\n * <ColorField\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Color\"\n * />\n * ```\n */\nexport function ColorField(props: ColorFieldProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"prefix\",\n  ]);\n\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  const prefixId = createUniqueId();\n  const size = () => normalizeColorFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const fieldStyles = () => getColorFieldStyles();\n\n  const rootClassName = (renderProps: ColorFieldRenderProps) =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      fieldStyles().root(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    fieldStyles().labelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: ColorFieldRenderProps) =>\n    fieldStyles().label({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n      isStaticColor: false,\n    });\n\n  const groupClass = (renderProps: ColorFieldRenderProps) =>\n    fieldStyles().group({\n      ...renderProps,\n      size: size(),\n      isFocusWithin: isFocusWithin(),\n    });\n\n  const helpClass = (renderProps: ColorFieldRenderProps, isInvalid: boolean) =>\n    fieldStyles().helpText({\n      ...renderProps,\n      size: size(),\n      isInvalid,\n    });\n\n  return (\n    <HeadlessColorField\n      {...headlessProps}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n      children={(renderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <ColorFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={fieldStyles().noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"icon\"}\n                      fallback={\n                        <span aria-hidden={renderProps.isRequired ? true : undefined}>\n                          {renderProps.isRequired ? \"(required)\" : \"(optional)\"}\n                        </span>\n                      }\n                    >\n                      <AsteriskIcon\n                        size={colorFieldIconSize(size())}\n                        class={fieldStyles().requiredIcon}\n                        style={colorFieldRequiredIconStyle(size())}\n                        aria-hidden=\"true\"\n                      />\n                    </Show>\n                  </span>\n                </Show>\n              </ColorFieldLabel>\n            </div>\n          </Show>\n\n          <div\n            role=\"presentation\"\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusColorFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusColorFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={() => setIsFocusWithin(false)}\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={<HeadlessColorFieldInput class={fieldStyles().input} />}\n            >\n              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>\n              <PrefixInputProvider context={HeadlessColorFieldContext} prefixId={prefixId}>\n                <HeadlessColorFieldInput class={fieldStyles().input} />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={renderProps.isInvalid && !renderProps.isDisabled}>\n              <CenterBaseline>\n                <AlertTriangleIcon styles={fieldStyles().errorIcon} />\n              </CenterBaseline>\n            </Show>\n          </div>\n\n          <Show when={local.description && !renderProps.isInvalid}>\n            <ColorFieldDescription class={helpClass(renderProps, false)}>\n              {local.description}\n            </ColorFieldDescription>\n          </Show>\n\n          <Show when={local.errorMessage && renderProps.isInvalid}>\n            <ColorFieldError class={helpClass(renderProps, true)}>\n              {local.errorMessage}\n            </ColorFieldError>\n          </Show>\n        </>\n      )}\n    />\n  );\n}\n\nexport const ColorFieldContext = HeadlessColorFieldContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nfunction normalizeColorFieldSize(size: ColorFieldSize | undefined): S2ColorFieldSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\nfunction colorFieldIconSize(size: S2ColorFieldSize): \"M\" | \"L\" | \"XL\" {\n  return size === \"S\" ? \"M\" : size;\n}\n\nfunction focusColorFieldInput(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 colorFieldRequiredIconStyle(size: S2ColorFieldSize): 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 ColorFieldLabel(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessColorFieldContext);\n  if (!context) return null;\n  context.setLabelElement(true);\n  onCleanup(() => context.setLabelElement(false));\n  const labelProps = () => {\n    const { ref: _ref, ...rest } = context.labelProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <label {...labelProps()} class={props.class}>\n      {props.children}\n    </label>\n  );\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 `helpText` style — upstream's\n// `helpTextStyles` has none) and an implicit `paragraph` role a `<span>` does not.\n// Reverted to match, exactly as NumberField/DateField/DatePicker did.\nfunction ColorFieldDescription(props: {\n  class?: string;\n  children?: JSX.Element;\n}): JSX.Element | null {\n  const context = useContext(HeadlessColorFieldContext);\n  if (!context) return null;\n  const descriptionProps = () => {\n    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>;\n    return rest;\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 ColorFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessColorFieldContext);\n  if (!context) return null;\n  const errorMessageProps = () => {\n    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <span {...errorMessageProps()} slot=\"errorMessage\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nexport type ColorSwatchSize = InternalColorSwatchSize;\nexport type ColorSwatchRounding = InternalColorSwatchRounding;\n\ninterface ColorSwatchStyleProps extends Partial<ColorSwatchRenderProps> {\n  size?: ColorSwatchSize;\n  rounding?: ColorSwatchRounding;\n}\n\nconst colorSwatchRoot = style<ColorSwatchStyleProps>(\n  {\n    width: {\n      size: {\n        XS: 16,\n        S: 24,\n        M: 32,\n        L: 40,\n      },\n    },\n    height: {\n      size: {\n        XS: 16,\n        S: 24,\n        M: 32,\n        L: 40,\n      },\n    },\n    borderRadius: {\n      rounding: {\n        default: \"sm\",\n        none: \"none\",\n        full: \"full\",\n      },\n    },\n    borderColor: \"gray-1000/42\",\n    borderWidth: 1,\n    borderStyle: \"solid\",\n    boxSizing: \"border-box\",\n    forcedColorAdjust: \"none\",\n    \"--slash-color\": {\n      type: \"color\",\n      value: \"red-900\",\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nexport interface ColorSwatchProps extends Omit<\n  HeadlessColorSwatchProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the color swatch. */\n  size?: ColorSwatchSize;\n  /** Corner rounding for the color swatch. */\n  rounding?: ColorSwatchRounding;\n  /** Spectrum-defined generated classes. */\n  styles?: StylesPropWithHeight;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n/**\n * A color swatch displays a color sample.\n *\n * @example\n * ```tsx\n * <ColorSwatch color={parseColor('#ff0000')} aria-label=\"Selected color\" />\n * ```\n */\nexport function ColorSwatch(props: ColorSwatchProps): JSX.Element {\n  const pickerContext = useContext(InternalColorSwatchContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"rounding\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"color\",\n  ]);\n\n  const size = () => local.size ?? pickerContext?.size ?? \"M\";\n  const rounding = () => local.rounding ?? pickerContext?.rounding ?? \"default\";\n  const color = createMemo(() => normalizeColor(local.color ?? \"#fff0\"));\n\n  const getClassName = (renderProps: ColorSwatchRenderProps): string => {\n    return [\n      local.UNSAFE_className,\n      local.class,\n      colorSwatchRoot(\n        {\n          ...renderProps,\n          size: size(),\n          rounding: rounding(),\n        },\n        mergeStyles(local.styles),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  };\n\n  const getStyle = (renderProps: ColorSwatchRenderProps): JSX.CSSProperties => {\n    const swatchColor = renderProps.color;\n    const colorValue = swatchColor.toString(\"css\");\n    const background =\n      swatchColor.getChannelValue(\"alpha\") > 0\n        ? `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n        : \"linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat\";\n\n    return {\n      background,\n      ...local.UNSAFE_style,\n    };\n  };\n\n  const swatch = (\n    <HeadlessColorSwatch {...headlessProps} color={color()} class={getClassName} style={getStyle} />\n  );\n\n  if (pickerContext) {\n    return pickerContext.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n}\n\nexport const ColorSwatchContext = HeadlessColorSwatchContext;\n\nexport interface ColorPickerProps {\n  /** The current color value (controlled). */\n  value?: Color | string;\n  /** The default color value (uncontrolled). */\n  defaultValue?: Color | string;\n  /** Handler called when the color changes. */\n  onChange?: (color: Color) => void;\n  /** The size of the picker. */\n  size?: ColorSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Whether the picker is disabled. */\n  isDisabled?: boolean;\n  /** A label for the picker. */\n  label?: string;\n  /** Whether to show the hex input field. */\n  showInput?: boolean;\n  /** Whether to show channel sliders. */\n  showSliders?: boolean;\n}\n\n/**\n * A complete color picker component with area, sliders, and input.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorPicker\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Pick a color\"\n *   showInput\n *   showSliders\n * />\n * ```\n */\nconst colorPickerRoot = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n});\n\nconst colorPickerLabel = style<{ size: ColorSize }>({\n  color: \"neutral\",\n  fontWeight: \"medium\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n});\n\nexport function ColorPicker(props: ColorPickerProps): JSX.Element {\n  const size = () => props.size ?? \"md\";\n\n  return (\n    <div class={[colorPickerRoot, props.class].filter(Boolean).join(\" \")}>\n      <Show when={props.label}>\n        <span class={colorPickerLabel({ size: size() })}>{props.label}</span>\n      </Show>\n\n      <ColorArea\n        value={props.value}\n        defaultValue={props.defaultValue}\n        onChange={props.onChange}\n        xChannel=\"saturation\"\n        yChannel=\"lightness\"\n        UNSAFE_style={{\n          width: legacyColorAreaSizes[size()],\n          height: legacyColorAreaSizes[size()],\n        }}\n        isDisabled={props.isDisabled}\n      />\n\n      <Show when={props.showSliders !== false}>\n        <ColorSlider\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={props.onChange}\n          channel=\"hue\"\n          label=\"Hue\"\n          size={size()}\n          showValue\n          isDisabled={props.isDisabled}\n        />\n\n        <ColorSlider\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={props.onChange}\n          channel=\"alpha\"\n          label=\"Alpha\"\n          size={size()}\n          showValue\n          isDisabled={props.isDisabled}\n        />\n      </Show>\n\n      <Show when={props.showInput}>\n        <ColorField\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={(color) => {\n            if (color && props.onChange) {\n              props.onChange(color);\n            }\n          }}\n          label=\"Hex\"\n          size={size()}\n          isDisabled={props.isDisabled}\n        />\n      </Show>\n    </div>\n  );\n}\n\nColorWheel.Track = ColorWheelTrack;\nColorWheel.Thumb = ColorWheelThumb;\n\nexport const ColorSliderContext = HeadlessColorSliderContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport const ColorAreaContext = HeadlessColorAreaContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport const ColorWheelContext = HeadlessColorWheelContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport type { Color, ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace };\n\nexport { parseColor, getColorChannels } from \"@proyecto-viviana/solid-stately\";\n\nexport { ColorEditor } from \"./ColorEditor\";\nexport type { ColorEditorProps } from \"./ColorEditor\";\n\nexport {\n  ColorSwatchPicker,\n  ColorSwatchPickerContext,\n  ColorSwatchPickerItem,\n} from \"./ColorSwatchPicker\";\nexport type {\n  ColorSwatchPickerDensity,\n  ColorSwatchPickerProps,\n  ColorSwatchPickerItemProps,\n  ColorSwatchPickerRounding,\n  ColorSwatchPickerSize,\n  SwatchPickerSize,\n  SwatchPickerDensity,\n  SwatchPickerRounding,\n} from \"./ColorSwatchPicker\";\n"],"mappings":"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"}
+{"version":3,"file":"color.jsx","names":[],"sources":["../../src/color/ColorEditor.tsx","../../src/color/index.tsx"],"sourcesContent":["import type { JSX } from \"@solidjs/web\";\nimport {\n  ColorEditor as HeadlessColorEditor,\n  type ColorEditorProps as HeadlessColorEditorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface ColorEditorProps extends Omit<HeadlessColorEditorProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// ColorEditor composes several headless primitives (ColorArea, ColorSlider,\n// ColorField) plus a native format <select>, and styles them through descendant\n// selectors — the internal parts hardcode their own class names and expose no\n// per-part class hook. The single-element style() macro can't express\n// descendant/native-element targeting, so styling flows through the css() macro\n// escape hatch instead: it ships real CSS in the package bundle (same asset\n// pipeline as style()) and supports the nesting these parts need. There is no S2\n// upstream for ColorEditor; values mirror the S2 neutral palette (fixed\n// light-dark pairs, scheme-aware via the Provider's color-scheme).\nconst editorStyles = css(`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  --pv-field-bg: light-dark(#fff, #222);\n  --pv-field-border: light-dark(#d5d5d5, #3d3d3d);\n  --pv-text: light-dark(#222, #e6e6e6);\n  --pv-text-subtle: light-dark(#6b6b6b, #b9b9b9);\n  --pv-focus: light-dark(#4b75ff, #4069fd);\n\n  & label { color: var(--pv-text-subtle); }\n  & input { color: var(--pv-text); }\n\n  & .solidaria-ColorEditor-top { display: flex; flex-direction: column; gap: 8px; }\n  & .solidaria-ColorEditor-bottom { display: flex; gap: 8px; align-items: flex-end; }\n\n  /* The headless parts ship gradients and thumb positions as inline styles but\n   * carry NO dimensions — unsized they collapse to 0x0 and the editor renders\n   * as just its bottom row. Sizes mirror the standalone styled ColorArea /\n   * ColorSlider (192px surface, 24px track, 16px white-ring thumb). */\n  & .solidaria-ColorArea {\n    position: relative;\n    width: 192px;\n    height: 192px;\n    border-radius: 6px;\n    outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));\n    outline-offset: -1px;\n  }\n  & .solidaria-ColorArea-gradient {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n  }\n  & .solidaria-ColorSlider { width: 192px; }\n  & .solidaria-ColorSlider-track {\n    position: relative;\n    height: 24px;\n    border-radius: 6px;\n    outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));\n    outline-offset: -1px;\n  }\n  & .solidaria-ColorArea-thumb,\n  & .solidaria-ColorSlider-thumb {\n    width: 16px;\n    height: 16px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    outline: 1px solid rgb(0 0 0 / 0.42);\n  }\n\n  & .solidaria-ColorEditor-format {\n    height: 32px;\n    padding-inline: 8px;\n    font-size: 0.875rem;\n    border-radius: 6px;\n    border: 1px solid var(--pv-field-border);\n    background: var(--pv-field-bg);\n    color: var(--pv-text-subtle);\n    outline: none;\n  }\n  & .solidaria-ColorEditor-format:focus-visible {\n    outline: 2px solid var(--pv-focus);\n    outline-offset: 2px;\n  }\n\n  & .solidaria-ColorField-input {\n    background: var(--pv-field-bg);\n    border: 1px solid var(--pv-field-border);\n    color: var(--pv-text);\n    border-radius: 6px;\n  }\n`);\n\n/**\n * A complete color editor with area, hue slider, alpha slider,\n * color space selector, and channel fields.\n */\nexport function ColorEditor(props: ColorEditorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n\n  return (\n    <HeadlessColorEditor\n      {...headlessProps}\n      class={[editorStyles, local.class].filter(Boolean).join(\" \")}\n    />\n  );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorArea.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorField.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorHandle.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSlider.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSwatch.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorWheel.tsx\n\n// Port of packages/@react-spectrum/s2/src/ColorArea.tsx.\n// Port of packages/@react-spectrum/s2/src/ColorField.tsx.\n// Port of packages/@react-spectrum/s2/src/ColorHandle.tsx.\n// Port of packages/@react-spectrum/s2/src/ColorSlider.tsx.\n// Port of packages/@react-spectrum/s2/src/ColorSwatch.tsx.\n// Port of packages/@react-spectrum/s2/src/ColorWheel.tsx.\n\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  useContext,\n  Show,\n  createTrackedEffect,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { Portal } from \"@solidjs/web\";\nimport { createStringFormatter, useLocale } from \"@proyecto-viviana/solidaria\";\nimport { s2IntlStrings } from \"../intl\";\nimport {\n  ColorSlider as HeadlessColorSlider,\n  ColorSliderLabel as HeadlessColorSliderLabel,\n  ColorSliderOutput as HeadlessColorSliderOutput,\n  ColorSliderTrack as HeadlessColorSliderTrack,\n  ColorSliderThumb as HeadlessColorSliderThumb,\n  ColorSliderContext as HeadlessColorSliderContext,\n  ColorArea as HeadlessColorArea,\n  ColorAreaThumb as HeadlessColorAreaThumb,\n  ColorAreaContext as HeadlessColorAreaContext,\n  ColorWheel as HeadlessColorWheel,\n  ColorWheelTrack as HeadlessColorWheelTrack,\n  ColorWheelThumb as HeadlessColorWheelThumb,\n  ColorWheelContext as HeadlessColorWheelContext,\n  ColorField as HeadlessColorField,\n  ColorFieldInput as HeadlessColorFieldInput,\n  ColorFieldContext as HeadlessColorFieldContext,\n  ColorSwatch as HeadlessColorSwatch,\n  ColorSwatchContext as HeadlessColorSwatchContext,\n  type ColorSliderProps as HeadlessColorSliderProps,\n  type ColorAreaProps as HeadlessColorAreaProps,\n  type ColorWheelProps as HeadlessColorWheelProps,\n  type ColorFieldProps as HeadlessColorFieldProps,\n  type ColorSwatchProps as HeadlessColorSwatchProps,\n  type ColorSliderRenderProps,\n  type ColorSliderTrackRenderProps,\n  type ColorSliderThumbRenderProps,\n  type ColorAreaRenderProps,\n  type ColorAreaThumbRenderProps,\n  type ColorWheelRenderProps,\n  type ColorWheelTrackRenderProps,\n  type ColorWheelThumbRenderProps,\n  type ColorFieldRenderProps,\n  type ColorSwatchRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type {\n  Color,\n  ColorAxes,\n  ColorChannel,\n  ColorChannelRange,\n  ColorFormat,\n  ColorSpace,\n} from \"@proyecto-viviana/solid-stately\";\nimport { normalizeColor } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { StylesProp, StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  control,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { HelpText } from \"../form/HelpText\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  InternalColorSwatchContext,\n  type InternalColorSwatchRounding,\n  type InternalColorSwatchSize,\n} from \"./color-swatch-internal\";\n\nexport type ColorSize = \"sm\" | \"md\" | \"lg\";\n\ninterface ColorContextValue {\n  size: ColorSize;\n}\n\nconst ColorSizeContext = createContext<ColorContextValue>({ size: \"md\" });\n\ninterface ColorSliderStyleProps extends Partial<ColorSliderRenderProps> {}\n\nconst colorSliderRoot = style<ColorSliderStyleProps>(\n  {\n    width: {\n      orientation: {\n        horizontal: 192,\n      },\n    },\n    height: {\n      orientation: {\n        vertical: 192,\n      },\n    },\n    display: {\n      orientation: {\n        horizontal: \"grid\",\n        vertical: \"block\",\n      },\n    },\n    gridTemplateColumns: [\"1fr\", \"auto\"],\n    gridTemplateAreas: [\"label output\", \"track track\"],\n    rowGap: 4,\n  },\n  getAllowedOverrides(),\n);\n\nconst colorSliderLabelWrapper = style<ColorSliderStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  cursor: {\n    default: \"default\",\n    isDisabled: \"default\",\n  },\n});\n\nconst colorSliderLabel = style<ColorSliderStyleProps>({\n  ...fieldLabel(),\n});\n\nconst colorSliderOutput = style<ColorSliderStyleProps>({\n  gridArea: \"output\",\n  font: controlFont(),\n  cursor: \"default\",\n  color: {\n    default: \"neutral-subdued\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorSliderTrack = style<ColorSliderTrackRenderProps>({\n  gridArea: \"track\",\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: 24,\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: 24,\n      vertical: \"full\",\n    },\n  },\n  borderRadius: \"default\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorSliderThumb = style<ColorSliderThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nexport interface ColorSliderProps extends Omit<\n  HeadlessColorSliderProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Spectrum-defined generated classes. */\n  styles?: StylesProp;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Deprecated legacy size prop. ColorSlider uses the Spectrum 2 fixed track size. */\n  size?: ColorSize;\n  /** Deprecated legacy value visibility prop. Spectrum 2 shows horizontal output. */\n  showValue?: boolean;\n  /** Contextual help shown next to the visible label. */\n  contextualHelp?: JSX.Element;\n}\n\n/**\n * A color slider allows users to adjust a single color channel.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorSlider\n *   channel=\"hue\"\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Hue\"\n * />\n * ```\n */\nexport function ColorSlider(props: ColorSliderProps): JSX.Element {\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"size\",\n    \"showValue\",\n    \"label\",\n    \"contextualHelp\",\n  ]);\n  const locale = useLocale();\n\n  const orientation = () => headlessProps.orientation ?? \"horizontal\";\n  const hasExplicitAriaLabel = () =>\n    Boolean(headlessProps[\"aria-label\"] || headlessProps[\"aria-labelledby\"]);\n  const hasVisibleLabel = () =>\n    orientation() === \"horizontal\" &&\n    (Boolean(local.label) || (local.label === undefined && !hasExplicitAriaLabel()));\n  const labelForAria = () => (hasVisibleLabel() ? (local.label ?? \" \") : undefined);\n  const ariaLabel = () =>\n    headlessProps[\"aria-label\"] ??\n    (orientation() === \"vertical\" && typeof local.label === \"string\" ? local.label : undefined);\n\n  return (\n    <HeadlessColorSlider\n      {...headlessProps}\n      label={labelForAria()}\n      aria-label={ariaLabel()}\n      class={(renderProps: ColorSliderRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          colorSliderRoot(renderProps, mergeStyles(local.styles)),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={() => ({\n        \"grid-template-areas\": '\"label output\" \"track track\"',\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorSliderRenderProps) => (\n        <>\n          <Show when={hasVisibleLabel()}>\n            <div class={colorSliderLabelWrapper(renderProps)} style={{ \"grid-area\": \"label\" }}>\n              <HeadlessColorSliderLabel class={colorSliderLabel(renderProps)}>\n                {local.label ??\n                  renderProps.color.getChannelName(renderProps.channel, locale().locale)}\n                <Show when={local.contextualHelp}>\n                  <span data-slot=\"contextualHelp\">{local.contextualHelp}</span>\n                </Show>\n              </HeadlessColorSliderLabel>\n            </div>\n          </Show>\n          <Show when={renderProps.orientation === \"horizontal\"}>\n            <HeadlessColorSliderOutput\n              class={colorSliderOutput(renderProps)}\n              style={{ \"grid-area\": \"output\" }}\n            />\n          </Show>\n          <ColorSliderTrack>{() => <ColorSliderThumb />}</ColorSliderTrack>\n        </>\n      )}\n    </HeadlessColorSlider>\n  );\n}\n\ninterface ColorSliderTrackProps {\n  /** The children of the track. */\n  children?: JSX.Element | ((renderProps: ColorSliderTrackRenderProps) => JSX.Element);\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The track component for a color slider.\n */\nfunction ColorSliderTrack(props: ColorSliderTrackProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n\n  return (\n    <HeadlessColorSliderTrack\n      {...headlessProps}\n      class={(renderProps: ColorSliderTrackRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorSliderTrack(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorSliderTrackRenderProps) => {\n        const background = renderProps.defaultStyle.background;\n        return {\n          \"grid-area\": \"track\",\n          background:\n            renderProps.isDisabled || !background\n              ? undefined\n              : `${background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n          ...local.UNSAFE_style,\n        };\n      }}\n    >\n      {local.children}\n    </HeadlessColorSliderTrack>\n  );\n}\n\ninterface ColorSliderThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorSliderThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The thumb component for a color slider.\n */\nfunction ColorSliderThumb(props: ColorSliderThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorSliderThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorSliderThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorSliderThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorSliderThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorSliderThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorSliderThumb>\n  );\n}\n\nexport interface ColorAreaProps extends Omit<\n  HeadlessColorAreaProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** Spectrum-defined generated classes. */\n  styles?: StylesPropWithHeight;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n}\n\nconst legacyColorAreaSizes: Record<ColorSize, string> = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n};\n\nconst colorAreaRoot = style<ColorAreaRenderProps>(\n  {\n    position: \"relative\",\n    size: 192,\n    minSize: 64,\n    borderRadius: \"default\",\n    outlineColor: {\n      default: \"gray-1000/10\",\n      forcedColors: \"ButtonBorder\",\n    },\n    outlineWidth: 1,\n    outlineOffset: -1,\n    outlineStyle: {\n      default: \"solid\",\n      isDisabled: \"none\",\n    },\n    backgroundColor: {\n      isDisabled: \"disabled\",\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst colorAreaThumb = style<ColorAreaThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nconst colorAreaThumbRing = style({\n  size: \"full\",\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nconst colorAreaLoupe = style({\n  filter: \"elevated\",\n  pointerEvents: \"none\",\n  animationDuration: 125,\n  animationFillMode: \"forwards\",\n  animationTimingFunction: \"in-out\",\n  isolation: \"isolate\",\n});\n\nconst colorAreaLoupeEnterAnimation = keyframes(`\n  from {\n    transform: translateY(8px);\n    opacity: 0;\n  }\n`);\n\nconst colorAreaLoupeExitAnimation = keyframes(`\n  to {\n    transform: translateY(8px);\n    opacity: 0;\n  }\n`);\n\n/**\n * A color area allows users to select a color by dragging in a 2D gradient.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorArea\n *   value={color()}\n *   onChange={setColor}\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n */\nexport function ColorArea(props: ColorAreaProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"styles\", \"UNSAFE_className\", \"UNSAFE_style\"]);\n\n  return (\n    <HeadlessColorArea\n      {...headlessProps}\n      class={(renderProps: ColorAreaRenderProps) =>\n        [local.UNSAFE_className, colorAreaRoot(renderProps, mergeStyles(local.styles))]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorAreaRenderProps) => ({\n        ...renderProps.defaultStyle,\n        background: renderProps.isDisabled ? undefined : renderProps.defaultStyle.background,\n        position: undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {() => <ColorAreaThumb />}\n    </HeadlessColorArea>\n  );\n}\n\n/**\n * The thumb component for a color area.\n */\ninterface ColorAreaThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorAreaThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nfunction ColorAreaThumb(props: ColorAreaThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"class\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorAreaThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorAreaThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorAreaThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorAreaThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorAreaThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorAreaThumb>\n  );\n}\n\nfunction ColorAreaLoupe(props: {\n  isOpen: boolean;\n  color: Color;\n  anchor: () => HTMLElement | undefined;\n}): JSX.Element {\n  const patternId = createUniqueId();\n  const [phase, setPhase] = createSignal<\"open\" | \"exiting\" | \"closed\">(\n    props.isOpen ? \"open\" : \"closed\",\n  );\n  const [rect, setRect] = createSignal<{\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  createTrackedEffect(() => {\n    if (props.isOpen) {\n      setPhase(\"open\");\n    } else if (phase() === \"open\") {\n      setPhase(\"exiting\");\n    }\n  });\n\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    props.color.toString(\"css\");\n\n    if ((phase() === \"closed\" && !props.isOpen) || typeof window === \"undefined\") {\n      setRect(null);\n      return;\n    }\n\n    const update = () => {\n      const element = props.anchor();\n      if (!element) {\n        setRect(null);\n        return;\n      }\n\n      const next = element.getBoundingClientRect();\n      setRect({\n        top: next.top,\n        left: next.left,\n        width: next.width,\n        height: next.height,\n      });\n    };\n\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    _s2Cleanups.push(() => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  return (\n    <Show when={phase() !== \"closed\" && typeof document !== \"undefined\" && rect()}>\n      {(currentRect) => {\n        const loupeWidth = 48;\n        const loupeHeight = 64;\n        const borderWidth = 1;\n        const handleSize = 16;\n        const offset = 12;\n        const r = currentRect();\n\n        return (\n          <Portal mount={document.body}>\n            <svg\n              aria-hidden=\"true\"\n              class={colorAreaLoupe}\n              width={loupeWidth + borderWidth * 2}\n              height={loupeHeight + borderWidth * 2}\n              style={{\n                position: \"fixed\",\n                top: `${r.top + r.height / 2}px`,\n                left: `${r.left + r.width / 2}px`,\n                \"margin-top\": `${-loupeHeight - borderWidth * 2 - handleSize / 2 - offset}px`,\n                \"margin-left\": `${-loupeWidth / 2 - borderWidth}px`,\n                \"animation-name\":\n                  phase() === \"exiting\"\n                    ? colorAreaLoupeExitAnimation\n                    : colorAreaLoupeEnterAnimation,\n              }}\n              onAnimationEnd={(event) => {\n                if (phase() === \"exiting\" && event.animationName === colorAreaLoupeExitAnimation) {\n                  setPhase(\"closed\");\n                }\n              }}\n            >\n              <pattern\n                id={patternId}\n                x=\"0\"\n                y=\"0\"\n                width=\"16\"\n                height=\"16\"\n                patternUnits=\"userSpaceOnUse\"\n              >\n                <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n                <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n                <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n              </pattern>\n              <path\n                d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n                fill={`url(#${patternId})`}\n              />\n              <path\n                d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n                fill={props.color.toString(\"css\")}\n              />\n              <path\n                class={style({\n                  strokeWidth: 1,\n                  stroke: {\n                    default: \"transparent-black-200\",\n                    forcedColors: \"ButtonBorder\",\n                  },\n                  fill: \"white\",\n                })}\n                d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n              />\n            </svg>\n          </Portal>\n        );\n      }}\n    </Show>\n  );\n}\n\ninterface ColorWheelStyleProps extends Partial<ColorWheelRenderProps> {}\n\nconst colorWheelRoot = style<ColorWheelStyleProps>(\n  {\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst colorWheelTrack = style<ColorWheelTrackRenderProps>({\n  borderRadius: \"full\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineOffset: -1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n});\n\nconst colorWheelInnerBorder = style<ColorWheelStyleProps>({\n  position: \"absolute\",\n  inset: 24,\n  pointerEvents: \"none\",\n  borderRadius: \"full\",\n  outlineColor: {\n    default: \"gray-1000/10\",\n    forcedColors: \"ButtonBorder\",\n  },\n  outlineWidth: 1,\n  outlineStyle: {\n    default: \"solid\",\n    isDisabled: \"none\",\n  },\n});\n\nconst colorWheelThumb = style<ColorWheelThumbRenderProps>({\n  transition: \"[width, height]\",\n  size: {\n    default: 16,\n    isFocusVisible: 32,\n  },\n  backgroundColor: {\n    isDisabled: \"disabled\",\n  },\n  borderRadius: \"full\",\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  borderColor: {\n    default: \"white\",\n    isDisabled: \"disabled\",\n  },\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: \"black/42\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nexport interface ColorWheelProps extends Omit<HeadlessColorWheelProps, \"class\" | \"style\"> {\n  /** Diameter of the authored Spectrum control in pixels. */\n  size?: number;\n  /** Spectrum-defined generated classes. */\n  styles?: StylesProp;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * A color wheel allows users to select a hue by dragging around a circular track.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorWheel\n *   value={color()}\n *   onChange={setColor}\n * />\n * ```\n */\nexport function ColorWheel(props: ColorWheelProps): JSX.Element {\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"children\",\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  const thickness = 24;\n  const authoredSize = () => local.size ?? 192;\n  const outerRadius = () => Math.max(authoredSize(), 175) / 2;\n  const innerRadius = () => outerRadius() - thickness;\n\n  const renderChildren = (renderProps: ColorWheelRenderProps) => {\n    const children = local.children;\n    return children ? (\n      typeof children === \"function\" ? (\n        children(renderProps)\n      ) : (\n        children\n      )\n    ) : (\n      <>\n        <ColorWheelTrack />\n        <div class={colorWheelInnerBorder(renderProps)} />\n        <ColorWheelThumb />\n      </>\n    );\n  };\n\n  return (\n    <HeadlessColorWheel\n      {...headlessProps}\n      outerRadius={outerRadius()}\n      innerRadius={innerRadius()}\n      class={(renderProps: ColorWheelRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          colorWheelRoot(renderProps, mergeStyles(local.styles)),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={() => ({\n        width: `${outerRadius() * 2}px`,\n        height: `${outerRadius() * 2}px`,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {renderChildren}\n    </HeadlessColorWheel>\n  );\n}\n\ninterface ColorWheelTrackProps {\n  /** Custom track children. */\n  children?: JSX.Element | ((renderProps: ColorWheelTrackRenderProps) => JSX.Element);\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The circular track for a color wheel.\n */\nexport function ColorWheelTrack(props: ColorWheelTrackProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n\n  return (\n    <HeadlessColorWheelTrack\n      {...headlessProps}\n      class={(renderProps: ColorWheelTrackRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorWheelTrack(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorWheelTrackRenderProps) => ({\n        background:\n          renderProps.isDisabled || !renderProps.defaultStyle.background\n            ? undefined\n            : renderProps.defaultStyle.background,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {local.children}\n    </HeadlessColorWheelTrack>\n  );\n}\n\ninterface ColorWheelThumbProps {\n  /** Custom thumb children. Defaults to the Spectrum 2 inner ring and drag loupe. */\n  children?: JSX.Element | ((renderProps: ColorWheelThumbRenderProps) => JSX.Element);\n  /** Ref callback for the thumb element. */\n  ref?: (element: HTMLDivElement) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\n/**\n * The thumb component for a color wheel.\n */\nexport function ColorWheelThumb(props: ColorWheelThumbProps = {}): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"ref\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n  ]);\n  let thumbElement: HTMLDivElement | undefined;\n\n  return (\n    <HeadlessColorWheelThumb\n      {...headlessProps}\n      ref={(element: HTMLDivElement) => {\n        thumbElement = element;\n        local.ref?.(element);\n      }}\n      class={(renderProps: ColorWheelThumbRenderProps) =>\n        [\n          local.UNSAFE_className,\n          local.class,\n          mergeStyles(colorWheelThumb(renderProps), local.styles),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(renderProps: ColorWheelThumbRenderProps) => ({\n        background: renderProps.isDisabled\n          ? undefined\n          : `linear-gradient(${renderProps.color.toString(\"css\")}, ${renderProps.color.toString(\"css\")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        \"background-color\": undefined,\n        ...local.UNSAFE_style,\n      })}\n    >\n      {(renderProps: ColorWheelThumbRenderProps) =>\n        typeof local.children === \"function\" ? (\n          local.children(renderProps)\n        ) : (\n          <>\n            {local.children ?? <div class={colorAreaThumbRing} />}\n            <ColorAreaLoupe\n              isOpen={renderProps.isDragging}\n              color={renderProps.color}\n              anchor={() => thumbElement}\n            />\n          </>\n        )\n      }\n    </HeadlessColorWheelThumb>\n  );\n}\n\nexport type ColorFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2ColorFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ColorFieldLabelPosition = \"top\" | \"side\";\nexport type ColorFieldLabelAlign = \"start\" | \"end\";\nexport type ColorFieldNecessityIndicator = \"icon\" | \"label\";\n\ninterface ColorFieldStyleProps extends Partial<Omit<ColorFieldRenderProps, \"color\">> {\n  size?: S2ColorFieldSize;\n  labelPosition?: ColorFieldLabelPosition;\n  labelAlign?: ColorFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStaticColor?: boolean;\n  isInForm?: boolean;\n  isQuiet?: boolean;\n}\n\nfunction createColorFieldStyles() {\n  return {\n    root: style<ColorFieldStyleProps>(\n      {\n        ...field(),\n      },\n      getAllowedOverrides(),\n    ),\n    labelWrapper: style<ColorFieldStyleProps>({\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        isQuiet: \"none\",\n      },\n    }),\n    label: style<ColorFieldStyleProps>({\n      ...fieldLabel(),\n    }),\n    group: style<ColorFieldStyleProps>({\n      ...focusRing(),\n      ...control({ shape: \"default\", register: \"matte\" }),\n      ...fieldInput(),\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    input: 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      truncate: true,\n    }),\n    errorIcon: style({\n      size: \"1lh\",\n      marginStart: \"text-to-visual\",\n      marginEnd: fontRelative(-2),\n      flexShrink: 0,\n      \"--iconPrimary\": {\n        type: \"fill\",\n        value: {\n          default: \"negative-1000\",\n          forcedColors: \"Mark\",\n        },\n      },\n    }),\n    requiredIcon: style({\n      \"--iconPrimary\": {\n        type: \"fill\",\n        value: \"currentColor\",\n      },\n    }),\n    noWrap: style({\n      whiteSpace: \"nowrap\",\n    }),\n  };\n}\n\nlet colorFieldStyles: ReturnType<typeof createColorFieldStyles> | undefined;\n\nfunction getColorFieldStyles(): ReturnType<typeof createColorFieldStyles> {\n  colorFieldStyles ??= createColorFieldStyles();\n  return colorFieldStyles;\n}\n\nexport interface ColorFieldProps extends Omit<\n  HeadlessColorFieldProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the color field. */\n  size?: ColorFieldSize;\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  /** Description text below the input. */\n  description?: JSX.Element;\n  /** Error message to display. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the input. */\n  labelPosition?: ColorFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: ColorFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: ColorFieldNecessityIndicator;\n  /** An icon or text rendered before the input. */\n  prefix?: JSX.Element;\n}\n\n/**\n * A color field allows users to enter a color value as text.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('#ff0000'))\n *\n * <ColorField\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Color\"\n * />\n * ```\n */\nexport function ColorField(props: ColorFieldProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const mergedProps = useProviderProps(useFormProps(props));\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"prefix\",\n  ]);\n\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  const prefixId = createUniqueId();\n  const size = () => normalizeColorFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const fieldStyles = () => getColorFieldStyles();\n\n  const rootClassName = (renderProps: ColorFieldRenderProps) =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      fieldStyles().root(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    fieldStyles().labelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: ColorFieldRenderProps) =>\n    fieldStyles().label({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n      isStaticColor: false,\n    });\n\n  const groupClass = (renderProps: ColorFieldRenderProps) =>\n    fieldStyles().group({\n      ...renderProps,\n      size: size(),\n      isFocusWithin: isFocusWithin(),\n    });\n\n  return (\n    <HeadlessColorField\n      {...headlessProps}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n      children={(renderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <ColorFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={fieldStyles().noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"icon\"}\n                      fallback={\n                        <span aria-hidden={renderProps.isRequired ? \"true\" : undefined}>\n                          {stringFormatter().format(\n                            renderProps.isRequired ? \"label.(required)\" : \"label.(optional)\",\n                          )}\n                        </span>\n                      }\n                    >\n                      <AsteriskIcon\n                        size={colorFieldIconSize(size())}\n                        class={fieldStyles().requiredIcon}\n                        style={colorFieldRequiredIconStyle(size())}\n                        aria-hidden=\"true\"\n                      />\n                    </Show>\n                  </span>\n                </Show>\n              </ColorFieldLabel>\n            </div>\n          </Show>\n\n          <div\n            role=\"presentation\"\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusColorFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusColorFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={() => setIsFocusWithin(false)}\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={<HeadlessColorFieldInput class={fieldStyles().input} />}\n            >\n              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>\n              <PrefixInputProvider context={HeadlessColorFieldContext} prefixId={prefixId}>\n                <HeadlessColorFieldInput class={fieldStyles().input} />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={renderProps.isInvalid && !renderProps.isDisabled}>\n              <CenterBaseline>\n                <AlertTriangleIcon styles={fieldStyles().errorIcon} />\n              </CenterBaseline>\n            </Show>\n          </div>\n\n          <HelpText\n            size={size()}\n            isDisabled={renderProps.isDisabled}\n            isInvalid={renderProps.isInvalid}\n            description={local.description}\n          >\n            {local.errorMessage}\n          </HelpText>\n        </>\n      )}\n    />\n  );\n}\n\nexport const ColorFieldContext = HeadlessColorFieldContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nfunction normalizeColorFieldSize(size: ColorFieldSize | undefined): S2ColorFieldSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\nfunction colorFieldIconSize(size: S2ColorFieldSize): \"M\" | \"L\" | \"XL\" {\n  return size === \"S\" ? \"M\" : size;\n}\n\nfunction focusColorFieldInput(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 colorFieldRequiredIconStyle(size: S2ColorFieldSize): 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 ColorFieldLabel(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessColorFieldContext);\n  if (!context) return null;\n  context.setLabelElement(true);\n  onCleanup(() => context.setLabelElement(false));\n  const labelProps = () => {\n    const { ref: _ref, ...rest } = context.labelProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <label {...labelProps()} class={props.class}>\n      {props.children}\n    </label>\n  );\n}\n\nexport type ColorSwatchSize = InternalColorSwatchSize;\nexport type ColorSwatchRounding = InternalColorSwatchRounding;\n\ninterface ColorSwatchStyleProps extends Partial<ColorSwatchRenderProps> {\n  size?: ColorSwatchSize;\n  rounding?: ColorSwatchRounding;\n}\n\nconst colorSwatchRoot = style<ColorSwatchStyleProps>(\n  {\n    width: {\n      size: {\n        XS: 16,\n        S: 24,\n        M: 32,\n        L: 40,\n      },\n    },\n    height: {\n      size: {\n        XS: 16,\n        S: 24,\n        M: 32,\n        L: 40,\n      },\n    },\n    borderRadius: {\n      rounding: {\n        default: \"sm\",\n        none: \"none\",\n        full: \"full\",\n      },\n    },\n    borderColor: \"gray-1000/42\",\n    borderWidth: 1,\n    borderStyle: \"solid\",\n    boxSizing: \"border-box\",\n    forcedColorAdjust: \"none\",\n    \"--slash-color\": {\n      type: \"color\",\n      value: \"red-900\",\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nexport interface ColorSwatchProps extends Omit<\n  HeadlessColorSwatchProps,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the color swatch. */\n  size?: ColorSwatchSize;\n  /** Corner rounding for the color swatch. */\n  rounding?: ColorSwatchRounding;\n  /** Spectrum-defined generated classes. */\n  styles?: StylesPropWithHeight;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n/**\n * A color swatch displays a color sample.\n *\n * @example\n * ```tsx\n * <ColorSwatch color={parseColor('#ff0000')} aria-label=\"Selected color\" />\n * ```\n */\nexport function ColorSwatch(props: ColorSwatchProps): JSX.Element {\n  const pickerContext = useContext(InternalColorSwatchContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"size\",\n    \"rounding\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"color\",\n  ]);\n\n  const size = () => local.size ?? pickerContext?.size ?? \"M\";\n  const rounding = () => local.rounding ?? pickerContext?.rounding ?? \"default\";\n  const color = createMemo(() => normalizeColor(local.color ?? \"#fff0\"));\n\n  const getClassName = (renderProps: ColorSwatchRenderProps): string => {\n    return [\n      local.UNSAFE_className,\n      local.class,\n      colorSwatchRoot(\n        {\n          ...renderProps,\n          size: size(),\n          rounding: rounding(),\n        },\n        mergeStyles(local.styles),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  };\n\n  const getStyle = (renderProps: ColorSwatchRenderProps): JSX.CSSProperties => {\n    const swatchColor = renderProps.color;\n    const colorValue = swatchColor.toString(\"css\");\n    const background =\n      swatchColor.getChannelValue(\"alpha\") > 0\n        ? `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n        : \"linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat\";\n\n    return {\n      background,\n      ...local.UNSAFE_style,\n    };\n  };\n\n  const swatch = (\n    <HeadlessColorSwatch {...headlessProps} color={color()} class={getClassName} style={getStyle} />\n  );\n\n  if (pickerContext) {\n    return pickerContext.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n}\n\nexport const ColorSwatchContext = HeadlessColorSwatchContext;\n\nexport interface ColorPickerProps {\n  /** The current color value (controlled). */\n  value?: Color | string;\n  /** The default color value (uncontrolled). */\n  defaultValue?: Color | string;\n  /** Handler called when the color changes. */\n  onChange?: (color: Color) => void;\n  /** The size of the picker. */\n  size?: ColorSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Whether the picker is disabled. */\n  isDisabled?: boolean;\n  /** A label for the picker. */\n  label?: string;\n  /** Whether to show the hex input field. */\n  showInput?: boolean;\n  /** Whether to show channel sliders. */\n  showSliders?: boolean;\n}\n\n/**\n * A complete color picker component with area, sliders, and input.\n *\n * @example\n * ```tsx\n * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))\n *\n * <ColorPicker\n *   value={color()}\n *   onChange={setColor}\n *   label=\"Pick a color\"\n *   showInput\n *   showSliders\n * />\n * ```\n */\nconst colorPickerRoot = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n});\n\nconst colorPickerLabel = style<{ size: ColorSize }>({\n  color: \"neutral\",\n  fontWeight: \"medium\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n});\n\nexport function ColorPicker(props: ColorPickerProps): JSX.Element {\n  const size = () => props.size ?? \"md\";\n\n  return (\n    <div class={[colorPickerRoot, props.class].filter(Boolean).join(\" \")}>\n      <Show when={props.label}>\n        <span class={colorPickerLabel({ size: size() })}>{props.label}</span>\n      </Show>\n\n      <ColorArea\n        value={props.value}\n        defaultValue={props.defaultValue}\n        onChange={props.onChange}\n        xChannel=\"saturation\"\n        yChannel=\"lightness\"\n        UNSAFE_style={{\n          width: legacyColorAreaSizes[size()],\n          height: legacyColorAreaSizes[size()],\n        }}\n        isDisabled={props.isDisabled}\n      />\n\n      <Show when={props.showSliders !== false}>\n        <ColorSlider\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={props.onChange}\n          channel=\"hue\"\n          label=\"Hue\"\n          size={size()}\n          showValue\n          isDisabled={props.isDisabled}\n        />\n\n        <ColorSlider\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={props.onChange}\n          channel=\"alpha\"\n          label=\"Alpha\"\n          size={size()}\n          showValue\n          isDisabled={props.isDisabled}\n        />\n      </Show>\n\n      <Show when={props.showInput}>\n        <ColorField\n          value={props.value}\n          defaultValue={props.defaultValue}\n          onChange={(color) => {\n            if (color && props.onChange) {\n              props.onChange(color);\n            }\n          }}\n          label=\"Hex\"\n          size={size()}\n          isDisabled={props.isDisabled}\n        />\n      </Show>\n    </div>\n  );\n}\n\nColorWheel.Track = ColorWheelTrack;\nColorWheel.Thumb = ColorWheelThumb;\n\nexport const ColorSliderContext = HeadlessColorSliderContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport const ColorAreaContext = HeadlessColorAreaContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport const ColorWheelContext = HeadlessColorWheelContext as ReturnType<\n  typeof createContext<unknown>\n>;\n\nexport type { Color, ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace };\n\nexport { parseColor, getColorChannels } from \"@proyecto-viviana/solid-stately\";\n\nexport { ColorEditor } from \"./ColorEditor\";\nexport type { ColorEditorProps } from \"./ColorEditor\";\n\nexport {\n  ColorSwatchPicker,\n  ColorSwatchPickerContext,\n  ColorSwatchPickerItem,\n} from \"./ColorSwatchPicker\";\nexport type {\n  ColorSwatchPickerDensity,\n  ColorSwatchPickerProps,\n  ColorSwatchPickerItemProps,\n  ColorSwatchPickerRounding,\n  ColorSwatchPickerSize,\n  SwatchPickerSize,\n  SwatchPickerDensity,\n  SwatchPickerRounding,\n} from \"./ColorSwatchPicker\";\n"],"mappings":"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"}

package/dist/_chunk/context.js

@@ -1,3 +1,17 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButton.tsx
 import { createContext, useContext } from "solid-js";
 //#region src/button/context.ts
 const ButtonContext = createContext(null);

package/dist/_chunk/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/button/context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { ActionButtonProps } from \"./ActionButton\";\nimport type { ButtonProps } from \"./types\";\nimport type { LinkButtonProps } from \"./LinkButton\";\nimport type { ToggleButtonProps } from \"./ToggleButton\";\nimport type { SpectrumContextValue } from \"./spectrum-context\";\n\nexport const ButtonContext = createContext<SpectrumContextValue<ButtonProps>>(null);\nexport const LinkButtonContext = createContext<SpectrumContextValue<LinkButtonProps>>(null);\nexport const ActionButtonContext = createContext<SpectrumContextValue<ActionButtonProps>>(null);\nexport const ToggleButtonContext = createContext<SpectrumContextValue<ToggleButtonProps>>(null);\n\nexport function useButtonContext(): SpectrumContextValue<ButtonProps> {\n  return useContext(ButtonContext);\n}\n\nexport function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps> {\n  return useContext(LinkButtonContext);\n}\n\nexport function useActionButtonContext(): SpectrumContextValue<ActionButtonProps> {\n  return useContext(ActionButtonContext);\n}\n\nexport function useToggleButtonContext(): SpectrumContextValue<ToggleButtonProps> {\n  return useContext(ToggleButtonContext);\n}\n"],"mappings":";;AAOA,MAAa,gBAAgB,cAAiD,IAAI;AAClF,MAAa,oBAAoB,cAAqD,IAAI;AAC1F,MAAa,sBAAsB,cAAuD,IAAI;AAC9F,MAAa,sBAAsB,cAAuD,IAAI;AAE9F,SAAgB,mBAAsD;CACpE,OAAO,WAAW,aAAa;AACjC;AAEA,SAAgB,uBAA8D;CAC5E,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,yBAAkE;CAChF,OAAO,WAAW,mBAAmB;AACvC;AAEA,SAAgB,yBAAkE;CAChF,OAAO,WAAW,mBAAmB;AACvC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/button/context.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\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButton.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButton.tsx\n\n// Port of packages/@react-spectrum/s2/src/ActionButton.tsx.\n// Port of packages/@react-spectrum/s2/src/Button.tsx.\n// Port of packages/@react-spectrum/s2/src/ToggleButton.tsx.\nimport { createContext, useContext } from \"solid-js\";\nimport type { ActionButtonProps } from \"./ActionButton\";\nimport type { ButtonProps } from \"./types\";\nimport type { LinkButtonProps } from \"./LinkButton\";\nimport type { ToggleButtonProps } from \"./ToggleButton\";\nimport type { SpectrumContextValue } from \"./spectrum-context\";\n\nexport const ButtonContext = createContext<SpectrumContextValue<ButtonProps>>(null);\nexport const LinkButtonContext = createContext<SpectrumContextValue<LinkButtonProps>>(null);\nexport const ActionButtonContext =\n  createContext<SpectrumContextValue<ActionButtonProps & { holdAffordance?: boolean }>>(null);\nexport const ToggleButtonContext =\n  createContext<SpectrumContextValue<ToggleButtonProps & { holdAffordance?: boolean }>>(null);\n\nexport function useButtonContext(): SpectrumContextValue<ButtonProps> {\n  return useContext(ButtonContext);\n}\n\nexport function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps> {\n  return useContext(LinkButtonContext);\n}\n\nexport function useActionButtonContext(): SpectrumContextValue<\n  ActionButtonProps & { holdAffordance?: boolean }\n> {\n  return useContext(ActionButtonContext);\n}\n\nexport function useToggleButtonContext(): SpectrumContextValue<\n  ToggleButtonProps & { holdAffordance?: boolean }\n> {\n  return useContext(ToggleButtonContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAa,gBAAgB,cAAiD,IAAI;AAClF,MAAa,oBAAoB,cAAqD,IAAI;AAC1F,MAAa,sBACX,cAAsF,IAAI;AAC5F,MAAa,sBACX,cAAsF,IAAI;AAE5F,SAAgB,mBAAsD;CACpE,OAAO,WAAW,aAAa;AACjC;AAEA,SAAgB,uBAA8D;CAC5E,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,yBAEd;CACA,OAAO,WAAW,mBAAmB;AACvC;AAEA,SAAgB,yBAEd;CACA,OAAO,WAAW,mBAAmB;AACvC"}

package/dist/_chunk/context.jsx

@@ -1,3 +1,17 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButton.tsx
 import { createContext, useContext } from "solid-js";
 //#region src/button/context.ts
 const ButtonContext = createContext(null);

package/dist/_chunk/context.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"context.jsx","names":[],"sources":["../../src/button/context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { ActionButtonProps } from \"./ActionButton\";\nimport type { ButtonProps } from \"./types\";\nimport type { LinkButtonProps } from \"./LinkButton\";\nimport type { ToggleButtonProps } from \"./ToggleButton\";\nimport type { SpectrumContextValue } from \"./spectrum-context\";\n\nexport const ButtonContext = createContext<SpectrumContextValue<ButtonProps>>(null);\nexport const LinkButtonContext = createContext<SpectrumContextValue<LinkButtonProps>>(null);\nexport const ActionButtonContext = createContext<SpectrumContextValue<ActionButtonProps>>(null);\nexport const ToggleButtonContext = createContext<SpectrumContextValue<ToggleButtonProps>>(null);\n\nexport function useButtonContext(): SpectrumContextValue<ButtonProps> {\n  return useContext(ButtonContext);\n}\n\nexport function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps> {\n  return useContext(LinkButtonContext);\n}\n\nexport function useActionButtonContext(): SpectrumContextValue<ActionButtonProps> {\n  return useContext(ActionButtonContext);\n}\n\nexport function useToggleButtonContext(): SpectrumContextValue<ToggleButtonProps> {\n  return useContext(ToggleButtonContext);\n}\n"],"mappings":";;AAOA,MAAa,gBAAgB,cAAiD,IAAI;AAClF,MAAa,oBAAoB,cAAqD,IAAI;AAC1F,MAAa,sBAAsB,cAAuD,IAAI;AAC9F,MAAa,sBAAsB,cAAuD,IAAI;AAE9F,SAAgB,mBAAsD;CACpE,OAAO,WAAW,aAAa;AACjC;AAEA,SAAgB,uBAA8D;CAC5E,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,yBAAkE;CAChF,OAAO,WAAW,mBAAmB;AACvC;AAEA,SAAgB,yBAAkE;CAChF,OAAO,WAAW,mBAAmB;AACvC"}
+{"version":3,"file":"context.jsx","names":[],"sources":["../../src/button/context.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\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButton.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButton.tsx\n\n// Port of packages/@react-spectrum/s2/src/ActionButton.tsx.\n// Port of packages/@react-spectrum/s2/src/Button.tsx.\n// Port of packages/@react-spectrum/s2/src/ToggleButton.tsx.\nimport { createContext, useContext } from \"solid-js\";\nimport type { ActionButtonProps } from \"./ActionButton\";\nimport type { ButtonProps } from \"./types\";\nimport type { LinkButtonProps } from \"./LinkButton\";\nimport type { ToggleButtonProps } from \"./ToggleButton\";\nimport type { SpectrumContextValue } from \"./spectrum-context\";\n\nexport const ButtonContext = createContext<SpectrumContextValue<ButtonProps>>(null);\nexport const LinkButtonContext = createContext<SpectrumContextValue<LinkButtonProps>>(null);\nexport const ActionButtonContext =\n  createContext<SpectrumContextValue<ActionButtonProps & { holdAffordance?: boolean }>>(null);\nexport const ToggleButtonContext =\n  createContext<SpectrumContextValue<ToggleButtonProps & { holdAffordance?: boolean }>>(null);\n\nexport function useButtonContext(): SpectrumContextValue<ButtonProps> {\n  return useContext(ButtonContext);\n}\n\nexport function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps> {\n  return useContext(LinkButtonContext);\n}\n\nexport function useActionButtonContext(): SpectrumContextValue<\n  ActionButtonProps & { holdAffordance?: boolean }\n> {\n  return useContext(ActionButtonContext);\n}\n\nexport function useToggleButtonContext(): SpectrumContextValue<\n  ToggleButtonProps & { holdAffordance?: boolean }\n> {\n  return useContext(ToggleButtonContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAa,gBAAgB,cAAiD,IAAI;AAClF,MAAa,oBAAoB,cAAqD,IAAI;AAC1F,MAAa,sBACX,cAAsF,IAAI;AAC5F,MAAa,sBACX,cAAsF,IAAI;AAE5F,SAAgB,mBAAsD;CACpE,OAAO,WAAW,aAAa;AACjC;AAEA,SAAgB,uBAA8D;CAC5E,OAAO,WAAW,iBAAiB;AACrC;AAEA,SAAgB,yBAEd;CACA,OAAO,WAAW,mBAAmB;AACvC;AAEA,SAAgB,yBAEd;CACA,OAAO,WAAW,mBAAmB;AACvC"}