@dev-dga/css 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# @dev-dga/css
+
+## 0.2.0
+
+### Minor Changes
+
+- Emit full 12-step palette scales as CSS custom properties (consumed from `@dev-dga/tokens`). Eight palettes (`saGreen`, `gray`, `error`, `warning`, `success`, `info`, `gold`, `lavender`) now ship as `--ddga-{name}-{step}` variables for every step from `25` through `950`. Use them directly in consumer CSS for alerts, badges, gradients, custom surfaces:
+
+  ```css
+  .alert--info {
+    background: var(--ddga-info-50);
+    color: var(--ddga-info-700);
+    border-color: var(--ddga-info-200);
+  }
+  ```
+
+  Bundled `dist/variables.css` grows ~2.9KB (~1KB gzipped). Scales live in their own namespaces (not under `--ddga-color-*`) to avoid collision with semantic tokens like `--ddga-color-error` (= `error.600`). Backward compatible — no existing custom properties removed or renamed.
+
+## 0.1.1
+
+- Add `dist/index.d.ts` stub so TypeScript `bundler` resolution can resolve `import '@dev-dga/css'` without ts(2882).
+- Per-package README and metadata polish.
+
+## 0.1.0
+
+- Initial release: reset, generated `variables.css`, dark theme overrides, per-component styles in `@layer ddga-base, ddga-components`.

package/README.md

@@ -1,6 +1,6 @@
 # @dev-dga/css
 
-CSS for the **DGA (Digital Government Authority)** design system — reset, custom properties, dark theme, and per-component styles. Plain CSS in cascade layers (`@layer ddga-base, ddga-components`); no JS runtime.
+CSS for the **DGA (Digital Government Authority)** 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.
 

package/dist/components/button.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAGE,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","sources":["src/components/button.css"],"sourcesContent":["@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":[]}
+{"version":3,"mappings":"AAAA,uBAGE,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","sources":["src/components/button.css"],"sourcesContent":["@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/components/checkbox.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAME,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/components/checkbox.css"],"sourcesContent":["@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"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAME,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/components/checkbox.css"],"sourcesContent":["@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"],"names":[]}

package/dist/components/field.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAKE,uEAMA,iFAMA,8DAIA","sources":["src/components/field.css"],"sourcesContent":["@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"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAKE,uEAMA,iFAMA,8DAIA","sources":["src/components/field.css"],"sourcesContent":["@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"],"names":[]}

package/dist/components/input.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAME,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","sources":["src/components/input.css"],"sourcesContent":["@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"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAME,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","sources":["src/components/input.css"],"sourcesContent":["@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"],"names":[]}

package/dist/components/textarea.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAME,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA","sources":["src/components/textarea.css"],"sourcesContent":["@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"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAME,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA","sources":["src/components/textarea.css"],"sourcesContent":["@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"],"names":[]}

package/dist/dark.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA","sources":["src/dark.css"],"sourcesContent":["/* 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"],"names":[]}
+{"version":3,"mappings":"AACA","sources":["src/dark.css"],"sourcesContent":["/* 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"],"names":[]}

package/dist/index.css

@@ -1,2 +1,2 @@
-@layer ddga-base{:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:#111927;--ddga-color-foreground:#f3f4f6;--ddga-color-muted:#1f2a37;--ddga-color-muted-foreground:#9da4ae;--ddga-color-border:#384250;--ddga-color-card:#1f2a37;--ddga-color-card-foreground:#f3f4f6;--ddga-color-input:#384250;--ddga-color-primary:#54c08a;--ddga-color-primary-hover:#88d8ad;--ddga-color-primary-active:#25935f;--ddga-color-primary-foreground:#0d121c;--ddga-color-secondary:#1f2a37;--ddga-color-secondary-hover:#384250;--ddga-color-secondary-foreground:#f3f4f6;--ddga-color-destructive:#f97066;--ddga-color-destructive-hover:#f04438;--ddga-color-destructive-foreground:#0d121c;--ddga-color-error:#f97066;--ddga-color-error-hover:#f04438;--ddga-color-error-foreground:#0d121c;--ddga-color-success:#47cd89;--ddga-color-success-hover:#17b26a;--ddga-color-success-foreground:#0d121c;--ddga-color-warning:#fdb022;--ddga-color-warning-hover:#f79009;--ddga-color-warning-foreground:#0d121c;--ddga-color-info:#53b1fd;--ddga-color-info-hover:#2e90fa;--ddga-color-info-foreground:#0d121c;--ddga-color-ring:#54c08a;--ddga-text-primary:#fff;--ddga-text-secondary:#ffffffb3;--ddga-text-tertiary:#fff9;--ddga-text-placeholder:#6c737f;--ddga-shadow-sm:0 1px 2px 0 #0000004d;--ddga-shadow-md:0 4px 6px -1px #0006;--ddga-shadow-lg:0 10px 15px -3px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--ddga-font-ar);color:var(--ddga-color-foreground);background-color:var(--ddga-color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}svg{vertical-align:middle;display:block}}@layer ddga-components{.ddga-field{gap:var(--ddga-space-1);flex-direction:column;display:flex}.ddga-field__message{font-size:var(--ddga-font-size-sm);margin:0;line-height:1.4}.ddga-field__message--helper{color:var(--ddga-text-secondary)}.ddga-field__message--error{color:var(--ddga-color-error)}.ddga-button{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;border:1px solid #0000;font-family:inherit;line-height:1.6;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.ddga-button--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-button--primary:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-button--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-button--secondary:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-button--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-button--outline:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-button--destructive:hover:not(:disabled){background-color:var(--ddga-color-destructive-hover)}.ddga-button--sm{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-button--md{height:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-button--lg{height:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-button--icon{width:40px;height:40px;font-size:var(--ddga-font-size-base);padding:0}.ddga-button--icon-sm{width:28px;height:28px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--full-width{flex:1 0 100%;inline-size:100%}.ddga-button--loading{cursor:wait;position:relative}.ddga-button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ddga-button__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-button svg{flex-shrink:0;align-self:center}.ddga-spinner{flex-shrink:0;animation:.6s linear infinite ddga-spin}@keyframes ddga-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ddga-spinner{animation-duration:1.5s}.ddga-button{transition:none}}.ddga-button:disabled{opacity:.5;cursor:not-allowed}.ddga-button:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}[dir=rtl] .ddga-icon-flip{transform:scaleX(-1)}@media (forced-colors:active){.ddga-button{border:1px solid buttontext}.ddga-button:focus-visible{outline:2px solid highlight}.ddga-button:disabled{color:graytext;border-color:graytext}}.ddga-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);transition:border-color .15s,box-shadow .15s;display:flex}.ddga-input--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-input--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-input--lg{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-input__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-text-primary)}.ddga-input__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-text-primary)}.ddga-input__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-text-primary)}.ddga-input__adornment{max-block-size:100%;color:var(--ddga-text-tertiary);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-input__adornment svg{flex-shrink:0;align-self:center}.ddga-input:has(.ddga-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-input:has(.ddga-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-input--error{border-color:var(--ddga-color-error)}.ddga-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input:has(.ddga-input__field:disabled){opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-input:has(.ddga-input__field:disabled) .ddga-input__field{cursor:not-allowed}.ddga-input:has(.ddga-input__field:read-only:not(:disabled)){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-input{transition:none}}@media (forced-colors:active){.ddga-input{border:1px solid canvastext}.ddga-input:focus-within{outline:2px solid highlight}.ddga-input:has(.ddga-input__field:disabled){color:graytext;border-color:graytext}}.ddga-textarea__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-textarea__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-textarea{min-block-size:4.5rem;inline-size:100%;padding-block:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-family:inherit;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.ddga-textarea::placeholder{color:var(--ddga-text-placeholder)}.ddga-textarea:-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-text-primary)}.ddga-textarea:-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-text-primary)}.ddga-textarea:-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-text-primary)}.ddga-textarea--sm{padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-textarea--md{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-textarea--lg{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-textarea--resize-vertical{resize:vertical}.ddga-textarea--resize-none{resize:none}.ddga-textarea:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-textarea--error{border-color:var(--ddga-color-error)}.ddga-textarea--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none;background-color:var(--ddga-color-muted)}.ddga-textarea:read-only:not(:disabled){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-visible{outline:2px solid highlight}.ddga-textarea:disabled{color:graytext;border-color:graytext}}.ddga-checkbox-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-checkbox{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-color-primary-foreground);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ddga-checkbox--md{block-size:18px;inline-size:18px;font-size:14px}.ddga-checkbox--sm{block-size:16px;inline-size:16px;font-size:12px}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-checkbox:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-checkbox--error{border-color:var(--ddga-color-error)}.ddga-checkbox--error[data-state=checked],.ddga-checkbox--error[data-state=indeterminate]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-checkbox--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-checkbox:disabled{opacity:.5;cursor:not-allowed}.ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-checkbox__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-checkbox__check,.ddga-checkbox__minus{block-size:1em;inline-size:1em}.ddga-checkbox[data-state=checked] .ddga-checkbox__minus,.ddga-checkbox[data-state=indeterminate] .ddga-checkbox__check{display:none}.ddga-checkbox__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-checkbox__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-checkbox{transition:none}}@media (forced-colors:active){.ddga-checkbox{border:1px solid canvastext}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:canvastext}.ddga-checkbox__indicator{color:canvas}.ddga-checkbox:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-checkbox:disabled{color:graytext;border-color:graytext}}}
+@layer ddga-base{:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-sa-25:#f7fdf9;--ddga-sa-50:#f3fcf6;--ddga-sa-100:#dff6e7;--ddga-sa-200:#b8eacb;--ddga-sa-300:#88d8ad;--ddga-sa-400:#54c08a;--ddga-sa-500:#25935f;--ddga-sa-600:#1b8354;--ddga-sa-700:#166a45;--ddga-sa-800:#14573a;--ddga-sa-900:#104631;--ddga-sa-950:#092a1e;--ddga-gray-25:#fcfcfd;--ddga-gray-50:#f9fafb;--ddga-gray-100:#f3f4f6;--ddga-gray-200:#e5e7eb;--ddga-gray-300:#d2d6db;--ddga-gray-400:#9da4ae;--ddga-gray-500:#6c737f;--ddga-gray-600:#4d5761;--ddga-gray-700:#384250;--ddga-gray-800:#1f2a37;--ddga-gray-900:#111927;--ddga-gray-950:#0d121c;--ddga-error-25:#fffbfa;--ddga-error-50:#fef3f2;--ddga-error-100:#fee4e2;--ddga-error-200:#fecdca;--ddga-error-300:#fda29b;--ddga-error-400:#f97066;--ddga-error-500:#f04438;--ddga-error-600:#d92d20;--ddga-error-700:#b42318;--ddga-error-800:#912018;--ddga-error-900:#7a271a;--ddga-error-950:#55160c;--ddga-warning-25:#fffcf5;--ddga-warning-50:#fffaeb;--ddga-warning-100:#fef0c7;--ddga-warning-200:#fedf89;--ddga-warning-300:#fec84b;--ddga-warning-400:#fdb022;--ddga-warning-500:#f79009;--ddga-warning-600:#dc6803;--ddga-warning-700:#b54708;--ddga-warning-800:#93370d;--ddga-warning-900:#7a2e0e;--ddga-warning-950:#4e1d09;--ddga-success-25:#f6fef9;--ddga-success-50:#ecfdf3;--ddga-success-100:#dcfae6;--ddga-success-200:#abefc6;--ddga-success-300:#75e0a7;--ddga-success-400:#47cd89;--ddga-success-500:#17b26a;--ddga-success-600:#079455;--ddga-success-700:#067647;--ddga-success-800:#085d3a;--ddga-success-900:#074d31;--ddga-success-950:#053321;--ddga-info-25:#f5faff;--ddga-info-50:#eff8ff;--ddga-info-100:#d1e9ff;--ddga-info-200:#b2ddff;--ddga-info-300:#84caff;--ddga-info-400:#53b1fd;--ddga-info-500:#2e90fa;--ddga-info-600:#1570ef;--ddga-info-700:#175cd3;--ddga-info-800:#1849a9;--ddga-info-900:#194185;--ddga-info-950:#102a56;--ddga-gold-25:#fffef7;--ddga-gold-50:#fffef2;--ddga-gold-100:#fffce6;--ddga-gold-200:#fcf3bd;--ddga-gold-300:#fae996;--ddga-gold-400:#f7d54d;--ddga-gold-500:#f5bd02;--ddga-gold-600:#dba102;--ddga-gold-700:#b87b02;--ddga-gold-800:#945c01;--ddga-gold-900:#6e3c00;--ddga-gold-950:#472400;--ddga-lavender-25:#fefcff;--ddga-lavender-50:#f9f5fa;--ddga-lavender-100:#f2e9f5;--ddga-lavender-200:#e1cce8;--ddga-lavender-300:#ccadd9;--ddga-lavender-400:#a57bba;--ddga-lavender-500:#80519f;--ddga-lavender-600:#6d428f;--ddga-lavender-700:#532d75;--ddga-lavender-800:#3d1d5e;--ddga-lavender-900:#281047;--ddga-lavender-950:#16072e;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:#111927;--ddga-color-foreground:#f3f4f6;--ddga-color-muted:#1f2a37;--ddga-color-muted-foreground:#9da4ae;--ddga-color-border:#384250;--ddga-color-card:#1f2a37;--ddga-color-card-foreground:#f3f4f6;--ddga-color-input:#384250;--ddga-color-primary:#54c08a;--ddga-color-primary-hover:#88d8ad;--ddga-color-primary-active:#25935f;--ddga-color-primary-foreground:#0d121c;--ddga-color-secondary:#1f2a37;--ddga-color-secondary-hover:#384250;--ddga-color-secondary-foreground:#f3f4f6;--ddga-color-destructive:#f97066;--ddga-color-destructive-hover:#f04438;--ddga-color-destructive-foreground:#0d121c;--ddga-color-error:#f97066;--ddga-color-error-hover:#f04438;--ddga-color-error-foreground:#0d121c;--ddga-color-success:#47cd89;--ddga-color-success-hover:#17b26a;--ddga-color-success-foreground:#0d121c;--ddga-color-warning:#fdb022;--ddga-color-warning-hover:#f79009;--ddga-color-warning-foreground:#0d121c;--ddga-color-info:#53b1fd;--ddga-color-info-hover:#2e90fa;--ddga-color-info-foreground:#0d121c;--ddga-color-ring:#54c08a;--ddga-text-primary:#fff;--ddga-text-secondary:#ffffffb3;--ddga-text-tertiary:#fff9;--ddga-text-placeholder:#6c737f;--ddga-shadow-sm:0 1px 2px 0 #0000004d;--ddga-shadow-md:0 4px 6px -1px #0006;--ddga-shadow-lg:0 10px 15px -3px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--ddga-font-ar);color:var(--ddga-color-foreground);background-color:var(--ddga-color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}svg{vertical-align:middle;display:block}}@layer ddga-components{.ddga-field{gap:var(--ddga-space-1);flex-direction:column;display:flex}.ddga-field__message{font-size:var(--ddga-font-size-sm);margin:0;line-height:1.4}.ddga-field__message--helper{color:var(--ddga-text-secondary)}.ddga-field__message--error{color:var(--ddga-color-error)}.ddga-button{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;border:1px solid #0000;font-family:inherit;line-height:1.6;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.ddga-button--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-button--primary:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-button--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-button--secondary:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-button--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-button--outline:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-button--destructive:hover:not(:disabled){background-color:var(--ddga-color-destructive-hover)}.ddga-button--sm{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-button--md{height:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-button--lg{height:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-button--icon{width:40px;height:40px;font-size:var(--ddga-font-size-base);padding:0}.ddga-button--icon-sm{width:28px;height:28px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--full-width{flex:1 0 100%;inline-size:100%}.ddga-button--loading{cursor:wait;position:relative}.ddga-button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ddga-button__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-button svg{flex-shrink:0;align-self:center}.ddga-spinner{flex-shrink:0;animation:.6s linear infinite ddga-spin}@keyframes ddga-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ddga-spinner{animation-duration:1.5s}.ddga-button{transition:none}}.ddga-button:disabled{opacity:.5;cursor:not-allowed}.ddga-button:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}[dir=rtl] .ddga-icon-flip{transform:scaleX(-1)}@media (forced-colors:active){.ddga-button{border:1px solid buttontext}.ddga-button:focus-visible{outline:2px solid highlight}.ddga-button:disabled{color:graytext;border-color:graytext}}.ddga-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);transition:border-color .15s,box-shadow .15s;display:flex}.ddga-input--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-input--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-input--lg{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-input__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-text-primary)}.ddga-input__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-text-primary)}.ddga-input__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-text-primary)}.ddga-input__adornment{max-block-size:100%;color:var(--ddga-text-tertiary);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-input__adornment svg{flex-shrink:0;align-self:center}.ddga-input:has(.ddga-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-input:has(.ddga-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-input--error{border-color:var(--ddga-color-error)}.ddga-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input:has(.ddga-input__field:disabled){opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-input:has(.ddga-input__field:disabled) .ddga-input__field{cursor:not-allowed}.ddga-input:has(.ddga-input__field:read-only:not(:disabled)){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-input{transition:none}}@media (forced-colors:active){.ddga-input{border:1px solid canvastext}.ddga-input:focus-within{outline:2px solid highlight}.ddga-input:has(.ddga-input__field:disabled){color:graytext;border-color:graytext}}.ddga-textarea__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-textarea__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-textarea{min-block-size:4.5rem;inline-size:100%;padding-block:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-family:inherit;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.ddga-textarea::placeholder{color:var(--ddga-text-placeholder)}.ddga-textarea:-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-text-primary)}.ddga-textarea:-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-text-primary)}.ddga-textarea:-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-text-primary)}.ddga-textarea--sm{padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-textarea--md{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-textarea--lg{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-textarea--resize-vertical{resize:vertical}.ddga-textarea--resize-none{resize:none}.ddga-textarea:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-textarea--error{border-color:var(--ddga-color-error)}.ddga-textarea--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none;background-color:var(--ddga-color-muted)}.ddga-textarea:read-only:not(:disabled){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-visible{outline:2px solid highlight}.ddga-textarea:disabled{color:graytext;border-color:graytext}}.ddga-checkbox-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-checkbox{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-color-primary-foreground);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ddga-checkbox--md{block-size:18px;inline-size:18px;font-size:14px}.ddga-checkbox--sm{block-size:16px;inline-size:16px;font-size:12px}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-checkbox:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-checkbox--error{border-color:var(--ddga-color-error)}.ddga-checkbox--error[data-state=checked],.ddga-checkbox--error[data-state=indeterminate]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-checkbox--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-checkbox:disabled{opacity:.5;cursor:not-allowed}.ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-checkbox__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-checkbox__check,.ddga-checkbox__minus{block-size:1em;inline-size:1em}.ddga-checkbox[data-state=checked] .ddga-checkbox__minus,.ddga-checkbox[data-state=indeterminate] .ddga-checkbox__check{display:none}.ddga-checkbox__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-checkbox__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-checkbox{transition:none}}@media (forced-colors:active){.ddga-checkbox{border:1px solid canvastext}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:canvastext}.ddga-checkbox__indicator{color:canvas}.ddga-checkbox:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-checkbox:disabled{color:graytext;border-color:graytext}}}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +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":[]}
+{"version":3,"mappings":"AAAA,iBCAA,i8IICA,g1CHDA,0DAQA,2MAWA,yCFnBA,uBMKE,uEAMA,iFAMA,8DAIA,0DClBA,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,4DJ9LF,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,mFC1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DIpHF,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/reset.css","src/variables.css","src/components/input.css","src/components/textarea.css","src/components/field.css","src/components/button.css","src/components/checkbox.css","src/dark.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","*,\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",":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-sa-25: #F7FDF9;\n  --ddga-sa-50: #F3FCF6;\n  --ddga-sa-100: #DFF6E7;\n  --ddga-sa-200: #B8EACB;\n  --ddga-sa-300: #88D8AD;\n  --ddga-sa-400: #54C08A;\n  --ddga-sa-500: #25935F;\n  --ddga-sa-600: #1B8354;\n  --ddga-sa-700: #166A45;\n  --ddga-sa-800: #14573A;\n  --ddga-sa-900: #104631;\n  --ddga-sa-950: #092A1E;\n  --ddga-gray-25: #FCFCFD;\n  --ddga-gray-50: #F9FAFB;\n  --ddga-gray-100: #F3F4F6;\n  --ddga-gray-200: #E5E7EB;\n  --ddga-gray-300: #D2D6DB;\n  --ddga-gray-400: #9DA4AE;\n  --ddga-gray-500: #6C737F;\n  --ddga-gray-600: #4D5761;\n  --ddga-gray-700: #384250;\n  --ddga-gray-800: #1F2A37;\n  --ddga-gray-900: #111927;\n  --ddga-gray-950: #0D121C;\n  --ddga-error-25: #FFFBFA;\n  --ddga-error-50: #FEF3F2;\n  --ddga-error-100: #FEE4E2;\n  --ddga-error-200: #FECDCA;\n  --ddga-error-300: #FDA29B;\n  --ddga-error-400: #F97066;\n  --ddga-error-500: #F04438;\n  --ddga-error-600: #D92D20;\n  --ddga-error-700: #B42318;\n  --ddga-error-800: #912018;\n  --ddga-error-900: #7A271A;\n  --ddga-error-950: #55160C;\n  --ddga-warning-25: #FFFCF5;\n  --ddga-warning-50: #FFFAEB;\n  --ddga-warning-100: #FEF0C7;\n  --ddga-warning-200: #FEDF89;\n  --ddga-warning-300: #FEC84B;\n  --ddga-warning-400: #FDB022;\n  --ddga-warning-500: #F79009;\n  --ddga-warning-600: #DC6803;\n  --ddga-warning-700: #B54708;\n  --ddga-warning-800: #93370D;\n  --ddga-warning-900: #7A2E0E;\n  --ddga-warning-950: #4E1D09;\n  --ddga-success-25: #F6FEF9;\n  --ddga-success-50: #ECFDF3;\n  --ddga-success-100: #DCFAE6;\n  --ddga-success-200: #ABEFC6;\n  --ddga-success-300: #75E0A7;\n  --ddga-success-400: #47CD89;\n  --ddga-success-500: #17B26A;\n  --ddga-success-600: #079455;\n  --ddga-success-700: #067647;\n  --ddga-success-800: #085D3A;\n  --ddga-success-900: #074D31;\n  --ddga-success-950: #053321;\n  --ddga-info-25: #F5FAFF;\n  --ddga-info-50: #EFF8FF;\n  --ddga-info-100: #D1E9FF;\n  --ddga-info-200: #B2DDFF;\n  --ddga-info-300: #84CAFF;\n  --ddga-info-400: #53B1FD;\n  --ddga-info-500: #2E90FA;\n  --ddga-info-600: #1570EF;\n  --ddga-info-700: #175CD3;\n  --ddga-info-800: #1849A9;\n  --ddga-info-900: #194185;\n  --ddga-info-950: #102A56;\n  --ddga-gold-25: #FFFEF7;\n  --ddga-gold-50: #FFFEF2;\n  --ddga-gold-100: #FFFCE6;\n  --ddga-gold-200: #FCF3BD;\n  --ddga-gold-300: #FAE996;\n  --ddga-gold-400: #F7D54D;\n  --ddga-gold-500: #F5BD02;\n  --ddga-gold-600: #DBA102;\n  --ddga-gold-700: #B87B02;\n  --ddga-gold-800: #945C01;\n  --ddga-gold-900: #6E3C00;\n  --ddga-gold-950: #472400;\n  --ddga-lavender-25: #FEFCFF;\n  --ddga-lavender-50: #F9F5FA;\n  --ddga-lavender-100: #F2E9F5;\n  --ddga-lavender-200: #E1CCE8;\n  --ddga-lavender-300: #CCADD9;\n  --ddga-lavender-400: #A57BBA;\n  --ddga-lavender-500: #80519F;\n  --ddga-lavender-600: #6D428F;\n  --ddga-lavender-700: #532D75;\n  --ddga-lavender-800: #3D1D5E;\n  --ddga-lavender-900: #281047;\n  --ddga-lavender-950: #16072E;\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  /* 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  /* 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","@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","@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","/* 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"],"names":[]}

package/dist/variables.css

@@ -1,2 +1,2 @@
-:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}
+:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-sa-25:#f7fdf9;--ddga-sa-50:#f3fcf6;--ddga-sa-100:#dff6e7;--ddga-sa-200:#b8eacb;--ddga-sa-300:#88d8ad;--ddga-sa-400:#54c08a;--ddga-sa-500:#25935f;--ddga-sa-600:#1b8354;--ddga-sa-700:#166a45;--ddga-sa-800:#14573a;--ddga-sa-900:#104631;--ddga-sa-950:#092a1e;--ddga-gray-25:#fcfcfd;--ddga-gray-50:#f9fafb;--ddga-gray-100:#f3f4f6;--ddga-gray-200:#e5e7eb;--ddga-gray-300:#d2d6db;--ddga-gray-400:#9da4ae;--ddga-gray-500:#6c737f;--ddga-gray-600:#4d5761;--ddga-gray-700:#384250;--ddga-gray-800:#1f2a37;--ddga-gray-900:#111927;--ddga-gray-950:#0d121c;--ddga-error-25:#fffbfa;--ddga-error-50:#fef3f2;--ddga-error-100:#fee4e2;--ddga-error-200:#fecdca;--ddga-error-300:#fda29b;--ddga-error-400:#f97066;--ddga-error-500:#f04438;--ddga-error-600:#d92d20;--ddga-error-700:#b42318;--ddga-error-800:#912018;--ddga-error-900:#7a271a;--ddga-error-950:#55160c;--ddga-warning-25:#fffcf5;--ddga-warning-50:#fffaeb;--ddga-warning-100:#fef0c7;--ddga-warning-200:#fedf89;--ddga-warning-300:#fec84b;--ddga-warning-400:#fdb022;--ddga-warning-500:#f79009;--ddga-warning-600:#dc6803;--ddga-warning-700:#b54708;--ddga-warning-800:#93370d;--ddga-warning-900:#7a2e0e;--ddga-warning-950:#4e1d09;--ddga-success-25:#f6fef9;--ddga-success-50:#ecfdf3;--ddga-success-100:#dcfae6;--ddga-success-200:#abefc6;--ddga-success-300:#75e0a7;--ddga-success-400:#47cd89;--ddga-success-500:#17b26a;--ddga-success-600:#079455;--ddga-success-700:#067647;--ddga-success-800:#085d3a;--ddga-success-900:#074d31;--ddga-success-950:#053321;--ddga-info-25:#f5faff;--ddga-info-50:#eff8ff;--ddga-info-100:#d1e9ff;--ddga-info-200:#b2ddff;--ddga-info-300:#84caff;--ddga-info-400:#53b1fd;--ddga-info-500:#2e90fa;--ddga-info-600:#1570ef;--ddga-info-700:#175cd3;--ddga-info-800:#1849a9;--ddga-info-900:#194185;--ddga-info-950:#102a56;--ddga-gold-25:#fffef7;--ddga-gold-50:#fffef2;--ddga-gold-100:#fffce6;--ddga-gold-200:#fcf3bd;--ddga-gold-300:#fae996;--ddga-gold-400:#f7d54d;--ddga-gold-500:#f5bd02;--ddga-gold-600:#dba102;--ddga-gold-700:#b87b02;--ddga-gold-800:#945c01;--ddga-gold-900:#6e3c00;--ddga-gold-950:#472400;--ddga-lavender-25:#fefcff;--ddga-lavender-50:#f9f5fa;--ddga-lavender-100:#f2e9f5;--ddga-lavender-200:#e1cce8;--ddga-lavender-300:#ccadd9;--ddga-lavender-400:#a57bba;--ddga-lavender-500:#80519f;--ddga-lavender-600:#6d428f;--ddga-lavender-700:#532d75;--ddga-lavender-800:#3d1d5e;--ddga-lavender-900:#281047;--ddga-lavender-950:#16072e;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}
 /*# sourceMappingURL=variables.css.map */

package/dist/variables.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA","sources":["src/variables.css"],"sourcesContent":[":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":[]}
+{"version":3,"mappings":"AAAA","sources":["src/variables.css"],"sourcesContent":[":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-sa-25: #F7FDF9;\n  --ddga-sa-50: #F3FCF6;\n  --ddga-sa-100: #DFF6E7;\n  --ddga-sa-200: #B8EACB;\n  --ddga-sa-300: #88D8AD;\n  --ddga-sa-400: #54C08A;\n  --ddga-sa-500: #25935F;\n  --ddga-sa-600: #1B8354;\n  --ddga-sa-700: #166A45;\n  --ddga-sa-800: #14573A;\n  --ddga-sa-900: #104631;\n  --ddga-sa-950: #092A1E;\n  --ddga-gray-25: #FCFCFD;\n  --ddga-gray-50: #F9FAFB;\n  --ddga-gray-100: #F3F4F6;\n  --ddga-gray-200: #E5E7EB;\n  --ddga-gray-300: #D2D6DB;\n  --ddga-gray-400: #9DA4AE;\n  --ddga-gray-500: #6C737F;\n  --ddga-gray-600: #4D5761;\n  --ddga-gray-700: #384250;\n  --ddga-gray-800: #1F2A37;\n  --ddga-gray-900: #111927;\n  --ddga-gray-950: #0D121C;\n  --ddga-error-25: #FFFBFA;\n  --ddga-error-50: #FEF3F2;\n  --ddga-error-100: #FEE4E2;\n  --ddga-error-200: #FECDCA;\n  --ddga-error-300: #FDA29B;\n  --ddga-error-400: #F97066;\n  --ddga-error-500: #F04438;\n  --ddga-error-600: #D92D20;\n  --ddga-error-700: #B42318;\n  --ddga-error-800: #912018;\n  --ddga-error-900: #7A271A;\n  --ddga-error-950: #55160C;\n  --ddga-warning-25: #FFFCF5;\n  --ddga-warning-50: #FFFAEB;\n  --ddga-warning-100: #FEF0C7;\n  --ddga-warning-200: #FEDF89;\n  --ddga-warning-300: #FEC84B;\n  --ddga-warning-400: #FDB022;\n  --ddga-warning-500: #F79009;\n  --ddga-warning-600: #DC6803;\n  --ddga-warning-700: #B54708;\n  --ddga-warning-800: #93370D;\n  --ddga-warning-900: #7A2E0E;\n  --ddga-warning-950: #4E1D09;\n  --ddga-success-25: #F6FEF9;\n  --ddga-success-50: #ECFDF3;\n  --ddga-success-100: #DCFAE6;\n  --ddga-success-200: #ABEFC6;\n  --ddga-success-300: #75E0A7;\n  --ddga-success-400: #47CD89;\n  --ddga-success-500: #17B26A;\n  --ddga-success-600: #079455;\n  --ddga-success-700: #067647;\n  --ddga-success-800: #085D3A;\n  --ddga-success-900: #074D31;\n  --ddga-success-950: #053321;\n  --ddga-info-25: #F5FAFF;\n  --ddga-info-50: #EFF8FF;\n  --ddga-info-100: #D1E9FF;\n  --ddga-info-200: #B2DDFF;\n  --ddga-info-300: #84CAFF;\n  --ddga-info-400: #53B1FD;\n  --ddga-info-500: #2E90FA;\n  --ddga-info-600: #1570EF;\n  --ddga-info-700: #175CD3;\n  --ddga-info-800: #1849A9;\n  --ddga-info-900: #194185;\n  --ddga-info-950: #102A56;\n  --ddga-gold-25: #FFFEF7;\n  --ddga-gold-50: #FFFEF2;\n  --ddga-gold-100: #FFFCE6;\n  --ddga-gold-200: #FCF3BD;\n  --ddga-gold-300: #FAE996;\n  --ddga-gold-400: #F7D54D;\n  --ddga-gold-500: #F5BD02;\n  --ddga-gold-600: #DBA102;\n  --ddga-gold-700: #B87B02;\n  --ddga-gold-800: #945C01;\n  --ddga-gold-900: #6E3C00;\n  --ddga-gold-950: #472400;\n  --ddga-lavender-25: #FEFCFF;\n  --ddga-lavender-50: #F9F5FA;\n  --ddga-lavender-100: #F2E9F5;\n  --ddga-lavender-200: #E1CCE8;\n  --ddga-lavender-300: #CCADD9;\n  --ddga-lavender-400: #A57BBA;\n  --ddga-lavender-500: #80519F;\n  --ddga-lavender-600: #6D428F;\n  --ddga-lavender-700: #532D75;\n  --ddga-lavender-800: #3D1D5E;\n  --ddga-lavender-900: #281047;\n  --ddga-lavender-950: #16072E;\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":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dev-dga/css",
-  "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.",
+  "version": "0.2.0",
+  "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",
@@ -26,7 +26,8 @@
     "*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "CHANGELOG.md"
   ],
   "exports": {
     ".": {
@@ -43,7 +44,7 @@
   },
   "devDependencies": {
     "lightningcss-cli": "^1.30.1",
-    "@dev-dga/tokens": "0.1.1"
+    "@dev-dga/tokens": "0.2.0"
   },
   "scripts": {
     "build": "node scripts/build.js",