@dev-dga/css 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @dev-dga/css
 
+## 0.12.0
+
+The **SDGA Platforms Code parity** release. ~40 per-component stylesheets were rebuilt or aligned to the official DGA "Platforms Code" Figma, new component blocks were added, and the token layer shifted (brand green, text ink, navy shadow scale, 3-tier architecture). Moves in lockstep with `@dev-dga/react` — see its changelog for the full prop-level detail; this note focuses on what changes for CSS/BEM consumers.
+
+### Renamed CSS blocks / files (BREAKING for `.ddga-*` consumers)
+
+- `ddga-input*` → **`ddga-text-input*`** (`input.css` → `text-input.css`); `data-slot` `input-*` → `text-input-*`.
+- `ddga-combobox*` → **`ddga-dropdown*`** (`combobox.css` → `dropdown.css`).
+- `ddga-stat*` → **`ddga-metric*`**.
+- `ddga-badge*` → **`ddga-tag*`** (incl. `ddga-tag__dot`/`__icon`/`__close`).
+- `ddga-toast*` → **`ddga-notification-toast*`**.
+- `Textarea` box styles move from `.ddga-textarea` (the `<textarea>`) to the new control wrapper `.ddga-textarea` / `[data-slot="textarea-control"]`, with the field at `.ddga-textarea__field`.
+
+### New component stylesheets
+
+Charts, Chip, StatusTag, StructuredList, ContentSwitcher, FloatingButton, Carousel, CodeSnippet, DigitalStamp, Filtration, Notification, SlideoutMenu, SaudiRiyal, HelpIcon — plus the SDGA `code-snippet` block (`--ddga-font-mono`, always-LTR).
+
+### Visual / structural alignment (highlights)
+
+- **Removed grid/pill/segmented looks** that weren't in the SDGA spec: Table `bordered`/`divided` (row dividers are now the base look; header columns carry dividers; `contained` = outer frame only), Tabs `pill`, Modal borders, filled-pill active Pagination (now a green underline), Steps→ProgressIndicator connector geometry.
+- **Field model** (TextInput / Textarea / NumberInput / Dropdown / DatePicker / SearchBox): gray-400 rest border, hover gray-700, focus = `shadow-md` + full-width dark underline (the green ring is gone), pressed = gray-100 + centered underline, disabled/read-only = recolour (no `opacity: 0.5`), new `default`/`filled-lighter`/`filled-darker` styles.
+- **Controls** (Checkbox / Radio / Switch): SDGA outlined/filled models, ripple halos, disabled recolour, and a **2px `#161616` ink focus frame** replacing the round green ring.
+- **Overlays/menus** (DropdownMenu / Dropdown / Modal / Tooltip): `shadow-2xl`/`shadow-3xl` navy elevation, gray-300 borders, ink focus rings; Tooltip is now a light structured card by default (`inverted` for dark).
+- **SDGA parity re-verification sweep** — dark-mode legibility fixes (Accordion body, InlineAlert color, Progress captions, Radio, SearchBox, Carousel, FloatingButton, Quote, Metric, TextInput), a11y focus states, and measured-value corrections across all components.
+
+### Token-driven visual shifts
+
+- **Brand green** `--ddga-color-primary` SA-500 → **SA-600 `#1B8354`** (every primary surface).
+- **Text ink** `--ddga-text-primary` → **`#161616`**; `text-secondary` → gray-700, `text-tertiary` → gray-600.
+- **Navy 7-step two-layer shadow scale** re-tints/softens every elevated surface; dark mode covers the full ramp.
+- **3-tier architecture** — `variables.css` semantic tokens are now `var()` aliases over the primitive scales via the `--ddga-brand-*` ramp; a `[data-theme]` re-declaration makes sub-tree accent theming work in light too. New CSS vars: `--ddga-alpha-white-*`, `--ddga-radius-xs`, `--ddga-font-size-2xs`, `--ddga-color-focus-ring`, `--ddga-chart-1..6`, `--ddga-sa-flag`.
+
 ## 0.11.0
 
 ### Patch Changes

package/dist/components/accordion.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-accordion{inline-size:100%;color:var(--ddga-text-primary);border-block-end:1px solid var(--ddga-color-border);flex-direction:column;display:flex}.ddga-accordion__item{border-block-start:1px solid var(--ddga-color-border)}.ddga-accordion__header{margin:0;display:flex}.ddga-accordion__trigger{appearance:none;justify-content:space-between;align-items:center;gap:var(--ddga-space-3);inline-size:100%;padding-block:var(--ddga-space-4);color:var(--ddga-text-primary);text-align:start;cursor:pointer;background:0 0;border:0;margin:0;font-family:inherit;font-weight:500;transition:color .15s;display:inline-flex}.ddga-accordion__trigger:hover{color:var(--ddga-color-primary)}.ddga-accordion__trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);border-radius:var(--ddga-radius-sm);outline:none}.ddga-accordion__chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);flex-shrink:0;transition:transform .2s}.ddga-accordion__trigger[data-state=open] .ddga-accordion__chevron{transform:rotate(180deg)}.ddga-accordion__content{color:var(--ddga-text-secondary);overflow:hidden}.ddga-accordion__content[data-state=open]{animation:.2s ease-out ddga-accordion-down}.ddga-accordion__content[data-state=closed]{animation:.2s ease-out ddga-accordion-up}.ddga-accordion__content-inner{padding-block-end:var(--ddga-space-4);line-height:1.5}@keyframes ddga-accordion-down{0%{block-size:0}to{block-size:var(--radix-accordion-content-height)}}@keyframes ddga-accordion-up{0%{block-size:var(--radix-accordion-content-height)}to{block-size:0}}.ddga-accordion--sm .ddga-accordion__trigger{padding-block:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-accordion--md .ddga-accordion__trigger{padding-block:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}@media (prefers-reduced-motion:reduce){.ddga-accordion__content[data-state=open],.ddga-accordion__content[data-state=closed]{animation:none}.ddga-accordion__chevron{transition:none}}@media (forced-colors:active){.ddga-accordion,.ddga-accordion__item{border-color:canvastext}.ddga-accordion__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}}}
+@layer ddga-components{.ddga-accordion{inline-size:100%;color:var(--ddga-text-primary);border-block-end:1px solid var(--ddga-color-input);flex-direction:column;display:flex}.ddga-accordion__item{border-block-start:1px solid var(--ddga-color-input)}.ddga-accordion__header{margin:0;display:flex}.ddga-accordion__trigger{appearance:none;justify-content:flex-start;align-items:center;gap:var(--ddga-space-4);inline-size:100%;padding-inline:var(--ddga-space-4);padding-block:var(--ddga-space-4);color:var(--ddga-text-primary);font-family:inherit;font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-semibold);text-align:start;cursor:pointer;background:0 0;border:0;margin:0;line-height:1.5rem;transition:background-color .15s;display:inline-flex}.ddga-accordion__title{text-align:start;flex:1 1 0;min-inline-size:0}.ddga-accordion__trigger:hover{background-color:var(--ddga-color-secondary)}.ddga-accordion__trigger:active{background-color:var(--ddga-color-secondary-hover)}.ddga-accordion__trigger:focus-visible{outline:2px solid var(--ddga-color-focus-ring);outline-offset:-2px}.ddga-accordion__trigger:disabled,.ddga-accordion__trigger[data-disabled]{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-accordion__trigger:disabled .ddga-accordion__chevron,.ddga-accordion__trigger[data-disabled] .ddga-accordion__chevron{color:var(--ddga-gray-400)}.ddga-accordion__chevron{block-size:1rem;inline-size:1rem;color:var(--ddga-text-primary);flex-shrink:0;transition:transform .2s}.ddga-accordion__trigger[data-state=open] .ddga-accordion__chevron{transform:rotate(180deg)}.ddga-accordion--icon-leading .ddga-accordion__chevron{order:-1}.ddga-accordion__content{color:var(--ddga-gray-700);overflow:hidden}.ddga-accordion__content[data-disabled]{color:var(--ddga-gray-400)}.ddga-accordion__content[data-state=open]{animation:.2s ease-out ddga-accordion-down}.ddga-accordion__content[data-state=closed]{animation:.2s ease-out ddga-accordion-up}.ddga-accordion__content-inner{padding-block-start:var(--ddga-space-2);padding-block-end:var(--ddga-space-6);padding-inline-start:var(--ddga-space-4);padding-inline-end:var(--ddga-space-12);line-height:1.5rem}@keyframes ddga-accordion-down{0%{block-size:0}to{block-size:var(--radix-accordion-content-height)}}@keyframes ddga-accordion-up{0%{block-size:var(--radix-accordion-content-height)}to{block-size:0}}.ddga-accordion--md .ddga-accordion__trigger{padding-block:var(--ddga-space-3)}.ddga-accordion--sm .ddga-accordion__trigger{padding-block:var(--ddga-space-2)}.ddga-accordion--flush .ddga-accordion__trigger{padding-inline:0}.ddga-accordion--flush .ddga-accordion__content-inner{padding-inline-start:0}@media (prefers-reduced-motion:reduce){.ddga-accordion__content[data-state=open],.ddga-accordion__content[data-state=closed]{animation:none}.ddga-accordion__chevron{transition:none}}[data-theme=dark] .ddga-accordion__content{color:var(--ddga-gray-300)}@media (forced-colors:active){.ddga-accordion,.ddga-accordion__item{border-color:canvastext}.ddga-accordion__trigger:focus-visible{outline:2px solid highlight}}}
 /*# sourceMappingURL=accordion.css.map */

package/dist/components/accordion.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAQE,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA","sources":["src/components/accordion.css"],"sourcesContent":["@layer ddga-components {\n  /* Size lives on the root; per-part visuals cascade. Radix exposes\n     `--radix-accordion-content-height` on the Content element when open so\n     we can animate the disclosure cleanly; the inner wrapper carries the\n     padding so the animated container can clip without padding popping. */\n\n  /* ─── Root ─── */\n\n  .ddga-accordion {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    color: var(--ddga-text-primary);\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-accordion__item {\n    border-block-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Header (wraps the trigger button) ─── */\n\n  .ddga-accordion__header {\n    display: flex;\n    margin: 0;\n  }\n\n  /* ─── Trigger (the disclosure button) ─── */\n\n  .ddga-accordion__trigger {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    inline-size: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-4);\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    font-weight: 500;\n    text-align: start;\n    cursor: pointer;\n    transition: color 150ms ease;\n  }\n\n  .ddga-accordion__trigger:hover {\n    color: var(--ddga-color-primary);\n  }\n\n  .ddga-accordion__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Chevron ─── */\n\n  .ddga-accordion__chevron {\n    flex-shrink: 0;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-tertiary);\n    transition: transform 200ms ease;\n  }\n\n  .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Content (animated disclosure) ─── */\n\n  .ddga-accordion__content {\n    overflow: hidden;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-accordion__content[data-state='open'] {\n    animation: ddga-accordion-down 200ms ease-out;\n  }\n  .ddga-accordion__content[data-state='closed'] {\n    animation: ddga-accordion-up 200ms ease-out;\n  }\n\n  .ddga-accordion__content-inner {\n    padding-block-end: var(--ddga-space-4);\n    line-height: 1.5;\n  }\n\n  @keyframes ddga-accordion-down {\n    from {\n      block-size: 0;\n    }\n    to {\n      block-size: var(--radix-accordion-content-height);\n    }\n  }\n  @keyframes ddga-accordion-up {\n    from {\n      block-size: var(--radix-accordion-content-height);\n    }\n    to {\n      block-size: 0;\n    }\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-accordion--sm .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-accordion--md .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-accordion__content[data-state='open'],\n    .ddga-accordion__content[data-state='closed'] {\n      animation: none;\n    }\n    .ddga-accordion__chevron {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-accordion,\n    .ddga-accordion__item {\n      border-color: CanvasText;\n    }\n    .ddga-accordion__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAGE,sJAUA,2EAMA,8CAOA,mdAuBA,qEAMA,4EAGA,mFAGA,0GAKA,wHAKA,uJAOA,gIAOA,4FAGA,gEAMA,oEAIA,mEAIA,qFAGA,qFAIA,iNAQA,oGAQA,kGAWA,+EAGA,+EAMA,iEAGA,6EAMA,uCACE,qGAIA,0CAMF,sEAMA,8BACE,8DAIA","sources":["src/components/accordion.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Root ─── */\n\n  .ddga-accordion {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    color: var(--ddga-text-primary);\n    border-block-end: 1px solid var(--ddga-color-input);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-accordion__item {\n    border-block-start: 1px solid var(--ddga-color-input);\n  }\n\n  /* ─── Header (wraps the trigger button) ─── */\n\n  .ddga-accordion__header {\n    display: flex;\n    margin: 0;\n  }\n\n  /* ─── Trigger (the disclosure button) ─── */\n\n  .ddga-accordion__trigger {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    inline-size: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--ddga-space-4);\n    padding-inline: var(--ddga-space-4);\n    padding-block: var(--ddga-space-4); /* lg; md/sm override below */\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    font-size: var(--ddga-font-size-base);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.5rem;\n    text-align: start;\n    cursor: pointer;\n    transition: background-color 150ms ease;\n  }\n\n  /* Title fills the row; the chevron sits at the opposite end (or right after it when leading). */\n  .ddga-accordion__title {\n    flex: 1 1 0;\n    min-inline-size: 0;\n    text-align: start;\n  }\n\n  .ddga-accordion__trigger:hover {\n    background-color: var(--ddga-color-secondary);\n  }\n  .ddga-accordion__trigger:active {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n  .ddga-accordion__trigger:focus-visible {\n    outline: 2px solid var(--ddga-color-focus-ring);\n    outline-offset: -2px;\n  }\n\n  .ddga-accordion__trigger:disabled,\n  .ddga-accordion__trigger[data-disabled] {\n    color: var(--ddga-gray-400);\n    cursor: not-allowed;\n  }\n  .ddga-accordion__trigger:disabled .ddga-accordion__chevron,\n  .ddga-accordion__trigger[data-disabled] .ddga-accordion__chevron {\n    color: var(--ddga-gray-400);\n  }\n\n  /* ─── Chevron ─── */\n\n  .ddga-accordion__chevron {\n    flex-shrink: 0;\n    inline-size: 1rem;\n    block-size: 1rem;\n    color: var(--ddga-text-primary);\n    transition: transform 200ms ease;\n  }\n  .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n    transform: rotate(180deg);\n  }\n  .ddga-accordion--icon-leading .ddga-accordion__chevron {\n    order: -1;\n  }\n\n  /* ─── Content (animated disclosure) ─── */\n\n  .ddga-accordion__content {\n    overflow: hidden;\n    color: var(--ddga-gray-700);\n  }\n  .ddga-accordion__content[data-disabled] {\n    color: var(--ddga-gray-400);\n  }\n\n  .ddga-accordion__content[data-state='open'] {\n    animation: ddga-accordion-down 200ms ease-out;\n  }\n  .ddga-accordion__content[data-state='closed'] {\n    animation: ddga-accordion-up 200ms ease-out;\n  }\n\n  .ddga-accordion__content-inner {\n    padding-block-start: var(--ddga-space-2);\n    padding-block-end: var(--ddga-space-6);\n    padding-inline-start: var(--ddga-space-4);\n    padding-inline-end: var(--ddga-space-12); /* inset off the chevron side */\n    line-height: 1.5rem;\n  }\n\n  @keyframes ddga-accordion-down {\n    from {\n      block-size: 0;\n    }\n    to {\n      block-size: var(--radix-accordion-content-height);\n    }\n  }\n  @keyframes ddga-accordion-up {\n    from {\n      block-size: var(--radix-accordion-content-height);\n    }\n    to {\n      block-size: 0;\n    }\n  }\n\n  /* ─── Sizes (header pad-block only; title is constant 16/600/24) ─── */\n\n  .ddga-accordion--md .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-3);\n  }\n  .ddga-accordion--sm .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-2);\n  }\n\n  /* ─── Flush (edge-to-edge — drops the inline padding) ─── */\n\n  .ddga-accordion--flush .ddga-accordion__trigger {\n    padding-inline: 0;\n  }\n  .ddga-accordion--flush .ddga-accordion__content-inner {\n    padding-inline-start: 0;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-accordion__content[data-state='open'],\n    .ddga-accordion__content[data-state='closed'] {\n      animation: none;\n    }\n    .ddga-accordion__chevron {\n      transition: none;\n    }\n  }\n\n  /* Dark: raw gray-700 body text can't flip → remap to a legible light step. */\n  [data-theme='dark'] .ddga-accordion__content {\n    color: var(--ddga-gray-300);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-accordion,\n    .ddga-accordion__item {\n      border-color: CanvasText;\n    }\n    .ddga-accordion__trigger:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/avatar.css

@@ -1,2 +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}[data-theme=dark] .ddga-avatar__fallback--default{background-color:var(--ddga-gray-800);color:var(--ddga-gray-200)}[data-theme=dark] .ddga-avatar__fallback--primary{background-color:var(--ddga-sa-900);color:var(--ddga-sa-200)}[data-theme=dark] .ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-700);color:var(--ddga-gray-100)}[data-theme=dark] .ddga-avatar__fallback--success{background-color:var(--ddga-success-900);color:var(--ddga-success-200)}[data-theme=dark] .ddga-avatar__fallback--warning{background-color:var(--ddga-warning-900);color:var(--ddga-warning-200)}[data-theme=dark] .ddga-avatar__fallback--destructive{background-color:var(--ddga-error-900);color:var(--ddga-error-200)}[data-theme=dark] .ddga-avatar__fallback--info{background-color:var(--ddga-info-900);color:var(--ddga-info-200)}[data-theme=dark] .ddga-avatar__status--offline{background-color:var(--ddga-gray-500)}@media (forced-colors:active){.ddga-avatar,.ddga-avatar__status{border:1px solid canvastext}.ddga-avatar-group>.ddga-avatar{outline-offset:-1px;outline:2px solid canvastext}}}
+@layer ddga-components{.ddga-avatar{--ddga-avatar-size:40px;--ddga-avatar-font-size:var(--ddga-font-size-sm);--ddga-avatar-font-weight:var(--ddga-font-weight-semibold);inline-size:var(--ddga-avatar-size);block-size:var(--ddga-avatar-size);background-color:var(--ddga-color-muted);color:var(--ddga-gray-700);font-size:var(--ddga-avatar-font-size);font-weight:var(--ddga-avatar-font-weight);vertical-align:middle;box-shadow:0 0 0 2px var(--ddga-color-background);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-font-size:var(--ddga-font-size-2xs);--ddga-avatar-font-weight:var(--ddga-font-weight-bold)}.ddga-avatar--sm{--ddga-avatar-size:32px;--ddga-avatar-font-size:var(--ddga-font-size-xs);--ddga-avatar-font-weight:var(--ddga-font-weight-semibold)}.ddga-avatar--md{--ddga-avatar-size:40px;--ddga-avatar-font-size:var(--ddga-font-size-sm);--ddga-avatar-font-weight:var(--ddga-font-weight-semibold)}.ddga-avatar--lg{--ddga-avatar-size:48px;--ddga-avatar-font-size:var(--ddga-font-size-base);--ddga-avatar-font-weight:var(--ddga-font-weight-medium)}.ddga-avatar--xl{--ddga-avatar-size:64px;--ddga-avatar-font-size:var(--ddga-font-size-xl);--ddga-avatar-font-weight:var(--ddga-font-weight-medium)}.ddga-avatar--2xl{--ddga-avatar-size:80px;--ddga-avatar-font-size:var(--ddga-font-size-3xl);--ddga-avatar-font-weight:var(--ddga-font-weight-regular)}.ddga-avatar--3xl{--ddga-avatar-size:120px;--ddga-avatar-font-size:var(--ddga-font-size-3xl);--ddga-avatar-font-weight:var(--ddga-font-weight-regular);box-shadow:0 0 0 4px var(--ddga-color-background)}.ddga-avatar--circle{border-radius:var(--ddga-radius-full)}.ddga-avatar--square{border-radius:var(--ddga-radius-sm)}.ddga-avatar--square.ddga-avatar--3xl{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{margin-inline-start:calc(var(--ddga-avatar-size) * -.25)}.ddga-avatar-group>.ddga-avatar:first-child{margin-inline-start:0}[data-theme=dark] .ddga-avatar__fallback--default{background-color:var(--ddga-gray-800);color:var(--ddga-gray-200)}[data-theme=dark] .ddga-avatar__fallback--primary{background-color:var(--ddga-sa-900);color:var(--ddga-sa-200)}[data-theme=dark] .ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-700);color:var(--ddga-gray-100)}[data-theme=dark] .ddga-avatar__fallback--success{background-color:var(--ddga-success-900);color:var(--ddga-success-200)}[data-theme=dark] .ddga-avatar__fallback--warning{background-color:var(--ddga-warning-900);color:var(--ddga-warning-200)}[data-theme=dark] .ddga-avatar__fallback--destructive{background-color:var(--ddga-error-900);color:var(--ddga-error-200)}[data-theme=dark] .ddga-avatar__fallback--info{background-color:var(--ddga-info-900);color:var(--ddga-info-200)}[data-theme=dark] .ddga-avatar__status--offline{background-color:var(--ddga-gray-500)}@media (forced-colors:active){.ddga-avatar,.ddga-avatar__status{border:1px solid canvastext}.ddga-avatar-group>.ddga-avatar{outline-offset:-1px;outline:2px solid canvastext}}}
 /*# sourceMappingURL=avatar.css.map */

package/dist/components/avatar.css.map

@@ -1 +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,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA","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  /* ─── Dark mode adjustments ─── */\n  /* The fallback schemes paint raw -100 tints with -700/-800 text — light\n     chips that stay legible but don't adapt to a dark page on their own. Flip\n     each to a dark -800/-900 surface with a light -100/-200 foreground\n     (mirrors alert.css). */\n\n  [data-theme='dark'] .ddga-avatar__fallback--default {\n    background-color: var(--ddga-gray-800);\n    color: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--primary {\n    background-color: var(--ddga-sa-900);\n    color: var(--ddga-sa-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--secondary {\n    background-color: var(--ddga-gray-700);\n    color: var(--ddga-gray-100);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--success {\n    background-color: var(--ddga-success-900);\n    color: var(--ddga-success-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--warning {\n    background-color: var(--ddga-warning-900);\n    color: var(--ddga-warning-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--destructive {\n    background-color: var(--ddga-error-900);\n    color: var(--ddga-error-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--info {\n    background-color: var(--ddga-info-900);\n    color: var(--ddga-info-200);\n  }\n  [data-theme='dark'] .ddga-avatar__status--offline {\n    background-color: var(--ddga-gray-500);\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    .ddga-avatar-group > .ddga-avatar {\n      outline: 2px solid CanvasText;\n      outline-offset: -1px;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAGE,kiBAuBA,kJAKA,qJAKA,qJAKA,qJAKA,mJAKA,sJAKA,yMASA,2DAIA,yDAGA,0EAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,yFAIA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA","sources":["src/components/avatar.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Root ─── */\n\n  .ddga-avatar {\n    --ddga-avatar-size: 40px;\n    --ddga-avatar-font-size: var(--ddga-font-size-sm);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\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    /* No overflow:hidden — status dot overhangs; image/fallback self-clip via border-radius. */\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-gray-700);\n    font-size: var(--ddga-avatar-font-size);\n    font-weight: var(--ddga-avatar-font-weight);\n    line-height: 1;\n    vertical-align: middle;\n    box-shadow: 0 0 0 2px var(--ddga-color-background);\n  }\n\n  /* Per size: SDGA type step + weight (weight lowers as the avatar grows).\n     2xl/3xl have no exact token (SDGA 30/36) → nearest step. */\n  .ddga-avatar--xs {\n    --ddga-avatar-size: 24px;\n    --ddga-avatar-font-size: var(--ddga-font-size-2xs); /* SDGA 10px */\n    --ddga-avatar-font-weight: var(--ddga-font-weight-bold);\n  }\n  .ddga-avatar--sm {\n    --ddga-avatar-size: 32px;\n    --ddga-avatar-font-size: var(--ddga-font-size-xs);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-avatar--md {\n    --ddga-avatar-size: 40px;\n    --ddga-avatar-font-size: var(--ddga-font-size-sm);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-avatar--lg {\n    --ddga-avatar-size: 48px;\n    --ddga-avatar-font-size: var(--ddga-font-size-base);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n  }\n  .ddga-avatar--xl {\n    --ddga-avatar-size: 64px;\n    --ddga-avatar-font-size: var(--ddga-font-size-xl);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n  }\n  .ddga-avatar--2xl {\n    --ddga-avatar-size: 80px;\n    --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n  }\n  .ddga-avatar--3xl {\n    --ddga-avatar-size: 120px;\n    --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n    --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n    box-shadow: 0 0 0 4px var(--ddga-color-background);\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-sm);\n  }\n  .ddga-avatar--square.ddga-avatar--3xl {\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    /* Overlap; logical margin flips in RTL. Separating ring = base box-shadow. */\n    margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\n  }\n  .ddga-avatar-group > .ddga-avatar:first-child {\n    margin-inline-start: 0;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The fallback schemes paint raw -100 tints with -700/-800 text — light\n     chips that stay legible but don't adapt to a dark page on their own. Flip\n     each to a dark -800/-900 surface with a light -100/-200 foreground\n     (mirrors alert.css). */\n\n  [data-theme='dark'] .ddga-avatar__fallback--default {\n    background-color: var(--ddga-gray-800);\n    color: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--primary {\n    background-color: var(--ddga-sa-900);\n    color: var(--ddga-sa-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--secondary {\n    background-color: var(--ddga-gray-700);\n    color: var(--ddga-gray-100);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--success {\n    background-color: var(--ddga-success-900);\n    color: var(--ddga-success-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--warning {\n    background-color: var(--ddga-warning-900);\n    color: var(--ddga-warning-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--destructive {\n    background-color: var(--ddga-error-900);\n    color: var(--ddga-error-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--info {\n    background-color: var(--ddga-info-900);\n    color: var(--ddga-info-200);\n  }\n  [data-theme='dark'] .ddga-avatar__status--offline {\n    background-color: var(--ddga-gray-500);\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    .ddga-avatar-group > .ddga-avatar {\n      outline: 2px solid CanvasText;\n      outline-offset: -1px;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/breadcrumb.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-breadcrumb{color:var(--ddga-text-secondary);font-family:inherit;line-height:1.4}.ddga-breadcrumb__list{align-items:center;gap:var(--ddga-space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ddga-breadcrumb__item{align-items:center;gap:var(--ddga-space-2);display:inline-flex}.ddga-breadcrumb__link{color:var(--ddga-text-secondary);border-radius:var(--ddga-radius-sm);text-decoration:none;transition:color .15s}.ddga-breadcrumb__link:hover{color:var(--ddga-text-primary);text-underline-offset:2px;text-decoration:underline}.ddga-breadcrumb__link:focus-visible{color:var(--ddga-text-primary);box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-breadcrumb__page{color:var(--ddga-text-primary);font-weight:500}.ddga-breadcrumb__separator{color:var(--ddga-text-tertiary);align-items:center;display:inline-flex}.ddga-breadcrumb__separator>svg{block-size:1em;inline-size:1em}[dir=rtl] .ddga-breadcrumb__separator>svg{transform:scaleX(-1)}.ddga-breadcrumb__ellipsis{inline-size:1.5em;color:var(--ddga-text-tertiary);justify-content:center;align-items:center;display:inline-flex}.ddga-breadcrumb__ellipsis>svg{block-size:1em;inline-size:1em}.ddga-breadcrumb--sm{font-size:var(--ddga-font-size-xs)}.ddga-breadcrumb--md{font-size:var(--ddga-font-size-sm)}@media (prefers-reduced-motion:reduce){.ddga-breadcrumb__link{transition:none}}@media (forced-colors:active){.ddga-breadcrumb__link,.ddga-breadcrumb__link:hover{color:linktext}.ddga-breadcrumb__link:focus-visible{outline-offset:2px;outline:2px solid highlight}.ddga-breadcrumb__page{color:canvastext}}}
+@layer ddga-components{.ddga-breadcrumb{color:var(--ddga-gray-700);font-family:inherit;line-height:1.4}.ddga-breadcrumb__list{align-items:center;gap:var(--ddga-space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ddga-breadcrumb__item{align-items:center;gap:var(--ddga-space-1);display:inline-flex}.ddga-breadcrumb__link{color:var(--ddga-gray-700);border-radius:var(--ddga-radius-sm);text-decoration:none;transition:color .15s}.ddga-breadcrumb__link:hover{color:var(--ddga-text-primary);text-underline-offset:2px;text-decoration:underline}.ddga-breadcrumb__link:focus-visible{color:var(--ddga-text-primary);box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-breadcrumb__page{color:var(--ddga-gray-400);font-weight:var(--ddga-font-weight-regular)}.ddga-breadcrumb__separator{color:var(--ddga-gray-400);align-items:center;display:inline-flex}.ddga-breadcrumb__separator>svg{block-size:1.143em;inline-size:1.143em}[dir=rtl] .ddga-breadcrumb__separator>svg{transform:scaleX(-1)}.ddga-breadcrumb__ellipsis{inline-size:1.5em;color:var(--ddga-text-tertiary);justify-content:center;align-items:center;display:inline-flex}.ddga-breadcrumb__ellipsis>svg{block-size:1em;inline-size:1em}.ddga-breadcrumb__ellipsis-trigger{appearance:none;font:inherit;color:var(--ddga-gray-700);cursor:pointer;border-radius:var(--ddga-radius-sm);background:0 0;border:0;padding:0}.ddga-breadcrumb__ellipsis-trigger:hover{color:var(--ddga-text-primary)}.ddga-breadcrumb__ellipsis-trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-breadcrumb--sm{font-size:var(--ddga-font-size-xs)}.ddga-breadcrumb--md{font-size:var(--ddga-font-size-sm)}@media (prefers-reduced-motion:reduce){.ddga-breadcrumb__link{transition:none}}@media (forced-colors:active){.ddga-breadcrumb__link,.ddga-breadcrumb__link:hover{color:linktext}.ddga-breadcrumb__link:focus-visible{outline-offset:2px;outline:2px solid highlight}.ddga-breadcrumb__page{color:canvastext}}}
 /*# sourceMappingURL=breadcrumb.css.map */

package/dist/components/breadcrumb.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBASE,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA","sources":["src/components/breadcrumb.css"],"sourcesContent":["@layer ddga-components {\n  /* Size lives on the root (.ddga-breadcrumb--{sm,md}). All descendant\n     selectors cascade from there. Logical properties handle the RTL flip\n     for spacing; the separator chevron flips via `[dir='rtl'] transform`\n     because chevrons are visual-direction glyphs that CSS logical\n     properties don't auto-mirror. */\n\n  /* ─── Root (nav) ─── */\n\n  .ddga-breadcrumb {\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    line-height: 1.4;\n  }\n\n  /* ─── List (ol) ─── */\n\n  .ddga-breadcrumb__list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    /* Spacing between items + separator handled at item level via gap so\n       wrapped lines stay readable. */\n    gap: var(--ddga-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-breadcrumb__item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Link (a) ─── */\n\n  .ddga-breadcrumb__link {\n    color: var(--ddga-text-secondary);\n    text-decoration: none;\n    border-radius: var(--ddga-radius-sm);\n    transition: color 150ms ease;\n  }\n\n  .ddga-breadcrumb__link:hover {\n    color: var(--ddga-text-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .ddga-breadcrumb__link:focus-visible {\n    outline: none;\n    color: var(--ddga-text-primary);\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Page (current) ─── */\n\n  .ddga-breadcrumb__page {\n    color: var(--ddga-text-primary);\n    font-weight: 500;\n  }\n\n  /* ─── Separator (li, decorative) ─── */\n\n  .ddga-breadcrumb__separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-breadcrumb__separator > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* RTL flip — chevron's geometry encodes direction. Only target the icon\n     (and any other svg child) so consumer-supplied custom separators (`/`,\n     `·`) that aren't direction-encoded stay un-flipped. */\n  [dir='rtl'] .ddga-breadcrumb__separator > svg {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Ellipsis ─── */\n\n  .ddga-breadcrumb__ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-breadcrumb__ellipsis > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-breadcrumb--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-breadcrumb--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-breadcrumb__link {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-breadcrumb__link {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:hover {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-breadcrumb__page {\n      color: CanvasText;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBASE,gFAQA,iIAYA,sFAQA,iIAOA,gHAMA,6HASA,8FAOA,8FAOA,uEAQA,+DAMA,2IAQA,8DAOA,gLAUA,wEAGA,0GAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA","sources":["src/components/breadcrumb.css"],"sourcesContent":["@layer ddga-components {\n  /* Size lives on the root (.ddga-breadcrumb--{sm,md}). All descendant\n     selectors cascade from there. Logical properties handle the RTL flip\n     for spacing; the separator chevron flips via `[dir='rtl'] transform`\n     because chevrons are visual-direction glyphs that CSS logical\n     properties don't auto-mirror. */\n\n  /* ─── Root (nav) ─── */\n\n  .ddga-breadcrumb {\n    color: var(--ddga-gray-700);\n    font-family: inherit;\n    line-height: 1.4;\n  }\n\n  /* ─── List (ol) ─── */\n\n  .ddga-breadcrumb__list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-breadcrumb__item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n  }\n\n  /* ─── Link (a) ─── */\n\n  .ddga-breadcrumb__link {\n    color: var(--ddga-gray-700);\n    text-decoration: none;\n    border-radius: var(--ddga-radius-sm);\n    transition: color 150ms ease;\n  }\n\n  .ddga-breadcrumb__link:hover {\n    color: var(--ddga-text-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .ddga-breadcrumb__link:focus-visible {\n    outline: none;\n    color: var(--ddga-text-primary);\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Page (current) ─── */\n\n  /* SDGA mutes the current page (disabled gray), not emphasize it. */\n  .ddga-breadcrumb__page {\n    color: var(--ddga-gray-400);\n    font-weight: var(--ddga-font-weight-regular);\n  }\n\n  /* ─── Separator (li, decorative) ─── */\n\n  .ddga-breadcrumb__separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-gray-400);\n  }\n\n  /* SDGA chevron is 16px against the 14px (md) text. */\n  .ddga-breadcrumb__separator > svg {\n    inline-size: 1.143em;\n    block-size: 1.143em;\n  }\n\n  /* RTL flip — chevron's geometry encodes direction. Only target the icon\n     (and any other svg child) so consumer-supplied custom separators (`/`,\n     `·`) that aren't direction-encoded stay un-flipped. */\n  [dir='rtl'] .ddga-breadcrumb__separator > svg {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Ellipsis ─── */\n\n  .ddga-breadcrumb__ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-breadcrumb__ellipsis > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* Interactive overflow trigger (BreadcrumbEllipsisTrigger): chromeless button.\n     The `…` is a Link → gray-700 (not the muted text-tertiary of the decorative span). */\n  .ddga-breadcrumb__ellipsis-trigger {\n    appearance: none;\n    border: 0;\n    background: none;\n    padding: 0;\n    font: inherit;\n    color: var(--ddga-gray-700);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n  }\n  .ddga-breadcrumb__ellipsis-trigger:hover {\n    color: var(--ddga-text-primary);\n  }\n  .ddga-breadcrumb__ellipsis-trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-breadcrumb--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-breadcrumb--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-breadcrumb__link {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-breadcrumb__link {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:hover {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-breadcrumb__page {\n      color: 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):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--destructive-outline{color:var(--ddga-color-destructive);border-color:var(--ddga-color-destructive);background-color:#0000}.ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-50)}.ddga-button--destructive-subtle{background-color:var(--ddga-error-50);color:var(--ddga-color-destructive)}.ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-100)}.ddga-button--destructive-ghost{color:var(--ddga-color-destructive);background-color:#0000}.ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-50)}.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--inverted.ddga-button--outline,.ddga-button--inverted.ddga-button--ghost{color:#fff;background-color:#0000}.ddga-button--inverted.ddga-button--outline{border-color:#fff6}.ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled=true]),.ddga-button--inverted.ddga-button--ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:#ffffff1f}.ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled=true]){border-color:#fff9}.ddga-button--inverted.ddga-button--destructive-outline,.ddga-button--inverted.ddga-button--destructive-ghost{color:var(--ddga-error-200)}.ddga-button--inverted.ddga-button--destructive-outline{border-color:var(--ddga-error-300)}.ddga-button--inverted.ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled=true]),.ddga-button--inverted.ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:#ffffff14}.ddga-button--fab{border-radius:var(--ddga-radius-full);box-shadow:var(--ddga-shadow-lg)}.ddga-button.ddga-button--fab:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 2px var(--ddga-color-ring), var(--ddga-shadow-lg)}.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}@media (prefers-reduced-motion:reduce){.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}[data-theme=dark] .ddga-button--destructive-subtle{background-color:#d92d202e}[data-theme=dark] .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:#d92d2047}[data-theme=dark] .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled=true]),[data-theme=dark] .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:#d92d202e}@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}}}
+@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--black{background-color:var(--ddga-gray-950);color:#fff}.ddga-button--black:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-gray-800)}.ddga-button--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-input);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--destructive-outline{color:var(--ddga-color-destructive);border-color:var(--ddga-error-200);background-color:#0000}.ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-50)}.ddga-button--destructive-subtle{background-color:var(--ddga-error-50);color:var(--ddga-color-destructive)}.ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-100)}.ddga-button--destructive-ghost{color:var(--ddga-color-destructive);background-color:#0000}.ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-50)}.ddga-button--primary[aria-pressed=true]{background-color:var(--ddga-sa-800)}.ddga-button--secondary[aria-pressed=true]{background-color:var(--ddga-gray-200)}.ddga-button--black[aria-pressed=true]{background-color:var(--ddga-gray-700)}.ddga-button--destructive[aria-pressed=true]{background-color:var(--ddga-error-800)}.ddga-button--primary:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-primary-active)}.ddga-button--secondary:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-secondary-hover)}.ddga-button--black:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-gray-600)}.ddga-button--destructive:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-900)}.ddga-button--destructive-subtle:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-200)}.ddga-button--outline:active:not(:disabled):not([aria-disabled=true]),.ddga-button--ghost:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-secondary-hover)}.ddga-button--destructive-outline:active:not(:disabled):not([aria-disabled=true]),.ddga-button--destructive-ghost:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-error-100)}.ddga-button--sm{height:24px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs);line-height:1.125rem}.ddga-button--md{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);line-height:1.25rem}.ddga-button--lg{height:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base);line-height:1.5rem}.ddga-button--icon{width:40px;height:40px;font-size:var(--ddga-font-size-base);padding:0}.ddga-button--icon-md{width:32px;height:32px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--icon-sm{width:28px;height:28px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--icon-xs{width:24px;height:24px;font-size:var(--ddga-font-size-xs);padding:0}.ddga-button--full-width{flex:1 0 100%;inline-size:100%}.ddga-button--on-color.ddga-button--black,.ddga-button--on-color.ddga-button--primary{color:var(--ddga-color-foreground);background-color:#fff;border-color:#0000}.ddga-button--on-color.ddga-button--black:hover:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--primary:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-alpha-white-80)}.ddga-button--on-color.ddga-button--black:active:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--primary:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-alpha-white-60)}.ddga-button--on-color.ddga-button--black[aria-pressed=true],.ddga-button--on-color.ddga-button--primary[aria-pressed=true]{background-color:var(--ddga-alpha-white-70)}.ddga-button--on-color.ddga-button--secondary,.ddga-button--on-color.ddga-button--ghost{color:#fff;background-color:#0000;border-color:#0000}.ddga-button--on-color.ddga-button--outline{color:#fff;border-color:var(--ddga-alpha-white-40);background-color:#0000}.ddga-button--on-color.ddga-button--secondary:hover:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--ghost:hover:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--outline:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-alpha-white-20)}.ddga-button--on-color.ddga-button--secondary:active:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--ghost:active:not(:disabled):not([aria-disabled=true]),.ddga-button--on-color.ddga-button--outline:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-alpha-white-40)}.ddga-button--on-color.ddga-button--secondary[aria-pressed=true],.ddga-button--on-color.ddga-button--ghost[aria-pressed=true],.ddga-button--on-color.ddga-button--outline[aria-pressed=true]{background-color:var(--ddga-alpha-white-30)}.ddga-button--on-color.ddga-button--destructive-outline,.ddga-button--on-color.ddga-button--destructive-ghost{color:var(--ddga-error-200)}.ddga-button--on-color.ddga-button--destructive-outline{border-color:var(--ddga-error-200)}.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}@media (prefers-reduced-motion:reduce){.ddga-button{transition:none}}.ddga-button:disabled,.ddga-button[aria-disabled=true]{cursor:not-allowed;background-color:var(--ddga-gray-200);color:var(--ddga-gray-400);border-color:#0000}.ddga-button--outline:disabled,.ddga-button--outline[aria-disabled=true],.ddga-button--destructive-outline:disabled,.ddga-button--destructive-outline[aria-disabled=true]{border-color:var(--ddga-color-border);background-color:#0000}.ddga-button--ghost:disabled,.ddga-button--ghost[aria-disabled=true],.ddga-button--destructive-ghost:disabled,.ddga-button--destructive-ghost[aria-disabled=true]{background-color:#0000}.ddga-button--on-color:disabled,.ddga-button--on-color[aria-disabled=true]{background-color:var(--ddga-alpha-white-20);color:var(--ddga-alpha-white-40);border-color:var(--ddga-alpha-white-20)}[data-theme=dark] .ddga-button:disabled,[data-theme=dark] .ddga-button[aria-disabled=true]{background-color:var(--ddga-gray-800);color:var(--ddga-gray-500)}.ddga-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-color-background), inset 0 0 0 4px var(--ddga-color-focus-ring);outline:none}.ddga-button--on-color:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-color-foreground), inset 0 0 0 4px #fff}[data-theme=dark] .ddga-button--destructive-subtle{background-color:#d92d202e}[data-theme=dark] .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:#d92d2047}[data-theme=dark] .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled=true]),[data-theme=dark] .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:#d92d202e}@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,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,wIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAaA,wHAKA,+DAGA,+MAIA,8GAGA,0IAMA,2FAGA,uOAiBA,yFASA,mJASA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAgBA,8EAGA,6HAIA,+NASA,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 (filled, primary 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  /* ─── Variant: Destructive Outline (transparent + error border + error text) ─── */\n\n  .ddga-button--destructive-outline {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n    border-color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* ─── Variant: Destructive Subtle (light tonal bg + error text) ─── */\n\n  .ddga-button--destructive-subtle {\n    background-color: var(--ddga-error-50);\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-100);\n  }\n\n  /* ─── Variant: Destructive Ghost (transparent + error text, hover tints) ─── */\n\n  .ddga-button--destructive-ghost {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\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  /* ─── Inverted (for use on colored / dark backgrounds) ─── */\n  /*\n   * Only inverts the non-filled families — `outline`, `ghost`, and\n   * destructive's outline/ghost forms. Filled variants (`primary`,\n   * `secondary`, `destructive`, `destructive-subtle`) already carry their\n   * own background contrast and keep their normal palette. Hover uses a\n   * low-opacity white overlay so it works against any background tint.\n   */\n  .ddga-button--inverted.ddga-button--outline,\n  .ddga-button--inverted.ddga-button--ghost {\n    color: #ffffff;\n    background-color: transparent;\n  }\n  .ddga-button--inverted.ddga-button--outline {\n    border-color: rgba(255, 255, 255, 0.4);\n  }\n  .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--inverted.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgba(255, 255, 255, 0.12);\n  }\n  .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n    border-color: rgba(255, 255, 255, 0.6);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline,\n  .ddga-button--inverted.ddga-button--destructive-ghost {\n    /* On colored bgs, keep destructive readable by using a light error\n       tint rather than full white (which would lose the destructive cue). */\n    color: var(--ddga-error-200);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline {\n    border-color: var(--ddga-error-300);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline:hover:not(:disabled):not(\n      [aria-disabled='true']\n    ),\n  .ddga-button--inverted.ddga-button--destructive-ghost:hover:not(:disabled):not(\n      [aria-disabled='true']\n    ) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  /* ─── FAB (floating action button) ─── */\n  /*\n   * Orthogonal modifier: fully-rounded + elevated. Composes with any color\n   * `variant` and with `size` — `size=\"icon\"` yields a circle, a text size an\n   * extended pill. Positioning is the consumer's job (see the story recipe).\n   * Shadow is static (no hover lift) to keep the base transition intact; the\n   * color variant's own :hover handles the interaction feedback.\n   */\n  .ddga-button--fab {\n    border-radius: var(--ddga-radius-full);\n    box-shadow: var(--ddga-shadow-lg);\n  }\n  /* The base `.ddga-button:focus-visible` (defined later in this file) sets\n     box-shadow for the ring, which would clobber the elevation. Use a\n     two-class selector so this wins on specificity regardless of source order\n     (matches the `.ddga-button--inverted.ddga-button--outline` idiom), and\n     render the ring AND the drop shadow together. */\n  .ddga-button.ddga-button--fab:focus-visible {\n    border-color: var(--ddga-color-ring);\n    box-shadow:\n      0 0 0 2px var(--ddga-color-ring),\n      var(--ddga-shadow-lg);\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  @media (prefers-reduced-motion: reduce) {\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 (`.ddga-icon-flip`) is a shared utility — it\n     now lives in reset.css (ddga-base) so Link and other components can reuse\n     it without depending on this sheet. */\n\n  /* ─── Dark mode adjustments ─── */\n  /* The destructive subtle/outline/ghost families fill from raw --ddga-error-50/\n     -100 tints, which stay light in dark mode (the raw scale isn't theme-flipped).\n     Recolor to translucent error tints so they read as dark-surface chips —\n     mirrors alert.css. Text uses the semantic --ddga-color-destructive, which\n     already adapts. */\n  [data-theme='dark'] .ddga-button--destructive-subtle {\n    background-color: rgb(217 45 32 / 0.18);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.28);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']),\n  [data-theme='dark']\n    .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.18);\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":[]}
+{"version":3,"mappings":"AAAA,uBAGE,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,qEAIA,yGAMA,qHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,gIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,6EAGA,iFAGA,6EAGA,oFAMA,wHAGA,2HAGA,0GAGA,iHAGA,wHAIA,6LAIA,yMAOA,wHAMA,uHAMA,wHAOA,yFAMA,0FAQA,0FAMA,0FASA,wDAQA,kKAMA,gOAIA,kOAIA,wKAMA,6IAOA,sHAMA,6TAKA,gUAKA,yOAOA,0IAIA,2FAMA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,8JAOA,uOAOA,yLAOA,gMAMA,4JAOA,8IAOA,mHAgBA,8EAGA,6HAIA,+NASA,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: Black ─── */\n\n  .ddga-button--black {\n    background-color: var(--ddga-gray-950);\n    color: #ffffff;\n  }\n  .ddga-button--black:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-gray-800);\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-input);\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 (filled, primary 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  /* ─── Variant: Destructive Outline (transparent + error border + error text) ─── */\n\n  .ddga-button--destructive-outline {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n    border-color: var(--ddga-error-200);\n  }\n  .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* ─── Variant: Destructive Subtle (light tonal bg + error text) ─── */\n\n  .ddga-button--destructive-subtle {\n    background-color: var(--ddga-error-50);\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-100);\n  }\n\n  /* ─── Variant: Destructive Ghost (transparent + error text, hover tints) ─── */\n\n  .ddga-button--destructive-ghost {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* ─── Selected (aria-pressed) ─── */\n\n  .ddga-button--primary[aria-pressed='true'] {\n    background-color: var(--ddga-sa-800);\n  }\n  .ddga-button--secondary[aria-pressed='true'] {\n    background-color: var(--ddga-gray-200);\n  }\n  .ddga-button--black[aria-pressed='true'] {\n    background-color: var(--ddga-gray-700);\n  }\n  .ddga-button--destructive[aria-pressed='true'] {\n    background-color: var(--ddga-error-800);\n  }\n\n  /* ─── Pressed (:active) ─── */\n\n  .ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-primary-active);\n  }\n  .ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n  .ddga-button--black:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-gray-600);\n  }\n  .ddga-button--destructive:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-900);\n  }\n  .ddga-button--destructive-subtle:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-200);\n  }\n  /* Transparent variants: pressed = one step past the hover tint. */\n  .ddga-button--outline:active:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n  .ddga-button--destructive-outline:active:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--destructive-ghost:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-100);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-button--sm {\n    height: 24px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.125rem;\n  }\n  .ddga-button--md {\n    height: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.25rem;\n  }\n  .ddga-button--lg {\n    height: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.5rem;\n  }\n  /* Icon-only squares (40 / 32 / 28 / 24; icon-sm 28 is off-spec). */\n  .ddga-button--icon {\n    height: 40px;\n    width: 40px;\n    padding: 0;\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-button--icon-md {\n    height: 32px;\n    width: 32px;\n    padding: 0;\n    font-size: var(--ddga-font-size-sm);\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  .ddga-button--icon-xs {\n    height: 24px;\n    width: 24px;\n    padding: 0;\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Full Width ─── */\n\n  .ddga-button--full-width {\n    inline-size: 100%;\n    flex: 1 0 100%;\n  }\n\n  /* ─── On-color (on dark / brand surfaces) ─── */\n\n  /* black + primary → white solid (dark label) */\n  .ddga-button--on-color.ddga-button--black,\n  .ddga-button--on-color.ddga-button--primary {\n    background-color: #ffffff;\n    color: var(--ddga-color-foreground);\n    border-color: transparent;\n  }\n  .ddga-button--on-color.ddga-button--black:hover:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-alpha-white-80);\n  }\n  .ddga-button--on-color.ddga-button--black:active:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-alpha-white-60);\n  }\n  .ddga-button--on-color.ddga-button--black[aria-pressed='true'],\n  .ddga-button--on-color.ddga-button--primary[aria-pressed='true'] {\n    background-color: var(--ddga-alpha-white-70);\n  }\n\n  /* secondary (neutral) + ghost (subtle) → white text on transparent */\n  .ddga-button--on-color.ddga-button--secondary,\n  .ddga-button--on-color.ddga-button--ghost {\n    background-color: transparent;\n    color: #ffffff;\n    border-color: transparent;\n  }\n  /* outline → white text + translucent-white border */\n  .ddga-button--on-color.ddga-button--outline {\n    background-color: transparent;\n    color: #ffffff;\n    border-color: var(--ddga-alpha-white-40);\n  }\n  /* shared transparent-white hover / pressed / selected */\n  .ddga-button--on-color.ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-alpha-white-20);\n  }\n  .ddga-button--on-color.ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--on-color.ddga-button--outline:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-alpha-white-40);\n  }\n  .ddga-button--on-color.ddga-button--secondary[aria-pressed='true'],\n  .ddga-button--on-color.ddga-button--ghost[aria-pressed='true'],\n  .ddga-button--on-color.ddga-button--outline[aria-pressed='true'] {\n    background-color: var(--ddga-alpha-white-30);\n  }\n\n  /* destructive outline / ghost → light error label (DGA danger on-color) */\n  .ddga-button--on-color.ddga-button--destructive-outline,\n  .ddga-button--on-color.ddga-button--destructive-ghost {\n    color: var(--ddga-error-200);\n  }\n  .ddga-button--on-color.ddga-button--destructive-outline {\n    border-color: var(--ddga-error-200);\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  @media (prefers-reduced-motion: reduce) {\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    cursor: not-allowed;\n    background-color: var(--ddga-gray-200);\n    color: var(--ddga-gray-400);\n    border-color: transparent;\n  }\n  .ddga-button--outline:disabled,\n  .ddga-button--outline[aria-disabled='true'],\n  .ddga-button--destructive-outline:disabled,\n  .ddga-button--destructive-outline[aria-disabled='true'] {\n    background-color: transparent;\n    border-color: var(--ddga-color-border);\n  }\n  .ddga-button--ghost:disabled,\n  .ddga-button--ghost[aria-disabled='true'],\n  .ddga-button--destructive-ghost:disabled,\n  .ddga-button--destructive-ghost[aria-disabled='true'] {\n    background-color: transparent;\n  }\n  /* On-color disabled: translucent white (a gray chip would vanish on color). */\n  .ddga-button--on-color:disabled,\n  .ddga-button--on-color[aria-disabled='true'] {\n    background-color: var(--ddga-alpha-white-20);\n    color: var(--ddga-alpha-white-40);\n    border-color: var(--ddga-alpha-white-20);\n  }\n  [data-theme='dark'] .ddga-button:disabled,\n  [data-theme='dark'] .ddga-button[aria-disabled='true'] {\n    background-color: var(--ddga-gray-800);\n    color: var(--ddga-gray-500);\n  }\n\n  /* Inset double ring (drawn inside so the box never shifts). */\n  .ddga-button:focus-visible {\n    outline: none;\n    box-shadow:\n      inset 0 0 0 2px var(--ddga-color-background),\n      inset 0 0 0 4px var(--ddga-color-focus-ring);\n  }\n  /* On-color: inverted ring (dark inner + white outer). */\n  .ddga-button--on-color:focus-visible {\n    box-shadow:\n      inset 0 0 0 2px var(--ddga-color-foreground),\n      inset 0 0 0 4px #ffffff;\n  }\n\n  /* RTL directional icon flip (`.ddga-icon-flip`) is a shared utility — it\n     now lives in reset.css (ddga-base) so Link and other components can reuse\n     it without depending on this sheet. */\n\n  /* ─── Dark mode adjustments ─── */\n  /* The destructive subtle/outline/ghost families fill from raw --ddga-error-50/\n     -100 tints, which stay light in dark mode (the raw scale isn't theme-flipped).\n     Recolor to translucent error tints so they read as dark-surface chips —\n     mirrors alert.css. Text uses the semantic --ddga-color-destructive, which\n     already adapts. */\n  [data-theme='dark'] .ddga-button--destructive-subtle {\n    background-color: rgb(217 45 32 / 0.18);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.28);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']),\n  [data-theme='dark']\n    .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.18);\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/calendar.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-calendar-popover{z-index:50;background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);display:flex;overflow:hidden}.ddga-calendar-popover[data-entering]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-calendar-in}.ddga-calendar-popover[data-exiting]{animation:80ms ease-in ddga-calendar-out}@keyframes ddga-calendar-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-calendar-out{0%{opacity:1}to{opacity:0}}.ddga-calendar-dialog{min-block-size:0;max-block-size:100%;padding:var(--ddga-space-3);box-sizing:border-box;outline:none;flex:auto;overflow:auto}.ddga-calendar-toggle{inline-size:100%;background-color:var(--ddga-color-muted);border-radius:var(--ddga-radius-md);margin-block-end:var(--ddga-space-3);padding:2px;display:inline-flex}.ddga-calendar-toggle__button{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:calc(var(--ddga-radius-md) - 2px);color:var(--ddga-text-secondary);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;background-color:#0000;border:0;outline:none;flex:1 1 0;transition:background-color .12s,color .12s}.ddga-calendar-toggle__button[data-active]{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);box-shadow:0 1px 2px #00000014}.ddga-calendar-toggle__button:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar{inline-size:min(100%,280px)}.ddga-calendar__header{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);margin-block-end:var(--ddga-space-2);display:flex}.ddga-calendar__nav{border-radius:var(--ddga-radius-sm);block-size:1.75rem;inline-size:1.75rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-calendar__nav:hover{background-color:var(--ddga-color-muted);color:var(--ddga-color-foreground)}.ddga-calendar__nav[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar__nav[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-calendar__heading{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);text-align:center;color:var(--ddga-color-foreground);flex:auto;margin:0}.ddga-calendar__nav-selects{justify-content:center;align-items:center;gap:var(--ddga-space-1);flex:auto;min-inline-size:0;display:inline-flex}.ddga-calendar__select{appearance:none;border-radius:var(--ddga-radius-sm);padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-color-foreground);cursor:pointer;font-variant-numeric:tabular-nums;text-align:center;text-align-last:center;background-color:#0000;border:1px solid #0000;outline:none;max-inline-size:100%;margin:0}.ddga-calendar__select:hover{background-color:var(--ddga-color-muted)}.ddga-calendar__select:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-calendar__select option{color:canvastext;background-color:canvas}.ddga-calendar__year-select{min-inline-size:4.5ch}.ddga-calendar__grid{border-collapse:collapse;inline-size:100%}.ddga-calendar__weekday{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-tertiary);text-align:center}.ddga-calendar__cell{text-align:center;block-size:2rem;inline-size:2rem;font-size:var(--ddga-font-size-sm);font-variant-numeric:tabular-nums;color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.ddga-calendar__cell[data-today]:not([data-selected]){box-shadow:inset 0 0 0 1.5px var(--ddga-color-primary);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-calendar__cell-primary{font-size:inherit;line-height:1}.ddga-calendar__cell-secondary{color:var(--ddga-text-tertiary);margin-block-start:1px;font-size:.625rem;line-height:1}.ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary{color:inherit;opacity:.85}.ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-color-muted)}.ddga-calendar__cell[data-focus-visible]{box-shadow:inset 0 0 0 2px var(--ddga-color-ring)}.ddga-calendar__cell[data-selected]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-calendar__cell[data-disabled],.ddga-calendar__cell[data-unavailable]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-calendar__cell[data-outside-month]{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-calendar-toggle__button{transition:none}.ddga-calendar-popover[data-entering],.ddga-calendar-popover[data-exiting]{animation:none}}@media (forced-colors:active){.ddga-calendar-popover{border:1px solid canvastext}.ddga-calendar__cell[data-selected]{color:highlighttext;background-color:highlight}.ddga-calendar__cell[data-focus-visible]{outline-offset:1px;outline:2px solid highlight}.ddga-calendar-toggle__button[data-active]{color:highlighttext;background-color:highlight}}}
+@layer ddga-components{.ddga-calendar-popover{z-index:50;background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-2xl);display:flex;overflow:hidden}.ddga-calendar-popover[data-entering]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-calendar-in}.ddga-calendar-popover[data-exiting]{animation:80ms ease-in ddga-calendar-out}@keyframes ddga-calendar-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-calendar-out{0%{opacity:1}to{opacity:0}}.ddga-calendar-dialog{min-block-size:0;max-block-size:100%;padding:var(--ddga-space-4);box-sizing:border-box;outline:none;flex:auto;overflow:auto}.ddga-calendar-toggle{inline-size:100%;background-color:var(--ddga-color-muted);border-radius:var(--ddga-radius-md);margin-block-end:var(--ddga-space-3);padding:2px;display:inline-flex}.ddga-calendar-toggle__button{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:calc(var(--ddga-radius-md) - 2px);color:var(--ddga-text-secondary);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;background-color:#0000;border:0;outline:none;flex:1 1 0;transition:background-color .12s,color .12s}.ddga-calendar-toggle__button[data-active]{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);box-shadow:0 1px 2px #00000014}.ddga-calendar-toggle__button:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar{inline-size:392px;max-inline-size:100%}.ddga-calendar__header{align-items:center;gap:var(--ddga-space-2);block-size:40px;margin-block-end:var(--ddga-space-2);display:flex}.ddga-calendar__nav-group{align-items:center;margin-inline-start:auto;display:inline-flex}.ddga-calendar__nav{border-radius:var(--ddga-radius-sm);block-size:40px;inline-size:40px;color:var(--ddga-text-primary);cursor:pointer;background-color:#0000;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-calendar__nav:hover{background-color:var(--ddga-color-muted);color:var(--ddga-color-foreground)}.ddga-calendar__nav[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar__nav[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-calendar__heading{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);text-align:center;color:var(--ddga-color-foreground);flex:auto;margin:0}.ddga-calendar__nav-selects{align-items:center;gap:var(--ddga-space-2);min-inline-size:0;display:inline-flex}.ddga-calendar__select{appearance:none;border-radius:var(--ddga-radius-sm);font:inherit;font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-primary);cursor:pointer;font-variant-numeric:tabular-nums;background-color:#0000;border:1px solid #0000;outline:none;max-inline-size:100%;margin:0}.ddga-calendar__select:focus-visible{box-shadow:0 0 0 2px var(--ddga-text-primary)}.ddga-calendar__select option{color:canvastext;background-color:canvas}.ddga-calendar__month-select{font-size:var(--ddga-font-size-base);line-height:var(--ddga-line-height-base,1.5);padding:0}.ddga-calendar__year-chip{border-radius:var(--ddga-radius-sm);align-items:center;display:inline-flex;position:relative}.ddga-calendar__year-chip:hover{background-color:var(--ddga-color-muted)}.ddga-calendar__year-select{block-size:32px;padding-inline:var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);font-size:var(--ddga-font-size-sm);min-inline-size:4.5ch}.ddga-calendar__year-chevron{pointer-events:none;block-size:1rem;inline-size:1rem;color:var(--ddga-text-primary);position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-calendar__grid{border-collapse:separate;inline-size:100%;border-spacing:0 var(--ddga-space-1)}.ddga-calendar__weekday{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-text-tertiary);text-align:center}.ddga-calendar__cell{appearance:none;text-align:center;block-size:2.5rem;inline-size:2.5rem;font-size:var(--ddga-font-size-base);font-variant-numeric:tabular-nums;color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:#0000;border:0;outline:none;flex-direction:column;justify-content:center;align-items:center;margin-inline:auto;padding:0;line-height:1;display:inline-flex}.ddga-calendar__cell[data-today]:not([data-selected]){box-shadow:inset 0 0 0 2px var(--ddga-color-primary);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-medium)}.ddga-calendar__cell-primary{font-size:inherit;line-height:1}.ddga-calendar__cell-secondary{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);margin-block-start:1px;line-height:1}.ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary{color:inherit;opacity:.85}.ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-sa-100)}.ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-sa-200)}.ddga-calendar__cell[data-focus-visible]{box-shadow:inset 0 0 0 2px var(--ddga-text-primary)}.ddga-calendar__cell[data-selected]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-calendar__cell[data-disabled],.ddga-calendar__cell[data-unavailable]{color:var(--ddga-text-placeholder);cursor:not-allowed}.ddga-calendar__cell[data-outside-month]{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-calendar-toggle__button{transition:none}.ddga-calendar-popover[data-entering],.ddga-calendar-popover[data-exiting]{animation:none}}@media (forced-colors:active){.ddga-calendar-popover{border:1px solid canvastext}.ddga-calendar__cell[data-selected]{color:highlighttext;background-color:highlight}.ddga-calendar__cell[data-focus-visible]{outline-offset:1px;outline:2px solid highlight}.ddga-calendar-toggle__button[data-active]{color:highlighttext;background-color:highlight}}}
 /*# sourceMappingURL=calendar.css.map */

package/dist/components/calendar.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAeE,+PAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAMA,2CAIA,kJAQA,oQAcA,sGAIA,oFAGA,sFASA,gLAcA,8IASA,mcAoBA,sEAGA,qHAMA,uEAIA,kDAKA,+DAKA,0LAYA,8aAuBA,0LASA,6DAIA,sHAMA,6FAIA,sHAGA,2FAGA,0HAIA,8HAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA","sources":["src/components/calendar.css"],"sourcesContent":["@layer ddga-components {\n  /* Shared calendar dropdown chrome — consumed by both DatePicker and\n     DateRangePicker. The field/trigger surface stays per-component\n     (date-picker.css / date-range-picker.css); everything inside the popover\n     (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n     identical regardless of single-date vs range selection, so it lives here. */\n\n  /* ─── Popover (the floating panel) ─── */\n\n  /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n     based on the space available between the trigger and the viewport edge\n     (minus `containerPadding`). We pair that with `overflow: auto` on the inner\n     Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n     the content scrolls instead of being clipped. `overflow: hidden` stays on\n     the popover so the rounded corners crop animation bleed. */\n  .ddga-calendar-popover {\n    z-index: 50;\n    display: flex;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    overflow: hidden;\n  }\n\n  /* react-aria emits data-entering / data-exiting during transitions. */\n  .ddga-calendar-popover[data-entering] {\n    animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-calendar-popover[data-exiting] {\n    animation: ddga-calendar-out 80ms ease-in;\n  }\n  @keyframes ddga-calendar-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-calendar-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Dialog (panel padding + scroll container) ─── */\n\n  /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n     container inside the popover. The Popover constrains height via its\n     react-aria-set `max-height`; the Dialog respects that bound and scrolls\n     internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n     is the flex-child trick that lets the scroll container actually shrink. */\n  .ddga-calendar-dialog {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    max-block-size: 100%;\n    padding: var(--ddga-space-3);\n    outline: none;\n    overflow: auto;\n    box-sizing: border-box;\n  }\n\n  /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n  .ddga-calendar-toggle {\n    display: inline-flex;\n    inline-size: 100%;\n    margin-block-end: var(--ddga-space-3);\n    padding: 2px;\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n  }\n  .ddga-calendar-toggle__button {\n    flex: 1 1 0;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    outline: none;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-calendar-toggle__button[data-active] {\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n  }\n  .ddga-calendar-toggle__button:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Calendar grid ─── */\n\n  .ddga-calendar {\n    inline-size: min(100%, 280px);\n  }\n\n  .ddga-calendar__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n    margin-block-end: var(--ddga-space-2);\n  }\n\n  .ddga-calendar__nav {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    outline: none;\n  }\n  .ddga-calendar__nav:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-calendar__nav[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-calendar__nav[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* RTL chevron direction is handled in the picker components by swapping the\n     icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n     robust than a CSS scaleX flip because it doesn't rely on the popover portal\n     correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n  .ddga-calendar__heading {\n    flex: 1 1 auto;\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    text-align: center;\n    color: var(--ddga-color-foreground);\n  }\n\n  /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n  /* Native <select>s give free keyboard support + native focus rings +\n     screen-reader announcements; styling stays minimal so the platform's\n     wheel/typeahead stays untouched. */\n  .ddga-calendar__nav-selects {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  .ddga-calendar__select {\n    appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    margin: 0;\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-color-foreground);\n    cursor: pointer;\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    text-align: center;\n    text-align-last: center;\n    max-inline-size: 100%;\n  }\n  .ddga-calendar__select:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-calendar__select:focus-visible {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n  /* Native option elements pick up the OS theme; can't fully style them, but\n     ensure the popup respects RTL on supporting browsers. */\n  .ddga-calendar__select option {\n    color: CanvasText;\n    background-color: Canvas;\n  }\n  .ddga-calendar__year-select {\n    /* The year string is short (4 digits) — give it just enough width. */\n    min-inline-size: 4.5ch;\n  }\n\n  .ddga-calendar__grid {\n    inline-size: 100%;\n    border-collapse: collapse;\n  }\n\n  .ddga-calendar__weekday {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n     <td>. Style the inner element so the focus ring + selected background stay\n     inside the cell footprint. Flex column so a secondary day number (when\n     `showSecondaryCalendar` is on) stacks neatly under the primary. */\n  .ddga-calendar__cell {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    text-align: center;\n    font-size: var(--ddga-font-size-sm);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--ddga-color-foreground);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Today ring — visible whenever a cell represents \"today\" in the displayed\n     calendar (react-aria emits data-today). Inset to stay inside the cell;\n     selected wins by re-painting the background. */\n  .ddga-calendar__cell[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1.5px var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n\n  /* Dual-calendar layout: the primary day stays at the normal size; the\n     secondary (alternate calendar) renders below at ~70% size in the muted text\n     color. Selected state inherits the contrast color for both. */\n  .ddga-calendar__cell-primary {\n    font-size: inherit;\n    line-height: 1;\n  }\n  .ddga-calendar__cell-secondary {\n    margin-block-start: 1px;\n    font-size: 0.625rem;\n    line-height: 1;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n    color: inherit;\n    opacity: 0.85;\n  }\n  .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-calendar__cell[data-focus-visible] {\n    box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-calendar__cell[data-selected] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-calendar__cell[data-disabled],\n  .ddga-calendar__cell[data-unavailable] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* Outside-month cells are fully clickable in the single picker — selecting\n     one navigates the visible month. Use a softer text color (no opacity\n     reduction) so they read as low-emphasis-but-active peers, not disabled. */\n  .ddga-calendar__cell[data-outside-month] {\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-calendar-toggle__button {\n      transition: none;\n    }\n    .ddga-calendar-popover[data-entering],\n    .ddga-calendar-popover[data-exiting] {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-calendar-popover {\n      border: 1px solid CanvasText;\n    }\n    .ddga-calendar__cell[data-selected] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-calendar__cell[data-focus-visible] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-calendar-toggle__button[data-active] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAeE,sNAWA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAOA,sDAOA,oIAOA,0FAOA,4PAcA,sGAIA,oFAGA,sFASA,gLAiBA,6GAOA,4SAeA,mFAGA,uEAMA,yHASA,uHAMA,yEAGA,yKAMA,wKAYA,oGAMA,6LAcA,yfA4BA,sLASA,6DAIA,uIAMA,6FAIA,iHAGA,iHAGA,6FAGA,0HAIA,iIAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA","sources":["src/components/calendar.css"],"sourcesContent":["@layer ddga-components {\n  /* Shared calendar dropdown chrome — consumed by both DatePicker and\n     DateRangePicker. The field/trigger surface stays per-component\n     (date-picker.css / date-range-picker.css); everything inside the popover\n     (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n     identical regardless of single-date vs range selection, so it lives here. */\n\n  /* ─── Popover (the floating panel) ─── */\n\n  /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n     based on the space available between the trigger and the viewport edge\n     (minus `containerPadding`). We pair that with `overflow: auto` on the inner\n     Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n     the content scrolls instead of being clipped. `overflow: hidden` stays on\n     the popover so the rounded corners crop animation bleed. */\n  .ddga-calendar-popover {\n    z-index: 50;\n    display: flex;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-2xl);\n    overflow: hidden;\n  }\n\n  /* react-aria emits data-entering / data-exiting during transitions. */\n  .ddga-calendar-popover[data-entering] {\n    animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-calendar-popover[data-exiting] {\n    animation: ddga-calendar-out 80ms ease-in;\n  }\n  @keyframes ddga-calendar-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-calendar-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Dialog (panel padding + scroll container) ─── */\n\n  /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n     container inside the popover. The Popover constrains height via its\n     react-aria-set `max-height`; the Dialog respects that bound and scrolls\n     internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n     is the flex-child trick that lets the scroll container actually shrink. */\n  .ddga-calendar-dialog {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    max-block-size: 100%;\n    padding: var(--ddga-space-4);\n    outline: none;\n    overflow: auto;\n    box-sizing: border-box;\n  }\n\n  /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n  .ddga-calendar-toggle {\n    display: inline-flex;\n    inline-size: 100%;\n    margin-block-end: var(--ddga-space-3);\n    padding: 2px;\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n  }\n  .ddga-calendar-toggle__button {\n    flex: 1 1 0;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    outline: none;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-calendar-toggle__button[data-active] {\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n  }\n  .ddga-calendar-toggle__button:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Calendar grid ─── */\n\n  /* SDGA calendar = 392px (7 columns × 56px). */\n  .ddga-calendar {\n    inline-size: 392px;\n    max-inline-size: 100%;\n  }\n\n  /* SDGA header: month label + year chip at inline-start; the prev/next arrows\n     group together at inline-end (flips with dir). */\n  .ddga-calendar__header {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    block-size: 40px;\n    margin-block-end: var(--ddga-space-2);\n  }\n  .ddga-calendar__nav-group {\n    display: inline-flex;\n    align-items: center;\n    margin-inline-start: auto;\n  }\n\n  /* SDGA arrow buttons (arrow-left-02 / arrow-right-02), 40px hit area. */\n  .ddga-calendar__nav {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 40px;\n    block-size: 40px;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-primary);\n    cursor: pointer;\n    outline: none;\n  }\n  .ddga-calendar__nav:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-calendar__nav[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-calendar__nav[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* RTL chevron direction is handled in the picker components by swapping the\n     icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n     robust than a CSS scaleX flip because it doesn't rely on the popover portal\n     correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n  .ddga-calendar__heading {\n    flex: 1 1 auto;\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    text-align: center;\n    color: var(--ddga-color-foreground);\n  }\n\n  /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n  /* Native <select>s give free keyboard support + native focus rings +\n     screen-reader announcements; styling stays minimal so the platform's\n     wheel/typeahead stays untouched. */\n  /* SDGA: month + year sit at the header inline-start. The native <select>s are\n     kept (free keyboard + a11y + the consumer's month/year-jump feature) but\n     restyled — month reads as a plain text label, year as a chevron chip. */\n  .ddga-calendar__nav-selects {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    min-inline-size: 0;\n  }\n\n  .ddga-calendar__select {\n    appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    margin: 0;\n    font: inherit;\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-text-primary);\n    cursor: pointer;\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    max-inline-size: 100%;\n  }\n  .ddga-calendar__select:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-text-primary);\n  }\n  .ddga-calendar__select option {\n    color: CanvasText;\n    background-color: Canvas;\n  }\n\n  /* Month = SDGA text label (Text md/Medium, no chip chrome). */\n  .ddga-calendar__month-select {\n    padding: 0;\n    font-size: var(--ddga-font-size-base);\n    line-height: var(--ddga-line-height-base, 1.5);\n  }\n\n  /* Year = SDGA dropdown chip (Text sm/Medium + decorative chevron). The\n     transparent <select> overlays the whole chip, so a click anywhere — chevron\n     included — opens the native picker. */\n  .ddga-calendar__year-chip {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    border-radius: var(--ddga-radius-sm);\n  }\n  .ddga-calendar__year-chip:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-calendar__year-select {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);\n    font-size: var(--ddga-font-size-sm);\n    min-inline-size: 4.5ch;\n  }\n  .ddga-calendar__year-chevron {\n    position: absolute;\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1rem;\n    block-size: 1rem;\n    pointer-events: none;\n    color: var(--ddga-text-primary);\n  }\n\n  /* `separate` + a 4px vertical border-spacing gives the SDGA row breathing\n     while keeping columns touching, so a range band stays continuous across a\n     week yet sits at the 40px cell height (not a full-row pill). */\n  .ddga-calendar__grid {\n    inline-size: 100%;\n    border-collapse: separate;\n    border-spacing: 0 var(--ddga-space-1);\n  }\n\n  .ddga-calendar__weekday {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-base);\n    font-weight: var(--ddga-font-weight-regular);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n     <td>. Style the inner element so the focus ring + selected background stay\n     inside the cell footprint. Flex column so a secondary day number (when\n     `showSecondaryCalendar` is on) stacks neatly under the primary. */\n  /* SDGA day cell = a 40px round indicator, Text md/16. Selected fills it\n     SA-600; today is a 2px SA-600 ring; hover is a soft SA-100 disc. */\n  .ddga-calendar__cell {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2.5rem;\n    block-size: 2.5rem;\n    margin-inline: auto;\n    padding: 0;\n    /* The single picker renders outside-month cells as a native <button>; reset\n       its UA border/background so it matches the <div> cells (else the round\n       cell shows a gray button ring). */\n    appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background-color: transparent;\n    text-align: center;\n    font-size: var(--ddga-font-size-base);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--ddga-color-foreground);\n    border-radius: var(--ddga-radius-full);\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .ddga-calendar__cell[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 2px var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-medium);\n  }\n\n  /* Dual-calendar layout: the primary day stays at the normal size; the\n     secondary (alternate calendar) renders below at ~70% size in the muted text\n     color. Selected state inherits the contrast color for both. */\n  .ddga-calendar__cell-primary {\n    font-size: inherit;\n    line-height: 1;\n  }\n  .ddga-calendar__cell-secondary {\n    margin-block-start: 1px;\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n    color: inherit;\n    opacity: 0.85;\n  }\n  .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n    background-color: var(--ddga-sa-100);\n  }\n  .ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]) {\n    background-color: var(--ddga-sa-200);\n  }\n  .ddga-calendar__cell[data-focus-visible] {\n    box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n  }\n  .ddga-calendar__cell[data-selected] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-calendar__cell[data-disabled],\n  .ddga-calendar__cell[data-unavailable] {\n    color: var(--ddga-text-placeholder);\n    cursor: not-allowed;\n  }\n  /* Outside-month cells are fully clickable in the single picker — selecting\n     one navigates the visible month. Use a softer text color (no opacity\n     reduction) so they read as low-emphasis-but-active peers, not disabled. */\n  .ddga-calendar__cell[data-outside-month] {\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-calendar-toggle__button {\n      transition: none;\n    }\n    .ddga-calendar-popover[data-entering],\n    .ddga-calendar-popover[data-exiting] {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-calendar-popover {\n      border: 1px solid CanvasText;\n    }\n    .ddga-calendar__cell[data-selected] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-calendar__cell[data-focus-visible] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-calendar-toggle__button[data-active] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/card.css

@@ -1,2 +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,.ddga-card--gradient .ddga-card__icon{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-block-start:0}.ddga-card__header{gap:var(--ddga-space-1);padding:var(--ddga-card-padding);flex-direction:column;display:flex}.ddga-card__icon{color:var(--ddga-color-primary);justify-content:center;align-self:start;align-items:center;margin-block-end:var(--ddga-space-1);display:inline-flex}.ddga-card__icon>svg{block-size:1.75rem;inline-size:1.75rem}.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-block-start:0}.ddga-card__footer{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-card-padding);border-block-start:1px solid var(--ddga-color-border);display:flex}.ddga-card__footer:first-child{border-block-start:0}@media (prefers-reduced-motion:reduce){.ddga-card{transition:none}}@media (forced-colors:active){.ddga-card{border:1px solid canvastext}.ddga-card--interactive:focus-visible{outline-offset:2px;outline:2px solid canvastext}}[data-theme=dark] .ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600))}}
+@layer ddga-components{.ddga-card{--ddga-card-padding:var(--ddga-space-4);--ddga-card-gap:var(--ddga-space-6);gap:var(--ddga-card-gap);padding:var(--ddga-card-padding);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border-radius:var(--ddga-radius-xl);flex-direction:column;transition:background-color .15s,box-shadow .15s,border-color .15s;display:flex}.ddga-card--vertical{flex-direction:column}.ddga-card--horizontal{flex-direction:row}.ddga-card--default{border:1px solid var(--ddga-color-input)}.ddga-card--outline{border:1px solid var(--ddga-color-input);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,.ddga-card--gradient .ddga-card__icon{color:inherit}.ddga-card--gradient .ddga-card__description{opacity:.85}.ddga-card--ghost{background-color:#0000;border:1px solid #0000}.ddga-card--plain{border:1px solid #0000}.ddga-card--padding-sm{--ddga-card-padding:var(--ddga-space-3)}.ddga-card--padding-md{--ddga-card-padding:var(--ddga-space-4)}.ddga-card--padding-lg{--ddga-card-padding:var(--ddga-space-6)}.ddga-card--interactive{cursor:pointer}.ddga-card--interactive:hover,.ddga-card--interactive.ddga-card--hovered{background-color:var(--ddga-gray-50)}.ddga-card--interactive.ddga-card--gradient:hover{box-shadow:var(--ddga-shadow-lg)}.ddga-card--interactive:focus-visible,.ddga-card--interactive.ddga-card--focused{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-card--disabled{background-color:var(--ddga-gray-200);color:var(--ddga-gray-400);box-shadow:none}.ddga-card--disabled.ddga-card--default,.ddga-card--disabled.ddga-card--outline{border-color:var(--ddga-gray-400)}.ddga-card--disabled .ddga-card__title,.ddga-card--disabled .ddga-card__description,.ddga-card--disabled .ddga-card__content,.ddga-card--disabled .ddga-card__icon{color:var(--ddga-gray-400)}.ddga-card--disabled .ddga-card__icon--featured{background-color:var(--ddga-gray-100)}.ddga-card--selectable{cursor:pointer;position:relative}.ddga-card--selectable:not(.ddga-card--disabled):hover,.ddga-card--selectable.ddga-card--hovered{background-color:var(--ddga-gray-50)}.ddga-card--selectable.ddga-card--disabled{cursor:not-allowed}.ddga-card--selectable:focus-visible,.ddga-card--selectable.ddga-card--focused{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-card__select-indicator{z-index:1;position:absolute;inset-block-start:var(--ddga-space-4);inset-inline-end:var(--ddga-space-4)}.ddga-card__checkbox{border:1px solid var(--ddga-gray-500);border-radius:var(--ddga-radius-xs);background-color:var(--ddga-color-background);justify-content:center;align-items:center;block-size:20px;inline-size:20px;display:inline-flex}.ddga-card__checkbox[data-state=checked]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-card__checkbox-check{color:#fff;block-size:.875rem;inline-size:.875rem}.ddga-card--disabled .ddga-card__checkbox{border-color:var(--ddga-gray-400)}.ddga-card--disabled .ddga-card__checkbox[data-state=checked]{background-color:var(--ddga-gray-200);border-color:var(--ddga-gray-400)}.ddga-card__expand-row{justify-content:flex-end;margin-block-start:auto;display:flex}.ddga-card__chevron{block-size:1.5rem;inline-size:1.5rem;transition:transform .15s}.ddga-card__chevron--up{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.ddga-card__chevron{transition:none}}.ddga-card__image{object-fit:cover;border-radius:var(--ddga-radius-md);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__header{gap:var(--ddga-space-2);flex-direction:column;display:flex}.ddga-card__icon{color:var(--ddga-color-primary);justify-content:center;align-self:start;align-items:center;display:inline-flex}.ddga-card__icon>svg{block-size:1.75rem;inline-size:1.75rem}.ddga-card__icon--featured{block-size:48px;inline-size:48px;border-radius:var(--ddga-radius-full);background-color:var(--ddga-sa-50);color:var(--ddga-success-700);margin-block-end:var(--ddga-space-4)}.ddga-card__icon--featured>svg{block-size:1.5rem;inline-size:1.5rem}.ddga-card__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-bold);color:var(--ddga-gray-800);margin:0;line-height:1.75rem}.ddga-card__description{font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-gray-800);margin:0;line-height:1.5rem}.ddga-card__footer{align-items:center;gap:var(--ddga-space-4);display:flex}@media (prefers-reduced-motion:reduce){.ddga-card{transition:none}}@media (forced-colors:active){.ddga-card{border:1px solid canvastext}.ddga-card--interactive:focus-visible,.ddga-card--selectable:focus-visible{outline-offset:2px;outline:2px solid canvastext}}[data-theme=dark] .ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600))}[data-theme=dark] .ddga-card__title,[data-theme=dark] .ddga-card__description{color:var(--ddga-color-card-foreground)}[data-theme=dark] .ddga-card__icon--featured{background-color:color-mix(in srgb, var(--ddga-color-primary) 22%, var(--ddga-color-card));color:var(--ddga-color-success)}[data-theme=dark] .ddga-card--interactive:hover,[data-theme=dark] .ddga-card--interactive.ddga-card--hovered,[data-theme=dark] .ddga-card--selectable:not(.ddga-card--disabled):hover,[data-theme=dark] .ddga-card--selectable.ddga-card--hovered{background-color:color-mix(in srgb, var(--ddga-color-card) 90%, white)}[data-theme=dark] .ddga-card--disabled{background-color:color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));color:var(--ddga-color-muted-foreground)}[data-theme=dark] .ddga-card--disabled.ddga-card--default,[data-theme=dark] .ddga-card--disabled.ddga-card--outline{border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-card--disabled .ddga-card__title,[data-theme=dark] .ddga-card--disabled .ddga-card__description,[data-theme=dark] .ddga-card--disabled .ddga-card__content,[data-theme=dark] .ddga-card--disabled .ddga-card__icon{color:var(--ddga-color-muted-foreground)}[data-theme=dark] .ddga-card--disabled .ddga-card__icon--featured{background-color:var(--ddga-color-muted);color:var(--ddga-color-muted-foreground)}}
 /*# sourceMappingURL=card.css.map */

package/dist/components/card.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAGE,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,wIAKA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,oFAMA,+GAWA,qKAUA,4DAKA,0JAQA,qHAOA,qDAMA,6DAIA,kKASA,oDAMA,uCACE,4BAOF,8BAGE,uCAGA,uFAQF","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  .ddga-card--gradient .ddga-card__icon {\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-block-start: 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  /* Leading icon above the title. Inherits the header's column flow; sized +\n     tinted so a bare SVG reads as a deliberate feature icon with no consumer\n     styling. The extra block-end margin sets it apart from the tight\n     title/description pairing below it. */\n  .ddga-card__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Hug the header's start edge (left in LTR, right in RTL) so the icon lines\n       up above the title rather than stretching full-width + centering. */\n    align-self: start;\n    margin-block-end: var(--ddga-space-1);\n    color: var(--ddga-color-primary);\n  }\n  .ddga-card__icon > svg {\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\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-block-start: 0;\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-block-start: 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-block-start: 0;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-card {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    /* box-shadow + gradient are dropped in forced-colors — keep a visible\n       boundary and a real focus outline so cards and their focus state survive. */\n    .ddga-card {\n      border: 1px solid CanvasText;\n    }\n    .ddga-card--interactive:focus-visible {\n      outline: 2px solid CanvasText;\n      outline-offset: 2px;\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":[]}
+{"version":3,"mappings":"AAAA,uBACE,2WAgBA,2CAGA,0CAKA,6DAGA,oFAKA,6EAIA,mFAMA,uKAKA,wIAKA,yDAIA,gEAKA,yCAIA,+DAGA,+DAGA,+DAIA,uCAGA,8GAIA,mFAGA,kJAMA,sGAKA,kHAIA,8LAMA,sFAIA,wDAIA,sIAIA,8DAGA,gJAOA,oIAMA,4OAUA,2HAIA,6EAKA,4EAGA,sIAMA,qFAKA,mFAKA,iDAGA,uCACE,qCAMF,wKASA,kJAQA,yDAKA,8EAMA,gIAOA,4DAMA,wMAQA,oEAKA,sJAQA,gKAQA,2EAMA,uCACE,4BAMF,8BACE,uCAGA,4HAOF,uHAIA,sHAIA,wKAIA,yTAMA,8KAIA,0JAIA,oRAMA","sources":["src/components/card.css"],"sourcesContent":["@layer ddga-components {\n  .ddga-card {\n    --ddga-card-padding: var(--ddga-space-4);\n    --ddga-card-gap: var(--ddga-space-6);\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-card-gap);\n    padding: var(--ddga-card-padding);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border-radius: var(--ddga-radius-xl);\n    transition:\n      background-color 150ms ease,\n      box-shadow 150ms ease,\n      border-color 150ms ease;\n  }\n\n  .ddga-card--vertical {\n    flex-direction: column;\n  }\n  .ddga-card--horizontal {\n    flex-direction: row;\n  }\n\n  /* SDGA Effect=Stroke — 1px gray-300. */\n  .ddga-card--default {\n    border: 1px solid var(--ddga-color-input);\n  }\n  .ddga-card--outline {\n    background-color: transparent;\n    border: 1px solid var(--ddga-color-input);\n  }\n  /* SDGA Effect=With Shadow — navy two-layer md (ours is single-layer black; Foundations). */\n  .ddga-card--elevated {\n    border: 1px solid transparent;\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-card--filled {\n    background-color: var(--ddga-color-muted);\n    border: 1px solid transparent;\n  }\n\n  /* SA Green gradient hero (off-spec) — dga-preferences §5.4 (SA 600 → 500 @ 90°). */\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  .ddga-card--gradient .ddga-card__icon {\n    color: inherit;\n  }\n  .ddga-card--gradient .ddga-card__description {\n    opacity: 0.85;\n  }\n\n  .ddga-card--ghost {\n    background-color: transparent;\n    border: 1px solid transparent;\n  }\n\n  .ddga-card--plain {\n    border: 1px solid transparent;\n  }\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-4);\n  }\n  .ddga-card--padding-lg {\n    --ddga-card-padding: var(--ddga-space-6);\n  }\n\n  .ddga-card--interactive {\n    cursor: pointer;\n  }\n  .ddga-card--interactive:hover,\n  .ddga-card--interactive.ddga-card--hovered {\n    background-color: var(--ddga-gray-50);\n  }\n  .ddga-card--interactive.ddga-card--gradient:hover {\n    box-shadow: var(--ddga-shadow-lg);\n  }\n  .ddga-card--interactive:focus-visible,\n  .ddga-card--interactive.ddga-card--focused {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n  }\n\n  .ddga-card--disabled {\n    background-color: var(--ddga-gray-200);\n    color: var(--ddga-gray-400);\n    box-shadow: none;\n  }\n  .ddga-card--disabled.ddga-card--default,\n  .ddga-card--disabled.ddga-card--outline {\n    border-color: var(--ddga-gray-400);\n  }\n  .ddga-card--disabled .ddga-card__title,\n  .ddga-card--disabled .ddga-card__description,\n  .ddga-card--disabled .ddga-card__content,\n  .ddga-card--disabled .ddga-card__icon {\n    color: var(--ddga-gray-400);\n  }\n  .ddga-card--disabled .ddga-card__icon--featured {\n    background-color: var(--ddga-gray-100);\n  }\n\n  .ddga-card--selectable {\n    position: relative;\n    cursor: pointer;\n  }\n  .ddga-card--selectable:not(.ddga-card--disabled):hover,\n  .ddga-card--selectable.ddga-card--hovered {\n    background-color: var(--ddga-gray-50);\n  }\n  .ddga-card--selectable.ddga-card--disabled {\n    cursor: not-allowed;\n  }\n  .ddga-card--selectable:focus-visible,\n  .ddga-card--selectable.ddga-card--focused {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n  }\n\n  /* Checkbox indicator, top inline-end (flips in RTL). */\n  .ddga-card__select-indicator {\n    position: absolute;\n    inset-block-start: var(--ddga-space-4);\n    inset-inline-end: var(--ddga-space-4);\n    z-index: 1;\n  }\n  .ddga-card__checkbox {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 20px;\n    block-size: 20px;\n    border: 1px solid var(--ddga-gray-500);\n    border-radius: var(--ddga-radius-xs);\n    background-color: var(--ddga-color-background);\n  }\n  .ddga-card__checkbox[data-state='checked'] {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n  }\n  .ddga-card__checkbox-check {\n    inline-size: 0.875rem;\n    block-size: 0.875rem;\n    color: #ffffff;\n  }\n  .ddga-card--disabled .ddga-card__checkbox {\n    border-color: var(--ddga-gray-400);\n  }\n  .ddga-card--disabled .ddga-card__checkbox[data-state='checked'] {\n    background-color: var(--ddga-gray-200);\n    border-color: var(--ddga-gray-400);\n  }\n\n  /* Expandable — chevron icon-button, bottom inline-end, 24px glyph. */\n  .ddga-card__expand-row {\n    display: flex;\n    justify-content: flex-end;\n    margin-block-start: auto;\n  }\n  .ddga-card__chevron {\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    transition: transform 150ms ease;\n  }\n  .ddga-card__chevron--up {\n    transform: rotate(180deg);\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-card__chevron {\n      transition: none;\n    }\n  }\n\n  /* Image — inset slot, radius-md (SDGA: rounded image inside the padding). */\n  .ddga-card__image {\n    display: block;\n    inline-size: 100%;\n    block-size: auto;\n    object-fit: cover;\n    border-radius: var(--ddga-radius-md);\n    aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n  }\n  /* Horizontal (off-spec) — image hugs the start edge, full content height. */\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  .ddga-card--horizontal > :not(.ddga-card__image) {\n    flex: 1 1 auto;\n  }\n\n  /* Sections — no padding (the card pads + gaps them). */\n  .ddga-card__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-card__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    align-self: start;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-card__icon > svg {\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n  }\n\n  /* Featured icon — 48px SA-50 circle, success-700 glyph; +16px so icon→title = 24. */\n  .ddga-card__icon--featured {\n    inline-size: 48px;\n    block-size: 48px;\n    margin-block-end: var(--ddga-space-4);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-sa-50);\n    color: var(--ddga-success-700);\n  }\n  .ddga-card__icon--featured > svg {\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n  }\n\n  .ddga-card__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-bold);\n    line-height: 1.75rem;\n    margin: 0;\n    color: var(--ddga-gray-800);\n  }\n\n  .ddga-card__description {\n    font-size: var(--ddga-font-size-base);\n    font-weight: var(--ddga-font-weight-regular);\n    line-height: 1.5rem;\n    margin: 0;\n    color: var(--ddga-gray-800);\n  }\n\n  .ddga-card__footer {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-card {\n      transition: none;\n    }\n  }\n\n  /* Forced colors (Windows High Contrast) — keep a boundary + real focus outline. */\n  @media (forced-colors: active) {\n    .ddga-card {\n      border: 1px solid CanvasText;\n    }\n    .ddga-card--interactive:focus-visible,\n    .ddga-card--selectable:focus-visible {\n      outline: 2px solid CanvasText;\n      outline-offset: 2px;\n    }\n  }\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  [data-theme='dark'] .ddga-card__title,\n  [data-theme='dark'] .ddga-card__description {\n    color: var(--ddga-color-card-foreground);\n  }\n  [data-theme='dark'] .ddga-card__icon--featured {\n    background-color: color-mix(in srgb, var(--ddga-color-primary) 22%, var(--ddga-color-card));\n    color: var(--ddga-color-success);\n  }\n  [data-theme='dark'] .ddga-card--interactive:hover,\n  [data-theme='dark'] .ddga-card--interactive.ddga-card--hovered,\n  [data-theme='dark'] .ddga-card--selectable:not(.ddga-card--disabled):hover,\n  [data-theme='dark'] .ddga-card--selectable.ddga-card--hovered {\n    background-color: color-mix(in srgb, var(--ddga-color-card) 90%, white);\n  }\n  [data-theme='dark'] .ddga-card--disabled {\n    background-color: color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));\n    color: var(--ddga-color-muted-foreground);\n  }\n  [data-theme='dark'] .ddga-card--disabled.ddga-card--default,\n  [data-theme='dark'] .ddga-card--disabled.ddga-card--outline {\n    border-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-card--disabled .ddga-card__title,\n  [data-theme='dark'] .ddga-card--disabled .ddga-card__description,\n  [data-theme='dark'] .ddga-card--disabled .ddga-card__content,\n  [data-theme='dark'] .ddga-card--disabled .ddga-card__icon {\n    color: var(--ddga-color-muted-foreground);\n  }\n  [data-theme='dark'] .ddga-card--disabled .ddga-card__icon--featured {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-muted-foreground);\n  }\n}\n"],"names":[]}

package/dist/components/carousel.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-carousel{box-sizing:border-box;padding-inline:var(--ddga-space-6);padding-block:var(--ddga-space-8);display:grid}.ddga-carousel--dots{row-gap:var(--ddga-space-6);grid-template-areas:"viewport""dots";justify-items:center}.ddga-carousel--arrows{grid-template-columns:auto 1fr auto;grid-template-areas:"prev viewport next";align-items:center;column-gap:2.75rem}.ddga-carousel--both{align-items:center;column-gap:2.75rem;row-gap:var(--ddga-space-6);grid-template-columns:auto 1fr auto;grid-template-areas:"prev viewport next""dots dots dots";justify-items:center}.ddga-carousel [data-slot=carousel-previous]{grid-area:prev}.ddga-carousel [data-slot=carousel-next]{grid-area:next}.ddga-carousel [data-slot=carousel-viewport]{grid-area:viewport;justify-self:stretch}.ddga-carousel [data-slot=carousel-dots]{grid-area:dots}.ddga-carousel__viewport{touch-action:pan-y;inline-size:100%;min-inline-size:0;overflow:hidden}.ddga-carousel__track{inline-size:100%;transform:translateX(calc(var(--ddga-carousel-index,0) * -100%));will-change:transform;transition:transform .3s;display:flex}[dir=rtl] .ddga-carousel__track{transform:translateX(calc(var(--ddga-carousel-index,0) * 100%))}.ddga-carousel__slide{box-sizing:border-box;flex:0 0 100%;min-inline-size:0}.ddga-carousel__dots{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-3);border-radius:var(--ddga-radius-full);display:inline-flex}.ddga-carousel__dots--bare{padding:0}.ddga-carousel__dot{border-radius:var(--ddga-radius-full);background-color:var(--ddga-color-border);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background-color .15s}.ddga-carousel__dot[data-active]{background-color:var(--ddga-color-primary)}.ddga-carousel__dot:focus-visible{outline:2px solid var(--ddga-text-primary);outline-offset:2px}.ddga-carousel__dots--sm .ddga-carousel__dot{block-size:8px;inline-size:8px}.ddga-carousel__dots--md .ddga-carousel__dot{block-size:12px;inline-size:12px}.ddga-carousel__dots--lg .ddga-carousel__dot{block-size:16px;inline-size:16px}.ddga-carousel__nav{border-radius:var(--ddga-radius-full);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex;position:relative}.ddga-carousel__nav-icon{block-size:24px;inline-size:24px}[dir=rtl] .ddga-carousel__nav-icon{transform:scaleX(-1)}.ddga-carousel__nav--sm{block-size:32px;inline-size:32px}.ddga-carousel__nav--md{block-size:40px;inline-size:40px}.ddga-carousel__nav--lg{block-size:48px;inline-size:48px}.ddga-carousel__nav--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-carousel__nav--primary:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-primary-hover)}.ddga-carousel__nav--primary:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-primary-active)}.ddga-carousel__nav--primary:disabled,.ddga-carousel__nav--primary[aria-disabled=true]{background-color:var(--ddga-gray-200);color:var(--ddga-gray-400);cursor:not-allowed}.ddga-carousel__nav--subtle{color:var(--ddga-text-primary);background-color:#0000}.ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-gray-100)}.ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-gray-200)}.ddga-carousel__nav--subtle:disabled,.ddga-carousel__nav--subtle[aria-disabled=true]{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-carousel__nav:focus-visible{outline:none}.ddga-carousel__nav:focus-visible:after{content:"";border:3px solid var(--ddga-text-primary);border-radius:var(--ddga-radius-full);pointer-events:none;position:absolute;inset:-5px}[data-theme=dark] .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled=true]){background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-carousel__nav--primary:disabled,[data-theme=dark] .ddga-carousel__nav--primary[aria-disabled=true]{background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-carousel__track,.ddga-carousel__dot,.ddga-carousel__nav{transition:none}}@media (forced-colors:active){.ddga-carousel__dot[data-active]{background-color:highlight}.ddga-carousel__dot:focus-visible,.ddga-carousel__nav:focus-visible:after{outline-offset:2px;outline:2px solid highlight}.ddga-carousel__nav:disabled,.ddga-carousel__nav[aria-disabled=true]{color:graytext}}}
+/*# sourceMappingURL=carousel.css.map */

package/dist/components/carousel.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAQE,uHAOA,2GAMA,0IAOA,yMASA,4DAGA,wDAGA,qFAIA,wDAMA,+FASA,oKAOA,gGAIA,4EAQA,6KAQA,qCAIA,wLASA,4EAGA,gGAKA,4EAIA,8EAIA,8EAOA,+NAcA,0DAKA,wDAIA,yDAIA,yDAIA,yDAMA,mHAIA,6HAGA,+HAGA,2KAQA,kFAIA,iHAGA,kHAGA,mIAOA,+CAGA,oLAWA,sIAGA,wIAIA,oKAKA,uCACE,+EAOF,8BACE,4DAGA,yHAKA","sources":["src/components/carousel.css"],"sourcesContent":["@layer ddga-components {\n  /* SDGA Platforms Code parity. The Carousel is navigation chrome around swappable\n     content: a clipping viewport + a translating track, plus dot indicators and/or\n     round chevron arrow buttons. Layout is a grid keyed off `controls` so the parts\n     can be composed in any order. All values resolve to existing tokens (0 gaps). */\n\n  /* ─── Shell (layout per `controls`) ─── */\n\n  .ddga-carousel {\n    display: grid;\n    box-sizing: border-box;\n    padding-inline: var(--ddga-space-6); /* 24px */\n    padding-block: var(--ddga-space-8); /* 32px */\n  }\n\n  .ddga-carousel--dots {\n    grid-template-areas: 'viewport' 'dots';\n    row-gap: var(--ddga-space-6); /* 24px */\n    justify-items: center;\n  }\n\n  .ddga-carousel--arrows {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: 'prev viewport next';\n    align-items: center;\n    column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n  }\n\n  .ddga-carousel--both {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: 'prev viewport next' 'dots dots dots';\n    align-items: center;\n    column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n    row-gap: var(--ddga-space-6);\n    justify-items: center;\n  }\n\n  .ddga-carousel [data-slot='carousel-previous'] {\n    grid-area: prev;\n  }\n  .ddga-carousel [data-slot='carousel-next'] {\n    grid-area: next;\n  }\n  .ddga-carousel [data-slot='carousel-viewport'] {\n    grid-area: viewport;\n    justify-self: stretch;\n  }\n  .ddga-carousel [data-slot='carousel-dots'] {\n    grid-area: dots;\n  }\n\n  /* ─── Viewport + track + slide ─── */\n\n  .ddga-carousel__viewport {\n    overflow: hidden;\n    inline-size: 100%;\n    min-inline-size: 0;\n    touch-action: pan-y;\n  }\n\n  /* Index drives the track via a unitless custom property so the inline style is\n     SSR-safe (no layout read); the sign flips in RTL purely in CSS. */\n  .ddga-carousel__track {\n    display: flex;\n    inline-size: 100%;\n    transform: translateX(calc(var(--ddga-carousel-index, 0) * -100%));\n    transition: transform 300ms ease;\n    will-change: transform;\n  }\n  [dir='rtl'] .ddga-carousel__track {\n    transform: translateX(calc(var(--ddga-carousel-index, 0) * 100%));\n  }\n\n  .ddga-carousel__slide {\n    flex: 0 0 100%;\n    min-inline-size: 0;\n    box-sizing: border-box;\n  }\n\n  /* ─── Dots ─── */\n\n  .ddga-carousel__dots {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2); /* 8px */\n    padding: var(--ddga-space-3); /* 12px */\n    border-radius: var(--ddga-radius-full);\n  }\n  .ddga-carousel__dots--bare {\n    padding: 0;\n  }\n\n  .ddga-carousel__dot {\n    flex-shrink: 0;\n    padding: 0;\n    border: none;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-color-border); /* #E5E7EB gray-200 */\n    cursor: pointer;\n    transition: background-color 150ms ease;\n  }\n  .ddga-carousel__dot[data-active] {\n    background-color: var(--ddga-color-primary); /* #1B8354 SA-600 */\n  }\n  .ddga-carousel__dot:focus-visible {\n    outline: 2px solid var(--ddga-text-primary);\n    outline-offset: 2px;\n  }\n\n  .ddga-carousel__dots--sm .ddga-carousel__dot {\n    inline-size: 8px;\n    block-size: 8px;\n  }\n  .ddga-carousel__dots--md .ddga-carousel__dot {\n    inline-size: 12px;\n    block-size: 12px;\n  }\n  .ddga-carousel__dots--lg .ddga-carousel__dot {\n    inline-size: 16px;\n    block-size: 16px;\n  }\n\n  /* ─── Arrow buttons (round chevron; ramps reuse the Button tokens) ─── */\n\n  .ddga-carousel__nav {\n    position: relative;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: var(--ddga-radius-full);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n\n  .ddga-carousel__nav-icon {\n    inline-size: 24px;\n    block-size: 24px;\n  }\n  /* Chevrons point inline-start (prev) / inline-end (next); mirror in RTL. */\n  [dir='rtl'] .ddga-carousel__nav-icon {\n    transform: scaleX(-1);\n  }\n\n  .ddga-carousel__nav--sm {\n    inline-size: 32px;\n    block-size: 32px;\n  }\n  .ddga-carousel__nav--md {\n    inline-size: 40px;\n    block-size: 40px;\n  }\n  .ddga-carousel__nav--lg {\n    inline-size: 48px;\n    block-size: 48px;\n  }\n\n  /* Primary — filled green */\n  .ddga-carousel__nav--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-carousel__nav--primary:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-primary-hover); /* #166A45 SA-700 */\n  }\n  .ddga-carousel__nav--primary:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-primary-active); /* #104631 SA-900 */\n  }\n  .ddga-carousel__nav--primary:disabled,\n  .ddga-carousel__nav--primary[aria-disabled='true'] {\n    background-color: var(--ddga-gray-200);\n    color: var(--ddga-gray-400);\n    cursor: not-allowed;\n  }\n\n  /* Subtle — transparent, ink chevron */\n  .ddga-carousel__nav--subtle {\n    background-color: transparent;\n    color: var(--ddga-text-primary); /* #161616 */\n  }\n  .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-gray-100); /* #F3F4F6 */\n  }\n  .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-gray-200); /* #E5E7EB */\n  }\n  .ddga-carousel__nav--subtle:disabled,\n  .ddga-carousel__nav--subtle[aria-disabled='true'] {\n    color: var(--ddga-gray-400);\n    cursor: not-allowed;\n  }\n\n  /* Focus ring — single 3px ink ring, ~2px gap (SDGA \"Focus outline\", inset -5). */\n  .ddga-carousel__nav:focus-visible {\n    outline: none;\n  }\n  .ddga-carousel__nav:focus-visible::after {\n    content: '';\n    position: absolute;\n    inset: -5px;\n    border: 3px solid var(--ddga-text-primary);\n    border-radius: var(--ddga-radius-full);\n    pointer-events: none;\n  }\n\n  /* Dark: raw gray tints don't flip → subtle hover/active would be near-white behind the white\n     icon; primary-disabled would be a bright light circle. Remap to semantic dark grays. */\n  [data-theme='dark'] .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark']\n    .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-carousel__nav--primary:disabled,\n  [data-theme='dark'] .ddga-carousel__nav--primary[aria-disabled='true'] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-carousel__track,\n    .ddga-carousel__dot,\n    .ddga-carousel__nav {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .ddga-carousel__dot[data-active] {\n      background-color: Highlight;\n    }\n    .ddga-carousel__dot:focus-visible,\n    .ddga-carousel__nav:focus-visible::after {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-carousel__nav:disabled,\n    .ddga-carousel__nav[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/charts.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-charts{--ddga-charts-axis:var(--ddga-gray-700);--ddga-charts-grid:var(--ddga-gray-100);gap:var(--ddga-space-2);color:var(--ddga-charts-axis);flex-direction:column;margin:0;font-family:inherit;display:flex}.ddga-charts--pie{align-items:center;gap:var(--ddga-space-6)}.ddga-charts__plot{block-size:auto;max-inline-size:100%;display:block}.ddga-charts--line .ddga-charts__plot,.ddga-charts--bar .ddga-charts__plot{inline-size:100%}.ddga-charts__plot text{font-family:inherit}.ddga-charts__legend{gap:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-charts-axis);flex-wrap:wrap;margin:0;padding:0;line-height:1.4;list-style:none;display:flex}.ddga-charts--line .ddga-charts__legend,.ddga-charts--bar .ddga-charts__legend{justify-content:flex-end}.ddga-charts--pie .ddga-charts__legend{justify-content:center}.ddga-charts__legend-item{align-items:center;gap:var(--ddga-space-2);display:inline-flex}.ddga-charts__mark{border-radius:var(--ddga-radius-full);flex-shrink:0;block-size:8px;inline-size:8px}.ddga-charts__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-theme=dark] .ddga-charts{--ddga-charts-axis:var(--ddga-gray-300);--ddga-charts-grid:var(--ddga-gray-800)}@media (forced-colors:active){.ddga-charts__plot,.ddga-charts__mark{forced-color-adjust:none}}}
+/*# sourceMappingURL=charts.css.map */

package/dist/components/charts.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBACE,mNAYA,6DAKA,sEAKA,4FAIA,4CAIA,6LAYA,wGAIA,8DAIA,yFAKA,sGAOA,+JAaA,+GAMA,8BACE","sources":["src/components/charts.css"],"sourcesContent":["@layer ddga-components {\n  .ddga-charts {\n    --ddga-charts-axis: var(--ddga-gray-700);\n    --ddga-charts-grid: var(--ddga-gray-100);\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    margin: 0;\n    font-family: inherit;\n    color: var(--ddga-charts-axis);\n  }\n\n  /* Pie/donut: disk centered above a centered legend, 24px apart. */\n  .ddga-charts--pie {\n    align-items: center;\n    gap: var(--ddga-space-6);\n  }\n\n  .ddga-charts__plot {\n    display: block;\n    max-inline-size: 100%;\n    block-size: auto;\n  }\n  .ddga-charts--line .ddga-charts__plot,\n  .ddga-charts--bar .ddga-charts__plot {\n    inline-size: 100%;\n  }\n  .ddga-charts__plot text {\n    font-family: inherit;\n  }\n\n  .ddga-charts__legend {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ddga-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n    color: var(--ddga-charts-axis);\n  }\n  /* Line/bar legends sit at the top, trailing edge (SDGA). */\n  .ddga-charts--line .ddga-charts__legend,\n  .ddga-charts--bar .ddga-charts__legend {\n    justify-content: flex-end;\n  }\n  .ddga-charts--pie .ddga-charts__legend {\n    justify-content: center;\n  }\n\n  .ddga-charts__legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n  .ddga-charts__mark {\n    inline-size: 8px;\n    block-size: 8px;\n    border-radius: var(--ddga-radius-full);\n    flex-shrink: 0;\n  }\n\n  .ddga-charts__sr-only {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Dark: lighten axis text + gridlines so they read on a dark surface. */\n  [data-theme='dark'] .ddga-charts {\n    --ddga-charts-axis: var(--ddga-gray-300);\n    --ddga-charts-grid: var(--ddga-gray-800);\n  }\n\n  /* Data-viz colours must survive Windows High Contrast (else every series flattens to one colour). */\n  @media (forced-colors: active) {\n    .ddga-charts__plot,\n    .ddga-charts__mark {\n      forced-color-adjust: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/checkbox.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.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-components{.ddga-checkbox-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-checkbox{border:1px solid var(--ddga-gray-500);border-radius:var(--ddga-radius-xs);color:var(--ddga-color-primary-foreground);cursor:pointer;background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-checkbox--md{block-size:24px;inline-size:24px}.ddga-checkbox--sm{block-size:20px;inline-size:20px}.ddga-checkbox--xs{block-size:16px;inline-size:16px}.ddga-checkbox:before{content:"";z-index:-1;background-color:var(--ddga-gray-100);opacity:0;pointer-events:none;border-radius:9999px;transition:opacity .15s;position:absolute;inset:-8px}.ddga-checkbox:not(:disabled):not([data-readonly]):hover:before,.ddga-checkbox:not(:disabled):not([data-readonly]):active:before{opacity:1}.ddga-checkbox[data-state=unchecked]:not(:disabled):not([data-readonly]):active{background-color:var(--ddga-gray-300)}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-checkbox[data-state=checked]:not(:disabled):not([data-readonly]):hover,.ddga-checkbox[data-state=indeterminate]:not(:disabled):not([data-readonly]):hover{background-color:var(--ddga-color-primary-hover);border-color:var(--ddga-color-primary-hover)}.ddga-checkbox[data-state=checked]:not(:disabled):not([data-readonly]):active,.ddga-checkbox[data-state=indeterminate]:not(:disabled):not([data-readonly]):active{background-color:var(--ddga-color-primary-active);border-color:var(--ddga-color-primary-active)}.ddga-checkbox--neutral[data-state=checked],.ddga-checkbox--neutral[data-state=indeterminate]{background-color:var(--ddga-gray-950);border-color:var(--ddga-gray-950)}.ddga-checkbox--neutral[data-state=checked]:not(:disabled):not([data-readonly]):hover,.ddga-checkbox--neutral[data-state=indeterminate]:not(:disabled):not([data-readonly]):hover{background-color:var(--ddga-gray-600);border-color:var(--ddga-gray-600)}.ddga-checkbox--neutral[data-state=checked]:not(:disabled):not([data-readonly]):active,.ddga-checkbox--neutral[data-state=indeterminate]:not(:disabled):not([data-readonly]):active{background-color:var(--ddga-gray-500);border-color:var(--ddga-gray-500)}.ddga-checkbox:focus-visible{outline:2px solid var(--ddga-color-focus-ring);outline-offset:2px}.ddga-checkbox[data-readonly]{cursor:default;border-color:var(--ddga-gray-400)}.ddga-checkbox[data-readonly][data-state=checked],.ddga-checkbox[data-readonly][data-state=indeterminate]{border-color:var(--ddga-gray-400);color:var(--ddga-color-primary);background-color:#0000}.ddga-checkbox--neutral[data-readonly][data-state=checked],.ddga-checkbox--neutral[data-readonly][data-state=indeterminate]{color:var(--ddga-gray-950)}.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{outline-color:var(--ddga-color-error)}.ddga-checkbox:disabled{cursor:not-allowed;border-color:var(--ddga-gray-400)}.ddga-checkbox:disabled[data-state=checked],.ddga-checkbox:disabled[data-state=indeterminate]{background-color:var(--ddga-gray-200);border-color:var(--ddga-gray-200);color:var(--ddga-color-primary-foreground)}.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{block-size:75%;inline-size:75%}.ddga-checkbox__minus{background-color:currentColor;border-radius:1px;block-size:12.5%;min-block-size:2px;inline-size:50%}.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}[data-theme=dark] .ddga-checkbox:before{background-color:var(--ddga-gray-700)}[data-theme=dark] .ddga-checkbox--neutral[data-state=checked],[data-theme=dark] .ddga-checkbox--neutral[data-state=indeterminate]{background-color:var(--ddga-gray-100);border-color:var(--ddga-gray-100)}[data-theme=dark] .ddga-checkbox--neutral[data-readonly][data-state=checked],[data-theme=dark] .ddga-checkbox--neutral[data-readonly][data-state=indeterminate]{color:var(--ddga-gray-100)}@media (prefers-reduced-motion:reduce){.ddga-checkbox,.ddga-checkbox:before{transition:none}}@media (forced-colors:active){.ddga-checkbox{border:1px solid canvastext}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:canvastext}.ddga-checkbox__indicator{color:canvas}.ddga-checkbox:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-checkbox:disabled{color:graytext;border-color:graytext}}}
 /*# sourceMappingURL=checkbox.css.map */