npm - @dev-dga/css - Versions diffs - 0.1.0 → 0.1.1 - Mend

@dev-dga/css 0.1.0 → 0.1.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 (4) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,38 @@
+# @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.
+Pairs with [`@dev-dga/react`](https://www.npmjs.com/package/@dev-dga/react), but works with any framework or none.
+## Install
+```bash
+npm install @dev-dga/css
+```
+## Usage
+Import once at your app entry:
+```ts
+import '@dev-dga/css';
+```
+That bundles the reset, variables, dark theme rule, and every component's styles. To cherry-pick instead:
+```ts
+import '@dev-dga/css/variables.css';
+import '@dev-dga/css/reset.css';
+import '@dev-dga/css/dark.css';
+import '@dev-dga/css/components/button.css';
+```
+Theming is driven by `data-theme="light|dark"` and `dir="ltr|rtl"` on a container element. `@dev-dga/react`'s `<DgaProvider>` sets both for you.
+## Docs
+[Live Storybook](https://devdhaif.github.io/dev-dga/) · [Source](https://github.com/DevDhaif/dev-dga)
+## License
+MIT

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,iBOAA,qmELCA,g1CEDA,0DAQA,2MAWA,yCJnBA,uBCKE,uEAMA,iFAMA,8DAIA,0DIlBA,4VAqBA,4GAIA,4FAMA,kHAIA,gGAMA,sHAKA,oFAMA,8EAIA,kFAMA,wHAIA,oGAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BAOF,oDAKA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,4DF9LF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFG1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DEpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA","sources":["src/index.css","src/components/field.css","src/dark.css","src/reset.css","src/components/input.css","src/components/textarea.css","src/components/checkbox.css","src/components/button.css","src/variables.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n/* AUTO:COMPONENT_IMPORTS /\n","@layer ddga-components {\n / Shared field primitives — wrapper + helper/error message. Used by\n Input / Textarea / Checkbox. Component-specific bits (the label and\n the control itself) stay in each component's CSS. /\n\n .ddga-field {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-field__message {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-field__message--error {\n color: var(--ddga-color-error);\n }\n}\n","/ Dark mode — DGA-aligned using neutral gray scale. /\n[data-theme='dark'] {\n color-scheme: dark;\n\n / ─── Surface / Layout (Gray 900-based) ─── /\n --ddga-color-background: #111927;\n --ddga-color-foreground: #f3f4f6;\n --ddga-color-muted: #1f2a37;\n --ddga-color-muted-foreground: #9da4ae;\n --ddga-color-border: #384250;\n --ddga-color-card: #1f2a37;\n --ddga-color-card-foreground: #f3f4f6;\n --ddga-color-input: #384250;\n\n / ─── Primary (SA Green — slightly lighter for dark bg) ─── /\n --ddga-color-primary: #54c08a;\n --ddga-color-primary-hover: #88d8ad;\n --ddga-color-primary-active: #25935f;\n --ddga-color-primary-foreground: #0d121c;\n\n / ─── Secondary ─── /\n --ddga-color-secondary: #1f2a37;\n --ddga-color-secondary-hover: #384250;\n --ddga-color-secondary-foreground: #f3f4f6;\n\n / ─── Destructive ─── /\n --ddga-color-destructive: #f97066;\n --ddga-color-destructive-hover: #f04438;\n --ddga-color-destructive-foreground: #0d121c;\n\n / ─── Semantic — lighter shades for dark bg legibility ─── /\n --ddga-color-error: #f97066;\n --ddga-color-error-hover: #f04438;\n --ddga-color-error-foreground: #0d121c;\n --ddga-color-success: #47cd89;\n --ddga-color-success-hover: #17b26a;\n --ddga-color-success-foreground: #0d121c;\n --ddga-color-warning: #fdb022;\n --ddga-color-warning-hover: #f79009;\n --ddga-color-warning-foreground: #0d121c;\n --ddga-color-info: #53b1fd;\n --ddga-color-info-hover: #2e90fa;\n --ddga-color-info-foreground: #0d121c;\n\n / ─── Focus ring ─── /\n --ddga-color-ring: #54c08a;\n\n / ─── Text ─── /\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n --ddga-text-placeholder: #6c737f;\n\n / ─── Shadows — stronger for dark backgrounds ─── /\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n",",\n::before,\n::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: var(--ddga-font-ar);\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-background);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n inside flex controls (buttons, input adornments). Standard reset. /\nsvg {\n display: block;\n vertical-align: middle;\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Input-specific styles live here. /\n\n / ─── Label ─── /\n\n .ddga-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Control (the bordered box; owns border/focus/size/state) ─── /\n\n .ddga-input {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n / ─── Sizes (heights match Button) ─── /\n\n .ddga-input--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-input--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input--lg {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n / ─── Field (the actual <input> — transparent, borderless fill) ─── /\n\n .ddga-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 outline: none;\n }\n\n .ddga-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / Autofill: browsers paint their own background/text on autofilled\n fields, overriding the theme (most jarring in dark mode, and government\n forms autofill heavily). Repaint with tokens via the inset-shadow\n technique — `background-color` alone is ignored for autofill. /\n .ddga-input__field:-webkit-autofill,\n .ddga-input__field:-webkit-autofill:hover,\n .ddga-input__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-text-primary);\n }\n\n / ─── Adornments (leading/trailing icon or text) ─── /\n\n .ddga-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 interactive control\n (clear / password toggle) can't paint over the field border. /\n max-block-size: 100%;\n color: var(--ddga-text-tertiary);\n }\n\n / Block-level SVGs (see reset) must not flex-stretch into a tall icon. /\n .ddga-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 so\n an in-field button's hit area aligns with the field, not floating. /\n .ddga-input:has(.ddga-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-input:has(.ddga-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n / ─── Focus (ring on the control via :focus-within) ─── /\n\n .ddga-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── States (driven by the inner field via :has()) ─── /\n\n .ddga-input:has(.ddga-input__field:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n cursor: not-allowed;\n }\n\n .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-input {\n border: 1px solid CanvasText;\n }\n .ddga-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-input:has(.ddga-input__field:disabled) {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Textarea-specific styles live here. /\n\n / ─── Label ─── /\n\n .ddga-textarea__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Textarea (owns border/focus/state — no adornments) ─── /\n\n .ddga-textarea {\n display: block;\n inline-size: 100%;\n min-block-size: 4.5rem;\n padding-block: var(--ddga-space-2);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-textarea::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / Autofill (e.g. address fields): repaint with tokens — see input.css. /\n .ddga-textarea:-webkit-autofill,\n .ddga-textarea:-webkit-autofill:hover,\n .ddga-textarea:-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-text-primary);\n }\n\n / ─── Sizes (font + inline padding; height is driven by `rows`) ─── /\n\n .ddga-textarea--sm {\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-textarea--md {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-textarea--lg {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n / ─── Resize (vertical only or locked; horizontal breaks layout) ─── /\n\n .ddga-textarea--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea--resize-none {\n resize: none;\n }\n\n / ─── Focus ─── /\n\n .ddga-textarea:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-textarea--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-textarea--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── States ─── /\n\n .ddga-textarea:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n resize: none;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-textarea:read-only:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-textarea:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Checkbox-specific styles live here. /\n\n / ─── Row (box + label, inline) ─── /\n\n .ddga-checkbox-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n / ─── Box (Radix Root — reset the button, then style) ─── /\n\n .ddga-checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary-foreground);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-checkbox--md {\n block-size: 18px;\n inline-size: 18px;\n font-size: 14px;\n }\n .ddga-checkbox--sm {\n block-size: 16px;\n inline-size: 16px;\n font-size: 12px;\n }\n\n / ─── Checked / indeterminate fill ─── /\n\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n / ─── Focus (slightly thicker ring — small hit target) ─── /\n\n .ddga-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-checkbox--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error[data-state='checked'],\n .ddga-checkbox--error[data-state='indeterminate'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n / ─── Disabled ─── /\n\n .ddga-checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Indicator + icons (one shows per Root data-state) ─── /\n\n .ddga-checkbox__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-checkbox__check,\n .ddga-checkbox__minus {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n display: none;\n }\n .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n display: none;\n }\n\n / ─── Label ─── /\n\n .ddga-checkbox__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-checkbox__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-checkbox {\n border: 1px solid CanvasText;\n }\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: CanvasText;\n }\n .ddga-checkbox__indicator {\n color: Canvas;\n }\n .ddga-checkbox:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-checkbox:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n / ─── Base ─── /\n\n .ddga-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.6;\n cursor: pointer;\n text-decoration: none;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n opacity 150ms ease;\n }\n\n / ─── Variant: Primary ─── /\n\n .ddga-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-button--primary:hover:not(:disabled) {\n background-color: var(--ddga-color-primary-hover);\n }\n\n / ─── Variant: Secondary ─── /\n\n .ddga-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n .ddga-button--secondary:hover:not(:disabled) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n / ─── Variant: Outline ─── /\n\n .ddga-button--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n .ddga-button--outline:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Variant: Ghost ─── /\n\n .ddga-button--ghost {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n .ddga-button--ghost:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Variant: Destructive ─── /\n\n .ddga-button--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n .ddga-button--destructive:hover:not(:disabled) {\n background-color: var(--ddga-color-destructive-hover);\n }\n\n / ─── Sizes ─── /\n\n .ddga-button--sm {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-button--md {\n height: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n / Compact square icon button — fits inside form fields as an adornment\n (sm/md field interiors) without overflowing the field border. /\n .ddga-button--icon-sm {\n height: 28px;\n width: 28px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\n }\n\n / ─── Full Width ─── /\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n / ─── Loading ─── /\n\n .ddga-button--loading {\n position: relative;\n cursor: wait;\n }\n\n / ─── Child elements ─── /\n\n .ddga-button__text {\n / Truncate long text /\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-button__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n / Block-level SVGs (see reset) must not be flex-stretched on the cross\n axis — that distorts a square icon into a tall one. Pin them square\n to their intrinsic size and keep them centered. /\n .ddga-button svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n / ─── Spinner ─── /\n\n .ddga-spinner {\n animation: ddga-spin 600ms linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes ddga-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-spinner {\n animation-duration: 1.5s;\n }\n .ddga-button {\n transition: none;\n }\n }\n\n / ─── States ─── /\n\n .ddga-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .ddga-button:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── RTL directional icon flip ─── /\n\n [dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\n }\n\n / ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-button {\n border: 1px solid ButtonText;\n }\n .ddga-button:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-button:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n",":root {\n --ddga-color-primary: #25935F;\n --ddga-color-primary-hover: #1B8354;\n --ddga-color-primary-active: #166A45;\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: #F3F4F6;\n --ddga-color-secondary-hover: #E5E7EB;\n --ddga-color-secondary-foreground: #0D121C;\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: #0D121C;\n --ddga-color-muted: #F3F4F6;\n --ddga-color-muted-foreground: #6C737F;\n --ddga-color-border: #E5E7EB;\n --ddga-color-input: #D2D6DB;\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: #0D121C;\n --ddga-color-destructive: #D92D20;\n --ddga-color-destructive-hover: #B42318;\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: #D92D20;\n --ddga-color-error-hover: #B42318;\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: #079455;\n --ddga-color-success-hover: #067647;\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: #DC6803;\n --ddga-color-warning-hover: #B54708;\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: #1570EF;\n --ddga-color-info-hover: #175CD3;\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: #25935F;\n --ddga-text-primary: #0D121C;\n --ddga-text-secondary: #4D5761;\n --ddga-text-tertiary: #6C737F;\n --ddga-text-placeholder: #9DA4AE;\n --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n --ddga-font-mono: 'IBM Plex Mono', monospace;\n --ddga-font-weight-regular: 400;\n --ddga-font-weight-medium: 500;\n --ddga-font-weight-semibold: 600;\n --ddga-font-weight-bold: 700;\n --ddga-font-size-xs: 0.75rem;\n --ddga-font-size-sm: 0.875rem;\n --ddga-font-size-base: 1rem;\n --ddga-font-size-lg: 1.125rem;\n --ddga-font-size-xl: 1.25rem;\n --ddga-font-size-2xl: 1.5rem;\n --ddga-font-size-3xl: 2rem;\n --ddga-space-0: 0;\n --ddga-space-1: 0.25rem;\n --ddga-space-2: 0.5rem;\n --ddga-space-3: 0.75rem;\n --ddga-space-4: 1rem;\n --ddga-space-5: 1.25rem;\n --ddga-space-6: 1.5rem;\n --ddga-space-8: 2rem;\n --ddga-space-10: 2.5rem;\n --ddga-space-12: 3rem;\n --ddga-space-16: 4rem;\n --ddga-radius-none: 0;\n --ddga-radius-sm: 0.25rem;\n --ddga-radius-md: 0.5rem;\n --ddga-radius-lg: 0.75rem;\n --ddga-radius-xl: 1rem;\n --ddga-radius-full: 9999px;\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --ddga-shadow-none: none;\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,iBOAA,qmENCA,g1CIDA,0DAQA,2MAWA,yCLnBA,uBGKE,uEAMA,iFAMA,8DAIA,0DKlBA,4VAqBA,4GAIA,4FAMA,kHAIA,gGAMA,sHAKA,oFAMA,8EAIA,kFAMA,wHAIA,oGAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BAOF,oDAKA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,4DN9LF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFE1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DEpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA","sources":["src/index.css","src/variables.css","src/components/field.css","src/dark.css","src/components/checkbox.css","src/components/input.css","src/reset.css","src/components/textarea.css","src/components/button.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n/* AUTO:COMPONENT_IMPORTS /\n",":root {\n --ddga-color-primary: #25935F;\n --ddga-color-primary-hover: #1B8354;\n --ddga-color-primary-active: #166A45;\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: #F3F4F6;\n --ddga-color-secondary-hover: #E5E7EB;\n --ddga-color-secondary-foreground: #0D121C;\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: #0D121C;\n --ddga-color-muted: #F3F4F6;\n --ddga-color-muted-foreground: #6C737F;\n --ddga-color-border: #E5E7EB;\n --ddga-color-input: #D2D6DB;\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: #0D121C;\n --ddga-color-destructive: #D92D20;\n --ddga-color-destructive-hover: #B42318;\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: #D92D20;\n --ddga-color-error-hover: #B42318;\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: #079455;\n --ddga-color-success-hover: #067647;\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: #DC6803;\n --ddga-color-warning-hover: #B54708;\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: #1570EF;\n --ddga-color-info-hover: #175CD3;\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: #25935F;\n --ddga-text-primary: #0D121C;\n --ddga-text-secondary: #4D5761;\n --ddga-text-tertiary: #6C737F;\n --ddga-text-placeholder: #9DA4AE;\n --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n --ddga-font-mono: 'IBM Plex Mono', monospace;\n --ddga-font-weight-regular: 400;\n --ddga-font-weight-medium: 500;\n --ddga-font-weight-semibold: 600;\n --ddga-font-weight-bold: 700;\n --ddga-font-size-xs: 0.75rem;\n --ddga-font-size-sm: 0.875rem;\n --ddga-font-size-base: 1rem;\n --ddga-font-size-lg: 1.125rem;\n --ddga-font-size-xl: 1.25rem;\n --ddga-font-size-2xl: 1.5rem;\n --ddga-font-size-3xl: 2rem;\n --ddga-space-0: 0;\n --ddga-space-1: 0.25rem;\n --ddga-space-2: 0.5rem;\n --ddga-space-3: 0.75rem;\n --ddga-space-4: 1rem;\n --ddga-space-5: 1.25rem;\n --ddga-space-6: 1.5rem;\n --ddga-space-8: 2rem;\n --ddga-space-10: 2.5rem;\n --ddga-space-12: 3rem;\n --ddga-space-16: 4rem;\n --ddga-radius-none: 0;\n --ddga-radius-sm: 0.25rem;\n --ddga-radius-md: 0.5rem;\n --ddga-radius-lg: 0.75rem;\n --ddga-radius-xl: 1rem;\n --ddga-radius-full: 9999px;\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --ddga-shadow-none: none;\n}\n","@layer ddga-components {\n / Shared field primitives — wrapper + helper/error message. Used by\n Input / Textarea / Checkbox. Component-specific bits (the label and\n the control itself) stay in each component's CSS. /\n\n .ddga-field {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-field__message {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-field__message--error {\n color: var(--ddga-color-error);\n }\n}\n","/ Dark mode — DGA-aligned using neutral gray scale. /\n[data-theme='dark'] {\n color-scheme: dark;\n\n / ─── Surface / Layout (Gray 900-based) ─── /\n --ddga-color-background: #111927;\n --ddga-color-foreground: #f3f4f6;\n --ddga-color-muted: #1f2a37;\n --ddga-color-muted-foreground: #9da4ae;\n --ddga-color-border: #384250;\n --ddga-color-card: #1f2a37;\n --ddga-color-card-foreground: #f3f4f6;\n --ddga-color-input: #384250;\n\n / ─── Primary (SA Green — slightly lighter for dark bg) ─── /\n --ddga-color-primary: #54c08a;\n --ddga-color-primary-hover: #88d8ad;\n --ddga-color-primary-active: #25935f;\n --ddga-color-primary-foreground: #0d121c;\n\n / ─── Secondary ─── /\n --ddga-color-secondary: #1f2a37;\n --ddga-color-secondary-hover: #384250;\n --ddga-color-secondary-foreground: #f3f4f6;\n\n / ─── Destructive ─── /\n --ddga-color-destructive: #f97066;\n --ddga-color-destructive-hover: #f04438;\n --ddga-color-destructive-foreground: #0d121c;\n\n / ─── Semantic — lighter shades for dark bg legibility ─── /\n --ddga-color-error: #f97066;\n --ddga-color-error-hover: #f04438;\n --ddga-color-error-foreground: #0d121c;\n --ddga-color-success: #47cd89;\n --ddga-color-success-hover: #17b26a;\n --ddga-color-success-foreground: #0d121c;\n --ddga-color-warning: #fdb022;\n --ddga-color-warning-hover: #f79009;\n --ddga-color-warning-foreground: #0d121c;\n --ddga-color-info: #53b1fd;\n --ddga-color-info-hover: #2e90fa;\n --ddga-color-info-foreground: #0d121c;\n\n / ─── Focus ring ─── /\n --ddga-color-ring: #54c08a;\n\n / ─── Text ─── /\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n --ddga-text-placeholder: #6c737f;\n\n / ─── Shadows — stronger for dark backgrounds ─── /\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Checkbox-specific styles live here. /\n\n / ─── Row (box + label, inline) ─── /\n\n .ddga-checkbox-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n / ─── Box (Radix Root — reset the button, then style) ─── /\n\n .ddga-checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary-foreground);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-checkbox--md {\n block-size: 18px;\n inline-size: 18px;\n font-size: 14px;\n }\n .ddga-checkbox--sm {\n block-size: 16px;\n inline-size: 16px;\n font-size: 12px;\n }\n\n / ─── Checked / indeterminate fill ─── /\n\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n / ─── Focus (slightly thicker ring — small hit target) ─── /\n\n .ddga-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-checkbox--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error[data-state='checked'],\n .ddga-checkbox--error[data-state='indeterminate'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n / ─── Disabled ─── /\n\n .ddga-checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Indicator + icons (one shows per Root data-state) ─── /\n\n .ddga-checkbox__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-checkbox__check,\n .ddga-checkbox__minus {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n display: none;\n }\n .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n display: none;\n }\n\n / ─── Label ─── /\n\n .ddga-checkbox__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-checkbox__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-checkbox {\n border: 1px solid CanvasText;\n }\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: CanvasText;\n }\n .ddga-checkbox__indicator {\n color: Canvas;\n }\n .ddga-checkbox:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-checkbox:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Input-specific styles live here. /\n\n / ─── Label ─── /\n\n .ddga-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Control (the bordered box; owns border/focus/size/state) ─── /\n\n .ddga-input {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n / ─── Sizes (heights match Button) ─── /\n\n .ddga-input--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-input--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input--lg {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n / ─── Field (the actual <input> — transparent, borderless fill) ─── /\n\n .ddga-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 outline: none;\n }\n\n .ddga-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / Autofill: browsers paint their own background/text on autofilled\n fields, overriding the theme (most jarring in dark mode, and government\n forms autofill heavily). Repaint with tokens via the inset-shadow\n technique — `background-color` alone is ignored for autofill. /\n .ddga-input__field:-webkit-autofill,\n .ddga-input__field:-webkit-autofill:hover,\n .ddga-input__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-text-primary);\n }\n\n / ─── Adornments (leading/trailing icon or text) ─── /\n\n .ddga-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 interactive control\n (clear / password toggle) can't paint over the field border. /\n max-block-size: 100%;\n color: var(--ddga-text-tertiary);\n }\n\n / Block-level SVGs (see reset) must not flex-stretch into a tall icon. /\n .ddga-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 so\n an in-field button's hit area aligns with the field, not floating. /\n .ddga-input:has(.ddga-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-input:has(.ddga-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n / ─── Focus (ring on the control via :focus-within) ─── /\n\n .ddga-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── States (driven by the inner field via :has()) ─── /\n\n .ddga-input:has(.ddga-input__field:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n cursor: not-allowed;\n }\n\n .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-input {\n border: 1px solid CanvasText;\n }\n .ddga-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-input:has(.ddga-input__field:disabled) {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n",",\n::before,\n::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: var(--ddga-font-ar);\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-background);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n inside flex controls (buttons, input adornments). Standard reset. /\nsvg {\n display: block;\n vertical-align: middle;\n}\n","@layer ddga-components {\n / Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only Textarea-specific styles live here. /\n\n / ─── Label ─── /\n\n .ddga-textarea__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Textarea (owns border/focus/state — no adornments) ─── /\n\n .ddga-textarea {\n display: block;\n inline-size: 100%;\n min-block-size: 4.5rem;\n padding-block: var(--ddga-space-2);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-textarea::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / Autofill (e.g. address fields): repaint with tokens — see input.css. /\n .ddga-textarea:-webkit-autofill,\n .ddga-textarea:-webkit-autofill:hover,\n .ddga-textarea:-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-text-primary);\n }\n\n / ─── Sizes (font + inline padding; height is driven by `rows`) ─── /\n\n .ddga-textarea--sm {\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-textarea--md {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-textarea--lg {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n / ─── Resize (vertical only or locked; horizontal breaks layout) ─── /\n\n .ddga-textarea--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea--resize-none {\n resize: none;\n }\n\n / ─── Focus ─── /\n\n .ddga-textarea:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── Error ─── /\n\n .ddga-textarea--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-textarea--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── States ─── /\n\n .ddga-textarea:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n resize: none;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-textarea:read-only:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-textarea:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n / ─── Base ─── /\n\n .ddga-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.6;\n cursor: pointer;\n text-decoration: none;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n opacity 150ms ease;\n }\n\n / ─── Variant: Primary ─── /\n\n .ddga-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-button--primary:hover:not(:disabled) {\n background-color: var(--ddga-color-primary-hover);\n }\n\n / ─── Variant: Secondary ─── /\n\n .ddga-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n .ddga-button--secondary:hover:not(:disabled) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n / ─── Variant: Outline ─── /\n\n .ddga-button--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n .ddga-button--outline:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Variant: Ghost ─── /\n\n .ddga-button--ghost {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n .ddga-button--ghost:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n / ─── Variant: Destructive ─── /\n\n .ddga-button--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n .ddga-button--destructive:hover:not(:disabled) {\n background-color: var(--ddga-color-destructive-hover);\n }\n\n / ─── Sizes ─── /\n\n .ddga-button--sm {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-button--md {\n height: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n / Compact square icon button — fits inside form fields as an adornment\n (sm/md field interiors) without overflowing the field border. /\n .ddga-button--icon-sm {\n height: 28px;\n width: 28px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\n }\n\n / ─── Full Width ─── /\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n / ─── Loading ─── /\n\n .ddga-button--loading {\n position: relative;\n cursor: wait;\n }\n\n / ─── Child elements ─── /\n\n .ddga-button__text {\n / Truncate long text /\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-button__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n / Block-level SVGs (see reset) must not be flex-stretched on the cross\n axis — that distorts a square icon into a tall one. Pin them square\n to their intrinsic size and keep them centered. /\n .ddga-button svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n / ─── Spinner ─── /\n\n .ddga-spinner {\n animation: ddga-spin 600ms linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes ddga-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-spinner {\n animation-duration: 1.5s;\n }\n .ddga-button {\n transition: none;\n }\n }\n\n / ─── States ─── /\n\n .ddga-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .ddga-button:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n / ─── RTL directional icon flip ─── /\n\n [dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\n }\n\n / ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-button {\n border: 1px solid ButtonText;\n }\n .ddga-button:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-button:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n"],"names":[]}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // @dev-dga/css ships only CSS. Importing this module applies styles globally.
2	+ export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,26 @@
 {
   "name": "@dev-dga/css",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "description": "CSS for the DGA (Digital Government Authority) design system — reset, custom properties, dark theme, and per-component styles in cascade layers.",
+  "keywords": [
+    "css",
+    "design-system",
+    "dga",
+    "saudi-arabia",
+    "rtl",
+    "dark-mode",
+    "cascade-layers"
+  ],
+  "homepage": "https://devdhaif.github.io/dev-dga/",
+  "bugs": {
+    "url": "https://github.com/DevDhaif/dev-dga/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DevDhaif/dev-dga.git",
+    "directory": "packages/css"
+  },
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -9,7 +29,10 @@
     "dist"
   ],
   "exports": {
-    ".": "./dist/index.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.css"
+    },
     "./variables.css": "./dist/variables.css",
     "./dark.css": "./dist/dark.css",
     "./reset.css": "./dist/reset.css",
@@ -20,7 +43,7 @@
   },
   "devDependencies": {
     "lightningcss-cli": "^1.30.1",
-    "@dev-dga/tokens": "0.1.0"
+    "@dev-dga/tokens": "0.1.1"
   },
   "scripts": {
     "build": "node scripts/build.js",