@dev-dga/css 0.9.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @dev-dga/css
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- **ScrollArea — vertical scroll areas no longer clip wide content.** `.ddga-scroll-area__viewport--vertical > div { display: block }` resets Radix's inline `display:table` content wrapper (which sizes to max-content) for vertical orientation, so a wider-than-viewport child (e.g. a Table) stays at viewport width and scrolls its own horizontal overflow instead of expanding past the viewport unreachably (vertical mode renders no horizontal scrollbar). `horizontal` / `both` keep the table wrapper. Pairs with the `@dev-dga/react` `--vertical` viewport modifier.
|
|
8
|
+
- **StatGroup — `columns` is now responsive.** `columns={N}` was a fixed N-column grid (`repeat(N, minmax(0, 1fr))`) that crushed tiles in any container narrower than N, and only collapsed via a _viewport_ media query — so a StatGroup in a narrow panel on a wide screen stayed crushed. It's now a responsive **max**: an intrinsic auto-fit grid with a 13rem readable floor, container-aware (the `100%` resolves against the group), so it shows up to N columns and wraps down (N → … → 1) as the group narrows — no crush, no overflow, no media query.
|
|
9
|
+
- **Docs — Fonts.** README now documents loading IBM Plex Sans Arabic / Mono (the `--ddga-font-*` token families ship no font files; see the new "Fonts" section). Released in lockstep with `@dev-dga/react` and `@dev-dga/tokens`.
|
|
10
|
+
|
|
3
11
|
## 0.9.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@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}}}
|
|
1
|
+
@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__viewport--vertical>div{display:block!important}.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}}}
|
|
2
2
|
/*# sourceMappingURL=scroll-area.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,sLASA,mFAKA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAOE,sLASA,mFAKA,uGAcA,kEAMA,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 /* Radix wraps the viewport's children in an inline-styled `display:table` div\n so a HORIZONTAL scroll area can measure max-content width. In a vertical-only\n scroll area that wrapper instead expands past the viewport for wide content\n (e.g. a Table) — and there's no horizontal scrollbar to reach it, so columns\n get clipped (worst on mobile). For vertical orientation, force the wrapper to\n block layout: width is constrained to the viewport, and wide children shrink\n or own their own horizontal overflow (a Table scrolls inside its region).\n `!important` is required to beat Radix's inline style. Horizontal/both keep\n the table wrapper so their horizontal scroll still works. */\n .ddga-scroll-area__viewport--vertical > div {\n display: block !important;\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/stat.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@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)}:is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-600);--ddga-stat-accent-bg:var(--ddga-sa-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-600);--ddga-stat-accent-bg:var(--ddga-success-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-600);--ddga-stat-accent-bg:var(--ddga-error-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-600);--ddga-stat-accent-bg:var(--ddga-gray-100)}:is(.ddga-stat--accent,.ddga-stat--gradient) .ddga-stat__icon{background-color:var(--ddga-stat-accent-bg);color:var(--ddga-stat-accent-fg)}.ddga-stat--accent{border-inline-start:3px solid var(--ddga-stat-accent-fg)}.ddga-stat--gradient{box-shadow:var(--ddga-shadow-sm);background-image:linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);border-color:#0000}[dir=rtl] .ddga-stat--gradient{background-image:linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%)}[data-theme=dark] .ddga-stat--flat .ddga-stat__icon{color:var(--ddga-gray-300,#d2d6db);background-color:#ffffff14}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-300,#7ed3a8);--ddga-stat-accent-bg:#25935f2e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-200,#abefc6);--ddga-stat-accent-bg:#0794552e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-200,#fecdca);--ddga-stat-accent-bg:#d92d202e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[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}[dir=rtl] .ddga-stat__value{letter-spacing:normal}.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--chip{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:var(--ddga-gray-100)}.ddga-stat__change--chip.ddga-stat__change--positive{background-color:var(--ddga-success-50)}.ddga-stat__change--chip.ddga-stat__change--negative{background-color:var(--ddga-error-50)}[data-theme=dark] .ddga-stat__change--chip{background-color:#ffffff14}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--positive{background-color:#0794552e}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--negative{background-color:#d92d202e}.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__chart{block-size:2.5rem;margin-block-start:var(--ddga-space-2)}.ddga-stat__chart>svg{block-size:100%;inline-size:100%;display:block}.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--xl{gap:var(--ddga-space-2);padding:var(--ddga-space-8)}.ddga-stat--xl .ddga-stat__value{font-size:2.5rem;line-height:1.1}.ddga-stat--xl .ddga-stat__chart{block-size:3.25rem}.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)
|
|
1
|
+
@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)}:is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-600);--ddga-stat-accent-bg:var(--ddga-sa-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-600);--ddga-stat-accent-bg:var(--ddga-success-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-600);--ddga-stat-accent-bg:var(--ddga-error-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-600);--ddga-stat-accent-bg:var(--ddga-gray-100)}:is(.ddga-stat--accent,.ddga-stat--gradient) .ddga-stat__icon{background-color:var(--ddga-stat-accent-bg);color:var(--ddga-stat-accent-fg)}.ddga-stat--accent{border-inline-start:3px solid var(--ddga-stat-accent-fg)}.ddga-stat--gradient{box-shadow:var(--ddga-shadow-sm);background-image:linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);border-color:#0000}[dir=rtl] .ddga-stat--gradient{background-image:linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%)}[data-theme=dark] .ddga-stat--flat .ddga-stat__icon{color:var(--ddga-gray-300,#d2d6db);background-color:#ffffff14}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-300,#7ed3a8);--ddga-stat-accent-bg:#25935f2e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-200,#abefc6);--ddga-stat-accent-bg:#0794552e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-200,#fecdca);--ddga-stat-accent-bg:#d92d202e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[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}[dir=rtl] .ddga-stat__value{letter-spacing:normal}.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--chip{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:var(--ddga-gray-100)}.ddga-stat__change--chip.ddga-stat__change--positive{background-color:var(--ddga-success-50)}.ddga-stat__change--chip.ddga-stat__change--negative{background-color:var(--ddga-error-50)}[data-theme=dark] .ddga-stat__change--chip{background-color:#ffffff14}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--positive{background-color:#0794552e}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--negative{background-color:#d92d202e}.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__chart{block-size:2.5rem;margin-block-start:var(--ddga-space-2)}.ddga-stat__chart>svg{block-size:100%;inline-size:100%;display:block}.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--xl{gap:var(--ddga-space-2);padding:var(--ddga-space-8)}.ddga-stat--xl .ddga-stat__value{font-size:2.5rem;line-height:1.1}.ddga-stat--xl .ddga-stat__chart{block-size:3.25rem}.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(auto-fit, minmax(max(13rem, calc((100% - (var(--ddga-stat-group-columns) - 1) * var(--ddga-stat-group-gap)) / var(--ddga-stat-group-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,.ddga-stat__change--chip{border:1px solid canvastext}.ddga-stat--accent{border-inline-start-color:highlight}.ddga-stat--gradient{border:1px solid canvastext}}}
|
|
2
2
|
/*# sourceMappingURL=stat.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAWE,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,gIAIA,yBACE,8EAKF,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA","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 /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\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'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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 /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n [dir='rtl'] .ddga-stat__value {\n letter-spacing: normal;\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 /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\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 /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open 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 /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\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 + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\n border: 1px solid CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAWE,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,sOAuBA,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA","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 /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\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'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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 /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n [dir='rtl'] .ddga-stat__value {\n letter-spacing: normal;\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 /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\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 /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open 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 /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\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 /* `columns` is a responsive MAX, not a fixed count: up to N columns on wide\n containers, wrapping down (N → … → 1) as the container narrows — no crush,\n no overflow. The track minimum is the larger of the readable floor (13rem)\n and the width N columns would occupy, so auto-fit packs at most N per row.\n The `100%` resolves against the GROUP (not the viewport), so it is\n container-aware — correct even in a narrow panel on a wide screen, with no\n media query needed. */\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n max(\n 13rem,\n calc(\n (100% - (var(--ddga-stat-group-columns) - 1) * var(--ddga-stat-group-gap)) /\n var(--ddga-stat-group-columns)\n )\n ),\n 1fr\n )\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 + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\n border: 1px solid CanvasText;\n }\n }\n}\n"],"names":[]}
|