@dev-dga/css 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @dev-dga/css
 
+## 0.3.0
+
+### Minor Changes
+
+- **New `themes.css` — 8 palette-based theme classes.** Generated alongside `variables.css`, contains `.ddga-theme-{saGreen,gray,error,warning,success,info,gold,lavender}` blocks that remap `--ddga-color-primary` (and its `-hover` / `-active` / `-foreground` derivatives, plus `--ddga-color-ring`) to the corresponding palette scale. Apply via the `theme` prop on `<DgaProvider>` (which uses `buildTheme()` from `@dev-dga/tokens`) or by adding the class directly to any element. Imported automatically through `@dev-dga/css`; also exposed at the `@dev-dga/css/themes.css` subpath.
+
+- **Per-component CSS for the three new React components and the shared field primitive.** Ships:
+  - `components/field.css` — shared `.ddga-field` wrapper + `.ddga-field__message` for helper / error text, the styling foundation for every form-control component (and any custom field built on the public `useFieldA11y` + `FieldMessage` primitives in `@dev-dga/react`).
+  - `components/radio.css` — Radix RadioGroup wrapper + per-item circle, dot, focus ring, error state. Size + error cascade from the group via descendant selectors.
+  - `components/switch.css` — pill track + traveling thumb. Size encoded as `--ddga-switch-thumb-travel` so the thumb rule is size-agnostic. RTL flip via `[dir='rtl']` (not `:dir()`) for the Safari 16.2 floor below.
+  - `components/select.css` — trigger sized to match `Input` (32/36), chevron rotates 180° when open, content panel sized via `--radix-select-trigger-width`, item highlight via `data-highlighted`, checkmark indicator via `data-state='checked'`.
+
+- **Button supports `asChild` composition.** `:disabled` and `:hover:not(:disabled)` selectors now also match `[aria-disabled='true']` (and `:not([aria-disabled='true'])` on hover). This lets `@dev-dga/react`'s Button render as `<a>` or any consumer element (router-link composition) and still get the visual disabled state — native `:disabled` doesn't apply on non-form-controls.
+
+- **Safari support floor raised to 16.2** (`packages/css/scripts/build.js`) so the generated CSS can use `color-mix()` for the single-hex theming path in `@dev-dga/tokens`'s `buildTheme()`. RTL-flip logic in Switch deliberately stays on `[dir='rtl']` selectors rather than `:dir()` because `:dir()` landed in Safari 16.4.
+
+### Patch Changes
+
+- **Switch thumb now visible in dark mode.** The default thumb color is `--ddga-color-background`, which is near-white in light mode (visible against the gray-300 track) but flips to `#111927` in dark mode — darker than the off-state track (`--ddga-color-input = #384250`), so the thumb disappeared. Added a `[data-theme='dark'] .ddga-switch__thumb` override (near-white) so the puck reads as a raised surface in both modes. Co-located in `switch.css`; `dark.css` stays reserved for semantic token remapping.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/components/alert.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-alert{--ddga-alert-accent:var(--ddga-color-info);--ddga-alert-bg:var(--ddga-info-100);--ddga-alert-fg:var(--ddga-info-700);align-items:flex-start;gap:var(--ddga-space-3);padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);border-radius:var(--ddga-radius-md);background-color:var(--ddga-alert-bg);color:var(--ddga-alert-fg);border:1px solid #0000;font-family:inherit;line-height:1.5;display:flex}.ddga-alert--info{--ddga-alert-accent:var(--ddga-color-info);--ddga-alert-bg:var(--ddga-info-100);--ddga-alert-fg:var(--ddga-info-700)}.ddga-alert--success{--ddga-alert-accent:var(--ddga-color-success);--ddga-alert-bg:var(--ddga-success-100);--ddga-alert-fg:var(--ddga-success-700)}.ddga-alert--warning{--ddga-alert-accent:var(--ddga-color-warning);--ddga-alert-bg:var(--ddga-warning-100);--ddga-alert-fg:var(--ddga-warning-700)}.ddga-alert--destructive{--ddga-alert-accent:var(--ddga-color-destructive);--ddga-alert-bg:var(--ddga-error-100);--ddga-alert-fg:var(--ddga-error-700)}.ddga-alert__icon{block-size:1.25em;inline-size:1.25em;color:var(--ddga-alert-accent);flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;display:inline-flex}.ddga-alert__icon>svg{block-size:100%;inline-size:100%}.ddga-alert__body{gap:var(--ddga-space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}.ddga-alert__title{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:inherit;margin:0;line-height:1.4}.ddga-alert__description{font-size:var(--ddga-font-size-sm);color:inherit;opacity:.9;margin:0;line-height:1.5}.ddga-alert__close{block-size:1.5rem;inline-size:1.5rem;color:inherit;cursor:pointer;border-radius:var(--ddga-radius-sm);opacity:.7;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;padding:0;transition:opacity .15s,background-color .15s;display:inline-flex}.ddga-alert__close>svg{block-size:1em;inline-size:1em}.ddga-alert__close:hover{opacity:1;background-color:#0000000f}.ddga-alert__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-alert-accent);opacity:1;outline:none}[data-theme=dark] .ddga-alert--info{--ddga-alert-bg:#1570ef29;--ddga-alert-fg:var(--ddga-info-200,#b2ddff)}[data-theme=dark] .ddga-alert--success{--ddga-alert-bg:#0794552e;--ddga-alert-fg:var(--ddga-success-200,#abefc6)}[data-theme=dark] .ddga-alert--warning{--ddga-alert-bg:#dc68032e;--ddga-alert-fg:var(--ddga-warning-200,#fedf89)}[data-theme=dark] .ddga-alert--destructive{--ddga-alert-bg:#d92d202e;--ddga-alert-fg:var(--ddga-error-200,#fecdca)}[data-theme=dark] .ddga-alert__close:hover{background-color:#ffffff14}@media (forced-colors:active){.ddga-alert{border-color:canvastext}.ddga-alert__close:focus-visible{box-shadow:none;outline:2px solid highlight}}}
+/*# sourceMappingURL=alert.css.map */

package/dist/components/alert.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,kaAsBA,uIAMA,mJAMA,mJAMA,uJAQA,4LAYA,uDAOA,sGAQA,0IAQA,8GAWA,0TAoBA,sDAIA,8DAIA,sGAUA,2GAIA,iHAIA,iHAIA,mHAIA,sEAMA,8BACE,oCAGA","sources":["src/components/alert.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-alert {\n    /* Each variant overrides --accent (icon + border) and --bg / --fg below.\n       Centralizing this in vars makes per-instance recoloring trivial. */\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-alert-bg);\n    color: var(--ddga-alert-fg);\n    font-family: inherit;\n    line-height: 1.5;\n  }\n\n  /* ─── Variants (tonal, matching Badge subtle family) ─── */\n\n  .ddga-alert--info {\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n  }\n\n  .ddga-alert--success {\n    --ddga-alert-accent: var(--ddga-color-success);\n    --ddga-alert-bg: var(--ddga-success-100);\n    --ddga-alert-fg: var(--ddga-success-700);\n  }\n\n  .ddga-alert--warning {\n    --ddga-alert-accent: var(--ddga-color-warning);\n    --ddga-alert-bg: var(--ddga-warning-100);\n    --ddga-alert-fg: var(--ddga-warning-700);\n  }\n\n  .ddga-alert--destructive {\n    --ddga-alert-accent: var(--ddga-color-destructive);\n    --ddga-alert-bg: var(--ddga-error-100);\n    --ddga-alert-fg: var(--ddga-error-700);\n  }\n\n  /* ─── Icon ─── */\n\n  .ddga-alert__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-alert-accent);\n    /* Nudge the icon to optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n\n  .ddga-alert__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description container) ─── */\n\n  .ddga-alert__body {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-alert__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: inherit;\n  }\n\n  .ddga-alert__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: inherit;\n    /* Slight dimming for hierarchy under the title; works for both light + dark. */\n    opacity: 0.9;\n  }\n\n  /* ─── Close button ─── */\n\n  .ddga-alert__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n    /* Optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-alert__close > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-alert__close:hover {\n    opacity: 1;\n    background-color: rgb(0 0 0 / 0.06);\n  }\n  .ddga-alert__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-alert-accent);\n    opacity: 1;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The -100 tonal pairs are quite light against a dark page bg — bump the\n     destructive/warning shades and recolor the foreground for legibility. */\n\n  [data-theme='dark'] .ddga-alert--info {\n    --ddga-alert-bg: rgb(21 112 239 / 0.16);\n    --ddga-alert-fg: var(--ddga-info-200, #b2ddff);\n  }\n  [data-theme='dark'] .ddga-alert--success {\n    --ddga-alert-bg: rgb(7 148 85 / 0.18);\n    --ddga-alert-fg: var(--ddga-success-200, #abefc6);\n  }\n  [data-theme='dark'] .ddga-alert--warning {\n    --ddga-alert-bg: rgb(220 104 3 / 0.18);\n    --ddga-alert-fg: var(--ddga-warning-200, #fedf89);\n  }\n  [data-theme='dark'] .ddga-alert--destructive {\n    --ddga-alert-bg: rgb(217 45 32 / 0.18);\n    --ddga-alert-fg: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-alert__close:hover {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-alert {\n      border-color: CanvasText;\n    }\n    .ddga-alert__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/avatar.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-avatar{--ddga-avatar-size:40px;inline-size:var(--ddga-avatar-size);block-size:var(--ddga-avatar-size);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:calc(var(--ddga-avatar-size) * .4);font-weight:var(--ddga-font-weight-medium);vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.ddga-avatar--xs{--ddga-avatar-size:24px}.ddga-avatar--sm{--ddga-avatar-size:32px}.ddga-avatar--md{--ddga-avatar-size:40px}.ddga-avatar--lg{--ddga-avatar-size:48px}.ddga-avatar--xl{--ddga-avatar-size:64px}.ddga-avatar--circle{border-radius:var(--ddga-radius-full)}.ddga-avatar--square{border-radius:var(--ddga-radius-md)}.ddga-avatar__image,.ddga-avatar__fallback{border-radius:inherit;block-size:100%;inline-size:100%}.ddga-avatar__image{object-fit:cover}.ddga-avatar__fallback{background-color:inherit;color:inherit;font-size:inherit;font-weight:inherit;text-transform:uppercase;justify-content:center;align-items:center;display:flex}.ddga-avatar__fallback--default{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-avatar__fallback--primary{background-color:var(--ddga-sa-100);color:var(--ddga-sa-800)}.ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-200);color:var(--ddga-gray-800)}.ddga-avatar__fallback--success{background-color:var(--ddga-success-100);color:var(--ddga-success-700)}.ddga-avatar__fallback--warning{background-color:var(--ddga-warning-100);color:var(--ddga-warning-700)}.ddga-avatar__fallback--destructive{background-color:var(--ddga-error-100);color:var(--ddga-error-700)}.ddga-avatar__fallback--info{background-color:var(--ddga-info-100);color:var(--ddga-info-700)}.ddga-avatar__status{inline-size:calc(var(--ddga-avatar-size) * .25);block-size:calc(var(--ddga-avatar-size) * .25);border-radius:var(--ddga-radius-full);min-block-size:8px;min-inline-size:8px;box-shadow:0 0 0 2px var(--ddga-color-background);position:absolute;inset-block-end:0;inset-inline-end:0}.ddga-avatar__status--online{background-color:var(--ddga-color-success)}.ddga-avatar__status--busy{background-color:var(--ddga-color-destructive)}.ddga-avatar__status--away{background-color:var(--ddga-color-warning)}.ddga-avatar__status--offline{background-color:var(--ddga-gray-400)}.ddga-avatar--square .ddga-avatar__status{inset-block-end:2px;inset-inline-end:2px}.ddga-avatar-group{align-items:center;display:inline-flex}.ddga-avatar-group>.ddga-avatar{box-shadow:0 0 0 2px var(--ddga-color-background);margin-inline-start:calc(var(--ddga-avatar-size) * -.25)}.ddga-avatar-group>.ddga-avatar:first-child{margin-inline-start:0}@media (forced-colors:active){.ddga-avatar,.ddga-avatar__status{border:1px solid canvastext}}}
+/*# sourceMappingURL=avatar.css.map */

package/dist/components/avatar.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAMA,8BACE","sources":["src/components/avatar.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Root ─── */\n\n  .ddga-avatar {\n    --ddga-avatar-size: 40px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: var(--ddga-avatar-size);\n    block-size: var(--ddga-avatar-size);\n    /* Don't clip the status dot — it's positioned half-outside the root. */\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-secondary);\n    /* Font sizing tracks the avatar size so fallback initials scale naturally. */\n    font-size: calc(var(--ddga-avatar-size) * 0.4);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    vertical-align: middle;\n  }\n\n  /* ─── Sizes (drive both the box + the fallback font via the var) ─── */\n\n  .ddga-avatar--xs {\n    --ddga-avatar-size: 24px;\n  }\n  .ddga-avatar--sm {\n    --ddga-avatar-size: 32px;\n  }\n  .ddga-avatar--md {\n    --ddga-avatar-size: 40px;\n  }\n  .ddga-avatar--lg {\n    --ddga-avatar-size: 48px;\n  }\n  .ddga-avatar--xl {\n    --ddga-avatar-size: 64px;\n  }\n\n  /* ─── Shapes ─── */\n\n  .ddga-avatar--circle {\n    border-radius: var(--ddga-radius-full);\n  }\n\n  .ddga-avatar--square {\n    border-radius: var(--ddga-radius-md);\n  }\n\n  /* ─── Image / Fallback (clip to the root's shape) ─── */\n\n  .ddga-avatar__image,\n  .ddga-avatar__fallback {\n    inline-size: 100%;\n    block-size: 100%;\n    border-radius: inherit;\n  }\n\n  .ddga-avatar__image {\n    object-fit: cover;\n  }\n\n  .ddga-avatar__fallback {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: inherit;\n    color: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    text-transform: uppercase;\n  }\n\n  /* Tonal color schemes — useful for distinguishing avatars by team/role/\n     status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n     scale as Badge subtle variants, so the family reads consistently. */\n  .ddga-avatar__fallback--default {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n  .ddga-avatar__fallback--primary {\n    background-color: var(--ddga-sa-100);\n    color: var(--ddga-sa-800);\n  }\n  .ddga-avatar__fallback--secondary {\n    background-color: var(--ddga-gray-200);\n    color: var(--ddga-gray-800);\n  }\n  .ddga-avatar__fallback--success {\n    background-color: var(--ddga-success-100);\n    color: var(--ddga-success-700);\n  }\n  .ddga-avatar__fallback--warning {\n    background-color: var(--ddga-warning-100);\n    color: var(--ddga-warning-700);\n  }\n  .ddga-avatar__fallback--destructive {\n    background-color: var(--ddga-error-100);\n    color: var(--ddga-error-700);\n  }\n  .ddga-avatar__fallback--info {\n    background-color: var(--ddga-info-100);\n    color: var(--ddga-info-700);\n  }\n\n  /* ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── */\n\n  .ddga-avatar__status {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inline-size: calc(var(--ddga-avatar-size) * 0.25);\n    block-size: calc(var(--ddga-avatar-size) * 0.25);\n    min-inline-size: 8px;\n    min-block-size: 8px;\n    border-radius: var(--ddga-radius-full);\n    /* Cuts a \"ring\" out of the avatar so the dot reads as separate. */\n    box-shadow: 0 0 0 2px var(--ddga-color-background);\n  }\n\n  .ddga-avatar__status--online {\n    background-color: var(--ddga-color-success);\n  }\n  .ddga-avatar__status--busy {\n    background-color: var(--ddga-color-destructive);\n  }\n  .ddga-avatar__status--away {\n    background-color: var(--ddga-color-warning);\n  }\n  .ddga-avatar__status--offline {\n    background-color: var(--ddga-gray-400);\n  }\n\n  /* Square avatars: tuck the status into the corner instead of overhanging,\n     because a square corner doesn't disguise the overhang the way a circle does. */\n  .ddga-avatar--square .ddga-avatar__status {\n    inset-block-end: 2px;\n    inset-inline-end: 2px;\n  }\n\n  /* ─── Group ─── */\n\n  .ddga-avatar-group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .ddga-avatar-group > .ddga-avatar {\n    /* Each subsequent avatar tucks under the previous one. Logical margin\n       so stacking flips correctly in RTL. */\n    margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\n    /* Ring around each so they read as separate even when overlapping. */\n    box-shadow: 0 0 0 2px var(--ddga-color-background);\n  }\n  .ddga-avatar-group > .ddga-avatar:first-child {\n    margin-inline-start: 0;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-avatar {\n      border: 1px solid CanvasText;\n    }\n    .ddga-avatar__status {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/badge.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-badge{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-full);font-weight:var(--ddga-font-weight-medium);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;font-family:inherit;line-height:1.4;display:inline-flex}.ddga-badge--sm{height:20px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-badge--md{height:24px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-badge--default{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-badge--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-badge--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-badge--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-badge--success{background-color:var(--ddga-color-success);color:var(--ddga-color-success-foreground)}.ddga-badge--warning{background-color:var(--ddga-color-warning);color:var(--ddga-color-warning-foreground)}.ddga-badge--info{background-color:var(--ddga-color-info);color:var(--ddga-color-info-foreground)}.ddga-badge--primary-subtle{background-color:var(--ddga-sa-100);color:var(--ddga-sa-800)}.ddga-badge--secondary-subtle{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-badge--destructive-subtle{background-color:var(--ddga-error-100);color:var(--ddga-error-700)}.ddga-badge--success-subtle{background-color:var(--ddga-success-100);color:var(--ddga-success-700)}.ddga-badge--warning-subtle{background-color:var(--ddga-warning-100);color:var(--ddga-warning-700)}.ddga-badge--info-subtle{background-color:var(--ddga-info-100);color:var(--ddga-info-700)}.ddga-badge--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-badge__dot{border-radius:var(--ddga-radius-full);background-color:currentColor;flex-shrink:0;block-size:.5em;inline-size:.5em}.ddga-badge__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-badge__icon>svg,.ddga-badge>svg{width:.875em;height:.875em;display:block}.ddga-badge svg{flex-shrink:0;align-self:center}@media (forced-colors:active){.ddga-badge{border:1px solid canvastext}}}
+/*# sourceMappingURL=badge.css.map */

package/dist/components/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,8BACE","sources":["src/components/badge.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-badge {\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-full);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.4;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-badge--sm {\n    height: 20px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-badge--md {\n    height: 24px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Solid variants ─── */\n\n  .ddga-badge--default {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n\n  .ddga-badge--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  .ddga-badge--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n\n  .ddga-badge--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n\n  .ddga-badge--success {\n    background-color: var(--ddga-color-success);\n    color: var(--ddga-color-success-foreground);\n  }\n\n  .ddga-badge--warning {\n    background-color: var(--ddga-color-warning);\n    color: var(--ddga-color-warning-foreground);\n  }\n\n  .ddga-badge--info {\n    background-color: var(--ddga-color-info);\n    color: var(--ddga-color-info-foreground);\n  }\n\n  /* ─── Subtle (tonal) variants ─── */\n\n  .ddga-badge--primary-subtle {\n    background-color: var(--ddga-sa-100);\n    color: var(--ddga-sa-800);\n  }\n\n  .ddga-badge--secondary-subtle {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n\n  .ddga-badge--destructive-subtle {\n    background-color: var(--ddga-error-100);\n    color: var(--ddga-error-700);\n  }\n\n  .ddga-badge--success-subtle {\n    background-color: var(--ddga-success-100);\n    color: var(--ddga-success-700);\n  }\n\n  .ddga-badge--warning-subtle {\n    background-color: var(--ddga-warning-100);\n    color: var(--ddga-warning-700);\n  }\n\n  .ddga-badge--info-subtle {\n    background-color: var(--ddga-info-100);\n    color: var(--ddga-info-700);\n  }\n\n  /* ─── Outline ─── */\n\n  .ddga-badge--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n\n  /* ─── Dot ─── */\n\n  .ddga-badge__dot {\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: var(--ddga-radius-full);\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  /* ─── Icons inside badge ─── */\n\n  .ddga-badge__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .ddga-badge__icon > svg,\n  .ddga-badge > svg {\n    width: 0.875em;\n    height: 0.875em;\n    display: block;\n  }\n\n  .ddga-badge svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-badge {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/button.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.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}}}
+@layer ddga-components{.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):not([aria-disabled=true]){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):not([aria-disabled=true]){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):not([aria-disabled=true]){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled):not([aria-disabled=true]){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):not([aria-disabled=true]){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,.ddga-button[aria-disabled=true]{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,.ddga-button[aria-disabled=true]{color:graytext;border-color:graytext}}}
 /*# sourceMappingURL=button.css.map */

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,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BASF,qFAMA,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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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  /* Match `:disabled` (native button) and `[aria-disabled='true']` (asChild\n     mode rendered as <a> or similar where native `disabled` has no effect). */\n  .ddga-button:disabled,\n  .ddga-button[aria-disabled='true'] {\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    .ddga-button[aria-disabled='true'] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/card.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-card{--ddga-card-padding:var(--ddga-space-5);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border-radius:var(--ddga-radius-md);transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;overflow:hidden}.ddga-card--vertical{flex-direction:column}.ddga-card--horizontal{flex-direction:row}.ddga-card--default{border:1px solid var(--ddga-color-border)}.ddga-card--outline{border:1px solid var(--ddga-color-border);background-color:#0000}.ddga-card--elevated{box-shadow:var(--ddga-shadow-md);border:1px solid #0000}.ddga-card--filled{background-color:var(--ddga-color-muted);border:1px solid #0000}.ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));color:var(--ddga-color-primary-foreground);border:1px solid #0000}.ddga-card--gradient .ddga-card__title,.ddga-card--gradient .ddga-card__description{color:inherit}.ddga-card--gradient .ddga-card__description{opacity:.85}.ddga-card--gradient .ddga-card__footer{border-block-start-color:#ffffff26}.ddga-card--ghost{background-color:#0000;border:1px solid #0000}.ddga-card--ghost .ddga-card__footer{border-block-start-color:#0000}.ddga-card--padding-sm{--ddga-card-padding:var(--ddga-space-3)}.ddga-card--padding-md{--ddga-card-padding:var(--ddga-space-5)}.ddga-card--padding-lg{--ddga-card-padding:var(--ddga-space-6)}.ddga-card--interactive{cursor:pointer}.ddga-card--interactive:hover{border-color:var(--ddga-color-input);box-shadow:var(--ddga-shadow-md)}.ddga-card--interactive.ddga-card--elevated:hover,.ddga-card--interactive.ddga-card--gradient:hover{box-shadow:var(--ddga-shadow-lg)}.ddga-card--interactive:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-card__image{object-fit:cover;block-size:auto;inline-size:100%;aspect-ratio:var(--ddga-card-image-aspect,16 / 9);display:block}.ddga-card--horizontal>.ddga-card__image{aspect-ratio:auto;flex-shrink:0;align-self:stretch;block-size:auto;inline-size:40%;max-inline-size:240px}.ddga-card--horizontal>:not(.ddga-card__image){flex:auto}.ddga-card--horizontal>.ddga-card__header+.ddga-card__content{padding-top:0}.ddga-card__header{gap:var(--ddga-space-1);padding:var(--ddga-card-padding);flex-direction:column;display:flex}.ddga-card__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;line-height:1.4}.ddga-card__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-card__content{padding:var(--ddga-card-padding)}.ddga-card__header+.ddga-card__content{padding-top:0}.ddga-card__footer{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-card-padding);border-top:1px solid var(--ddga-color-border);display:flex}.ddga-card__footer:first-child{border-top:0}@media (prefers-reduced-motion:reduce){.ddga-card{transition:none}}[data-theme=dark] .ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600))}}
+/*# sourceMappingURL=card.css.map */

package/dist/components/card.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,kGAIA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,4EAMA,+GAOA,0JAQA,qHAOA,qDAMA,qDAWA,0JASA,4CAMA,uCACE,4BAOF","sources":["src/components/card.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-card {\n    /* Single hook drives all section padding. Variants below redefine it. */\n    --ddga-card-padding: var(--ddga-space-5);\n    display: flex;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border-radius: var(--ddga-radius-md);\n    overflow: hidden;\n    transition:\n      box-shadow 150ms ease,\n      transform 150ms ease,\n      border-color 150ms ease;\n  }\n\n  /* ─── Orientation ─── */\n\n  .ddga-card--vertical {\n    flex-direction: column;\n  }\n  .ddga-card--horizontal {\n    flex-direction: row;\n    /* RTL: row reverses to keep the image at the start (logical) — handled\n       implicitly by flexbox honoring the writing direction. */\n  }\n\n  /* ─── Variants ─── */\n\n  .ddga-card--default {\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-card--outline {\n    background-color: transparent;\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-card--elevated {\n    border: 1px solid transparent;\n    box-shadow: var(--ddga-shadow-md);\n  }\n\n  .ddga-card--filled {\n    background-color: var(--ddga-color-muted);\n    border: 1px solid transparent;\n  }\n\n  /* SA Green gradient hero — uses primary palette gradient from dga-preferences\n     §5.4 (SA 600 → SA 500 @ 90°). Text + descriptions invert to white. */\n  .ddga-card--gradient {\n    background-image: linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));\n    color: var(--ddga-color-primary-foreground);\n    border: 1px solid transparent;\n  }\n  .ddga-card--gradient .ddga-card__title,\n  .ddga-card--gradient .ddga-card__description {\n    color: inherit;\n  }\n  .ddga-card--gradient .ddga-card__description {\n    /* Softer than the title against the gradient. */\n    opacity: 0.85;\n  }\n  .ddga-card--gradient .ddga-card__footer {\n    border-block-start-color: rgb(255 255 255 / 0.15);\n  }\n\n  /* Bare card — no bg, no border, no shadow. For grouped lists where the\n     parent provides separation, or when stacking content blocks without\n     visual chrome. */\n  .ddga-card--ghost {\n    background-color: transparent;\n    border: 1px solid transparent;\n  }\n  .ddga-card--ghost .ddga-card__footer {\n    border-block-start-color: transparent;\n  }\n\n  /* ─── Padding scale ─── */\n\n  .ddga-card--padding-sm {\n    --ddga-card-padding: var(--ddga-space-3);\n  }\n  .ddga-card--padding-md {\n    --ddga-card-padding: var(--ddga-space-5);\n  }\n  .ddga-card--padding-lg {\n    --ddga-card-padding: var(--ddga-space-6);\n  }\n\n  /* ─── Interactive (hover lift + focus ring; pairs with asChild for clickable cards) ─── */\n\n  .ddga-card--interactive {\n    cursor: pointer;\n    /* No transform on touch — avoids the sticky-hover look on mobile. */\n  }\n  .ddga-card--interactive:hover {\n    border-color: var(--ddga-color-input);\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-card--interactive.ddga-card--elevated:hover,\n  .ddga-card--interactive.ddga-card--gradient:hover {\n    box-shadow: var(--ddga-shadow-lg);\n  }\n  .ddga-card--interactive:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Image ─── */\n\n  .ddga-card__image {\n    display: block;\n    inline-size: 100%;\n    block-size: auto;\n    object-fit: cover;\n    aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n  }\n\n  /* In horizontal cards, the image hugs the start edge and stretches the full\n     card height. Cap its width so the content side still has room to breathe. */\n  .ddga-card--horizontal > .ddga-card__image {\n    aspect-ratio: auto;\n    inline-size: 40%;\n    max-inline-size: 240px;\n    block-size: auto;\n    align-self: stretch;\n    flex-shrink: 0;\n  }\n\n  /* The content side of a horizontal card needs to take the remaining width\n     and keep its own column layout. */\n  .ddga-card--horizontal > :not(.ddga-card__image) {\n    flex: 1 1 auto;\n  }\n  .ddga-card--horizontal > .ddga-card__header + .ddga-card__content {\n    padding-top: 0;\n  }\n\n  /* ─── Sections (all share --ddga-card-padding) ─── */\n\n  .ddga-card__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-card-padding);\n  }\n\n  .ddga-card__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-card__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-card__content {\n    padding: var(--ddga-card-padding);\n  }\n\n  /* Header immediately followed by content: collapse the redundant top padding\n     so the two sections read as one continuous block. */\n  .ddga-card__header + .ddga-card__content {\n    padding-top: 0;\n  }\n\n  /* When an image leads the card, the section under it should NOT have a stray\n     top border or extra padding — the image already provides a clean edge. */\n  .ddga-card__image + .ddga-card__header,\n  .ddga-card__image + .ddga-card__content {\n    /* (use the default --ddga-card-padding) */\n  }\n\n  .ddga-card__footer {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-card-padding);\n    border-top: 1px solid var(--ddga-color-border);\n  }\n\n  /* No top border when there's no preceding section to separate from. */\n  .ddga-card__footer:first-child {\n    border-top: 0;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-card {\n      transition: none;\n    }\n  }\n\n  /* ─── Dark mode adjustments ─── */\n\n  [data-theme='dark'] .ddga-card--gradient {\n    background-image: linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600));\n  }\n}\n"],"names":[]}

package/dist/components/divider.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-divider{--ddga-divider-color:var(--ddga-color-border);border:0}.ddga-divider--horizontal{border-block-start:1px solid var(--ddga-divider-color);block-size:0;inline-size:100%;display:block}.ddga-divider--vertical{vertical-align:middle;border-inline-start:1px solid var(--ddga-divider-color);block-size:100%;min-block-size:1em;inline-size:0;display:inline-block}.ddga-divider--dashed.ddga-divider--horizontal{border-block-start-style:dashed}.ddga-divider--dashed.ddga-divider--vertical{border-inline-start-style:dashed}.ddga-divider--labeled{align-items:center;gap:var(--ddga-space-3);border-block-start:0;block-size:auto;display:flex}.ddga-divider--labeled:before,.ddga-divider--labeled:after{content:"";border-block-start:1px solid var(--ddga-divider-color);block-size:0}.ddga-divider--labeled.ddga-divider--dashed:before,.ddga-divider--labeled.ddga-divider--dashed:after{border-block-start-style:dashed}.ddga-divider--label-center:before,.ddga-divider--label-center:after{flex:1}.ddga-divider--label-start:before{flex:0 0 var(--ddga-space-6)}.ddga-divider--label-start:after,.ddga-divider--label-end:before{flex:1}.ddga-divider--label-end:after{flex:0 0 var(--ddga-space-6)}.ddga-divider__label{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);white-space:nowrap}@media (forced-colors:active){.ddga-divider,.ddga-divider--labeled:before,.ddga-divider--labeled:after{border-color:canvastext}}}
+/*# sourceMappingURL=divider.css.map */

package/dist/components/divider.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE","sources":["src/components/divider.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-divider {\n    /* Single hook so consumers can recolor the divider per-instance. */\n    --ddga-divider-color: var(--ddga-color-border);\n    border: 0;\n  }\n\n  /* ─── Plain (no children) ─── */\n\n  .ddga-divider--horizontal {\n    display: block;\n    block-size: 0;\n    inline-size: 100%;\n    /* Use a border so dashed style works naturally without backgrounds. */\n    border-block-start: 1px solid var(--ddga-divider-color);\n  }\n\n  /* `inline-block` so consumers can drop a vertical divider next to inline\n     content (e.g. button rows) without forcing a flex parent. Consumers in a\n     flex/grid row will still pick up the parent's cross-axis sizing. */\n  .ddga-divider--vertical {\n    display: inline-block;\n    inline-size: 0;\n    block-size: 100%;\n    min-block-size: 1em;\n    vertical-align: middle;\n    border-inline-start: 1px solid var(--ddga-divider-color);\n  }\n\n  /* ─── Dashed (overrides solid border style) ─── */\n\n  .ddga-divider--dashed.ddga-divider--horizontal {\n    border-block-start-style: dashed;\n  }\n  .ddga-divider--dashed.ddga-divider--vertical {\n    border-inline-start-style: dashed;\n  }\n\n  /* ─── Labeled (horizontal + children) ─── */\n\n  .ddga-divider--labeled {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    /* Override the plain-bar shape: this row is the divider, not a 0px line\n       with a top border. */\n    block-size: auto;\n    border-block-start: 0;\n  }\n\n  .ddga-divider--labeled::before,\n  .ddga-divider--labeled::after {\n    content: '';\n    block-size: 0;\n    border-block-start: 1px solid var(--ddga-divider-color);\n  }\n\n  .ddga-divider--labeled.ddga-divider--dashed::before,\n  .ddga-divider--labeled.ddga-divider--dashed::after {\n    border-block-start-style: dashed;\n  }\n\n  /* Label positions — `start`/`end` are logical so they flip in RTL. */\n  .ddga-divider--label-center::before,\n  .ddga-divider--label-center::after {\n    flex: 1;\n  }\n\n  .ddga-divider--label-start::before {\n    flex: 0 0 var(--ddga-space-6);\n  }\n  .ddga-divider--label-start::after {\n    flex: 1;\n  }\n\n  .ddga-divider--label-end::before {\n    flex: 1;\n  }\n  .ddga-divider--label-end::after {\n    flex: 0 0 var(--ddga-space-6);\n  }\n\n  .ddga-divider__label {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n    white-space: nowrap;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-divider {\n      border-color: CanvasText;\n    }\n    .ddga-divider--labeled::before,\n    .ddga-divider--labeled::after {\n      border-color: CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/modal.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-modal__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-modal{z-index:61;background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-lg);flex-direction:column;max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ddga-modal--sm{max-inline-size:360px}.ddga-modal--md{max-inline-size:480px}.ddga-modal--lg{max-inline-size:640px}.ddga-modal--xl{max-inline-size:800px}.ddga-modal--full{block-size:calc(100vh - 2rem);max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);max-inline-size:calc(100vw - 2rem)}.ddga-modal__header{gap:var(--ddga-space-1);padding:var(--ddga-space-5);flex-direction:column;padding-block-end:var(--ddga-space-3);display:flex}.ddga-modal__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;padding-inline-end:var(--ddga-space-8);line-height:1.4}.ddga-modal__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-modal__header~*,.ddga-modal__header~.ddga-modal__footer{padding-inline:var(--ddga-space-5)}.ddga-modal__footer{justify-content:flex-end;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-5);border-block-start:1px solid var(--ddga-color-border);margin-block-start:auto;padding-block-start:var(--ddga-space-4);display:flex}.ddga-modal__close{block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;border-radius:var(--ddga-radius-sm);background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-3);inset-inline-end:var(--ddga-space-3)}.ddga-modal__close>svg{block-size:1rem;inline-size:1rem}.ddga-modal__close:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-modal__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-modal__overlay[data-state=open]{animation-name:ddga-modal-overlay-in}.ddga-modal__overlay[data-state=closed]{animation-name:ddga-modal-overlay-out}.ddga-modal[data-state=open]{animation-name:ddga-modal-in}.ddga-modal[data-state=closed]{animation-name:ddga-modal-out}@keyframes ddga-modal-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes ddga-modal-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes ddga-modal-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes ddga-modal-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}@media (prefers-reduced-motion:reduce){.ddga-modal,.ddga-modal__overlay{animation-duration:0s}}@media (forced-colors:active){.ddga-modal{border-color:canvastext}.ddga-modal__close:focus-visible{box-shadow:none;outline:2px solid highlight}}}
+/*# sourceMappingURL=modal.css.map */

package/dist/components/modal.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAUA,iGAQA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA","sources":["src/components/modal.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Overlay (backdrop) ─── */\n\n  .ddga-modal__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n       60+. Modal lives at 60 by convention. */\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  /* ─── Content (the modal box) ─── */\n\n  .ddga-modal {\n    position: fixed;\n    /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n       Centering is symmetric across writing directions, but `inset-inline-start`\n       flips to `right` in RTL while `transform: translateX(-50%)` stays\n       physical — pairing them shifts the modal off-screen in RTL. The\n       physical pair is the established centered-overlay pattern and is\n       direction-correct because viewport-center doesn't care about `dir`. */\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-lg);\n    /* Keep the modal from spilling off small viewports. */\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    overflow: hidden;\n    animation-duration: 180ms;\n    animation-timing-function: ease;\n  }\n\n  /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n     correctly because translate is direction-agnostic. No override needed. */\n\n  /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n  .ddga-modal--sm {\n    max-inline-size: 360px;\n  }\n  .ddga-modal--md {\n    max-inline-size: 480px;\n  }\n  .ddga-modal--lg {\n    max-inline-size: 640px;\n  }\n  .ddga-modal--xl {\n    max-inline-size: 800px;\n  }\n  .ddga-modal--full {\n    /* Edge-to-edge with a small breathing margin. */\n    max-inline-size: calc(100vw - 2rem);\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    block-size: calc(100vh - 2rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .ddga-modal__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-5);\n    padding-block-end: var(--ddga-space-3);\n  }\n\n  .ddga-modal__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: var(--ddga-text-primary);\n    /* Reserve room so the corner X never overlaps the title text. */\n    padding-inline-end: var(--ddga-space-8);\n  }\n\n  .ddga-modal__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: var(--ddga-text-secondary);\n  }\n\n  /* Body slot — consumers drop content directly under ModalContent. We use a\n     generic descendant rule so unwrapped paragraphs/forms still get padding\n     without forcing a ModalBody subcomponent. */\n  .ddga-modal__header ~ * {\n    padding-inline: var(--ddga-space-5);\n  }\n  /* Reset for known sections that own their own padding. */\n  .ddga-modal__header ~ .ddga-modal__footer {\n    padding-inline: var(--ddga-space-5);\n  }\n\n  .ddga-modal__footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-5);\n    padding-block-start: var(--ddga-space-4);\n    border-block-start: 1px solid var(--ddga-color-border);\n    margin-block-start: auto;\n  }\n\n  /* ─── Corner close (X) ─── */\n\n  .ddga-modal__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-3);\n    inset-inline-end: var(--ddga-space-3);\n    inline-size: 2rem;\n    block-size: 2rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-modal__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-modal__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-modal__overlay[data-state='open'] {\n    animation-name: ddga-modal-overlay-in;\n  }\n  .ddga-modal__overlay[data-state='closed'] {\n    animation-name: ddga-modal-overlay-out;\n  }\n  .ddga-modal[data-state='open'] {\n    animation-name: ddga-modal-in;\n  }\n  .ddga-modal[data-state='closed'] {\n    animation-name: ddga-modal-out;\n  }\n\n  @keyframes ddga-modal-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-modal-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes ddga-modal-in {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n  @keyframes ddga-modal-out {\n    from {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-modal,\n    .ddga-modal__overlay {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-modal {\n      border-color: CanvasText;\n    }\n    .ddga-modal__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/radio.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-radio-group__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);margin-block-end:var(--ddga-space-1);font-weight:500;line-height:1.4;display:block}.ddga-radio-group__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-radio-group{gap:var(--ddga-space-3);display:flex}.ddga-radio-group--vertical{flex-direction:column}.ddga-radio-group--horizontal{flex-flow:wrap}.ddga-radio-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-radio{border:1px solid var(--ddga-color-input);background-color:var(--ddga-color-background);cursor:pointer;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-radio-group--md .ddga-radio{block-size:18px;inline-size:18px}.ddga-radio-group--sm .ddga-radio{block-size:16px;inline-size:16px}.ddga-radio[data-state=checked]{border-color:var(--ddga-color-primary)}.ddga-radio:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-radio-group--error .ddga-radio{border-color:var(--ddga-color-error)}.ddga-radio-group--error .ddga-radio[data-state=checked] .ddga-radio__dot{background-color:var(--ddga-color-error)}.ddga-radio-group--error .ddga-radio:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-radio:disabled{opacity:.5;cursor:not-allowed}.ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-radio__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-radio__dot{background-color:var(--ddga-color-primary);border-radius:999px;block-size:50%;inline-size:50%}.ddga-radio__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}@media (prefers-reduced-motion:reduce){.ddga-radio{transition:none}}@media (forced-colors:active){.ddga-radio{border:1px solid canvastext}.ddga-radio[data-state=checked]{border-color:highlight}.ddga-radio__dot{background-color:canvastext}.ddga-radio:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-radio:disabled{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=radio.css.map */

package/dist/components/radio.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAQE,8KAQA,sFAOA,uDAIA,kDAGA,6CAOA,wEAQA,yQAgBA,mEAIA,mEAOA,uEAMA,mFAOA,0EAGA,mHAGA,gGAMA,mDAIA,gHAOA,sHAOA,+GASA,sHASA,uCACE,6BAOF,8BACE,wCAGA,uDAGA,6CAGA,yEAIA","sources":["src/components/radio.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Group label, group container, and per-item styles\n     live here. Size + error states cascade from the group via descendant\n     selectors so the source of truth stays on one element per group. */\n\n  /* ─── Group label ─── */\n\n  .ddga-radio-group__label {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: 500;\n    line-height: 1.4;\n    margin-block-end: var(--ddga-space-1);\n  }\n  .ddga-radio-group__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Group container (Radix Root, role=radiogroup) ─── */\n\n  .ddga-radio-group {\n    display: flex;\n    gap: var(--ddga-space-3);\n  }\n  .ddga-radio-group--vertical {\n    flex-direction: column;\n  }\n  .ddga-radio-group--horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Row (circle + label, inline) ─── */\n\n  .ddga-radio-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Circle (Radix Item , reset the button, then style) ─── */\n\n  .ddga-radio {\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: 999px;\n    background-color: var(--ddga-color-background);\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Sizes cascade from the group , one source of truth per group. */\n  .ddga-radio-group--md .ddga-radio {\n    block-size: 18px;\n    inline-size: 18px;\n  }\n  .ddga-radio-group--sm .ddga-radio {\n    block-size: 16px;\n    inline-size: 16px;\n  }\n\n  /* ─── Checked border ─── */\n\n  .ddga-radio[data-state='checked'] {\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-radio:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error (cascades from the group) ─── */\n\n  .ddga-radio-group--error .ddga-radio {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__dot {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled (group OR per-item) ─── */\n\n  .ddga-radio:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + dot (only mounts when checked) ─── */\n\n  .ddga-radio__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-radio__dot {\n    inline-size: 50%;\n    block-size: 50%;\n    border-radius: 999px;\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Item label ─── */\n\n  .ddga-radio__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\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-radio {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-radio {\n      border: 1px solid CanvasText;\n    }\n    .ddga-radio[data-state='checked'] {\n      border-color: Highlight;\n    }\n    .ddga-radio__dot {\n      background-color: CanvasText;\n    }\n    .ddga-radio:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-radio:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/select.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-select__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-select__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-select-trigger{justify-content:space-between;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);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-select-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-select-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-select-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-select-trigger[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-select-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-select-trigger--error{border-color:var(--ddga-color-error)}.ddga-select-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-select__icon{color:var(--ddga-text-tertiary);flex-shrink:0;transition:rotate .15s}.ddga-select-trigger[data-state=open] .ddga-select__icon{rotate:180deg}.ddga-select-content{min-inline-size:var(--radix-select-trigger-width);max-block-size:var(--radix-select-content-available-height);z-index:50;background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);color:var(--ddga-text-primary);overflow:hidden}.ddga-select-viewport{padding:var(--ddga-space-1)}.ddga-select-item{block-size:32px;padding-block:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);color:var(--ddga-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding-inline-start:var(--ddga-space-3);padding-inline-end:var(--ddga-space-7);line-height:1.4;display:flex;position:relative}.ddga-select-item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-select-item[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed;pointer-events:none}.ddga-select-item__indicator{color:var(--ddga-color-primary);align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-select-item__check{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-select-trigger,.ddga-select__icon{transition:none}}@media (forced-colors:active){.ddga-select-trigger{border:1px solid canvastext}.ddga-select-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-select-trigger:disabled{color:graytext;border-color:graytext}.ddga-select-content{border:1px solid canvastext}.ddga-select-item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-select-item__indicator{color:highlighttext}}}
+/*# sourceMappingURL=select.css.map */

package/dist/components/select.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA","sources":["src/components/select.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Select-specific styles live here. */\n\n  /* ─── Label (above the trigger, matches Input) ─── */\n\n  .ddga-select__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-select__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n  .ddga-select-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\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    text-align: start;\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Input) ─── */\n\n  .ddga-select-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-select-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Trigger states ─── */\n\n  .ddga-select-trigger: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  /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n  .ddga-select-trigger[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-select-trigger:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-select-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-select-trigger--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Chevron (Radix Icon) ─── */\n\n  .ddga-select__icon {\n    flex-shrink: 0;\n    color: var(--ddga-text-tertiary);\n    transition: rotate 150ms ease;\n  }\n  .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n    rotate: 180deg;\n  }\n\n  /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n  .ddga-select-content {\n    /* Match trigger width so the panel doesn't visually float wider/narrower\n       than the field. `--radix-select-trigger-width` is exposed by Radix\n       when `position=\"popper\"`. */\n    min-inline-size: var(--radix-select-trigger-width);\n    /* Cap height to viewport so long lists scroll instead of overflowing. */\n    max-block-size: var(--radix-select-content-available-height);\n    z-index: 50;\n    overflow: hidden;\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-select-viewport {\n    padding: var(--ddga-space-1);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-select-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    block-size: 32px;\n    padding-block: var(--ddga-space-2);\n    padding-inline-start: var(--ddga-space-3);\n    /* Reserve room for the trailing checkmark indicator so item text never\n       collides with it when the row is selected. */\n    padding-inline-end: var(--ddga-space-7);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    color: var(--ddga-text-primary);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n\n  /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n  .ddga-select-item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-select-item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Item indicator (checkmark on the selected item) ─── */\n\n  .ddga-select-item__indicator {\n    position: absolute;\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-select-item__check {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-select-trigger,\n    .ddga-select__icon {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-select-trigger {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-select-trigger:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n    .ddga-select-content {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-select-item__indicator {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/switch.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-switch-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-switch{background-color:var(--ddga-color-input);cursor:pointer;border:1px solid #0000;border-radius:999px;flex-shrink:0;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-switch--md{--ddga-switch-thumb-travel:16px;block-size:22px;inline-size:38px}.ddga-switch--sm{--ddga-switch-thumb-travel:12px;block-size:18px;inline-size:30px}.ddga-switch[data-state=checked]{background-color:var(--ddga-color-primary)}.ddga-switch:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-switch--error{background-color:var(--ddga-color-background);border-color:var(--ddga-color-error)}.ddga-switch--error[data-state=checked]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-switch--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-switch:disabled{opacity:.5;cursor:not-allowed}.ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-switch__thumb{aspect-ratio:1;background-color:var(--ddga-color-background);will-change:translate;border-radius:999px;block-size:calc(100% - 4px);margin-inline-start:2px;transition:translate .15s;display:block;translate:0;box-shadow:0 1px 2px #00000026}.ddga-switch[data-state=checked] .ddga-switch__thumb{translate:var(--ddga-switch-thumb-travel) 0}[dir=rtl] .ddga-switch[data-state=checked] .ddga-switch__thumb{translate:calc(var(--ddga-switch-thumb-travel) * -1) 0}[data-theme=dark] .ddga-switch__thumb{background-color:#f3f4f6;box-shadow:0 1px 2px #0006}.ddga-switch__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-switch__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-switch,.ddga-switch__thumb{transition:none}}@media (forced-colors:active){.ddga-switch{background-color:canvas;border:1px solid canvastext}.ddga-switch[data-state=checked]{background-color:highlight}.ddga-switch__thumb{box-shadow:none;background-color:canvastext}.ddga-switch[data-state=checked] .ddga-switch__thumb{background-color:highlighttext}.ddga-switch:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-switch:disabled{border-color:graytext}}}
+/*# sourceMappingURL=switch.css.map */

package/dist/components/switch.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,0FAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA","sources":["src/components/switch.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Switch-specific styles live here. */\n\n  /* ─── Row (track + label, inline) ─── */\n\n  .ddga-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n  .ddga-switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Track dimensions and travel distance. Travel is encoded as a per-size\n     custom property so the thumb rule below is size-agnostic. */\n  .ddga-switch--md {\n    block-size: 22px;\n    inline-size: 38px;\n    --ddga-switch-thumb-travel: 16px;\n  }\n  .ddga-switch--sm {\n    block-size: 18px;\n    inline-size: 30px;\n    --ddga-switch-thumb-travel: 12px;\n  }\n\n  /* ─── Checked fill ─── */\n\n  .ddga-switch[data-state='checked'] {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-switch:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-switch--error {\n    background-color: var(--ddga-color-background);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error[data-state='checked'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-switch:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n  .ddga-switch__thumb {\n    display: block;\n    block-size: calc(100% - 4px);\n    aspect-ratio: 1;\n    margin-inline-start: 2px;\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    transition: translate 150ms ease;\n    translate: 0 0;\n    will-change: translate;\n  }\n  .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: var(--ddga-switch-thumb-travel) 0;\n  }\n  /* RTL: the thumb's resting position is on the right (logical start\n     flips), so checked travels in the negative direction. The ancestor\n     `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n     of `:dir()` for broader browser support (the theming pass set the\n     Safari floor at 16.2; `:dir()` lands in 16.4). */\n  [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n  }\n\n  /* Dark mode: the default thumb color (--ddga-color-background, near-white\n     in light mode) flips to a very dark gray-900 , darker than the off-state\n     track (--ddga-color-input = gray-700) , and the thumb disappears.\n     Override locally with a near-white so the puck reads as a raised\n     surface in both modes. Kept in this file (not dark.css) because dark.css\n     is reserved for semantic token remapping; this is a per-component fix. */\n  [data-theme='dark'] .ddga-switch__thumb {\n    background-color: #f3f4f6;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-switch__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-switch__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-switch,\n    .ddga-switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-switch {\n      border: 1px solid CanvasText;\n      background-color: Canvas;\n    }\n    .ddga-switch[data-state='checked'] {\n      background-color: Highlight;\n    }\n    .ddga-switch__thumb {\n      background-color: CanvasText;\n      box-shadow: none;\n    }\n    .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n      background-color: HighlightText;\n    }\n    .ddga-switch:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-switch:disabled {\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/toast.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-toast-viewport{z-index:70;gap:var(--ddga-space-2);padding:var(--ddga-space-4);pointer-events:none;flex-direction:column;inline-size:min(420px,100% - 2rem);margin:0;list-style:none;display:flex;position:fixed}.ddga-toast-viewport>*{pointer-events:auto}.ddga-toast-viewport--containerized{position:absolute}.ddga-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ddga-toast-viewport--top-center{top:0;left:50%;transform:translate(-50%)}.ddga-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ddga-toast-viewport--bottom-start{flex-direction:column-reverse;inset-block-end:0;inset-inline-start:0}.ddga-toast-viewport--bottom-center{flex-direction:column-reverse;bottom:0;left:50%;transform:translate(-50%)}.ddga-toast-viewport--bottom-end{flex-direction:column-reverse;inset-block-end:0;inset-inline-end:0}.ddga-toast{--ddga-toast-accent:var(--ddga-color-info);pointer-events:auto;align-items:flex-start;gap:var(--ddga-space-3);inline-size:100%;min-inline-size:0;padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-lg), inset 3px 0 0 0 var(--ddga-toast-accent);font-family:inherit;line-height:1.4;display:flex;position:relative}[dir=rtl] .ddga-toast{box-shadow:var(--ddga-shadow-lg), inset -3px 0 0 0 var(--ddga-toast-accent)}.ddga-toast--default{--ddga-toast-accent:var(--ddga-color-border)}.ddga-toast--info{--ddga-toast-accent:var(--ddga-color-info)}.ddga-toast--success{--ddga-toast-accent:var(--ddga-color-success)}.ddga-toast--warning{--ddga-toast-accent:var(--ddga-color-warning)}.ddga-toast--destructive{--ddga-toast-accent:var(--ddga-color-destructive)}.ddga-toast__icon{block-size:1.25em;inline-size:1.25em;color:var(--ddga-toast-accent);flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;display:inline-flex}.ddga-toast__icon>svg{block-size:100%;inline-size:100%}.ddga-toast__body{gap:var(--ddga-space-1);min-inline-size:0;flex-direction:column;flex:1 1 0;padding-inline-end:var(--ddga-space-5);display:flex}.ddga-toast__title{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:inherit;overflow-wrap:anywhere;margin:0}.ddga-toast__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);overflow-wrap:anywhere;margin:0}.ddga-toast__action{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-3);border:1px solid var(--ddga-color-border);color:var(--ddga-toast-accent);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;white-space:nowrap;background:0 0;align-self:flex-end;margin-block-start:var(--ddga-space-2);transition:background-color .15s,border-color .15s,color .15s}.ddga-toast__action:hover{background-color:var(--ddga-color-muted);border-color:var(--ddga-toast-accent)}.ddga-toast__action:focus-visible{box-shadow:0 0 0 2px var(--ddga-toast-accent);outline:none}.ddga-toast__close{block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);border-radius:var(--ddga-radius-sm);cursor:pointer;opacity:.7;background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s,background-color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-toast__close>svg{block-size:1rem;inline-size:1rem}.ddga-toast__close:hover{opacity:1;background-color:var(--ddga-color-muted)}.ddga-toast__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-toast-accent);opacity:1;outline:none}.ddga-toast[data-state=open]{animation:.22s cubic-bezier(.16,1,.3,1) ddga-toast-in}.ddga-toast[data-state=closed]{animation:.18s forwards ddga-toast-out}.ddga-toast-viewport[data-position^=bottom-] .ddga-toast[data-state=open]{animation-name:ddga-toast-slide-up}.ddga-toast-viewport[data-position^=top-] .ddga-toast[data-state=open]{animation-name:ddga-toast-slide-down}.ddga-toast[data-swipe=move]{transform:translate3d(var(--radix-toast-swipe-move-x,0), var(--radix-toast-swipe-move-y,0), 0)}.ddga-toast[data-swipe=cancel]{transition:transform .2s ease-out;transform:translate(0,0)}.ddga-toast[data-swipe=end]{animation:.18s forwards ddga-toast-out}@keyframes ddga-toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-slide-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-slide-down{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-out{0%{opacity:1}to{opacity:0;transform:scale(.95)}}@media (prefers-reduced-motion:reduce){.ddga-toast,.ddga-toast[data-state=open],.ddga-toast[data-state=closed]{animation-duration:1ms}}@media (forced-colors:active){.ddga-toast{border-color:canvastext}.ddga-toast__action:focus-visible,.ddga-toast__close:focus-visible{box-shadow:none;outline:2px solid highlight}}}
+/*# sourceMappingURL=toast.css.map */

package/dist/components/toast.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAcE,sNAiBA,2CAIA,sDAaA,yEAIA,0EAKA,qEAIA,wGAKA,8GAMA,oGAQA,8gBAgCA,kGAMA,kEAGA,6DAGA,mEAGA,mEAGA,2EAMA,4LAWA,uDAOA,iJAWA,iJAQA,6HASA,8bAkBA,yGAIA,6FAOA,kYAoBA,wDAIA,4EAIA,sGAeA,mFAGA,sEAMA,6GAGA,4GAKA,4HAOA,0FAIA,mEAIA,sGAUA,6GAUA,gHAUA,0EAUA,uCACE,gGASF,8BACE,oCAGA","sources":["src/components/toast.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Viewport (fixed region where toasts stack) ─── */\n  /*\n   * z-index 70 — above Modal (60), Tooltip (50). The viewport itself is\n   * pointer-events: none so it doesn't block clicks in the rest of the page;\n   * each toast re-enables pointer events for itself.\n   *\n   * Default is `position: fixed` (pinned to the browser viewport). When the\n   * `containerized` modifier is applied, it switches to `position: absolute`\n   * so it pins to a positioned ancestor instead — needed in Storybook,\n   * embedded widgets, and any case where the Toaster shouldn't escape its\n   * parent box.\n   */\n\n  .ddga-toast-viewport {\n    position: fixed;\n    z-index: 70;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-4);\n    /* min() handles both wide containers (cap at 420) and narrow ones (fill\n       minus side breathing room) in a single rule — no fragile vw-based\n       media query needed. */\n    inline-size: min(420px, calc(100% - 2rem));\n    pointer-events: none;\n    list-style: none;\n    margin: 0;\n    /* Always allow individual toasts to be clicked even when the viewport\n       itself is pass-through. */\n  }\n  .ddga-toast-viewport > * {\n    pointer-events: auto;\n  }\n\n  .ddga-toast-viewport--containerized {\n    position: absolute;\n  }\n\n  /* ─── Position anchors ─── */\n  /*\n   * Edge anchors use logical insets (`inset-inline-*`) so `start`/`end` flip\n   * automatically in RTL. Center anchors use physical `left: 50%` paired\n   * with `transform: translateX(-50%)` — centering is direction-symmetric,\n   * and the logical-inset + translate combo would shift off-axis in RTL\n   * (same trap fixed earlier in Modal).\n   */\n\n  .ddga-toast-viewport--top-start {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n  .ddga-toast-viewport--top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .ddga-toast-viewport--top-end {\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n  .ddga-toast-viewport--bottom-start {\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-end {\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Toast (one notification) ─── */\n\n  .ddga-toast {\n    /* Per-variant accent (icon + border-leading edge). Card-surface bg keeps\n       the toast neutral so dark + light look balanced; the leading inset\n       shadow does the variant signaling. */\n    --ddga-toast-accent: var(--ddga-color-info);\n\n    /* Explicit width = 100% of viewport so the toast reliably fills the\n       column regardless of flex defaults / browser quirks. min-inline-size:0\n       lets the body text wrap without forcing the toast wider. */\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    pointer-events: auto;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Outer drop shadow + inline-start accent bar in one shadow declaration.\n       Logical direction: the accent reads as the leading edge — flipped for\n       RTL via the rule below. */\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset 3px 0 0 0 var(--ddga-toast-accent);\n  }\n  [dir='rtl'] .ddga-toast {\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset -3px 0 0 0 var(--ddga-toast-accent);\n  }\n\n  .ddga-toast--default {\n    --ddga-toast-accent: var(--ddga-color-border);\n  }\n  .ddga-toast--info {\n    --ddga-toast-accent: var(--ddga-color-info);\n  }\n  .ddga-toast--success {\n    --ddga-toast-accent: var(--ddga-color-success);\n  }\n  .ddga-toast--warning {\n    --ddga-toast-accent: var(--ddga-color-warning);\n  }\n  .ddga-toast--destructive {\n    --ddga-toast-accent: var(--ddga-color-destructive);\n  }\n\n  /* ─── Icon (leading) ─── */\n\n  .ddga-toast__icon {\n    flex-shrink: 0;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-toast-accent);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Optical-center with the title's cap height. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-toast__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description + action stack) ─── */\n\n  .ddga-toast__body {\n    flex: 1 1 0;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    /* Leave room for the absolutely-positioned close button so long titles\n       don't run under it. */\n    padding-inline-end: var(--ddga-space-5);\n  }\n\n  .ddga-toast__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    margin: 0;\n    color: inherit;\n    /* Allow wrapping on long titles; we don't want truncation here. */\n    overflow-wrap: anywhere;\n  }\n  .ddga-toast__description {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n    margin: 0;\n    overflow-wrap: anywhere;\n  }\n\n  /* ─── Action button (inside body) ─── */\n\n  .ddga-toast__action {\n    align-self: flex-end;\n    margin-block-start: var(--ddga-space-2);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    background: transparent;\n    border: 1px solid var(--ddga-color-border);\n    color: var(--ddga-toast-accent);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    white-space: nowrap;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-toast__action:hover {\n    background-color: var(--ddga-color-muted);\n    border-color: var(--ddga-toast-accent);\n  }\n  .ddga-toast__action:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n  }\n\n  /* ─── Close button (corner, on the root) ─── */\n\n  .ddga-toast__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n  }\n  .ddga-toast__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-toast__close:hover {\n    opacity: 1;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-toast__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n    opacity: 1;\n  }\n\n  /* ─── Animations (Radix data-state + swipe) ─── */\n  /*\n   * Slide-in direction is anchored on the viewport's position. Bottom and\n   * top positions slide vertically from the anchored edge so the motion\n   * always feels like the toast is \"coming from\" the corner it lives in.\n   * For start/end positions in RTL, the slide is still vertical — no\n   * horizontal/inline animations to avoid the RTL transform tangle.\n   */\n\n  .ddga-toast[data-state='open'] {\n    animation: ddga-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-toast[data-state='closed'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  /* Radix portals toasts as children of the Viewport, so the descendant\n     selector targets them. Bottom: come up from below. Top: come down. */\n  .ddga-toast-viewport[data-position^='bottom-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-up;\n  }\n  .ddga-toast-viewport[data-position^='top-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-down;\n  }\n\n  /* Swipe gesture (Radix sets --radix-toast-swipe-move-x/y while dragging). */\n  .ddga-toast[data-swipe='move'] {\n    transform: translate3d(\n      var(--radix-toast-swipe-move-x, 0),\n      var(--radix-toast-swipe-move-y, 0),\n      0\n    );\n  }\n  .ddga-toast[data-swipe='cancel'] {\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms ease-out;\n  }\n  .ddga-toast[data-swipe='end'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  @keyframes ddga-toast-in {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-up {\n    from {\n      opacity: 0;\n      transform: translateY(24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-down {\n    from {\n      opacity: 0;\n      transform: translateY(-24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toast,\n    .ddga-toast[data-state='open'],\n    .ddga-toast[data-state='closed'] {\n      animation-duration: 1ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toast {\n      border-color: CanvasText;\n    }\n    .ddga-toast__action:focus-visible,\n    .ddga-toast__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/tooltip.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-tooltip{background-color:var(--ddga-text-primary);color:var(--ddga-color-background);border-radius:var(--ddga-radius-sm);box-shadow:var(--ddga-shadow-md);overflow-wrap:anywhere;z-index:50;max-inline-size:260px;font-family:inherit;line-height:1.4;animation-duration:.15s;animation-timing-function:ease}.ddga-tooltip--sm{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-tooltip--md{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-tooltip__arrow{fill:var(--ddga-text-primary)}.ddga-tooltip[data-state=delayed-open],.ddga-tooltip[data-state=instant-open]{animation-name:ddga-tooltip-in}.ddga-tooltip[data-state=closed]{animation-name:ddga-tooltip-out}@keyframes ddga-tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-tooltip-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ddga-tooltip{animation-duration:0s}}@media (forced-colors:active){.ddga-tooltip{border:1px solid canvastext}}}
+/*# sourceMappingURL=tooltip.css.map */

package/dist/components/tooltip.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE","sources":["src/components/tooltip.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Content ─── */\n\n  .ddga-tooltip {\n    /* Solid dark surface against light bgs; readable in both themes via\n       semantic foreground/background swap in dark.css. */\n    background-color: var(--ddga-text-primary);\n    color: var(--ddga-color-background);\n    border-radius: var(--ddga-radius-sm);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Keep the tooltip from getting absurdly wide for long content. */\n    max-inline-size: 260px;\n    /* Ensure word-wrap works for long words / URLs. */\n    overflow-wrap: anywhere;\n    /* Above modals are higher; this sits above page content. */\n    z-index: 50;\n    /* Radix sets animation data attrs on state changes — use them for a\n       light fade so the tooltip doesn't pop in jarringly. */\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-tooltip--sm {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-tooltip--md {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Arrow ─── */\n\n  .ddga-tooltip__arrow {\n    fill: var(--ddga-text-primary);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-tooltip[data-state='delayed-open'],\n  .ddga-tooltip[data-state='instant-open'] {\n    animation-name: ddga-tooltip-in;\n  }\n  .ddga-tooltip[data-state='closed'] {\n    animation-name: ddga-tooltip-out;\n  }\n\n  @keyframes ddga-tooltip-in {\n    from {\n      opacity: 0;\n      transform: translateY(2px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-tooltip-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tooltip {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: --ddga-text-primary remaps to a light tone and\n     --ddga-color-background goes dark, so the tooltip becomes a light pill\n     on a dark surface — still high contrast, just inverted. No override\n     needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\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-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}}}
+@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}.ddga-theme-sa-green{--ddga-color-primary:var(--ddga-sa-500);--ddga-color-primary-hover:var(--ddga-sa-600);--ddga-color-primary-active:var(--ddga-sa-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-sa-500)}.ddga-theme-gray{--ddga-color-primary:var(--ddga-gray-500);--ddga-color-primary-hover:var(--ddga-gray-600);--ddga-color-primary-active:var(--ddga-gray-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-gray-500)}.ddga-theme-error{--ddga-color-primary:var(--ddga-error-500);--ddga-color-primary-hover:var(--ddga-error-600);--ddga-color-primary-active:var(--ddga-error-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-error-500)}.ddga-theme-warning{--ddga-color-primary:var(--ddga-warning-500);--ddga-color-primary-hover:var(--ddga-warning-600);--ddga-color-primary-active:var(--ddga-warning-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-warning-500)}.ddga-theme-success{--ddga-color-primary:var(--ddga-success-500);--ddga-color-primary-hover:var(--ddga-success-600);--ddga-color-primary-active:var(--ddga-success-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-success-500)}.ddga-theme-info{--ddga-color-primary:var(--ddga-info-500);--ddga-color-primary-hover:var(--ddga-info-600);--ddga-color-primary-active:var(--ddga-info-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-info-500)}.ddga-theme-gold{--ddga-color-primary:var(--ddga-gold-500);--ddga-color-primary-hover:var(--ddga-gold-600);--ddga-color-primary-active:var(--ddga-gold-700);--ddga-color-primary-foreground:#0d121c;--ddga-color-ring:var(--ddga-gold-500)}.ddga-theme-lavender{--ddga-color-primary:var(--ddga-lavender-500);--ddga-color-primary-hover:var(--ddga-lavender-600);--ddga-color-primary-active:var(--ddga-lavender-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-lavender-500)}*,: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):not([aria-disabled=true]){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):not([aria-disabled=true]){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):not([aria-disabled=true]){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled):not([aria-disabled=true]){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):not([aria-disabled=true]){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,.ddga-button[aria-disabled=true]{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,.ddga-button[aria-disabled=true]{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}}.ddga-radio-group__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);margin-block-end:var(--ddga-space-1);font-weight:500;line-height:1.4;display:block}.ddga-radio-group__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-radio-group{gap:var(--ddga-space-3);display:flex}.ddga-radio-group--vertical{flex-direction:column}.ddga-radio-group--horizontal{flex-flow:wrap}.ddga-radio-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-radio{border:1px solid var(--ddga-color-input);background-color:var(--ddga-color-background);cursor:pointer;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-radio-group--md .ddga-radio{block-size:18px;inline-size:18px}.ddga-radio-group--sm .ddga-radio{block-size:16px;inline-size:16px}.ddga-radio[data-state=checked]{border-color:var(--ddga-color-primary)}.ddga-radio:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-radio-group--error .ddga-radio{border-color:var(--ddga-color-error)}.ddga-radio-group--error .ddga-radio[data-state=checked] .ddga-radio__dot{background-color:var(--ddga-color-error)}.ddga-radio-group--error .ddga-radio:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-radio:disabled{opacity:.5;cursor:not-allowed}.ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-radio__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-radio__dot{background-color:var(--ddga-color-primary);border-radius:999px;block-size:50%;inline-size:50%}.ddga-radio__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}@media (prefers-reduced-motion:reduce){.ddga-radio{transition:none}}@media (forced-colors:active){.ddga-radio{border:1px solid canvastext}.ddga-radio[data-state=checked]{border-color:highlight}.ddga-radio__dot{background-color:canvastext}.ddga-radio:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-radio:disabled{color:graytext;border-color:graytext}}.ddga-switch-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-switch{background-color:var(--ddga-color-input);cursor:pointer;border:1px solid #0000;border-radius:999px;flex-shrink:0;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-switch--md{--ddga-switch-thumb-travel:16px;block-size:22px;inline-size:38px}.ddga-switch--sm{--ddga-switch-thumb-travel:12px;block-size:18px;inline-size:30px}.ddga-switch[data-state=checked]{background-color:var(--ddga-color-primary)}.ddga-switch:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-switch--error{background-color:var(--ddga-color-background);border-color:var(--ddga-color-error)}.ddga-switch--error[data-state=checked]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-switch--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-switch:disabled{opacity:.5;cursor:not-allowed}.ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-switch__thumb{aspect-ratio:1;background-color:var(--ddga-color-background);will-change:translate;border-radius:999px;block-size:calc(100% - 4px);margin-inline-start:2px;transition:translate .15s;display:block;translate:0;box-shadow:0 1px 2px #00000026}.ddga-switch[data-state=checked] .ddga-switch__thumb{translate:var(--ddga-switch-thumb-travel) 0}[dir=rtl] .ddga-switch[data-state=checked] .ddga-switch__thumb{translate:calc(var(--ddga-switch-thumb-travel) * -1) 0}[data-theme=dark] .ddga-switch__thumb{background-color:#f3f4f6;box-shadow:0 1px 2px #0006}.ddga-switch__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-switch__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-switch,.ddga-switch__thumb{transition:none}}@media (forced-colors:active){.ddga-switch{background-color:canvas;border:1px solid canvastext}.ddga-switch[data-state=checked]{background-color:highlight}.ddga-switch__thumb{box-shadow:none;background-color:canvastext}.ddga-switch[data-state=checked] .ddga-switch__thumb{background-color:highlighttext}.ddga-switch:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-switch:disabled{border-color:graytext}}.ddga-select__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-select__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-select-trigger{justify-content:space-between;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);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-select-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-select-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-select-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-select-trigger[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-select-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-select-trigger--error{border-color:var(--ddga-color-error)}.ddga-select-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-select__icon{color:var(--ddga-text-tertiary);flex-shrink:0;transition:rotate .15s}.ddga-select-trigger[data-state=open] .ddga-select__icon{rotate:180deg}.ddga-select-content{min-inline-size:var(--radix-select-trigger-width);max-block-size:var(--radix-select-content-available-height);z-index:50;background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);color:var(--ddga-text-primary);overflow:hidden}.ddga-select-viewport{padding:var(--ddga-space-1)}.ddga-select-item{block-size:32px;padding-block:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);color:var(--ddga-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding-inline-start:var(--ddga-space-3);padding-inline-end:var(--ddga-space-7);line-height:1.4;display:flex;position:relative}.ddga-select-item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-select-item[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed;pointer-events:none}.ddga-select-item__indicator{color:var(--ddga-color-primary);align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-select-item__check{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-select-trigger,.ddga-select__icon{transition:none}}@media (forced-colors:active){.ddga-select-trigger{border:1px solid canvastext}.ddga-select-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-select-trigger:disabled{color:graytext;border-color:graytext}.ddga-select-content{border:1px solid canvastext}.ddga-select-item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-select-item__indicator{color:highlighttext}}.ddga-tooltip{background-color:var(--ddga-text-primary);color:var(--ddga-color-background);border-radius:var(--ddga-radius-sm);box-shadow:var(--ddga-shadow-md);overflow-wrap:anywhere;z-index:50;max-inline-size:260px;font-family:inherit;line-height:1.4;animation-duration:.15s;animation-timing-function:ease}.ddga-tooltip--sm{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-tooltip--md{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-tooltip__arrow{fill:var(--ddga-text-primary)}.ddga-tooltip[data-state=delayed-open],.ddga-tooltip[data-state=instant-open]{animation-name:ddga-tooltip-in}.ddga-tooltip[data-state=closed]{animation-name:ddga-tooltip-out}@keyframes ddga-tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-tooltip-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ddga-tooltip{animation-duration:0s}}@media (forced-colors:active){.ddga-tooltip{border:1px solid canvastext}}.ddga-alert{--ddga-alert-accent:var(--ddga-color-info);--ddga-alert-bg:var(--ddga-info-100);--ddga-alert-fg:var(--ddga-info-700);align-items:flex-start;gap:var(--ddga-space-3);padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);border-radius:var(--ddga-radius-md);background-color:var(--ddga-alert-bg);color:var(--ddga-alert-fg);border:1px solid #0000;font-family:inherit;line-height:1.5;display:flex}.ddga-alert--info{--ddga-alert-accent:var(--ddga-color-info);--ddga-alert-bg:var(--ddga-info-100);--ddga-alert-fg:var(--ddga-info-700)}.ddga-alert--success{--ddga-alert-accent:var(--ddga-color-success);--ddga-alert-bg:var(--ddga-success-100);--ddga-alert-fg:var(--ddga-success-700)}.ddga-alert--warning{--ddga-alert-accent:var(--ddga-color-warning);--ddga-alert-bg:var(--ddga-warning-100);--ddga-alert-fg:var(--ddga-warning-700)}.ddga-alert--destructive{--ddga-alert-accent:var(--ddga-color-destructive);--ddga-alert-bg:var(--ddga-error-100);--ddga-alert-fg:var(--ddga-error-700)}.ddga-alert__icon{block-size:1.25em;inline-size:1.25em;color:var(--ddga-alert-accent);flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;display:inline-flex}.ddga-alert__icon>svg{block-size:100%;inline-size:100%}.ddga-alert__body{gap:var(--ddga-space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}.ddga-alert__title{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:inherit;margin:0;line-height:1.4}.ddga-alert__description{font-size:var(--ddga-font-size-sm);color:inherit;opacity:.9;margin:0;line-height:1.5}.ddga-alert__close{block-size:1.5rem;inline-size:1.5rem;color:inherit;cursor:pointer;border-radius:var(--ddga-radius-sm);opacity:.7;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;padding:0;transition:opacity .15s,background-color .15s;display:inline-flex}.ddga-alert__close>svg{block-size:1em;inline-size:1em}.ddga-alert__close:hover{opacity:1;background-color:#0000000f}.ddga-alert__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-alert-accent);opacity:1;outline:none}[data-theme=dark] .ddga-alert--info{--ddga-alert-bg:#1570ef29;--ddga-alert-fg:var(--ddga-info-200,#b2ddff)}[data-theme=dark] .ddga-alert--success{--ddga-alert-bg:#0794552e;--ddga-alert-fg:var(--ddga-success-200,#abefc6)}[data-theme=dark] .ddga-alert--warning{--ddga-alert-bg:#dc68032e;--ddga-alert-fg:var(--ddga-warning-200,#fedf89)}[data-theme=dark] .ddga-alert--destructive{--ddga-alert-bg:#d92d202e;--ddga-alert-fg:var(--ddga-error-200,#fecdca)}[data-theme=dark] .ddga-alert__close:hover{background-color:#ffffff14}@media (forced-colors:active){.ddga-alert{border-color:canvastext}.ddga-alert__close:focus-visible{box-shadow:none;outline:2px solid highlight}}.ddga-modal__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-modal{z-index:61;background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-lg);flex-direction:column;max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ddga-modal--sm{max-inline-size:360px}.ddga-modal--md{max-inline-size:480px}.ddga-modal--lg{max-inline-size:640px}.ddga-modal--xl{max-inline-size:800px}.ddga-modal--full{block-size:calc(100vh - 2rem);max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);max-inline-size:calc(100vw - 2rem)}.ddga-modal__header{gap:var(--ddga-space-1);padding:var(--ddga-space-5);flex-direction:column;padding-block-end:var(--ddga-space-3);display:flex}.ddga-modal__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;padding-inline-end:var(--ddga-space-8);line-height:1.4}.ddga-modal__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-modal__header~*,.ddga-modal__header~.ddga-modal__footer{padding-inline:var(--ddga-space-5)}.ddga-modal__footer{justify-content:flex-end;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-5);border-block-start:1px solid var(--ddga-color-border);margin-block-start:auto;padding-block-start:var(--ddga-space-4);display:flex}.ddga-modal__close{block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;border-radius:var(--ddga-radius-sm);background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-3);inset-inline-end:var(--ddga-space-3)}.ddga-modal__close>svg{block-size:1rem;inline-size:1rem}.ddga-modal__close:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-modal__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-modal__overlay[data-state=open]{animation-name:ddga-modal-overlay-in}.ddga-modal__overlay[data-state=closed]{animation-name:ddga-modal-overlay-out}.ddga-modal[data-state=open]{animation-name:ddga-modal-in}.ddga-modal[data-state=closed]{animation-name:ddga-modal-out}@keyframes ddga-modal-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes ddga-modal-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes ddga-modal-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes ddga-modal-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}@media (prefers-reduced-motion:reduce){.ddga-modal,.ddga-modal__overlay{animation-duration:0s}}@media (forced-colors:active){.ddga-modal{border-color:canvastext}.ddga-modal__close:focus-visible{box-shadow:none;outline:2px solid highlight}}.ddga-toast-viewport{z-index:70;gap:var(--ddga-space-2);padding:var(--ddga-space-4);pointer-events:none;flex-direction:column;inline-size:min(420px,100% - 2rem);margin:0;list-style:none;display:flex;position:fixed}.ddga-toast-viewport>*{pointer-events:auto}.ddga-toast-viewport--containerized{position:absolute}.ddga-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ddga-toast-viewport--top-center{top:0;left:50%;transform:translate(-50%)}.ddga-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ddga-toast-viewport--bottom-start{flex-direction:column-reverse;inset-block-end:0;inset-inline-start:0}.ddga-toast-viewport--bottom-center{flex-direction:column-reverse;bottom:0;left:50%;transform:translate(-50%)}.ddga-toast-viewport--bottom-end{flex-direction:column-reverse;inset-block-end:0;inset-inline-end:0}.ddga-toast{--ddga-toast-accent:var(--ddga-color-info);pointer-events:auto;align-items:flex-start;gap:var(--ddga-space-3);inline-size:100%;min-inline-size:0;padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-lg), inset 3px 0 0 0 var(--ddga-toast-accent);font-family:inherit;line-height:1.4;display:flex;position:relative}[dir=rtl] .ddga-toast{box-shadow:var(--ddga-shadow-lg), inset -3px 0 0 0 var(--ddga-toast-accent)}.ddga-toast--default{--ddga-toast-accent:var(--ddga-color-border)}.ddga-toast--info{--ddga-toast-accent:var(--ddga-color-info)}.ddga-toast--success{--ddga-toast-accent:var(--ddga-color-success)}.ddga-toast--warning{--ddga-toast-accent:var(--ddga-color-warning)}.ddga-toast--destructive{--ddga-toast-accent:var(--ddga-color-destructive)}.ddga-toast__icon{block-size:1.25em;inline-size:1.25em;color:var(--ddga-toast-accent);flex-shrink:0;justify-content:center;align-items:center;margin-block-start:.125em;display:inline-flex}.ddga-toast__icon>svg{block-size:100%;inline-size:100%}.ddga-toast__body{gap:var(--ddga-space-1);min-inline-size:0;flex-direction:column;flex:1 1 0;padding-inline-end:var(--ddga-space-5);display:flex}.ddga-toast__title{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:inherit;overflow-wrap:anywhere;margin:0}.ddga-toast__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);overflow-wrap:anywhere;margin:0}.ddga-toast__action{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-3);border:1px solid var(--ddga-color-border);color:var(--ddga-toast-accent);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;white-space:nowrap;background:0 0;align-self:flex-end;margin-block-start:var(--ddga-space-2);transition:background-color .15s,border-color .15s,color .15s}.ddga-toast__action:hover{background-color:var(--ddga-color-muted);border-color:var(--ddga-toast-accent)}.ddga-toast__action:focus-visible{box-shadow:0 0 0 2px var(--ddga-toast-accent);outline:none}.ddga-toast__close{block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);border-radius:var(--ddga-radius-sm);cursor:pointer;opacity:.7;background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s,background-color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-toast__close>svg{block-size:1rem;inline-size:1rem}.ddga-toast__close:hover{opacity:1;background-color:var(--ddga-color-muted)}.ddga-toast__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-toast-accent);opacity:1;outline:none}.ddga-toast[data-state=open]{animation:.22s cubic-bezier(.16,1,.3,1) ddga-toast-in}.ddga-toast[data-state=closed]{animation:.18s forwards ddga-toast-out}.ddga-toast-viewport[data-position^=bottom-] .ddga-toast[data-state=open]{animation-name:ddga-toast-slide-up}.ddga-toast-viewport[data-position^=top-] .ddga-toast[data-state=open]{animation-name:ddga-toast-slide-down}.ddga-toast[data-swipe=move]{transform:translate3d(var(--radix-toast-swipe-move-x,0), var(--radix-toast-swipe-move-y,0), 0)}.ddga-toast[data-swipe=cancel]{transition:transform .2s ease-out;transform:translate(0,0)}.ddga-toast[data-swipe=end]{animation:.18s forwards ddga-toast-out}@keyframes ddga-toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-slide-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-slide-down{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-toast-out{0%{opacity:1}to{opacity:0;transform:scale(.95)}}@media (prefers-reduced-motion:reduce){.ddga-toast,.ddga-toast[data-state=open],.ddga-toast[data-state=closed]{animation-duration:1ms}}@media (forced-colors:active){.ddga-toast{border-color:canvastext}.ddga-toast__action:focus-visible,.ddga-toast__close:focus-visible{box-shadow:none;outline:2px solid highlight}}}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"mappings":"AAAA,iBCAA,i8IECA,g1CIAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PLzDA,0DAQA,2MAWA,yCFnBA,uBMKE,uEAMA,iFAMA,8DAIA,0DDlBA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BASF,qFAMA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,6FGjMF,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,mFJ1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DOpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DErIF,8KAQA,sFAOA,uDAIA,kDAGA,6CAOA,wEAQA,yQAgBA,mEAIA,mEAOA,uEAMA,mFAOA,0EAGA,mHAGA,gGAMA,mDAIA,gHAOA,sHAOA,+GASA,sHASA,uCACE,6BAOF,8BACE,wCAGA,uDAGA,6CAGA,yEAIA,2DErJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,0FAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA,6CN3JF,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA,kDKzLF,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE,2CJlFF,kaAsBA,uIAMA,mJAMA,mJAMA,uJAQA,4LAYA,uDAOA,sGAQA,0IAQA,8GAWA,0TAoBA,sDAIA,8DAIA,sGAUA,2GAIA,iHAIA,iHAIA,mHAIA,sEAMA,8BACE,oCAGA,8EE9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAUA,iGAQA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EI1MF,sNAiBA,2CAIA,sDAaA,yEAIA,0EAKA,qEAIA,wGAKA,8GAMA,oGAQA,8gBAgCA,kGAMA,kEAGA,6DAGA,mEAGA,mEAGA,2EAMA,4LAWA,uDAOA,iJAWA,iJAQA,6HASA,8bAkBA,yGAIA,6FAOA,kYAoBA,wDAIA,4EAIA,sGAeA,mFAGA,sEAMA,6GAGA,4GAKA,4HAOA,0FAIA,mEAIA,sGAUA,6GAUA,gHAUA,0EAUA,uCACE,gGASF,8BACE,oCAGA","sources":["src/index.css","src/reset.css","src/variables.css","src/components/textarea.css","src/dark.css","src/components/field.css","src/themes.css","src/components/button.css","src/components/input.css","src/components/select.css","src/components/alert.css","src/components/checkbox.css","src/components/modal.css","src/components/radio.css","src/components/tooltip.css","src/components/switch.css","src/components/toast.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n/* themes.css imported AFTER dark.css so `.ddga-theme-*` classes win over\n   dark.css's primary override (dark mode + explicit theme = theme wins). */\n@import './themes.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@import './components/radio.css';\n@import './components/switch.css';\n@import './components/select.css';\n@import './components/tooltip.css';\n@import './components/alert.css';\n@import './components/modal.css';\n@import './components/toast.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 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","/* 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  /* 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","/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n  --ddga-color-primary: var(--ddga-sa-500);\n  --ddga-color-primary-hover: var(--ddga-sa-600);\n  --ddga-color-primary-active: var(--ddga-sa-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-sa-500);\n}\n\n.ddga-theme-gray {\n  --ddga-color-primary: var(--ddga-gray-500);\n  --ddga-color-primary-hover: var(--ddga-gray-600);\n  --ddga-color-primary-active: var(--ddga-gray-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-gray-500);\n}\n\n.ddga-theme-error {\n  --ddga-color-primary: var(--ddga-error-500);\n  --ddga-color-primary-hover: var(--ddga-error-600);\n  --ddga-color-primary-active: var(--ddga-error-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-error-500);\n}\n\n.ddga-theme-warning {\n  --ddga-color-primary: var(--ddga-warning-500);\n  --ddga-color-primary-hover: var(--ddga-warning-600);\n  --ddga-color-primary-active: var(--ddga-warning-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-warning-500);\n}\n\n.ddga-theme-success {\n  --ddga-color-primary: var(--ddga-success-500);\n  --ddga-color-primary-hover: var(--ddga-success-600);\n  --ddga-color-primary-active: var(--ddga-success-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-success-500);\n}\n\n.ddga-theme-info {\n  --ddga-color-primary: var(--ddga-info-500);\n  --ddga-color-primary-hover: var(--ddga-info-600);\n  --ddga-color-primary-active: var(--ddga-info-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-info-500);\n}\n\n.ddga-theme-gold {\n  --ddga-color-primary: var(--ddga-gold-500);\n  --ddga-color-primary-hover: var(--ddga-gold-600);\n  --ddga-color-primary-active: var(--ddga-gold-700);\n  --ddga-color-primary-foreground: #0D121C;\n  --ddga-color-ring: var(--ddga-gold-500);\n}\n\n.ddga-theme-lavender {\n  --ddga-color-primary: var(--ddga-lavender-500);\n  --ddga-color-primary-hover: var(--ddga-lavender-600);\n  --ddga-color-primary-active: var(--ddga-lavender-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-lavender-500);\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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):not([aria-disabled='true']) {\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  /* Match `:disabled` (native button) and `[aria-disabled='true']` (asChild\n     mode rendered as <a> or similar where native `disabled` has no effect). */\n  .ddga-button:disabled,\n  .ddga-button[aria-disabled='true'] {\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    .ddga-button[aria-disabled='true'] {\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 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 Select-specific styles live here. */\n\n  /* ─── Label (above the trigger, matches Input) ─── */\n\n  .ddga-select__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-select__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n  .ddga-select-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\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    text-align: start;\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Input) ─── */\n\n  .ddga-select-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-select-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Trigger states ─── */\n\n  .ddga-select-trigger: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  /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n  .ddga-select-trigger[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-select-trigger:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-select-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-select-trigger--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Chevron (Radix Icon) ─── */\n\n  .ddga-select__icon {\n    flex-shrink: 0;\n    color: var(--ddga-text-tertiary);\n    transition: rotate 150ms ease;\n  }\n  .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n    rotate: 180deg;\n  }\n\n  /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n  .ddga-select-content {\n    /* Match trigger width so the panel doesn't visually float wider/narrower\n       than the field. `--radix-select-trigger-width` is exposed by Radix\n       when `position=\"popper\"`. */\n    min-inline-size: var(--radix-select-trigger-width);\n    /* Cap height to viewport so long lists scroll instead of overflowing. */\n    max-block-size: var(--radix-select-content-available-height);\n    z-index: 50;\n    overflow: hidden;\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-select-viewport {\n    padding: var(--ddga-space-1);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-select-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    block-size: 32px;\n    padding-block: var(--ddga-space-2);\n    padding-inline-start: var(--ddga-space-3);\n    /* Reserve room for the trailing checkmark indicator so item text never\n       collides with it when the row is selected. */\n    padding-inline-end: var(--ddga-space-7);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    color: var(--ddga-text-primary);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n\n  /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n  .ddga-select-item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-select-item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Item indicator (checkmark on the selected item) ─── */\n\n  .ddga-select-item__indicator {\n    position: absolute;\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-select-item__check {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-select-trigger,\n    .ddga-select__icon {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-select-trigger {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-select-trigger:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n    .ddga-select-content {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-select-item__indicator {\n      color: HighlightText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-alert {\n    /* Each variant overrides --accent (icon + border) and --bg / --fg below.\n       Centralizing this in vars makes per-instance recoloring trivial. */\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-alert-bg);\n    color: var(--ddga-alert-fg);\n    font-family: inherit;\n    line-height: 1.5;\n  }\n\n  /* ─── Variants (tonal, matching Badge subtle family) ─── */\n\n  .ddga-alert--info {\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n  }\n\n  .ddga-alert--success {\n    --ddga-alert-accent: var(--ddga-color-success);\n    --ddga-alert-bg: var(--ddga-success-100);\n    --ddga-alert-fg: var(--ddga-success-700);\n  }\n\n  .ddga-alert--warning {\n    --ddga-alert-accent: var(--ddga-color-warning);\n    --ddga-alert-bg: var(--ddga-warning-100);\n    --ddga-alert-fg: var(--ddga-warning-700);\n  }\n\n  .ddga-alert--destructive {\n    --ddga-alert-accent: var(--ddga-color-destructive);\n    --ddga-alert-bg: var(--ddga-error-100);\n    --ddga-alert-fg: var(--ddga-error-700);\n  }\n\n  /* ─── Icon ─── */\n\n  .ddga-alert__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-alert-accent);\n    /* Nudge the icon to optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n\n  .ddga-alert__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description container) ─── */\n\n  .ddga-alert__body {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-alert__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: inherit;\n  }\n\n  .ddga-alert__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: inherit;\n    /* Slight dimming for hierarchy under the title; works for both light + dark. */\n    opacity: 0.9;\n  }\n\n  /* ─── Close button ─── */\n\n  .ddga-alert__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n    /* Optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-alert__close > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-alert__close:hover {\n    opacity: 1;\n    background-color: rgb(0 0 0 / 0.06);\n  }\n  .ddga-alert__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-alert-accent);\n    opacity: 1;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The -100 tonal pairs are quite light against a dark page bg — bump the\n     destructive/warning shades and recolor the foreground for legibility. */\n\n  [data-theme='dark'] .ddga-alert--info {\n    --ddga-alert-bg: rgb(21 112 239 / 0.16);\n    --ddga-alert-fg: var(--ddga-info-200, #b2ddff);\n  }\n  [data-theme='dark'] .ddga-alert--success {\n    --ddga-alert-bg: rgb(7 148 85 / 0.18);\n    --ddga-alert-fg: var(--ddga-success-200, #abefc6);\n  }\n  [data-theme='dark'] .ddga-alert--warning {\n    --ddga-alert-bg: rgb(220 104 3 / 0.18);\n    --ddga-alert-fg: var(--ddga-warning-200, #fedf89);\n  }\n  [data-theme='dark'] .ddga-alert--destructive {\n    --ddga-alert-bg: rgb(217 45 32 / 0.18);\n    --ddga-alert-fg: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-alert__close:hover {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-alert {\n      border-color: CanvasText;\n    }\n    .ddga-alert__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Checkbox-specific styles live here. */\n\n  /* ─── Row (box + label, inline) ─── */\n\n  .ddga-checkbox-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Box (Radix Root , reset the button, then style) ─── */\n\n  .ddga-checkbox {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-primary-foreground);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-checkbox--md {\n    block-size: 18px;\n    inline-size: 18px;\n    font-size: 14px;\n  }\n  .ddga-checkbox--sm {\n    block-size: 16px;\n    inline-size: 16px;\n    font-size: 12px;\n  }\n\n  /* ─── Checked / indeterminate fill ─── */\n\n  .ddga-checkbox[data-state='checked'],\n  .ddga-checkbox[data-state='indeterminate'] {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-checkbox:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-checkbox--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error[data-state='checked'],\n  .ddga-checkbox--error[data-state='indeterminate'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-checkbox:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n  .ddga-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-checkbox__check,\n  .ddga-checkbox__minus {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n    display: none;\n  }\n  .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-checkbox__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-checkbox__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-checkbox {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-checkbox {\n      border: 1px solid CanvasText;\n    }\n    .ddga-checkbox[data-state='checked'],\n    .ddga-checkbox[data-state='indeterminate'] {\n      background-color: CanvasText;\n    }\n    .ddga-checkbox__indicator {\n      color: Canvas;\n    }\n    .ddga-checkbox:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-checkbox:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Overlay (backdrop) ─── */\n\n  .ddga-modal__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n       60+. Modal lives at 60 by convention. */\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  /* ─── Content (the modal box) ─── */\n\n  .ddga-modal {\n    position: fixed;\n    /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n       Centering is symmetric across writing directions, but `inset-inline-start`\n       flips to `right` in RTL while `transform: translateX(-50%)` stays\n       physical — pairing them shifts the modal off-screen in RTL. The\n       physical pair is the established centered-overlay pattern and is\n       direction-correct because viewport-center doesn't care about `dir`. */\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-lg);\n    /* Keep the modal from spilling off small viewports. */\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    overflow: hidden;\n    animation-duration: 180ms;\n    animation-timing-function: ease;\n  }\n\n  /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n     correctly because translate is direction-agnostic. No override needed. */\n\n  /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n  .ddga-modal--sm {\n    max-inline-size: 360px;\n  }\n  .ddga-modal--md {\n    max-inline-size: 480px;\n  }\n  .ddga-modal--lg {\n    max-inline-size: 640px;\n  }\n  .ddga-modal--xl {\n    max-inline-size: 800px;\n  }\n  .ddga-modal--full {\n    /* Edge-to-edge with a small breathing margin. */\n    max-inline-size: calc(100vw - 2rem);\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    block-size: calc(100vh - 2rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .ddga-modal__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-5);\n    padding-block-end: var(--ddga-space-3);\n  }\n\n  .ddga-modal__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: var(--ddga-text-primary);\n    /* Reserve room so the corner X never overlaps the title text. */\n    padding-inline-end: var(--ddga-space-8);\n  }\n\n  .ddga-modal__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: var(--ddga-text-secondary);\n  }\n\n  /* Body slot — consumers drop content directly under ModalContent. We use a\n     generic descendant rule so unwrapped paragraphs/forms still get padding\n     without forcing a ModalBody subcomponent. */\n  .ddga-modal__header ~ * {\n    padding-inline: var(--ddga-space-5);\n  }\n  /* Reset for known sections that own their own padding. */\n  .ddga-modal__header ~ .ddga-modal__footer {\n    padding-inline: var(--ddga-space-5);\n  }\n\n  .ddga-modal__footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-5);\n    padding-block-start: var(--ddga-space-4);\n    border-block-start: 1px solid var(--ddga-color-border);\n    margin-block-start: auto;\n  }\n\n  /* ─── Corner close (X) ─── */\n\n  .ddga-modal__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-3);\n    inset-inline-end: var(--ddga-space-3);\n    inline-size: 2rem;\n    block-size: 2rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-modal__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-modal__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-modal__overlay[data-state='open'] {\n    animation-name: ddga-modal-overlay-in;\n  }\n  .ddga-modal__overlay[data-state='closed'] {\n    animation-name: ddga-modal-overlay-out;\n  }\n  .ddga-modal[data-state='open'] {\n    animation-name: ddga-modal-in;\n  }\n  .ddga-modal[data-state='closed'] {\n    animation-name: ddga-modal-out;\n  }\n\n  @keyframes ddga-modal-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-modal-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes ddga-modal-in {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n  @keyframes ddga-modal-out {\n    from {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-modal,\n    .ddga-modal__overlay {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-modal {\n      border-color: CanvasText;\n    }\n    .ddga-modal__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Group label, group container, and per-item styles\n     live here. Size + error states cascade from the group via descendant\n     selectors so the source of truth stays on one element per group. */\n\n  /* ─── Group label ─── */\n\n  .ddga-radio-group__label {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: 500;\n    line-height: 1.4;\n    margin-block-end: var(--ddga-space-1);\n  }\n  .ddga-radio-group__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Group container (Radix Root, role=radiogroup) ─── */\n\n  .ddga-radio-group {\n    display: flex;\n    gap: var(--ddga-space-3);\n  }\n  .ddga-radio-group--vertical {\n    flex-direction: column;\n  }\n  .ddga-radio-group--horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Row (circle + label, inline) ─── */\n\n  .ddga-radio-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Circle (Radix Item , reset the button, then style) ─── */\n\n  .ddga-radio {\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: 999px;\n    background-color: var(--ddga-color-background);\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Sizes cascade from the group , one source of truth per group. */\n  .ddga-radio-group--md .ddga-radio {\n    block-size: 18px;\n    inline-size: 18px;\n  }\n  .ddga-radio-group--sm .ddga-radio {\n    block-size: 16px;\n    inline-size: 16px;\n  }\n\n  /* ─── Checked border ─── */\n\n  .ddga-radio[data-state='checked'] {\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-radio:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error (cascades from the group) ─── */\n\n  .ddga-radio-group--error .ddga-radio {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__dot {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled (group OR per-item) ─── */\n\n  .ddga-radio:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + dot (only mounts when checked) ─── */\n\n  .ddga-radio__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-radio__dot {\n    inline-size: 50%;\n    block-size: 50%;\n    border-radius: 999px;\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Item label ─── */\n\n  .ddga-radio__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\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-radio {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-radio {\n      border: 1px solid CanvasText;\n    }\n    .ddga-radio[data-state='checked'] {\n      border-color: Highlight;\n    }\n    .ddga-radio__dot {\n      background-color: CanvasText;\n    }\n    .ddga-radio:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-radio:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Content ─── */\n\n  .ddga-tooltip {\n    /* Solid dark surface against light bgs; readable in both themes via\n       semantic foreground/background swap in dark.css. */\n    background-color: var(--ddga-text-primary);\n    color: var(--ddga-color-background);\n    border-radius: var(--ddga-radius-sm);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Keep the tooltip from getting absurdly wide for long content. */\n    max-inline-size: 260px;\n    /* Ensure word-wrap works for long words / URLs. */\n    overflow-wrap: anywhere;\n    /* Above modals are higher; this sits above page content. */\n    z-index: 50;\n    /* Radix sets animation data attrs on state changes — use them for a\n       light fade so the tooltip doesn't pop in jarringly. */\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-tooltip--sm {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-tooltip--md {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Arrow ─── */\n\n  .ddga-tooltip__arrow {\n    fill: var(--ddga-text-primary);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-tooltip[data-state='delayed-open'],\n  .ddga-tooltip[data-state='instant-open'] {\n    animation-name: ddga-tooltip-in;\n  }\n  .ddga-tooltip[data-state='closed'] {\n    animation-name: ddga-tooltip-out;\n  }\n\n  @keyframes ddga-tooltip-in {\n    from {\n      opacity: 0;\n      transform: translateY(2px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-tooltip-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tooltip {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: --ddga-text-primary remaps to a light tone and\n     --ddga-color-background goes dark, so the tooltip becomes a light pill\n     on a dark surface — still high contrast, just inverted. No override\n     needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Switch-specific styles live here. */\n\n  /* ─── Row (track + label, inline) ─── */\n\n  .ddga-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n  .ddga-switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Track dimensions and travel distance. Travel is encoded as a per-size\n     custom property so the thumb rule below is size-agnostic. */\n  .ddga-switch--md {\n    block-size: 22px;\n    inline-size: 38px;\n    --ddga-switch-thumb-travel: 16px;\n  }\n  .ddga-switch--sm {\n    block-size: 18px;\n    inline-size: 30px;\n    --ddga-switch-thumb-travel: 12px;\n  }\n\n  /* ─── Checked fill ─── */\n\n  .ddga-switch[data-state='checked'] {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-switch:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-switch--error {\n    background-color: var(--ddga-color-background);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error[data-state='checked'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-switch:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n  .ddga-switch__thumb {\n    display: block;\n    block-size: calc(100% - 4px);\n    aspect-ratio: 1;\n    margin-inline-start: 2px;\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    transition: translate 150ms ease;\n    translate: 0 0;\n    will-change: translate;\n  }\n  .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: var(--ddga-switch-thumb-travel) 0;\n  }\n  /* RTL: the thumb's resting position is on the right (logical start\n     flips), so checked travels in the negative direction. The ancestor\n     `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n     of `:dir()` for broader browser support (the theming pass set the\n     Safari floor at 16.2; `:dir()` lands in 16.4). */\n  [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n  }\n\n  /* Dark mode: the default thumb color (--ddga-color-background, near-white\n     in light mode) flips to a very dark gray-900 , darker than the off-state\n     track (--ddga-color-input = gray-700) , and the thumb disappears.\n     Override locally with a near-white so the puck reads as a raised\n     surface in both modes. Kept in this file (not dark.css) because dark.css\n     is reserved for semantic token remapping; this is a per-component fix. */\n  [data-theme='dark'] .ddga-switch__thumb {\n    background-color: #f3f4f6;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-switch__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-switch__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-switch,\n    .ddga-switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-switch {\n      border: 1px solid CanvasText;\n      background-color: Canvas;\n    }\n    .ddga-switch[data-state='checked'] {\n      background-color: Highlight;\n    }\n    .ddga-switch__thumb {\n      background-color: CanvasText;\n      box-shadow: none;\n    }\n    .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n      background-color: HighlightText;\n    }\n    .ddga-switch:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-switch:disabled {\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Viewport (fixed region where toasts stack) ─── */\n  /*\n   * z-index 70 — above Modal (60), Tooltip (50). The viewport itself is\n   * pointer-events: none so it doesn't block clicks in the rest of the page;\n   * each toast re-enables pointer events for itself.\n   *\n   * Default is `position: fixed` (pinned to the browser viewport). When the\n   * `containerized` modifier is applied, it switches to `position: absolute`\n   * so it pins to a positioned ancestor instead — needed in Storybook,\n   * embedded widgets, and any case where the Toaster shouldn't escape its\n   * parent box.\n   */\n\n  .ddga-toast-viewport {\n    position: fixed;\n    z-index: 70;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-4);\n    /* min() handles both wide containers (cap at 420) and narrow ones (fill\n       minus side breathing room) in a single rule — no fragile vw-based\n       media query needed. */\n    inline-size: min(420px, calc(100% - 2rem));\n    pointer-events: none;\n    list-style: none;\n    margin: 0;\n    /* Always allow individual toasts to be clicked even when the viewport\n       itself is pass-through. */\n  }\n  .ddga-toast-viewport > * {\n    pointer-events: auto;\n  }\n\n  .ddga-toast-viewport--containerized {\n    position: absolute;\n  }\n\n  /* ─── Position anchors ─── */\n  /*\n   * Edge anchors use logical insets (`inset-inline-*`) so `start`/`end` flip\n   * automatically in RTL. Center anchors use physical `left: 50%` paired\n   * with `transform: translateX(-50%)` — centering is direction-symmetric,\n   * and the logical-inset + translate combo would shift off-axis in RTL\n   * (same trap fixed earlier in Modal).\n   */\n\n  .ddga-toast-viewport--top-start {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n  .ddga-toast-viewport--top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .ddga-toast-viewport--top-end {\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n  .ddga-toast-viewport--bottom-start {\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-end {\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Toast (one notification) ─── */\n\n  .ddga-toast {\n    /* Per-variant accent (icon + border-leading edge). Card-surface bg keeps\n       the toast neutral so dark + light look balanced; the leading inset\n       shadow does the variant signaling. */\n    --ddga-toast-accent: var(--ddga-color-info);\n\n    /* Explicit width = 100% of viewport so the toast reliably fills the\n       column regardless of flex defaults / browser quirks. min-inline-size:0\n       lets the body text wrap without forcing the toast wider. */\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    pointer-events: auto;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Outer drop shadow + inline-start accent bar in one shadow declaration.\n       Logical direction: the accent reads as the leading edge — flipped for\n       RTL via the rule below. */\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset 3px 0 0 0 var(--ddga-toast-accent);\n  }\n  [dir='rtl'] .ddga-toast {\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset -3px 0 0 0 var(--ddga-toast-accent);\n  }\n\n  .ddga-toast--default {\n    --ddga-toast-accent: var(--ddga-color-border);\n  }\n  .ddga-toast--info {\n    --ddga-toast-accent: var(--ddga-color-info);\n  }\n  .ddga-toast--success {\n    --ddga-toast-accent: var(--ddga-color-success);\n  }\n  .ddga-toast--warning {\n    --ddga-toast-accent: var(--ddga-color-warning);\n  }\n  .ddga-toast--destructive {\n    --ddga-toast-accent: var(--ddga-color-destructive);\n  }\n\n  /* ─── Icon (leading) ─── */\n\n  .ddga-toast__icon {\n    flex-shrink: 0;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-toast-accent);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Optical-center with the title's cap height. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-toast__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description + action stack) ─── */\n\n  .ddga-toast__body {\n    flex: 1 1 0;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    /* Leave room for the absolutely-positioned close button so long titles\n       don't run under it. */\n    padding-inline-end: var(--ddga-space-5);\n  }\n\n  .ddga-toast__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    margin: 0;\n    color: inherit;\n    /* Allow wrapping on long titles; we don't want truncation here. */\n    overflow-wrap: anywhere;\n  }\n  .ddga-toast__description {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n    margin: 0;\n    overflow-wrap: anywhere;\n  }\n\n  /* ─── Action button (inside body) ─── */\n\n  .ddga-toast__action {\n    align-self: flex-end;\n    margin-block-start: var(--ddga-space-2);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    background: transparent;\n    border: 1px solid var(--ddga-color-border);\n    color: var(--ddga-toast-accent);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    white-space: nowrap;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-toast__action:hover {\n    background-color: var(--ddga-color-muted);\n    border-color: var(--ddga-toast-accent);\n  }\n  .ddga-toast__action:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n  }\n\n  /* ─── Close button (corner, on the root) ─── */\n\n  .ddga-toast__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n  }\n  .ddga-toast__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-toast__close:hover {\n    opacity: 1;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-toast__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n    opacity: 1;\n  }\n\n  /* ─── Animations (Radix data-state + swipe) ─── */\n  /*\n   * Slide-in direction is anchored on the viewport's position. Bottom and\n   * top positions slide vertically from the anchored edge so the motion\n   * always feels like the toast is \"coming from\" the corner it lives in.\n   * For start/end positions in RTL, the slide is still vertical — no\n   * horizontal/inline animations to avoid the RTL transform tangle.\n   */\n\n  .ddga-toast[data-state='open'] {\n    animation: ddga-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-toast[data-state='closed'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  /* Radix portals toasts as children of the Viewport, so the descendant\n     selector targets them. Bottom: come up from below. Top: come down. */\n  .ddga-toast-viewport[data-position^='bottom-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-up;\n  }\n  .ddga-toast-viewport[data-position^='top-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-down;\n  }\n\n  /* Swipe gesture (Radix sets --radix-toast-swipe-move-x/y while dragging). */\n  .ddga-toast[data-swipe='move'] {\n    transform: translate3d(\n      var(--radix-toast-swipe-move-x, 0),\n      var(--radix-toast-swipe-move-y, 0),\n      0\n    );\n  }\n  .ddga-toast[data-swipe='cancel'] {\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms ease-out;\n  }\n  .ddga-toast[data-swipe='end'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  @keyframes ddga-toast-in {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-up {\n    from {\n      opacity: 0;\n      transform: translateY(24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-down {\n    from {\n      opacity: 0;\n      transform: translateY(-24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toast,\n    .ddga-toast[data-state='open'],\n    .ddga-toast[data-state='closed'] {\n      animation-duration: 1ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toast {\n      border-color: CanvasText;\n    }\n    .ddga-toast__action:focus-visible,\n    .ddga-toast__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/themes.css

@@ -0,0 +1,2 @@
+.ddga-theme-sa-green{--ddga-color-primary:var(--ddga-sa-500);--ddga-color-primary-hover:var(--ddga-sa-600);--ddga-color-primary-active:var(--ddga-sa-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-sa-500)}.ddga-theme-gray{--ddga-color-primary:var(--ddga-gray-500);--ddga-color-primary-hover:var(--ddga-gray-600);--ddga-color-primary-active:var(--ddga-gray-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-gray-500)}.ddga-theme-error{--ddga-color-primary:var(--ddga-error-500);--ddga-color-primary-hover:var(--ddga-error-600);--ddga-color-primary-active:var(--ddga-error-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-error-500)}.ddga-theme-warning{--ddga-color-primary:var(--ddga-warning-500);--ddga-color-primary-hover:var(--ddga-warning-600);--ddga-color-primary-active:var(--ddga-warning-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-warning-500)}.ddga-theme-success{--ddga-color-primary:var(--ddga-success-500);--ddga-color-primary-hover:var(--ddga-success-600);--ddga-color-primary-active:var(--ddga-success-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-success-500)}.ddga-theme-info{--ddga-color-primary:var(--ddga-info-500);--ddga-color-primary-hover:var(--ddga-info-600);--ddga-color-primary-active:var(--ddga-info-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-info-500)}.ddga-theme-gold{--ddga-color-primary:var(--ddga-gold-500);--ddga-color-primary-hover:var(--ddga-gold-600);--ddga-color-primary-active:var(--ddga-gold-700);--ddga-color-primary-foreground:#0d121c;--ddga-color-ring:var(--ddga-gold-500)}.ddga-theme-lavender{--ddga-color-primary:var(--ddga-lavender-500);--ddga-color-primary-hover:var(--ddga-lavender-600);--ddga-color-primary-active:var(--ddga-lavender-700);--ddga-color-primary-foreground:#fff;--ddga-color-ring:var(--ddga-lavender-500)}
+/*# sourceMappingURL=themes.css.map */

package/dist/themes.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA","sources":["src/themes.css"],"sourcesContent":["/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n  --ddga-color-primary: var(--ddga-sa-500);\n  --ddga-color-primary-hover: var(--ddga-sa-600);\n  --ddga-color-primary-active: var(--ddga-sa-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-sa-500);\n}\n\n.ddga-theme-gray {\n  --ddga-color-primary: var(--ddga-gray-500);\n  --ddga-color-primary-hover: var(--ddga-gray-600);\n  --ddga-color-primary-active: var(--ddga-gray-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-gray-500);\n}\n\n.ddga-theme-error {\n  --ddga-color-primary: var(--ddga-error-500);\n  --ddga-color-primary-hover: var(--ddga-error-600);\n  --ddga-color-primary-active: var(--ddga-error-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-error-500);\n}\n\n.ddga-theme-warning {\n  --ddga-color-primary: var(--ddga-warning-500);\n  --ddga-color-primary-hover: var(--ddga-warning-600);\n  --ddga-color-primary-active: var(--ddga-warning-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-warning-500);\n}\n\n.ddga-theme-success {\n  --ddga-color-primary: var(--ddga-success-500);\n  --ddga-color-primary-hover: var(--ddga-success-600);\n  --ddga-color-primary-active: var(--ddga-success-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-success-500);\n}\n\n.ddga-theme-info {\n  --ddga-color-primary: var(--ddga-info-500);\n  --ddga-color-primary-hover: var(--ddga-info-600);\n  --ddga-color-primary-active: var(--ddga-info-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-info-500);\n}\n\n.ddga-theme-gold {\n  --ddga-color-primary: var(--ddga-gold-500);\n  --ddga-color-primary-hover: var(--ddga-gold-600);\n  --ddga-color-primary-active: var(--ddga-gold-700);\n  --ddga-color-primary-foreground: #0D121C;\n  --ddga-color-ring: var(--ddga-gold-500);\n}\n\n.ddga-theme-lavender {\n  --ddga-color-primary: var(--ddga-lavender-500);\n  --ddga-color-primary-hover: var(--ddga-lavender-600);\n  --ddga-color-primary-active: var(--ddga-lavender-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-lavender-500);\n}\n"],"names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-dga/css",
-  "version": "0.2.0",
+  "version": "0.4.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",
@@ -35,6 +35,7 @@
       "default": "./dist/index.css"
     },
     "./variables.css": "./dist/variables.css",
+    "./themes.css": "./dist/themes.css",
     "./dark.css": "./dist/dark.css",
     "./reset.css": "./dist/reset.css",
     "./components/*": "./dist/components/*"
@@ -44,7 +45,7 @@
   },
   "devDependencies": {
     "lightningcss-cli": "^1.30.1",
-    "@dev-dga/tokens": "0.2.0"
+    "@dev-dga/tokens": "0.4.0"
   },
   "scripts": {
     "build": "node scripts/build.js",