@planningcenter/tapestry 3.2.3-rc.2 → 3.2.3-rc.21

package/dist/components/time-field/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport type {\n  CalendarDateTime,\n  Time,\n  ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes } from \"react\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n} from \"react-aria-components\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** The default uncontrolled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */\n  defaultValue?: TimeFieldValue | null\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, hides the time zone abbreviation for ZonedDateTime values. */\n  hideTimeZone?: boolean\n  /** Whether to display in 12 or 24 hour format. By default, determined by locale. */\n  hourCycle?: 12 | 24\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n  max?: TimeFieldValue\n  /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n  min?: TimeFieldValue\n  /** Field name for form submission. */\n  name?: string\n  /** Called when the value changes. */\n  onChange?: (value: TimeFieldValue | null) => void\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the time field. */\n  size?: TimeFieldSize\n  /** The controlled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */\n  value?: TimeFieldValue | null\n}\n\nexport type TimeFieldElementProps = TimeFieldProps &\n  Omit<AriaAttributes, keyof TimeFieldProps> & {\n    className?: string\n    id?: string\n  }\n\nexport function TimeField({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  hideTimeZone,\n  hourCycle,\n  invalid,\n  label,\n  max,\n  min,\n  name,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-time-field\",\n    { \"tds-time-field--lg\": size === \"lg\" },\n    className\n  )\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      granularity=\"minute\"\n      hideTimeZone={hideTimeZone}\n      hourCycle={hourCycle}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max ?? undefined}\n      minValue={min ?? undefined}\n      name={name}\n      onChange={onChange ?? undefined}\n      shouldForceLeadingZeros={forceLeadingZeros}\n      value={value}\n    >\n      {!hideLabel && <Label className=\"tds-time-field-label\">{label}</Label>}\n      <DateInput className=\"tds-time-field-input\">\n        {(segment) => (\n          <DateSegment\n            className={\n              segment.type === \"literal\"\n                ? \"tds-time-field-segment-separator\"\n                : \"tds-time-field-segment\"\n            }\n            segment={segment}\n          />\n        )}\n      </DateInput>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-time-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-time-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaTimeField>\n  )\n}\n"],"names":["React","AriaTimeField"],"mappings":";;;;;AAiEM,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,gBAAgB,EAChB,EAAE,oBAAoB,EAAE,IAAI,KAAK,IAAI,EAAE,EACvC,SAAS,CACV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAACC,WAAa,EAAA,EAAA,GACR,SAAS,gBACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAC,QAAQ,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,uBAAuB,EAAE,iBAAiB,EAC1C,KAAK,EAAE,KAAK,EAAA;QAEX,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,sBAAsB,EAAA,EAAE,KAAK,CAAS;QACtEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,EAAA,EACxC,CAAC,OAAO,MACPA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,yCAAyC,EACnD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
+{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport type {\n  CalendarDateTime,\n  Time,\n  ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n  max?: TimeFieldValue\n  /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n  min?: TimeFieldValue\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the time field. */\n  size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n  | \"children\"\n  | \"granularity\"\n  | \"placeholderValue\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n  | \"defaultValue\"\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"name\"\n  | \"onChange\"\n  | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n  AriaTimeFieldProps<TimeFieldValue>,\n  TimeFieldProps,\n  AriaTimeFieldPropsToOmit,\n  AriaTimeFieldPropsToInclude\n>\n\nexport function TimeField({\n  className,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-time-field\",\n    { \"tds-time-field--lg\": size === \"lg\" },\n    className\n  )\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      granularity=\"minute\"\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max ?? undefined}\n      minValue={min ?? undefined}\n      shouldForceLeadingZeros={forceLeadingZeros}\n    >\n      {!hideLabel && <Label className=\"tds-time-field-label\">{label}</Label>}\n      <DateInput className=\"tds-time-field-input\">\n        {(segment) => (\n          <DateSegment\n            className={\n              segment.type === \"literal\"\n                ? \"tds-time-field-segment-separator\"\n                : \"tds-time-field-segment\"\n            }\n            segment={segment}\n          />\n        )}\n      </DateInput>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-time-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-time-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaTimeField>\n  )\n}\n"],"names":["React","AriaTimeField"],"mappings":";;;;;AAuEM,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,gBAAgB,EAChB,EAAE,oBAAoB,EAAE,IAAI,KAAK,IAAI,EAAE,EACvC,SAAS,CACV;IAED,QACEA,cAAA,CAAA,aAAA,CAACC,WAAa,EAAA,EAAA,GACR,SAAS,gBACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,sBAAsB,EAAA,EAAE,KAAK,CAAS;QACtEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,EAAA,EACxC,CAAC,OAAO,MACPA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,yCAAyC,EACnD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}

package/dist/components/time-field/index.d.ts

@@ -1,4 +1,4 @@
 import "./index.css";
-export type { TimeFieldElementProps, TimeFieldProps, TimeFieldSize, } from "./TimeField";
+export type { TimeFieldElementProps, TimeFieldProps, TimeFieldSize, TimeFieldValue, } from "./TimeField";
 export { TimeField } from "./TimeField";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,cAAc,GACf,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/toggle-switch/ToggleSwitch.d.ts

@@ -5,23 +5,29 @@ interface ToggleSwitchBaseProps {
     "aria-invalid"?: never;
     "aria-label"?: never;
     "aria-required"?: never;
+    /** Optional description text that appears below the toggle switch label. */
     description?: string;
     required?: never;
+    /** The size of the toggle switch. */
     size?: ToggleSwitchSize;
 }
 interface ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {
     "aria-labelledby"?: never;
+    /** When true, hides the visible label and sets it as aria-label on the input instead. */
     hideLabel?: false;
     /**
-     * Label content for the toggle switch. When using non-string content
-     * (e.g. JSX), it must not contain interactive elements. This
-     * includes native HTML elements such as `<a>` and `<button>`, as
-     * well as Tapestry or Tapestry-React interactive components.
+     * The label content for the toggle switch. Required unless
+     * `aria-labelledby` is provided to reference an external label. When
+     * using non-string content (e.g. JSX), it must not contain
+     * interactive elements. This includes native HTML elements such as
+     * `<a>` and `<button>`, as well as Tapestry or Tapestry-React
+     * interactive components.
      */
     label: React.ReactNode;
 }
 interface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {
     "aria-labelledby"?: never;
+    /** When true, hides the visible label and sets it as aria-label on the input instead. */
     hideLabel: true;
     /** Label text for the toggle switch, used as an accessible `aria-label`. */
     label: string;

package/dist/components/toggle-switch/ToggleSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;CACxB;AAED,UAAU,4BAA6B,SAAQ,qBAAqB;IAClE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,EAAE,IAAI,CAAA;IACf,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB;IACpE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,iBAAiB,GACzB,4BAA4B,GAC5B,2BAA2B,GAC3B,8BAA8B,CAAA;AAElC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,CAChE,GACC,iBAAiB,CAAA;AAEnB;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,mGA0DxB,CAAA"}
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,qCAAqC;IACrC,IAAI,CAAC,EAAE,gBAAgB,CAAA;CACxB;AAED,UAAU,4BAA6B,SAAQ,qBAAqB;IAClE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,yFAAyF;IACzF,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,yFAAyF;IACzF,SAAS,EAAE,IAAI,CAAA;IACf,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB;IACpE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,iBAAiB,GACzB,4BAA4B,GAC5B,2BAA2B,GAC3B,8BAA8B,CAAA;AAElC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,CAChE,GACC,iBAAiB,CAAA;AAEnB;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,mGA0DxB,CAAA"}

package/dist/components/toggle-switch/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type ToggleSwitchSize = \"md\" | \"sm\"\n\ninterface ToggleSwitchBaseProps {\n  \"aria-invalid\"?: never\n  \"aria-label\"?: never\n  \"aria-required\"?: never\n  description?: string\n  required?: never\n  size?: ToggleSwitchSize\n}\n\ninterface ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  hideLabel?: false\n  /**\n   * Label content for the toggle switch. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  hideLabel: true\n  /** Label text for the toggle switch, used as an accessible `aria-label`. */\n  label: string\n}\n\ninterface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  /** Not available when `aria-labelledby` is provided. */\n  label?: never\n}\n\nexport type ToggleSwitchProps =\n  | ToggleSwitchWithVisibleLabel\n  | ToggleSwitchWithHiddenLabel\n  | ToggleSwitchWithAriaLabelledBy\n\nexport type ToggleSwitchElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof ToggleSwitchProps | \"type\" | \"required\" | \"aria-required\"\n> &\n  ToggleSwitchProps\n\n/**\n * A toggle switch component that renders as a checkbox input styled as a switch.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the switch (must be a string when `hideLabel` is true)\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n */\nexport const ToggleSwitch = forwardRef<\n  HTMLInputElement,\n  ToggleSwitchElementProps\n>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedby,\n      checked,\n      className,\n      description,\n      hideLabel = false,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: ToggleSwitchElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-toggle-switch\",\n      size && size === \"sm\" && `tds-toggle-switch--sm`,\n      hideLabel && `tds-toggle-switch--hide-label`,\n      className\n    )\n\n    const stableId = useId()\n    const toggleSwitchId = id || `tds-toggle-switch-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <div className=\"tds-toggle-switch-track\" aria-hidden=\"true\"></div>\n        <input\n          {...restProps}\n          id={toggleSwitchId}\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={hideLabel ? (label as string) : undefined}\n          aria-describedby={\n            description && !hideLabel\n              ? `${toggleSwitchId}-description`\n              : ariaDescribedby\n          }\n          checked={checked}\n          ref={ref}\n        />\n        {label && !hideLabel && <label htmlFor={toggleSwitchId}>{label}</label>}\n        {description && !hideLabel && (\n          <p\n            id={`${toggleSwitchId}-description`}\n            className=\"tds-toggle-switch-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nToggleSwitch.displayName = \"ToggleSwitch\"\n"],"names":["React"],"mappings":";;;;AAsDA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACa,EAC3B,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,mBAAmB,EACnB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,qBAAA,CAAuB,EAChD,SAAS,IAAI,+BAA+B,EAC5C,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,cAAc,GAAG,EAAE,IAAI,CAAA,kBAAA,EAAqB,QAAQ,EAAE;AAE5D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAO;AAClE,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,OAAO,EAAA,YAAA,EACT,SAAS,GAAI,KAAgB,GAAG,SAAS,EAAA,kBAAA,EAEnD,WAAW,IAAI,CAAC;kBACZ,CAAA,EAAG,cAAc,CAAA,YAAA;kBACjB,eAAe,EAErB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EAAA,CACR;QACD,KAAK,IAAI,CAAC,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,cAAc,EAAA,EAAG,KAAK,CAAS;QACtE,WAAW,IAAI,CAAC,SAAS,KACxBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,cAAc,cAAc,EACnC,SAAS,EAAC,+BAA+B,EAAA,EAExC,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type ToggleSwitchSize = \"md\" | \"sm\"\n\ninterface ToggleSwitchBaseProps {\n  \"aria-invalid\"?: never\n  \"aria-label\"?: never\n  \"aria-required\"?: never\n  /** Optional description text that appears below the toggle switch label. */\n  description?: string\n  required?: never\n  /** The size of the toggle switch. */\n  size?: ToggleSwitchSize\n}\n\ninterface ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  /** When true, hides the visible label and sets it as aria-label on the input instead. */\n  hideLabel?: false\n  /**\n   * The label content for the toggle switch. Required unless\n   * `aria-labelledby` is provided to reference an external label. When\n   * using non-string content (e.g. JSX), it must not contain\n   * interactive elements. This includes native HTML elements such as\n   * `<a>` and `<button>`, as well as Tapestry or Tapestry-React\n   * interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {\n  \"aria-labelledby\"?: never\n  /** When true, hides the visible label and sets it as aria-label on the input instead. */\n  hideLabel: true\n  /** Label text for the toggle switch, used as an accessible `aria-label`. */\n  label: string\n}\n\ninterface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  /** Not available when `aria-labelledby` is provided. */\n  label?: never\n}\n\nexport type ToggleSwitchProps =\n  | ToggleSwitchWithVisibleLabel\n  | ToggleSwitchWithHiddenLabel\n  | ToggleSwitchWithAriaLabelledBy\n\nexport type ToggleSwitchElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof ToggleSwitchProps | \"type\" | \"required\" | \"aria-required\"\n> &\n  ToggleSwitchProps\n\n/**\n * A toggle switch component that renders as a checkbox input styled as a switch.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the switch (must be a string when `hideLabel` is true)\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n */\nexport const ToggleSwitch = forwardRef<\n  HTMLInputElement,\n  ToggleSwitchElementProps\n>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedby,\n      checked,\n      className,\n      description,\n      hideLabel = false,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: ToggleSwitchElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-toggle-switch\",\n      size && size === \"sm\" && `tds-toggle-switch--sm`,\n      hideLabel && `tds-toggle-switch--hide-label`,\n      className\n    )\n\n    const stableId = useId()\n    const toggleSwitchId = id || `tds-toggle-switch-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <div className=\"tds-toggle-switch-track\" aria-hidden=\"true\"></div>\n        <input\n          {...restProps}\n          id={toggleSwitchId}\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={hideLabel ? (label as string) : undefined}\n          aria-describedby={\n            description && !hideLabel\n              ? `${toggleSwitchId}-description`\n              : ariaDescribedby\n          }\n          checked={checked}\n          ref={ref}\n        />\n        {label && !hideLabel && <label htmlFor={toggleSwitchId}>{label}</label>}\n        {description && !hideLabel && (\n          <p\n            id={`${toggleSwitchId}-description`}\n            className=\"tds-toggle-switch-description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nToggleSwitch.displayName = \"ToggleSwitch\"\n"],"names":["React"],"mappings":";;;;AA4DA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACa,EAC3B,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,mBAAmB,EACnB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,qBAAA,CAAuB,EAChD,SAAS,IAAI,+BAA+B,EAC5C,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,cAAc,GAAG,EAAE,IAAI,CAAA,kBAAA,EAAqB,QAAQ,EAAE;AAE5D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAO;AAClE,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,OAAO,EAAA,YAAA,EACT,SAAS,GAAI,KAAgB,GAAG,SAAS,EAAA,kBAAA,EAEnD,WAAW,IAAI,CAAC;kBACZ,CAAA,EAAG,cAAc,CAAA,YAAA;kBACjB,eAAe,EAErB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EAAA,CACR;QACD,KAAK,IAAI,CAAC,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,cAAc,EAAA,EAAG,KAAK,CAAS;QACtE,WAAW,IAAI,CAAC,SAAS,KACxBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,cAAc,cAAc,EACnC,SAAS,EAAC,+BAA+B,EAAA,EAExC,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/index.css

@@ -912,7 +912,7 @@
     --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
     --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
     --tds-page-header-color:var(--t-text-color);
-    --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
+    --tds-page-header-bottom-border-color:transparent;
     --tds-page-header-headline-color:var(--t-text-color-headline);
     --tds-page-header-headline-font-size:var(--t-font-size-2xl);
     --tds-page-header-padding-x:var(--t-spacing-2);
@@ -927,7 +927,7 @@
     --tds-page-header-nav-item-border-width:1px;
 
     --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
-    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
+    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
 
     --tds-page-header-nav-item-color-hover:var(--t-text-color);
     --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
@@ -971,6 +971,7 @@
       --tds-page-header-nav-item-border-width:1px;
       --tds-page-header-nav-item-color:var(--t-text-color);
       --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
+      --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
       --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
       --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
       --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
@@ -1051,20 +1052,34 @@
           --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
           --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
           --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
           background-color:var(--tds-page-header-nav-item-background-color-active);
           border-color:var(--tds-page-header-nav-item-border-color-active);
+          border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
           color:var(--tds-page-header-nav-item-color-disabled);
           cursor:not-allowed;
           background-color:var(--tds-page-header-nav-item-background-color-disabled);
           opacity:1;
         }
 
+@media (min-width: 600px){
+          :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
+            position:absolute;
+            inset:auto -1px -1px;
+            height:1px;
+            pointer-events:none;
+            content:"";
+            background-color:var(--tds-page-header-bottom-border-color);
+          }
+        }
+
 :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
       position:relative;
     }
@@ -1849,6 +1864,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   font-family:inherit;
   font-style:inherit;
   vertical-align:inherit;
+  text-align:inherit;
 }
 
 .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
@@ -2669,12 +2685,11 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-select-dropdown-border-radius:var(--t-border-radius);
   --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
   --tds-select-dropdown-scroll-behavior:smooth;
-  --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
-  --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
+  --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
   --tds-select-dropdown-closed-opacity:0;
   --tds-select-dropdown-open-opacity:1;
-  --tds-select-dropdown-closed-transform:translateY(-8px);
-  --tds-select-dropdown-open-transform:translateY(0);
+  --tds-select-dropdown-closed-translate:0 -8px;
+  --tds-select-dropdown-open-translate:0 0;
 
   --tds-select-option-gap:var(--t-spacing-1);
   --tds-select-option-padding-block:var(--t-spacing-1);
@@ -2872,11 +2887,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-select{
     --tds-select-transition-property:none;
-    --tds-select-dropdown-transition-enter:none;
-    --tds-select-dropdown-transition-exit:none;
+    --tds-select-dropdown-transition:none;
     --tds-select-dropdown-scroll-behavior:auto;
-    --tds-select-dropdown-closed-transform:none;
-    --tds-select-dropdown-open-transform:none;
+    --tds-select-dropdown-closed-translate:none;
+    --tds-select-dropdown-open-translate:none;
     --tds-select-caret-transition:none;
 }
   }
@@ -2917,6 +2931,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     color:var(--tds-select-placeholder-color);
     white-space:nowrap;
     background-image:none;
+    anchor-name:--tds-select-anchor;
     transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
     -webkit-tap-highlight-color:transparent;
   }
@@ -2939,6 +2954,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-select:has( > button) [popover]{
+    position-anchor:--tds-select-anchor;
     inset:auto;
     inline-size:-moz-max-content;
     inline-size:max-content;
@@ -2964,14 +2980,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-radius:var(--tds-select-dropdown-border-radius);
     box-shadow:var(--tds-select-dropdown-box-shadow);
     opacity:var(--tds-select-dropdown-open-opacity);
-    transform:var(--tds-select-dropdown-open-transform);
-    transition:var(--tds-select-dropdown-transition-enter);
+    translate:var(--tds-select-dropdown-open-translate);
+    transition:var(--tds-select-dropdown-transition);
   }
 
 :is(.tds-select:has( > button) [popover]):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
 :is(.tds-select:has( > button) [popover]) ul{
@@ -2983,7 +2998,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 @starting-style{
       :is(.tds-select:has( > button) [popover]):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 
@@ -3011,8 +3026,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
     :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
     :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
@@ -3060,8 +3074,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       border-radius:var(--tds-select-dropdown-border-radius);
       box-shadow:var(--tds-select-dropdown-box-shadow);
       opacity:var(--tds-select-dropdown-open-opacity);
-      transform:var(--tds-select-dropdown-open-transform);
-      transition:var(--tds-select-dropdown-transition-enter);
+      translate:var(--tds-select-dropdown-open-translate);
+      transition:var(--tds-select-dropdown-transition);
     }
 
     :is(.tds-select select:has( > button)) option::checkmark{
@@ -3071,7 +3085,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     @starting-style{
       :is(.tds-select select:has( > button))::picker(select):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 }