npm - @dev-dga/css - Versions diffs - 0.12.0 → 0.12.1 - Mend

@dev-dga/css 0.12.0 → 0.12.1

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 (17) hide show

package/CHANGELOG.md +7 -0
package/README.md +4 -2
package/dist/components/date-picker.css +1 -1
package/dist/components/date-picker.css.map +1 -1
package/dist/components/date-range-picker.css +1 -1
package/dist/components/date-range-picker.css.map +1 -1
package/dist/components/dropdown.css +1 -1
package/dist/components/dropdown.css.map +1 -1
package/dist/components/number-input.css +1 -1
package/dist/components/number-input.css.map +1 -1
package/dist/components/text-input.css +1 -1
package/dist/components/text-input.css.map +1 -1
package/dist/components/textarea.css +1 -1
package/dist/components/textarea.css.map +1 -1
package/dist/index.css +1 -1
package/dist/index.css.map +1 -1
package/package.json +14 -8

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # @dev-dga/css
+## 0.12.1
+### Patch Changes
+- **Field underline animation.** The focus/pressed underline on all six field controls (`text-input`, `textarea`, `number-input`, `dropdown`, `date-picker`, `date-range-picker`) now grows from center via `transform: scaleX()` (rest 0, pressed ~50%, focus 100%) instead of snapping between a centered half-bar and the full-width bar. Respects `prefers-reduced-motion`. No API or `.ddga-*` class change.
+- **Package metadata.** Refreshed npm `description` / `keywords` (added `platforms-code`, `arabic`, `ksa`), pointed `homepage` at the community hub, and clarified the package is an independent implementation, not the official DGA system.
 ## 0.12.0
 The **SDGA Platforms Code parity** release. ~40 per-component stylesheets were rebuilt or aligned to the official DGA "Platforms Code" Figma, new component blocks were added, and the token layer shifted (brand green, text ink, navy shadow scale, 3-tier architecture). Moves in lockstep with `@dev-dga/react` — see its changelog for the full prop-level detail; this note focuses on what changes for CSS/BEM consumers.

package/README.md CHANGED Viewed

@@ -1,6 +1,8 @@
 # @dev-dga/css
-CSS for the **DGA (Digital Government Authority)** design system , reset, custom properties, dark theme, and per-component styles. Plain CSS in cascade layers (`@layer ddga-base, ddga-components`); no JS runtime.
+CSS for the **DGA (Digital Government Authority) Platforms Code** design system, Saudi Arabia's (KSA) national reference for government digital platforms. An independent implementation. Reset, custom properties, dark theme, RTL/Arabic, and per-component styles. Plain CSS in cascade layers (`@layer ddga-base, ddga-components`); no JS runtime.
+> Independent, community-maintained. Not affiliated with or endorsed by the DGA.
 Pairs with [`@dev-dga/react`](https://www.npmjs.com/package/@dev-dga/react), but works with any framework or none.
@@ -31,7 +33,7 @@ Theming is driven by `data-theme="light|dark"` and `dir="ltr|rtl"` on a containe
 ## Docs
-[Live Storybook](https://devdhaif.github.io/dev-dga/) · [Source](https://github.com/DevDhaif/dev-dga)
+[Live Storybook](https://dev-dga.vercel.app/) · [Source](https://github.com/DevDhaif/dev-dga)
 ## License

package/dist/components/date-picker.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-field[data-slot=date-picker-field]{gap:var(--ddga-space-2)}.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-date-picker__required{color:var(--ddga-error-700)}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-inline:var(--ddga-space-2);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-date-picker-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-date-picker-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:0 auto;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-picker__input{direction:rtl}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-gray-700);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-gray-500)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-gray-700);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-gray-700);background-color:#0000}.ddga-date-picker__open{min-inline-size:var(--ddga-space-4);cursor:pointer;background:0 0;border:0;outline:none;flex:auto;align-self:stretch;padding:0}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open{cursor:not-allowed}.ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-700)}.ddga-date-picker-trigger[data-focus-within]{box-shadow:var(--ddga-shadow-md)}.ddga-date-picker-trigger[data-focus-within]:not([data-pressed]):after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),.ddga-date-picker-trigger--pressed{background-color:var(--ddga-gray-100)}.ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,.ddga-date-picker-trigger--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-date-picker-trigger--error,.ddga-date-picker-trigger--error[data-hovered],.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-error-700)}.ddga-date-picker-trigger[data-readonly],.ddga-date-picker-trigger[data-disabled]{border-color:var(--ddga-gray-300);background-color:#0000}.ddga-date-picker-trigger[data-disabled]{cursor:not-allowed}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder],:is(.ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,.ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required){color:var(--ddga-gray-400)}.ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message{padding-block:var(--ddga-space-1)}[data-theme=dark] .ddga-date-picker-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker__segment{color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-date-picker-trigger--filled-lighter,[data-theme=dark] .ddga-date-picker-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-date-picker-trigger[data-focus-within]:after,[data-theme=dark] .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,[data-theme=dark] .ddga-date-picker-trigger--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),[data-theme=dark] .ddga-date-picker-trigger--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-picker-trigger[data-readonly],[data-theme=dark] .ddga-date-picker-trigger[data-disabled]{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,[data-theme=dark] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker-trigger[data-disabled]{border-color:graytext}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment{color:graytext}}}
+@layer ddga-components{.ddga-field[data-slot=date-picker-field]{gap:var(--ddga-space-2)}.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-date-picker__required{color:var(--ddga-error-700)}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-inline:var(--ddga-space-2);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-date-picker-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-date-picker-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:0 auto;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-picker__input{direction:rtl}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-gray-700);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-gray-500)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-gray-700);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-gray-700);background-color:#0000}.ddga-date-picker__open{min-inline-size:var(--ddga-space-4);cursor:pointer;background:0 0;border:0;outline:none;flex:auto;align-self:stretch;padding:0}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open{cursor:not-allowed}.ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-700)}.ddga-date-picker-trigger[data-focus-within]{box-shadow:var(--ddga-shadow-md)}.ddga-date-picker-trigger:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-date-picker-trigger[data-focus-within]:not([data-pressed]):after{transform:scaleX(1)}.ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),.ddga-date-picker-trigger--pressed{background-color:var(--ddga-gray-100)}.ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,.ddga-date-picker-trigger--pressed:after{transform:scaleX(.5)}.ddga-date-picker-trigger--error,.ddga-date-picker-trigger--error[data-hovered],.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-error-700)}.ddga-date-picker-trigger[data-readonly],.ddga-date-picker-trigger[data-disabled]{border-color:var(--ddga-gray-300);background-color:#0000}.ddga-date-picker-trigger[data-disabled]{cursor:not-allowed}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder],:is(.ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,.ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required){color:var(--ddga-gray-400)}.ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message{padding-block:var(--ddga-space-1)}[data-theme=dark] .ddga-date-picker-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker__segment{color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-date-picker-trigger--filled-lighter,[data-theme=dark] .ddga-date-picker-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-date-picker-trigger:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),[data-theme=dark] .ddga-date-picker-trigger--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-picker-trigger[data-readonly],[data-theme=dark] .ddga-date-picker-trigger[data-disabled]{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,[data-theme=dark] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger,.ddga-date-picker-trigger:after{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker-trigger[data-disabled]{border-color:graytext}.ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment{color:graytext}}}
 /*# sourceMappingURL=date-picker.css.map */

package/dist/components/date-picker.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAQE,iEAIA,yNASA,wDAMA,+XAmBA,iFAIA,mFAMA,kGAIA,kGAOA,8IAQA,iDAIA,sNASA,wEAGA,+HAIA,0FAIA,8GAQA,uJAUA,oFAMA,4GAMA,~~8EAGA~~,~~oLAcA~~,2JAIA,~~gPAYA~~,uKAQA,2IAKA,4DAGA,mWAWA,kGAMA,gHAIA,4EAGA,kGAGA,gKAIA,8HAGA,~~oRAMA~~,kMAKA,4JAIA,8NASA,uCACE,~~2CAOF~~,8BACE,sDAGA,4FAIA,+DAGA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DatePicker field/trigger chrome — mirrors the SDGA Text Input field model\n (see text-input.css): the official Date field IS the Text input field (no\n calendar icon). The calendar dropdown (popover, toggle, month grid) is\n shared with DateRangePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. /\n\n / SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. /\n .ddga-field[data-slot='date-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-picker__required {\n color: var(--ddga-error-700);\n }\n\n / ─── Trigger (the SDGA date field; owns border/focus/size/style/state) ─── /\n\n .ddga-date-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / SDGA Medium 32 / Large 40 (Large is the official date-field size). /\n .ddga-date-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / SDGA Style axis. /\n .ddga-date-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── DateInput + segments ─── /\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n [dir='rtl'] .ddga-date-picker__input {\n direction: rtl;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n / ─── Open surface (iconless): fills the field's trailing space so a click\n anywhere but the segments opens the calendar. ─── /\n\n .ddga-date-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open {\n cursor: not-allowed;\n }\n\n / ─── Hover (outlined style only: border darkens to gray-700) ─── /\n\n .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n\n / ─── Focus (shadow-md + full-width 2px dark underline, NOT a ring) ─── /\n\n .ddga-date-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-date-picker-trigger~~[data-focus-within]:not([data-pressed])~~::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Pressed (JS-driven [data-pressed] — `:active` is unreliable on the\n react-aria Group; see usePressedState — plus a static --pressed hook for\n stories): gray-100 fill + a centered ~50% underline (focus suppresses its\n full-width underline while pressed). ─── /\n\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-picker-trigger--pressed::after {\n ~~content~~: ~~'';\n position: absolute;\n inset-inline: 25%;\n bottom: -1px;\n block-size: 2px;\n background-color: var~~(~~--ddga-gray-950~~);\n }\n\n / ─── Error (error-700 border) ─── /\n\n .ddga-date-picker-trigger--error,\n .ddga-date-picker-trigger--error[data-hovered],\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only / Disabled (gray-300 border, transparent fill, no opacity) ─── /\n\n .ddga-date-picker-trigger[data-readonly],\n .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Helper / error line ─── /\n\n .ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n / ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── /\n\n [data-theme='dark'] .ddga-date-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-picker-trigger~~[data-focus-within]~~::after~~,\n [data-theme='dark']\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n [data-theme='dark']~~ ~~.ddga-date-picker-trigger--pressed::after~~ {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n [data-theme='dark']\n .ddga-date-picker-trigger[data-disabled]\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n / ─── Forced colors (the focus underline is invisible; restore an outline) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment {\n color: GrayText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAQE,iEAIA,yNASA,wDAMA,+XAmBA,iFAIA,mFAMA,kGAIA,kGAOA,8IAQA,iDAIA,sNASA,wEAGA,+HAIA,0FAIA,8GAQA,uJAUA,oFAMA,4GAMA,8EAIA,oOAYA,2FASA,2JAIA,sJAOA,uKAQA,2IAKA,4DAGA,mWAWA,kGAMA,gHAIA,4EAGA,kGAGA,gKAIA,8HAGA,4FAGA,kMAKA,4JAIA,8NASA,uCACE,2EAQF,8BACE,sDAGA,4FAIA,+DAGA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DatePicker field/trigger chrome — mirrors the SDGA Text Input field model\n (see text-input.css): the official Date field IS the Text input field (no\n calendar icon). The calendar dropdown (popover, toggle, month grid) is\n shared with DateRangePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. /\n\n / SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. /\n .ddga-field[data-slot='date-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-picker__required {\n color: var(--ddga-error-700);\n }\n\n / ─── Trigger (the SDGA date field; owns border/focus/size/style/state) ─── /\n\n .ddga-date-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / SDGA Medium 32 / Large 40 (Large is the official date-field size). /\n .ddga-date-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / SDGA Style axis. /\n .ddga-date-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── DateInput + segments ─── /\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n [dir='rtl'] .ddga-date-picker__input {\n direction: rtl;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n / ─── Open surface (iconless): fills the field's trailing space so a click\n anywhere but the segments opens the calendar. ─── /\n\n .ddga-date-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open {\n cursor: not-allowed;\n }\n\n / ─── Hover (outlined style only: border darkens to gray-700) ─── /\n\n .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n\n / ─── Focus (shadow-md + full-width 2px dark underline, NOT a ring) ─── /\n\n .ddga-date-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n / Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. /\n .ddga-date-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n .ddga-date-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n\n / ─── Pressed (JS-driven [data-pressed] — `:active` is unreliable on the\n react-aria Group; see usePressedState — plus a static --pressed hook for\n stories): gray-100 fill + a centered ~50% underline (focus suppresses its\n full-width underline while pressed). ─── /\n\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n / ─── Error (error-700 border) ─── /\n\n .ddga-date-picker-trigger--error,\n .ddga-date-picker-trigger--error[data-hovered],\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only / Disabled (gray-300 border, transparent fill, no opacity) ─── /\n\n .ddga-date-picker-trigger[data-readonly],\n .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Helper / error line ─── /\n\n .ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n / ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── /\n\n [data-theme='dark'] .ddga-date-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n [data-theme='dark']\n .ddga-date-picker-trigger[data-disabled]\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger,\n .ddga-date-picker-trigger::after {\n transition: none;\n }\n }\n\n / ─── Forced colors (the focus underline is invisible; restore an outline) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment {\n color: GrayText;\n }\n }\n}\n"],"names":[]}

package/dist/components/date-range-picker.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-field[data-slot=date-range-picker-field]{gap:var(--ddga-space-2)}.ddga-date-range-picker__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-date-range-picker__required{color:var(--ddga-error-700)}.ddga-date-range-picker-trigger{align-items:center;gap:var(--ddga-space-1);inline-size:100%;padding-inline:var(--ddga-space-2);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-date-range-picker-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-date-range-picker-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-date-range-picker-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-date-range-picker-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-date-range-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:0 auto;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-range-picker__input{direction:rtl}.ddga-date-range-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-gray-700);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-gray-500)}.ddga-date-range-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-range-picker__segment[data-type=literal]{color:var(--ddga-gray-700);padding-inline:0}.ddga-date-range-picker__segment[data-type=literal][data-focused]{color:var(--ddga-gray-700);background-color:#0000}.ddga-date-range-picker__separator{padding-inline:var(--ddga-space-1);color:var(--ddga-gray-500);flex:none}.ddga-date-range-picker__open{min-inline-size:var(--ddga-space-4);cursor:pointer;background:0 0;border:0;outline:none;flex:auto;align-self:stretch;padding:0}.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open{cursor:not-allowed}.ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-700)}.ddga-date-range-picker-trigger[data-focus-within]{box-shadow:var(--ddga-shadow-md)}.ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed]):after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),.ddga-date-range-picker-trigger--pressed{background-color:var(--ddga-gray-100)}.ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,.ddga-date-range-picker-trigger--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-date-range-picker-trigger--error,.ddga-date-range-picker-trigger--error[data-hovered],.ddga-date-range-picker-trigger--error[data-focus-within]{border-color:var(--ddga-error-700)}.ddga-date-range-picker-trigger[data-readonly],.ddga-date-range-picker-trigger[data-disabled]{border-color:var(--ddga-gray-300);background-color:#0000}.ddga-date-range-picker-trigger[data-disabled]{cursor:not-allowed}.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator,:is(.ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,.ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__required){color:var(--ddga-gray-400)}.ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-calendar--range td:has([data-selected]){background-color:var(--ddga-sa-100)}.ddga-calendar--range td:has([data-selection-start]){border-start-start-radius:var(--ddga-radius-full);border-end-start-radius:var(--ddga-radius-full)}.ddga-calendar--range td:has([data-selection-end]){border-start-end-radius:var(--ddga-radius-full);border-end-end-radius:var(--ddga-radius-full)}.ddga-calendar--range .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]){color:var(--ddga-color-foreground);background-color:#0000}[data-theme=dark] .ddga-date-range-picker-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker__segment{color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-date-range-picker-trigger--filled-lighter,[data-theme=dark] .ddga-date-range-picker-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-date-range-picker-trigger[data-focus-within]:after,[data-theme=dark] .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,[data-theme=dark] .ddga-date-range-picker-trigger--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),[data-theme=dark] .ddga-date-range-picker-trigger--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-range-picker-trigger[data-readonly],[data-theme=dark] .ddga-date-range-picker-trigger[data-disabled]{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-date-range-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-range-picker-trigger{border:1px solid canvastext}.ddga-date-range-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-range-picker-trigger[data-disabled]{border-color:graytext}.ddga-calendar--range td:has([data-selected]){background-color:highlight}.ddga-calendar--range .ddga-calendar__cell[data-selected]{color:highlighttext}}}
+@layer ddga-components{.ddga-field[data-slot=date-range-picker-field]{gap:var(--ddga-space-2)}.ddga-date-range-picker__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-date-range-picker__required{color:var(--ddga-error-700)}.ddga-date-range-picker-trigger{align-items:center;gap:var(--ddga-space-1);inline-size:100%;padding-inline:var(--ddga-space-2);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-date-range-picker-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-date-range-picker-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-date-range-picker-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-date-range-picker-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-date-range-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:0 auto;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-range-picker__input{direction:rtl}.ddga-date-range-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-gray-700);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-gray-500)}.ddga-date-range-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-range-picker__segment[data-type=literal]{color:var(--ddga-gray-700);padding-inline:0}.ddga-date-range-picker__segment[data-type=literal][data-focused]{color:var(--ddga-gray-700);background-color:#0000}.ddga-date-range-picker__separator{padding-inline:var(--ddga-space-1);color:var(--ddga-gray-500);flex:none}.ddga-date-range-picker__open{min-inline-size:var(--ddga-space-4);cursor:pointer;background:0 0;border:0;outline:none;flex:auto;align-self:stretch;padding:0}.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open{cursor:not-allowed}.ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-700)}.ddga-date-range-picker-trigger[data-focus-within]{box-shadow:var(--ddga-shadow-md)}.ddga-date-range-picker-trigger:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed]):after{transform:scaleX(1)}.ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),.ddga-date-range-picker-trigger--pressed{background-color:var(--ddga-gray-100)}.ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]):after,.ddga-date-range-picker-trigger--pressed:after{transform:scaleX(.5)}.ddga-date-range-picker-trigger--error,.ddga-date-range-picker-trigger--error[data-hovered],.ddga-date-range-picker-trigger--error[data-focus-within]{border-color:var(--ddga-error-700)}.ddga-date-range-picker-trigger[data-readonly],.ddga-date-range-picker-trigger[data-disabled]{border-color:var(--ddga-gray-300);background-color:#0000}.ddga-date-range-picker-trigger[data-disabled]{cursor:not-allowed}.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],.ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator,:is(.ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,.ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__required){color:var(--ddga-gray-400)}.ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-calendar--range td:has([data-selected]){background-color:var(--ddga-sa-100)}.ddga-calendar--range td:has([data-selection-start]){border-start-start-radius:var(--ddga-radius-full);border-end-start-radius:var(--ddga-radius-full)}.ddga-calendar--range td:has([data-selection-end]){border-start-end-radius:var(--ddga-radius-full);border-end-end-radius:var(--ddga-radius-full)}.ddga-calendar--range .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]){color:var(--ddga-color-foreground);background-color:#0000}[data-theme=dark] .ddga-date-range-picker-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker__segment{color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-date-range-picker-trigger--filled-lighter,[data-theme=dark] .ddga-date-range-picker-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-date-range-picker-trigger:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),[data-theme=dark] .ddga-date-range-picker-trigger--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-date-range-picker-trigger[data-readonly],[data-theme=dark] .ddga-date-range-picker-trigger[data-disabled]{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-date-range-picker-trigger,.ddga-date-range-picker-trigger:after{transition:none}}@media (forced-colors:active){.ddga-date-range-picker-trigger{border:1px solid canvastext}.ddga-date-range-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-range-picker-trigger[data-disabled]{border-color:graytext}.ddga-calendar--range td:has([data-selected]){background-color:highlight}.ddga-calendar--range .ddga-calendar__cell[data-selected]{color:highlighttext}}}
 /*# sourceMappingURL=date-range-picker.css.map */

package/dist/components/date-range-picker.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAQE,uEAIA,+NASA,8DAMA,qYAkBA,uFAIA,yFAKA,wGAIA,wGAOA,oJAQA,uDAIA,4NASA,8EAGA,qIAIA,gGAIA,oHAKA,2GAQA,6JAUA,gGAMA,kHAGA,oFAGA,0LAQA,uKAIA,4PAYA,yLAKA,uJAKA,kEAGA,qeAUA,wGAWA,kFAGA,uJAIA,iJAKA,0KAQA,sHAIA,kFAGA,wGAGA,4KAIA,oIAIA,sSAMA,8MAKA,wKAIA,kIAQA,uCACE,iDAOF,8BACE,4DAGA,kGAIA,qEAIA,yEAGA","sources":["src/components/date-range-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DateRangePicker field/trigger chrome + range-fill cell styling. The trigger\n mirrors the SDGA Text Input field model (see text-input.css) — no calendar\n icon. The calendar dropdown (popover, toggle, month grid, day cells) is\n shared with DatePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. /\n\n / SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. /\n .ddga-field[data-slot='date-range-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-range-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-range-picker__required {\n color: var(--ddga-error-700);\n }\n\n / ─── Trigger (the SDGA date field, holding two inputs + a separator) ─── /\n\n .ddga-date-range-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-date-range-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-range-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-range-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-range-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── DateInputs + segments + separator ─── /\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n [dir='rtl'] .ddga-date-range-picker__input {\n direction: rtl;\n }\n\n .ddga-date-range-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-range-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-range-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-gray-500);\n }\n\n / ─── Open surface (iconless): fills trailing space; click opens the calendar ─── /\n\n .ddga-date-range-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open {\n cursor: not-allowed;\n }\n\n / ─── Hover / Focus / Pressed (SDGA field state model) ─── /\n\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed])::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-range-picker-trigger--pressed::after {\n content: '';\n position: absolute;\n inset-inline: 25%;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Error / Read-only / Disabled ─── /\n\n .ddga-date-range-picker-trigger--error,\n .ddga-date-range-picker-trigger--error[data-hovered],\n .ddga-date-range-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n .ddga-date-range-picker-trigger[data-readonly],\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled])\n .ddga-date-range-picker__required {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n / ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── /\n\n / react-aria emits data-selected on EVERY in-range cell, plus\n data-selection-start / data-selection-end on the two endpoints. SDGA range =\n a continuous SA-100 band on the td (spans the full column), pill-rounded at\n the endpoints, with the SA-600 endpoint circles painted on top by the base\n .ddga-calendar__cell[data-selected] rule. /\n .ddga-calendar--range td:has([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-full);\n border-end-start-radius: var(--ddga-radius-full);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-full);\n border-end-end-radius: var(--ddga-radius-full);\n }\n / In-between days: let the td band show through; keep text legible. /\n .ddga-calendar--range\n .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n\n / ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── /\n\n [data-theme='dark'] .ddga-date-range-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-focus-within]::after,\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n [data-theme='dark'] .ddga-date-range-picker-trigger--pressed::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-disabled]\n .ddga-date-range-picker__segment {\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-date-range-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n / color bands disappear in forced-colors — restore a visible range. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: Highlight;\n }\n .ddga-calendar--range .ddga-calendar__cell[data-selected] {\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAQE,uEAIA,+NASA,8DAMA,qYAkBA,uFAIA,yFAKA,wGAIA,wGAOA,oJAQA,uDAIA,4NASA,8EAGA,qIAIA,gGAIA,oHAKA,2GAQA,6JAUA,gGAMA,kHAGA,oFAIA,0OAYA,iGAGA,uKAIA,kKAOA,yLAKA,uJAKA,kEAGA,qeAUA,wGAWA,kFAGA,uJAIA,iJAKA,0KAQA,sHAIA,kFAGA,wGAGA,4KAIA,oIAIA,kGAGA,8MAKA,wKAIA,kIAQA,uCACE,uFAQF,8BACE,4DAGA,kGAIA,qEAIA,yEAGA","sources":["src/components/date-range-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DateRangePicker field/trigger chrome + range-fill cell styling. The trigger\n mirrors the SDGA Text Input field model (see text-input.css) — no calendar\n icon. The calendar dropdown (popover, toggle, month grid, day cells) is\n shared with DatePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. /\n\n / SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. /\n .ddga-field[data-slot='date-range-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-range-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-range-picker__required {\n color: var(--ddga-error-700);\n }\n\n / ─── Trigger (the SDGA date field, holding two inputs + a separator) ─── /\n\n .ddga-date-range-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-date-range-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-range-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-range-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-range-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── DateInputs + segments + separator ─── /\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n [dir='rtl'] .ddga-date-range-picker__input {\n direction: rtl;\n }\n\n .ddga-date-range-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-range-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-range-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-gray-500);\n }\n\n / ─── Open surface (iconless): fills trailing space; click opens the calendar ─── /\n\n .ddga-date-range-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open {\n cursor: not-allowed;\n }\n\n / ─── Hover / Focus / Pressed (SDGA field state model) ─── /\n\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n / Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. /\n .ddga-date-range-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n .ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-range-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n / ─── Error / Read-only / Disabled ─── /\n\n .ddga-date-range-picker-trigger--error,\n .ddga-date-range-picker-trigger--error[data-hovered],\n .ddga-date-range-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n .ddga-date-range-picker-trigger[data-readonly],\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled])\n .ddga-date-range-picker__required {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n / ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── /\n\n / react-aria emits data-selected on EVERY in-range cell, plus\n data-selection-start / data-selection-end on the two endpoints. SDGA range =\n a continuous SA-100 band on the td (spans the full column), pill-rounded at\n the endpoints, with the SA-600 endpoint circles painted on top by the base\n .ddga-calendar__cell[data-selected] rule. /\n .ddga-calendar--range td:has([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-full);\n border-end-start-radius: var(--ddga-radius-full);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-full);\n border-end-end-radius: var(--ddga-radius-full);\n }\n / In-between days: let the td band show through; keep text legible. /\n .ddga-calendar--range\n .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n\n / ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── /\n\n [data-theme='dark'] .ddga-date-range-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-disabled]\n .ddga-date-range-picker__segment {\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger,\n .ddga-date-range-picker-trigger::after {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-date-range-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n / color bands disappear in forced-colors — restore a visible range. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: Highlight;\n }\n .ddga-calendar--range .ddga-calendar__cell[data-selected] {\n color: HighlightText;\n }\n }\n}\n"],"names":[]}

package/dist/components/dropdown.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-dropdown__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-text-primary);margin-block-end:var(--ddga-space-2);display:inline-flex}.ddga-dropdown__required{color:var(--ddga-error-700)}.ddga-dropdown-trigger{align-items:center;gap:var(--ddga-space-1);inline-size:100%;padding-inline:var(--ddga-space-4);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-dropdown-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-dropdown-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-dropdown-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-dropdown-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-dropdown__value{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown__placeholder{color:var(--ddga-gray-500)}.ddga-dropdown__icon{block-size:20px;inline-size:20px;color:var(--ddga-text-primary);flex-shrink:0}.ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled){border-color:var(--ddga-gray-700)}.ddga-dropdown-trigger:focus-visible{box-shadow:var(--ddga-shadow-md);outline:none}.ddga-dropdown-trigger--default:focus-visible{border-color:var(--ddga-gray-400)}.ddga-dropdown-trigger:focus-visible:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-dropdown-trigger:active:not(:disabled){background-color:var(--ddga-gray-100)}.ddga-dropdown-trigger:active:not(:disabled):after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-dropdown-trigger--error,.ddga-dropdown-trigger--error:hover:not(:focus-visible),.ddga-dropdown-trigger--error:focus-visible{border-color:var(--ddga-error-700)}.ddga-dropdown-trigger[aria-readonly=true]{border-color:var(--ddga-gray-300);cursor:default;background-color:#0000}.ddga-dropdown-trigger:disabled{border-color:var(--ddga-gray-300);cursor:not-allowed;color:var(--ddga-gray-400);background-color:#0000}.ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,.ddga-dropdown-trigger:disabled .ddga-dropdown__icon,:is(.ddga-field[data-slot=dropdown-field]:has(.ddga-dropdown-trigger:disabled) .ddga-dropdown__label,.ddga-field[data-slot=dropdown-field]:has(.ddga-dropdown-trigger:disabled) .ddga-dropdown__required){color:var(--ddga-gray-400)}.ddga-dropdown-content{background-color:var(--ddga-color-background);color:var(--ddga-text-primary);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-2xl);z-index:50;min-inline-size:200px;overflow:hidden}.ddga-dropdown-content[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-dropdown-in}.ddga-dropdown-content[data-state=closed]{animation:80ms ease-in ddga-dropdown-out}@keyframes ddga-dropdown-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-dropdown-out{0%{opacity:1}to{opacity:0}}.ddga-dropdown-command{flex-direction:column;max-block-size:min(340px,60vh);display:flex}.ddga-dropdown-input{inline-size:100%;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border:0;border-block-end:1px solid var(--ddga-color-input);color:inherit;font:inherit;background-color:#0000;outline:none}.ddga-dropdown-input::placeholder{color:var(--ddga-gray-500)}.ddga-dropdown-input--hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-dropdown-list{min-block-size:0;padding:var(--ddga-space-1);flex:auto;overflow-y:auto}.ddga-dropdown-empty{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-dropdown-item{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;line-height:1.4286;display:flex}.ddga-dropdown-item[data-selected=true]{background-color:var(--ddga-gray-100)}.ddga-dropdown-item:active{background-color:var(--ddga-gray-200)}.ddga-dropdown-item[data-disabled=true]{color:var(--ddga-gray-400);pointer-events:none}.ddga-dropdown-item__label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown-item__check{block-size:20px;inline-size:20px;color:var(--ddga-text-primary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-dropdown-item__check>svg{block-size:100%;inline-size:100%}.ddga-dropdown-item__checkbox{border:1px solid var(--ddga-gray-500);border-radius:var(--ddga-radius-xs);color:#fff;flex-shrink:0;justify-content:center;align-items:center;block-size:16px;inline-size:16px;display:inline-flex}.ddga-dropdown-item__checkbox[data-checked]{background-color:var(--ddga-gray-950);border-color:var(--ddga-gray-950)}.ddga-dropdown-item__checkbox>svg{block-size:12px;inline-size:12px}.ddga-dropdown-group [cmdk-group-heading]{padding-block-start:var(--ddga-space-2);padding-block-end:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-gray-700)}.ddga-dropdown-separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-input)}[data-theme=dark] .ddga-dropdown-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-dropdown__placeholder,[data-theme=dark] .ddga-dropdown-input::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-dropdown-trigger--filled-lighter,[data-theme=dark] .ddga-dropdown-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-dropdown-trigger:focus-visible:after,[data-theme=dark] .ddga-dropdown-trigger:active:not(:disabled):after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-dropdown-trigger:active:not(:disabled){background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-trigger[aria-readonly=true],[data-theme=dark] .ddga-dropdown-trigger:disabled{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-dropdown-item[data-selected=true]{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-item:active{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-dropdown-item__checkbox[data-checked]{background-color:var(--ddga-text-primary);border-color:var(--ddga-text-primary);color:var(--ddga-color-background)}[data-theme=dark] .ddga-dropdown-group [cmdk-group-heading]{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-dropdown-content[data-state=open],.ddga-dropdown-content[data-state=closed]{animation:none}}@media (forced-colors:active){.ddga-dropdown-trigger,.ddga-dropdown-content{border:1px solid canvastext}.ddga-dropdown-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-dropdown-item[data-selected=true]{color:highlighttext;background-color:highlight}.ddga-dropdown-item__checkbox[data-checked]{background-color:highlight}}}
+@layer ddga-components{.ddga-dropdown__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-text-primary);margin-block-end:var(--ddga-space-2);display:inline-flex}.ddga-dropdown__required{color:var(--ddga-error-700)}.ddga-dropdown-trigger{align-items:center;gap:var(--ddga-space-1);inline-size:100%;padding-inline:var(--ddga-space-4);border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);text-align:start;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-dropdown-trigger--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-dropdown-trigger--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-dropdown-trigger--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-dropdown-trigger--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-dropdown__value{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown__placeholder{color:var(--ddga-gray-500)}.ddga-dropdown__icon{block-size:20px;inline-size:20px;color:var(--ddga-text-primary);flex-shrink:0}.ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled){border-color:var(--ddga-gray-700)}.ddga-dropdown-trigger:focus-visible{box-shadow:var(--ddga-shadow-md);outline:none}.ddga-dropdown-trigger--default:focus-visible{border-color:var(--ddga-gray-400)}.ddga-dropdown-trigger:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-dropdown-trigger:focus-visible:after{transform:scaleX(1)}.ddga-dropdown-trigger:active:not(:disabled){background-color:var(--ddga-gray-100)}.ddga-dropdown-trigger:active:not(:disabled):after{transform:scaleX(.5)}.ddga-dropdown-trigger--error,.ddga-dropdown-trigger--error:hover:not(:focus-visible),.ddga-dropdown-trigger--error:focus-visible{border-color:var(--ddga-error-700)}.ddga-dropdown-trigger[aria-readonly=true]{border-color:var(--ddga-gray-300);cursor:default;background-color:#0000}.ddga-dropdown-trigger:disabled{border-color:var(--ddga-gray-300);cursor:not-allowed;color:var(--ddga-gray-400);background-color:#0000}.ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,.ddga-dropdown-trigger:disabled .ddga-dropdown__icon,:is(.ddga-field[data-slot=dropdown-field]:has(.ddga-dropdown-trigger:disabled) .ddga-dropdown__label,.ddga-field[data-slot=dropdown-field]:has(.ddga-dropdown-trigger:disabled) .ddga-dropdown__required){color:var(--ddga-gray-400)}.ddga-dropdown-content{background-color:var(--ddga-color-background);color:var(--ddga-text-primary);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-2xl);z-index:50;min-inline-size:200px;overflow:hidden}.ddga-dropdown-content[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-dropdown-in}.ddga-dropdown-content[data-state=closed]{animation:80ms ease-in ddga-dropdown-out}@keyframes ddga-dropdown-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-dropdown-out{0%{opacity:1}to{opacity:0}}.ddga-dropdown-command{flex-direction:column;max-block-size:min(340px,60vh);display:flex}.ddga-dropdown-input{inline-size:100%;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border:0;border-block-end:1px solid var(--ddga-color-input);color:inherit;font:inherit;background-color:#0000;outline:none}.ddga-dropdown-input::placeholder{color:var(--ddga-gray-500)}.ddga-dropdown-input--hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-dropdown-list{min-block-size:0;padding:var(--ddga-space-1);flex:auto;overflow-y:auto}.ddga-dropdown-empty{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-dropdown-item{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;line-height:1.4286;display:flex}.ddga-dropdown-item[data-selected=true]{background-color:var(--ddga-gray-100)}.ddga-dropdown-item:active{background-color:var(--ddga-gray-200)}.ddga-dropdown-item[data-disabled=true]{color:var(--ddga-gray-400);pointer-events:none}.ddga-dropdown-item__label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown-item__check{block-size:20px;inline-size:20px;color:var(--ddga-text-primary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-dropdown-item__check>svg{block-size:100%;inline-size:100%}.ddga-dropdown-item__checkbox{border:1px solid var(--ddga-gray-500);border-radius:var(--ddga-radius-xs);color:#fff;flex-shrink:0;justify-content:center;align-items:center;block-size:16px;inline-size:16px;display:inline-flex}.ddga-dropdown-item__checkbox[data-checked]{background-color:var(--ddga-gray-950);border-color:var(--ddga-gray-950)}.ddga-dropdown-item__checkbox>svg{block-size:12px;inline-size:12px}.ddga-dropdown-group [cmdk-group-heading]{padding-block-start:var(--ddga-space-2);padding-block-end:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-gray-700)}.ddga-dropdown-separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-input)}[data-theme=dark] .ddga-dropdown-trigger{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-dropdown__placeholder,[data-theme=dark] .ddga-dropdown-input::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-dropdown-trigger--filled-lighter,[data-theme=dark] .ddga-dropdown-trigger--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-dropdown-trigger:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-dropdown-trigger:active:not(:disabled){background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-trigger[aria-readonly=true],[data-theme=dark] .ddga-dropdown-trigger:disabled{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-dropdown-item[data-selected=true]{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-dropdown-item:active{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-dropdown-item__checkbox[data-checked]{background-color:var(--ddga-text-primary);border-color:var(--ddga-text-primary);color:var(--ddga-color-background)}[data-theme=dark] .ddga-dropdown-group [cmdk-group-heading]{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-dropdown-trigger:after{transition:none}.ddga-dropdown-content[data-state=open],.ddga-dropdown-content[data-state=closed]{animation:none}}@media (forced-colors:active){.ddga-dropdown-trigger,.ddga-dropdown-content{border:1px solid canvastext}.ddga-dropdown-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-dropdown-item[data-selected=true]{color:highlighttext;background-color:highlight}.ddga-dropdown-item__checkbox[data-checked]{background-color:highlight}}}
 /*# sourceMappingURL=dropdown.css.map */

package/dist/components/dropdown.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAGE,wOASA,qDAOA,+ZAoBA,8EAIA,gFAKA,+FAIA,+FAKA,4GAOA,uDAKA,mGAQA,2GAKA,mFAIA,gFAGA,wJAUA,mFAGA,kKAUA,qKAOA,mHAOA,uIAMA,sVAaA,oQAUA,iGAGA,mFAGA,4HAUA,wDASA,yFAMA,sOAWA,6DAIA,sKAYA,2FAMA,+KAUA,+UAeA,8EAGA,iEAGA,uFAKA,iHASA,uKASA,gEAMA,gOAWA,oHAIA,mEAOA,sQAQA,+JAWA,6GAIA,qIAIA,0JAIA,6HAGA,4KAIA,wGAGA,qJAIA,mGAGA,uFAGA,iLAKA,6FAMA,uCACE,kGAKF,8BACE,0EAIA,oFAIA,uFAIA","sources":["src/components/dropdown.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-dropdown__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-primary);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-dropdown__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the field; SDGA Dropdown Input = the Text Input field + a\n trailing chevron). Sizes md 32 / lg 40, fill styles, gray-400 border. ─── /\n\n .ddga-dropdown-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-dropdown-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-dropdown-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-dropdown-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-dropdown__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .ddga-dropdown__placeholder {\n color: var(--ddga-gray-500);\n }\n\n / SDGA chevron = arrow-down-01, ink #161616, 20px. /\n .ddga-dropdown__icon {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n\n / Hover (outlined only): border → gray-700. /\n .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-700);\n }\n\n / Focus: shadow-md + full-width 2px dark underline, NO ring. /\n .ddga-dropdown-trigger:focus-visible {\n outline: none;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-dropdown-trigger--default:focus-visible {\n border-color: var(--ddga-gray-400);\n }\n .ddga-dropdown-trigger:focus-visible::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / Pressed: gray-100 fill + short centered underline. /\n .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-trigger:active:not(:disabled)::after {\n content: '';\n position: absolute;\n inset-inline: 25%;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / Error: error-700 border. /\n .ddga-dropdown-trigger--error,\n .ddga-dropdown-trigger--error:hover:not(:focus-visible),\n .ddga-dropdown-trigger--error:focus-visible {\n border-color: var(--ddga-error-700);\n }\n\n / Read-only: gray-300 border, transparent fill. /\n .ddga-dropdown-trigger[aria-readonly='true'] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: default;\n }\n\n / Disabled: gray-300 border, transparent, gray-400 text — no opacity. /\n .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n color: var(--ddga-gray-400);\n }\n .ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,\n .ddga-dropdown-trigger:disabled .ddga-dropdown__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__label,\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Panel ─── /\n\n .ddga-dropdown-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl); / matches measured SDGA Menu panel /\n overflow: hidden;\n z-index: 50;\n min-inline-size: 200px;\n }\n .ddga-dropdown-content[data-state='open'] {\n animation: ddga-dropdown-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-content[data-state='closed'] {\n animation: ddga-dropdown-out 80ms ease-in;\n }\n @keyframes ddga-dropdown-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-dropdown-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n .ddga-dropdown-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-dropdown-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-input);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-dropdown-input::placeholder {\n color: var(--ddga-gray-500);\n }\n / Non-searchable mode keeps a focusable input (cmdk keyboard) but hides it. /\n .ddga-dropdown-input--hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .ddga-dropdown-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n .ddga-dropdown-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n / ─── List item (SDGA Dropdown List Item: p-8, gap-8, Text sm 14/20 #161616) ─── /\n\n .ddga-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n / cmdk highlight (hover + keyboard) → SDGA Hovered gray-100. /\n .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-item[data-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n .ddga-dropdown-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Single-select: trailing tick-02 check (20px ink) when chosen. /\n .ddga-dropdown-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n .ddga-dropdown-item__check > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n / Multi-select: leading 16px checkbox (gray-500 outline → gray-950 fill). /\n .ddga-dropdown-item__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n color: #ffffff;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-dropdown-item__checkbox > svg {\n inline-size: 12px;\n block-size: 12px;\n }\n\n / ─── Group label (SDGA: Text sm Semibold, gray-700) + Separator ─── /\n\n .ddga-dropdown-group [cmdk-group-heading] {\n padding-block-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-700);\n }\n .ddga-dropdown-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) -1);\n background-color: var(--ddga-color-input);\n }\n\n /* ─── Dark mode ─── /\n / SDGA light values are fixed ramp steps; remap to flipping tokens so the\n field + panel stay readable. text-primary/foreground already flip. /\n\n [data-theme='dark'] .ddga-dropdown-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown__placeholder,\n [data-theme='dark'] .ddga-dropdown-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--filled-lighter,\n [data-theme='dark'] .ddga-dropdown-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-dropdown-trigger:focus-visible::after,\n [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled)::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger[aria-readonly='true'],\n [data-theme='dark'] .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-text-primary);\n border-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n }\n [data-theme='dark'] .ddga-dropdown-group [cmdk-group-heading] {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-content[data-state='open'],\n .ddga-dropdown-content[data-state='closed'] {\n animation: none;\n }\n }\n @media (forced-colors: active) {\n .ddga-dropdown-trigger,\n .ddga-dropdown-content {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-dropdown-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: Highlight;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAGE,wOASA,qDAOA,+ZAoBA,8EAIA,gFAKA,+FAIA,+FAKA,4GAOA,uDAKA,mGAQA,2GAKA,mFAIA,gFAIA,iOAYA,+DAKA,mFAGA,wEAKA,qKAOA,mHAOA,uIAMA,sVAaA,oQAUA,iGAGA,mFAGA,4HAUA,wDASA,yFAMA,sOAWA,6DAIA,sKAYA,2FAMA,+KAUA,+UAeA,8EAGA,iEAGA,uFAKA,iHASA,uKASA,gEAMA,gOAWA,oHAIA,mEAOA,sQAQA,+JAWA,6GAIA,qIAIA,0JAIA,6HAGA,yFAGA,wGAGA,qJAIA,mGAGA,uFAGA,iLAKA,6FAMA,uCACE,6CAGA,kGAKF,8BACE,0EAIA,oFAIA,uFAIA","sources":["src/components/dropdown.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-dropdown__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-primary);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-dropdown__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the field; SDGA Dropdown Input = the Text Input field + a\n trailing chevron). Sizes md 32 / lg 40, fill styles, gray-400 border. ─── /\n\n .ddga-dropdown-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-dropdown-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-dropdown-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-dropdown-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-dropdown__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .ddga-dropdown__placeholder {\n color: var(--ddga-gray-500);\n }\n\n / SDGA chevron = arrow-down-01, ink #161616, 20px. /\n .ddga-dropdown__icon {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n\n / Hover (outlined only): border → gray-700. /\n .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-700);\n }\n\n / Focus: shadow-md + full-width 2px dark underline, NO ring. /\n .ddga-dropdown-trigger:focus-visible {\n outline: none;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-dropdown-trigger--default:focus-visible {\n border-color: var(--ddga-gray-400);\n }\n / Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. /\n .ddga-dropdown-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n .ddga-dropdown-trigger:focus-visible::after {\n transform: scaleX(1);\n }\n\n / Pressed: gray-100 fill + short centered underline. /\n .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-trigger:active:not(:disabled)::after {\n transform: scaleX(0.5);\n }\n\n / Error: error-700 border. /\n .ddga-dropdown-trigger--error,\n .ddga-dropdown-trigger--error:hover:not(:focus-visible),\n .ddga-dropdown-trigger--error:focus-visible {\n border-color: var(--ddga-error-700);\n }\n\n / Read-only: gray-300 border, transparent fill. /\n .ddga-dropdown-trigger[aria-readonly='true'] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: default;\n }\n\n / Disabled: gray-300 border, transparent, gray-400 text — no opacity. /\n .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n color: var(--ddga-gray-400);\n }\n .ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,\n .ddga-dropdown-trigger:disabled .ddga-dropdown__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__label,\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Panel ─── /\n\n .ddga-dropdown-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl); / matches measured SDGA Menu panel /\n overflow: hidden;\n z-index: 50;\n min-inline-size: 200px;\n }\n .ddga-dropdown-content[data-state='open'] {\n animation: ddga-dropdown-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-content[data-state='closed'] {\n animation: ddga-dropdown-out 80ms ease-in;\n }\n @keyframes ddga-dropdown-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-dropdown-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n .ddga-dropdown-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-dropdown-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-input);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-dropdown-input::placeholder {\n color: var(--ddga-gray-500);\n }\n / Non-searchable mode keeps a focusable input (cmdk keyboard) but hides it. /\n .ddga-dropdown-input--hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .ddga-dropdown-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n .ddga-dropdown-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n / ─── List item (SDGA Dropdown List Item: p-8, gap-8, Text sm 14/20 #161616) ─── /\n\n .ddga-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n / cmdk highlight (hover + keyboard) → SDGA Hovered gray-100. /\n .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-item[data-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n .ddga-dropdown-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Single-select: trailing tick-02 check (20px ink) when chosen. /\n .ddga-dropdown-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n .ddga-dropdown-item__check > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n / Multi-select: leading 16px checkbox (gray-500 outline → gray-950 fill). /\n .ddga-dropdown-item__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n color: #ffffff;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-dropdown-item__checkbox > svg {\n inline-size: 12px;\n block-size: 12px;\n }\n\n / ─── Group label (SDGA: Text sm Semibold, gray-700) + Separator ─── /\n\n .ddga-dropdown-group [cmdk-group-heading] {\n padding-block-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-700);\n }\n .ddga-dropdown-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) -1);\n background-color: var(--ddga-color-input);\n }\n\n /* ─── Dark mode ─── /\n / SDGA light values are fixed ramp steps; remap to flipping tokens so the\n field + panel stay readable. text-primary/foreground already flip. /\n\n [data-theme='dark'] .ddga-dropdown-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown__placeholder,\n [data-theme='dark'] .ddga-dropdown-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--filled-lighter,\n [data-theme='dark'] .ddga-dropdown-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-dropdown-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger[aria-readonly='true'],\n [data-theme='dark'] .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-text-primary);\n border-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n }\n [data-theme='dark'] .ddga-dropdown-group [cmdk-group-heading] {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-trigger::after {\n transition: none;\n }\n .ddga-dropdown-content[data-state='open'],\n .ddga-dropdown-content[data-state='closed'] {\n animation: none;\n }\n }\n @media (forced-colors: active) {\n .ddga-dropdown-trigger,\n .ddga-dropdown-content {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-dropdown-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: Highlight;\n }\n }\n}\n"],"names":[]}

package/dist/components/number-input.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-field[data-slot=number-input-field]{gap:var(--ddga-space-2)}.ddga-number-input__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-number-input__required{color:var(--ddga-error-700)}.ddga-number-input{border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-gray-700);align-items:stretch;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-number-input--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-number-input--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-number-input--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-number-input--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-number-input__field{block-size:100%;min-inline-size:0;padding-inline:var(--ddga-space-2);color:inherit;font:inherit;text-align:start;caret-color:var(--ddga-gray-950);direction:ltr;unicode-bidi:plaintext;background:0 0;border:0;outline:none;flex:auto;padding-block:0}.ddga-number-input__field::placeholder{color:var(--ddga-gray-500)}.ddga-number-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__step{padding-inline:var(--ddga-space-4);background-color:var(--ddga-gray-100);color:var(--ddga-text-primary);cursor:pointer;border:0;flex:none;justify-content:center;align-self:stretch;align-items:center;padding-block:0;transition:background-color .15s;display:inline-flex}.ddga-number-input--md .ddga-number-input__step{padding-inline:var(--ddga-space-3)}.ddga-number-input__step svg{block-size:24px;inline-size:24px}.ddga-number-input--md .ddga-number-input__step svg{block-size:20px;inline-size:20px}.ddga-number-input__step--increment{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-number-input__step--decrement{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-gray-200)}.ddga-number-input__step:active:not(:disabled){background-color:var(--ddga-gray-300)}.ddga-number-input__step:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-number-input__step:disabled{background-color:var(--ddga-gray-200);color:var(--ddga-gray-400);cursor:not-allowed}.ddga-number-input--steppers-subtle .ddga-number-input__step{background-color:#0000}.ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-gray-100)}.ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled){background-color:var(--ddga-gray-200)}.ddga-number-input--steppers-subtle .ddga-number-input__step:disabled{background-color:#0000}.ddga-number-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-number-input:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-number-input--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-number-input:focus-within:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}:is(.ddga-number-input:has(.ddga-number-input__field:active):not(:has(.ddga-number-input__field:disabled)),.ddga-number-input--pressed){background-color:var(--ddga-gray-100)}.ddga-number-input--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-number-input:has(.ddga-number-input__field:active):after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-number-input--error,.ddga-number-input--error:hover:not(:focus-within),.ddga-number-input--error:focus-within{border-color:var(--ddga-error-700)}.ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-number-input:has(.ddga-number-input__field:disabled){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field::placeholder{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__label,.ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__required){color:var(--ddga-gray-400)}.ddga-field[data-slot=number-input-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=number-input-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=number-input-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-number-input{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__field{caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-number-input--filled-lighter,[data-theme=dark] .ddga-number-input--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-number-input__step{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-number-input--steppers-subtle .ddga-number-input__step{background-color:#0000}[data-theme=dark] .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-number-input__step:disabled{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-number-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-number-input:focus-within:after,[data-theme=dark] .ddga-number-input--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:active):after{background-color:var(--ddga-text-primary)}:is([data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:active):not(:has(.ddga-number-input__field:disabled)),[data-theme=dark] .ddga-number-input--pressed){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field::placeholder{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__label,[data-theme=dark] .ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=number-input-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-number-input,.ddga-number-input__step{transition:none}}@media (forced-colors:active){.ddga-number-input{border:1px solid canvastext}.ddga-number-input__step{color:buttontext;background-color:buttonface}.ddga-number-input:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-number-input:has(.ddga-number-input__field:disabled){border-color:graytext}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:graytext}}}
+@layer ddga-components{.ddga-field[data-slot=number-input-field]{gap:var(--ddga-space-2)}.ddga-number-input__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-number-input__required{color:var(--ddga-error-700)}.ddga-number-input{border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-gray-700);align-items:stretch;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-number-input--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-number-input--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-number-input--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-number-input--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-number-input__field{block-size:100%;min-inline-size:0;padding-inline:var(--ddga-space-2);color:inherit;font:inherit;text-align:start;caret-color:var(--ddga-gray-950);direction:ltr;unicode-bidi:plaintext;background:0 0;border:0;outline:none;flex:auto;padding-block:0}.ddga-number-input__field::placeholder{color:var(--ddga-gray-500)}.ddga-number-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-number-input__step{padding-inline:var(--ddga-space-4);background-color:var(--ddga-gray-100);color:var(--ddga-text-primary);cursor:pointer;border:0;flex:none;justify-content:center;align-self:stretch;align-items:center;padding-block:0;transition:background-color .15s;display:inline-flex}.ddga-number-input--md .ddga-number-input__step{padding-inline:var(--ddga-space-3)}.ddga-number-input__step svg{block-size:24px;inline-size:24px}.ddga-number-input--md .ddga-number-input__step svg{block-size:20px;inline-size:20px}.ddga-number-input__step--increment{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-number-input__step--decrement{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-gray-200)}.ddga-number-input__step:active:not(:disabled){background-color:var(--ddga-gray-300)}.ddga-number-input__step:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-number-input__step:disabled{background-color:var(--ddga-gray-200);color:var(--ddga-gray-400);cursor:not-allowed}.ddga-number-input--steppers-subtle .ddga-number-input__step{background-color:#0000}.ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-gray-100)}.ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled){background-color:var(--ddga-gray-200)}.ddga-number-input--steppers-subtle .ddga-number-input__step:disabled{background-color:#0000}.ddga-number-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-number-input:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-number-input--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-number-input:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-number-input:focus-within:after{transform:scaleX(1)}:is(.ddga-number-input:has(.ddga-number-input__field:active):not(:has(.ddga-number-input__field:disabled)),.ddga-number-input--pressed){background-color:var(--ddga-gray-100)}.ddga-number-input--pressed:after{transform:scaleX(.5)}.ddga-number-input:has(.ddga-number-input__field:active):after{transform:scaleX(.5)}.ddga-number-input--error,.ddga-number-input--error:hover:not(:focus-within),.ddga-number-input--error:focus-within{border-color:var(--ddga-error-700)}.ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-number-input:has(.ddga-number-input__field:disabled){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field::placeholder{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__label,.ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__required){color:var(--ddga-gray-400)}.ddga-field[data-slot=number-input-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=number-input-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=number-input-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-number-input{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__field{caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-number-input--filled-lighter,[data-theme=dark] .ddga-number-input--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-number-input__step{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-number-input--steppers-subtle .ddga-number-input__step{background-color:#0000}[data-theme=dark] .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-number-input__step:disabled{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-number-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-number-input:after{background-color:var(--ddga-text-primary)}:is([data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:active):not(:has(.ddga-number-input__field:disabled)),[data-theme=dark] .ddga-number-input--pressed){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field::placeholder{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__label,[data-theme=dark] .ddga-field[data-slot=number-input-field]:has(.ddga-number-input__field:disabled) .ddga-number-input__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=number-input-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-number-input,.ddga-number-input:after,.ddga-number-input__step{transition:none}}@media (forced-colors:active){.ddga-number-input{border:1px solid canvastext}.ddga-number-input__step{color:buttontext;background-color:buttonface}.ddga-number-input:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-number-input:has(.ddga-number-input__field:disabled){border-color:graytext}.ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field{color:graytext}}}
 /*# sourceMappingURL=number-input.css.map */

package/dist/components/number-input.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAKE,kEAMA,0NAUA,yDAMA,6SAiBA,0EAIA,4EAOA,2FAIA,2FAOA,gRAkBA,kEAIA,yPAAA,+PAAA,+PAYA,qSAcA,mFAKA,8DAIA,qFAMA,kIAIA,8HAOA,oFAGA,qFAGA,wGAIA,sHAOA,oFAGA,wHAGA,yHAGA,6FAMA,uFAOA,iEAGA,2EAGA,mJAaA,8KAMA,iJAAA,8KAYA,uJAQA,oIAQA,oHAIA,mIAIA,6HAIA,2PAUA,iGAGA,kGAGA,kGASA,yGAIA,iFAGA,4FAGA,kJAIA,mHAIA,0GAGA,sGAGA,6IAKA,oFAGA,yGAGA,sJAAA,2HAKA,qNAOA,qNAIA,uIAAA,oJAQA,oSAQA,0HAMA,uCACE,6DASF,8BACE,+CAGA,sEAIA,+EAIA,iFAGA","sources":["src/components/number-input.css"],"sourcesContent":["@layer ddga-components {\n /* Field wrapper + helper/error line are shared (field.css). The field model\n mirrors TextInput (SDGA \"Number Input\" = the Text input field + flanking ±\n steppers, the SDGA \"Input Prefix-Suffix\" sub-component). /\n\n .ddga-field[data-slot='number-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n / ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-number-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── /\n\n .ddga-number-input {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── /\n\n .ddga-number-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / ─── Fill styles (SDGA Style axis) ─── /\n\n .ddga-number-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-number-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── Field (the actual <input>: transparent, start-aligned, Latin+LTR) ─── /\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding-inline: var(--ddga-space-2);\n padding-block: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n caret-color: var(--ddga-gray-950);\n outline: none;\n / Keep digits Latin + LTR even inside an RTL form (DGA convention). /\n direction: ltr;\n unicode-bidi: plaintext;\n }\n\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-number-input__field:-webkit-autofill,\n .ddga-number-input__field:-webkit-autofill:hover,\n .ddga-number-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-gray-950);\n }\n\n / ─── Stepper buttons (SDGA \"Input Prefix-Suffix\": Solid neutral chip, flush,\n full height; icon #161616; ＋ leads / − trails) ─── /\n\n .ddga-number-input__step {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding-inline: var(--ddga-space-4);\n padding-block: 0;\n border: 0;\n background-color: var(--ddga-gray-100);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-number-input--md .ddga-number-input__step {\n padding-inline: var(--ddga-space-3);\n }\n\n / Icon: Large 24 / Medium 20. /\n .ddga-number-input__step svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-number-input--md .ddga-number-input__step svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n / Hug the field's rounded outer corners (＋ = inline-start, − = inline-end). /\n .ddga-number-input__step--increment {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-number-input__step--decrement {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n / Solid state ramp (SDGA neutral-button: rest gray-100 → hover 200 → pressed\n 300, matching TextInputDropdown; SDGA's flattened hover token is a Figma quirk). /\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-300);\n }\n .ddga-number-input__step:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-number-input__step:disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n / Subtle stepper style (SDGA Style=Subtle: transparent → gray-100 → gray-200). /\n .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:disabled {\n background-color: transparent;\n }\n\n / ─── Hover (SDGA: outlined style darkens its border to gray-700) ─── /\n\n .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n / ─── Focus (SDGA: shadow-md + full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── /\n\n .ddga-number-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-number-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n .ddga-number-input:focus-within::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50% 2px underline).\n Scoped to the field itself so pressing a stepper shows the stepper's\n own pressed state, not the field's. `--pressed` is a static demo hook. /\n\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n .ddga-number-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input:has(.ddga-number-input__field:active)::after,\n .ddga-number-input--pressed::after {\n content: '';\n position: absolute;\n inset-inline: 25%;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Error (SDGA: error-700 border; bg/text unchanged) ─── /\n\n .ddga-number-input--error,\n .ddga-number-input--error:hover:not(:focus-within),\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only (SDGA: gray-300 border, transparent fill) ─── /\n\n .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n / ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── /\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── /\n\n .ddga-field[data-slot='number-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n / ─── Dark mode ─── /\n / SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable. Exact DGA dark\n palette is deferred (matches TextInput). /\n\n [data-theme='dark'] .ddga-number-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-number-input--filled-lighter,\n [data-theme='dark'] .ddga-number-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n [data-theme='dark']\n .ddga-number-input--steppers-subtle\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step:disabled {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-number-input:focus-within::after,\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:active)::after,\n [data-theme='dark'] .ddga-number-input--pressed::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n [data-theme='dark'] .ddga-number-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field,\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-number-input {\n border: 1px solid CanvasText;\n }\n .ddga-number-input__step {\n background-color: ButtonFace;\n color: ButtonText;\n }\n .ddga-number-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAKE,kEAMA,0NAUA,yDAMA,6SAiBA,0EAIA,4EAOA,2FAIA,2FAOA,gRAkBA,kEAIA,yPAAA,+PAAA,+PAYA,qSAcA,mFAKA,8DAIA,qFAMA,kIAIA,8HAOA,oFAGA,qFAGA,wGAIA,sHAOA,oFAGA,wHAGA,yHAGA,6FAMA,uFAOA,iEAGA,2EAIA,6NAYA,0DAQA,8KAMA,uDAAA,oFAOA,uJAQA,oIAQA,oHAIA,mIAIA,6HAIA,2PAUA,iGAGA,kGAGA,kGASA,yGAIA,iFAGA,4FAGA,kJAIA,mHAIA,0GAGA,sGAGA,6IAKA,oFAGA,yGAGA,qFAGA,qNAOA,qNAIA,uIAAA,oJAQA,oSAQA,0HAMA,uCACE,sFAUF,8BACE,+CAGA,sEAIA,+EAIA,iFAGA","sources":["src/components/number-input.css"],"sourcesContent":["@layer ddga-components {\n /* Field wrapper + helper/error line are shared (field.css). The field model\n mirrors TextInput (SDGA \"Number Input\" = the Text input field + flanking ±\n steppers, the SDGA \"Input Prefix-Suffix\" sub-component). /\n\n .ddga-field[data-slot='number-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n / ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-number-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── /\n\n .ddga-number-input {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── /\n\n .ddga-number-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / ─── Fill styles (SDGA Style axis) ─── /\n\n .ddga-number-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-number-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── Field (the actual <input>: transparent, start-aligned, Latin+LTR) ─── /\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding-inline: var(--ddga-space-2);\n padding-block: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n caret-color: var(--ddga-gray-950);\n outline: none;\n / Keep digits Latin + LTR even inside an RTL form (DGA convention). /\n direction: ltr;\n unicode-bidi: plaintext;\n }\n\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-number-input__field:-webkit-autofill,\n .ddga-number-input__field:-webkit-autofill:hover,\n .ddga-number-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-gray-950);\n }\n\n / ─── Stepper buttons (SDGA \"Input Prefix-Suffix\": Solid neutral chip, flush,\n full height; icon #161616; ＋ leads / − trails) ─── /\n\n .ddga-number-input__step {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding-inline: var(--ddga-space-4);\n padding-block: 0;\n border: 0;\n background-color: var(--ddga-gray-100);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-number-input--md .ddga-number-input__step {\n padding-inline: var(--ddga-space-3);\n }\n\n / Icon: Large 24 / Medium 20. /\n .ddga-number-input__step svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-number-input--md .ddga-number-input__step svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n / Hug the field's rounded outer corners (＋ = inline-start, − = inline-end). /\n .ddga-number-input__step--increment {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-number-input__step--decrement {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n / Solid state ramp (SDGA neutral-button: rest gray-100 → hover 200 → pressed\n 300, matching TextInputDropdown; SDGA's flattened hover token is a Figma quirk). /\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-300);\n }\n .ddga-number-input__step:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-number-input__step:disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n / Subtle stepper style (SDGA Style=Subtle: transparent → gray-100 → gray-200). /\n .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:disabled {\n background-color: transparent;\n }\n\n / ─── Hover (SDGA: outlined style darkens its border to gray-700) ─── /\n\n .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n / ─── Focus (SDGA: shadow-md + full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── /\n\n .ddga-number-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-number-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n / Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. /\n .ddga-number-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n .ddga-number-input:focus-within::after {\n transform: scaleX(1);\n }\n\n / ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50% 2px underline).\n Scoped to the field itself so pressing a stepper shows the stepper's\n own pressed state, not the field's. `--pressed` is a static demo hook. /\n\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n .ddga-number-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input:has(.ddga-number-input__field:active)::after,\n .ddga-number-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n / ─── Error (SDGA: error-700 border; bg/text unchanged) ─── /\n\n .ddga-number-input--error,\n .ddga-number-input--error:hover:not(:focus-within),\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only (SDGA: gray-300 border, transparent fill) ─── /\n\n .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n / ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── /\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-gray-400);\n }\n\n / ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── /\n\n .ddga-field[data-slot='number-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n / ─── Dark mode ─── /\n / SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable. Exact DGA dark\n palette is deferred (matches TextInput). /\n\n [data-theme='dark'] .ddga-number-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-number-input--filled-lighter,\n [data-theme='dark'] .ddga-number-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n [data-theme='dark']\n .ddga-number-input--steppers-subtle\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step:disabled {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-number-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n [data-theme='dark'] .ddga-number-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field,\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input::after,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-number-input {\n border: 1px solid CanvasText;\n }\n .ddga-number-input__step {\n background-color: ButtonFace;\n color: ButtonText;\n }\n .ddga-number-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}

package/dist/components/text-input.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-field[data-slot=text-input-field]{gap:var(--ddga-space-2)}.ddga-text-input__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-text-input__required{color:var(--ddga-error-700)}.ddga-text-input{align-items:center;gap:var(--ddga-space-2);inline-size:100%;border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);padding-inline-start:var(--ddga-space-2);padding-inline-end:var(--ddga-space-4);transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-text-input--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-text-input--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-text-input--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-text-input--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-text-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-text-input__field::placeholder{color:var(--ddga-gray-500)}.ddga-text-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__adornment{max-block-size:100%;color:var(--ddga-gray-500);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-text-input__adornment svg{flex-shrink:0;align-self:center}.ddga-text-input:has(.ddga-text-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-text-input:has(.ddga-text-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-text-input__affix{padding-inline:var(--ddga-space-4);background-color:var(--ddga-gray-100);color:var(--ddga-gray-500);white-space:nowrap;align-self:stretch;align-items:center;display:inline-flex}.ddga-text-input--md .ddga-text-input__affix{padding-inline:var(--ddga-space-3)}.ddga-text-input__affix--subtle{background-color:#0000;padding-inline:0}.ddga-text-input__adornment--start:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--end:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--start .ddga-text-input__affix{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-text-input__adornment--end .ddga-text-input__affix{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix){padding-inline-start:0}.ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix){padding-inline-end:0}.ddga-text-input__dropdown{gap:var(--ddga-space-1);color:var(--ddga-text-primary);font:inherit;cursor:pointer;border:0;padding-block:0;transition:background-color .15s}.ddga-text-input__dropdown--subtle{background-color:#0000}.ddga-text-input__dropdown-icon{flex-shrink:0;block-size:24px;inline-size:24px;display:inline-flex}.ddga-text-input__dropdown-icon>svg{block-size:100%;inline-size:100%}.ddga-text-input__dropdown-chevron{flex-shrink:0;block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-icon{block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-chevron{block-size:16px;inline-size:16px}.ddga-text-input__dropdown:hover{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown:active{background-color:var(--ddga-gray-300)}.ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-gray-100)}.ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown--selected,.ddga-text-input__dropdown--selected:hover,.ddga-text-input__dropdown--selected:active{background-color:var(--ddga-gray-700);color:#fff}.ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-text-input:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-text-input--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-text-input:focus-within:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-text-input--pressed{background-color:var(--ddga-gray-100)}.ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-text-input:active:after,.ddga-text-input--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-text-input--error,.ddga-text-input--error:hover:not(:focus-within),.ddga-text-input--error:focus-within{border-color:var(--ddga-error-700)}.ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix{background-color:var(--ddga-gray-200)}.ddga-field[data-slot=text-input-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=text-input-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-text-input{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field{caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__affix{background-color:var(--ddga-color-muted);color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__dropdown{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__dropdown--subtle{background-color:#0000}[data-theme=dark] .ddga-text-input__dropdown:hover{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input__dropdown:active,[data-theme=dark] .ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--selected,[data-theme=dark] .ddga-text-input__dropdown--selected:hover{background-color:var(--ddga-gray-700);color:#fff}[data-theme=dark] .ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--filled-lighter,[data-theme=dark] .ddga-text-input--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-text-input:focus-within:after,[data-theme=dark] .ddga-text-input:active:after,[data-theme=dark] .ddga-text-input--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,[data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-text-input{transition:none}}@media (forced-colors:active){.ddga-text-input{border:1px solid canvastext}.ddga-text-input:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:graytext}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:graytext}}}
+@layer ddga-components{.ddga-field[data-slot=text-input-field]{gap:var(--ddga-space-2)}.ddga-text-input__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-text-input__required{color:var(--ddga-error-700)}.ddga-text-input{align-items:center;gap:var(--ddga-space-2);inline-size:100%;border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);padding-inline-start:var(--ddga-space-2);padding-inline-end:var(--ddga-space-4);transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-text-input--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-text-input--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-text-input--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-text-input--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-text-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-text-input__field::placeholder{color:var(--ddga-gray-500)}.ddga-text-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__adornment{max-block-size:100%;color:var(--ddga-gray-500);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-text-input__adornment svg{flex-shrink:0;align-self:center}.ddga-text-input:has(.ddga-text-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-text-input:has(.ddga-text-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-text-input__affix{padding-inline:var(--ddga-space-4);background-color:var(--ddga-gray-100);color:var(--ddga-gray-500);white-space:nowrap;align-self:stretch;align-items:center;display:inline-flex}.ddga-text-input--md .ddga-text-input__affix{padding-inline:var(--ddga-space-3)}.ddga-text-input__affix--subtle{background-color:#0000;padding-inline:0}.ddga-text-input__adornment--start:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--end:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--start .ddga-text-input__affix{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-text-input__adornment--end .ddga-text-input__affix{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix){padding-inline-start:0}.ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix){padding-inline-end:0}.ddga-text-input__dropdown{gap:var(--ddga-space-1);color:var(--ddga-text-primary);font:inherit;cursor:pointer;border:0;padding-block:0;transition:background-color .15s}.ddga-text-input__dropdown--subtle{background-color:#0000}.ddga-text-input__dropdown-icon{flex-shrink:0;block-size:24px;inline-size:24px;display:inline-flex}.ddga-text-input__dropdown-icon>svg{block-size:100%;inline-size:100%}.ddga-text-input__dropdown-chevron{flex-shrink:0;block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-icon{block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-chevron{block-size:16px;inline-size:16px}.ddga-text-input__dropdown:hover{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown:active{background-color:var(--ddga-gray-300)}.ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-gray-100)}.ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown--selected,.ddga-text-input__dropdown--selected:hover,.ddga-text-input__dropdown--selected:active{background-color:var(--ddga-gray-700);color:#fff}.ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-text-input:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-text-input:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-text-input--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-text-input:focus-within:after{transform:scaleX(1)}.ddga-text-input--pressed{background-color:var(--ddga-gray-100)}.ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-text-input:active:after,.ddga-text-input--pressed:after{transform:scaleX(.5)}.ddga-text-input--error,.ddga-text-input--error:hover:not(:focus-within),.ddga-text-input--error:focus-within{border-color:var(--ddga-error-700)}.ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix{background-color:var(--ddga-gray-200)}.ddga-field[data-slot=text-input-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=text-input-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-text-input{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field{caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__affix{background-color:var(--ddga-color-muted);color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__dropdown{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__dropdown--subtle{background-color:#0000}[data-theme=dark] .ddga-text-input__dropdown:hover{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input__dropdown:active,[data-theme=dark] .ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--selected,[data-theme=dark] .ddga-text-input__dropdown--selected:hover{background-color:var(--ddga-gray-700);color:#fff}[data-theme=dark] .ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--filled-lighter,[data-theme=dark] .ddga-text-input--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-text-input:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,[data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-text-input,.ddga-text-input:after{transition:none}}@media (forced-colors:active){.ddga-text-input{border:1px solid canvastext}.ddga-text-input:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:graytext}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:graytext}}}
 /*# sourceMappingURL=text-input.css.map */

package/dist/components/text-input.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBACE,gEAMA,wNAUA,uDAMA,kZAoBA,wEAIA,0EAOA,yFAIA,yFAOA,+KAaA,gEAOA,uPAAA,6PAAA,6PAWA,kJAWA,gEAMA,kGAGA,8FAMA,yMASA,gFAGA,wEAKA,mFAGA,iFAGA,yJAIA,mJAIA,wGAGA,oGAQA,wKASA,0DAGA,mGAMA,qEAIA,kFAKA,sFAIA,yFAKA,uEAGA,wEAGA,+EAGA,gFAIA,6KAQA,0GAQA,qFAOA,+DAGA,yEAGA,iJAcA,gEAAA,0GAIA,6KAYA,iJAQA,gIAQA,mIAKA,6HAIA,uHAAA,8GAIA,+OAOA,qHAOA,+FAGA,gGAGA,gGASA,uGAIA,+EAGA,0FAGA,8EAGA,mHAIA,qHAIA,4EAGA,6FAGA,oGAGA,0JAIA,qKAKA,+GAGA,8IAIA,uGAGA,kMAKA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,kCAQF,8BACE,6CAGA,6EAIA,6EAGA","sources":["src/components/text-input.css"],"sourcesContent":["@layer ddga-components {\n .ddga-field[data-slot='text-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-text-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-text-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── /\n\n .ddga-text-input {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline-start: var(--ddga-space-2);\n padding-inline-end: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── /\n\n .ddga-text-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-text-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / ─── Fill styles (SDGA Style axis) ─── /\n\n .ddga-text-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-text-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── Field (the actual <input>: transparent, borderless fill) ─── /\n\n .ddga-text-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-text-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n / Autofill: browsers repaint autofilled fields with their own bg/text,\n overriding the theme (jarring in dark; government forms autofill heavily).\n Repaint with tokens via the inset-shadow technique. /\n .ddga-text-input__field:-webkit-autofill,\n .ddga-text-input__field:-webkit-autofill:hover,\n .ddga-text-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-gray-950);\n }\n\n / ─── Adornments (leading/trailing icon, affix, or in-field button) ─── /\n\n .ddga-text-input__adornment {\n display: inline-flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n / Never taller than the field interior so an in-field control can't paint\n over the border. /\n max-block-size: 100%;\n color: var(--ddga-gray-500);\n }\n\n .ddga-text-input__adornment svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n / An adornment hugs the field edge: collapse the padding on its side. /\n .ddga-text-input:has(.ddga-text-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n / ─── Prefix / suffix affix (SDGA: flush, full-height gray chip) ─── /\n\n .ddga-text-input__affix {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-500);\n white-space: nowrap;\n }\n .ddga-text-input--md .ddga-text-input__affix {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-text-input__affix--subtle {\n background-color: transparent;\n padding-inline: 0;\n }\n / Round the chip's outer corners to the field radius and bleed it flush. /\n .ddga-text-input__adornment--start:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--end:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--start .ddga-text-input__affix {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input__adornment--end .ddga-text-input__affix {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix) {\n padding-inline-start: 0;\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix) {\n padding-inline-end: 0;\n }\n\n / ─── Dropdown affix (SDGA `_Input Prefix-Suffix` \"Dropdown\": a <button>\n trigger = badge icon + label + chevron; reuses the flush chip shell,\n text is #161616 not gray-500, interactive states) ─── /\n\n .ddga-text-input__dropdown {\n gap: var(--ddga-space-1);\n padding-block: 0;\n border: 0;\n color: var(--ddga-text-primary);\n font: inherit;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n .ddga-text-input__dropdown-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-text-input__dropdown-icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-text-input__dropdown-chevron {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-icon {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-chevron {\n inline-size: 16px;\n block-size: 16px;\n }\n / Interactive states (SDGA neutral-button ramp). /\n .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-gray-200);\n }\n .ddga-text-input__dropdown:active {\n background-color: var(--ddga-gray-300);\n }\n .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-gray-200);\n }\n / Selected / open (SDGA `button-background-black-selected` #384250 + white). /\n .ddga-text-input__dropdown--selected,\n .ddga-text-input__dropdown--selected:hover,\n .ddga-text-input__dropdown--selected:active {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n / Focus (SDGA shows a 4px #161616 border; a 2px inset ring matches the\n library's focus language without shifting layout). /\n .ddga-text-input__dropdown:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n / ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── /\n\n .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n / ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── /\n\n .ddga-text-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-text-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n .ddga-text-input:focus-within::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). The real state is :active; the `--pressed` class is a\n static hook so the state is visible in Storybook / docs. The centered\n underline overrides the focus full-width one while the mouse is down. /\n\n .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n .ddga-text-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input:active::after,\n .ddga-text-input--pressed::after {\n content: '';\n position: absolute;\n inset-inline: 25%;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n }\n\n / ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── /\n\n .ddga-text-input--error,\n .ddga-text-input--error:hover:not(:focus-within),\n .ddga-text-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only (SDGA: gray-300 border, transparent fill) ─── /\n\n .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n / ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── /\n\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder,\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-gray-400);\n }\n / SDGA: disabled affix chip switches gray-100 → gray-200 (background-disabled). /\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix {\n background-color: var(--ddga-gray-200);\n }\n\n / ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── /\n\n .ddga-field[data-slot='text-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n / ─── Dark mode ─── /\n / The SDGA light values are fixed gray-ramp steps that don't flip; remap to\n the flipping semantic tokens so text/affordances stay readable on the dark\n surface. Exact DGA dark palette is deferred (not yet available). /\n\n [data-theme='dark'] .ddga-text-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__affix {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input__dropdown:active,\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--selected,\n [data-theme='dark'] .ddga-text-input__dropdown--selected:hover {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:focus-visible {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input--filled-lighter,\n [data-theme='dark'] .ddga-text-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-text-input:focus-within::after,\n [data-theme='dark'] .ddga-text-input:active::after,\n [data-theme='dark'] .ddga-text-input--pressed::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n [data-theme='dark'] .ddga-text-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field::placeholder,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-text-input {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast): focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-text-input {\n border: 1px solid CanvasText;\n }\n .ddga-text-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBACE,gEAMA,wNAUA,uDAMA,kZAoBA,wEAIA,0EAOA,yFAIA,yFAOA,+KAaA,gEAOA,uPAAA,6PAAA,6PAWA,kJAWA,gEAMA,kGAGA,8FAMA,yMASA,gFAGA,wEAKA,mFAGA,iFAGA,yJAIA,mJAIA,wGAGA,oGAQA,wKASA,0DAGA,mGAMA,qEAIA,kFAKA,sFAIA,yFAKA,uEAGA,wEAGA,+EAGA,gFAIA,6KAQA,0GAQA,qFAKA,2NAgBA,+DAGA,yEAGA,wDASA,gEAAA,0GAIA,mFAOA,iJAQA,gIAQA,mIAKA,6HAIA,uHAAA,8GAIA,+OAOA,qHAOA,+FAGA,gGAGA,gGASA,uGAIA,+EAGA,0FAGA,8EAGA,mHAIA,qHAIA,4EAGA,6FAGA,oGAGA,0JAIA,qKAKA,+GAGA,8IAIA,uGAGA,mFAGA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,yDASF,8BACE,6CAGA,6EAIA,6EAGA","sources":["src/components/text-input.css"],"sourcesContent":["@layer ddga-components {\n .ddga-field[data-slot='text-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required ) ─── /\n\n .ddga-text-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-text-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── /\n\n .ddga-text-input {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline-start: var(--ddga-space-2);\n padding-inline-end: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n / ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── /\n\n .ddga-text-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-text-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n / ─── Fill styles (SDGA Style axis) ─── /\n\n .ddga-text-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-text-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n / ─── Field (the actual <input>: transparent, borderless fill) ─── /\n\n .ddga-text-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-text-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n / Autofill: browsers repaint autofilled fields with their own bg/text,\n overriding the theme (jarring in dark; government forms autofill heavily).\n Repaint with tokens via the inset-shadow technique. /\n .ddga-text-input__field:-webkit-autofill,\n .ddga-text-input__field:-webkit-autofill:hover,\n .ddga-text-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-gray-950);\n }\n\n / ─── Adornments (leading/trailing icon, affix, or in-field button) ─── /\n\n .ddga-text-input__adornment {\n display: inline-flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n / Never taller than the field interior so an in-field control can't paint\n over the border. /\n max-block-size: 100%;\n color: var(--ddga-gray-500);\n }\n\n .ddga-text-input__adornment svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n / An adornment hugs the field edge: collapse the padding on its side. /\n .ddga-text-input:has(.ddga-text-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n / ─── Prefix / suffix affix (SDGA: flush, full-height gray chip) ─── /\n\n .ddga-text-input__affix {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-500);\n white-space: nowrap;\n }\n .ddga-text-input--md .ddga-text-input__affix {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-text-input__affix--subtle {\n background-color: transparent;\n padding-inline: 0;\n }\n / Round the chip's outer corners to the field radius and bleed it flush. /\n .ddga-text-input__adornment--start:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--end:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--start .ddga-text-input__affix {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input__adornment--end .ddga-text-input__affix {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix) {\n padding-inline-start: 0;\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix) {\n padding-inline-end: 0;\n }\n\n / ─── Dropdown affix (SDGA `_Input Prefix-Suffix` \"Dropdown\": a <button>\n trigger = badge icon + label + chevron; reuses the flush chip shell,\n text is #161616 not gray-500, interactive states) ─── /\n\n .ddga-text-input__dropdown {\n gap: var(--ddga-space-1);\n padding-block: 0;\n border: 0;\n color: var(--ddga-text-primary);\n font: inherit;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n .ddga-text-input__dropdown-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-text-input__dropdown-icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-text-input__dropdown-chevron {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-icon {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-chevron {\n inline-size: 16px;\n block-size: 16px;\n }\n / Interactive states (SDGA neutral-button ramp). /\n .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-gray-200);\n }\n .ddga-text-input__dropdown:active {\n background-color: var(--ddga-gray-300);\n }\n .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-gray-200);\n }\n / Selected / open (SDGA `button-background-black-selected` #384250 + white). /\n .ddga-text-input__dropdown--selected,\n .ddga-text-input__dropdown--selected:hover,\n .ddga-text-input__dropdown--selected:active {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n / Focus (SDGA shows a 4px #161616 border; a 2px inset ring matches the\n library's focus language without shifting layout). /\n .ddga-text-input__dropdown:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n / ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── /\n\n .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n / Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. /\n .ddga-text-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n\n / ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── /\n\n .ddga-text-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-text-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n .ddga-text-input:focus-within::after {\n transform: scaleX(1);\n }\n\n / ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). The real state is :active; the `--pressed` class is a\n static hook so the state is visible in Storybook / docs. The centered\n underline overrides the focus full-width one while the mouse is down. /\n\n .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n .ddga-text-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input:active::after,\n .ddga-text-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n / ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── /\n\n .ddga-text-input--error,\n .ddga-text-input--error:hover:not(:focus-within),\n .ddga-text-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n / ─── Read-only (SDGA: gray-300 border, transparent fill) ─── /\n\n .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n / ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── /\n\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder,\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-gray-400);\n }\n / SDGA: disabled affix chip switches gray-100 → gray-200 (background-disabled). /\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix {\n background-color: var(--ddga-gray-200);\n }\n\n / ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── /\n\n .ddga-field[data-slot='text-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n / ─── Dark mode ─── /\n / The SDGA light values are fixed gray-ramp steps that don't flip; remap to\n the flipping semantic tokens so text/affordances stay readable on the dark\n surface. Exact DGA dark palette is deferred (not yet available). /\n\n [data-theme='dark'] .ddga-text-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__affix {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input__dropdown:active,\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--selected,\n [data-theme='dark'] .ddga-text-input__dropdown--selected:hover {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:focus-visible {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input--filled-lighter,\n [data-theme='dark'] .ddga-text-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-text-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n [data-theme='dark'] .ddga-text-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field::placeholder,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-text-input,\n .ddga-text-input::after {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast): focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-text-input {\n border: 1px solid CanvasText;\n }\n .ddga-text-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}

package/dist/components/textarea.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-field[data-slot=textarea-field]{gap:var(--ddga-space-2)}.ddga-textarea__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-textarea__required{color:var(--ddga-error-700)}.ddga-textarea{border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;transition:border-color .15s,box-shadow .15s,background-color .15s;display:block;position:relative}.ddga-textarea--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-textarea--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-textarea__field{inline-size:100%;padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);color:var(--ddga-text-primary);font-family:inherit;font-size:var(--ddga-font-size-base);caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;line-height:1.5;display:block}.ddga-textarea__field::placeholder{color:var(--ddga-gray-500)}.ddga-textarea__field--resize-vertical{resize:vertical}.ddga-textarea__field--resize-none{resize:none}.ddga-textarea__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-textarea:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-textarea--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-textarea:focus-within:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-textarea--pressed{background-color:var(--ddga-gray-100)}.ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-textarea:active:after,.ddga-textarea--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-textarea--error,.ddga-textarea--error:hover:not(:focus-within),.ddga-textarea--error:focus-within{border-color:var(--ddga-error-700)}.ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-gray-400);cursor:not-allowed;resize:none}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-gray-400)}.ddga-field[data-slot=textarea-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=textarea-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-textarea{border-color:var(--ddga-color-input)}[data-theme=dark] .ddga-textarea__field{color:var(--ddga-text-primary);caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-textarea--filled-lighter,[data-theme=dark] .ddga-textarea--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-textarea:focus-within:after,[data-theme=dark] .ddga-textarea:active:after,[data-theme=dark] .ddga-textarea--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,[data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:graytext}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:graytext}}}
+@layer ddga-components{.ddga-field[data-slot=textarea-field]{gap:var(--ddga-space-2)}.ddga-textarea__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-textarea__required{color:var(--ddga-error-700)}.ddga-textarea{border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;transition:border-color .15s,box-shadow .15s,background-color .15s;display:block;position:relative}.ddga-textarea--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-textarea--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-textarea__field{inline-size:100%;padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);color:var(--ddga-text-primary);font-family:inherit;font-size:var(--ddga-font-size-base);caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;line-height:1.5;display:block}.ddga-textarea__field::placeholder{color:var(--ddga-gray-500)}.ddga-textarea__field--resize-vertical{resize:vertical}.ddga-textarea__field--resize-none{resize:none}.ddga-textarea__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-textarea:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-textarea--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-textarea:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);transform-origin:50%;pointer-events:none;block-size:2px;transition:transform .15s;position:absolute;bottom:-1px;transform:scaleX(0)}.ddga-textarea:focus-within:after{transform:scaleX(1)}.ddga-textarea--pressed{background-color:var(--ddga-gray-100)}.ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-textarea:active:after,.ddga-textarea--pressed:after{transform:scaleX(.5)}.ddga-textarea--error,.ddga-textarea--error:hover:not(:focus-within),.ddga-textarea--error:focus-within{border-color:var(--ddga-error-700)}.ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-gray-400);cursor:not-allowed;resize:none}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-gray-400)}.ddga-field[data-slot=textarea-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=textarea-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-textarea{border-color:var(--ddga-color-input)}[data-theme=dark] .ddga-textarea__field{color:var(--ddga-text-primary);caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-textarea--filled-lighter,[data-theme=dark] .ddga-textarea--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-textarea:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,[data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-textarea,.ddga-textarea:after{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:graytext}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:graytext}}}
 /*# sourceMappingURL=textarea.css.map */