@dev-dga/css 0.7.0 → 0.8.1

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

package/dist/components/table.css

@@ -0,0 +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}}}
+/*# sourceMappingURL=table.css.map */

package/dist/components/table.css.map

@@ -0,0 +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":[]}

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--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--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{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}}}
 /*# 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,2IAKA,6IAQA,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  /* ─── 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  /* ─── 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,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":[]}

package/dist/components/tag-input.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-tag-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-tag-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);cursor:text;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s;display:flex}.ddga-tag-input--sm{min-block-size:32px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-tag-input--md{min-block-size:36px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-base)}.ddga-tag-input--lg{min-block-size:40px;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-lg)}.ddga-tag-input__list,.ddga-tag-input__item{display:contents}.ddga-tag-input__field{block-size:1.5rem;min-inline-size:60px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:60px;padding:0}.ddga-tag-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-tag-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-tag-input--error{border-color:var(--ddga-color-error)}.ddga-tag-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-tag-input[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-tag-input[data-disabled] .ddga-tag-input__field{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.ddga-tag-input{transition:none}}@media (forced-colors:active){.ddga-tag-input{border:1px solid canvastext}.ddga-tag-input:focus-within{outline:2px solid highlight}.ddga-tag-input[data-disabled]{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=tag-input.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBASE,oJASA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA","sources":["src/components/tag-input.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n     see field.css. Only TagInput-specific styles live here. The control box\n     mirrors Input's box (border / focus ring / sizes / error / disabled) but\n     wraps: chips + the text input share one flex-wrap flow, so the box grows\n     vertically (min-block-size, not a fixed height) as chips wrap. */\n\n  /* ─── Label ─── */\n\n  .ddga-tag-input__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  /* ─── Control (the bordered, wrapping box) ─── */\n\n  .ddga-tag-input {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    cursor: text;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n  .ddga-tag-input--sm {\n    min-block-size: 32px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tag-input--md {\n    min-block-size: 36px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-tag-input--lg {\n    min-block-size: 40px;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n     explicit roles in the JSX preserve list semantics regardless) ─── */\n\n  .ddga-tag-input__list,\n  .ddga-tag-input__item {\n    display: contents;\n  }\n\n  /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n  .ddga-tag-input__field {\n    flex: 1 1 60px;\n    min-inline-size: 60px;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n\n  .ddga-tag-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-tag-input:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-tag-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-tag-input--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-tag-input[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n    cursor: not-allowed;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tag-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tag-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-tag-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-tag-input[data-disabled] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}