@planningcenter/tapestry 3.5.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +1 -1
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js.map +1 -1
  4. package/dist/components/date-picker/DatePicker.d.ts +1 -1
  5. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  6. package/dist/components/date-picker/DatePicker.js.map +1 -1
  7. package/dist/components/flex/Flex.d.ts +69 -0
  8. package/dist/components/flex/Flex.d.ts.map +1 -0
  9. package/dist/components/flex/Flex.js +18 -0
  10. package/dist/components/flex/Flex.js.map +1 -0
  11. package/dist/components/flex/index.d.ts +3 -0
  12. package/dist/components/flex/index.d.ts.map +1 -0
  13. package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
  14. package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
  15. package/dist/components/number-stepper/NumberStepper.js.map +1 -1
  16. package/dist/components/select/SelectPopover.js +1 -1
  17. package/dist/components/select/SelectPopover.js.map +1 -1
  18. package/dist/components/time-field/TimeField.d.ts +1 -1
  19. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  20. package/dist/components/time-field/TimeField.js.map +1 -1
  21. package/dist/index.css +350 -155
  22. package/dist/index.css.map +1 -1
  23. package/dist/index.d.ts +2 -0
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +2 -0
  26. package/dist/index.js.map +1 -1
  27. package/dist/reactRender.css +2212 -1483
  28. package/dist/reactRender.css.map +1 -1
  29. package/dist/reactRenderLegacy.css +2212 -1483
  30. package/dist/reactRenderLegacy.css.map +1 -1
  31. package/dist/unstable.css +1210 -481
  32. package/dist/unstable.css.map +1 -1
  33. package/dist/unstable.d.ts +1 -2
  34. package/dist/unstable.d.ts.map +1 -1
  35. package/dist/unstable.js +3 -2
  36. package/dist/unstable.js.map +1 -1
  37. package/dist/utilities/breakpoints.d.ts +9 -0
  38. package/dist/utilities/breakpoints.d.ts.map +1 -0
  39. package/dist/utilities/spacingTokens.d.ts +2 -0
  40. package/dist/utilities/spacingTokens.d.ts.map +1 -0
  41. package/package.json +3 -2
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EACV,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,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,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAqDvB"}
1
+ {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EACV,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,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,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAqDvB"}
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../input-text-base/index.css\"\nimport \"./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/TimeField\"\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\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\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-field tds-time-field\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-time-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <DateInput className=\"tds-field-control tds-time-field-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaTimeField>\n )\n}\n"],"names":["React","AriaTimeField"],"mappings":";;;;;AAwEA;;;;;;;;;;;;AAYG;AACG,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,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,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,iBAAiB,EAAA,EAAE,KAAK,CAAS;QACjEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,wCAAwC,EAAA,EAC1D,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,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
1
+ {"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./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/TimeField\"\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\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\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-field tds-time-field\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-time-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <DateInput className=\"tds-field-control tds-time-field-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaTimeField>\n )\n}\n"],"names":["React","AriaTimeField"],"mappings":";;;;;AAwEA;;;;;;;;;;;;AAYG;AACG,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,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,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,iBAAiB,EAAA,EAAE,KAAK,CAAS;QACjEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,wCAAwC,EAAA,EAC1D,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,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
package/dist/index.css CHANGED
@@ -2551,144 +2551,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2551
2551
  color:var(--t-text-color-secondary);
2552
2552
  }
2553
2553
 
2554
- .tds-input{
2555
- --tds-input-border-color:var(--t-form-border-color);
2556
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2557
- --tds-input-background-color:var(--t-form-background-color);
2558
- --tds-input-color:var(--t-form-color);
2559
- --tds-input-font-size:var(--t-font-size-md);
2560
- --tds-input-description-color:var(--t-text-color-secondary);
2561
- --tds-input-description-invalid-icon-display:none;
2562
- --tds-input-min-height:var(--t-container-size-md);
2563
- --tds-input-padding-inline:var(--t-spacing-1);
2564
-
2565
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2566
-
2567
- display:flex;
2568
- flex-direction:column;
2569
- gap:var(--t-spacing-half);
2570
- }
2571
-
2572
- .tds-input label{
2573
- font-size:var(--t-font-size-md);
2574
- font-weight:var(--t-font-weight-normal);
2575
- color:var(--t-text-color);
2576
- }
2577
-
2578
- .tds-input :is(input,textarea){
2579
- inline-size:100%;
2580
- block-size:auto;
2581
- min-block-size:var(--tds-input-min-height);
2582
- padding-block:var(--tds-input-padding-block);
2583
- padding-inline:var(--tds-input-padding-inline);
2584
- font-family:inherit;
2585
- font-size:var(--tds-input-font-size);
2586
- color:var(--tds-input-color);
2587
- -webkit-appearance:none;
2588
- -moz-appearance:none;
2589
- appearance:none;
2590
- outline:var(--t-focus-ring-width) solid transparent;
2591
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2592
- outline-offset:0;
2593
- background-color:var(--tds-input-background-color);
2594
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2595
- border-radius:var(--t-form-border-radius);
2596
- transition-timing-function:var(--t-ease-in-out);
2597
- transition-duration:var(--t-duration-200);
2598
- transition-property:var(--tds-input-transition-property);
2599
- }
2600
-
2601
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2602
- border-color:var(--tds-input-border-color-hover);
2603
- }
2604
-
2605
- :is(.tds-input :is(input,textarea)):focus{
2606
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2607
- }
2608
-
2609
- :is(.tds-input :is(input,textarea)):focus-visible{
2610
- outline-color:var(--t-focus-ring-color);
2611
- outline-offset:var(--t-focus-ring-offset);
2612
- border-color:var(--t-form-border-color-focus);
2613
- }
2614
-
2615
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2616
- color:var(--t-form-placeholder-color);
2617
- -moz-user-select:none;
2618
- user-select:none;
2619
- }
2620
-
2621
- :is(.tds-input :is(input,textarea))::placeholder{
2622
- color:var(--t-form-placeholder-color);
2623
- -webkit-user-select:none;
2624
- -moz-user-select:none;
2625
- user-select:none;
2626
- }
2627
-
2628
- @media (prefers-reduced-motion: reduce){
2629
-
2630
- .tds-input :is(input,textarea){
2631
- --tds-input-transition-property:none;
2632
- }
2633
- }
2634
-
2635
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2636
- --tds-input-background-color:var(--t-form-background-color-error);
2637
- --tds-input-border-color:var(--t-form-border-color-error);
2638
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2639
- --tds-input-description-color:var(--t-text-color-status-error);
2640
- --tds-input-description-invalid-icon-display:inline-block;
2641
- }
2642
-
2643
- .tds-input:has(:is(input,textarea):required) label::after{
2644
- margin-left:.25ch;
2645
- color:var(--t-text-color-status-error);
2646
- content:"*";
2647
- }
2648
-
2649
- .tds-input:where(:has(:is(input,textarea):disabled)){
2650
- --tds-input-border-color:var(--t-form-border-color-disabled);
2651
- --tds-input-background-color:var(--t-form-background-color-disabled);
2652
- --tds-input-color:var(--t-form-color-disabled);
2653
- }
2654
-
2655
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2656
- cursor:not-allowed;
2657
- }
2658
-
2659
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2660
- --tds-input-border-color:var(--t-form-border-color-readonly);
2661
- --tds-input-background-color:var(--t-form-background-color-readonly);
2662
- }
2663
-
2664
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2665
- border-color:var(--tds-input-border-color-hover);
2666
- }
2667
-
2668
- .tds-input.tds-input--lg{
2669
- --tds-input-min-height:var(--t-container-size-lg);
2670
- --tds-input-font-size:var(--t-font-size-lg);
2671
- }
2672
-
2673
- .tds-input-description{
2674
- display:flex;
2675
- gap:var(--t-spacing-half);
2676
- align-items:flex-start;
2677
- margin:0;
2678
- font-size:var(--t-font-size-sm);
2679
- line-height:1.35;
2680
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2681
- cursor:text;
2682
- }
2683
-
2684
- .tds-input-description .tds-input-description-invalid-icon{
2685
- display:var(--tds-input-description-invalid-icon-display, none);
2686
- flex-shrink:0;
2687
- margin-block-start:calc(.5lh - .5em);
2688
- line-height:1.35;
2689
- }
2690
-
2691
2554
  .tds-field{
2555
+ --tds-field-label-color:var(--t-text-color);
2556
+ --tds-field-label-cursor:default;
2557
+ --tds-field-label-font-size:var(--t-font-size-md);
2558
+ --tds-field-description-color:var(--t-text-color-secondary);
2559
+ --tds-field-description-cursor:text;
2560
+ --tds-field-description-font-size:var(--t-font-size-sm);
2561
+ --tds-field-description-line-height:1.35;
2562
+ --tds-field-description-invalid-icon-display:none;
2692
2563
  --tds-field-border-color:var(--t-form-border-color);
2693
2564
  --tds-field-border-color-hover:var(--t-form-border-color-hover);
2694
2565
  --tds-field-border-color-active:var(--t-form-border-color-focus);
@@ -2699,8 +2570,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2699
2570
  --tds-field-min-height:var(--t-container-size-md);
2700
2571
  --tds-field-padding-block:6px;
2701
2572
  --tds-field-padding-inline:var(--t-spacing-1);
2702
- --tds-field-description-color:var(--t-text-color-secondary);
2703
- --tds-field-description-invalid-icon-display:none;
2704
2573
 
2705
2574
  position:relative;
2706
2575
  display:flex;
@@ -2708,10 +2577,28 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2708
2577
  gap:var(--t-spacing-half);
2709
2578
  }
2710
2579
 
2580
+ .tds-field:has(input:disabled):not([data-disabled]),.tds-field:has(select:disabled):not([data-disabled]),.tds-field:has(textarea:disabled):not([data-disabled]){
2581
+ --tds-field-label-color:var(--t-form-color-disabled);
2582
+ --tds-field-label-cursor:not-allowed;
2583
+ --tds-field-description-color:var(--t-form-color-disabled);
2584
+ --tds-field-description-cursor:not-allowed;
2585
+ }
2586
+
2587
+ .tds-field:has([required],[aria-required="true"]) .tds-field-label::after{
2588
+ margin-left:.25ch;
2589
+ color:var(--t-text-color-status-error);
2590
+ content:"*" / "";
2591
+ }
2592
+
2593
+ .tds-field:has([aria-invalid="true"],:user-invalid){
2594
+ --tds-field-description-color:var(--t-text-color-status-error);
2595
+ --tds-field-description-invalid-icon-display:inline-block;
2596
+ }
2597
+
2711
2598
  .tds-field[data-required] .tds-field-label::after{
2712
2599
  margin-left:.25ch;
2713
2600
  color:var(--t-text-color-status-error);
2714
- content:"*";
2601
+ content:"*" / "";
2715
2602
  }
2716
2603
 
2717
2604
  .tds-field[data-invalid]{
@@ -2734,16 +2621,66 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2734
2621
  cursor:not-allowed;
2735
2622
  }
2736
2623
 
2624
+ .tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"]){
2625
+ --tds-field-label-cursor:pointer;
2626
+
2627
+ display:inline-grid;
2628
+ grid-template-columns:auto;
2629
+ grid-auto-columns:1fr;
2630
+ row-gap:var(--t-spacing-fourth);
2631
+ -moz-column-gap:var(--t-spacing-1);
2632
+ column-gap:var(--t-spacing-1);
2633
+ }
2634
+
2635
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])):has(:disabled){
2636
+ --tds-field-label-cursor:not-allowed;
2637
+ }
2638
+
2639
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="checkbox"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="radio"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
2640
+ grid-row:1;
2641
+ grid-column:1;
2642
+ align-self:center;
2643
+ }
2644
+
2645
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
2646
+ display:flex;
2647
+ }
2648
+
2649
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-label{
2650
+ grid-row:1;
2651
+ grid-column:2;
2652
+ }
2653
+
2654
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-description{
2655
+ grid-row:2;
2656
+ grid-column:2;
2657
+ }
2658
+
2659
+ .tds-field--sm{
2660
+ --tds-field-label-font-size:var(--t-font-size-sm);
2661
+ --tds-field-description-font-size:var(--t-font-size-xs);
2662
+ --tds-field-description-line-height:1.3;
2663
+ }
2664
+
2737
2665
  .tds-field--lg{
2738
2666
  --tds-field-min-height:var(--t-container-size-lg);
2739
2667
  --tds-field-font-size:var(--t-font-size-lg);
2740
2668
  }
2741
2669
 
2742
2670
  .tds-field-label{
2743
- font-size:var(--t-font-size-md);
2671
+ font-size:var(--tds-field-label-font-size);
2744
2672
  font-weight:var(--t-font-weight-normal);
2745
- color:var(--t-text-color);
2746
- cursor:default;
2673
+ color:var(--tds-field-label-color);
2674
+ cursor:var(--tds-field-label-cursor);
2675
+ }
2676
+
2677
+ .tds-field-label--hidden{
2678
+ position:absolute;
2679
+ width:1px;
2680
+ height:1px;
2681
+ overflow:hidden;
2682
+ white-space:nowrap;
2683
+ clip-path:inset(50%);
2747
2684
  }
2748
2685
 
2749
2686
  .tds-field-control{
@@ -2796,17 +2733,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2796
2733
  gap:var(--t-spacing-half);
2797
2734
  align-items:flex-start;
2798
2735
  margin:0;
2799
- font-size:var(--t-font-size-sm);
2800
- line-height:1.35;
2736
+ font-size:var(--tds-field-description-font-size);
2737
+ line-height:var(--tds-field-description-line-height);
2801
2738
  color:var(--tds-field-description-color, var(--t-text-color-secondary));
2802
- cursor:text;
2739
+ cursor:var(--tds-field-description-cursor);
2803
2740
  }
2804
2741
 
2805
2742
  .tds-field-description .tds-field-description-invalid-icon{
2806
2743
  display:var(--tds-field-description-invalid-icon-display, none);
2807
2744
  flex-shrink:0;
2808
2745
  margin-block-start:calc(.5lh - .5em);
2809
- line-height:1.35;
2746
+ line-height:var(--tds-field-description-line-height);
2810
2747
  }
2811
2748
 
2812
2749
  .tds-field-date-segment{
@@ -3192,6 +3129,131 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3192
3129
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3193
3130
  }
3194
3131
 
3132
+ .tds-dropdown-popover{
3133
+ min-inline-size:10rem;
3134
+ max-inline-size:24rem;
3135
+ padding:var(--t-spacing-1);
3136
+ overflow:auto;
3137
+ overscroll-behavior:none;
3138
+ -webkit-user-select:none;
3139
+ -moz-user-select:none;
3140
+ user-select:none;
3141
+ outline:0;
3142
+ scrollbar-color:#0004 var(--t-surface-color-card);
3143
+ scrollbar-width:thin;
3144
+ background:var(--t-surface-color-card);
3145
+ background-clip:padding-box;
3146
+ border:1px solid var(--t-border-color);
3147
+ border-radius:var(--t-border-radius);
3148
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3149
+ }
3150
+ .tds-dropdown-popover[data-entering]{
3151
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
3152
+ }
3153
+ .tds-dropdown-popover[data-exiting]{
3154
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
3155
+ }
3156
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3157
+ will-change:opacity, transform;
3158
+ }
3159
+ @keyframes tds-dropdown-popover{
3160
+ from{
3161
+ opacity:0;
3162
+ transform:translateY(-8px);
3163
+ }
3164
+ }
3165
+ @media (prefers-reduced-motion: reduce){
3166
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3167
+ animation:none;
3168
+ }
3169
+ }
3170
+ .tds-dropdown-popover [role="menu"]{
3171
+ outline:0;
3172
+ }
3173
+ .tds-dropdown-item{
3174
+ --tds-dropdown-item-color:var(--t-text-color);
3175
+
3176
+ display:flex;
3177
+ gap:var(--t-spacing-1);
3178
+ align-items:center;
3179
+ padding-block:var(--t-spacing-1);
3180
+ padding-inline:var(--t-spacing-2);
3181
+ font-size:1rem;
3182
+ color:var(--tds-dropdown-item-color);
3183
+ text-decoration:none;
3184
+ cursor:default;
3185
+ outline:0;
3186
+ border-radius:var(--t-border-radius);
3187
+ }
3188
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
3189
+ background:var(--t-fill-color-neutral-070);
3190
+ }
3191
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
3192
+ background:var(--t-fill-color-neutral-060);
3193
+ }
3194
+ .tds-dropdown-item[data-disabled]{
3195
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
3196
+
3197
+ cursor:not-allowed;
3198
+ }
3199
+ .tds-dropdown-item--destructive{
3200
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
3201
+ }
3202
+ .tds-dropdown-item--staff-only{
3203
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
3204
+ }
3205
+ a.tds-dropdown-item:is(:hover, :active){
3206
+ color:var(--tds-dropdown-item-color);
3207
+ }
3208
+ .tds-dropdown-item [slot="prefix"],
3209
+ .tds-dropdown-item [slot="suffix"]{
3210
+ flex-shrink:0;
3211
+ }
3212
+ .tds-dropdown-item [slot="label"]{
3213
+ flex:1;
3214
+ min-width:0;
3215
+ overflow:hidden;
3216
+ text-overflow:ellipsis;
3217
+ white-space:nowrap;
3218
+ }
3219
+ .tds-dropdown-item [slot="description"]{
3220
+ font-size:var(--t-font-size-sm);
3221
+ color:var(--t-text-color-secondary);
3222
+ }
3223
+ .tds-dropdown-item:has([slot="description"]){
3224
+ display:grid;
3225
+ grid-template-areas:"prefix label suffix" "prefix description suffix";
3226
+ grid-template-columns:auto 1fr auto;
3227
+ }
3228
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
3229
+ grid-area:prefix;
3230
+ }
3231
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
3232
+ grid-area:label;
3233
+ }
3234
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
3235
+ grid-area:description;
3236
+ }
3237
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
3238
+ grid-area:suffix;
3239
+ }
3240
+ .tds-dropdown-section:not(:first-child){
3241
+ margin-block-start:var(--t-spacing-half);
3242
+ }
3243
+ .tds-dropdown-section-label{
3244
+ padding-block:var(--t-spacing-1);
3245
+ padding-inline:var(--t-spacing-1);
3246
+ font-size:var(--t-font-size-sm);
3247
+ font-weight:var(--t-font-weight-semibold);
3248
+ color:var(--t-text-color-secondary);
3249
+ }
3250
+ .tds-dropdown-separator{
3251
+ margin-block:var(--t-spacing-half);
3252
+ margin-inline:0;
3253
+ border:0;
3254
+ border-top:1px solid var(--t-border-color);
3255
+ }
3256
+
3195
3257
 
3196
3258
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
3197
3259
  -webkit-appearance:none;
@@ -3216,6 +3278,143 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3216
3278
  }
3217
3279
  }
3218
3280
 
3281
+ .tds-input{
3282
+ --tds-input-border-color:var(--t-form-border-color);
3283
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
3284
+ --tds-input-background-color:var(--t-form-background-color);
3285
+ --tds-input-color:var(--t-form-color);
3286
+ --tds-input-font-size:var(--t-font-size-md);
3287
+ --tds-input-description-color:var(--t-text-color-secondary);
3288
+ --tds-input-description-invalid-icon-display:none;
3289
+ --tds-input-min-height:var(--t-container-size-md);
3290
+ --tds-input-padding-inline:var(--t-spacing-1);
3291
+
3292
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
3293
+
3294
+ display:flex;
3295
+ flex-direction:column;
3296
+ gap:var(--t-spacing-half);
3297
+ }
3298
+
3299
+ .tds-input label{
3300
+ font-size:var(--t-font-size-md);
3301
+ font-weight:var(--t-font-weight-normal);
3302
+ color:var(--t-text-color);
3303
+ }
3304
+
3305
+ .tds-input :is(input,textarea){
3306
+ inline-size:100%;
3307
+ block-size:auto;
3308
+ min-block-size:var(--tds-input-min-height);
3309
+ padding-block:var(--tds-input-padding-block);
3310
+ padding-inline:var(--tds-input-padding-inline);
3311
+ font-family:inherit;
3312
+ font-size:var(--tds-input-font-size);
3313
+ color:var(--tds-input-color);
3314
+ -webkit-appearance:none;
3315
+ -moz-appearance:none;
3316
+ appearance:none;
3317
+ outline:var(--t-focus-ring-width) solid transparent;
3318
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
3319
+ outline-offset:0;
3320
+ background-color:var(--tds-input-background-color);
3321
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
3322
+ border-radius:var(--t-form-border-radius);
3323
+ transition-timing-function:var(--t-ease-in-out);
3324
+ transition-duration:var(--t-duration-200);
3325
+ transition-property:var(--tds-input-transition-property);
3326
+ }
3327
+
3328
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
3329
+ border-color:var(--tds-input-border-color-hover);
3330
+ }
3331
+
3332
+ :is(.tds-input :is(input,textarea)):focus{
3333
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
3334
+ }
3335
+
3336
+ :is(.tds-input :is(input,textarea)):focus-visible{
3337
+ outline-color:var(--t-focus-ring-color);
3338
+ outline-offset:var(--t-focus-ring-offset);
3339
+ border-color:var(--t-form-border-color-focus);
3340
+ }
3341
+
3342
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
3343
+ color:var(--t-form-placeholder-color);
3344
+ -moz-user-select:none;
3345
+ user-select:none;
3346
+ }
3347
+
3348
+ :is(.tds-input :is(input,textarea))::placeholder{
3349
+ color:var(--t-form-placeholder-color);
3350
+ -webkit-user-select:none;
3351
+ -moz-user-select:none;
3352
+ user-select:none;
3353
+ }
3354
+
3355
+ @media (prefers-reduced-motion: reduce){
3356
+
3357
+ .tds-input :is(input,textarea){
3358
+ --tds-input-transition-property:none;
3359
+ }
3360
+ }
3361
+
3362
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
3363
+ --tds-input-background-color:var(--t-form-background-color-error);
3364
+ --tds-input-border-color:var(--t-form-border-color-error);
3365
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
3366
+ --tds-input-description-color:var(--t-text-color-status-error);
3367
+ --tds-input-description-invalid-icon-display:inline-block;
3368
+ }
3369
+
3370
+ .tds-input:has(:is(input,textarea):required) label::after{
3371
+ margin-left:.25ch;
3372
+ color:var(--t-text-color-status-error);
3373
+ content:"*";
3374
+ }
3375
+
3376
+ .tds-input:where(:has(:is(input,textarea):disabled)){
3377
+ --tds-input-border-color:var(--t-form-border-color-disabled);
3378
+ --tds-input-background-color:var(--t-form-background-color-disabled);
3379
+ --tds-input-color:var(--t-form-color-disabled);
3380
+ }
3381
+
3382
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
3383
+ cursor:not-allowed;
3384
+ }
3385
+
3386
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
3387
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3388
+ --tds-input-background-color:var(--t-form-background-color-readonly);
3389
+ }
3390
+
3391
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
3392
+ border-color:var(--tds-input-border-color-hover);
3393
+ }
3394
+
3395
+ .tds-input.tds-input--lg{
3396
+ --tds-input-min-height:var(--t-container-size-lg);
3397
+ --tds-input-font-size:var(--t-font-size-lg);
3398
+ }
3399
+
3400
+ .tds-input-description{
3401
+ display:flex;
3402
+ gap:var(--t-spacing-half);
3403
+ align-items:flex-start;
3404
+ margin:0;
3405
+ font-size:var(--t-font-size-sm);
3406
+ line-height:1.35;
3407
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
3408
+ cursor:text;
3409
+ }
3410
+
3411
+ .tds-input-description .tds-input-description-invalid-icon{
3412
+ display:var(--tds-input-description-invalid-icon-display, none);
3413
+ flex-shrink:0;
3414
+ margin-block-start:calc(.5lh - .5em);
3415
+ line-height:1.35;
3416
+ }
3417
+
3219
3418
  .tds-number-stepper{
3220
3419
  --tds-number-stepper-button-offset:4px;
3221
3420
  --tds-number-stepper-button-gap:2px;
@@ -3346,13 +3545,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3346
3545
  }
3347
3546
 
3348
3547
  .tds-radio:has(input:checked){
3349
- --tds-radio-input-background-color:var(--t-form-background-color);
3548
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3350
3549
  --tds-radio-input-border-color:var(--t-border-color-control-info);
3351
3550
  --tds-radio-input-border-width:4px;
3352
3551
  }
3353
3552
 
3354
3553
  .tds-radio:has(input:checked) input:hover:not(:disabled){
3355
- --tds-radio-input-background-color:var(--t-form-background-color);
3554
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3356
3555
  --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
3357
3556
  }
3358
3557
 
@@ -3441,7 +3640,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3441
3640
  }
3442
3641
 
3443
3642
  :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
3444
- --tds-radio-input-background-color:var(--t-form-background-color);
3643
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3445
3644
  }
3446
3645
 
3447
3646
  .tds-radio-group:has(input:required) legend::after{
@@ -3509,7 +3708,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3509
3708
  --tds-select-dropdown-scrollbar-width:thin;
3510
3709
  --tds-select-dropdown-border-radius:var(--t-border-radius);
3511
3710
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
3512
- --tds-select-dropdown-scroll-behavior:smooth;
3513
3711
  --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;
3514
3712
  --tds-select-dropdown-closed-opacity:0;
3515
3713
  --tds-select-dropdown-open-opacity:1;
@@ -3717,7 +3915,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3717
3915
  .tds-select{
3718
3916
  --tds-select-transition-property:none;
3719
3917
  --tds-select-dropdown-transition:none;
3720
- --tds-select-dropdown-scroll-behavior:auto;
3721
3918
  --tds-select-dropdown-closed-translate:none;
3722
3919
  --tds-select-dropdown-open-translate:none;
3723
3920
  --tds-select-caret-transition:none;
@@ -3801,12 +3998,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3801
3998
  position-try-fallbacks:flip-block, flip-inline;
3802
3999
  overflow:auto;
3803
4000
  overflow-x:hidden;
3804
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
3805
4001
  overscroll-behavior:none;
3806
4002
  -webkit-user-select:none;
3807
4003
  -moz-user-select:none;
3808
4004
  user-select:none;
3809
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
3810
4005
  scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
3811
4006
  scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
3812
4007
  background:var(--tds-select-dropdown-background-color);
@@ -3898,7 +4093,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3898
4093
  position-try-fallbacks:flip-block, flip-inline;
3899
4094
  overflow:auto;
3900
4095
  overflow-x:hidden;
3901
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
4096
+ scroll-behavior:auto;
3902
4097
  overscroll-behavior:none;
3903
4098
  -webkit-user-select:none;
3904
4099
  -moz-user-select:none;