@dev-dga/css 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @dev-dga/css
 
+## 0.7.0
+
+### Minor Changes
+
+- **Per-component CSS for the 8 new components in `@dev-dga/react@0.7.0`:** `components/empty-state.css`, `components/stat.css` (covers `Stat` + `StatGroup`), `components/popover.css`, `components/sidebar.css`, `components/scroll-area.css`, `components/menubar.css`, `components/timeline.css`. Each lives in `@layer ddga-components` and uses logical properties (`inline-size` / `inset-inline-*`) so it's RTL-correct without per-side overrides — the Sidebar collapse/side, Menubar open-menu underline, and Timeline connector all flip via logical props. Animations respect `prefers-reduced-motion`, and every file carries a `forced-colors` block.
+- **New overridable component CSS variables:** `--ddga-empty-state-tint-*` (EmptyState variant tints), `--ddga-stat-change-color` + `--ddga-stat-accent-*` (Stat sentiment color / accent edge), and `--ddga-stat-group-columns` (StatGroup fixed-column grid).
+- **`menubar.css`** adds the SA-green open-menu underline indicator (`::after` + green label on `[data-state='open']`), mirroring the Tabs active-tab accent; its panel block mirrors `dropdown-menu.css`.
+- No token-value changes; all new component CSS resolves existing `var(--ddga-*)` tokens.
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/components/empty-state.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-empty-state{--ddga-empty-state-media-size:3.5rem;--ddga-empty-state-icon-size:1.75rem;--ddga-empty-state-tint-bg:var(--ddga-gray-100);--ddga-empty-state-tint-fg:var(--ddga-gray-600);text-align:center;align-items:center;gap:var(--ddga-space-4);max-inline-size:28rem;padding-block:var(--ddga-space-8);padding-inline:var(--ddga-space-4);color:var(--ddga-text-primary);flex-direction:column;margin-inline:auto;display:flex}.ddga-empty-state__media{inline-size:var(--ddga-empty-state-media-size);block-size:var(--ddga-empty-state-media-size);border-radius:var(--ddga-radius-full);background-color:var(--ddga-empty-state-tint-bg);color:var(--ddga-empty-state-tint-fg);flex:none;justify-content:center;align-items:center;display:flex}.ddga-empty-state__media>svg{inline-size:var(--ddga-empty-state-icon-size);block-size:var(--ddga-empty-state-icon-size)}.ddga-empty-state__title{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);margin:0;line-height:1.4}.ddga-empty-state__description{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-base);margin:0;line-height:1.5}.ddga-empty-state__actions{justify-content:center;align-items:center;gap:var(--ddga-space-3);flex-wrap:wrap;margin-block-start:var(--ddga-space-2);display:flex}.ddga-empty-state--error{--ddga-empty-state-tint-bg:var(--ddga-error-50);--ddga-empty-state-tint-fg:var(--ddga-error-600)}.ddga-empty-state--success{--ddga-empty-state-tint-bg:var(--ddga-success-50);--ddga-empty-state-tint-fg:var(--ddga-success-600)}.ddga-empty-state--sm{--ddga-empty-state-media-size:2.75rem;--ddga-empty-state-icon-size:1.375rem;gap:var(--ddga-space-3);padding-block:var(--ddga-space-6)}.ddga-empty-state--sm .ddga-empty-state__title{font-size:var(--ddga-font-size-base)}.ddga-empty-state--sm .ddga-empty-state__description{font-size:var(--ddga-font-size-sm)}.ddga-empty-state--lg{--ddga-empty-state-media-size:4.5rem;--ddga-empty-state-icon-size:2.25rem;gap:var(--ddga-space-5);padding-block:var(--ddga-space-12)}.ddga-empty-state--lg .ddga-empty-state__title{font-size:var(--ddga-font-size-xl)}[data-theme=dark] .ddga-empty-state{--ddga-empty-state-tint-bg:#ffffff14;--ddga-empty-state-tint-fg:var(--ddga-gray-300,#d2d6db)}[data-theme=dark] .ddga-empty-state--error{--ddga-empty-state-tint-bg:#d92d202e;--ddga-empty-state-tint-fg:var(--ddga-error-200,#fecdca)}[data-theme=dark] .ddga-empty-state--success{--ddga-empty-state-tint-bg:#0794552e;--ddga-empty-state-tint-fg:var(--ddga-success-200,#abefc6)}@media (forced-colors:active){.ddga-empty-state__media{border:1px solid canvastext}}}
+/*# sourceMappingURL=empty-state.css.map */

package/dist/components/empty-state.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE","sources":["src/components/empty-state.css"],"sourcesContent":["@layer ddga-components {\n  /* Centered placeholder for empty / no-results / error / success states.\n     Tints flow through custom properties so dark mode + per-instance\n     recoloring are one-line overrides. Logical properties keep it RTL-correct;\n     the layout is centered so it is largely direction-agnostic anyway. */\n\n  .ddga-empty-state {\n    --ddga-empty-state-media-size: 3.5rem;\n    --ddga-empty-state-icon-size: 1.75rem;\n    /* Neutral tint shared by the default + search variants. */\n    --ddga-empty-state-tint-bg: var(--ddga-gray-100);\n    --ddga-empty-state-tint-fg: var(--ddga-gray-600);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: var(--ddga-space-4);\n    max-inline-size: 28rem;\n    margin-inline: auto;\n    padding-block: var(--ddga-space-8);\n    padding-inline: var(--ddga-space-4);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-empty-state__media {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--ddga-empty-state-media-size);\n    block-size: var(--ddga-empty-state-media-size);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-empty-state-tint-bg);\n    color: var(--ddga-empty-state-tint-fg);\n  }\n\n  .ddga-empty-state__media > svg {\n    inline-size: var(--ddga-empty-state-icon-size);\n    block-size: var(--ddga-empty-state-icon-size);\n  }\n\n  .ddga-empty-state__title {\n    margin: 0;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n  }\n\n  .ddga-empty-state__description {\n    margin: 0;\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.5;\n  }\n\n  .ddga-empty-state__actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-3);\n    margin-block-start: var(--ddga-space-2);\n  }\n\n  /* ─── Variant tints ─── */\n  /* default + search inherit the neutral gray tint from the base. */\n\n  .ddga-empty-state--error {\n    --ddga-empty-state-tint-bg: var(--ddga-error-50);\n    --ddga-empty-state-tint-fg: var(--ddga-error-600);\n  }\n\n  .ddga-empty-state--success {\n    --ddga-empty-state-tint-bg: var(--ddga-success-50);\n    --ddga-empty-state-tint-fg: var(--ddga-success-600);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-empty-state--sm {\n    --ddga-empty-state-media-size: 2.75rem;\n    --ddga-empty-state-icon-size: 1.375rem;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-6);\n  }\n  .ddga-empty-state--sm .ddga-empty-state__title {\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-empty-state--sm .ddga-empty-state__description {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  .ddga-empty-state--lg {\n    --ddga-empty-state-media-size: 4.5rem;\n    --ddga-empty-state-icon-size: 2.25rem;\n    gap: var(--ddga-space-5);\n    padding-block: var(--ddga-space-12);\n  }\n  .ddga-empty-state--lg .ddga-empty-state__title {\n    font-size: var(--ddga-font-size-xl);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The -50/-100 tints read too light on a dark page; use translucent fills\n     and lighter -200 foregrounds (mirrors alert.css). */\n\n  [data-theme='dark'] .ddga-empty-state {\n    --ddga-empty-state-tint-bg: rgb(255 255 255 / 0.08);\n    --ddga-empty-state-tint-fg: var(--ddga-gray-300, #d2d6db);\n  }\n  [data-theme='dark'] .ddga-empty-state--error {\n    --ddga-empty-state-tint-bg: rgb(217 45 32 / 0.18);\n    --ddga-empty-state-tint-fg: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-empty-state--success {\n    --ddga-empty-state-tint-bg: rgb(7 148 85 / 0.18);\n    --ddga-empty-state-tint-fg: var(--ddga-success-200, #abefc6);\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    .ddga-empty-state__media {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/menubar.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-menubar{align-items:center;gap:var(--ddga-space-1);padding:var(--ddga-space-1);background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);font-family:inherit;display:flex}.ddga-menubar__trigger{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-md);font-weight:var(--ddga-font-weight-medium);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #0000;outline:none;align-items:center;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex;position:relative}.ddga-menubar__trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-menubar__trigger[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar__trigger--default:after{content:"";inset-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:#0000;block-size:2px;transition:background-color .12s;position:absolute;inset-block-end:2px}.ddga-menubar__trigger--default[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--default[data-state=open]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary)}.ddga-menubar__trigger--default[data-state=open]:after{background-color:var(--ddga-color-primary)}.ddga-menubar__trigger--outline{border-color:var(--ddga-color-border)}.ddga-menubar__trigger--outline[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--outline[data-state=open]{border-color:var(--ddga-color-primary);color:var(--ddga-color-primary)}.ddga-menubar-menu{min-inline-size:192px;max-inline-size:320px;padding:var(--ddga-space-1);background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);z-index:50;outline:none;font-family:inherit}.ddga-menubar-menu[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-menubar-menu-in}.ddga-menubar-menu[data-state=closed]{animation:80ms ease-in ddga-menubar-menu-out}@keyframes ddga-menubar-menu-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-menubar-menu-out{0%{opacity:1}to{opacity:0}}.ddga-menubar-menu--sm{font-size:var(--ddga-font-size-sm)}.ddga-menubar-menu--md{font-size:var(--ddga-font-size-md)}.ddga-menubar-menu__item{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-menubar-menu__item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__item[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar-menu__item[data-destructive]{color:var(--ddga-color-destructive)}.ddga-menubar-menu__item[data-destructive][data-highlighted]{background-color:var(--ddga-error-50)}.ddga-menubar-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;overflow:hidden}.ddga-menubar-menu__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-menubar-menu__icon>svg{block-size:1em;inline-size:1em}.ddga-menubar-menu__shortcut{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);letter-spacing:.04em;margin-inline-start:auto}.ddga-menubar-menu__item--checkable{padding-inline-start:calc(var(--ddga-space-2) + 1.25em);position:relative}.ddga-menubar-menu__indicator{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--ddga-space-2);transform:translateY(-50%)}.ddga-menubar-menu__indicator-icon{block-size:.875em;inline-size:.875em}.ddga-menubar-menu__radio-dot{border-radius:var(--ddga-radius-full);background-color:currentColor;block-size:.5em;inline-size:.5em;display:inline-block}.ddga-menubar-menu__item--sub[data-state=open]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__sub-chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);margin-inline-start:auto}[dir=rtl] .ddga-menubar-menu__sub-chevron{transform:scaleX(-1)}.ddga-menubar-menu__group-label{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-tertiary);text-transform:uppercase;letter-spacing:.04em}.ddga-menubar-menu__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-border)}@media (forced-colors:active){.ddga-menubar{border:1px solid canvastext}.ddga-menubar__trigger[data-highlighted],.ddga-menubar__trigger[data-state=open]{color:highlighttext;background-color:highlight}.ddga-menubar__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}.ddga-menubar-menu{border:1px solid canvastext}.ddga-menubar-menu__item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-menubar-menu__separator{background-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-menubar__trigger,.ddga-menubar__trigger--default:after{transition:none}.ddga-menubar-menu[data-state=open],.ddga-menubar-menu[data-state=closed]{animation:none}}}
+/*# sourceMappingURL=menubar.css.map */

package/dist/components/menubar.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,qRAiBA,wdAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,0DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAUA,qKASA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA","sources":["src/components/menubar.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Bar (Menubar.Root) ─── */\n\n  .ddga-menubar {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-1);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    font-family: inherit;\n  }\n\n  /* ─── Bar trigger (File / Edit / View…) ─── */\n\n  /* Shared base across variants. A transparent 1px border is reserved so the\n     `outline` variant only flips border-color (no layout shift), and `default`\n     stays visually borderless. */\n  .ddga-menubar__trigger {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-md);\n    font-weight: var(--ddga-font-weight-medium);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    transition:\n      background-color 120ms ease,\n      border-color 120ms ease,\n      color 120ms ease;\n  }\n\n  .ddga-menubar__trigger:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  .ddga-menubar__trigger[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  /* ── Variant: default (flat menu-bar idiom) ── */\n\n  /* SA-green underline indicator for the open menu — reserved (transparent) at\n     rest so nothing shifts, animated in on open. Mirrors the Tabs active-tab\n     treatment (same --ddga-color-primary accent). */\n  .ddga-menubar__trigger--default::after {\n    content: '';\n    position: absolute;\n    inset-inline: var(--ddga-space-2);\n    inset-block-end: 2px;\n    block-size: 2px;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    transition: background-color 120ms ease;\n  }\n\n  /* Radix sets data-highlighted on hover / keyboard focus → soft surface. */\n  .ddga-menubar__trigger--default[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* data-state=open: this trigger's menu is showing → on-brand accent (green\n     label + underline), kept on the muted surface so the row reads active. */\n  .ddga-menubar__trigger--default[data-state='open'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-primary);\n  }\n  .ddga-menubar__trigger--default[data-state='open']::after {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ── Variant: outline (bordered button-style chip) ── */\n\n  .ddga-menubar__trigger--outline {\n    border-color: var(--ddga-color-border);\n  }\n\n  /* Hover / keyboard focus → soft surface fill (border stays neutral). */\n  .ddga-menubar__trigger--outline[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Open menu → SA-green border + green label (the border is the accent here,\n     so no underline for this variant). */\n  .ddga-menubar__trigger--outline[data-state='open'] {\n    border-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n  }\n\n  /* ─── Panel (Content / SubContent) ─── */\n\n  .ddga-menubar-menu {\n    min-inline-size: 192px;\n    max-inline-size: 320px;\n    padding: var(--ddga-space-1);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    z-index: 50;\n    outline: none;\n  }\n\n  /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n     surfaces feel instantaneous (this isn't a Modal). */\n  .ddga-menubar-menu[data-state='open'] {\n    animation: ddga-menubar-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-menubar-menu[data-state='closed'] {\n    animation: ddga-menubar-menu-out 80ms ease-in;\n  }\n\n  @keyframes ddga-menubar-menu-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-menubar-menu-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-menubar-menu--sm {\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-menubar-menu--md {\n    font-size: var(--ddga-font-size-md);\n  }\n\n  /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n  .ddga-menubar-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Radix sets data-highlighted on the actively focused/hovered item — that's\n     our only \"focus ring\" since the menu manages focus internally. */\n  .ddga-menubar-menu__item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-menubar-menu__item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  /* Destructive: red text and a red-tinted hover. Tracks the destructive\n     family the rest of the system uses. */\n  .ddga-menubar-menu__item[data-destructive] {\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* Inline pieces inside the row. */\n  .ddga-menubar-menu__label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .ddga-menubar-menu__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    flex-shrink: 0;\n    color: var(--ddga-text-secondary);\n  }\n  .ddga-menubar-menu__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-menubar-menu__shortcut {\n    margin-inline-start: auto;\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-text-tertiary);\n    letter-spacing: 0.04em;\n  }\n\n  /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n  .ddga-menubar-menu__item--checkable {\n    /* Reserve the indicator column even when unchecked so labels align. */\n    padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n    position: relative;\n  }\n\n  .ddga-menubar-menu__indicator {\n    position: absolute;\n    inset-inline-start: var(--ddga-space-2);\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-menubar-menu__indicator-icon {\n    inline-size: 0.875em;\n    block-size: 0.875em;\n  }\n  .ddga-menubar-menu__radio-dot {\n    /* span is inline by default → inline-size/block-size are ignored. Force a\n       sized inline-block so the filled circle actually renders. */\n    display: inline-block;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: var(--ddga-radius-full);\n    background-color: currentColor;\n  }\n\n  /* ─── Submenu ─── */\n\n  .ddga-menubar-menu__item--sub[data-state='open'] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-menubar-menu__sub-chevron {\n    margin-inline-start: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n  [dir='rtl'] .ddga-menubar-menu__sub-chevron {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Label + Separator ─── */\n\n  .ddga-menubar-menu__group-label {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n\n  .ddga-menubar-menu__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: calc(var(--ddga-space-1) * -1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-menubar {\n      border: 1px solid CanvasText;\n    }\n    .ddga-menubar__trigger[data-highlighted],\n    .ddga-menubar__trigger[data-state='open'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-menubar__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-menubar-menu {\n      border: 1px solid CanvasText;\n    }\n    .ddga-menubar-menu__item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-menubar-menu__separator {\n      background-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-menubar__trigger,\n    .ddga-menubar__trigger--default::after {\n      transition: none;\n    }\n    .ddga-menubar-menu[data-state='open'],\n    .ddga-menubar-menu[data-state='closed'] {\n      animation: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/popover.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-popover{background-color:var(--ddga-color-background);max-inline-size:20rem;color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);overflow-wrap:anywhere;z-index:50;outline:none;font-family:inherit;line-height:1.5;position:relative}.ddga-popover--sm{padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-popover--md{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-popover__arrow{fill:var(--ddga-color-background);filter:drop-shadow(-1px 1px 0 var(--ddga-color-border)) drop-shadow(1px 1px 0 var(--ddga-color-border))}.ddga-popover__close{block-size:1.75rem;inline-size:1.75rem;color:var(--ddga-text-secondary);cursor:pointer;border-radius:var(--ddga-radius-sm);background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-popover__close>svg{block-size:1rem;inline-size:1rem}.ddga-popover__close:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-popover__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-popover[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-popover-in}.ddga-popover[data-state=closed]{animation:80ms ease-in ddga-popover-out}@keyframes ddga-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes ddga-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ddga-popover{animation-duration:0s}}@media (forced-colors:active){.ddga-popover{border:1px solid canvastext}.ddga-popover__close:focus-visible{outline:2px solid canvastext}}}
+/*# sourceMappingURL=popover.css.map */

package/dist/components/popover.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA","sources":["src/components/popover.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Panel (Content) ─── */\n\n  .ddga-popover {\n    position: relative;\n    /* Generic interactive surface — mirrors the dropdown panel, not the dark\n       tooltip pill (popovers hold readable rich content). */\n    max-inline-size: 20rem;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.5;\n    overflow-wrap: anywhere;\n    /* Above page content; below modals (which use higher z-indexes). */\n    z-index: 50;\n    outline: none;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-popover--sm {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  .ddga-popover--md {\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Arrow ─── */\n  /* The SVG triangle is filled with the panel background, so on a light theme\n     it is white-on-white and only nicks the panel border. We border its two\n     outward slants with drop-shadows. KEY DETAIL: Radix wraps the arrow svg in\n     a span it rotates per side (180deg below, ±90deg beside), and a CSS filter\n     runs in the element's *local* space — before that wrapper rotation. So in\n     local space the apex always points the same way (down, toward 15,10 in the\n     \"0 0 30 10\" viewBox), regardless of which side the popover lands on. One\n     filter casting two shadows toward that local apex therefore borders the two\n     visible slants correctly for every side — no data-side rules, and the apex\n     and base stay where the SVG draws them (sharp tip, base merges into the\n     panel border). Border color adapts to the theme. */\n\n  .ddga-popover__arrow {\n    fill: var(--ddga-color-background);\n    filter: drop-shadow(-1px 1px 0 var(--ddga-color-border))\n      drop-shadow(1px 1px 0 var(--ddga-color-border));\n  }\n\n  /* ─── Close (corner X — mirrors ddga-modal__close) ─── */\n\n  .ddga-popover__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n\n  .ddga-popover__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n\n  .ddga-popover__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-popover__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-popover[data-state='open'] {\n    animation: ddga-popover-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-popover[data-state='closed'] {\n    animation: ddga-popover-out 80ms ease-in;\n  }\n\n  /* Direction-neutral fade+scale — no translate, so it reads correctly whether\n     Radix places the panel above, below, or beside the trigger (data-side). */\n  @keyframes ddga-popover-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n  @keyframes ddga-popover-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-popover {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: surface uses semantic --ddga-color-* + --ddga-text-* tokens,\n     which remap in dark.css — no override needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-popover {\n      border: 1px solid CanvasText;\n    }\n    .ddga-popover__close:focus-visible {\n      outline: 2px solid CanvasText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/scroll-area.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-scroll-area{--ddga-scroll-area-size:.625rem;--ddga-scroll-area-thumb:var(--ddga-gray-400);--ddga-scroll-area-thumb-hover:var(--ddga-gray-500);position:relative;overflow:hidden}.ddga-scroll-area__viewport{border-radius:inherit;block-size:100%;inline-size:100%}.ddga-scroll-area__viewport:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-scroll-area__scrollbar{touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;padding:2px;transition:opacity .16s;display:flex}.ddga-scroll-area__scrollbar[data-orientation=vertical]{inline-size:var(--ddga-scroll-area-size)}.ddga-scroll-area__scrollbar[data-orientation=horizontal]{block-size:var(--ddga-scroll-area-size);flex-direction:column}.ddga-scroll-area__thumb{background-color:var(--ddga-scroll-area-thumb);border-radius:var(--ddga-radius-full);flex:1;position:relative}.ddga-scroll-area__thumb:before{content:"";min-block-size:44px;min-inline-size:44px;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.ddga-scroll-area__thumb:hover{background-color:var(--ddga-scroll-area-thumb-hover)}.ddga-scroll-area__corner{background:0 0}[data-theme=dark] .ddga-scroll-area{--ddga-scroll-area-thumb:#fff3;--ddga-scroll-area-thumb-hover:#ffffff4d}@media (forced-colors:active){.ddga-scroll-area__thumb{background-color:canvastext;border:1px solid canvastext}}@media (prefers-reduced-motion:reduce){.ddga-scroll-area__scrollbar{transition:none}}}
+/*# sourceMappingURL=scroll-area.css.map */

package/dist/components/scroll-area.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAOE,sLASA,mFAKA,uGAOA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE","sources":["src/components/scroll-area.css"],"sourcesContent":["@layer ddga-components {\n  /* Cross-browser styled scroll container (Radix ScrollArea). The Root clips;\n     the viewport scrolls; custom scrollbars overlay the end edges. Logical\n     properties keep it RTL-correct — Radix moves the vertical scrollbar to the\n     inline-start edge based on `dir`. The consumer sets the bounding size\n     (height / max-height) on the Root; without it nothing scrolls. */\n\n  .ddga-scroll-area {\n    --ddga-scroll-area-size: 0.625rem;\n    --ddga-scroll-area-thumb: var(--ddga-gray-400);\n    --ddga-scroll-area-thumb-hover: var(--ddga-gray-500);\n\n    position: relative;\n    overflow: hidden;\n  }\n\n  .ddga-scroll-area__viewport {\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: inherit;\n  }\n  .ddga-scroll-area__viewport:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n\n  /* ─── Scrollbar ─── */\n\n  .ddga-scroll-area__scrollbar {\n    display: flex;\n    padding: 2px;\n    background: transparent;\n    touch-action: none;\n    user-select: none;\n    transition: opacity 160ms ease;\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='vertical'] {\n    inline-size: var(--ddga-scroll-area-size);\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='horizontal'] {\n    flex-direction: column;\n    block-size: var(--ddga-scroll-area-size);\n  }\n\n  .ddga-scroll-area__thumb {\n    position: relative;\n    flex: 1;\n    background-color: var(--ddga-scroll-area-thumb);\n    border-radius: var(--ddga-radius-full);\n  }\n  /* 44px minimum pointer hit target (Radix-recommended ::before trick). */\n  .ddga-scroll-area__thumb::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n    min-inline-size: 44px;\n    min-block-size: 44px;\n  }\n  .ddga-scroll-area__thumb:hover {\n    background-color: var(--ddga-scroll-area-thumb-hover);\n  }\n\n  .ddga-scroll-area__corner {\n    background: transparent;\n  }\n\n  /* ─── Dark mode ─── */\n  /* Neutral gray thumbs read too dark on a dark page; use translucent white. */\n  [data-theme='dark'] .ddga-scroll-area {\n    --ddga-scroll-area-thumb: rgb(255 255 255 / 0.2);\n    --ddga-scroll-area-thumb-hover: rgb(255 255 255 / 0.3);\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    .ddga-scroll-area__thumb {\n      background-color: CanvasText;\n      border: 1px solid CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-scroll-area__scrollbar {\n      transition: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/sidebar.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;min-block-size:100%;inline-size:100%;display:flex}.ddga-sidebar{inline-size:var(--ddga-sidebar-width);background-color:var(--ddga-color-background);block-size:100%;color:var(--ddga-text-primary);border-inline-end:1px solid var(--ddga-color-border);will-change:inline-size;flex-direction:column;flex:none;transition:inline-size .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar[data-side=end]{border-inline-end:0;border-inline-start:1px solid var(--ddga-color-border);order:1}.ddga-sidebar[data-collapsible=icon][data-state=collapsed]{inline-size:var(--ddga-sidebar-width-icon)}.ddga-sidebar[data-collapsible=offcanvas][data-state=collapsed]{border-inline:0;inline-size:0}.ddga-sidebar[data-variant=floating]{margin:var(--ddga-space-2);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);block-size:auto;box-shadow:var(--ddga-shadow-md)}.ddga-sidebar[data-variant=inset]{background-color:#0000;border-inline-end:0}.ddga-sidebar--mobile{inline-size:var(--ddga-sidebar-width);flex-direction:column;max-inline-size:85vw;display:flex}.ddga-sidebar-inset{flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant=inset]) .ddga-sidebar-inset{margin:var(--ddga-space-2);background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-sm);overflow:hidden}.ddga-sidebar__trigger{border-radius:var(--ddga-radius-sm);block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-sidebar__trigger:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__trigger:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__trigger>svg{block-size:1.125rem;inline-size:1.125rem}.ddga-sidebar__rail{cursor:col-resize;background:0 0;border:0;inline-size:.75rem;position:absolute;inset-block:0;inset-inline-end:0;transform:translate(50%)}[dir=rtl] .ddga-sidebar__rail{transform:translate(-50%)}.ddga-sidebar__header,.ddga-sidebar__footer{gap:var(--ddga-space-2);padding:var(--ddga-space-2);flex-direction:column;display:flex}.ddga-sidebar__content{gap:var(--ddga-space-1);min-block-size:0;padding:var(--ddga-space-2);flex-direction:column;flex:auto;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden auto}.ddga-sidebar__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:var(--ddga-space-2);background-color:var(--ddga-color-border);border:0}.ddga-sidebar__group{padding:var(--ddga-space-2);flex-direction:column;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.ddga-sidebar__group-label{block-size:1.75rem;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-tertiary);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;align-items:center;transition:block-size .25s cubic-bezier(.4,0,.2,1),opacity .15s;display:flex;overflow:hidden}[dir=rtl] .ddga-sidebar__group-label{letter-spacing:normal;text-transform:none}.ddga-sidebar__group-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;transition:opacity .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-sidebar__group-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-label{opacity:0;block-size:0;margin-block:0;padding-block:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-action,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-badge{opacity:0;pointer-events:none}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-sub{display:none}.ddga-sidebar__menu{gap:var(--ddga-space-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-sidebar__menu-item{position:relative}.ddga-sidebar__menu-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;min-inline-size:0;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-md);color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);text-align:start;cursor:pointer;white-space:nowrap;background:0 0;border:0;text-decoration:none;transition:background-color .12s,color .12s,padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar__menu-button>svg{block-size:1.125rem;inline-size:1.125rem;color:var(--ddga-text-secondary);flex:none;transition:color .12s}.ddga-sidebar__menu-button>:not(:first-child){transition:opacity .15s}.ddga-sidebar__menu-button:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-button:active{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-button[data-active=true]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-button[data-active=true]>svg{color:var(--ddga-color-primary)}.ddga-sidebar__menu-button--sm{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-xs)}.ddga-sidebar__menu-button--lg{padding-block:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__content,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group{padding-inline:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button{padding-inline:calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button>:not(:first-child){opacity:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__header,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__footer{align-items:center}.ddga-sidebar__menu-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-1);transform:translateY(-50%)}.ddga-sidebar__menu-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-action:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__menu-action[data-show-on-hover]{opacity:0}.ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],.ddga-sidebar__menu-action[data-show-on-hover]:focus-visible{opacity:1}.ddga-sidebar__menu-badge{pointer-events:none;block-size:1.25rem;min-inline-size:1.25rem;padding-inline:var(--ddga-space-1);border-radius:var(--ddga-radius-full);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-2);transform:translateY(-50%)}.ddga-sidebar__menu-skeleton{align-items:center;gap:var(--ddga-space-2);block-size:2rem;padding-inline:var(--ddga-space-2);display:flex}.ddga-sidebar__menu-skeleton-text{flex:auto;max-inline-size:12rem}.ddga-sidebar__menu-sub{border-inline-start:1px solid var(--ddga-color-border);gap:var(--ddga-space-1);flex-direction:column;margin:0;margin-inline-start:var(--ddga-space-3);padding-inline-start:var(--ddga-space-2);list-style:none;display:flex}.ddga-sidebar__menu-sub-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s;display:flex}.ddga-sidebar__menu-sub-button:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-sub-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-sub-button[data-active=true]{color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-sub-button--sm{font-size:var(--ddga-font-size-xs)}@media (forced-colors:active){.ddga-sidebar{border-color:canvastext}.ddga-sidebar__menu-button[data-active=true],.ddga-sidebar__menu-button:hover{color:highlighttext;background-color:highlight}.ddga-sidebar__separator,.ddga-sidebar__menu-sub{background-color:canvastext;border-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-sidebar,.ddga-sidebar__content,.ddga-sidebar__group,.ddga-sidebar__group-label,.ddga-sidebar__group-action,.ddga-sidebar__menu-button,.ddga-sidebar__menu-button>svg,.ddga-sidebar__menu-button>*,.ddga-sidebar__menu-badge,.ddga-sidebar__menu-sub-button{transition:none}}}
+/*# sourceMappingURL=sidebar.css.map */

package/dist/components/sidebar.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAOE,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,6HAKA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n  /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n     data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n     data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n     custom properties so consumers override per instance. Logical properties\n     keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n  .ddga-sidebar-wrapper {\n    --ddga-sidebar-width: 16rem;\n    --ddga-sidebar-width-icon: 3.5rem;\n\n    display: flex;\n    min-block-size: 100%;\n    inline-size: 100%;\n  }\n\n  /* ─── Container ─── */\n\n  .ddga-sidebar {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    inline-size: var(--ddga-sidebar-width);\n    block-size: 100%;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    border-inline-end: 1px solid var(--ddga-color-border);\n    /* Shared easing + duration for the whole collapse so width, paddings and\n       fades stay in lockstep (Material standard ease). */\n    transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: inline-size;\n    overflow: hidden;\n  }\n\n  /* side=end → border on the opposite logical edge and order after the inset. */\n  .ddga-sidebar[data-side='end'] {\n    order: 1;\n    border-inline-end: 0;\n    border-inline-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* Collapsed icon rail. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n    inline-size: var(--ddga-sidebar-width-icon);\n  }\n\n  /* Offcanvas collapse fully hides on desktop. */\n  .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n    inline-size: 0;\n    border-inline: 0;\n  }\n\n  /* ─── Variants ─── */\n\n  .ddga-sidebar[data-variant='floating'] {\n    margin: var(--ddga-space-2);\n    block-size: auto;\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-md);\n  }\n\n  .ddga-sidebar[data-variant='inset'] {\n    border-inline-end: 0;\n    background-color: transparent;\n  }\n\n  /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n  .ddga-sidebar--mobile {\n    inline-size: var(--ddga-sidebar-width);\n    max-inline-size: 85vw;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* ─── Inset (main content region) ─── */\n\n  .ddga-sidebar-inset {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n     Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n     inset card styling is opt-in via a modifier the consumer adds, OR scope by\n     wrapper. Keep it simple: provide the card look on a data hook. */\n  .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n    margin: var(--ddga-space-2);\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-sm);\n    overflow: hidden;\n  }\n\n  /* ─── Trigger / Rail ─── */\n\n  .ddga-sidebar__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__trigger:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__trigger:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__trigger > svg {\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n  }\n\n  .ddga-sidebar__rail {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-end: 0;\n    inline-size: 0.75rem;\n    transform: translateX(50%);\n    cursor: col-resize;\n    border: 0;\n    background: transparent;\n  }\n  [dir='rtl'] .ddga-sidebar__rail {\n    transform: translateX(-50%);\n  }\n\n  /* ─── Header / Content / Footer / Separator ─── */\n\n  .ddga-sidebar__header,\n  .ddga-sidebar__footer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-2);\n  }\n\n  .ddga-sidebar__content {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: var(--ddga-space-2);\n    border: 0;\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Group ─── */\n\n  .ddga-sidebar__group {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__group-label {\n    display: flex;\n    align-items: center;\n    block-size: 1.75rem;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    overflow: hidden;\n    transition:\n      block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 150ms ease;\n  }\n  /* Protect Arabic letter joining — no tracking, no uppercasing. */\n  [dir='rtl'] .ddga-sidebar__group-label {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-sidebar__group-action {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__group-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n     Group label collapses its height (and fades); group action + badge fade.\n     The sub-menu list is the only hard hide (it's replaced by the Popover\n     flyout when collapsed, so animating it adds no value). */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n    block-size: 0;\n    margin-block: 0;\n    padding-block: 0;\n    opacity: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n    display: none;\n  }\n\n  /* ─── Menu ─── */\n\n  .ddga-sidebar__menu {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-item {\n    position: relative;\n  }\n\n  .ddga-sidebar__menu-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: var(--ddga-radius-md);\n    background: transparent;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    overflow: hidden;\n    white-space: nowrap;\n    /* background/color ease for hover + active feedback; padding-inline shares\n       the collapse easing so the icon glides to centre in lockstep with width. */\n    transition:\n      background-color 120ms ease,\n      color 120ms ease,\n      padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ddga-sidebar__menu-button > svg {\n    flex: none;\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n    color: var(--ddga-text-secondary);\n    transition: color 120ms ease;\n  }\n  /* Everything after the leading icon (label, trailing chevron, inline badge)\n     fades on collapse rather than snapping out. */\n  .ddga-sidebar__menu-button > *:not(:first-child) {\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__menu-button:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-button:active {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] > svg {\n    color: var(--ddga-color-primary);\n  }\n\n  .ddga-sidebar__menu-button--sm {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n  }\n  .ddga-sidebar__menu-button--lg {\n    padding-block: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n     that would snap it to the centre of the still-wide box, then swoop inward).\n     Instead the parent content/group padding animates to 0 and the button's own\n     inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n     icon travel is a few px, fully in sync with the width, so no glitch. The\n     label/chevron/badge fade via the base opacity transition above. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n    padding-inline: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n    padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n    .ddga-sidebar__menu-button\n    > *:not(:first-child) {\n    opacity: 0;\n  }\n\n  /* Collapsed rail: center header/footer content and clip overflow so a wide\n     brand/label doesn't spill past the rail edge. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n    align-items: center;\n  }\n\n  /* ─── Menu action / badge / skeleton ─── */\n\n  .ddga-sidebar__menu-action {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-1);\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__menu-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-action:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__menu-action[data-show-on-hover] {\n    opacity: 0;\n  }\n  .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n  .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n    opacity: 1;\n  }\n\n  .ddga-sidebar__menu-badge {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-2);\n    transform: translateY(-50%);\n    pointer-events: none;\n    min-inline-size: 1.25rem;\n    block-size: 1.25rem;\n    padding-inline: var(--ddga-space-1);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n  }\n\n  .ddga-sidebar__menu-skeleton {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    block-size: 2rem;\n    padding-inline: var(--ddga-space-2);\n  }\n  .ddga-sidebar__menu-skeleton-text {\n    flex: 1 1 auto;\n    max-inline-size: 12rem;\n  }\n\n  /* ─── Sub-menu ─── */\n\n  .ddga-sidebar__menu-sub {\n    list-style: none;\n    margin: 0;\n    margin-inline-start: var(--ddga-space-3);\n    padding-inline-start: var(--ddga-space-2);\n    border-inline-start: 1px solid var(--ddga-color-border);\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-sub-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-sidebar__menu-sub-button:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-sub-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-sub-button[data-active='true'] {\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-sub-button--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-sidebar {\n      border-color: CanvasText;\n    }\n    .ddga-sidebar__menu-button[data-active='true'],\n    .ddga-sidebar__menu-button:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-sidebar__separator,\n    .ddga-sidebar__menu-sub {\n      background-color: CanvasText;\n      border-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-sidebar,\n    .ddga-sidebar__content,\n    .ddga-sidebar__group,\n    .ddga-sidebar__group-label,\n    .ddga-sidebar__group-action,\n    .ddga-sidebar__menu-button,\n    .ddga-sidebar__menu-button > svg,\n    .ddga-sidebar__menu-button > *,\n    .ddga-sidebar__menu-badge,\n    .ddga-sidebar__menu-sub-button {\n      transition: none;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/stat.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-stat{gap:var(--ddga-space-1);max-inline-size:20rem;padding:var(--ddga-space-5);background-color:var(--ddga-color-card);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);color:var(--ddga-color-card-foreground);flex-direction:column;display:flex}.ddga-stat--elevated{box-shadow:var(--ddga-shadow-md);border-color:#0000}.ddga-stat--elevated .ddga-stat__icon{border-radius:var(--ddga-radius-full);background-color:var(--ddga-sa-600);block-size:2.5rem;inline-size:2.5rem;color:var(--ddga-color-primary-foreground)}.ddga-stat--accent{--ddga-stat-accent-fg:var(--ddga-sa-600);--ddga-stat-accent-bg:var(--ddga-sa-50);border-inline-start:3px solid var(--ddga-stat-accent-fg)}.ddga-stat--accent[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-600);--ddga-stat-accent-bg:var(--ddga-success-50)}.ddga-stat--accent[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-600);--ddga-stat-accent-bg:var(--ddga-error-50)}.ddga-stat--accent[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-600);--ddga-stat-accent-bg:var(--ddga-gray-100)}.ddga-stat--accent .ddga-stat__icon{background-color:var(--ddga-stat-accent-bg);color:var(--ddga-stat-accent-fg)}[data-theme=dark] .ddga-stat--flat .ddga-stat__icon{color:var(--ddga-gray-300,#d2d6db);background-color:#ffffff14}[data-theme=dark] .ddga-stat--accent{--ddga-stat-accent-fg:var(--ddga-sa-300,#7ed3a8);--ddga-stat-accent-bg:#25935f2e}[data-theme=dark] .ddga-stat--accent[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-200,#abefc6);--ddga-stat-accent-bg:#0794552e}[data-theme=dark] .ddga-stat--accent[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-200,#fecdca);--ddga-stat-accent-bg:#d92d202e}[data-theme=dark] .ddga-stat--accent[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-300,#d2d6db);--ddga-stat-accent-bg:#ffffff14}.ddga-stat__label-row{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__label{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;line-height:1.4}[dir=rtl] .ddga-stat__label{letter-spacing:normal}.ddga-stat__icon{border-radius:var(--ddga-radius-md);background-color:var(--ddga-gray-100);block-size:2.25rem;inline-size:2.25rem;color:var(--ddga-gray-600);font-size:var(--ddga-font-size-lg);flex:none;justify-content:center;align-items:center;display:inline-flex}.ddga-stat__icon>svg{block-size:1em;inline-size:1em}.ddga-stat__value{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-2xl);font-weight:var(--ddga-font-weight-semibold);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}.ddga-stat__change-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__change{--ddga-stat-change-color:var(--ddga-text-secondary);align-items:center;gap:var(--ddga-space-1);color:var(--ddga-stat-change-color);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);font-variant-numeric:tabular-nums;display:inline-flex}.ddga-stat__change--positive{--ddga-stat-change-color:var(--ddga-color-success)}.ddga-stat__change--negative{--ddga-stat-change-color:var(--ddga-color-error)}.ddga-stat__change--neutral{--ddga-stat-change-color:var(--ddga-text-secondary)}.ddga-stat__change-icon{justify-content:center;align-items:center;font-size:.85em;display:inline-flex}.ddga-stat__change-icon>svg{block-size:1em;inline-size:1em}.ddga-stat__change-label{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-sm)}.ddga-stat--sm{padding:var(--ddga-space-4)}.ddga-stat--sm .ddga-stat__value{font-size:var(--ddga-font-size-xl)}.ddga-stat--lg{gap:var(--ddga-space-2);padding:var(--ddga-space-6)}.ddga-stat--lg .ddga-stat__value{font-size:var(--ddga-font-size-3xl)}.ddga-stat-group{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-sm{--ddga-stat-group-gap:var(--ddga-space-3)}.ddga-stat-group--gap-md{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-lg{--ddga-stat-group-gap:var(--ddga-space-6)}.ddga-stat-group--horizontal{gap:var(--ddga-stat-group-gap);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));display:grid}.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:repeat(var(--ddga-stat-group-columns), minmax(0, 1fr))}@media (max-width:40rem){.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:1fr}}.ddga-stat-group--vertical{gap:var(--ddga-stat-group-gap);flex-direction:column;display:flex}.ddga-stat-group .ddga-stat{max-inline-size:none}@media (forced-colors:active){.ddga-stat__icon{border:1px solid canvastext}.ddga-stat--accent{border-inline-start-color:highlight}}}
+/*# sourceMappingURL=stat.css.map */

package/dist/components/stat.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAWE,sRAeA,yEAIA,gMAQA,6JAOA,uIAIA,mIAIA,iIAIA,iHAYA,kHAIA,sHAIA,oJAIA,kJAIA,gJAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAWA,+EAMA,0RAUA,gFAGA,8EAKA,gFAIA,sGAOA,2DAKA,4FAMA,2CAGA,oEAGA,mEAIA,qEAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,gIAIA,yBACE,8EAKF,6FAOA,iDAKA,8BAEE,6CAGA","sources":["src/components/stat.css"],"sourcesContent":["@layer ddga-components {\n  /* Self-contained KPI tile: owns its surface (padding/border/bg/radius) so\n     `<Stat>` renders a complete tile with no Card wrapper. `max-inline-size`\n     keeps a single tile from stretching full-width; inside a grid/flex the\n     container controls sizing. Logical properties keep it RTL-safe; numbers\n     stay LTR via Latin digits. Sentiment color flows through\n     --ddga-stat-change-color. The --ddga-color-card/-border/-success/-error\n     tokens (surface + change row) adapt automatically in dark mode, but the\n     -50/-100 badge tints are raw palette tokens that don't, so they get\n     explicit [data-theme='dark'] overrides (below). */\n\n  .ddga-stat {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    max-inline-size: 20rem;\n    padding: var(--ddga-space-5);\n    background-color: var(--ddga-color-card);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    color: var(--ddga-color-card-foreground);\n  }\n\n  /* ─── Variants ─── */\n  /* flat = the base surface (border + neutral badge). elevated/accent below. */\n\n  .ddga-stat--elevated {\n    border-color: transparent;\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-stat--elevated .ddga-stat__icon {\n    inline-size: 2.5rem;\n    block-size: 2.5rem;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-sa-600);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  .ddga-stat--accent {\n    /* Edge bar + tinted badge color, keyed off the resolved sentiment\n       (data-sentiment on the root). Defaults to brand when no sentiment. */\n    --ddga-stat-accent-fg: var(--ddga-sa-600);\n    --ddga-stat-accent-bg: var(--ddga-sa-50);\n    border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n  }\n  .ddga-stat--accent[data-sentiment='positive'] {\n    --ddga-stat-accent-fg: var(--ddga-success-600);\n    --ddga-stat-accent-bg: var(--ddga-success-50);\n  }\n  .ddga-stat--accent[data-sentiment='negative'] {\n    --ddga-stat-accent-fg: var(--ddga-error-600);\n    --ddga-stat-accent-bg: var(--ddga-error-50);\n  }\n  .ddga-stat--accent[data-sentiment='neutral'] {\n    --ddga-stat-accent-fg: var(--ddga-gray-600);\n    --ddga-stat-accent-bg: var(--ddga-gray-100);\n  }\n  .ddga-stat--accent .ddga-stat__icon {\n    background-color: var(--ddga-stat-accent-bg);\n    color: var(--ddga-stat-accent-fg);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The -50/-100 badge tints are raw palette tokens (identical in dark) and read\n     near-white on a dark card. Use translucent fills + lighter foregrounds\n     (mirrors alert.css / empty-state.css). The change-row colors already adapt\n     via the semantic --ddga-color-* tokens, and the elevated brand badge\n     (--ddga-sa-600) stays legible in dark, so neither needs an override. */\n\n  [data-theme='dark'] .ddga-stat--flat .ddga-stat__icon {\n    background-color: rgb(255 255 255 / 0.08);\n    color: var(--ddga-gray-300, #d2d6db);\n  }\n  [data-theme='dark'] .ddga-stat--accent {\n    --ddga-stat-accent-fg: var(--ddga-sa-300, #7ed3a8);\n    --ddga-stat-accent-bg: rgb(37 147 95 / 0.18);\n  }\n  [data-theme='dark'] .ddga-stat--accent[data-sentiment='positive'] {\n    --ddga-stat-accent-fg: var(--ddga-success-200, #abefc6);\n    --ddga-stat-accent-bg: rgb(7 148 85 / 0.18);\n  }\n  [data-theme='dark'] .ddga-stat--accent[data-sentiment='negative'] {\n    --ddga-stat-accent-fg: var(--ddga-error-200, #fecdca);\n    --ddga-stat-accent-bg: rgb(217 45 32 / 0.18);\n  }\n  [data-theme='dark'] .ddga-stat--accent[data-sentiment='neutral'] {\n    --ddga-stat-accent-fg: var(--ddga-gray-300, #d2d6db);\n    --ddga-stat-accent-bg: rgb(255 255 255 / 0.08);\n  }\n\n  .ddga-stat__label-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-stat__label {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    text-transform: uppercase;\n    /* Tracked caps read as \"professional\" in LTR. Reset in RTL — letter-spacing\n       breaks Arabic cursive joining; uppercase is a harmless no-op on Arabic. */\n    letter-spacing: 0.06em;\n  }\n  [dir='rtl'] .ddga-stat__label {\n    letter-spacing: normal;\n  }\n\n  .ddga-stat__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: 2.25rem;\n    block-size: 2.25rem;\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-600);\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-stat__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-stat__value {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-2xl);\n    font-weight: var(--ddga-font-weight-semibold);\n    /* tight leading for the large single-line numeric */\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    /* Align digits across a grid of tiles. */\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-stat__change-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-stat__change {\n    --ddga-stat-change-color: var(--ddga-text-secondary);\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-stat-change-color);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    font-variant-numeric: tabular-nums;\n  }\n  .ddga-stat__change--positive {\n    --ddga-stat-change-color: var(--ddga-color-success);\n  }\n  .ddga-stat__change--negative {\n    --ddga-stat-change-color: var(--ddga-color-error);\n  }\n  /* Same as the default — kept explicit so the three sentiment modifiers are\n     symmetric and `--neutral` is a stable override hook. */\n  .ddga-stat__change--neutral {\n    --ddga-stat-change-color: var(--ddga-text-secondary);\n  }\n\n  .ddga-stat__change-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* caret slightly smaller than the change text for hierarchy */\n    font-size: 0.85em;\n  }\n  .ddga-stat__change-icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-stat__change-label {\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Sizes (scale padding + value; lg also opens the root gap) ─── */\n  .ddga-stat--sm {\n    padding: var(--ddga-space-4);\n  }\n  .ddga-stat--sm .ddga-stat__value {\n    font-size: var(--ddga-font-size-xl);\n  }\n  .ddga-stat--lg {\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-6);\n  }\n  .ddga-stat--lg .ddga-stat__value {\n    font-size: var(--ddga-font-size-3xl);\n  }\n\n  /* ─── StatGroup (layout parent for Stat tiles) ─── */\n\n  .ddga-stat-group {\n    --ddga-stat-group-gap: var(--ddga-space-4);\n  }\n  .ddga-stat-group--gap-sm {\n    --ddga-stat-group-gap: var(--ddga-space-3);\n  }\n  .ddga-stat-group--gap-md {\n    --ddga-stat-group-gap: var(--ddga-space-4);\n  }\n  .ddga-stat-group--gap-lg {\n    --ddga-stat-group-gap: var(--ddga-space-6);\n  }\n\n  .ddga-stat-group--horizontal {\n    display: grid;\n    gap: var(--ddga-stat-group-gap);\n    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n  }\n  .ddga-stat-group--horizontal.ddga-stat-group--cols {\n    grid-template-columns: repeat(var(--ddga-stat-group-columns), minmax(0, 1fr));\n  }\n  /* Fixed columns collapse on narrow screens so content isn't crushed. */\n  @media (max-width: 40rem) {\n    .ddga-stat-group--horizontal.ddga-stat-group--cols {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  .ddga-stat-group--vertical {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-stat-group-gap);\n  }\n\n  /* Inside a group, tiles fill their slot — release the standalone cap. */\n  .ddga-stat-group .ddga-stat {\n    max-inline-size: none;\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    /* Badge backgrounds flatten to Canvas; a border keeps the badge visible. */\n    .ddga-stat__icon {\n      border: 1px solid CanvasText;\n    }\n    .ddga-stat--accent {\n      border-inline-start-color: Highlight;\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":[]}