@proyecto-viviana/ui 0.6.1 → 0.6.3

package/dist/calendar/DatePicker.jsx

@@ -170,7 +170,7 @@ const datePickerLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -497,7 +497,7 @@ const helpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/calendar/DatePicker.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.jsx","names":[],"sources":["../../src/calendar/DatePicker.tsx"],"sourcesContent":["// @ts-nocheck - style-system types need a dedicated pass; removing this would require\n// fixing ~20 style-definition type mismatches unrelated to component behavior.\nimport {\n  createContext,\n  createSignal,\n  type JSX,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  DatePicker as HeadlessDatePicker,\n  DatePickerLabel as HeadlessDatePickerLabel,\n  DatePickerDescription as HeadlessDatePickerDescription,\n  DatePickerErrorMessage as HeadlessDatePickerErrorMessage,\n  DatePickerButton,\n  DatePickerContent,\n  DateInput,\n  DateSegment,\n  useDatePickerContext,\n  type DatePickerProps as HeadlessDatePickerProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createHover, useLocale } from \"@proyecto-viviana/solidaria\";\nimport { Calendar } from \"./index\";\nimport { TimeField } from \"../datepicker\";\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  setColorScheme,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport S2CalendarIcon from \"../icon/s2wf-icons/CalendarIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps, useTheme } from \"../provider\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\n\nexport type DatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype NormalizedDatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type DatePickerFirstDayOfWeek = \"sun\" | \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\";\n\nexport interface DatePickerProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDatePickerProps<T>,\n  \"class\" | \"style\" | \"children\" | \"firstDayOfWeek\" | \"visibleMonths\"\n> {\n  /** The size of the picker. @default 'md' */\n  size?: DatePickerSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Label for the field. */\n  label?: string;\n  /** Description text. */\n  description?: string;\n  /** Error message. */\n  errorMessage?: string;\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Placeholder text. */\n  placeholder?: string;\n  /**\n   * The maximum number of months to display at once in the calendar popover.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n  /** The day that starts the week. */\n  firstDayOfWeek?: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const DatePickerContext = createContext<SpectrumContextValue<DatePickerProps<any>>>(null);\n\nfunction normalizeDatePickerSize(size: DatePickerSize | undefined): NormalizedDatePickerSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction normalizeFirstDayOfWeek(\n  firstDayOfWeek: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined,\n): 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined {\n  switch (firstDayOfWeek) {\n    case \"sun\":\n      return 0;\n    case \"mon\":\n      return 1;\n    case \"tue\":\n      return 2;\n    case \"wed\":\n      return 3;\n    case \"thu\":\n      return 4;\n    case \"fri\":\n      return 5;\n    case \"sat\":\n      return 6;\n    default:\n      return firstDayOfWeek;\n  }\n}\n\nfunction requiredIconStyle(size: NormalizedDatePickerSize): 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 datePickerFieldGroupStyle(size: NormalizedDatePickerSize): JSX.CSSProperties | undefined {\n  if (size !== \"L\" && size !== \"XL\") return undefined;\n\n  return {\n    \"padding-inline-end\": \"6px\",\n    width: size === \"L\" ? \"224px\" : \"240px\",\n  };\n}\n\nconst datePickerRoot = style(\n  {\n    ...field(),\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst datePickerLabelWrapper = style({\n  gridArea: \"label\",\n  display: \"inline\",\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst datePickerLabel = style<any>({\n  ...fieldLabel(),\n});\n\nconst datePickerFieldGroup = style({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  transition: \"default\",\n  textWrap: \"nowrap\",\n  paddingStart: \"edge-to-text\",\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: \"[6px]\",\n      XL: \"[6px]\",\n    },\n  },\n  backgroundColor: {\n    // S2 `fieldGroupStyles.backgroundColor` (Field.tsx) is a FLAT `gray-25` with\n    // no `isHovered` variant — the field surface does not lighten/darken on hover\n    // (only its `color: baseColor(\"neutral\")` does). Wrapping this in\n    // `baseColor(\"gray-25\")` injected a phantom `gray-25:hovered` that darkened\n    // the field to 248 on hover while S2 stays at 255 (matches certified\n    // DateField/TimeField, which use the flat token).\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  borderColor: {\n    default: \"well-border\",\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  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    // Mirror S2 `fieldGroupStyles.color` (Field.tsx): the disabled color nests\n    // its own forced-colors branch so a disabled field in forced-colors resolves\n    // to `GrayText`, not the flat `ButtonText`. A flat `isDisabled: \"disabled\"`\n    // loses that branch and paints CanvasText in forced-colors.\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst dateInputContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst dateSegment = style<{ isFocused?: boolean; isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst calendarIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  size: fontRelative(14),\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nconst calendarButton = style<{\n  isOpen?: boolean;\n  isDisabled?: boolean;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocusVisible?: boolean;\n  size: NormalizedDatePickerSize;\n}>({\n  ...focusRing(),\n  ...controlBorderRadius(\"sm\"),\n  position: \"relative\",\n  font: {\n    size: {\n      S: \"ui-sm\",\n      M: \"ui\",\n      L: \"ui-lg\",\n      XL: \"ui-xl\",\n    },\n  },\n  cursor: \"default\",\n  display: \"flex\",\n  textAlign: \"center\",\n  borderStyle: \"none\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32,\n    },\n  },\n  height: \"auto\",\n  marginStart: \"text-to-control\",\n  aspectRatio: \"square\",\n  flexShrink: 0,\n  transition: {\n    default: \"default\",\n    forcedColors: \"none\",\n  },\n  backgroundColor: {\n    default: baseColor(\"gray-100\"),\n    isOpen: \"gray-200\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isHovered: \"Highlight\",\n      isOpen: \"Highlight\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n    forcedColors: \"ButtonFace\",\n  },\n});\n\nconst helpText = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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  // Mirror S2's `helpTextStyles` (Field.mjs) exactly — the same style the\n  // certified DateField help text carries. `--iconPrimary` tints the FieldError\n  // icon and `cursor` is set on the help text ITSELF (class `rD151`/`ri151`), not\n  // inherited: `text` at rest, `default` when disabled.\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst datePickerPopover = style<{\n  colorScheme: \"light\" | \"dark\" | \"light dark\";\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  isEntering?: boolean;\n  isExiting?: boolean;\n}>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"layer-2\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: frost the scene behind the surface — the container bg is the\n  // translucent `--surface-card`; the blur is what makes it read as glass.\n  backdropFilter: \"var(--blur-card)\",\n  boxShadow: \"elevated\",\n  borderRadius: \"panel\",\n  display: \"flex\",\n  width: \"[max-content]\",\n  maxWidth: \"calc(100vw - 24px)\",\n  padding: 0,\n  minHeight: 0,\n  overflow: \"visible\",\n  boxSizing: \"border-box\",\n  isolation: \"isolate\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark(\"transparent-white-25\", \"gray-200\"),\n    forcedColors: \"ButtonBorder\",\n  },\n  // Byte-copied from the shared `popoverStyles` enter/exit motion (which is\n  // itself S2 `Popover.tsx`'s `popover()` motion). S2's DatePicker popover is a\n  // plain `<Popover>`, so its enter transition IS this generic opacity/translate\n  // fade — NOT a bespoke keyframe. The port's DatePicker owns a private\n  // `DatePickerContent` that bypasses the shared Popover, so the same tokens are\n  // mirrored here and driven by `createEnterAnimation` (data-entering) below.\n  opacity: {\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  pointerEvents: {\n    isExiting: \"none\",\n  },\n});\n\nconst datePickerPopoverInner = style({\n  padding: 0,\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  borderRadius: \"inherit\",\n  overflow: \"auto\",\n  position: \"relative\",\n  width: \"full\",\n  maxSize: \"[inherit]\",\n});\n\nconst datePickerPopoverFrame = style({\n  paddingX: 16,\n  paddingY: 24,\n  overflow: \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  boxSizing: \"border-box\",\n  size: \"full\",\n});\n\nconst datePickerCalendarPopoverStyle: JSX.CSSProperties = {\n  width: \"272px\",\n  \"max-width\": \"100%\",\n};\n\n/**\n * A date picker combines a date field and a calendar popup.\n */\n/**\n * The presentation FieldGroup shell. Mirrors the S2/RAC oracle's `_r_3_` node:\n * a `role=\"presentation\"` div carrying the field label (`aria-labelledby`) +\n * describedby + the arrow-navigation/press layer, all sourced from\n * `pickerAria.groupProps`. A context-consuming component (not inline JSX in the\n * DatePicker body) so `useDatePickerContext()` resolves the provider inside\n * `HeadlessDatePicker`. The styled class/style/onClick layer on top.\n */\nfunction DatePickerFieldGroup(props: {\n  size: NormalizedDatePickerSize;\n  isInvalid: boolean;\n  isDisabled: boolean;\n  style?: JSX.CSSProperties;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  children?: JSX.Element;\n}): JSX.Element {\n  const datePicker = useDatePickerContext();\n  // S2's FieldGroup renders on RAC's <Group>, whose `useHover` publishes\n  // `data-hovered`. The field text color is `baseColor(\"neutral\")`, which\n  // brightens one gray step (gray-800 → gray-900) on hover. S2's style macro\n  // applies that hover step as a *renderProps-gated atomic class* — the class\n  // is included in `fieldGroupStyles({isHovered})` only when the Group reports\n  // `isHovered`, NOT via a bare `[data-hovered]` CSS selector. So the class\n  // itself must be recomputed here with `isHovered`; emitting the attribute\n  // alone never brightens the text (D7). Suppress hover while disabled,\n  // matching `useHover({isDisabled})`.\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return props.isDisabled;\n    },\n  });\n  return (\n    <div\n      {...datePicker.pickerAria.groupProps}\n      {...hoverProps}\n      // S2 seeds its FieldGroup's RAC <Group> with role=\"presentation\", overriding\n      // the faithful role=\"group\" that `createDatePicker` returns (RAC useDatePicker\n      // groupProps). Placed after the spread so it wins (JSX later-attr precedence).\n      role=\"presentation\"\n      class={datePickerFieldGroup({\n        size: props.size,\n        isInvalid: props.isInvalid,\n        isDisabled: props.isDisabled,\n        isHovered: isHovered(),\n      })}\n      style={props.style}\n      onClick={props.onClick}\n      data-hovered={isHovered() ? \"true\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport function DatePicker<T extends DateValue = CalendarDate>(\n  props: DatePickerProps<T>,\n): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(DatePickerContext), (props as any).slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, calendarProps, rest] = splitProps(\n    merged,\n    [\n      \"size\",\n      \"class\",\n      \"label\",\n      \"description\",\n      \"errorMessage\",\n      \"contextualHelp\",\n      \"isInvalid\",\n      \"placeholder\",\n      \"maxVisibleMonths\",\n    ],\n    [\n      \"minValue\",\n      \"maxValue\",\n      \"isDateUnavailable\",\n      \"firstDayOfWeek\",\n      \"pageBehavior\",\n      \"placeholderValue\",\n      \"createCalendar\",\n    ],\n  );\n\n  const size = () => normalizeDatePickerSize(local.size);\n  const isInvalid = () => local.isInvalid === true;\n  const isDisabled = () => rest.isDisabled === true;\n  const visibleMonths = () => Math.max(1, Number(local.maxVisibleMonths ?? 1));\n  const locale = useLocale();\n  // Mirrors S2's CalendarButton `buttonRef` → `pressScale(buttonRef)`: the port\n  // sizes the press transform against the real trigger element.\n  const [buttonEl, setButtonEl] = createSignal<HTMLButtonElement>();\n\n  const hasTime = () => {\n    const granularity = (rest as { granularity?: string }).granularity;\n    if (granularity && granularity !== \"day\") return true;\n    const value = (rest as { value?: DateValue }).value;\n    if (value && \"hour\" in value) return true;\n    const defaultValue = (rest as { defaultValue?: DateValue }).defaultValue;\n    if (defaultValue && \"hour\" in defaultValue) return true;\n    return false;\n  };\n\n  return (\n    <HeadlessDatePicker\n      {...calendarProps}\n      {...rest}\n      firstDayOfWeek={normalizeFirstDayOfWeek(calendarProps.firstDayOfWeek)}\n      visibleMonths={visibleMonths()}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      isInvalid={isInvalid()}\n      class={(renderProps) =>\n        [\n          local.class,\n          datePickerRoot({\n            ...renderProps,\n            size: size(),\n            labelPosition: \"top\",\n            isInForm: false,\n          }),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n    >\n      <Show when={local.label}>\n        <div class={datePickerLabelWrapper({ size: size(), labelPosition: \"top\" })}>\n          <HeadlessDatePickerLabel\n            class={datePickerLabel({ size: size(), isDisabled: isDisabled() })}\n          >\n            {local.label}\n            <Show when={rest.isRequired}>\n              <span class={noWrap}>\n                &nbsp;\n                <AsteriskIcon\n                  size={size() === \"S\" ? \"M\" : size()}\n                  styles={requiredIcon}\n                  style={requiredIconStyle(size())}\n                  aria-hidden=\"true\"\n                />\n              </span>\n            </Show>\n          </HeadlessDatePickerLabel>\n          <Show when={local.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {local.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <DatePickerFieldGroup\n        size={size()}\n        isInvalid={isInvalid()}\n        isDisabled={isDisabled()}\n        style={datePickerFieldGroupStyle(size())}\n        onClick={(e) => {\n          const target = e.target as HTMLElement;\n          if (!target.closest('button, [role=\"spinbutton\"]')) {\n            const segments = Array.from(\n              e.currentTarget.querySelectorAll<HTMLElement>(\n                '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n              ),\n            );\n            for (let i = segments.length - 1; i >= 0; i--) {\n              if (!segments[i].hasAttribute(\"data-placeholder\")) {\n                segments[i].focus();\n                return;\n              }\n            }\n            segments[0]?.focus();\n          }\n        }}\n      >\n        {/*\n          Mirror S2 DatePicker's `<DateInputContainer><DateInput /></…>` nesting\n          (DatePicker.tsx line 248) — and the port's own DateField. The flex\n          container (`dateInputContainer`) lives on a WRAPPING div; the\n          AriaDateInput group keeps an EMPTY class so it stays an unstyled block\n          div. This matters: if the flex class sits on the group itself, the\n          segments become direct flex items and CSS blockifies them\n          (display:inline → block) and sizes them as flex items — the segment\n          must stay inline/auto to match the S2 oracle.\n        */}\n        <div class={dateInputContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={({ isFocused, isDisabled }) =>\n                  dateSegment({\n                    isFocused,\n                    isDisabled,\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n\n        <DatePickerButton\n          ref={setButtonEl}\n          class={({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible }) =>\n            calendarButton({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible, size: size() })\n          }\n          style={pressScale(buttonEl)}\n        >\n          <S2CalendarIcon styles={calendarIcon} />\n        </DatePickerButton>\n\n        <DatePickerPopup\n          size={size()}\n          hasTime={hasTime()}\n          maxVisibleMonths={visibleMonths()}\n          calendarProps={calendarProps}\n          hourCycle={(rest as { hourCycle?: 12 | 24 }).hourCycle}\n          shouldForceLeadingZeros={\n            (rest as { shouldForceLeadingZeros?: boolean }).shouldForceLeadingZeros\n          }\n        />\n      </DatePickerFieldGroup>\n\n      <Show when={local.description && !isInvalid()}>\n        <HeadlessDatePickerDescription\n          class={helpText({ size: size(), isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {local.description}\n        </HeadlessDatePickerDescription>\n      </Show>\n\n      <Show when={isInvalid() && local.errorMessage}>\n        <HeadlessDatePickerErrorMessage\n          class={helpText({ size: size(), isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {local.errorMessage}\n        </HeadlessDatePickerErrorMessage>\n      </Show>\n    </HeadlessDatePicker>\n  );\n}\n\nfunction DatePickerPopup(props: {\n  size: NormalizedDatePickerSize;\n  hasTime?: boolean;\n  maxVisibleMonths?: number;\n  calendarProps?: Record<string, unknown>;\n  hourCycle?: 12 | 24;\n  shouldForceLeadingZeros?: boolean;\n}): JSX.Element {\n  const theme = useTheme();\n  const datePicker = useDatePickerContext();\n  const timeGranularity = () =>\n    datePicker.datePickerState.granularity === \"day\"\n      ? \"minute\"\n      : datePicker.datePickerState.granularity;\n\n  return (\n    <DatePickerContent\n      class={(rp) =>\n        datePickerPopover({\n          colorScheme: theme.colorScheme,\n          placement: rp.placement ?? undefined,\n          isEntering: rp.isEntering,\n          isExiting: rp.isExiting,\n        })\n      }\n    >\n      <div class={datePickerPopoverInner}>\n        <div class={datePickerPopoverFrame}>\n          <Calendar\n            size=\"md\"\n            visibleMonths={props.maxVisibleMonths}\n            UNSAFE_style={datePickerCalendarPopoverStyle}\n            {...(props.calendarProps ?? {})}\n          />\n          <Show when={props.hasTime}>\n            <TimeField\n              size=\"md\"\n              label=\"Time\"\n              value={datePicker.datePickerState.timeValue() ?? undefined}\n              granularity={timeGranularity()}\n              hourCycle={props.hourCycle}\n              shouldForceLeadingZeros={props.shouldForceLeadingZeros}\n              onChange={(nextValue) => {\n                if (nextValue) {\n                  datePicker.datePickerState.setTimeValue(nextValue);\n                }\n              }}\n            />\n          </Show>\n        </div>\n      </div>\n    </DatePickerContent>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.jsx","names":[],"sources":["../../src/calendar/DatePicker.tsx"],"sourcesContent":["// @ts-nocheck - style-system types need a dedicated pass; removing this would require\n// fixing ~20 style-definition type mismatches unrelated to component behavior.\nimport {\n  createContext,\n  createSignal,\n  type JSX,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  DatePicker as HeadlessDatePicker,\n  DatePickerLabel as HeadlessDatePickerLabel,\n  DatePickerDescription as HeadlessDatePickerDescription,\n  DatePickerErrorMessage as HeadlessDatePickerErrorMessage,\n  DatePickerButton,\n  DatePickerContent,\n  DateInput,\n  DateSegment,\n  useDatePickerContext,\n  type DatePickerProps as HeadlessDatePickerProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createHover, useLocale } from \"@proyecto-viviana/solidaria\";\nimport { Calendar } from \"./index\";\nimport { TimeField } from \"../datepicker\";\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  setColorScheme,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport S2CalendarIcon from \"../icon/s2wf-icons/CalendarIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps, useTheme } from \"../provider\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\n\nexport type DatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype NormalizedDatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type DatePickerFirstDayOfWeek = \"sun\" | \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\";\n\nexport interface DatePickerProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDatePickerProps<T>,\n  \"class\" | \"style\" | \"children\" | \"firstDayOfWeek\" | \"visibleMonths\"\n> {\n  /** The size of the picker. @default 'md' */\n  size?: DatePickerSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Label for the field. */\n  label?: string;\n  /** Description text. */\n  description?: string;\n  /** Error message. */\n  errorMessage?: string;\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Placeholder text. */\n  placeholder?: string;\n  /**\n   * The maximum number of months to display at once in the calendar popover.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n  /** The day that starts the week. */\n  firstDayOfWeek?: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const DatePickerContext = createContext<SpectrumContextValue<DatePickerProps<any>>>(null);\n\nfunction normalizeDatePickerSize(size: DatePickerSize | undefined): NormalizedDatePickerSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction normalizeFirstDayOfWeek(\n  firstDayOfWeek: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined,\n): 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined {\n  switch (firstDayOfWeek) {\n    case \"sun\":\n      return 0;\n    case \"mon\":\n      return 1;\n    case \"tue\":\n      return 2;\n    case \"wed\":\n      return 3;\n    case \"thu\":\n      return 4;\n    case \"fri\":\n      return 5;\n    case \"sat\":\n      return 6;\n    default:\n      return firstDayOfWeek;\n  }\n}\n\nfunction requiredIconStyle(size: NormalizedDatePickerSize): 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 datePickerFieldGroupStyle(size: NormalizedDatePickerSize): JSX.CSSProperties | undefined {\n  if (size !== \"L\" && size !== \"XL\") return undefined;\n\n  return {\n    \"padding-inline-end\": \"6px\",\n    width: size === \"L\" ? \"224px\" : \"240px\",\n  };\n}\n\nconst datePickerRoot = style(\n  {\n    ...field(),\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst datePickerLabelWrapper = style({\n  gridArea: \"label\",\n  display: \"inline\",\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst datePickerLabel = style<any>({\n  ...fieldLabel(),\n});\n\nconst datePickerFieldGroup = style({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  transition: \"default\",\n  textWrap: \"nowrap\",\n  paddingStart: \"edge-to-text\",\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: \"[6px]\",\n      XL: \"[6px]\",\n    },\n  },\n  backgroundColor: {\n    // S2 `fieldGroupStyles.backgroundColor` (Field.tsx) is a FLAT `gray-25` with\n    // no `isHovered` variant — the field surface does not lighten/darken on hover\n    // (only its `color: baseColor(\"neutral\")` does). Wrapping this in\n    // `baseColor(\"gray-25\")` injected a phantom `gray-25:hovered` that darkened\n    // the field to 248 on hover while S2 stays at 255 (matches certified\n    // DateField/TimeField, which use the flat token).\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  borderColor: {\n    default: \"well-border\",\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  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    // Mirror S2 `fieldGroupStyles.color` (Field.tsx): the disabled color nests\n    // its own forced-colors branch so a disabled field in forced-colors resolves\n    // to `GrayText`, not the flat `ButtonText`. A flat `isDisabled: \"disabled\"`\n    // loses that branch and paints CanvasText in forced-colors.\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst dateInputContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst dateSegment = style<{ isFocused?: boolean; isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst calendarIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  size: fontRelative(14),\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nconst calendarButton = style<{\n  isOpen?: boolean;\n  isDisabled?: boolean;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocusVisible?: boolean;\n  size: NormalizedDatePickerSize;\n}>({\n  ...focusRing(),\n  ...controlBorderRadius(\"sm\"),\n  position: \"relative\",\n  font: {\n    size: {\n      S: \"ui-sm\",\n      M: \"ui\",\n      L: \"ui-lg\",\n      XL: \"ui-xl\",\n    },\n  },\n  cursor: \"default\",\n  display: \"flex\",\n  textAlign: \"center\",\n  borderStyle: \"none\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32,\n    },\n  },\n  height: \"auto\",\n  marginStart: \"text-to-control\",\n  aspectRatio: \"square\",\n  flexShrink: 0,\n  transition: {\n    default: \"default\",\n    forcedColors: \"none\",\n  },\n  backgroundColor: {\n    default: baseColor(\"gray-100\"),\n    isOpen: \"gray-200\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isHovered: \"Highlight\",\n      isOpen: \"Highlight\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n    forcedColors: \"ButtonFace\",\n  },\n});\n\nconst helpText = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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  // Mirror S2's `helpTextStyles` (Field.mjs) exactly — the same style the\n  // certified DateField help text carries. `--iconPrimary` tints the FieldError\n  // icon and `cursor` is set on the help text ITSELF (class `rD151`/`ri151`), not\n  // inherited: `text` at rest, `default` when disabled.\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst datePickerPopover = style<{\n  colorScheme: \"light\" | \"dark\" | \"light dark\";\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  isEntering?: boolean;\n  isExiting?: boolean;\n}>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"layer-2\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: frost the scene behind the surface — the container bg is the\n  // translucent `--surface-card`; the blur is what makes it read as glass.\n  backdropFilter: \"var(--blur-card)\",\n  boxShadow: \"elevated\",\n  borderRadius: \"panel\",\n  display: \"flex\",\n  width: \"[max-content]\",\n  maxWidth: \"calc(100vw - 24px)\",\n  padding: 0,\n  minHeight: 0,\n  overflow: \"visible\",\n  boxSizing: \"border-box\",\n  isolation: \"isolate\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark(\"transparent-white-25\", \"gray-200\"),\n    forcedColors: \"ButtonBorder\",\n  },\n  // Byte-copied from the shared `popoverStyles` enter/exit motion (which is\n  // itself S2 `Popover.tsx`'s `popover()` motion). S2's DatePicker popover is a\n  // plain `<Popover>`, so its enter transition IS this generic opacity/translate\n  // fade — NOT a bespoke keyframe. The port's DatePicker owns a private\n  // `DatePickerContent` that bypasses the shared Popover, so the same tokens are\n  // mirrored here and driven by `createEnterAnimation` (data-entering) below.\n  opacity: {\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  pointerEvents: {\n    isExiting: \"none\",\n  },\n});\n\nconst datePickerPopoverInner = style({\n  padding: 0,\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  borderRadius: \"inherit\",\n  overflow: \"auto\",\n  position: \"relative\",\n  width: \"full\",\n  maxSize: \"[inherit]\",\n});\n\nconst datePickerPopoverFrame = style({\n  paddingX: 16,\n  paddingY: 24,\n  overflow: \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  boxSizing: \"border-box\",\n  size: \"full\",\n});\n\nconst datePickerCalendarPopoverStyle: JSX.CSSProperties = {\n  width: \"272px\",\n  \"max-width\": \"100%\",\n};\n\n/**\n * A date picker combines a date field and a calendar popup.\n */\n/**\n * The presentation FieldGroup shell. Mirrors the S2/RAC oracle's `_r_3_` node:\n * a `role=\"presentation\"` div carrying the field label (`aria-labelledby`) +\n * describedby + the arrow-navigation/press layer, all sourced from\n * `pickerAria.groupProps`. A context-consuming component (not inline JSX in the\n * DatePicker body) so `useDatePickerContext()` resolves the provider inside\n * `HeadlessDatePicker`. The styled class/style/onClick layer on top.\n */\nfunction DatePickerFieldGroup(props: {\n  size: NormalizedDatePickerSize;\n  isInvalid: boolean;\n  isDisabled: boolean;\n  style?: JSX.CSSProperties;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  children?: JSX.Element;\n}): JSX.Element {\n  const datePicker = useDatePickerContext();\n  // S2's FieldGroup renders on RAC's <Group>, whose `useHover` publishes\n  // `data-hovered`. The field text color is `baseColor(\"neutral\")`, which\n  // brightens one gray step (gray-800 → gray-900) on hover. S2's style macro\n  // applies that hover step as a *renderProps-gated atomic class* — the class\n  // is included in `fieldGroupStyles({isHovered})` only when the Group reports\n  // `isHovered`, NOT via a bare `[data-hovered]` CSS selector. So the class\n  // itself must be recomputed here with `isHovered`; emitting the attribute\n  // alone never brightens the text (D7). Suppress hover while disabled,\n  // matching `useHover({isDisabled})`.\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return props.isDisabled;\n    },\n  });\n  return (\n    <div\n      {...datePicker.pickerAria.groupProps}\n      {...hoverProps}\n      // S2 seeds its FieldGroup's RAC <Group> with role=\"presentation\", overriding\n      // the faithful role=\"group\" that `createDatePicker` returns (RAC useDatePicker\n      // groupProps). Placed after the spread so it wins (JSX later-attr precedence).\n      role=\"presentation\"\n      class={datePickerFieldGroup({\n        size: props.size,\n        isInvalid: props.isInvalid,\n        isDisabled: props.isDisabled,\n        isHovered: isHovered(),\n      })}\n      style={props.style}\n      onClick={props.onClick}\n      data-hovered={isHovered() ? \"true\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport function DatePicker<T extends DateValue = CalendarDate>(\n  props: DatePickerProps<T>,\n): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(DatePickerContext), (props as any).slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, calendarProps, rest] = splitProps(\n    merged,\n    [\n      \"size\",\n      \"class\",\n      \"label\",\n      \"description\",\n      \"errorMessage\",\n      \"contextualHelp\",\n      \"isInvalid\",\n      \"placeholder\",\n      \"maxVisibleMonths\",\n    ],\n    [\n      \"minValue\",\n      \"maxValue\",\n      \"isDateUnavailable\",\n      \"firstDayOfWeek\",\n      \"pageBehavior\",\n      \"placeholderValue\",\n      \"createCalendar\",\n    ],\n  );\n\n  const size = () => normalizeDatePickerSize(local.size);\n  const isInvalid = () => local.isInvalid === true;\n  const isDisabled = () => rest.isDisabled === true;\n  const visibleMonths = () => Math.max(1, Number(local.maxVisibleMonths ?? 1));\n  const locale = useLocale();\n  // Mirrors S2's CalendarButton `buttonRef` → `pressScale(buttonRef)`: the port\n  // sizes the press transform against the real trigger element.\n  const [buttonEl, setButtonEl] = createSignal<HTMLButtonElement>();\n\n  const hasTime = () => {\n    const granularity = (rest as { granularity?: string }).granularity;\n    if (granularity && granularity !== \"day\") return true;\n    const value = (rest as { value?: DateValue }).value;\n    if (value && \"hour\" in value) return true;\n    const defaultValue = (rest as { defaultValue?: DateValue }).defaultValue;\n    if (defaultValue && \"hour\" in defaultValue) return true;\n    return false;\n  };\n\n  return (\n    <HeadlessDatePicker\n      {...calendarProps}\n      {...rest}\n      firstDayOfWeek={normalizeFirstDayOfWeek(calendarProps.firstDayOfWeek)}\n      visibleMonths={visibleMonths()}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      isInvalid={isInvalid()}\n      class={(renderProps) =>\n        [\n          local.class,\n          datePickerRoot({\n            ...renderProps,\n            size: size(),\n            labelPosition: \"top\",\n            isInForm: false,\n          }),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n    >\n      <Show when={local.label}>\n        <div class={datePickerLabelWrapper({ size: size(), labelPosition: \"top\" })}>\n          <HeadlessDatePickerLabel\n            class={datePickerLabel({ size: size(), isDisabled: isDisabled() })}\n          >\n            {local.label}\n            <Show when={rest.isRequired}>\n              <span class={noWrap}>\n                &nbsp;\n                <AsteriskIcon\n                  size={size() === \"S\" ? \"M\" : size()}\n                  styles={requiredIcon}\n                  style={requiredIconStyle(size())}\n                  aria-hidden=\"true\"\n                />\n              </span>\n            </Show>\n          </HeadlessDatePickerLabel>\n          <Show when={local.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {local.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <DatePickerFieldGroup\n        size={size()}\n        isInvalid={isInvalid()}\n        isDisabled={isDisabled()}\n        style={datePickerFieldGroupStyle(size())}\n        onClick={(e) => {\n          const target = e.target as HTMLElement;\n          if (!target.closest('button, [role=\"spinbutton\"]')) {\n            const segments = Array.from(\n              e.currentTarget.querySelectorAll<HTMLElement>(\n                '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n              ),\n            );\n            for (let i = segments.length - 1; i >= 0; i--) {\n              if (!segments[i].hasAttribute(\"data-placeholder\")) {\n                segments[i].focus();\n                return;\n              }\n            }\n            segments[0]?.focus();\n          }\n        }}\n      >\n        {/*\n          Mirror S2 DatePicker's `<DateInputContainer><DateInput /></…>` nesting\n          (DatePicker.tsx line 248) — and the port's own DateField. The flex\n          container (`dateInputContainer`) lives on a WRAPPING div; the\n          AriaDateInput group keeps an EMPTY class so it stays an unstyled block\n          div. This matters: if the flex class sits on the group itself, the\n          segments become direct flex items and CSS blockifies them\n          (display:inline → block) and sizes them as flex items — the segment\n          must stay inline/auto to match the S2 oracle.\n        */}\n        <div class={dateInputContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={({ isFocused, isDisabled }) =>\n                  dateSegment({\n                    isFocused,\n                    isDisabled,\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n\n        <DatePickerButton\n          ref={setButtonEl}\n          class={({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible }) =>\n            calendarButton({\n              isDisabled,\n              isOpen,\n              isHovered,\n              isPressed,\n              isFocusVisible,\n              size: size(),\n            })\n          }\n          style={pressScale(buttonEl)}\n        >\n          <S2CalendarIcon styles={calendarIcon} />\n        </DatePickerButton>\n\n        <DatePickerPopup\n          size={size()}\n          hasTime={hasTime()}\n          maxVisibleMonths={visibleMonths()}\n          calendarProps={calendarProps}\n          hourCycle={(rest as { hourCycle?: 12 | 24 }).hourCycle}\n          shouldForceLeadingZeros={\n            (rest as { shouldForceLeadingZeros?: boolean }).shouldForceLeadingZeros\n          }\n        />\n      </DatePickerFieldGroup>\n\n      <Show when={local.description && !isInvalid()}>\n        <HeadlessDatePickerDescription\n          class={helpText({ size: size(), isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {local.description}\n        </HeadlessDatePickerDescription>\n      </Show>\n\n      <Show when={isInvalid() && local.errorMessage}>\n        <HeadlessDatePickerErrorMessage\n          class={helpText({ size: size(), isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {local.errorMessage}\n        </HeadlessDatePickerErrorMessage>\n      </Show>\n    </HeadlessDatePicker>\n  );\n}\n\nfunction DatePickerPopup(props: {\n  size: NormalizedDatePickerSize;\n  hasTime?: boolean;\n  maxVisibleMonths?: number;\n  calendarProps?: Record<string, unknown>;\n  hourCycle?: 12 | 24;\n  shouldForceLeadingZeros?: boolean;\n}): JSX.Element {\n  const theme = useTheme();\n  const datePicker = useDatePickerContext();\n  const timeGranularity = () =>\n    datePicker.datePickerState.granularity === \"day\"\n      ? \"minute\"\n      : datePicker.datePickerState.granularity;\n\n  return (\n    <DatePickerContent\n      class={(rp) =>\n        datePickerPopover({\n          colorScheme: theme.colorScheme,\n          placement: rp.placement ?? undefined,\n          isEntering: rp.isEntering,\n          isExiting: rp.isExiting,\n        })\n      }\n    >\n      <div class={datePickerPopoverInner}>\n        <div class={datePickerPopoverFrame}>\n          <Calendar\n            size=\"md\"\n            visibleMonths={props.maxVisibleMonths}\n            UNSAFE_style={datePickerCalendarPopoverStyle}\n            {...(props.calendarProps ?? {})}\n          />\n          <Show when={props.hasTime}>\n            <TimeField\n              size=\"md\"\n              label=\"Time\"\n              value={datePicker.datePickerState.timeValue() ?? undefined}\n              granularity={timeGranularity()}\n              hourCycle={props.hourCycle}\n              shouldForceLeadingZeros={props.shouldForceLeadingZeros}\n              onChange={(nextValue) => {\n                if (nextValue) {\n                  datePicker.datePickerState.setTimeValue(nextValue);\n                }\n              }}\n            />\n          </Show>\n        </div>\n      </div>\n    </DatePickerContent>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":"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"}

package/dist/calendar/DateRangePicker.js

@@ -172,7 +172,7 @@ const dateRangePickerLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -494,7 +494,7 @@ const helpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/calendar/DateRangePicker.jsx

@@ -164,7 +164,7 @@ const dateRangePickerLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -490,7 +490,7 @@ const helpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/calendar/RangeCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.d.ts","sourceRoot":"","sources":["../../src/calendar/RangeCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,GAAG,EAUT,MAAM,UAAU,CAAC;AAClB,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,UAAU,EAChB,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhG,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC/E,uBAAuB,CAAC,CAAC,CAAC,EAC1B,QAAQ,GAAG,gBAAgB,GAAG,iBAAiB,CAChD;IACC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,cAAc,CAAC,EAAE,2BAA2B,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzE,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,eAAe,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAChE,uEAAuE;IACvE,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,2EACmC,CAAC;AAunBrE;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC9D,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC3B,GAAG,CAAC,OAAO,CA+Ib;AAED,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"RangeCalendar.d.ts","sourceRoot":"","sources":["../../src/calendar/RangeCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,GAAG,EAUT,MAAM,UAAU,CAAC;AAClB,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,UAAU,EAChB,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhG,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC/E,uBAAuB,CAAC,CAAC,CAAC,EAC1B,QAAQ,GAAG,gBAAgB,GAAG,iBAAiB,CAChD;IACC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,cAAc,CAAC,EAAE,2BAA2B,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzE,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,eAAe,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAChE,uEAAuE;IACvE,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,2EACmC,CAAC;AAunBrE;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC9D,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC3B,GAAG,CAAC,OAAO,CA+Ib;AAED,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/calendar/TimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../src/calendar/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,GAAG,EAMT,MAAM,UAAU,CAAC;AAClB,OAAO,EAQL,KAAK,cAAc,IAAI,sBAAsB,EAG7C,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAMhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAe5C,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAE/F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC3E,sBAAsB,CAAC,CAAC,CAAC,EACzB,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,qBAAqB;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,mDAAmD;IACnD,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,uCAAuC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,uEAAiE,CAAC;AAyY/F;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA2EhG;AAED,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../src/calendar/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,GAAG,EAMT,MAAM,UAAU,CAAC;AAClB,OAAO,EAQL,KAAK,cAAc,IAAI,sBAAsB,EAG7C,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAMhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAe5C,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAE/F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC3E,sBAAsB,CAAC,CAAC,CAAC,EACzB,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,qBAAqB;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,mDAAmD;IACnD,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,uCAAuC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,uEAAiE,CAAC;AAqY/F;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA2EhG;AAED,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/calendar/TimeField.js

@@ -140,7 +140,7 @@ const timeFieldLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -367,7 +367,7 @@ const helpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/calendar/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","names":[],"sources":["../../src/calendar/TimeField.tsx"],"sourcesContent":["// @ts-nocheck - style-system generics need the same dedicated pass as DateField.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  TimeField as HeadlessTimeField,\n  TimeFieldLabel as HeadlessTimeFieldLabel,\n  TimeFieldDescription as HeadlessTimeFieldDescription,\n  TimeFieldErrorMessage as HeadlessTimeFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type TimeFieldProps as HeadlessTimeFieldProps,\n  type TimeFieldRenderProps,\n  type DateSegmentRenderProps,\n  type TimeValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  useLocale,\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\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 AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type TimeFieldLabelPosition = \"top\" | \"side\";\nexport type TimeFieldLabelAlign = \"start\" | \"end\";\nexport type TimeFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue> extends Omit<\n  HeadlessTimeFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: TimeFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: TimeFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: TimeFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: TimeFieldNecessityIndicator;\n}\n\nexport const TimeFieldContext = createContext<SpectrumContextValue<TimeFieldProps<any>>>(null);\n\ninterface TimeFieldStyleProps extends TimeFieldRenderProps {\n  size?: S2TimeFieldSize;\n  labelPosition?: TimeFieldLabelPosition;\n  labelAlign?: TimeFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst timeFieldRoot = style<TimeFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst timeFieldLabelWrapper = style<TimeFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst timeFieldLabel = style<TimeFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst timeFieldGroup = style<TimeFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  // Unlike S2 DateField, S2 TimeField's FieldGroup does NOT set textWrap:'nowrap'\n  // (see @react-spectrum/s2 TimeField.tsx — the styles prop is only fieldInput()\n  // + paddingX). The segmentContainer below still pins nowrap; keeping it here\n  // too would make the FieldGroup compute white-space:nowrap where S2 is normal.\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst timeSegment = style<DateSegmentRenderProps & { isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst helpText = style<TimeFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeTimeFieldSize(size: TimeFieldSize | undefined): S2TimeFieldSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction requiredIconStyle(size: S2TimeFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.currentTarget.querySelectorAll<HTMLElement>(\n      '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n    ),\n  );\n  for (let i = segments.length - 1; i >= 0; i--) {\n    if (!segments[i].hasAttribute(\"data-placeholder\")) {\n      segments[i].focus();\n      return;\n    }\n  }\n  segments[0]?.focus();\n}\n\nfunction TimeFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2TimeFieldSize;\n  labelPosition: TimeFieldLabelPosition;\n  labelAlign: TimeFieldLabelAlign;\n  necessityIndicator: TimeFieldNecessityIndicator;\n}): JSX.Element {\n  // TimeField reuses the DateField segment stack, so it reads the shared\n  // DateFieldContext (state + group aria) exactly like DateFieldContent.\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so both elements carry the\n  // field's aria-labelledby (label) and aria-describedby (value description +\n  // help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the group event handlers stay local (duplicating\n  // the arrow-nav onKeyDown would double-advance focus).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Track focus-within on this separate, non-focusable presentation wrapper via\n  // the reliably-bubbling onFocusIn/onFocusOut (Solid's onFocus does not bubble),\n  // and compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(\n    isGlobalFocusVisible(),\n  );\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener((visible) =>\n      setIsFocusVisibleModality(visible),\n    );\n    onCleanup(cleanup);\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={timeFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessTimeFieldLabel\n            class={timeFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {isRequired() ? \"(required)\" : \"(optional)\"}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessTimeFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={timeFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  timeSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessTimeFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessTimeFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessTimeFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessTimeFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(TimeFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeTimeFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: TimeFieldRenderProps) =>\n    [\n      \"solidaria-TimeField\",\n      local.UNSAFE_className,\n      local.class,\n      timeFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessTimeField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <TimeFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessTimeField>\n  );\n}\n\nexport type { TimeValue };\n"],"mappings":"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"}
+{"version":3,"file":"TimeField.js","names":[],"sources":["../../src/calendar/TimeField.tsx"],"sourcesContent":["// @ts-nocheck - style-system generics need the same dedicated pass as DateField.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  TimeField as HeadlessTimeField,\n  TimeFieldLabel as HeadlessTimeFieldLabel,\n  TimeFieldDescription as HeadlessTimeFieldDescription,\n  TimeFieldErrorMessage as HeadlessTimeFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type TimeFieldProps as HeadlessTimeFieldProps,\n  type TimeFieldRenderProps,\n  type DateSegmentRenderProps,\n  type TimeValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  useLocale,\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\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 AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type TimeFieldLabelPosition = \"top\" | \"side\";\nexport type TimeFieldLabelAlign = \"start\" | \"end\";\nexport type TimeFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue> extends Omit<\n  HeadlessTimeFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: TimeFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: TimeFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: TimeFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: TimeFieldNecessityIndicator;\n}\n\nexport const TimeFieldContext = createContext<SpectrumContextValue<TimeFieldProps<any>>>(null);\n\ninterface TimeFieldStyleProps extends TimeFieldRenderProps {\n  size?: S2TimeFieldSize;\n  labelPosition?: TimeFieldLabelPosition;\n  labelAlign?: TimeFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst timeFieldRoot = style<TimeFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst timeFieldLabelWrapper = style<TimeFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst timeFieldLabel = style<TimeFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst timeFieldGroup = style<TimeFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  // Unlike S2 DateField, S2 TimeField's FieldGroup does NOT set textWrap:'nowrap'\n  // (see @react-spectrum/s2 TimeField.tsx — the styles prop is only fieldInput()\n  // + paddingX). The segmentContainer below still pins nowrap; keeping it here\n  // too would make the FieldGroup compute white-space:nowrap where S2 is normal.\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst timeSegment = style<DateSegmentRenderProps & { isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst helpText = style<TimeFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeTimeFieldSize(size: TimeFieldSize | undefined): S2TimeFieldSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction requiredIconStyle(size: S2TimeFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.currentTarget.querySelectorAll<HTMLElement>(\n      '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n    ),\n  );\n  for (let i = segments.length - 1; i >= 0; i--) {\n    if (!segments[i].hasAttribute(\"data-placeholder\")) {\n      segments[i].focus();\n      return;\n    }\n  }\n  segments[0]?.focus();\n}\n\nfunction TimeFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2TimeFieldSize;\n  labelPosition: TimeFieldLabelPosition;\n  labelAlign: TimeFieldLabelAlign;\n  necessityIndicator: TimeFieldNecessityIndicator;\n}): JSX.Element {\n  // TimeField reuses the DateField segment stack, so it reads the shared\n  // DateFieldContext (state + group aria) exactly like DateFieldContent.\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so both elements carry the\n  // field's aria-labelledby (label) and aria-describedby (value description +\n  // help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the group event handlers stay local (duplicating\n  // the arrow-nav onKeyDown would double-advance focus).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Track focus-within on this separate, non-focusable presentation wrapper via\n  // the reliably-bubbling onFocusIn/onFocusOut (Solid's onFocus does not bubble),\n  // and compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(isGlobalFocusVisible());\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener((visible) => setIsFocusVisibleModality(visible));\n    onCleanup(cleanup);\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={timeFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessTimeFieldLabel\n            class={timeFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {isRequired() ? \"(required)\" : \"(optional)\"}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessTimeFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={timeFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  timeSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessTimeFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessTimeFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessTimeFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessTimeFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(TimeFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeTimeFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: TimeFieldRenderProps) =>\n    [\n      \"solidaria-TimeField\",\n      local.UNSAFE_className,\n      local.class,\n      timeFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessTimeField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <TimeFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessTimeField>\n  );\n}\n\nexport type { TimeValue };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmFA,MAAa,mBAAmB,cAAyD,IAAA;AAWzF,MAAM,gBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAON,MAAM,wBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAqBN,MAAM,iBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM,iBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BN,MAAM,iBAAA;AAcN,MAAM,eAAA;AAWN,SAAS,uBAAuB,MAAkC;CAChE,QAAQ,MAAR;EACE,KAAK;EACL,KAAK,MACH,OAAO;EACT,KAAK;EACL,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EAGT,SACE,OAAO;CACX;AACF;AAEA,SAAS,kBAAkB,MAA4B;CACrD,MAAM,YAAY,SAAS,OAAO,SAAS,OAAO,KAAK;CACvD,OAAO;EACL,OAAO,GAAG,UAAA;EACV,QAAQ,GAAG,UAAA;CACb;AACF;AAEA,SAAS,0BAA0B,OAAgD;CAEjF,IADe,MAAM,QACT,QAAQ,uBAAA,GAClB;CAGF,MAAM,eAAc;CACpB,MAAM,WAAW,MAAM,KACrB,MAAM,cAAc,iBAClB,qDAAA,CAAA;CAGJ,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KACxC,IAAI,CAAC,SAAS,GAAG,aAAa,kBAAA,GAAqB;EACjD,SAAS,GAAG,MAAK;EACjB;CACF;CAEF,SAAS,IAAI,MAAA;AACf;AAEA,SAAS,iBAAiB,OASlB;CAGN,MAAM,EAAE,OAAO,SAAS,oBAAA;CACxB,MAAM,mBAAmB,MAAM,WAAU;CACzC,MAAM,kBAAkB,MAAM,UAAS;CACvC,MAAM,mBAAmB,MAAM,WAAU;CAOzC,MAAM,kBAAkB,KAAK;CAK7B,MAAM,CAAC,eAAe,oBAAoB,aAAa,KAAA;CACvD,MAAM,CAAC,wBAAwB,6BAA6B,aAAa,eAAA,CAAA;CACzE,mBAAa;EAEX,UADgB,4BAA4B,YAAY,0BAA0B,OAAA,CACxE,CAAA;CACZ,CAAA;CACA,MAAM,6BAA6B,cAAA,KAAmB,uBAAA;CAEtD,OAAA;EAAA,gBAEK,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAK;GAAA,IAAA,WAAA;IAAA,IAAA,OAAA,eAAA,OAAA,GAAA,QAAA,KAAA,YAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA,aAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA;IAAA,OAAA,MAAA,gBAQlB,gBAAA;KAAA,KAAA,WAAA;MAAA,OACQ,eAAe;OACpB,MAAM,MAAM;OACZ,eAAe,MAAM;OACrB,YAAY,WAAA;MACd,CAAA;KAAA;KAAA,IAAA,WAAA;MAAA,OAAA,CAAA,WAEC,MAAM,KAAK,GAAA,gBACX,MAAA;OAAA,IAAK,OAAA;QAAA,OAAM,WAAA,KAAgB,MAAM,uBAAuB;OAAA;OAAA,IAAA,WAAA;QAAA,IAAA,QAAA,eAAA,MAAA,GAAA,QAAA,MAAA,WAAA,aAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA;QAAA,OAAA,OAAA,gBAGpD,MAAA;SAAA,IACC,OAAA;UAAA,OAAM,MAAM,uBAAuB;SAAA;SAAA,IACnC,WAAA;UAAA,cAAA;WAAA,IAAA,SAAA,eAAA,OAAA;WAAA,OAAA,cAEK,WAAA,IAAe,eAAe,YAAA;WAAA,aAAA,aAAA,QAAA,eADd,WAAA,IAAe,OAAO,KAAA,CAAA,CAAA;WAAA,OAAA;UAAA,GAAA;SAAA;SAAA,IAAA,WAAA;UAAA,OAAA,gBAK1C,UAAA;WAAA,IACC,OAAA;YAAA,OAAM,WAAA,MAAM,SAAS,GAAA,EAAA,IAAM,MAAM,MAAM;WAAI;WAC3C,QAAQ;WAAA,IACR,QAAA;YAAA,OAAO,kBAAkB,MAAM,IAAI;WAAA;WAAA,eAAA;UAAA,CAAA;SAAA;QAAA,CAAA,GAAA,OAAA,IAAA;QAAA,OAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,OAAA,KAAA;IAAA,OAAA,MAAA,gBAO5C,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,MAAM;KAAc;KAAA,IAAA,WAAA;MAAA,IAAA,QAAA,eAAA,OAAA;MAAA,OAAA,aAE3B,MAAM,cAAc;MAAA,OAAA;KAAA;IAAA,CAAA,GAAA,OAAA,KAAA;IAAA,aAAA,UAAA,MArClB,sBAAsB;KAC3B,MAAM,MAAM;KACZ,eAAe,MAAM;KACrB,YAAY,MAAM;IACpB,CAAA,CAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA;SAAA;GAAA,IAAA,QAAA,eAAA,OAAA,GAAA,SAAA,MAAA,YAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;GAAA,MAAA,cAyDW,UAAA;IACX,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,iBAAiB,KAAA;GAErB;GAAA,MAAA,kBALiB,iBAAiB,IAAA;GAAA,MAAA,aADtB;GAAA,MAAA,iBALI,UAAA;IACd,IAAI,MAAM,gBAAgB,SACxB,0BAA0B,KAAA;GAE9B;GAAA,OAAA,QAAA,gBAoBG,WAAA;IAAA,SAAA;IAAA,WACG,YAAA,gBACC,aAAA;KACU;KAAA,UACD,gBACN,YAAY;MACV,GAAG;MACH,YAAY,WAAA;MACZ,eAAe,QAAQ,SAAS;KAClC,CAAA;IAAA,CAAA;GAGN,CAAA,CAAA;GAAA,OAAA,OAAA,gBAIH,MAAA;IAAA,IAAK,OAAA;KAAA,OAAM,WAAA,CAAA,CAAA,UAAA,CAAA,EAAA,KAAe,CAAC,WAAA;IAAA;IAAA,IAAA,WAAA;KAAA,OAAA,gBACzB,gBAAA,EAAA,IAAA,WAAA;MAAA,OAAA,gBACE,mBAAA,EAAkB,QAAQ,eAAA,CAAA;KAAA,EAAA,CAAA;IAAA;GAAA,CAAA,GAAA,QAAA,KAAA;GAAA,QAAA,QAAA;IAAA,IAAA,MAnDd,UAAA,EAAY,oBAAkB,OAC7B,UAAA,EAAY,qBAAmB,OAC1C,eAAe;KACpB,MAAM,MAAM;KACZ,WAAW,UAAA;KACX,YAAY,WAAA;KACZ,eAAe,cAAA;KACf,gBAAgB,qBAAA;IAClB,CAAA,GAAA,OAac,cAAA,IAAkB,SAAS,KAAA,GAAA,OACrB,qBAAA,IAAyB,SAAS,KAAA,GAAA,OACvC,WAAA,IAAe,SAAS,KAAA,GAAA,OACzB,UAAA,IAAc,SAAS,KAAA;IAAA,QAAA,IAAA,KAAA,aAAA,OAAA,mBAAA,IAAA,IAAA,GAAA;IAAA,SAAA,IAAA,KAAA,aAAA,OAAA,oBAAA,IAAA,IAAA,IAAA;IAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;IAAA,SAAA,IAAA,KAAA,aAAA,OAAA,gBAAA,IAAA,IAAA,IAAA;IAAA,SAAA,IAAA,KAAA,aAAA,OAAA,sBAAA,IAAA,IAAA,IAAA;IAAA,SAAA,IAAA,KAAA,aAAA,OAAA,iBAAA,IAAA,IAAA,IAAA;IAAA,SAAA,IAAA,KAAA,aAAA,OAAA,gBAAA,IAAA,IAAA,IAAA;IAAA,OAAA;GAAA,GAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;IAAA,GAAA,KAAA;GAAA,CAAA;GAAA,mBAAA;GAAA,OAAA;EAAA,GAAA;EAAA,gBAgCtC,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,WAAA,CAAA,CAAA,MAAM,WAAW,EAAA,KAAI,CAAC,UAAA;GAAA;GAAA,IAAA,WAAA;IAAA,OAAA,gBAC/B,sBAAA;KAAA,KAAA,WAAA;MAAA,OACQ,SAAS;OAAE,MAAM,MAAM;OAAM,WAAW;OAAO,YAAY,WAAA;MAAa,CAAA;KAAA;KAAA,IAAA,WAAA;MAAA,OAE9E,MAAM;KAAW;IAAA,CAAA;GAAA;EAAA,CAAA;EAAA,gBAIrB,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,WAAA,CAAA,CAAA,MAAM,YAAY,EAAA,KAAI,UAAA;GAAA;GAAA,IAAA,WAAA;IAAA,OAAA,gBAC/B,uBAAA;KAAA,KAAA,WAAA;MAAA,OACQ,SAAS;OAAE,MAAM,MAAM;OAAM,WAAW;OAAM,YAAY,WAAA;MAAa,CAAA;KAAA;KAAA,IAAA,WAAA;MAAA,OAE7E,MAAM;KAAY;IAAA,CAAA;GAAA;EAAA,CAAA;CAAA;AAK7B;;;;AAKA,SAAgB,UAA2C,OAA+B;CAKxF,MAAM,SAAS,iBAAiB,aAAa,aADxB,uBAAuB,WAAW,gBAAA,GAAmB,MAAM,IACxB,KAAgB,CAAC,GAAG,KAAA,CAAA,CAAA;CAC5E,MAAM,WAAW,YAAA;CACjB,MAAM,CAAC,OAAO,QAAQ,WAAW,QAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CAED,MAAM,aAAa,uBAAuB,MAAM,IAAI;CACpD,MAAM,sBAAsB,MAAM,iBAAiB;CACnD,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,2BAA2B,MAAM,sBAAsB;CAC7D,MAAM,kBAAkB,MAAM,cAAc;CAC5C,MAAM,SAAS,UAAA;CAEf,MAAM,iBAAiB,gBACrB;EACE;EACA,MAAM;EACN,MAAM;EACN,cACE;GACE,GAAG;GACH,MAAM,KAAA;GACN,eAAe,cAAA;GACf;EACF,GACA,MAAM,MAAM;CAAA,EAGb,OAAO,OAAA,EACP,KAAK,GAAA;CAEV,OAAA,gBACG,aAAA,WACK,MAAI;EAAA,IACR,SAAA;GAAA,OAAS,KAA6B,UAAU,OAAA,EAAS;EAAM;EAAA,IAC/D,kBAAA;GAAA,OACE,WAAA,CAAA,CAAA,UAAA,CAAA,EAAA,IACI,YACC,KAAmD;EAAe;EAAA,IAEzE,QAAA;GAAA,OAAO,MAAM;EAA2B;EAAA,IACxC,cAAA;GAAA,OAAa,MAAM;EAAiC;EAAA,IACpD,eAAA;GAAA,OAAc,MAAM;EAAkC;EAAA,SAC/C;EAAA,IACP,QAAA;GAAA,OAAO,MAAM;EAAY;EAAA,IAAA,WAAA;GAAA,OAAA,gBAExB,kBAAA;IAAA,IACC,QAAA;KAAA,OAAO,MAAM;IAAK;IAAA,IAClB,iBAAA;KAAA,OAAgB,MAAM;IAAc;IAAA,IACpC,cAAA;KAAA,OAAa,MAAM;IAAW;IAAA,IAC9B,eAAA;KAAA,OAAc,MAAM;IAAY;IAAA,IAChC,OAAA;KAAA,OAAM,KAAA;IAAA;IAAA,IACN,gBAAA;KAAA,OAAe,cAAA;IAAA;IAAA,IACf,aAAA;KAAA,OAAY,WAAA;IAAA;IAAA,IACZ,qBAAA;KAAA,OAAoB,mBAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA,CAAA;AAI5B"}

package/dist/calendar/TimeField.jsx

@@ -130,7 +130,7 @@ const timeFieldLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -358,7 +358,7 @@ const helpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/calendar/TimeField.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.jsx","names":[],"sources":["../../src/calendar/TimeField.tsx"],"sourcesContent":["// @ts-nocheck - style-system generics need the same dedicated pass as DateField.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  TimeField as HeadlessTimeField,\n  TimeFieldLabel as HeadlessTimeFieldLabel,\n  TimeFieldDescription as HeadlessTimeFieldDescription,\n  TimeFieldErrorMessage as HeadlessTimeFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type TimeFieldProps as HeadlessTimeFieldProps,\n  type TimeFieldRenderProps,\n  type DateSegmentRenderProps,\n  type TimeValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  useLocale,\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\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 AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type TimeFieldLabelPosition = \"top\" | \"side\";\nexport type TimeFieldLabelAlign = \"start\" | \"end\";\nexport type TimeFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue> extends Omit<\n  HeadlessTimeFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: TimeFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: TimeFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: TimeFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: TimeFieldNecessityIndicator;\n}\n\nexport const TimeFieldContext = createContext<SpectrumContextValue<TimeFieldProps<any>>>(null);\n\ninterface TimeFieldStyleProps extends TimeFieldRenderProps {\n  size?: S2TimeFieldSize;\n  labelPosition?: TimeFieldLabelPosition;\n  labelAlign?: TimeFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst timeFieldRoot = style<TimeFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst timeFieldLabelWrapper = style<TimeFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst timeFieldLabel = style<TimeFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst timeFieldGroup = style<TimeFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  // Unlike S2 DateField, S2 TimeField's FieldGroup does NOT set textWrap:'nowrap'\n  // (see @react-spectrum/s2 TimeField.tsx — the styles prop is only fieldInput()\n  // + paddingX). The segmentContainer below still pins nowrap; keeping it here\n  // too would make the FieldGroup compute white-space:nowrap where S2 is normal.\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst timeSegment = style<DateSegmentRenderProps & { isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst helpText = style<TimeFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeTimeFieldSize(size: TimeFieldSize | undefined): S2TimeFieldSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction requiredIconStyle(size: S2TimeFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.currentTarget.querySelectorAll<HTMLElement>(\n      '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n    ),\n  );\n  for (let i = segments.length - 1; i >= 0; i--) {\n    if (!segments[i].hasAttribute(\"data-placeholder\")) {\n      segments[i].focus();\n      return;\n    }\n  }\n  segments[0]?.focus();\n}\n\nfunction TimeFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2TimeFieldSize;\n  labelPosition: TimeFieldLabelPosition;\n  labelAlign: TimeFieldLabelAlign;\n  necessityIndicator: TimeFieldNecessityIndicator;\n}): JSX.Element {\n  // TimeField reuses the DateField segment stack, so it reads the shared\n  // DateFieldContext (state + group aria) exactly like DateFieldContent.\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so both elements carry the\n  // field's aria-labelledby (label) and aria-describedby (value description +\n  // help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the group event handlers stay local (duplicating\n  // the arrow-nav onKeyDown would double-advance focus).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Track focus-within on this separate, non-focusable presentation wrapper via\n  // the reliably-bubbling onFocusIn/onFocusOut (Solid's onFocus does not bubble),\n  // and compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(\n    isGlobalFocusVisible(),\n  );\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener((visible) =>\n      setIsFocusVisibleModality(visible),\n    );\n    onCleanup(cleanup);\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={timeFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessTimeFieldLabel\n            class={timeFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {isRequired() ? \"(required)\" : \"(optional)\"}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessTimeFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={timeFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  timeSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessTimeFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessTimeFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessTimeFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessTimeFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(TimeFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeTimeFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: TimeFieldRenderProps) =>\n    [\n      \"solidaria-TimeField\",\n      local.UNSAFE_className,\n      local.class,\n      timeFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessTimeField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <TimeFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessTimeField>\n  );\n}\n\nexport type { TimeValue };\n"],"mappings":"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"}
+{"version":3,"file":"TimeField.jsx","names":[],"sources":["../../src/calendar/TimeField.tsx"],"sourcesContent":["// @ts-nocheck - style-system generics need the same dedicated pass as DateField.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  TimeField as HeadlessTimeField,\n  TimeFieldLabel as HeadlessTimeFieldLabel,\n  TimeFieldDescription as HeadlessTimeFieldDescription,\n  TimeFieldErrorMessage as HeadlessTimeFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type TimeFieldProps as HeadlessTimeFieldProps,\n  type TimeFieldRenderProps,\n  type DateSegmentRenderProps,\n  type TimeValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  useLocale,\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\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 AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2TimeFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type TimeFieldLabelPosition = \"top\" | \"side\";\nexport type TimeFieldLabelAlign = \"start\" | \"end\";\nexport type TimeFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue> extends Omit<\n  HeadlessTimeFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: TimeFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: TimeFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: TimeFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: TimeFieldNecessityIndicator;\n}\n\nexport const TimeFieldContext = createContext<SpectrumContextValue<TimeFieldProps<any>>>(null);\n\ninterface TimeFieldStyleProps extends TimeFieldRenderProps {\n  size?: S2TimeFieldSize;\n  labelPosition?: TimeFieldLabelPosition;\n  labelAlign?: TimeFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst timeFieldRoot = style<TimeFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst timeFieldLabelWrapper = style<TimeFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst timeFieldLabel = style<TimeFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst timeFieldGroup = style<TimeFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  // Unlike S2 DateField, S2 TimeField's FieldGroup does NOT set textWrap:'nowrap'\n  // (see @react-spectrum/s2 TimeField.tsx — the styles prop is only fieldInput()\n  // + paddingX). The segmentContainer below still pins nowrap; keeping it here\n  // too would make the FieldGroup compute white-space:nowrap where S2 is normal.\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst timeSegment = style<DateSegmentRenderProps & { isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst helpText = style<TimeFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\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\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeTimeFieldSize(size: TimeFieldSize | undefined): S2TimeFieldSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction requiredIconStyle(size: S2TimeFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.currentTarget.querySelectorAll<HTMLElement>(\n      '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n    ),\n  );\n  for (let i = segments.length - 1; i >= 0; i--) {\n    if (!segments[i].hasAttribute(\"data-placeholder\")) {\n      segments[i].focus();\n      return;\n    }\n  }\n  segments[0]?.focus();\n}\n\nfunction TimeFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2TimeFieldSize;\n  labelPosition: TimeFieldLabelPosition;\n  labelAlign: TimeFieldLabelAlign;\n  necessityIndicator: TimeFieldNecessityIndicator;\n}): JSX.Element {\n  // TimeField reuses the DateField segment stack, so it reads the shared\n  // DateFieldContext (state + group aria) exactly like DateFieldContent.\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so both elements carry the\n  // field's aria-labelledby (label) and aria-describedby (value description +\n  // help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the group event handlers stay local (duplicating\n  // the arrow-nav onKeyDown would double-advance focus).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Track focus-within on this separate, non-focusable presentation wrapper via\n  // the reliably-bubbling onFocusIn/onFocusOut (Solid's onFocus does not bubble),\n  // and compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(isGlobalFocusVisible());\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener((visible) => setIsFocusVisibleModality(visible));\n    onCleanup(cleanup);\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={timeFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessTimeFieldLabel\n            class={timeFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {isRequired() ? \"(required)\" : \"(optional)\"}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessTimeFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={timeFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  timeSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessTimeFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessTimeFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessTimeFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessTimeFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(TimeFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeTimeFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: TimeFieldRenderProps) =>\n    [\n      \"solidaria-TimeField\",\n      local.UNSAFE_className,\n      local.class,\n      timeFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessTimeField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <TimeFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessTimeField>\n  );\n}\n\nexport type { TimeValue };\n"],"mappings":"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"}

package/dist/calendar/index.js

@@ -226,10 +226,10 @@ const calendarCellInner = function anonymous(props) {
 	else if (props.isHovered) rules += " gtq3xC151";
 	else rules += " g7xrik151";
 	else if (props.isDisabled) rules += " g9151";
-	else if (props.isFocusVisible) rules += " gJLwrv151";
-	else if (props.isPressed) rules += " gJLwrv151";
-	else if (props.isHovered) rules += " gJLwrv151";
-	else rules += " gI9Ko6c151";
+	else if (props.isFocusVisible) rules += " gKDgA3151";
+	else if (props.isPressed) rules += " gKDgA3151";
+	else if (props.isHovered) rules += " gKDgA3151";
+	else rules += " gnhAeB151";
 	else if (props.isDisabled) rules += " g9151";
 	else if (props.isPressed) rules += " gkDWoNd151";
 	else if (props.isHovered) if (props.isUnavailable) rules += " g9151";
@@ -279,7 +279,7 @@ const calendarHelpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";