@dev-dga/css 0.6.0 → 0.8.0

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":[]}

package/dist/components/timeline.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-timeline{--ddga-timeline-node-size:1.5rem;--ddga-timeline-dot-size:.75rem;--ddga-timeline-gap:var(--ddga-space-5);--ddga-timeline-rail-gap:var(--ddga-space-3);color:var(--ddga-text-primary);margin:0;padding:0;font-family:inherit;list-style:none;display:flex}.ddga-timeline--vertical{gap:var(--ddga-timeline-gap);flex-direction:column}.ddga-timeline--horizontal{align-items:flex-start;gap:var(--ddga-timeline-gap);flex-direction:row}.ddga-timeline--sm{--ddga-timeline-node-size:1.25rem;--ddga-timeline-dot-size:.625rem;--ddga-timeline-gap:var(--ddga-space-4);--ddga-timeline-rail-gap:var(--ddga-space-2);font-size:var(--ddga-font-size-xs)}.ddga-timeline--md{font-size:var(--ddga-font-size-sm)}.ddga-timeline__item{align-items:flex-start;gap:var(--ddga-timeline-rail-gap);display:flex;position:relative}.ddga-timeline--horizontal .ddga-timeline__item{flex-direction:column;flex:1;min-inline-size:0}.ddga-timeline--vertical .ddga-timeline__item:not(:last-child):before{content:"";inline-size:2px;background-color:var(--ddga-color-border);position:absolute;inset-block-start:var(--ddga-timeline-node-size);inset-block-end:calc(-1 * var(--ddga-timeline-gap));inset-inline-start:calc(var(--ddga-timeline-node-size) / 2 - 1px)}.ddga-timeline--horizontal .ddga-timeline__item:not(:last-child):before{content:"";block-size:2px;background-color:var(--ddga-color-border);position:absolute;inset-block-start:calc(var(--ddga-timeline-node-size) / 2 - 1px);inset-inline-start:var(--ddga-timeline-node-size);inset-inline-end:calc(-1 * var(--ddga-timeline-gap))}.ddga-timeline__item:has(>.ddga-timeline__marker--success):has(+*>[data-reached]):before{background-color:var(--ddga-color-success)}.ddga-timeline__item:has(>.ddga-timeline__marker--error):has(+*>[data-reached]):before{background-color:var(--ddga-color-error)}.ddga-timeline__item:has(>.ddga-timeline__marker--warning):has(+*>[data-reached]):before{background-color:var(--ddga-color-warning)}.ddga-timeline__item:has(>.ddga-timeline__marker--info):has(+*>[data-reached]):before{background-color:var(--ddga-color-info)}.ddga-timeline__marker{--ddga-timeline-node-color:var(--ddga-text-tertiary);z-index:1;inline-size:var(--ddga-timeline-node-size);block-size:var(--ddga-timeline-node-size);font-size:calc(var(--ddga-timeline-node-size) * .8);color:var(--ddga-timeline-node-color);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.ddga-timeline__dot{inline-size:var(--ddga-timeline-dot-size);block-size:var(--ddga-timeline-dot-size);border-radius:var(--ddga-radius-full);background-color:var(--ddga-timeline-node-color)}.ddga-timeline__marker>svg{block-size:1em;inline-size:1em}.ddga-timeline__marker--default{--ddga-timeline-node-color:var(--ddga-text-tertiary)}.ddga-timeline__marker--success{--ddga-timeline-node-color:var(--ddga-color-success)}.ddga-timeline__marker--error{--ddga-timeline-node-color:var(--ddga-color-error)}.ddga-timeline__marker--warning{--ddga-timeline-node-color:var(--ddga-color-warning)}.ddga-timeline__marker--info{--ddga-timeline-node-color:var(--ddga-color-info)}.ddga-timeline__content{gap:var(--ddga-space-1);min-inline-size:0;flex-direction:column;padding-block-start:calc((var(--ddga-timeline-node-size) - 1.4em) / 2);display:flex}.ddga-timeline__time{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-xs);font-variant-numeric:tabular-nums;line-height:1.4;display:block}.ddga-timeline__title{color:var(--ddga-text-primary);font-weight:600;line-height:1.4;display:block}.ddga-timeline__description{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-xs);line-height:1.4;display:block}@media (forced-colors:active){.ddga-timeline__dot{background-color:canvastext}.ddga-timeline__marker>svg{color:canvastext}.ddga-timeline .ddga-timeline__item:not(:last-child):before{background-color:canvastext}}}
+/*# sourceMappingURL=timeline.css.map */

package/dist/components/timeline.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAWE,wQAcA,4EAKA,kGAQA,8MAQA,sDAMA,6GAOA,+FAQA,oUAaA,sUAqBA,oIAGA,gIAGA,oIAGA,8HAMA,mWAiBA,8LAQA,0DAKA,qFAGA,qFAGA,iFAGA,qFAGA,+EAMA,4KASA,wJAQA,mGAOA,6HASA,8BACE,gDAGA,4CAGA","sources":["src/components/timeline.css"],"sourcesContent":["@layer ddga-components {\n  /* Visual-only chronological list. Size + orientation live on the root and\n     cascade via custom properties; status lives on each marker. The connector\n     line is CSS-drawn via `::before` on every item except the LAST, running\n     from this item's marker down (vertical) / across (horizontal) through the\n     content and the gap to the next marker. Logical properties handle the RTL\n     flip — no JS, no conditional classes. Marker colours use SOLID semantic\n     tokens (no -50/-100 tints), so dark mode adapts on its own. */\n\n  /* ─── Root (ol) ─── */\n\n  .ddga-timeline {\n    --ddga-timeline-node-size: 1.5rem;\n    --ddga-timeline-dot-size: 0.75rem;\n    --ddga-timeline-gap: var(--ddga-space-5);\n    --ddga-timeline-rail-gap: var(--ddga-space-3);\n\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n  }\n\n  .ddga-timeline--vertical {\n    flex-direction: column;\n    gap: var(--ddga-timeline-gap);\n  }\n\n  .ddga-timeline--horizontal {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--ddga-timeline-gap);\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-timeline--sm {\n    --ddga-timeline-node-size: 1.25rem;\n    --ddga-timeline-dot-size: 0.625rem;\n    --ddga-timeline-gap: var(--ddga-space-4);\n    --ddga-timeline-rail-gap: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-timeline--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-timeline__item {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-timeline-rail-gap);\n  }\n\n  .ddga-timeline--horizontal .ddga-timeline__item {\n    flex: 1;\n    min-inline-size: 0;\n    flex-direction: column;\n  }\n\n  /* ─── Connector line (CSS-drawn, between siblings) ─── */\n\n  .ddga-timeline--vertical .ddga-timeline__item:not(:last-child)::before {\n    content: '';\n    position: absolute;\n    inline-size: 2px;\n    /* Centre on the marker rail. */\n    inset-inline-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n    /* From just below this marker down through the content + the gap to the\n       next marker. */\n    inset-block-start: var(--ddga-timeline-node-size);\n    inset-block-end: calc(-1 * var(--ddga-timeline-gap));\n    background-color: var(--ddga-color-border);\n  }\n\n  .ddga-timeline--horizontal .ddga-timeline__item:not(:last-child)::before {\n    content: '';\n    position: absolute;\n    block-size: 2px;\n    /* Centre on the marker rail. */\n    inset-block-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n    /* From the inline-end of this marker across the gap to the next marker. */\n    inset-inline-start: var(--ddga-timeline-node-size);\n    inset-inline-end: calc(-1 * var(--ddga-timeline-gap));\n    background-color: var(--ddga-color-border);\n  }\n\n  /* Completed-progress fill: a connector lights up with THIS node's status\n     colour ONLY when the NEXT node is also \"reached\" (non-default — it carries\n     `data-reached`). So completed→completed fills, but completed→pending stays\n     neutral — exactly the Steps progress line. The `:has(+ * > [data-reached])`\n     gate also guarantees a next sibling exists (so the last item never\n     matches, matching the base rule's `:not(:last-child)`). Specificity is\n     (0,3,1) — equal to the base connector rule and ordered AFTER it, so source\n     order wins; the forced-colors override below is later still, so it wins. */\n\n  .ddga-timeline__item:has(> .ddga-timeline__marker--success):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-success);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--error):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--warning):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-warning);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--info):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-info);\n  }\n\n  /* ─── Marker (decorative node) ─── */\n\n  .ddga-timeline__marker {\n    /* Default node colour — overridden per status below. */\n    --ddga-timeline-node-color: var(--ddga-text-tertiary);\n\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n    inline-size: var(--ddga-timeline-node-size);\n    block-size: var(--ddga-timeline-node-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Sizes a custom icon child (1em) relative to the node. */\n    font-size: calc(var(--ddga-timeline-node-size) * 0.8);\n    color: var(--ddga-timeline-node-color);\n  }\n\n  .ddga-timeline__dot {\n    inline-size: var(--ddga-timeline-dot-size);\n    block-size: var(--ddga-timeline-dot-size);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-timeline-node-color);\n  }\n\n  /* A custom icon child fills the node box. */\n  .ddga-timeline__marker > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-timeline__marker--default {\n    --ddga-timeline-node-color: var(--ddga-text-tertiary);\n  }\n  .ddga-timeline__marker--success {\n    --ddga-timeline-node-color: var(--ddga-color-success);\n  }\n  .ddga-timeline__marker--error {\n    --ddga-timeline-node-color: var(--ddga-color-error);\n  }\n  .ddga-timeline__marker--warning {\n    --ddga-timeline-node-color: var(--ddga-color-warning);\n  }\n  .ddga-timeline__marker--info {\n    --ddga-timeline-node-color: var(--ddga-color-info);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-timeline__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    min-inline-size: 0;\n    /* Nudge the text block to sit optically centred against the node. */\n    padding-block-start: calc((var(--ddga-timeline-node-size) - 1.4em) / 2);\n  }\n\n  .ddga-timeline__time {\n    display: block;\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.4;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-timeline__title {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-weight: 600;\n    line-height: 1.4;\n  }\n\n  .ddga-timeline__description {\n    display: block;\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.4;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-timeline__dot {\n      background-color: CanvasText;\n    }\n    .ddga-timeline__marker > svg {\n      color: CanvasText;\n    }\n    .ddga-timeline .ddga-timeline__item:not(:last-child)::before {\n      background-color: CanvasText;\n    }\n  }\n}\n"],"names":[]}