@dev-dga/css 0.12.1 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/components/chip.css +1 -1
- package/dist/components/chip.css.map +1 -1
- 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/slider.css +1 -1
- package/dist/components/slider.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 +2 -2
|
@@ -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,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":[]}
|
|
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,mOAgBA,+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 400ms ease-out;\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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@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 .
|
|
1
|
+
@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 .4s ease-out;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}}}
|
|
2
2
|
/*# sourceMappingURL=textarea.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAIA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAOE,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAIA,iOAYA,sDASA,8DAAA,sGAIA,+EAOA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,iFAGA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,qDASF,8BACE,2CAGA,2EAIA,yEAGA","sources":["src/components/textarea.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Mirrors the SDGA \"Textarea\" field model (= Text input, minus\n the size axis): single size, three fill styles, gray-400 border, multi-line.\n The control owns the box; the <textarea> inside is borderless/transparent so\n the focus/pressed `::after` underline can render. */\n\n .ddga-field[data-slot='textarea-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-textarea__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-textarea__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/state/style) ─── */\n\n .ddga-textarea {\n position: relative;\n display: block;\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 transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-textarea--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-textarea--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <textarea>: transparent, borderless, multi-line) ─── */\n\n .ddga-textarea__field {\n display: block;\n inline-size: 100%;\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-textarea__field--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea__field--resize-none {\n resize: none;\n }\n\n /* Autofill: repaint with tokens (see text-input.css for the why). */\n .ddga-textarea__field:-webkit-autofill,\n .ddga-textarea__field:-webkit-autofill:hover,\n .ddga-textarea__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\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 /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-textarea--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-textarea:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-textarea--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-textarea::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 400ms ease-out;\n pointer-events: none;\n }\n .ddga-textarea:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). Real state is :active; `--pressed` is a static hook so the\n state is visible in Storybook. The centered underline overrides the\n focus full-width one while the mouse is down. */\n\n .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n .ddga-textarea--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-textarea:active::after,\n .ddga-textarea--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-textarea--error,\n .ddga-textarea--error:hover:not(:focus-within),\n .ddga-textarea--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-textarea:has(.ddga-textarea__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-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n resize: none;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled) .ddga-textarea__label,\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__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='textarea-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='textarea-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 on dark. Exact\n DGA dark palette deferred. */\n\n [data-theme='dark'] .ddga-textarea {\n border-color: var(--ddga-color-input);\n }\n [data-theme='dark'] .ddga-textarea__field {\n color: var(--ddga-text-primary);\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-textarea--filled-lighter,\n [data-theme='dark'] .ddga-textarea--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-textarea::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n [data-theme='dark'] .ddga-textarea--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field,\n [data-theme='dark']\n .ddga-textarea:has(.ddga-textarea__field:disabled)\n .ddga-textarea__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__label,\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='textarea-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-textarea,\n .ddga-textarea::after {\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-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: GrayText;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}
|