@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/_chunk/color.jsx.map

@@ -0,0 +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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"}

package/dist/_chunk/context.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "solid-js";
+//#region src/button/context.ts
+const ButtonContext = createContext(null);
+const LinkButtonContext = createContext(null);
+const ActionButtonContext = createContext(null);
+const ToggleButtonContext = createContext(null);
+function useButtonContext() {
+	return useContext(ButtonContext);
+}
+function useLinkButtonContext() {
+	return useContext(LinkButtonContext);
+}
+function useActionButtonContext() {
+	return useContext(ActionButtonContext);
+}
+function useToggleButtonContext() {
+	return useContext(ToggleButtonContext);
+}
+//#endregion
+export { useActionButtonContext as a, useToggleButtonContext as c, ToggleButtonContext as i, ButtonContext as n, useButtonContext as o, LinkButtonContext as r, useLinkButtonContext as s, ActionButtonContext as t };
+
+//# sourceMappingURL=context.js.map

package/dist/_chunk/context.js.map

@@ -0,0 +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"}

package/dist/_chunk/context.jsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "solid-js";
+//#region src/button/context.ts
+const ButtonContext = createContext(null);
+const LinkButtonContext = createContext(null);
+const ActionButtonContext = createContext(null);
+const ToggleButtonContext = createContext(null);
+function useButtonContext() {
+	return useContext(ButtonContext);
+}
+function useLinkButtonContext() {
+	return useContext(LinkButtonContext);
+}
+function useActionButtonContext() {
+	return useContext(ActionButtonContext);
+}
+function useToggleButtonContext() {
+	return useContext(ToggleButtonContext);
+}
+//#endregion
+export { useActionButtonContext as a, useToggleButtonContext as c, ToggleButtonContext as i, ButtonContext as n, useButtonContext as o, LinkButtonContext as r, useLinkButtonContext as s, ActionButtonContext as t };
+
+//# sourceMappingURL=context.jsx.map

package/dist/_chunk/context.jsx.map

@@ -0,0 +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"}

package/dist/_chunk/contextualhelp.js

@@ -0,0 +1,257 @@
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.js";
+import { t as s2IntlStrings } from "./intl.js";
+import { t as ActionButton } from "./ActionButton.js";
+import { r as createIcon } from "./spectrum-icon.js";
+import { c as TextContext, f as HeadingContext, i as FooterContext, n as ContentContext } from "./text.js";
+import { t as InfoCircleIcon } from "./InfoCircleIcon.js";
+import { Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "../popover/index.js";
+import { createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, spread, style, template } from "solid-js/web";
+import { createContext, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+import { createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
+import { MenuTriggerContext } from "@proyecto-viviana/solidaria-components";
+//#region src/icon/s2wf-icons/HelpCircleIcon.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 20 20"><path d=m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z fill="var(--iconPrimary, #222)"></path><path d=m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z fill="var(--iconPrimary, #222)"></path><path d=m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z fill="var(--iconPrimary, #222)">`);
+function HelpCircleIconSvg(props) {
+	const { class: className, ...rest } = props;
+	return (() => {
+		var _el$ = getNextElement(_tmpl$$1);
+		spread(_el$, mergeProps(rest, { "class": className }), true, true);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+const HelpCircleIcon = createIcon(HelpCircleIconSvg);
+//#endregion
+//#region src/contextualhelp/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=" NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151"><div class=" sd151 _ta151 _ub151 K40ub4c151 _oa151 _Le151 _Na151 Pa151 od151 nd151 kd151 jd151 Th151 Qh151 Sh151 Rh151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151">`);
+const ContextualHelpContext = createContext(null);
+const contextualHelpInnerStyle = { margin: "-24px" };
+const contextualHelpHeading = " uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151 Jy151 Gv151 Iy151 Hy151";
+const contextualHelpText = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151";
+const contextualHelpFooter = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 JC151";
+/**
+* A popover with contextual help sizing for unavailable menu item affordances.
+*/
+function ContextualHelpPopover(props) {
+	const [local, popoverProps] = splitProps(props, ["children", "class"]);
+	const menuTriggerContext = useContext(MenuTriggerContext);
+	const titleId = createUniqueId();
+	const menuTriggerMenuProps = () => menuTriggerContext?.menuProps;
+	const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;
+	const ariaLabelledBy = () => popoverProps["aria-labelledby"] ?? (popoverProps["aria-label"] ? void 0 : titleId);
+	const headingContext = { slots: {
+		default: { styles: contextualHelpHeading },
+		title: {
+			id: titleId,
+			level: 2,
+			styles: contextualHelpHeading
+		}
+	} };
+	const textContext = { slots: { default: {
+		styles: contextualHelpText,
+		"data-rsp-slot": "text"
+	} } };
+	const contentContext = { styles: contextualHelpText };
+	const footerContext = { styles: contextualHelpFooter };
+	return createComponent(Popover$1, mergeProps(popoverProps, {
+		get id() {
+			return popoverId();
+		},
+		get ["aria-labelledby"]() {
+			return ariaLabelledBy();
+		},
+		hideArrow: true,
+		trigger: "SubmenuTrigger",
+		get placement() {
+			return popoverProps.placement ?? "end top";
+		},
+		get offset() {
+			return popoverProps.offset ?? -2;
+		},
+		get crossOffset() {
+			return popoverProps.crossOffset ?? -8;
+		},
+		padding: "none",
+		get ["class"]() {
+			return local.class;
+		},
+		get children() {
+			var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild;
+			insert(_el$2, createComponent(TextContext.Provider, {
+				value: textContext,
+				get children() {
+					return createComponent(ContentContext.Provider, {
+						value: contentContext,
+						get children() {
+							return createComponent(FooterContext.Provider, {
+								value: footerContext,
+								get children() {
+									return createComponent(HeadingContext.Provider, {
+										value: headingContext,
+										get children() {
+											return local.children;
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			}));
+			effect((_$p) => style(_el$2, contextualHelpInnerStyle, _$p));
+			return _el$;
+		}
+	}));
+}
+function ContextualHelp(props) {
+	const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);
+	const merged = mergeProps$1(contextProps ?? {}, props);
+	const [local, popoverProps] = splitProps(merged, [
+		"children",
+		"content",
+		"triggerLabel",
+		"variant",
+		"size",
+		"defaultOpen",
+		"isOpen",
+		"onOpenChange",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"id",
+		"ref",
+		"slot",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const titleId = createUniqueId();
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	const variant = () => local.variant ?? "help";
+	const variantLabel = () => stringFormatter().format(`contextualhelp.${variant()}`);
+	const triggerLabel = () => {
+		const explicitLabel = local.triggerLabel ?? local["aria-label"];
+		return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();
+	};
+	const icon = () => variant() === "info" ? createComponent(InfoCircleIcon, {}) : createComponent(HelpCircleIcon, {});
+	const content = () => local.content ?? local.children;
+	const triggerDomProps = () => filterDOMProps(merged, { labelable: true });
+	const triggerClassName = () => [
+		contextProps?.UNSAFE_className,
+		contextProps?.class,
+		props.UNSAFE_className,
+		props.class
+	].filter(Boolean).join(" ");
+	const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const triggerUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const triggerRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const headingContext = { slots: {
+		default: { styles: contextualHelpHeading },
+		title: {
+			id: titleId,
+			level: 2,
+			styles: contextualHelpHeading
+		}
+	} };
+	const textContext = { slots: { default: {
+		styles: contextualHelpText,
+		"data-rsp-slot": "text"
+	} } };
+	const contentContext = { styles: contextualHelpText };
+	const footerContext = { styles: contextualHelpFooter };
+	return createComponent(PopoverTrigger$1, mergeProps({
+		get defaultOpen() {
+			return local.defaultOpen;
+		},
+		get isOpen() {
+			return local.isOpen;
+		},
+		get onOpenChange() {
+			return local.onOpenChange;
+		}
+	}, { get children() {
+		return [createComponent(ActionButton, mergeProps(triggerDomProps, {
+			get id() {
+				return local.id;
+			},
+			get ["aria-label"]() {
+				return triggerLabel();
+			},
+			get ["aria-labelledby"]() {
+				return local["aria-labelledby"];
+			},
+			get ["aria-describedby"]() {
+				return local["aria-describedby"];
+			},
+			get ["aria-details"]() {
+				return local["aria-details"];
+			},
+			"aria-haspopup": "dialog",
+			ref: (element) => {
+				triggerRef(element);
+			},
+			get size() {
+				return local.size ?? "XS";
+			},
+			isQuiet: true,
+			get styles() {
+				return triggerStyles();
+			},
+			get UNSAFE_className() {
+				return triggerClassName();
+			},
+			get UNSAFE_style() {
+				return triggerUnsafeStyle();
+			},
+			get children() {
+				return icon();
+			}
+		})), createComponent(Popover$1, mergeProps(popoverProps, {
+			"aria-labelledby": titleId,
+			hideArrow: true,
+			get placement() {
+				return popoverProps.placement ?? "bottom start";
+			},
+			get containerPadding() {
+				return popoverProps.containerPadding ?? 8;
+			},
+			offset: 8,
+			get shouldFlip() {
+				return popoverProps.shouldFlip ?? true;
+			},
+			padding: "none",
+			get children() {
+				var _el$3 = getNextElement(_tmpl$), _el$4 = _el$3.firstChild;
+				insert(_el$4, createComponent(TextContext.Provider, {
+					value: textContext,
+					get children() {
+						return createComponent(ContentContext.Provider, {
+							value: contentContext,
+							get children() {
+								return createComponent(FooterContext.Provider, {
+									value: footerContext,
+									get children() {
+										return createComponent(HeadingContext.Provider, {
+											value: headingContext,
+											get children() {
+												return content();
+											}
+										});
+									}
+								});
+							}
+						});
+					}
+				}));
+				effect((_$p) => style(_el$4, contextualHelpInnerStyle, _$p));
+				return _el$3;
+			}
+		}))];
+	} }));
+}
+//#endregion
+export { ContextualHelpContext as n, ContextualHelpPopover as r, ContextualHelp as t };
+
+//# sourceMappingURL=contextualhelp.js.map

package/dist/_chunk/contextualhelp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextualhelp.js","names":["JSX","createIcon","HelpCircleIconSvg","props","SvgSVGAttributes","SVGSVGElement","Element","class","className","rest","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$runHydrationEvents","HelpCircleIconProps","HelpCircleIcon"],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from vendored React Spectrum S2 icon sources.\n * Do not edit by hand.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createIcon } from \"../spectrum-icon\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={className}\n    >\n      <path\n        d=\"m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","import {\n  type JSX,\n  createContext,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { MenuTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext.Provider value={textContext}>\n            <ContentContext.Provider value={contentContext}>\n              <FooterContext.Provider value={footerContext}>\n                <HeadingContext.Provider value={headingContext}>\n                  {local.children}\n                </HeadingContext.Provider>\n              </FooterContext.Provider>\n            </ContentContext.Provider>\n          </TextContext.Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        aria-haspopup=\"dialog\"\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={popoverProps.placement ?? \"bottom start\"}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={popoverProps.shouldFlip ?? true}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext.Provider value={textContext}>\n              <ContentContext.Provider value={contentContext}>\n                <FooterContext.Provider value={footerContext}>\n                  <HeadingContext.Provider value={headingContext}>\n                    {content()}\n                  </HeadingContext.Provider>\n                </FooterContext.Provider>\n              </ContentContext.Provider>\n            </TextContext.Provider>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}