@dev-dga/css 0.11.0 → 0.12.0

package/dist/components/switch.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAME,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,uGAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA","sources":["src/components/switch.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Switch-specific styles live here. */\n\n  /* ─── Row (track + label, inline) ─── */\n\n  .ddga-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n  .ddga-switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Track dimensions and travel distance. Travel is encoded as a per-size\n     custom property so the thumb rule below is size-agnostic. */\n  .ddga-switch--md {\n    block-size: 22px;\n    inline-size: 38px;\n    --ddga-switch-thumb-travel: 16px;\n  }\n  .ddga-switch--sm {\n    block-size: 18px;\n    inline-size: 30px;\n    --ddga-switch-thumb-travel: 12px;\n  }\n\n  /* ─── Checked fill ─── */\n\n  .ddga-switch[data-state='checked'] {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-switch:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-switch--error {\n    background-color: var(--ddga-color-background);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error[data-state='checked'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-switch:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n  .ddga-switch__thumb {\n    display: block;\n    block-size: calc(100% - 4px);\n    aspect-ratio: 1;\n    margin-inline-start: 2px;\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    transition: translate 150ms ease;\n    translate: 0 0;\n    will-change: translate;\n  }\n  .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: var(--ddga-switch-thumb-travel) 0;\n  }\n  /* RTL: the thumb's resting position is on the right (logical start\n     flips), so checked travels in the negative direction. The ancestor\n     `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n     of `:dir()` for broader browser support (the theming pass set the\n     Safari floor at 16.2; `:dir()` lands in 16.4). */\n  [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n  }\n\n  /* Dark mode: the default thumb color (--ddga-color-background, near-white\n     in light mode) flips to a very dark gray-900 , darker than the off-state\n     track (--ddga-color-input = gray-700) , and the thumb disappears.\n     Override locally with a near-white so the puck reads as a raised\n     surface in both modes. Kept in this file (not dark.css) because dark.css\n     is reserved for semantic token remapping; this is a per-component fix. */\n  [data-theme='dark'] .ddga-switch__thumb {\n    background-color: var(--ddga-gray-100);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-switch__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-switch__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-switch,\n    .ddga-switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-switch {\n      border: 1px solid CanvasText;\n      background-color: Canvas;\n    }\n    .ddga-switch[data-state='checked'] {\n      background-color: Highlight;\n    }\n    .ddga-switch__thumb {\n      background-color: CanvasText;\n      box-shadow: none;\n    }\n    .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n      background-color: HighlightText;\n    }\n    .ddga-switch:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-switch:disabled {\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAGE,yEAQA,8YAqBA,qFAIA,wEAKA,6GAIA,4HAKA,6EAMA,iMAUA,6FAMA,sKASA,wCAGA,4CAGA,2CAKA,oRAcA,mJAKA,+EAKA,kJAQA,yCAGA,4FAGA,gJAMA,8EAGA,mHAKA,uHAMA,iFAMA,8GAIA,2FAGA,wEAIA,uCACE,sEAOF,8BACE,yEAGA,4DAGA,gDAGA,oFAGA,wDAGA","sources":["src/components/switch.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared — see field.css. */\n\n  .ddga-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* Track = 48×24 (single SDGA size). The neutral/green/ring colours are driven by three\n     per-state custom properties so every state is one override, not a rule per part. */\n  .ddga-switch {\n    --ddga-switch-off: var(--ddga-gray-950);\n    --ddga-switch-on: var(--ddga-color-primary);\n    --ddga-switch-ring: var(--ddga-color-foreground);\n    position: relative;\n    display: inline-block;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    inline-size: 48px;\n    block-size: 24px;\n    padding: 0;\n    border: none;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* OFF = outlined: 1px ring via inset shadow (no layout cost, keeps the centre transparent). */\n  .ddga-switch[data-state='unchecked'] {\n    box-shadow: inset 0 0 0 1px var(--ddga-switch-off);\n  }\n  /* ON = filled green. */\n  .ddga-switch[data-state='checked'] {\n    background-color: var(--ddga-switch-on);\n  }\n\n  /* State ramp: OFF gray-950→600→500, ON SA600→800→900 (SA800 has no semantic alias → raw ramp). */\n  .ddga-switch:hover:not(:disabled) {\n    --ddga-switch-off: var(--ddga-gray-600);\n    --ddga-switch-on: var(--ddga-sa-800);\n  }\n  .ddga-switch:active:not(:disabled) {\n    --ddga-switch-off: var(--ddga-gray-500);\n    --ddga-switch-on: var(--ddga-color-primary-active);\n  }\n  /* Focus ring ink: OFF #0d121c, ON #161616 (border-black). */\n  .ddga-switch[data-state='checked'] {\n    --ddga-switch-ring: var(--ddga-text-primary);\n  }\n\n  /* Ripple halo (hover + pressed): a 4px gray-100 ring outside the track (border, not a filled\n     disc — the OFF track is transparent, so a disc would bleed through the centre). */\n  .ddga-switch::before {\n    content: '';\n    position: absolute;\n    inset: -4px;\n    border: 4px solid var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-full);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease;\n  }\n  .ddga-switch:hover:not(:disabled)::before,\n  .ddga-switch:active:not(:disabled)::before {\n    opacity: 1;\n  }\n\n  /* Focus ring: 2px ink square (radius-xs) at the 56×32 envelope; replaces the ripple. */\n  .ddga-switch::after {\n    content: '';\n    position: absolute;\n    inset: -4px;\n    border: 2px solid var(--ddga-switch-ring);\n    border-radius: var(--ddga-radius-xs);\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ddga-switch:focus-visible {\n    outline: none;\n  }\n  .ddga-switch:focus-visible::before {\n    opacity: 0;\n  }\n  .ddga-switch:focus-visible::after {\n    opacity: 1;\n  }\n\n  /* Thumb: 16px circle, 4px inset, travel 24px. OFF = colored dot; ON = white (+ shadow-sm). */\n  .ddga-switch__thumb {\n    position: absolute;\n    inset-block-start: 4px;\n    inset-inline-start: 4px;\n    inline-size: 16px;\n    block-size: 16px;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-switch-off);\n    translate: 0 0;\n    transition:\n      translate 150ms ease,\n      background-color 150ms ease;\n    will-change: translate;\n  }\n  .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n    translate: 24px 0;\n  }\n  [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: -24px 0;\n  }\n\n  /* Error (off-spec; SDGA signals invalid via the Label slot). Recolours every part to error. */\n  .ddga-switch--error {\n    --ddga-switch-off: var(--ddga-color-error);\n    --ddga-switch-on: var(--ddga-color-error);\n    --ddga-switch-ring: var(--ddga-color-error);\n  }\n\n  /* Disabled: gray-400 outline + gray-300 thumb (OFF) / gray-300 track + white thumb, no check (ON).\n     SDGA recolours rather than dimming — no opacity. */\n  .ddga-switch:disabled {\n    cursor: not-allowed;\n  }\n  .ddga-switch[data-state='unchecked']:disabled {\n    box-shadow: inset 0 0 0 1px var(--ddga-gray-400);\n  }\n  .ddga-switch[data-state='unchecked']:disabled .ddga-switch__thumb {\n    background-color: var(--ddga-gray-300);\n  }\n  .ddga-switch[data-state='checked']:disabled {\n    background-color: var(--ddga-gray-300);\n  }\n  .ddga-switch[data-state='checked']:disabled .ddga-switch__thumb {\n    box-shadow: none;\n  }\n  .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-switch__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-switch__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* Dark mode: flip the OFF outline/dot + ripple + focus ring to light (exact DGA dark deferred). */\n  [data-theme='dark'] .ddga-switch {\n    --ddga-switch-off: var(--ddga-gray-300);\n    --ddga-switch-ring: var(--ddga-gray-100);\n  }\n  [data-theme='dark'] .ddga-switch:hover:not(:disabled) {\n    --ddga-switch-off: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-switch::before {\n    border-color: var(--ddga-gray-700);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-switch,\n    .ddga-switch::before,\n    .ddga-switch__thumb {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .ddga-switch[data-state='unchecked'] {\n      box-shadow: inset 0 0 0 1px CanvasText;\n    }\n    .ddga-switch[data-state='checked'] {\n      background-color: Highlight;\n    }\n    .ddga-switch__thumb {\n      background-color: CanvasText;\n    }\n    .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n      background-color: HighlightText;\n    }\n    .ddga-switch:focus-visible::after {\n      border-color: Highlight;\n    }\n    .ddga-switch:disabled[data-state='unchecked'] {\n      box-shadow: inset 0 0 0 1px GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/table.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-table__region{border-radius:var(--ddga-radius-md);inline-size:100%;overflow:auto hidden}.ddga-table__region[role=region]:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-table{--ddga-table-pad-block:var(--ddga-space-3);--ddga-table-pad-inline:var(--ddga-space-4);border-collapse:collapse;inline-size:100%;color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);background-color:var(--ddga-color-card);text-align:start}.ddga-table--sm{--ddga-table-pad-block:var(--ddga-space-2);--ddga-table-pad-inline:var(--ddga-space-3)}.ddga-table--md{--ddga-table-pad-block:var(--ddga-space-3);--ddga-table-pad-inline:var(--ddga-space-4)}.ddga-table--lg{--ddga-table-pad-block:var(--ddga-space-4);--ddga-table-pad-inline:var(--ddga-space-5)}.ddga-table__head,.ddga-table__cell{padding-block:var(--ddga-table-pad-block);padding-inline:var(--ddga-table-pad-inline);text-align:start;vertical-align:middle}.ddga-table__head{color:var(--ddga-text-secondary);font-weight:var(--ddga-font-weight-semibold);white-space:nowrap;border-block-end:1px solid var(--ddga-color-border)}.ddga-table__head--align-start,.ddga-table__cell--align-start{text-align:start}.ddga-table__head--align-center,.ddga-table__cell--align-center{text-align:center}.ddga-table__head--align-end,.ddga-table__cell--align-end{text-align:end}.ddga-table__caption{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-table-pad-inline);color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-sm);text-align:start;caption-side:bottom}.ddga-table__body .ddga-table__row{transition:background-color .12s}.ddga-table__body .ddga-table__row:hover{background-color:var(--ddga-color-muted)}.ddga-table__body .ddga-table__row[data-state=selected]{background-color:var(--ddga-color-muted);box-shadow:inset 2px 0 0 0 var(--ddga-color-primary)}[dir=rtl] .ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset -2px 0 0 0 var(--ddga-color-primary)}.ddga-table__footer{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);border-block-start:1px solid var(--ddga-color-border)}.ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child){border-block-end:1px solid var(--ddga-color-border)}.ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(2n){background-color:var(--ddga-color-muted)}.ddga-table--bordered .ddga-table__head,.ddga-table--bordered .ddga-table__cell{border:1px solid var(--ddga-color-border)}.ddga-table--sticky .ddga-table__header .ddga-table__head{z-index:1;background-color:var(--ddga-color-card);position:sticky;inset-block-start:0}.ddga-table__sort-button{align-items:center;gap:var(--ddga-space-1);font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}.ddga-table__sort-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px;border-radius:var(--ddga-radius-sm)}.ddga-table__sort-icon{flex-direction:column;line-height:0;display:inline-flex}.ddga-table__sort-icon>svg{block-size:.75em;inline-size:.75em}.ddga-table__sort-icon>svg+svg{margin-block-start:-.2em}[aria-sort=none] .ddga-table__sort-icon{color:var(--ddga-text-tertiary)}[aria-sort=ascending] .ddga-table__sort-icon,[aria-sort=descending] .ddga-table__sort-icon{color:var(--ddga-color-primary)}@media (forced-colors:active){.ddga-table__head{border-block-end-color:canvastext}.ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child),.ddga-table--bordered .ddga-table__head,.ddga-table--bordered .ddga-table__cell,.ddga-table__footer{border-color:canvastext}.ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset 2px 0 highlight}[dir=rtl] .ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset -2px 0 highlight}.ddga-table__sort-button:focus-visible,.ddga-table__region[role=region]:focus-visible{outline:2px solid highlight}}}
+@layer ddga-components{.ddga-table__region{inline-size:100%;overflow:auto hidden}.ddga-table__region[role=region]:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-table__region:has(>.ddga-table--contained){border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm)}.ddga-table{--ddga-table-pad-block:var(--ddga-space-2);--ddga-table-pad-inline:var(--ddga-space-4);--ddga-table-row-h:4rem;border-collapse:collapse;inline-size:100%;color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);background-color:var(--ddga-color-card);text-align:start}.ddga-table--sm{--ddga-table-row-h:3rem}.ddga-table--md{--ddga-table-row-h:4rem}.ddga-table--lg{--ddga-table-row-h:4.5rem}.ddga-table__head,.ddga-table__cell{padding-block:var(--ddga-table-pad-block);padding-inline:var(--ddga-table-pad-inline);text-align:start;vertical-align:middle}.ddga-table__cell{block-size:var(--ddga-table-row-h)}.ddga-table__head{background-color:var(--ddga-color-muted);block-size:3rem;color:var(--ddga-gray-700);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);white-space:nowrap;border-block-end:1px solid var(--ddga-color-input)}.ddga-table__header .ddga-table__head:not(:last-child){border-inline-end:1px solid var(--ddga-color-input)}.ddga-table__head--align-start,.ddga-table__cell--align-start{text-align:start}.ddga-table__head--align-center,.ddga-table__cell--align-center{text-align:center}.ddga-table__head--align-end,.ddga-table__cell--align-end{text-align:end}.ddga-table__caption{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-table-pad-inline);color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-sm);text-align:start;caption-side:bottom}.ddga-table__body .ddga-table__row{transition:background-color .12s}.ddga-table__body .ddga-table__row:not(:last-child){border-block-end:1px solid var(--ddga-color-input)}.ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(2n):not(:hover):not([data-state=selected]){background-color:var(--ddga-gray-50)}.ddga-table__body .ddga-table__row:hover:not([data-state=selected]){background-color:var(--ddga-color-muted)}.ddga-table__body .ddga-table__row[data-state=selected]{background-color:var(--ddga-sa-50);box-shadow:inset 2px 0 0 0 var(--ddga-color-primary)}[dir=rtl] .ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset -2px 0 0 0 var(--ddga-color-primary)}.ddga-table__footer{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);border-block-start:1px solid var(--ddga-color-input)}.ddga-table--sticky .ddga-table__header .ddga-table__head{z-index:1;background-color:var(--ddga-color-muted);position:sticky;inset-block-start:0}.ddga-table__sort-button,.ddga-table__filter-button{align-items:center;gap:var(--ddga-space-2);font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}.ddga-table__filter-button{justify-content:center}.ddga-table__sort-button:focus-visible,.ddga-table__filter-button:focus-visible{outline:none}.ddga-table__sort-button:disabled,.ddga-table__filter-button:disabled{cursor:not-allowed}.ddga-table__icon-box{border-radius:var(--ddga-radius-sm);flex-shrink:0;justify-content:center;align-items:center;block-size:1.25rem;inline-size:1.25rem;transition:background-color .12s,color .12s;display:inline-flex}.ddga-table__icon-box>svg{block-size:1rem;inline-size:1rem}.ddga-table__icon-box[data-active=false]{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-table__icon-box[data-active=true]{background-color:var(--ddga-gray-950);color:#fff}.ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active=false],.ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active=false]{background-color:var(--ddga-gray-200)}.ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active=true],.ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active=true]{background-color:var(--ddga-gray-800)}.ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active=false],.ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active=false]{background-color:var(--ddga-gray-200)}.ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active=true],.ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active=true]{background-color:var(--ddga-gray-600)}.ddga-table__sort-button:focus-visible .ddga-table__icon-box,.ddga-table__filter-button:focus-visible .ddga-table__icon-box{outline:2px solid var(--ddga-text-primary);outline-offset:0}.ddga-table__sort-button:focus-visible .ddga-table__icon-box[data-active=true],.ddga-table__filter-button:focus-visible .ddga-table__icon-box[data-active=true]{box-shadow:inset 0 0 0 1px #fff}.ddga-table__sort-button:disabled .ddga-table__icon-box,.ddga-table__filter-button:disabled .ddga-table__icon-box{color:var(--ddga-gray-400);background-color:#0000}[data-theme=dark] .ddga-table__head{color:var(--ddga-text-secondary)}[data-theme=dark] .ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(2n):not(:hover):not([data-state=selected]){background-color:var(--ddga-color-muted)}@media (forced-colors:active){.ddga-table__head{border-block-end-color:canvastext}.ddga-table__body .ddga-table__row:not(:last-child),.ddga-table__header .ddga-table__head:not(:last-child),.ddga-table__footer{border-color:canvastext}.ddga-table__region:has(>.ddga-table--contained){border-color:canvastext}.ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset 2px 0 highlight}[dir=rtl] .ddga-table__body .ddga-table__row[data-state=selected]{box-shadow:inset -2px 0 highlight}.ddga-table__icon-box{border:1px solid canvastext}.ddga-table__sort-button:focus-visible .ddga-table__icon-box,.ddga-table__filter-button:focus-visible .ddga-table__icon-box,.ddga-table__region[role=region]:focus-visible{outline:2px solid highlight}}}
 /*# sourceMappingURL=table.css.map */

package/dist/components/table.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBASE,8FAYA,2GAOA,wQAcA,uGAIA,uGAIA,uGAOA,iKAQA,uKASA,+EAIA,kFAIA,yEAOA,2MAWA,oEAGA,kFAGA,sJAOA,wHAMA,oJAQA,6HAMA,+GAMA,0HAOA,gJAUA,6KAYA,uIAMA,+EAKA,8DAMA,wDAGA,wEAGA,2HAWA,8BACE,oDAGA,qMAMA,yFAGA,oGAGA","sources":["src/components/table.css"],"sourcesContent":["@layer ddga-components {\n  /* Semantic <table> compound. Density/zebra/borders cascade from the root\n     (.ddga-table) to leaf parts via descendant selectors. Logical properties\n     throughout, with one [dir='rtl'] override for the selected-row accent\n     stripe (box-shadow insets are physical). Sort carets are vertical (not\n     mirrored). */\n\n  /* ─── Scroll region ─── */\n\n  .ddga-table__region {\n    inline-size: 100%;\n    /* Horizontal scroll for wide tables. Vertical stays clipped (the region\n       grows to content height, so nothing is cut) until `maxHeight` caps it —\n       at which point the component sets `overflow-y: auto` inline so the body\n       scrolls and `stickyHeader` engages. Keeping vertical hidden by default\n       avoids a spurious vertical scrollbar on unconstrained tables. */\n    overflow-x: auto;\n    overflow-y: hidden;\n    /* Contain the sticky header's stacking and give a clean focus ring. */\n    border-radius: var(--ddga-radius-md);\n  }\n  .ddga-table__region[role='region']:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n\n  /* ─── Table base ─── */\n\n  .ddga-table {\n    --ddga-table-pad-block: var(--ddga-space-3);\n    --ddga-table-pad-inline: var(--ddga-space-4);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    background-color: var(--ddga-color-card);\n    text-align: start;\n  }\n\n  /* ─── Density ─── */\n\n  .ddga-table--sm {\n    --ddga-table-pad-block: var(--ddga-space-2);\n    --ddga-table-pad-inline: var(--ddga-space-3);\n  }\n  .ddga-table--md {\n    --ddga-table-pad-block: var(--ddga-space-3);\n    --ddga-table-pad-inline: var(--ddga-space-4);\n  }\n  .ddga-table--lg {\n    --ddga-table-pad-block: var(--ddga-space-4);\n    --ddga-table-pad-inline: var(--ddga-space-5);\n  }\n\n  /* ─── Head & cell ─── */\n\n  .ddga-table__head,\n  .ddga-table__cell {\n    padding-block: var(--ddga-table-pad-block);\n    padding-inline: var(--ddga-table-pad-inline);\n    text-align: start;\n    vertical-align: middle;\n  }\n\n  .ddga-table__head {\n    color: var(--ddga-text-secondary);\n    font-weight: var(--ddga-font-weight-semibold);\n    white-space: nowrap;\n    /* Header always sits above the body via a bottom rule. */\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* Logical alignment (RTL-safe). */\n  .ddga-table__head--align-start,\n  .ddga-table__cell--align-start {\n    text-align: start;\n  }\n  .ddga-table__head--align-center,\n  .ddga-table__cell--align-center {\n    text-align: center;\n  }\n  .ddga-table__head--align-end,\n  .ddga-table__cell--align-end {\n    text-align: end;\n  }\n\n  /* ─── Caption ─── */\n\n  .ddga-table__caption {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-table-pad-inline);\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n    text-align: start;\n    caption-side: bottom;\n  }\n\n  /* ─── Body rows ─── */\n\n  .ddga-table__body .ddga-table__row {\n    transition: background-color 120ms ease;\n  }\n  .ddga-table__body .ddga-table__row:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-table__body .ddga-table__row[data-state='selected'] {\n    background-color: var(--ddga-color-muted);\n    /* Inline-start accent stripe. box-shadow insets are physical (no logical\n       form exists), so flip the x-offset in RTL — the project's prescribed\n       [dir='rtl'] override for direction-specific properties. */\n    box-shadow: inset 2px 0 0 0 var(--ddga-color-primary);\n  }\n  [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n    box-shadow: inset -2px 0 0 0 var(--ddga-color-primary);\n  }\n\n  /* ─── Footer ─── */\n\n  .ddga-table__footer {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    border-block-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Divided (row dividers) ─── */\n\n  .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child) {\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Striped (zebra) ─── */\n\n  .ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(even) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Bordered (full grid) ─── */\n\n  .ddga-table--bordered .ddga-table__head,\n  .ddga-table--bordered .ddga-table__cell {\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Sticky header ─── */\n\n  .ddga-table--sticky .ddga-table__header .ddga-table__head {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n    /* Solid bg so body rows don't bleed through while scrolling. */\n    background-color: var(--ddga-color-card);\n  }\n\n  /* ─── Sort affordance ─── */\n\n  .ddga-table__sort-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n  }\n  .ddga-table__sort-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-table__sort-icon {\n    display: inline-flex;\n    flex-direction: column;\n    line-height: 0;\n  }\n  .ddga-table__sort-icon > svg {\n    inline-size: 0.75em;\n    block-size: 0.75em;\n  }\n  /* Neutral state shows both carets dimmed; active state shows one in the\n     accent color. */\n  .ddga-table__sort-icon > svg + svg {\n    margin-block-start: -0.2em;\n  }\n  [aria-sort='none'] .ddga-table__sort-icon {\n    color: var(--ddga-text-tertiary);\n  }\n  [aria-sort='ascending'] .ddga-table__sort-icon,\n  [aria-sort='descending'] .ddga-table__sort-icon {\n    color: var(--ddga-color-primary);\n  }\n\n  /* ─── Dark mode ─── */\n  /* Semantic tokens (--ddga-color-muted/-card/-border/-primary) already adapt,\n     so nothing token-raw here needs a [data-theme='dark'] override. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-table__head {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child),\n    .ddga-table--bordered .ddga-table__head,\n    .ddga-table--bordered .ddga-table__cell,\n    .ddga-table__footer {\n      border-color: CanvasText;\n    }\n    .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset 2px 0 0 0 Highlight;\n    }\n    [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset -2px 0 0 0 Highlight;\n    }\n    .ddga-table__sort-button:focus-visible,\n    .ddga-table__region[role='region']:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAUE,0DASA,2GAMA,8HAOA,kSAeA,wCAGA,wCAGA,0CAMA,iKAOA,qDAGA,0PAUA,2GAKA,+EAIA,kFAIA,yEAOA,2MAWA,oEAIA,uGAGA,kJAKA,6GAGA,gJAMA,wHAMA,mJAQA,iJAUA,wMAaA,kDAIA,6FAIA,yFAMA,yNAYA,2DAIA,iHAIA,yFAIA,sNAIA,oNAIA,wNAIA,sNAIA,wLAKA,gMAIA,oKAQA,qEAIA,wKASA,8BACE,oDAGA,uJAKA,yEAGA,yFAGA,oGAGA,kDAGA","sources":["src/components/table.css"],"sourcesContent":["@layer ddga-components {\n  /* Semantic <table> compound (SDGA Platforms Code). Row dividers are the base\n     look — a gray-300 hairline between body rows, always on. Header columns carry\n     vertical gray-300 dividers; body columns do not. There is NO full-grid variant.\n     `contained` adds only an outer gray-300 frame + radius-sm on the scroll region.\n     Density/zebra cascade from the root via descendant selectors; logical properties\n     throughout, with [dir='rtl'] overrides only for the physical box-shadow insets. */\n\n  /* ─── Scroll region ─── */\n\n  .ddga-table__region {\n    inline-size: 100%;\n    /* Horizontal scroll for wide tables. Vertical stays clipped (the region grows\n       to content height, so nothing is cut) until `maxHeight` caps it — at which\n       point the component sets `overflow-y: auto` inline so the body scrolls and\n       `stickyHeader` engages. */\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .ddga-table__region[role='region']:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  /* `contained` = outer frame only (no full grid); radius-sm clips its corners.\n     Non-contained (default) stays sharp-cornered per spec (radius 0). */\n  .ddga-table__region:has(> .ddga-table--contained) {\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Table base ─── */\n\n  .ddga-table {\n    --ddga-table-pad-block: var(--ddga-space-2);\n    --ddga-table-pad-inline: var(--ddga-space-4);\n    --ddga-table-row-h: 4rem;\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    background-color: var(--ddga-color-card);\n    text-align: start;\n  }\n\n  /* ─── Density (row height) ─── */\n\n  .ddga-table--sm {\n    --ddga-table-row-h: 3rem;\n  }\n  .ddga-table--md {\n    --ddga-table-row-h: 4rem;\n  }\n  .ddga-table--lg {\n    --ddga-table-row-h: 4.5rem;\n  }\n\n  /* ─── Head & cell ─── */\n\n  .ddga-table__head,\n  .ddga-table__cell {\n    padding-block: var(--ddga-table-pad-block);\n    padding-inline: var(--ddga-table-pad-inline);\n    text-align: start;\n    vertical-align: middle;\n  }\n  .ddga-table__cell {\n    block-size: var(--ddga-table-row-h);\n  }\n  .ddga-table__head {\n    block-size: 3rem;\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-gray-700);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n    white-space: nowrap;\n    border-block-end: 1px solid var(--ddga-color-input);\n  }\n  /* Header columns carry vertical dividers; body columns do not. */\n  .ddga-table__header .ddga-table__head:not(:last-child) {\n    border-inline-end: 1px solid var(--ddga-color-input);\n  }\n\n  /* Logical alignment (RTL-safe). */\n  .ddga-table__head--align-start,\n  .ddga-table__cell--align-start {\n    text-align: start;\n  }\n  .ddga-table__head--align-center,\n  .ddga-table__cell--align-center {\n    text-align: center;\n  }\n  .ddga-table__head--align-end,\n  .ddga-table__cell--align-end {\n    text-align: end;\n  }\n\n  /* ─── Caption ─── */\n\n  .ddga-table__caption {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-table-pad-inline);\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n    text-align: start;\n    caption-side: bottom;\n  }\n\n  /* ─── Body rows ─── */\n\n  .ddga-table__body .ddga-table__row {\n    transition: background-color 120ms ease;\n  }\n  /* Row dividers are the SDGA base look — always on, not opt-in. */\n  .ddga-table__body .ddga-table__row:not(:last-child) {\n    border-block-end: 1px solid var(--ddga-color-input);\n  }\n  .ddga-table--striped\n    .ddga-table__body\n    .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n    background-color: var(--ddga-gray-50);\n  }\n  .ddga-table__body .ddga-table__row:hover:not([data-state='selected']) {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-table__body .ddga-table__row[data-state='selected'] {\n    background-color: var(--ddga-sa-50);\n    /* Inline-start accent stripe. box-shadow insets are physical (no logical form\n       exists), so flip the x-offset in RTL — the project's prescribed override. */\n    box-shadow: inset 2px 0 0 0 var(--ddga-color-primary);\n  }\n  [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n    box-shadow: inset -2px 0 0 0 var(--ddga-color-primary);\n  }\n\n  /* ─── Footer ─── */\n\n  .ddga-table__footer {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    border-block-start: 1px solid var(--ddga-color-input);\n  }\n\n  /* ─── Sticky header ─── */\n\n  .ddga-table--sticky .ddga-table__header .ddga-table__head {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n    /* Solid header fill so body rows don't bleed through while scrolling. */\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Sort & filter header controls ─── */\n\n  .ddga-table__sort-button,\n  .ddga-table__filter-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n  }\n  .ddga-table__filter-button {\n    justify-content: center;\n  }\n  /* Focus lands on the icon-box, not the button. */\n  .ddga-table__sort-button:focus-visible,\n  .ddga-table__filter-button:focus-visible {\n    outline: none;\n  }\n  .ddga-table__sort-button:disabled,\n  .ddga-table__filter-button:disabled {\n    cursor: not-allowed;\n  }\n\n  /* SDGA icon-box: 20px radius-sm; gray-100 + ink when off, gray-950 + white when active. */\n  .ddga-table__icon-box {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.25rem;\n    block-size: 1.25rem;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-table__icon-box > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-table__icon-box[data-active='false'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-table__icon-box[data-active='true'] {\n    background-color: var(--ddga-gray-950);\n    color: #fff;\n  }\n  .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'],\n  .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n    background-color: var(--ddga-gray-200);\n  }\n  .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'],\n  .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n    background-color: var(--ddga-gray-800);\n  }\n  .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'],\n  .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n    background-color: var(--ddga-gray-200);\n  }\n  .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'],\n  .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n    background-color: var(--ddga-gray-600);\n  }\n  .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n  .ddga-table__filter-button:focus-visible .ddga-table__icon-box {\n    outline: 2px solid var(--ddga-text-primary);\n    outline-offset: 0;\n  }\n  .ddga-table__sort-button:focus-visible .ddga-table__icon-box[data-active='true'],\n  .ddga-table__filter-button:focus-visible .ddga-table__icon-box[data-active='true'] {\n    box-shadow: inset 0 0 0 1px #fff;\n  }\n  .ddga-table__sort-button:disabled .ddga-table__icon-box,\n  .ddga-table__filter-button:disabled .ddga-table__icon-box {\n    color: var(--ddga-gray-400);\n    background-color: transparent;\n  }\n\n  /* ─── Dark mode ─── */\n\n  [data-theme='dark'] .ddga-table__head {\n    color: var(--ddga-text-secondary);\n  }\n  /* gray-50 zebra is invisible on dark; use the adaptive muted token instead. */\n  [data-theme='dark']\n    .ddga-table--striped\n    .ddga-table__body\n    .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-table__head {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-table__body .ddga-table__row:not(:last-child),\n    .ddga-table__header .ddga-table__head:not(:last-child),\n    .ddga-table__footer {\n      border-color: CanvasText;\n    }\n    .ddga-table__region:has(> .ddga-table--contained) {\n      border-color: CanvasText;\n    }\n    .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset 2px 0 0 0 Highlight;\n    }\n    [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset -2px 0 0 0 Highlight;\n    }\n    .ddga-table__icon-box {\n      border: 1px solid CanvasText;\n    }\n    .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n    .ddga-table__filter-button:focus-visible .ddga-table__icon-box,\n    .ddga-table__region[role='region']:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/tabs.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-tabs{color:var(--ddga-text-primary);gap:var(--ddga-space-3);--ddga-tabs-indicator-thickness:2px;flex-direction:column;display:flex}.ddga-tabs[data-orientation=vertical]{gap:var(--ddga-space-4);flex-direction:row}.ddga-tabs__list{flex-direction:row;align-items:stretch;display:flex}.ddga-tabs__list[data-orientation=vertical]{flex-direction:column;align-items:stretch}.ddga-tabs__list--full-width{inline-size:100%}.ddga-tabs__list--full-width .ddga-tabs__trigger{flex:1;justify-content:center}.ddga-tabs__trigger{appearance:none;align-items:center;gap:var(--ddga-space-2);color:var(--ddga-text-secondary);white-space:nowrap;cursor:pointer;background:0 0;border:0;margin:0;font-family:inherit;font-weight:500;line-height:1.4;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-tabs__trigger:hover{color:var(--ddga-text-primary)}.ddga-tabs__trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);border-radius:var(--ddga-radius-sm);outline:none}.ddga-tabs__trigger[data-disabled],.ddga-tabs__trigger[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ddga-tabs__trigger[data-disabled]:hover,.ddga-tabs__trigger[aria-disabled=true]:hover{color:var(--ddga-text-secondary)}.ddga-tabs__icon{flex-shrink:0;align-items:center;display:inline-flex}.ddga-tabs__icon>svg{block-size:1em;inline-size:1em}.ddga-tabs--sm .ddga-tabs__trigger{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-tabs--md .ddga-tabs__trigger{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-tabs--sm .ddga-tabs__trigger--icon-only{padding-inline:var(--ddga-space-1)}.ddga-tabs--md .ddga-tabs__trigger--icon-only{padding-inline:var(--ddga-space-2)}.ddga-tabs--line .ddga-tabs__list{border-block-end:1px solid var(--ddga-color-border);gap:var(--ddga-space-1)}.ddga-tabs--line .ddga-tabs__list[data-orientation=vertical]{border-block-end:0;border-inline-end:1px solid var(--ddga-color-border)}.ddga-tabs--line .ddga-tabs__trigger{border-block-end:var(--ddga-tabs-indicator-thickness) solid transparent;margin-block-end:calc(-1 * var(--ddga-tabs-indicator-thickness))}.ddga-tabs--line[data-orientation=vertical] .ddga-tabs__trigger{border-block-end:0;border-inline-end:var(--ddga-tabs-indicator-thickness) solid transparent;margin-block-end:0;margin-inline-end:calc(-1 * var(--ddga-tabs-indicator-thickness))}.ddga-tabs--line .ddga-tabs__trigger[data-state=active]{color:var(--ddga-color-primary);border-block-end-color:var(--ddga-color-primary)}.ddga-tabs--line[data-orientation=vertical] .ddga-tabs__trigger[data-state=active]{border-block-end-color:#0000;border-inline-end-color:var(--ddga-color-primary)}.ddga-tabs--pill .ddga-tabs__list{background-color:var(--ddga-color-muted);border-radius:var(--ddga-radius-md);padding:var(--ddga-space-1);gap:var(--ddga-space-1);align-self:flex-start}.ddga-tabs--pill .ddga-tabs__list--full-width{align-self:stretch}.ddga-tabs--pill .ddga-tabs__trigger{border-radius:calc(var(--ddga-radius-md) - 2px)}.ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state=active]){background-color:color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%)}.ddga-tabs--pill .ddga-tabs__trigger[data-state=active]{color:var(--ddga-text-primary);background-color:var(--ddga-color-background);box-shadow:var(--ddga-shadow-sm)}.ddga-tabs__content{outline:none}.ddga-tabs__content:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);border-radius:var(--ddga-radius-sm)}@media (prefers-reduced-motion:reduce){.ddga-tabs__trigger{transition:none}}@media (forced-colors:active){.ddga-tabs--line .ddga-tabs__list{border-block-end-color:canvastext}.ddga-tabs--line .ddga-tabs__trigger[data-state=active]{color:highlight;border-block-end-color:highlight}.ddga-tabs--pill .ddga-tabs__trigger[data-state=active]{color:highlight;outline:1px solid highlight}.ddga-tabs__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}}}
+@layer ddga-components{.ddga-tabs{gap:var(--ddga-space-3);color:var(--ddga-text-primary);--ddga-tabs-indicator-thickness:3px;flex-direction:column;display:flex}.ddga-tabs[data-orientation=vertical]{gap:var(--ddga-space-4);flex-direction:row}.ddga-tabs__list{flex-direction:row;align-items:stretch;display:flex;position:relative}.ddga-tabs__list[data-orientation=vertical]{flex-direction:column;align-items:stretch}.ddga-tabs__list[data-orientation=horizontal]:after{content:"";block-size:var(--ddga-tabs-indicator-thickness);background-color:var(--ddga-color-input);border-radius:var(--ddga-radius-full);position:absolute;inset-block-end:0;inset-inline:0}.ddga-tabs__list--full-width{inline-size:100%}.ddga-tabs__list--full-width .ddga-tabs__trigger{flex:1}.ddga-tabs__list--flush .ddga-tabs__trigger:first-child{margin-inline-start:calc(-1 * var(--ddga-tabs-pad-inline,0px))}.ddga-tabs__trigger{appearance:none;justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-sm);color:var(--ddga-gray-700);white-space:nowrap;cursor:pointer;background:0 0;border:0;margin:0;font-family:inherit;font-weight:500;line-height:1.25rem;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-tabs[data-orientation=vertical] .ddga-tabs__trigger{font-weight:400}.ddga-tabs__trigger:after{content:"";border-radius:var(--ddga-radius-full);pointer-events:none;background-color:#0000;position:absolute}.ddga-tabs[data-orientation=horizontal] .ddga-tabs__trigger:after{inset-block-end:0;inset-inline:var(--ddga-tabs-pad-inline);block-size:var(--ddga-tabs-indicator-thickness)}.ddga-tabs[data-orientation=vertical] .ddga-tabs__trigger:after{inset-inline-start:0;inset-block:var(--ddga-space-2);inline-size:var(--ddga-tabs-indicator-thickness)}.ddga-tabs__trigger:hover,.ddga-tabs__trigger--hovered,.ddga-tabs__trigger:active,.ddga-tabs__trigger--pressed{color:var(--ddga-text-primary)}.ddga-tabs__trigger:hover:not([data-state=active]):not([data-disabled]),.ddga-tabs__trigger--hovered:not([data-state=active]){background-color:var(--ddga-color-muted)}.ddga-tabs__trigger:active:not([data-state=active]):not([data-disabled]),.ddga-tabs__trigger--pressed:not([data-state=active]){background-color:var(--ddga-color-border)}.ddga-tabs__trigger:hover:not([data-state=active]):after,.ddga-tabs__trigger--hovered:not([data-state=active]):after,.ddga-tabs__trigger:active:not([data-state=active]):after,.ddga-tabs__trigger--pressed:not([data-state=active]):after{background-color:var(--ddga-text-primary)}.ddga-tabs__trigger[data-state=active]{color:var(--ddga-text-primary);font-weight:700}.ddga-tabs[data-orientation=vertical] .ddga-tabs__trigger[data-state=active]{font-weight:600}.ddga-tabs__trigger[data-state=active]:after{background-color:var(--ddga-color-primary)}.ddga-tabs__trigger:focus-visible,.ddga-tabs__trigger--focused{border-radius:var(--ddga-radius-xs);box-shadow:inset 0 0 0 3px var(--ddga-text-primary), 0 0 0 1px var(--ddga-color-background);outline:none}.ddga-tabs__trigger[data-disabled],.ddga-tabs__trigger[aria-disabled=true]{color:var(--ddga-text-placeholder);cursor:not-allowed}.ddga-tabs__trigger[data-disabled]:hover,.ddga-tabs__trigger[aria-disabled=true]:hover{color:var(--ddga-text-placeholder);background-color:#0000}.ddga-tabs__trigger[data-disabled]:not([data-state=active]):after,.ddga-tabs__trigger[aria-disabled=true]:not([data-state=active]):after{background-color:#0000}.ddga-tabs__trigger[data-disabled][data-state=active]:after,.ddga-tabs__trigger[aria-disabled=true][data-state=active]:after{background-color:var(--ddga-text-placeholder)}.ddga-tabs__icon{flex-shrink:0;align-items:center;display:inline-flex}.ddga-tabs__icon>svg{block-size:1rem;inline-size:1rem}.ddga-tabs--sm[data-orientation=horizontal] .ddga-tabs__trigger{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);--ddga-tabs-pad-inline:var(--ddga-space-3)}.ddga-tabs--md[data-orientation=horizontal] .ddga-tabs__trigger{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-sm);--ddga-tabs-pad-inline:var(--ddga-space-4)}.ddga-tabs--lg[data-orientation=horizontal] .ddga-tabs__trigger{padding-block:var(--ddga-space-4);padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-sm);--ddga-tabs-pad-inline:var(--ddga-space-4)}.ddga-tabs--sm[data-orientation=vertical] .ddga-tabs__trigger{font-size:var(--ddga-font-size-sm);padding-block:2px;padding-inline:6px}.ddga-tabs--md[data-orientation=vertical] .ddga-tabs__trigger{padding-block:6px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-tabs--lg[data-orientation=vertical] .ddga-tabs__trigger{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-base);line-height:1.5rem}.ddga-tabs--sm .ddga-tabs__trigger--icon-only{padding-inline:var(--ddga-space-2)}.ddga-tabs--md .ddga-tabs__trigger--icon-only{padding-inline:var(--ddga-space-3)}.ddga-tabs--lg .ddga-tabs__trigger--icon-only{padding-inline:var(--ddga-space-4)}.ddga-tabs__list-wrap{align-items:stretch;inline-size:100%;display:flex;position:relative}.ddga-tabs__list-wrap:after{content:"";block-size:var(--ddga-tabs-indicator-thickness);background-color:var(--ddga-color-input);border-radius:var(--ddga-radius-full);position:absolute;inset-block-end:0;inset-inline:0}.ddga-tabs__list-wrap .ddga-tabs__list:after{content:none}.ddga-tabs__trigger--overflowed{display:none}.ddga-tabs__more{appearance:none;padding-inline:var(--ddga-space-3);cursor:pointer;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin:0;margin-inline-start:auto;display:inline-flex}.ddga-tabs__more-button{border-radius:var(--ddga-radius-sm);block-size:2rem;inline-size:2rem;color:var(--ddga-gray-700);justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}.ddga-tabs__more-icon{block-size:1.25rem;inline-size:1.25rem}.ddga-tabs__more:hover .ddga-tabs__more-button{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-tabs__more:active .ddga-tabs__more-button{background-color:var(--ddga-color-border)}.ddga-tabs__more[data-active] .ddga-tabs__more-button,.ddga-tabs__more[data-state=open] .ddga-tabs__more-button{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-tabs__more:focus-visible{outline:none}.ddga-tabs__more:focus-visible .ddga-tabs__more-button{border-radius:var(--ddga-radius-xs);box-shadow:inset 0 0 0 1px var(--ddga-color-background), 0 0 0 3px var(--ddga-text-primary)}.ddga-tabs__content{outline:none}.ddga-tabs__content:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);border-radius:var(--ddga-radius-sm)}[data-theme=dark] .ddga-tabs__trigger,[data-theme=dark] .ddga-tabs__more-button{color:var(--ddga-text-secondary)}[data-theme=dark] .ddga-tabs__trigger[data-state=active],[data-theme=dark] .ddga-tabs__trigger:hover,[data-theme=dark] .ddga-tabs__trigger:active,[data-theme=dark] .ddga-tabs__trigger:focus-visible,[data-theme=dark] .ddga-tabs__trigger--hovered,[data-theme=dark] .ddga-tabs__trigger--pressed,[data-theme=dark] .ddga-tabs__trigger--focused,[data-theme=dark] .ddga-tabs__more:hover .ddga-tabs__more-button,[data-theme=dark] .ddga-tabs__more[data-active] .ddga-tabs__more-button{color:var(--ddga-text-primary)}@media (prefers-reduced-motion:reduce){.ddga-tabs__trigger,.ddga-tabs__more-button{transition:none}}@media (forced-colors:active){.ddga-tabs__list[data-orientation=horizontal]:after,.ddga-tabs__list-wrap:after{background-color:canvastext}.ddga-tabs__trigger[data-state=active]{color:highlight}.ddga-tabs__trigger[data-state=active]:after{background-color:highlight}.ddga-tabs__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}}}
 /*# sourceMappingURL=tabs.css.map */

package/dist/components/tabs.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAQE,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,sEAKA,oDAOA,2IAKA,6IAQA,iFAGA,iFAMA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA","sources":["src/components/tabs.css"],"sourcesContent":["@layer ddga-components {\n  /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n     descendant selectors cascade from there. Logical properties keep the\n     RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n     and updates `data-orientation` on Root/List/Trigger/Content. */\n\n  /* ─── Root ─── */\n\n  .ddga-tabs {\n    display: flex;\n    color: var(--ddga-text-primary);\n    /* Default (horizontal) layout: list above content. */\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n    /* CSS var so consumers can tune the line variant's indicator weight. */\n    --ddga-tabs-indicator-thickness: 2px;\n  }\n\n  /* Vertical layout: list beside content. Radix sets data-orientation\n     on every part — target it on Root for layout flow, and on List for\n     its own flex direction. */\n  .ddga-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n    gap: var(--ddga-space-4);\n  }\n\n  /* ─── List ─── */\n\n  .ddga-tabs__list {\n    display: flex;\n    /* Horizontal default — gap depends on variant (pill needs tighter,\n       line wants none so the baseline reads as a single underline). */\n    flex-direction: row;\n    align-items: stretch;\n  }\n  .ddga-tabs__list[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Full-width: triggers stretch to fill the list. Each trigger\n     `flex: 1` so they share width evenly. Use a separate selector so the\n     prop is opt-in and doesn't override per-variant defaults. */\n  .ddga-tabs__list--full-width {\n    inline-size: 100%;\n  }\n  .ddga-tabs__list--full-width .ddga-tabs__trigger {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* ─── Trigger (Radix renders a <button>) ─── */\n\n  .ddga-tabs__trigger {\n    /* Reset the native button. */\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    /* Layout. */\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    /* Text. */\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    font-weight: 500;\n    line-height: 1.4;\n    white-space: nowrap;\n    cursor: pointer;\n    position: relative;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-tabs__trigger:hover {\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-tabs__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  /* Disabled — match both Radix's data-disabled (native disabled) AND\n     aria-disabled (asChild composition). Same convention as Button. */\n  .ddga-tabs__trigger[data-disabled],\n  .ddga-tabs__trigger[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-tabs__trigger[data-disabled]:hover,\n  .ddga-tabs__trigger[aria-disabled='true']:hover {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Icons (leading/trailing inside a trigger) ─── */\n\n  .ddga-tabs__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n  .ddga-tabs__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-tabs--sm .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Icon-only triggers square up: collapse the wider inline padding to match\n     the block padding so the hit target is balanced around the glyph. */\n  .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-1);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-2);\n  }\n\n  /* ─── Variant: line ─── */\n\n  .ddga-tabs--line .ddga-tabs__list {\n    /* The unselected baseline runs along the inline edge — block-end on\n       horizontal lists, inline-end on vertical ones (right in LTR, left in\n       RTL — logical properties handle the flip). */\n    border-block-end: 1px solid var(--ddga-color-border);\n    gap: var(--ddga-space-1);\n  }\n  .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n    border-block-end: 0;\n    border-inline-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger {\n    /* Reserve space for the indicator so active/inactive don't shift. */\n    margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n    margin-block-end: 0;\n    margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: 0;\n    border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-color-primary);\n    border-block-end-color: var(--ddga-color-primary);\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n    border-block-end-color: transparent;\n    border-inline-end-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Variant: pill ─── */\n\n  .ddga-tabs--pill .ddga-tabs__list {\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n    padding: var(--ddga-space-1);\n    gap: var(--ddga-space-1);\n    align-self: flex-start;\n  }\n  .ddga-tabs--pill .ddga-tabs__list--full-width {\n    align-self: stretch;\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger {\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n    background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-text-primary);\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-tabs__content {\n    /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n       from the list into the panel. Make that focus visible. */\n    outline: none;\n  }\n  .ddga-tabs__content:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tabs__trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tabs--line .ddga-tabs__list {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n      border-block-end-color: Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n      outline: 1px solid Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAKE,yIAQA,iFAOA,uFAMA,sFAOA,iPAUA,8CAGA,wDAIA,uHAMA,kYAsBA,0EAIA,wIAOA,6KAKA,sKAMA,8IAMA,uKAIA,yKAIA,qRAOA,sFAIA,6FAGA,wFAIA,4MASA,iIAKA,iJAKA,gKAIA,2KAOA,sEAKA,sDAOA,mNAMA,mNAMA,mNAQA,sIAKA,sJAKA,2LAQA,iFAGA,iFAGA,iFAMA,0FAOA,yNASA,0DAGA,6CAIA,yNAaA,kOAYA,6DAIA,uHAIA,0FAGA,wLAKA,4CAGA,uLASA,iCAGA,kHAKA,iHAIA,2fAYA,uCACE,6DAMF,8BACE,4GAIA,uDAGA,wEAGA","sources":["src/components/tabs.css"],"sourcesContent":["@layer ddga-components {\n  /* SDGA Tabs (Platforms Code): a single underline style. Size lives on the\n     root (.ddga-tabs--{sm,md,lg}); orientation comes from Radix's\n     `data-orientation`. Logical properties keep the RTL flip free. */\n\n  .ddga-tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n    color: var(--ddga-text-primary);\n    /* Indicator + track rail share one weight (SDGA 3px). */\n    --ddga-tabs-indicator-thickness: 3px;\n  }\n  .ddga-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n    gap: var(--ddga-space-4);\n  }\n\n  /* ─── List + track rail ─── */\n\n  .ddga-tabs__list {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    position: relative;\n  }\n  .ddga-tabs__list[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Horizontal baseline rail (gray-300, rounded) behind every tab; the active\n     green segment paints on top of it. Vertical lists have no rail. */\n  .ddga-tabs__list[data-orientation='horizontal']::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--ddga-tabs-indicator-thickness);\n    background-color: var(--ddga-color-input);\n    border-radius: var(--ddga-radius-full);\n  }\n\n  .ddga-tabs__list--full-width {\n    inline-size: 100%;\n  }\n  .ddga-tabs__list--full-width .ddga-tabs__trigger {\n    flex: 1;\n  }\n\n  .ddga-tabs__list--flush .ddga-tabs__trigger:first-child {\n    margin-inline-start: calc(-1 * var(--ddga-tabs-pad-inline, 0px));\n  }\n\n  /* ─── Trigger (Radix renders a <button>) ─── */\n\n  .ddga-tabs__trigger {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-gray-700);\n    font-family: inherit;\n    font-weight: 500;\n    line-height: 1.25rem;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n  .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger {\n    font-weight: 400;\n  }\n\n  .ddga-tabs__trigger::after {\n    content: '';\n    position: absolute;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    pointer-events: none;\n  }\n  .ddga-tabs[data-orientation='horizontal'] .ddga-tabs__trigger::after {\n    inset-block-end: 0;\n    inset-inline: var(--ddga-tabs-pad-inline);\n    block-size: var(--ddga-tabs-indicator-thickness);\n  }\n  .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger::after {\n    inset-inline-start: 0;\n    inset-block: var(--ddga-space-2);\n    inline-size: var(--ddga-tabs-indicator-thickness);\n  }\n\n  .ddga-tabs__trigger:hover,\n  .ddga-tabs__trigger--hovered,\n  .ddga-tabs__trigger:active,\n  .ddga-tabs__trigger--pressed {\n    color: var(--ddga-text-primary);\n  }\n  .ddga-tabs__trigger:hover:not([data-state='active']):not([data-disabled]),\n  .ddga-tabs__trigger--hovered:not([data-state='active']) {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-tabs__trigger:active:not([data-state='active']):not([data-disabled]),\n  .ddga-tabs__trigger--pressed:not([data-state='active']) {\n    background-color: var(--ddga-color-border);\n  }\n  .ddga-tabs__trigger:hover:not([data-state='active'])::after,\n  .ddga-tabs__trigger--hovered:not([data-state='active'])::after,\n  .ddga-tabs__trigger:active:not([data-state='active'])::after,\n  .ddga-tabs__trigger--pressed:not([data-state='active'])::after {\n    background-color: var(--ddga-text-primary);\n  }\n\n  .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-text-primary);\n    font-weight: 700;\n  }\n  .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n    font-weight: 600;\n  }\n  .ddga-tabs__trigger[data-state='active']::after {\n    background-color: var(--ddga-color-primary);\n  }\n\n  .ddga-tabs__trigger:focus-visible,\n  .ddga-tabs__trigger--focused {\n    outline: none;\n    border-radius: var(--ddga-radius-xs);\n    box-shadow:\n      inset 0 0 0 3px var(--ddga-text-primary),\n      0 0 0 1px var(--ddga-color-background);\n  }\n\n  .ddga-tabs__trigger[data-disabled],\n  .ddga-tabs__trigger[aria-disabled='true'] {\n    color: var(--ddga-text-placeholder);\n    cursor: not-allowed;\n  }\n  .ddga-tabs__trigger[data-disabled]:hover,\n  .ddga-tabs__trigger[aria-disabled='true']:hover {\n    background-color: transparent;\n    color: var(--ddga-text-placeholder);\n  }\n  .ddga-tabs__trigger[data-disabled]:not([data-state='active'])::after,\n  .ddga-tabs__trigger[aria-disabled='true']:not([data-state='active'])::after {\n    background-color: transparent;\n  }\n  .ddga-tabs__trigger[data-disabled][data-state='active']::after,\n  .ddga-tabs__trigger[aria-disabled='true'][data-state='active']::after {\n    background-color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Icons (fixed 16px, SDGA leading icon) ─── */\n\n  .ddga-tabs__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n  .ddga-tabs__icon > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n\n  /* ─── Sizes (per orientation) ─── */\n\n  .ddga-tabs--sm[data-orientation='horizontal'] .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n    --ddga-tabs-pad-inline: var(--ddga-space-3);\n  }\n  .ddga-tabs--md[data-orientation='horizontal'] .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-sm);\n    --ddga-tabs-pad-inline: var(--ddga-space-4);\n  }\n  .ddga-tabs--lg[data-orientation='horizontal'] .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-4);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-sm);\n    --ddga-tabs-pad-inline: var(--ddga-space-4);\n  }\n\n  /* Vertical: 6px/2px paddings have no token (DGA spacing-sm/xxs we lack) → raw px. */\n  .ddga-tabs--sm[data-orientation='vertical'] .ddga-tabs__trigger {\n    padding-block: 2px;\n    padding-inline: 6px;\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--md[data-orientation='vertical'] .ddga-tabs__trigger {\n    padding-block: 6px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--lg[data-orientation='vertical'] .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.5rem;\n  }\n\n  /* Icon-only (off-spec extra) — square the inline padding around the glyph. */\n  .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-2);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-3);\n  }\n  .ddga-tabs--lg .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-4);\n  }\n\n  /* ─── Overflow (\"More Tab\") ─── */\n\n  .ddga-tabs__list-wrap {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    inline-size: 100%;\n  }\n  /* The wrap owns the rail so it spans under the overflow trigger too. */\n  .ddga-tabs__list-wrap::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--ddga-tabs-indicator-thickness);\n    background-color: var(--ddga-color-input);\n    border-radius: var(--ddga-radius-full);\n  }\n  .ddga-tabs__list-wrap .ddga-tabs__list::after {\n    content: none;\n  }\n  .ddga-tabs__trigger--overflowed {\n    display: none;\n  }\n\n  .ddga-tabs__more {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    margin: 0;\n    margin-inline-start: auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--ddga-space-3);\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n  .ddga-tabs__more-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-gray-700);\n    transition:\n      color 150ms ease,\n      background-color 150ms ease;\n  }\n  .ddga-tabs__more-icon {\n    inline-size: 1.25rem;\n    block-size: 1.25rem;\n  }\n  .ddga-tabs__more:hover .ddga-tabs__more-button {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-tabs__more:active .ddga-tabs__more-button {\n    background-color: var(--ddga-color-border);\n  }\n  .ddga-tabs__more[data-active] .ddga-tabs__more-button,\n  .ddga-tabs__more[data-state='open'] .ddga-tabs__more-button {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-tabs__more:focus-visible {\n    outline: none;\n  }\n  .ddga-tabs__more:focus-visible .ddga-tabs__more-button {\n    border-radius: var(--ddga-radius-xs);\n    box-shadow:\n      inset 0 0 0 1px var(--ddga-color-background),\n      0 0 0 3px var(--ddga-text-primary);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-tabs__content {\n    outline: none;\n  }\n  .ddga-tabs__content:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  [data-theme='dark'] .ddga-tabs__trigger,\n  [data-theme='dark'] .ddga-tabs__more-button {\n    color: var(--ddga-text-secondary);\n  }\n  [data-theme='dark'] .ddga-tabs__trigger[data-state='active'],\n  [data-theme='dark'] .ddga-tabs__trigger:hover,\n  [data-theme='dark'] .ddga-tabs__trigger:active,\n  [data-theme='dark'] .ddga-tabs__trigger:focus-visible,\n  [data-theme='dark'] .ddga-tabs__trigger--hovered,\n  [data-theme='dark'] .ddga-tabs__trigger--pressed,\n  [data-theme='dark'] .ddga-tabs__trigger--focused,\n  [data-theme='dark'] .ddga-tabs__more:hover .ddga-tabs__more-button,\n  [data-theme='dark'] .ddga-tabs__more[data-active] .ddga-tabs__more-button {\n    color: var(--ddga-text-primary);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tabs__trigger,\n    .ddga-tabs__more-button {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .ddga-tabs__list[data-orientation='horizontal']::after,\n    .ddga-tabs__list-wrap::after {\n      background-color: CanvasText;\n    }\n    .ddga-tabs__trigger[data-state='active'] {\n      color: Highlight;\n    }\n    .ddga-tabs__trigger[data-state='active']::after {\n      background-color: Highlight;\n    }\n    .ddga-tabs__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/tag.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-tag{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-full);font-weight:var(--ddga-font-weight-medium);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;font-family:inherit;line-height:1.4;display:inline-flex}.ddga-tag--sm{height:20px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-2xs);font-weight:var(--ddga-font-weight-semibold)}.ddga-tag--md{height:24px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-tag--lg{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-tag--squared{border-radius:var(--ddga-radius-sm)}.ddga-tag--icon-only{aspect-ratio:1;padding-inline:0}.ddga-tag--default{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-tag--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-tag--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-tag--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-tag--success{background-color:var(--ddga-color-success);color:var(--ddga-color-success-foreground)}.ddga-tag--warning{background-color:var(--ddga-color-warning);color:var(--ddga-color-warning-foreground)}.ddga-tag--info{background-color:var(--ddga-color-info);color:var(--ddga-color-info-foreground)}.ddga-tag--primary-subtle{background-color:var(--ddga-sa-50);color:var(--ddga-sa-800);border-color:var(--ddga-sa-200)}.ddga-tag--secondary-subtle{background-color:var(--ddga-gray-50);color:var(--ddga-gray-800);border-color:var(--ddga-gray-200)}.ddga-tag--destructive-subtle{background-color:var(--ddga-error-50);color:var(--ddga-error-800);border-color:var(--ddga-error-200)}.ddga-tag--success-subtle{background-color:var(--ddga-success-50);color:var(--ddga-success-800);border-color:var(--ddga-success-200)}.ddga-tag--warning-subtle{background-color:var(--ddga-warning-50);color:var(--ddga-warning-800);border-color:var(--ddga-warning-200)}.ddga-tag--info-subtle{background-color:var(--ddga-info-50);color:var(--ddga-info-800);border-color:var(--ddga-info-200)}.ddga-tag--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-tag--on-color{background-color:var(--ddga-alpha-white-20);color:#fff}.ddga-tag--outlined{background-color:#0000}.ddga-tag--outlined.ddga-tag--secondary-subtle{border-color:var(--ddga-gray-600)}.ddga-tag--outlined.ddga-tag--primary-subtle{border-color:var(--ddga-sa-700)}.ddga-tag--outlined.ddga-tag--success-subtle{border-color:var(--ddga-success-700)}.ddga-tag--outlined.ddga-tag--destructive-subtle{border-color:var(--ddga-error-700)}.ddga-tag--outlined.ddga-tag--warning-subtle{border-color:var(--ddga-warning-700)}.ddga-tag--outlined.ddga-tag--info-subtle{border-color:var(--ddga-info-700)}.ddga-tag--outlined.ddga-tag--on-color{border-color:var(--ddga-alpha-white-60)}.ddga-tag__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-tag__icon>svg,.ddga-tag>svg{display:block}.ddga-tag--sm>svg,.ddga-tag--sm>.ddga-tag__icon>svg{width:10px;height:10px}.ddga-tag--md>svg,.ddga-tag--md>.ddga-tag__icon>svg{width:14px;height:14px}.ddga-tag--lg>svg,.ddga-tag--lg>.ddga-tag__icon>svg{width:18px;height:18px}.ddga-tag svg{flex-shrink:0;align-self:center}.ddga-tag__close{border-radius:var(--ddga-radius-full);block-size:1.5em;inline-size:1.5em;color:inherit;cursor:pointer;font:inherit;appearance:none;background-color:#0000;border:0;justify-content:center;align-items:center;margin-inline:.125em -.25em;padding:0;display:inline-flex}.ddga-tag__close>svg{block-size:.75em;inline-size:.75em}.ddga-tag__close:hover{background-color:color-mix(in srgb, currentColor 18%, transparent)}.ddga-tag__close:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:1px}[data-theme=dark] .ddga-tag--default,[data-theme=dark] .ddga-tag--secondary-subtle{background-color:var(--ddga-alpha-white-10);color:var(--ddga-gray-200)}[data-theme=dark] .ddga-tag--primary-subtle{color:var(--ddga-sa-200,#b8eacb);background-color:#1b835433}[data-theme=dark] .ddga-tag--destructive-subtle{color:var(--ddga-error-200,#fecdca);background-color:#d92d202e}[data-theme=dark] .ddga-tag--success-subtle{color:var(--ddga-success-200,#abefc6);background-color:#0794552e}[data-theme=dark] .ddga-tag--warning-subtle{color:var(--ddga-warning-200,#fedf89);background-color:#dc68032e}[data-theme=dark] .ddga-tag--info-subtle{color:var(--ddga-info-200,#b2ddff);background-color:#1570ef29}[data-theme=dark] .ddga-tag--secondary-subtle:not(.ddga-tag--outlined),[data-theme=dark] .ddga-tag--primary-subtle:not(.ddga-tag--outlined),[data-theme=dark] .ddga-tag--destructive-subtle:not(.ddga-tag--outlined),[data-theme=dark] .ddga-tag--success-subtle:not(.ddga-tag--outlined),[data-theme=dark] .ddga-tag--warning-subtle:not(.ddga-tag--outlined),[data-theme=dark] .ddga-tag--info-subtle:not(.ddga-tag--outlined){border-color:#0000}@media (forced-colors:active){.ddga-tag{border:1px solid canvastext}}}
+/*# sourceMappingURL=tag.css.map */

package/dist/components/tag.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,ySAgBA,8IAOA,gGAOA,kGAQA,uDAMA,qDAOA,oFAKA,yGAKA,+GAKA,qHAKA,yGAKA,yGAKA,gGAOA,sHAMA,8HAMA,mIAMA,qIAMA,qIAMA,yHAQA,mHAQA,2EAOA,2CAGA,iFAGA,6EAGA,kFAGA,oFAGA,kFAGA,4EAGA,+EAMA,4FAOA,gDAMA,2EAKA,2EAKA,2EAMA,8CAOA,wRAmBA,wDAKA,0FAIA,2FAOA,0JAKA,wGAIA,+GAIA,6GAIA,6GAIA,uGAMA,obAWA,8BACE","sources":["src/components/tag.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-full);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.4;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-tag--sm {\n    height: 20px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-2xs); /* SDGA x-Small = Text-2xs 10px */\n    font-weight: var(--ddga-font-weight-semibold); /* SDGA x-Small = SemiBold 600 */\n  }\n\n  .ddga-tag--md {\n    height: 24px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* SDGA Tag Medium = 32px / 16px text */\n  .ddga-tag--lg {\n    height: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Shape ─── */\n\n  .ddga-tag--squared {\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Icon only ─── */\n\n  .ddga-tag--icon-only {\n    padding-inline: 0;\n    aspect-ratio: 1;\n  }\n\n  /* ─── Solid variants ─── */\n\n  .ddga-tag--default {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n\n  .ddga-tag--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  .ddga-tag--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n\n  .ddga-tag--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n\n  .ddga-tag--success {\n    background-color: var(--ddga-color-success);\n    color: var(--ddga-color-success-foreground);\n  }\n\n  .ddga-tag--warning {\n    background-color: var(--ddga-color-warning);\n    color: var(--ddga-color-warning-foreground);\n  }\n\n  .ddga-tag--info {\n    background-color: var(--ddga-color-info);\n    color: var(--ddga-color-info-foreground);\n  }\n\n  /* ─── Subtle (tonal) variants — the SDGA filled Tag (−50 bg / −200 border / −800 text) ─── */\n\n  .ddga-tag--primary-subtle {\n    background-color: var(--ddga-sa-50);\n    color: var(--ddga-sa-800);\n    border-color: var(--ddga-sa-200);\n  }\n\n  .ddga-tag--secondary-subtle {\n    background-color: var(--ddga-gray-50);\n    color: var(--ddga-gray-800);\n    border-color: var(--ddga-gray-200);\n  }\n\n  .ddga-tag--destructive-subtle {\n    background-color: var(--ddga-error-50);\n    color: var(--ddga-error-800);\n    border-color: var(--ddga-error-200);\n  }\n\n  .ddga-tag--success-subtle {\n    background-color: var(--ddga-success-50);\n    color: var(--ddga-success-800);\n    border-color: var(--ddga-success-200);\n  }\n\n  .ddga-tag--warning-subtle {\n    background-color: var(--ddga-warning-50);\n    color: var(--ddga-warning-800);\n    border-color: var(--ddga-warning-200);\n  }\n\n  .ddga-tag--info-subtle {\n    background-color: var(--ddga-info-50);\n    color: var(--ddga-info-800);\n    border-color: var(--ddga-info-200);\n  }\n\n  /* ─── Outline ─── */\n\n  .ddga-tag--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n\n  /* ─── On-color (for colored / dark surfaces) ─── */\n\n  .ddga-tag--on-color {\n    background-color: var(--ddga-alpha-white-20);\n    color: #ffffff;\n  }\n\n  /* ─── Outlined (SDGA Tag \"Outline=True\") ─── */\n\n  .ddga-tag--outlined {\n    background-color: transparent;\n  }\n  .ddga-tag--outlined.ddga-tag--secondary-subtle {\n    border-color: var(--ddga-gray-600);\n  }\n  .ddga-tag--outlined.ddga-tag--primary-subtle {\n    border-color: var(--ddga-sa-700);\n  }\n  .ddga-tag--outlined.ddga-tag--success-subtle {\n    border-color: var(--ddga-success-700);\n  }\n  .ddga-tag--outlined.ddga-tag--destructive-subtle {\n    border-color: var(--ddga-error-700);\n  }\n  .ddga-tag--outlined.ddga-tag--warning-subtle {\n    border-color: var(--ddga-warning-700);\n  }\n  .ddga-tag--outlined.ddga-tag--info-subtle {\n    border-color: var(--ddga-info-700);\n  }\n  .ddga-tag--outlined.ddga-tag--on-color {\n    border-color: var(--ddga-alpha-white-60);\n  }\n\n  /* ─── Icons inside tag ─── */\n\n  .ddga-tag__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .ddga-tag__icon > svg,\n  .ddga-tag > svg {\n    display: block;\n  }\n\n  /* SDGA per-size lead/trail icon: x Small 10 · Small 14 · Medium 18 (the close button is sized separately). */\n  .ddga-tag--sm > svg,\n  .ddga-tag--sm > .ddga-tag__icon > svg {\n    width: 10px;\n    height: 10px;\n  }\n  .ddga-tag--md > svg,\n  .ddga-tag--md > .ddga-tag__icon > svg {\n    width: 14px;\n    height: 14px;\n  }\n  .ddga-tag--lg > svg,\n  .ddga-tag--lg > .ddga-tag__icon > svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .ddga-tag svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* ─── Close button (dismissible) ─── */\n\n  .ddga-tag__close {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5em;\n    block-size: 1.5em;\n    margin-inline-start: 0.125em;\n    margin-inline-end: -0.25em;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    color: inherit;\n    cursor: pointer;\n    font: inherit;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .ddga-tag__close > svg {\n    inline-size: 0.75em;\n    block-size: 0.75em;\n  }\n\n  .ddga-tag__close:hover {\n    background-color: color-mix(in srgb, currentColor 18%, transparent);\n  }\n\n  .ddga-tag__close:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n\n  [data-theme='dark'] .ddga-tag--default,\n  [data-theme='dark'] .ddga-tag--secondary-subtle {\n    background-color: var(--ddga-alpha-white-10);\n    color: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-tag--primary-subtle {\n    background-color: rgb(27 131 84 / 0.2);\n    color: var(--ddga-sa-200, #b8eacb);\n  }\n  [data-theme='dark'] .ddga-tag--destructive-subtle {\n    background-color: rgb(217 45 32 / 0.18);\n    color: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-tag--success-subtle {\n    background-color: rgb(7 148 85 / 0.18);\n    color: var(--ddga-success-200, #abefc6);\n  }\n  [data-theme='dark'] .ddga-tag--warning-subtle {\n    background-color: rgb(220 104 3 / 0.18);\n    color: var(--ddga-warning-200, #fedf89);\n  }\n  [data-theme='dark'] .ddga-tag--info-subtle {\n    background-color: rgb(21 112 239 / 0.16);\n    color: var(--ddga-info-200, #b2ddff);\n  }\n\n  /* Drop the light tint border on dark subtle chips (but keep outlined borders). */\n  [data-theme='dark'] .ddga-tag--secondary-subtle:not(.ddga-tag--outlined),\n  [data-theme='dark'] .ddga-tag--primary-subtle:not(.ddga-tag--outlined),\n  [data-theme='dark'] .ddga-tag--destructive-subtle:not(.ddga-tag--outlined),\n  [data-theme='dark'] .ddga-tag--success-subtle:not(.ddga-tag--outlined),\n  [data-theme='dark'] .ddga-tag--warning-subtle:not(.ddga-tag--outlined),\n  [data-theme='dark'] .ddga-tag--info-subtle:not(.ddga-tag--outlined) {\n    border-color: transparent;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tag {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/text-input.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-field[data-slot=text-input-field]{gap:var(--ddga-space-2)}.ddga-text-input__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-text-input__required{color:var(--ddga-error-700)}.ddga-text-input{align-items:center;gap:var(--ddga-space-2);inline-size:100%;border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-gray-700);padding-inline-start:var(--ddga-space-2);padding-inline-end:var(--ddga-space-4);transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.ddga-text-input--md{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-text-input--lg{block-size:40px;font-size:var(--ddga-font-size-base)}.ddga-text-input--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-text-input--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-text-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-text-input__field::placeholder{color:var(--ddga-gray-500)}.ddga-text-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-gray-700);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-text-input__adornment{max-block-size:100%;color:var(--ddga-gray-500);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-text-input__adornment svg{flex-shrink:0;align-self:center}.ddga-text-input:has(.ddga-text-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-text-input:has(.ddga-text-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-text-input__affix{padding-inline:var(--ddga-space-4);background-color:var(--ddga-gray-100);color:var(--ddga-gray-500);white-space:nowrap;align-self:stretch;align-items:center;display:inline-flex}.ddga-text-input--md .ddga-text-input__affix{padding-inline:var(--ddga-space-3)}.ddga-text-input__affix--subtle{background-color:#0000;padding-inline:0}.ddga-text-input__adornment--start:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--end:has(.ddga-text-input__affix){align-self:stretch}.ddga-text-input__adornment--start .ddga-text-input__affix{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-text-input__adornment--end .ddga-text-input__affix{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix){padding-inline-start:0}.ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix){padding-inline-end:0}.ddga-text-input__dropdown{gap:var(--ddga-space-1);color:var(--ddga-text-primary);font:inherit;cursor:pointer;border:0;padding-block:0;transition:background-color .15s}.ddga-text-input__dropdown--subtle{background-color:#0000}.ddga-text-input__dropdown-icon{flex-shrink:0;block-size:24px;inline-size:24px;display:inline-flex}.ddga-text-input__dropdown-icon>svg{block-size:100%;inline-size:100%}.ddga-text-input__dropdown-chevron{flex-shrink:0;block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-icon{block-size:20px;inline-size:20px}.ddga-text-input--md .ddga-text-input__dropdown-chevron{block-size:16px;inline-size:16px}.ddga-text-input__dropdown:hover{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown:active{background-color:var(--ddga-gray-300)}.ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-gray-100)}.ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-gray-200)}.ddga-text-input__dropdown--selected,.ddga-text-input__dropdown--selected:hover,.ddga-text-input__dropdown--selected:active{background-color:var(--ddga-gray-700);color:#fff}.ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary);outline:none}.ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-text-input:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-text-input--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-text-input:focus-within:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-text-input--pressed{background-color:var(--ddga-gray-100)}.ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-text-input:active:after,.ddga-text-input--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-text-input--error,.ddga-text-input--error:hover:not(:focus-within),.ddga-text-input--error:focus-within{border-color:var(--ddga-error-700)}.ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-gray-400);cursor:not-allowed}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,.ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-gray-400)}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix{background-color:var(--ddga-gray-200)}.ddga-field[data-slot=text-input-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=text-input-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-text-input{border-color:var(--ddga-color-input);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field{caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__affix{background-color:var(--ddga-color-muted);color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input__dropdown{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input__dropdown--subtle{background-color:#0000}[data-theme=dark] .ddga-text-input__dropdown:hover{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--subtle:hover{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input__dropdown:active,[data-theme=dark] .ddga-text-input__dropdown--subtle:active{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input__dropdown--selected,[data-theme=dark] .ddga-text-input__dropdown--selected:hover{background-color:var(--ddga-gray-700);color:#fff}[data-theme=dark] .ddga-text-input__dropdown:focus-visible{box-shadow:inset 0 0 0 2px var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--filled-lighter,[data-theme=dark] .ddga-text-input--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-text-input:focus-within:after,[data-theme=dark] .ddga-text-input:active:after,[data-theme=dark] .ddga-text-input--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-text-input--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__label,[data-theme=dark] .ddga-field[data-slot=text-input-field]:has(.ddga-text-input__field:disabled) .ddga-text-input__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=text-input-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-text-input{transition:none}}@media (forced-colors:active){.ddga-text-input{border:1px solid canvastext}.ddga-text-input:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-text-input:has(.ddga-text-input__field:disabled){border-color:graytext}.ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field{color:graytext}}}
+/*# sourceMappingURL=text-input.css.map */

package/dist/components/text-input.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBACE,gEAMA,wNAUA,uDAMA,kZAoBA,wEAIA,0EAOA,yFAIA,yFAOA,+KAaA,gEAOA,uPAAA,6PAAA,6PAWA,kJAWA,gEAMA,kGAGA,8FAMA,yMASA,gFAGA,wEAKA,mFAGA,iFAGA,yJAIA,mJAIA,wGAGA,oGAQA,wKASA,0DAGA,mGAMA,qEAIA,kFAKA,sFAIA,yFAKA,uEAGA,wEAGA,+EAGA,gFAIA,6KAQA,0GAQA,qFAOA,+DAGA,yEAGA,iJAcA,gEAAA,0GAIA,6KAYA,iJAQA,gIAQA,mIAKA,6HAIA,uHAAA,8GAIA,+OAOA,qHAOA,+FAGA,gGAGA,gGASA,uGAIA,+EAGA,0FAGA,8EAGA,mHAIA,qHAIA,4EAGA,6FAGA,oGAGA,0JAIA,qKAKA,+GAGA,8IAIA,uGAGA,kMAKA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,kCAQF,8BACE,6CAGA,6EAIA,6EAGA","sources":["src/components/text-input.css"],"sourcesContent":["@layer ddga-components {\n  .ddga-field[data-slot='text-input-field'] {\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n  .ddga-text-input__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-regular);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4286;\n  }\n\n  .ddga-text-input__required {\n    color: var(--ddga-error-700);\n  }\n\n  /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── */\n\n  .ddga-text-input {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-inline-start: var(--ddga-space-2);\n    padding-inline-end: var(--ddga-space-4);\n    border: 1px solid var(--ddga-gray-400);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-gray-700);\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease,\n      background-color 150ms ease;\n  }\n\n  /* ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── */\n\n  .ddga-text-input--md {\n    block-size: 32px;\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-text-input--lg {\n    block-size: 40px;\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Fill styles (SDGA Style axis) ─── */\n\n  .ddga-text-input--filled-lighter {\n    border-color: transparent;\n    background-color: var(--ddga-gray-25);\n  }\n  .ddga-text-input--filled-darker {\n    border-color: transparent;\n    background-color: var(--ddga-gray-100);\n  }\n\n  /* ─── Field (the actual <input>: transparent, borderless fill) ─── */\n\n  .ddga-text-input__field {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    block-size: 100%;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    caret-color: var(--ddga-gray-950);\n    outline: none;\n  }\n\n  .ddga-text-input__field::placeholder {\n    color: var(--ddga-gray-500);\n  }\n\n  /* Autofill: browsers repaint autofilled fields with their own bg/text,\n     overriding the theme (jarring in dark; government forms autofill heavily).\n     Repaint with tokens via the inset-shadow technique. */\n  .ddga-text-input__field:-webkit-autofill,\n  .ddga-text-input__field:-webkit-autofill:hover,\n  .ddga-text-input__field:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-gray-700);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Adornments (leading/trailing icon, affix, or in-field button) ─── */\n\n  .ddga-text-input__adornment {\n    display: inline-flex;\n    align-items: center;\n    align-self: center;\n    flex-shrink: 0;\n    /* Never taller than the field interior so an in-field control can't paint\n       over the border. */\n    max-block-size: 100%;\n    color: var(--ddga-gray-500);\n  }\n\n  .ddga-text-input__adornment svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* An adornment hugs the field edge: collapse the padding on its side. */\n  .ddga-text-input:has(.ddga-text-input__adornment--start) {\n    padding-inline-start: var(--ddga-space-2);\n  }\n  .ddga-text-input:has(.ddga-text-input__adornment--end) {\n    padding-inline-end: var(--ddga-space-2);\n  }\n\n  /* ─── Prefix / suffix affix (SDGA: flush, full-height gray chip) ─── */\n\n  .ddga-text-input__affix {\n    align-self: stretch;\n    display: inline-flex;\n    align-items: center;\n    padding-inline: var(--ddga-space-4);\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-500);\n    white-space: nowrap;\n  }\n  .ddga-text-input--md .ddga-text-input__affix {\n    padding-inline: var(--ddga-space-3);\n  }\n  .ddga-text-input__affix--subtle {\n    background-color: transparent;\n    padding-inline: 0;\n  }\n  /* Round the chip's outer corners to the field radius and bleed it flush. */\n  .ddga-text-input__adornment--start:has(.ddga-text-input__affix) {\n    align-self: stretch;\n  }\n  .ddga-text-input__adornment--end:has(.ddga-text-input__affix) {\n    align-self: stretch;\n  }\n  .ddga-text-input__adornment--start .ddga-text-input__affix {\n    border-start-start-radius: var(--ddga-radius-sm);\n    border-end-start-radius: var(--ddga-radius-sm);\n  }\n  .ddga-text-input__adornment--end .ddga-text-input__affix {\n    border-start-end-radius: var(--ddga-radius-sm);\n    border-end-end-radius: var(--ddga-radius-sm);\n  }\n  .ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix) {\n    padding-inline-start: 0;\n  }\n  .ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix) {\n    padding-inline-end: 0;\n  }\n\n  /* ─── Dropdown affix (SDGA `_Input Prefix-Suffix` \"Dropdown\": a <button>\n         trigger = badge icon + label + chevron; reuses the flush chip shell,\n         text is #161616 not gray-500, interactive states) ─── */\n\n  .ddga-text-input__dropdown {\n    gap: var(--ddga-space-1);\n    padding-block: 0;\n    border: 0;\n    color: var(--ddga-text-primary);\n    font: inherit;\n    cursor: pointer;\n    transition: background-color 150ms ease;\n  }\n  .ddga-text-input__dropdown--subtle {\n    background-color: transparent;\n  }\n  .ddga-text-input__dropdown-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    inline-size: 24px;\n    block-size: 24px;\n  }\n  .ddga-text-input__dropdown-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-text-input__dropdown-chevron {\n    flex-shrink: 0;\n    inline-size: 20px;\n    block-size: 20px;\n  }\n  .ddga-text-input--md .ddga-text-input__dropdown-icon {\n    inline-size: 20px;\n    block-size: 20px;\n  }\n  .ddga-text-input--md .ddga-text-input__dropdown-chevron {\n    inline-size: 16px;\n    block-size: 16px;\n  }\n  /* Interactive states (SDGA neutral-button ramp). */\n  .ddga-text-input__dropdown:hover {\n    background-color: var(--ddga-gray-200);\n  }\n  .ddga-text-input__dropdown:active {\n    background-color: var(--ddga-gray-300);\n  }\n  .ddga-text-input__dropdown--subtle:hover {\n    background-color: var(--ddga-gray-100);\n  }\n  .ddga-text-input__dropdown--subtle:active {\n    background-color: var(--ddga-gray-200);\n  }\n  /* Selected / open (SDGA `button-background-black-selected` #384250 + white). */\n  .ddga-text-input__dropdown--selected,\n  .ddga-text-input__dropdown--selected:hover,\n  .ddga-text-input__dropdown--selected:active {\n    background-color: var(--ddga-gray-700);\n    color: #ffffff;\n  }\n  /* Focus (SDGA shows a 4px #161616 border; a 2px inset ring matches the\n     library's focus language without shifting layout). */\n  .ddga-text-input__dropdown:focus-visible {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n  }\n\n  /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n         borderless filled styles stay borderless) ─── */\n\n  .ddga-text-input--default:hover:not(:focus-within) {\n    border-color: var(--ddga-gray-700);\n  }\n\n  /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n         ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n  .ddga-text-input:focus-within {\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-text-input--default:focus-within {\n    border-color: var(--ddga-gray-400);\n  }\n  .ddga-text-input:focus-within::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n         underline). The real state is :active; the `--pressed` class is a\n         static hook so the state is visible in Storybook / docs. The centered\n         underline overrides the focus full-width one while the mouse is down. */\n\n  .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n  .ddga-text-input--pressed {\n    background-color: var(--ddga-gray-100);\n  }\n  .ddga-text-input:active::after,\n  .ddga-text-input--pressed::after {\n    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n  .ddga-text-input--error,\n  .ddga-text-input--error:hover:not(:focus-within),\n  .ddga-text-input--error:focus-within {\n    border-color: var(--ddga-error-700);\n  }\n\n  /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n  .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)) {\n    border-color: var(--ddga-gray-300);\n    background-color: transparent;\n  }\n\n  /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n         no opacity dimming) ─── */\n\n  .ddga-text-input:has(.ddga-text-input__field:disabled) {\n    border-color: var(--ddga-gray-300);\n    background-color: transparent;\n    cursor: not-allowed;\n  }\n  .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n    color: var(--ddga-gray-400);\n    cursor: not-allowed;\n  }\n  .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder,\n  .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment {\n    color: var(--ddga-gray-400);\n  }\n  .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__label,\n  .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__required {\n    color: var(--ddga-gray-400);\n  }\n  /* SDGA: disabled affix chip switches gray-100 → gray-200 (background-disabled). */\n  .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix {\n    background-color: var(--ddga-gray-200);\n  }\n\n  /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n         error error-700, 4px block padding) ─── */\n\n  .ddga-field[data-slot='text-input-field'] .ddga-field__message {\n    padding-block: var(--ddga-space-1);\n  }\n  .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n    color: var(--ddga-gray-700);\n  }\n  .ddga-field[data-slot='text-input-field'] .ddga-field__message--error {\n    color: var(--ddga-error-700);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The SDGA light values are fixed gray-ramp steps that don't flip; remap to\n     the flipping semantic tokens so text/affordances stay readable on the dark\n     surface. Exact DGA dark palette is deferred (not yet available). */\n\n  [data-theme='dark'] .ddga-text-input {\n    border-color: var(--ddga-color-input);\n    color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-text-input__field {\n    caret-color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-text-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n  [data-theme='dark'] .ddga-text-input__adornment {\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark'] .ddga-text-input__affix {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown--subtle {\n    background-color: transparent;\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown:hover {\n    background-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown--subtle:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown:active,\n  [data-theme='dark'] .ddga-text-input__dropdown--subtle:active {\n    background-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown--selected,\n  [data-theme='dark'] .ddga-text-input__dropdown--selected:hover {\n    background-color: var(--ddga-gray-700);\n    color: #ffffff;\n  }\n  [data-theme='dark'] .ddga-text-input__dropdown:focus-visible {\n    box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-text-input--filled-lighter,\n  [data-theme='dark'] .ddga-text-input--filled-darker {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark'] .ddga-text-input--default:hover:not(:focus-within) {\n    border-color: var(--ddga-gray-500);\n  }\n  [data-theme='dark'] .ddga-text-input:focus-within::after,\n  [data-theme='dark'] .ddga-text-input:active::after,\n  [data-theme='dark'] .ddga-text-input--pressed::after {\n    background-color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n  [data-theme='dark'] .ddga-text-input--pressed {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),\n  [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:disabled) {\n    border-color: var(--ddga-color-border);\n  }\n  [data-theme='dark']\n    .ddga-text-input:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__field,\n  [data-theme='dark']\n    .ddga-text-input:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__field::placeholder,\n  [data-theme='dark']\n    .ddga-text-input:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__adornment {\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark']\n    .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__label,\n  [data-theme='dark']\n    .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n    .ddga-text-input__required {\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark'] .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-text-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast): focus underline is invisible,\n         restore a visible outline ─── */\n\n  @media (forced-colors: active) {\n    .ddga-text-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-text-input:focus-within {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-text-input:has(.ddga-text-input__field:disabled) {\n      border-color: GrayText;\n    }\n    .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n      color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/textarea.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-textarea__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-textarea__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-textarea{min-block-size:4.5rem;inline-size:100%;padding-block:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-family:inherit;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.ddga-textarea::placeholder{color:var(--ddga-text-placeholder)}.ddga-textarea:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea--sm{padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-textarea--md{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-textarea--lg{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-textarea--resize-vertical{resize:vertical}.ddga-textarea--resize-none{resize:none}.ddga-textarea:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-textarea--error{border-color:var(--ddga-color-error)}.ddga-textarea--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none;background-color:var(--ddga-color-muted)}.ddga-textarea:read-only:not(:disabled){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-visible{outline:2px solid highlight}.ddga-textarea:disabled{color:graytext;border-color:graytext}}}
+@layer ddga-components{.ddga-field[data-slot=textarea-field]{gap:var(--ddga-space-2)}.ddga-textarea__label{align-items:center;gap:var(--ddga-space-1);color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-regular);font-size:var(--ddga-font-size-sm);line-height:1.4286;display:inline-flex}.ddga-textarea__required{color:var(--ddga-error-700)}.ddga-textarea{border:1px solid var(--ddga-gray-400);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;transition:border-color .15s,box-shadow .15s,background-color .15s;display:block;position:relative}.ddga-textarea--filled-lighter{background-color:var(--ddga-gray-25);border-color:#0000}.ddga-textarea--filled-darker{background-color:var(--ddga-gray-100);border-color:#0000}.ddga-textarea__field{inline-size:100%;padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);color:var(--ddga-text-primary);font-family:inherit;font-size:var(--ddga-font-size-base);caret-color:var(--ddga-gray-950);background:0 0;border:0;outline:none;line-height:1.5;display:block}.ddga-textarea__field::placeholder{color:var(--ddga-gray-500)}.ddga-textarea__field--resize-vertical{resize:vertical}.ddga-textarea__field--resize-none{resize:none}.ddga-textarea__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-gray-950)}.ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-700)}.ddga-textarea:focus-within{box-shadow:var(--ddga-shadow-md)}.ddga-textarea--default:focus-within{border-color:var(--ddga-gray-400)}.ddga-textarea:focus-within:after{content:"";inset-inline:0;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-textarea--pressed{background-color:var(--ddga-gray-100)}.ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-gray-100)}.ddga-textarea:active:after,.ddga-textarea--pressed:after{content:"";inset-inline:25%;background-color:var(--ddga-gray-950);block-size:2px;position:absolute;bottom:-1px}.ddga-textarea--error,.ddga-textarea--error:hover:not(:focus-within),.ddga-textarea--error:focus-within{border-color:var(--ddga-error-700)}.ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)){border-color:var(--ddga-gray-300);background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:var(--ddga-gray-300);cursor:not-allowed;background-color:#0000}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-gray-400);cursor:not-allowed;resize:none}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-gray-400)}:is(.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,.ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-gray-400)}.ddga-field[data-slot=textarea-field] .ddga-field__message{padding-block:var(--ddga-space-1)}.ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-gray-700)}.ddga-field[data-slot=textarea-field] .ddga-field__message--error{color:var(--ddga-error-700)}[data-theme=dark] .ddga-textarea{border-color:var(--ddga-color-input)}[data-theme=dark] .ddga-textarea__field{color:var(--ddga-text-primary);caret-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea__field::placeholder{color:var(--ddga-text-placeholder)}[data-theme=dark] .ddga-textarea--filled-lighter,[data-theme=dark] .ddga-textarea--filled-darker{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea--default:hover:not(:focus-within){border-color:var(--ddga-gray-500)}[data-theme=dark] .ddga-textarea:focus-within:after,[data-theme=dark] .ddga-textarea:active:after,[data-theme=dark] .ddga-textarea--pressed:after{background-color:var(--ddga-text-primary)}[data-theme=dark] .ddga-textarea--pressed{background-color:var(--ddga-color-muted)}[data-theme=dark] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)){background-color:var(--ddga-color-muted)}:is([data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled)){border-color:var(--ddga-color-border)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder{color:var(--ddga-text-tertiary)}:is([data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__label,[data-theme=dark] .ddga-field[data-slot=textarea-field]:has(.ddga-textarea__field:disabled) .ddga-textarea__required){color:var(--ddga-text-tertiary)}[data-theme=dark] .ddga-field[data-slot=textarea-field] .ddga-field__message--helper{color:var(--ddga-text-secondary)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-within{outline-offset:1px;outline:2px solid highlight}.ddga-textarea:has(.ddga-textarea__field:disabled){border-color:graytext}.ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field{color:graytext}}}
 /*# sourceMappingURL=textarea.css.map */

package/dist/components/textarea.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAME,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA","sources":["src/components/textarea.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Textarea-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-textarea__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-textarea__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Textarea (owns border/focus/state , no adornments) ─── */\n\n  .ddga-textarea {\n    display: block;\n    inline-size: 100%;\n    min-block-size: 4.5rem;\n    padding-block: var(--ddga-space-2);\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    line-height: 1.6;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-textarea::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill (e.g. address fields): repaint with tokens , see input.css. */\n  .ddga-textarea:-webkit-autofill,\n  .ddga-textarea:-webkit-autofill:hover,\n  .ddga-textarea:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n  .ddga-textarea--sm {\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-textarea--md {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-textarea--lg {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n  .ddga-textarea--resize-vertical {\n    resize: vertical;\n  }\n  .ddga-textarea--resize-none {\n    resize: none;\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-textarea:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-textarea--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-textarea--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── States ─── */\n\n  .ddga-textarea:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    resize: none;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-textarea:read-only:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-textarea {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-textarea {\n      border: 1px solid CanvasText;\n    }\n    .ddga-textarea:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-textarea:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAOE,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAGA,+IAcA,8DAAA,sGAIA,yKAYA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,4LAKA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,gCAQF,8BACE,2CAGA,2EAIA,yEAGA","sources":["src/components/textarea.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n     see field.css. Mirrors the SDGA \"Textarea\" field model (= Text input, minus\n     the size axis): single size, three fill styles, gray-400 border, multi-line.\n     The control owns the box; the <textarea> inside is borderless/transparent so\n     the focus/pressed `::after` underline can render. */\n\n  .ddga-field[data-slot='textarea-field'] {\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n  .ddga-textarea__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-regular);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4286;\n  }\n\n  .ddga-textarea__required {\n    color: var(--ddga-error-700);\n  }\n\n  /* ─── Control (the bordered box; owns border/focus/state/style) ─── */\n\n  .ddga-textarea {\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    border: 1px solid var(--ddga-gray-400);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease,\n      background-color 150ms ease;\n  }\n\n  /* ─── Fill styles (SDGA Style axis) ─── */\n\n  .ddga-textarea--filled-lighter {\n    border-color: transparent;\n    background-color: var(--ddga-gray-25);\n  }\n  .ddga-textarea--filled-darker {\n    border-color: transparent;\n    background-color: var(--ddga-gray-100);\n  }\n\n  /* ─── Field (the actual <textarea>: transparent, borderless, multi-line) ─── */\n\n  .ddga-textarea__field {\n    display: block;\n    inline-size: 100%;\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.5;\n    caret-color: var(--ddga-gray-950);\n    outline: none;\n  }\n\n  .ddga-textarea__field::placeholder {\n    color: var(--ddga-gray-500);\n  }\n\n  .ddga-textarea__field--resize-vertical {\n    resize: vertical;\n  }\n  .ddga-textarea__field--resize-none {\n    resize: none;\n  }\n\n  /* Autofill: repaint with tokens (see text-input.css for the why). */\n  .ddga-textarea__field:-webkit-autofill,\n  .ddga-textarea__field:-webkit-autofill:hover,\n  .ddga-textarea__field:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n         borderless filled styles stay borderless) ─── */\n\n  .ddga-textarea--default:hover:not(:focus-within) {\n    border-color: var(--ddga-gray-700);\n  }\n\n  /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n         ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n  .ddga-textarea:focus-within {\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-textarea--default:focus-within {\n    border-color: var(--ddga-gray-400);\n  }\n  .ddga-textarea:focus-within::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n         underline). Real state is :active; `--pressed` is a static hook so the\n         state is visible in Storybook. The centered underline overrides the\n         focus full-width one while the mouse is down. */\n\n  .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n  .ddga-textarea--pressed {\n    background-color: var(--ddga-gray-100);\n  }\n  .ddga-textarea:active::after,\n  .ddga-textarea--pressed::after {\n    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\n  }\n\n  /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n  .ddga-textarea--error,\n  .ddga-textarea--error:hover:not(:focus-within),\n  .ddga-textarea--error:focus-within {\n    border-color: var(--ddga-error-700);\n  }\n\n  /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n  .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)) {\n    border-color: var(--ddga-gray-300);\n    background-color: transparent;\n  }\n\n  /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n         no opacity dimming) ─── */\n\n  .ddga-textarea:has(.ddga-textarea__field:disabled) {\n    border-color: var(--ddga-gray-300);\n    background-color: transparent;\n    cursor: not-allowed;\n  }\n  .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n    color: var(--ddga-gray-400);\n    cursor: not-allowed;\n    resize: none;\n  }\n  .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder {\n    color: var(--ddga-gray-400);\n  }\n  .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled) .ddga-textarea__label,\n  .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n    .ddga-textarea__required {\n    color: var(--ddga-gray-400);\n  }\n\n  /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n         error error-700, 4px block padding) ─── */\n\n  .ddga-field[data-slot='textarea-field'] .ddga-field__message {\n    padding-block: var(--ddga-space-1);\n  }\n  .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n    color: var(--ddga-gray-700);\n  }\n  .ddga-field[data-slot='textarea-field'] .ddga-field__message--error {\n    color: var(--ddga-error-700);\n  }\n\n  /* ─── Dark mode ─── */\n  /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n     flipping semantic tokens so text/affordances stay readable on dark. Exact\n     DGA dark palette deferred. */\n\n  [data-theme='dark'] .ddga-textarea {\n    border-color: var(--ddga-color-input);\n  }\n  [data-theme='dark'] .ddga-textarea__field {\n    color: var(--ddga-text-primary);\n    caret-color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-textarea__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n  [data-theme='dark'] .ddga-textarea--filled-lighter,\n  [data-theme='dark'] .ddga-textarea--filled-darker {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark'] .ddga-textarea--default:hover:not(:focus-within) {\n    border-color: var(--ddga-gray-500);\n  }\n  [data-theme='dark'] .ddga-textarea:focus-within::after,\n  [data-theme='dark'] .ddga-textarea:active::after,\n  [data-theme='dark'] .ddga-textarea--pressed::after {\n    background-color: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n  [data-theme='dark'] .ddga-textarea--pressed {\n    background-color: var(--ddga-color-muted);\n  }\n  [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),\n  [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) {\n    border-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field,\n  [data-theme='dark']\n    .ddga-textarea:has(.ddga-textarea__field:disabled)\n    .ddga-textarea__field::placeholder {\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark']\n    .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n    .ddga-textarea__label,\n  [data-theme='dark']\n    .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n    .ddga-textarea__required {\n    color: var(--ddga-text-tertiary);\n  }\n  [data-theme='dark'] .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-textarea {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n         restore a visible outline ─── */\n\n  @media (forced-colors: active) {\n    .ddga-textarea {\n      border: 1px solid CanvasText;\n    }\n    .ddga-textarea:focus-within {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-textarea:has(.ddga-textarea__field:disabled) {\n      border-color: GrayText;\n    }\n    .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n      color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/toggle.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-toggle,.ddga-toggle-group__item{justify-content:center;align-items:center;gap:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-primary);font:inherit;font-weight:var(--ddga-font-weight-medium);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;line-height:1;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.ddga-toggle--sm,.ddga-toggle-group--sm .ddga-toggle-group__item{block-size:32px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-toggle--md,.ddga-toggle-group--md .ddga-toggle-group__item{block-size:36px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-toggle--lg,.ddga-toggle-group--lg .ddga-toggle-group__item{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-toggle:hover:not(:disabled),.ddga-toggle-group__item:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-toggle[data-state=on],.ddga-toggle-group__item[data-state=on]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-toggle[data-state=on]:hover:not(:disabled),.ddga-toggle-group__item[data-state=on]:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-toggle--outline,.ddga-toggle-group--outline .ddga-toggle-group__item{border-color:var(--ddga-color-input)}.ddga-toggle:focus-visible,.ddga-toggle-group__item:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:1px}.ddga-toggle:disabled,.ddga-toggle-group__item:disabled{opacity:.5;cursor:not-allowed}.ddga-toggle-group{align-items:center;display:inline-flex}.ddga-toggle-group--default{gap:var(--ddga-space-1)}.ddga-toggle-group--outline .ddga-toggle-group__item{border-radius:0;margin-inline-start:-1px}.ddga-toggle-group--outline .ddga-toggle-group__item:first-child{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm);margin-inline-start:0}.ddga-toggle-group--outline .ddga-toggle-group__item:last-child{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,.ddga-toggle-group--outline .ddga-toggle-group__item[data-state=on]{z-index:1;position:relative}@media (prefers-reduced-motion:reduce){.ddga-toggle,.ddga-toggle-group__item{transition:none}}@media (forced-colors:active){.ddga-toggle[data-state=on],.ddga-toggle-group__item[data-state=on]{color:highlighttext;background-color:highlight}.ddga-toggle:focus-visible,.ddga-toggle-group__item:focus-visible{outline:2px solid highlight}}}
+@layer ddga-components{.ddga-toggle{justify-content:center;align-items:center;gap:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-primary);font:inherit;font-weight:var(--ddga-font-weight-medium);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;line-height:1;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.ddga-toggle--sm{block-size:32px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-toggle--md{block-size:36px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-toggle--lg{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-toggle:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-toggle[data-state=on]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-toggle[data-state=on]:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-toggle--outline{border-color:var(--ddga-color-input)}.ddga-toggle:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:1px}.ddga-toggle:disabled{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.ddga-toggle{transition:none}}@media (forced-colors:active){.ddga-toggle[data-state=on]{color:highlighttext;background-color:highlight}.ddga-toggle:focus-visible{outline:2px solid highlight}}}
 /*# sourceMappingURL=toggle.css.map */

package/dist/components/toggle.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAKE,0aAuBA,uJAMA,yJAMA,uJASA,yHAOA,0JAKA,+JAOA,gHAOA,8HAQA,sFAQA,0DAMA,oDAMA,8FAIA,qLAKA,0JAMA,mKAQA,uCACE,uDAQF,8BACE,mHAKA","sources":["src/components/toggle.css"],"sourcesContent":["@layer ddga-components {\n  /* Standalone Toggle and ToggleGroup items share one visual language. The\n     base look is applied to both; group items additionally join into a\n     segmented control. Pressed state comes from Radix's [data-state='on']. */\n\n  .ddga-toggle,\n  .ddga-toggle-group__item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-primary);\n    font: inherit;\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-toggle--sm,\n  .ddga-toggle-group--sm .ddga-toggle-group__item {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-toggle--md,\n  .ddga-toggle-group--md .ddga-toggle-group__item {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-toggle--lg,\n  .ddga-toggle-group--lg .ddga-toggle-group__item {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Hover ─── */\n\n  .ddga-toggle:hover:not(:disabled),\n  .ddga-toggle-group__item:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Pressed (on) ─── */\n\n  .ddga-toggle[data-state='on'],\n  .ddga-toggle-group__item[data-state='on'] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-toggle[data-state='on']:hover:not(:disabled),\n  .ddga-toggle-group__item[data-state='on']:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Outline variant ─── */\n\n  .ddga-toggle--outline,\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-color: var(--ddga-color-input);\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-toggle:focus-visible,\n  .ddga-toggle-group__item:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-toggle:disabled,\n  .ddga-toggle-group__item:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* ─── Group: segmented control layout ─── */\n\n  .ddga-toggle-group {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /* Default variant: small gap between independent buttons. */\n  .ddga-toggle-group--default {\n    gap: var(--ddga-space-1);\n  }\n\n  /* Outline variant: items join into one segmented bar (shared borders,\n     rounded outer corners only). Logical radii flip correctly in RTL. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-radius: 0;\n    margin-inline-start: -1px;\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:first-child {\n    margin-inline-start: 0;\n    border-start-start-radius: var(--ddga-radius-sm);\n    border-end-start-radius: var(--ddga-radius-sm);\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:last-child {\n    border-start-end-radius: var(--ddga-radius-sm);\n    border-end-end-radius: var(--ddga-radius-sm);\n  }\n  /* Raise the focused/pressed item so its full border is visible over the\n     overlapping neighbor. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,\n  .ddga-toggle-group--outline .ddga-toggle-group__item[data-state='on'] {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toggle,\n    .ddga-toggle-group__item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toggle[data-state='on'],\n    .ddga-toggle-group__item[data-state='on'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-toggle:focus-visible,\n    .ddga-toggle-group__item:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAIE,iZAsBA,uGAKA,yGAKA,uGAMA,2EAIA,kHAIA,kGAIA,2DAIA,uFAKA,oDAKA,uCACE,8BAKF,8BACE,2EAIA","sources":["src/components/toggle.css"],"sourcesContent":["@layer ddga-components {\n  /* Standalone two-state Toggle button. (The SDGA segmented control lives in\n     content-switcher.css.) Pressed state comes from Radix's [data-state='on']. */\n\n  .ddga-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-primary);\n    font: inherit;\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-toggle--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-toggle--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-toggle--lg {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  .ddga-toggle:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-toggle[data-state='on'] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-toggle[data-state='on']:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  .ddga-toggle--outline {\n    border-color: var(--ddga-color-input);\n  }\n\n  .ddga-toggle:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  .ddga-toggle:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toggle {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .ddga-toggle[data-state='on'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-toggle:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/tooltip.css

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-tooltip{background-color:var(--ddga-text-primary);color:var(--ddga-color-background);border-radius:var(--ddga-radius-sm);box-shadow:var(--ddga-shadow-md);overflow-wrap:anywhere;z-index:50;max-inline-size:260px;font-family:inherit;line-height:1.4;animation-duration:.15s;animation-timing-function:ease}.ddga-tooltip--sm{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-tooltip--md{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-tooltip__arrow{fill:var(--ddga-text-primary)}.ddga-tooltip[data-state=delayed-open],.ddga-tooltip[data-state=instant-open]{animation-name:ddga-tooltip-in}.ddga-tooltip[data-state=closed]{animation-name:ddga-tooltip-out}@keyframes ddga-tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-tooltip-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ddga-tooltip{animation-duration:0s}}@media (forced-colors:active){.ddga-tooltip{border:1px solid canvastext}}}
+@layer ddga-components{.ddga-tooltip{--ddga-tooltip-surface:#fff;--ddga-tooltip-heading:var(--ddga-gray-800);--ddga-tooltip-paragraph:var(--ddga-gray-700);align-items:flex-start;gap:var(--ddga-space-2);padding:var(--ddga-space-2);background-color:var(--ddga-tooltip-surface);border-radius:var(--ddga-radius-sm);min-inline-size:160px;max-inline-size:240px;box-shadow:var(--ddga-shadow-lg);z-index:50;font-family:inherit;animation-duration:.15s;animation-timing-function:ease;display:flex}.ddga-tooltip--inverted{--ddga-tooltip-surface:var(--ddga-gray-800);--ddga-tooltip-heading:var(--ddga-gray-50);--ddga-tooltip-paragraph:var(--ddga-gray-100)}.ddga-tooltip__icon{flex-shrink:0;display:flex}.ddga-tooltip__glyph-disc{fill:#fff}.ddga-tooltip__glyph-mark{fill:var(--ddga-gray-700)}.ddga-tooltip__text{gap:var(--ddga-space-2);min-inline-size:0;font-size:var(--ddga-font-size-xs);overflow-wrap:anywhere;word-break:break-word;flex-direction:column;flex:1 1 0;line-height:18px;display:flex}.ddga-tooltip__title{color:var(--ddga-tooltip-heading);font-weight:var(--ddga-font-weight-semibold)}.ddga-tooltip__body{color:var(--ddga-tooltip-paragraph);font-weight:var(--ddga-font-weight-regular)}.ddga-tooltip__arrow{fill:var(--ddga-tooltip-surface)}[data-theme=dark] .ddga-tooltip:not(.ddga-tooltip--inverted){--ddga-tooltip-surface:var(--ddga-gray-800);--ddga-tooltip-heading:var(--ddga-gray-50);--ddga-tooltip-paragraph:var(--ddga-gray-100)}[data-theme=dark] .ddga-tooltip--inverted{--ddga-tooltip-surface:#fff;--ddga-tooltip-heading:var(--ddga-gray-800);--ddga-tooltip-paragraph:var(--ddga-gray-700)}.ddga-tooltip[data-state=delayed-open],.ddga-tooltip[data-state=instant-open]{animation-name:ddga-tooltip-in}.ddga-tooltip[data-state=closed]{animation-name:ddga-tooltip-out}@keyframes ddga-tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes ddga-tooltip-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ddga-tooltip{animation-duration:0s}}.ddga-tooltip-help{padding:var(--ddga-space-1);color:inherit;cursor:pointer;border-radius:var(--ddga-radius-full);background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.ddga-tooltip-help:focus-visible{outline:2px solid var(--ddga-text-primary);outline-offset:2px}@media (forced-colors:active){.ddga-tooltip{border:1px solid canvastext}}}
 /*# sourceMappingURL=tooltip.css.map */

package/dist/components/tooltip.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAGE,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE","sources":["src/components/tooltip.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Content ─── */\n\n  .ddga-tooltip {\n    /* Solid dark surface against light bgs; readable in both themes via\n       semantic foreground/background swap in dark.css. */\n    background-color: var(--ddga-text-primary);\n    color: var(--ddga-color-background);\n    border-radius: var(--ddga-radius-sm);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Keep the tooltip from getting absurdly wide for long content. */\n    max-inline-size: 260px;\n    /* Ensure word-wrap works for long words / URLs. */\n    overflow-wrap: anywhere;\n    /* Above modals are higher; this sits above page content. */\n    z-index: 50;\n    /* Radix sets animation data attrs on state changes — use them for a\n       light fade so the tooltip doesn't pop in jarringly. */\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-tooltip--sm {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-tooltip--md {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Arrow ─── */\n\n  .ddga-tooltip__arrow {\n    fill: var(--ddga-text-primary);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-tooltip[data-state='delayed-open'],\n  .ddga-tooltip[data-state='instant-open'] {\n    animation-name: ddga-tooltip-in;\n  }\n  .ddga-tooltip[data-state='closed'] {\n    animation-name: ddga-tooltip-out;\n  }\n\n  @keyframes ddga-tooltip-in {\n    from {\n      opacity: 0;\n      transform: translateY(2px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-tooltip-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tooltip {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: --ddga-text-primary remaps to a light tone and\n     --ddga-color-background goes dark, so the tooltip becomes a light pill\n     on a dark surface — still high contrast, just inverted. No override\n     needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBACE,gdAoBA,6JAMA,+CAMA,oCAGA,oDAIA,6MAYA,oGAKA,oGAKA,sDAKA,kMAKA,gKAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAOF,wMAYA,+FAKA,8BACE","sources":["src/components/tooltip.css"],"sourcesContent":["@layer ddga-components {\n  .ddga-tooltip {\n    --ddga-tooltip-surface: #fff;\n    --ddga-tooltip-heading: var(--ddga-gray-800);\n    --ddga-tooltip-paragraph: var(--ddga-gray-700);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-2);\n    min-inline-size: 160px;\n    max-inline-size: 240px;\n    background-color: var(--ddga-tooltip-surface);\n    border-radius: var(--ddga-radius-sm);\n    box-shadow: var(--ddga-shadow-lg);\n    font-family: inherit;\n    z-index: 50;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-tooltip--inverted {\n    --ddga-tooltip-surface: var(--ddga-gray-800);\n    --ddga-tooltip-heading: var(--ddga-gray-50);\n    --ddga-tooltip-paragraph: var(--ddga-gray-100);\n  }\n\n  .ddga-tooltip__icon {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  /* SDGA help badge is fixed two-tone (gray-700 disc + white \"?\") on every surface. */\n  .ddga-tooltip__glyph-disc {\n    fill: #fff;\n  }\n  .ddga-tooltip__glyph-mark {\n    fill: var(--ddga-gray-700);\n  }\n\n  .ddga-tooltip__text {\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    min-inline-size: 0;\n    font-size: var(--ddga-font-size-xs);\n    line-height: 18px;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n\n  .ddga-tooltip__title {\n    color: var(--ddga-tooltip-heading);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n\n  .ddga-tooltip__body {\n    color: var(--ddga-tooltip-paragraph);\n    font-weight: var(--ddga-font-weight-regular);\n  }\n\n  .ddga-tooltip__arrow {\n    fill: var(--ddga-tooltip-surface);\n  }\n\n  /* Dark theme: a bare tooltip adopts the dark surface; `inverted` flips to light. */\n  [data-theme='dark'] .ddga-tooltip:not(.ddga-tooltip--inverted) {\n    --ddga-tooltip-surface: var(--ddga-gray-800);\n    --ddga-tooltip-heading: var(--ddga-gray-50);\n    --ddga-tooltip-paragraph: var(--ddga-gray-100);\n  }\n  [data-theme='dark'] .ddga-tooltip--inverted {\n    --ddga-tooltip-surface: #fff;\n    --ddga-tooltip-heading: var(--ddga-gray-800);\n    --ddga-tooltip-paragraph: var(--ddga-gray-700);\n  }\n\n  .ddga-tooltip[data-state='delayed-open'],\n  .ddga-tooltip[data-state='instant-open'] {\n    animation-name: ddga-tooltip-in;\n  }\n  .ddga-tooltip[data-state='closed'] {\n    animation-name: ddga-tooltip-out;\n  }\n\n  @keyframes ddga-tooltip-in {\n    from {\n      opacity: 0;\n      transform: translateY(2px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-tooltip-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tooltip {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Help Icon trigger ─── */\n\n  .ddga-tooltip-help {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--ddga-space-1);\n    border: 0;\n    background: none;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--ddga-radius-full);\n  }\n\n  .ddga-tooltip-help:focus-visible {\n    outline: 2px solid var(--ddga-text-primary);\n    outline-offset: 2px;\n  }\n\n  @media (forced-colors: active) {\n    .ddga-tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/dark.css

@@ -1,2 +1,2 @@
-[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:#111927;--ddga-color-foreground:#f3f4f6;--ddga-color-muted:#1f2a37;--ddga-color-muted-foreground:#9da4ae;--ddga-color-border:#384250;--ddga-color-card:#1f2a37;--ddga-color-card-foreground:#f3f4f6;--ddga-color-input:#384250;--ddga-color-primary:#54c08a;--ddga-color-primary-hover:#88d8ad;--ddga-color-primary-active:#25935f;--ddga-color-primary-foreground:#0d121c;--ddga-color-secondary:#1f2a37;--ddga-color-secondary-hover:#384250;--ddga-color-secondary-foreground:#f3f4f6;--ddga-color-destructive:#f97066;--ddga-color-destructive-hover:#f04438;--ddga-color-destructive-foreground:#0d121c;--ddga-color-error:#f97066;--ddga-color-error-hover:#f04438;--ddga-color-error-foreground:#0d121c;--ddga-color-success:#47cd89;--ddga-color-success-hover:#17b26a;--ddga-color-success-foreground:#0d121c;--ddga-color-warning:#fdb022;--ddga-color-warning-hover:#f79009;--ddga-color-warning-foreground:#0d121c;--ddga-color-info:#53b1fd;--ddga-color-info-hover:#2e90fa;--ddga-color-info-foreground:#0d121c;--ddga-color-ring:#54c08a;--ddga-text-primary:#fff;--ddga-text-secondary:#ffffffb3;--ddga-text-tertiary:#fff9;--ddga-text-placeholder:#6c737f;--ddga-shadow-sm:0 1px 2px 0 #0000004d;--ddga-shadow-md:0 4px 6px -1px #0006;--ddga-shadow-lg:0 10px 15px -3px #0006}
+[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:var(--ddga-gray-900);--ddga-color-foreground:var(--ddga-gray-100);--ddga-color-muted:var(--ddga-gray-800);--ddga-color-muted-foreground:var(--ddga-gray-400);--ddga-color-border:var(--ddga-gray-700);--ddga-color-card:var(--ddga-gray-800);--ddga-color-card-foreground:var(--ddga-gray-100);--ddga-color-input:var(--ddga-gray-700);--ddga-color-primary:var(--ddga-brand-400);--ddga-color-primary-hover:var(--ddga-brand-300);--ddga-color-primary-active:var(--ddga-brand-500);--ddga-color-primary-foreground:var(--ddga-gray-950);--ddga-color-secondary:var(--ddga-gray-800);--ddga-color-secondary-hover:var(--ddga-gray-700);--ddga-color-secondary-foreground:var(--ddga-gray-100);--ddga-color-destructive:var(--ddga-error-400);--ddga-color-destructive-hover:var(--ddga-error-500);--ddga-color-destructive-foreground:var(--ddga-gray-950);--ddga-color-error:var(--ddga-error-400);--ddga-color-error-hover:var(--ddga-error-500);--ddga-color-error-foreground:var(--ddga-gray-950);--ddga-color-success:var(--ddga-success-400);--ddga-color-success-hover:var(--ddga-success-500);--ddga-color-success-foreground:var(--ddga-gray-950);--ddga-color-warning:var(--ddga-warning-400);--ddga-color-warning-hover:var(--ddga-warning-500);--ddga-color-warning-foreground:var(--ddga-gray-950);--ddga-color-info:var(--ddga-info-400);--ddga-color-info-hover:var(--ddga-info-500);--ddga-color-info-foreground:var(--ddga-gray-950);--ddga-color-ring:var(--ddga-brand-400);--ddga-text-primary:#fff;--ddga-text-secondary:var(--ddga-alpha-white-70);--ddga-text-tertiary:var(--ddga-alpha-white-60);--ddga-text-placeholder:var(--ddga-gray-500);--ddga-shadow-xs:0 1px 2px 0 #0000004d;--ddga-shadow-sm:0 1px 3px 0 #0006, 0 1px 2px 0 #0000004d;--ddga-shadow-md:0 2px 4px -2px #0000004d, 0 4px 8px -2px #00000073;--ddga-shadow-lg:0 4px 6px -2px #0000004d, 0 12px 16px -4px #00000080;--ddga-shadow-xl:0 8px 8px -4px #0000004d, 0 20px 24px -4px #00000080;--ddga-shadow-2xl:0 24px 48px -12px #0009;--ddga-shadow-3xl:0 32px 64px -12px #0000008c}
 /*# sourceMappingURL=dark.css.map */

package/dist/dark.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA","sources":["src/dark.css"],"sourcesContent":["/* Dark mode , DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n  color-scheme: dark;\n\n  /* ─── Surface / Layout (Gray 900-based) ─── */\n  --ddga-color-background: #111927;\n  --ddga-color-foreground: #f3f4f6;\n  --ddga-color-muted: #1f2a37;\n  --ddga-color-muted-foreground: #9da4ae;\n  --ddga-color-border: #384250;\n  --ddga-color-card: #1f2a37;\n  --ddga-color-card-foreground: #f3f4f6;\n  --ddga-color-input: #384250;\n\n  /* ─── Primary (SA Green , slightly lighter for dark bg) ─── */\n  --ddga-color-primary: #54c08a;\n  --ddga-color-primary-hover: #88d8ad;\n  --ddga-color-primary-active: #25935f;\n  --ddga-color-primary-foreground: #0d121c;\n\n  /* ─── Secondary ─── */\n  --ddga-color-secondary: #1f2a37;\n  --ddga-color-secondary-hover: #384250;\n  --ddga-color-secondary-foreground: #f3f4f6;\n\n  /* ─── Destructive ─── */\n  --ddga-color-destructive: #f97066;\n  --ddga-color-destructive-hover: #f04438;\n  --ddga-color-destructive-foreground: #0d121c;\n\n  /* ─── Semantic , lighter shades for dark bg legibility ─── */\n  --ddga-color-error: #f97066;\n  --ddga-color-error-hover: #f04438;\n  --ddga-color-error-foreground: #0d121c;\n  --ddga-color-success: #47cd89;\n  --ddga-color-success-hover: #17b26a;\n  --ddga-color-success-foreground: #0d121c;\n  --ddga-color-warning: #fdb022;\n  --ddga-color-warning-hover: #f79009;\n  --ddga-color-warning-foreground: #0d121c;\n  --ddga-color-info: #53b1fd;\n  --ddga-color-info-hover: #2e90fa;\n  --ddga-color-info-foreground: #0d121c;\n\n  /* ─── Focus ring ─── */\n  --ddga-color-ring: #54c08a;\n\n  /* ─── Text ─── */\n  --ddga-text-primary: #ffffff;\n  --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n  --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n  --ddga-text-placeholder: #6c737f;\n\n  /* ─── Shadows , stronger for dark backgrounds ─── */\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n"],"names":[]}
+{"version":3,"mappings":"AAGA","sources":["src/dark.css"],"sourcesContent":["/* Dark mode. Semantic tokens alias Tier-1 primitives + the brand ramp, so a\n   primitive or brand/accent override adapts dark automatically. The mode-aware\n   primary step (light 600 → dark 400) lives here. Shadows stay literal (not a ramp). */\n[data-theme='dark'] {\n  color-scheme: dark;\n\n  --ddga-color-background: var(--ddga-gray-900);\n  --ddga-color-foreground: var(--ddga-gray-100);\n  --ddga-color-muted: var(--ddga-gray-800);\n  --ddga-color-muted-foreground: var(--ddga-gray-400);\n  --ddga-color-border: var(--ddga-gray-700);\n  --ddga-color-card: var(--ddga-gray-800);\n  --ddga-color-card-foreground: var(--ddga-gray-100);\n  --ddga-color-input: var(--ddga-gray-700);\n\n  --ddga-color-primary: var(--ddga-brand-400);\n  --ddga-color-primary-hover: var(--ddga-brand-300);\n  --ddga-color-primary-active: var(--ddga-brand-500);\n  --ddga-color-primary-foreground: var(--ddga-gray-950);\n\n  --ddga-color-secondary: var(--ddga-gray-800);\n  --ddga-color-secondary-hover: var(--ddga-gray-700);\n  --ddga-color-secondary-foreground: var(--ddga-gray-100);\n\n  --ddga-color-destructive: var(--ddga-error-400);\n  --ddga-color-destructive-hover: var(--ddga-error-500);\n  --ddga-color-destructive-foreground: var(--ddga-gray-950);\n\n  --ddga-color-error: var(--ddga-error-400);\n  --ddga-color-error-hover: var(--ddga-error-500);\n  --ddga-color-error-foreground: var(--ddga-gray-950);\n  --ddga-color-success: var(--ddga-success-400);\n  --ddga-color-success-hover: var(--ddga-success-500);\n  --ddga-color-success-foreground: var(--ddga-gray-950);\n  --ddga-color-warning: var(--ddga-warning-400);\n  --ddga-color-warning-hover: var(--ddga-warning-500);\n  --ddga-color-warning-foreground: var(--ddga-gray-950);\n  --ddga-color-info: var(--ddga-info-400);\n  --ddga-color-info-hover: var(--ddga-info-500);\n  --ddga-color-info-foreground: var(--ddga-gray-950);\n\n  --ddga-color-ring: var(--ddga-brand-400);\n\n  --ddga-text-primary: #ffffff;\n  --ddga-text-secondary: var(--ddga-alpha-white-70);\n  --ddga-text-tertiary: var(--ddga-alpha-white-60);\n  --ddga-text-placeholder: var(--ddga-gray-500);\n\n  /* Stronger than light (navy is invisible on dark). */\n  --ddga-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-md: 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 4px 8px -2px rgb(0 0 0 / 0.45);\n  --ddga-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.3), 0 12px 16px -4px rgb(0 0 0 / 0.5);\n  --ddga-shadow-xl: 0 8px 8px -4px rgb(0 0 0 / 0.3), 0 20px 24px -4px rgb(0 0 0 / 0.5);\n  --ddga-shadow-2xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);\n  --ddga-shadow-3xl: 0 32px 64px -12px rgb(0 0 0 / 0.55);\n}\n"],"names":[]}