origam 2.18.15 → 2.18.17

package/dist/src/assets/scss/tokens/_dark.scss

@@ -237,6 +237,55 @@
   --origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
   --origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
   --origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
+  /* Bracket — #592. Each value is the literal (or token reference) the
+     component SCSS already fell back to, so nothing moves on screen; what was
+     a component-local default becomes a real, per-mode, typed token channel.
+     DELIBERATELY ABSENT — the per-side border longhands
+     (---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
+     the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
+     each falls back to the general knob declared here, and declaring a rung
+     would freeze that cascade at its root value. Measured in Chromium: setting
+     only ---border-width moves all four sides. See the notes at the read sites. */
+  --origam-bracket---background-color: transparent;
+  --origam-bracket---color: currentColor;
+  --origam-bracket-connector---stroke-dasharray: none;
+  --origam-bracket-connector---stroke-linecap: butt;
+  --origam-bracket-double---section-gap: 40px;
+  --origam-bracket-double-label---color: var(--origam-color__text---primary);
+  --origam-bracket-double-label---font-size: 0.75rem;
+  --origam-bracket-double-label---font-weight: 700;
+  --origam-bracket-double-label---letter-spacing: 0.08em;
+  --origam-bracket-double-label---margin-block-end: 12px;
+  --origam-bracket-double-label---text-transform: uppercase;
+  --origam-bracket-match---background-color: var(--origam-color__surface---default);
+  --origam-bracket-match---border-color: var(--origam-color__border---subtle);
+  --origam-bracket-match---border-width: 1px;
+  --origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --origam-bracket-match--hover---border-color: var(--origam-color__border---default);
+  --origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
+  --origam-bracket-round-robin---cell-size: 56px;
+  --origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
+  --origam-bracket-round---match-gap: 24px;
+  --origam-bracket-round-title---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor---background-color: transparent;
+  --origam-bracket-competitor---color: currentColor;
+  --origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
+  --origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--pending---font-style: italic;
+  --origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
+  --origam-bracket-competitor--winner---color: currentColor;
+  --origam-bracket-competitor--winner---font-weight: 600;
+  --origam-bracket-seed---color: var(--origam-color__text---secondary);
+  --origam-bracket-score---color: currentColor;
+  --origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
+  --origam-bracket-advantage---border-radius: 9999px;
+  --origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
+  --origam-bracket-advantage---font-size: 0.6875rem;
+  --origam-bracket-advantage---font-weight: 700;
+  --origam-bracket-advantage---padding-block: 1px;
+  --origam-bracket-advantage---padding-inline: 6px;
   --origam-btn---background-color: var(--origam-color__action--secondary---bg);
   --origam-btn---color: var(--origam-color__action--secondary---fg);
   --origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
@@ -275,6 +324,13 @@
   --origam-btn---opacity-disabled: var(--origam-opacity---50);
   --origam-btn---opacity-plain: var(--origam-opacity---70);
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-btn---overlay-opacity-active: 0.2;
+  --origam-btn---overlay-opacity-active-hover: 0.28;
+  --origam-btn--loader-skeleton---min-width: 96px;
+  --origam-btn--loader-skeleton---min-height: 36px;
+  --origam-btn__progress---linear-height: 3px;
+  --origam-btn__progress---linear-position: 0px;
+  --origam-btn__progress---linear-position-top: auto;
   --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
   --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
   --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -357,6 +413,21 @@
   --origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
   --origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-card__underlay---position: absolute;
+  /* Card — #593. Each value is the literal the component SCSS already fell back
+     to, so nothing moves on screen. --origam-card--loading---min-{width,height}
+     replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
+     to read ("--loading" is a state modifier, so the grammar is the
+     --state---property form, not a flat suffix).
+     --origam-card__loader---overlay-background stays undeclared on purpose —
+     see the comment at its read site in OrigamCard.vue. */
+  --origam-card--loading---min-width: 240px;
+  --origam-card--loading---min-height: 120px;
+  --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__loader---min-height: 4px;
+  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__loader---z-index: 3;
+  --origam-card__progress---linear-height: 4px;
+  --origam-card__progress---circular-margin: 24px auto;
   --origam-card__before---border-radius: inherit;
   --origam-card__before---bottom: var(--origam-space---0);
   --origam-card__before---content: "";
@@ -1660,7 +1731,7 @@
   --origam-data-table---width: 100%;
   --origam-data-table---border-collapse: separate;
   --origam-data-table---border-spacing: 0;
-  --origam-data-table__loading---opacity: var(--origam-opacity---50);
+  --origam-data-table--loading---opacity: var(--origam-opacity---50);
   --origam-data-table__header---background-color: var(--origam-color__surface---raised);
   --origam-data-table__header---color: var(--origam-color__text---primary);
   --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -1684,11 +1755,11 @@
   --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
   --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
   --origam-data-table__row---mobile-column-min-height: 52px;
-  --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
-  --origam-data-table__cell---fixed-z-index: 1;
-  --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
-  --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
   --origam-data-table__cell---last-fixed-border-right-style: solid;
+  --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
+  --origam-data-table-cell--fixed---z-index: 1;
+  --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
+  --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
   --origam-data-table__footer---background-color: var(--origam-color__surface---default);
   --origam-data-table__footer---color: var(--origam-color__text---primary);
   --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -1703,14 +1774,15 @@
   --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
   --origam-data-table__footer--info---justify-content: flex-end;
   --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
-  --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
-  --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
-  --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
-  --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
-  --origam-data-table__empty---color: var(--origam-color__text---secondary);
-  --origam-data-table__empty---text-align: center;
-  --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
-  --origam-data-table__sortable---cursor: pointer;
+  --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
+  --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
+  --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
+  --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
+  --origam-data-table-rows--no-data---text-align: center;
+  --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
+  --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
   --origam-list---background: var(--origam-color__surface---default);
@@ -2342,6 +2414,16 @@
   --origam-grid---gap: var(--origam-grid---gap-md);
   --origam-grid---gap-lg: var(--origam-space---6);
   --origam-grid---gap-xl: var(--origam-space---8);
+  --origam-grid---template-columns: none;
+  --origam-grid---template-rows: none;
+  --origam-grid---template-areas: none;
+  --origam-grid---auto-flow: row;
+  --origam-grid---auto-columns: auto;
+  --origam-grid---auto-rows: auto;
+  --origam-grid---align-items: stretch;
+  --origam-grid---justify-items: stretch;
+  --origam-grid---align-content: normal;
+  --origam-grid---justify-content: normal;
   --origam-skeleton---background-color: var(--origam-color__surface---overlay);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -2871,6 +2953,98 @@
   --origam-chart-streamgraph__ribbon---opacity: 0.82;
   --origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
   --origam-chart-streamgraph__axis-label---fill: #6b7280;
+  --origam-chart__annotation---font-size: 0.6875rem;
+  --origam-chart__annotation---font-weight: 600;
+  --origam-chart__annotation-callout---color: #ffffff;
+  --origam-chart__annotation-callout---font-size: 0.6875rem;
+  --origam-chart__annotation-callout---font-weight: 600;
+  --origam-chart__axis---stroke-width: 1;
+  --origam-chart__axis-line---color: var(--origam-color__border---subtle);
+  --origam-chart__body---min-width: 200px;
+  --origam-chart__box---fill-opacity: 0.25;
+  --origam-chart__box---stroke-width: 1.5;
+  --origam-chart__box-cap---stroke-width: 2;
+  --origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__box-median---stroke-width: 2;
+  --origam-chart__box-outlier---fill-opacity: 0.7;
+  --origam-chart__box-whisker---stroke-width: 1.5;
+  --origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
+  --origam-chart__breadcrumb---font-size: 0.8125rem;
+  --origam-chart__breadcrumb---gap: 8px;
+  --origam-chart__breadcrumb-back---background-color: transparent;
+  --origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
+  --origam-chart__breadcrumb-back---border-radius: 4px;
+  --origam-chart__breadcrumb-back---color: currentColor;
+  --origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
+  --origam-chart__breadcrumb-current---color: currentColor;
+  --origam-chart__breadcrumb-current---font-weight: 600;
+  --origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
+  --origam-chart__bullet-range---opacity: 0.55;
+  --origam-chart__bullet-target---stroke-width: 3;
+  --origam-chart__gauge-label---color: var(--origam-color__text---primary);
+  --origam-chart__gauge-label---font-size: 1.5rem;
+  --origam-chart__gauge-label---font-weight: 700;
+  --origam-chart__gauge-track---color: var(--origam-color__border---subtle);
+  --origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__heatmap---stroke-width: 0.5;
+  --origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
+  --origam-chart__heatmap-axis-label---font-size: 0.625rem;
+  --origam-chart__heatmap-label---color: #ffffff;
+  --origam-chart__heatmap-label---font-size: 0.5625rem;
+  --origam-chart__heatmap-label---font-weight: 600;
+  --origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
+  --origam-chart__heatmap-legend-label---font-size: 0.625rem;
+  --origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__honeycomb---stroke-width: 2;
+  --origam-chart__honeycomb-label---color: #ffffff;
+  --origam-chart__honeycomb-label---font-size: 0.625rem;
+  --origam-chart__honeycomb-label---font-weight: 600;
+  --origam-chart__legend---side-gap: 8px;
+  --origam-chart__map---stroke-width: 1;
+  --origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
+  --origam-chart__map-legend-label---font-size: 0.625rem;
+  --origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
+  --origam-chart-pictorial__axis---font-size: 0.6875rem;
+  --origam-chart-pictorial__label---color: var(--origam-color__text---primary);
+  --origam-chart-pictorial__label---font-size: 0.6875rem;
+  --origam-chart-pictorial__label---font-weight: 600;
+  --origam-chart__plot-band-label---font-size: 0.6875rem;
+  --origam-chart__plot-band-label---font-weight: 600;
+  --origam-chart__plot-line-label---font-size: 0.6875rem;
+  --origam-chart__plot-line-label---font-weight: 600;
+  --origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__polar-bar---stroke-width: 1.5;
+  --origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
+  --origam-chart__polar-bar-label---font-size: 0.6875rem;
+  --origam-chart__polar-bar-label---font-weight: 500;
+  --origam-chart__polar-bar-value-label---color: #ffffff;
+  --origam-chart__polar-bar-value-label---font-size: 0.625rem;
+  --origam-chart__polar-bar-value-label---font-weight: 600;
+  --origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__pyramid---stroke-width: 2;
+  --origam-chart__pyramid-label---font-size: 0.75rem;
+  --origam-chart__pyramid-label---font-weight: 500;
+  --origam-chart__pyramid-label--inside---color: #ffffff;
+  --origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
+  --origam-chart__sankey-label---color: var(--origam-color__text---primary);
+  --origam-chart__sankey-label---font-size: 0.6875rem;
+  --origam-chart__sankey-label---font-weight: 500;
+  --origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__sunburst---stroke-width: 1.5;
+  --origam-chart__sunburst-label---color: #ffffff;
+  --origam-chart__sunburst-label---font-size: 0.625rem;
+  --origam-chart__sunburst-label---font-weight: 500;
+  --origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
+  --origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
+  --origam-chart__sunburst-leader-line---width: 1;
+  --origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__treemap---stroke-width: 2;
+  --origam-chart__treemap-label---color: #ffffff;
+  --origam-chart__treemap-label---font-size: 0.6875rem;
+  --origam-chart__treemap-label---font-weight: 600;
+  --origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
+  --origam-chart__treemap-label--value---font-size: 0.625rem;
+  --origam-chart__treemap-label--value---font-weight: 400;
   --origam-data-table-header-cell---color: var(--origam-color__text---primary);
   --origam-data-table-header-cell---background: var(--origam-color__surface---raised);
   --origam-data-table-header-cell__content---gap: var(--origam-space---1);
@@ -2981,6 +3155,55 @@
     --origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
     --origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
     --origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
+    /* Bracket — #592. Each value is the literal (or token reference) the
+       component SCSS already fell back to, so nothing moves on screen; what was
+       a component-local default becomes a real, per-mode, typed token channel.
+       DELIBERATELY ABSENT — the per-side border longhands
+       (---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
+       the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
+       each falls back to the general knob declared here, and declaring a rung
+       would freeze that cascade at its root value. Measured in Chromium: setting
+       only ---border-width moves all four sides. See the notes at the read sites. */
+    --origam-bracket---background-color: transparent;
+    --origam-bracket---color: currentColor;
+    --origam-bracket-connector---stroke-dasharray: none;
+    --origam-bracket-connector---stroke-linecap: butt;
+    --origam-bracket-double---section-gap: 40px;
+    --origam-bracket-double-label---color: var(--origam-color__text---primary);
+    --origam-bracket-double-label---font-size: 0.75rem;
+    --origam-bracket-double-label---font-weight: 700;
+    --origam-bracket-double-label---letter-spacing: 0.08em;
+    --origam-bracket-double-label---margin-block-end: 12px;
+    --origam-bracket-double-label---text-transform: uppercase;
+    --origam-bracket-match---background-color: var(--origam-color__surface---default);
+    --origam-bracket-match---border-color: var(--origam-color__border---subtle);
+    --origam-bracket-match---border-width: 1px;
+    --origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    --origam-bracket-match--hover---border-color: var(--origam-color__border---default);
+    --origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
+    --origam-bracket-round-robin---cell-size: 56px;
+    --origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
+    --origam-bracket-round---match-gap: 24px;
+    --origam-bracket-round-title---color: var(--origam-color__text---secondary);
+    --origam-bracket-competitor---background-color: transparent;
+    --origam-bracket-competitor---color: currentColor;
+    --origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
+    --origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
+    --origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
+    --origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
+    --origam-bracket-competitor--pending---font-style: italic;
+    --origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
+    --origam-bracket-competitor--winner---color: currentColor;
+    --origam-bracket-competitor--winner---font-weight: 600;
+    --origam-bracket-seed---color: var(--origam-color__text---secondary);
+    --origam-bracket-score---color: currentColor;
+    --origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
+    --origam-bracket-advantage---border-radius: 9999px;
+    --origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
+    --origam-bracket-advantage---font-size: 0.6875rem;
+    --origam-bracket-advantage---font-weight: 700;
+    --origam-bracket-advantage---padding-block: 1px;
+    --origam-bracket-advantage---padding-inline: 6px;
     --origam-btn---background-color: var(--origam-color__action--secondary---bg);
     --origam-btn---color: var(--origam-color__action--secondary---fg);
     --origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
@@ -3019,6 +3242,13 @@
     --origam-btn---opacity-disabled: var(--origam-opacity---50);
     --origam-btn---opacity-plain: var(--origam-opacity---70);
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+    --origam-btn---overlay-opacity-active: 0.2;
+    --origam-btn---overlay-opacity-active-hover: 0.28;
+    --origam-btn--loader-skeleton---min-width: 96px;
+    --origam-btn--loader-skeleton---min-height: 36px;
+    --origam-btn__progress---linear-height: 3px;
+    --origam-btn__progress---linear-position: 0px;
+    --origam-btn__progress---linear-position-top: auto;
     --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
     --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
     --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -3101,6 +3331,21 @@
     --origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
     --origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
     --origam-card__underlay---position: absolute;
+    /* Card — #593. Each value is the literal the component SCSS already fell back
+       to, so nothing moves on screen. --origam-card--loading---min-{width,height}
+       replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
+       to read ("--loading" is a state modifier, so the grammar is the
+       --state---property form, not a flat suffix).
+       --origam-card__loader---overlay-background stays undeclared on purpose —
+       see the comment at its read site in OrigamCard.vue. */
+    --origam-card--loading---min-width: 240px;
+    --origam-card--loading---min-height: 120px;
+    --origam-card__asset---aspect-ratio: 16 / 9;
+    --origam-card__loader---min-height: 4px;
+    --origam-card__loader---min-height-skeleton: 200px;
+    --origam-card__loader---z-index: 3;
+    --origam-card__progress---linear-height: 4px;
+    --origam-card__progress---circular-margin: 24px auto;
     --origam-card__before---border-radius: inherit;
     --origam-card__before---bottom: var(--origam-space---0);
     --origam-card__before---content: "";
@@ -4404,7 +4649,7 @@
     --origam-data-table---width: 100%;
     --origam-data-table---border-collapse: separate;
     --origam-data-table---border-spacing: 0;
-    --origam-data-table__loading---opacity: var(--origam-opacity---50);
+    --origam-data-table--loading---opacity: var(--origam-opacity---50);
     --origam-data-table__header---background-color: var(--origam-color__surface---raised);
     --origam-data-table__header---color: var(--origam-color__text---primary);
     --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -4428,11 +4673,11 @@
     --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
     --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
     --origam-data-table__row---mobile-column-min-height: 52px;
-    --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
-    --origam-data-table__cell---fixed-z-index: 1;
-    --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
-    --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
     --origam-data-table__cell---last-fixed-border-right-style: solid;
+    --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
+    --origam-data-table-cell--fixed---z-index: 1;
+    --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
+    --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
     --origam-data-table__footer---background-color: var(--origam-color__surface---default);
     --origam-data-table__footer---color: var(--origam-color__text---primary);
     --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -4447,14 +4692,15 @@
     --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
     --origam-data-table__footer--info---justify-content: flex-end;
     --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
-    --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
-    --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
-    --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
-    --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
-    --origam-data-table__empty---color: var(--origam-color__text---secondary);
-    --origam-data-table__empty---text-align: center;
-    --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
-    --origam-data-table__sortable---cursor: pointer;
+    --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
+    --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
+    --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
+    --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
+    --origam-data-table-rows--no-data---text-align: center;
+    --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
+    --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
+    --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
+    --origam-data-table-header-cell--sortable---cursor: pointer;
     --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
     --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
     --origam-list---background: var(--origam-color__surface---default);
@@ -5085,6 +5331,16 @@
     --origam-grid---gap: var(--origam-grid---gap-md);
     --origam-grid---gap-lg: var(--origam-space---6);
     --origam-grid---gap-xl: var(--origam-space---8);
+    --origam-grid---template-columns: none;
+    --origam-grid---template-rows: none;
+    --origam-grid---template-areas: none;
+    --origam-grid---auto-flow: row;
+    --origam-grid---auto-columns: auto;
+    --origam-grid---auto-rows: auto;
+    --origam-grid---align-items: stretch;
+    --origam-grid---justify-items: stretch;
+    --origam-grid---align-content: normal;
+    --origam-grid---justify-content: normal;
     --origam-skeleton---background-color: var(--origam-color__surface---overlay);
     --origam-skeleton---border-radius: var(--origam-radius---sm);
     --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -5614,6 +5870,98 @@
     --origam-chart-streamgraph__ribbon---opacity: 0.82;
     --origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
     --origam-chart-streamgraph__axis-label---fill: #6b7280;
+    --origam-chart__annotation---font-size: 0.6875rem;
+    --origam-chart__annotation---font-weight: 600;
+    --origam-chart__annotation-callout---color: #ffffff;
+    --origam-chart__annotation-callout---font-size: 0.6875rem;
+    --origam-chart__annotation-callout---font-weight: 600;
+    --origam-chart__axis---stroke-width: 1;
+    --origam-chart__axis-line---color: var(--origam-color__border---subtle);
+    --origam-chart__body---min-width: 200px;
+    --origam-chart__box---fill-opacity: 0.25;
+    --origam-chart__box---stroke-width: 1.5;
+    --origam-chart__box-cap---stroke-width: 2;
+    --origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__box-median---stroke-width: 2;
+    --origam-chart__box-outlier---fill-opacity: 0.7;
+    --origam-chart__box-whisker---stroke-width: 1.5;
+    --origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
+    --origam-chart__breadcrumb---font-size: 0.8125rem;
+    --origam-chart__breadcrumb---gap: 8px;
+    --origam-chart__breadcrumb-back---background-color: transparent;
+    --origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
+    --origam-chart__breadcrumb-back---border-radius: 4px;
+    --origam-chart__breadcrumb-back---color: currentColor;
+    --origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
+    --origam-chart__breadcrumb-current---color: currentColor;
+    --origam-chart__breadcrumb-current---font-weight: 600;
+    --origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
+    --origam-chart__bullet-range---opacity: 0.55;
+    --origam-chart__bullet-target---stroke-width: 3;
+    --origam-chart__gauge-label---color: var(--origam-color__text---primary);
+    --origam-chart__gauge-label---font-size: 1.5rem;
+    --origam-chart__gauge-label---font-weight: 700;
+    --origam-chart__gauge-track---color: var(--origam-color__border---subtle);
+    --origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__heatmap---stroke-width: 0.5;
+    --origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
+    --origam-chart__heatmap-axis-label---font-size: 0.625rem;
+    --origam-chart__heatmap-label---color: #ffffff;
+    --origam-chart__heatmap-label---font-size: 0.5625rem;
+    --origam-chart__heatmap-label---font-weight: 600;
+    --origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
+    --origam-chart__heatmap-legend-label---font-size: 0.625rem;
+    --origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__honeycomb---stroke-width: 2;
+    --origam-chart__honeycomb-label---color: #ffffff;
+    --origam-chart__honeycomb-label---font-size: 0.625rem;
+    --origam-chart__honeycomb-label---font-weight: 600;
+    --origam-chart__legend---side-gap: 8px;
+    --origam-chart__map---stroke-width: 1;
+    --origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
+    --origam-chart__map-legend-label---font-size: 0.625rem;
+    --origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
+    --origam-chart-pictorial__axis---font-size: 0.6875rem;
+    --origam-chart-pictorial__label---color: var(--origam-color__text---primary);
+    --origam-chart-pictorial__label---font-size: 0.6875rem;
+    --origam-chart-pictorial__label---font-weight: 600;
+    --origam-chart__plot-band-label---font-size: 0.6875rem;
+    --origam-chart__plot-band-label---font-weight: 600;
+    --origam-chart__plot-line-label---font-size: 0.6875rem;
+    --origam-chart__plot-line-label---font-weight: 600;
+    --origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__polar-bar---stroke-width: 1.5;
+    --origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
+    --origam-chart__polar-bar-label---font-size: 0.6875rem;
+    --origam-chart__polar-bar-label---font-weight: 500;
+    --origam-chart__polar-bar-value-label---color: #ffffff;
+    --origam-chart__polar-bar-value-label---font-size: 0.625rem;
+    --origam-chart__polar-bar-value-label---font-weight: 600;
+    --origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__pyramid---stroke-width: 2;
+    --origam-chart__pyramid-label---font-size: 0.75rem;
+    --origam-chart__pyramid-label---font-weight: 500;
+    --origam-chart__pyramid-label--inside---color: #ffffff;
+    --origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
+    --origam-chart__sankey-label---color: var(--origam-color__text---primary);
+    --origam-chart__sankey-label---font-size: 0.6875rem;
+    --origam-chart__sankey-label---font-weight: 500;
+    --origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__sunburst---stroke-width: 1.5;
+    --origam-chart__sunburst-label---color: #ffffff;
+    --origam-chart__sunburst-label---font-size: 0.625rem;
+    --origam-chart__sunburst-label---font-weight: 500;
+    --origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
+    --origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
+    --origam-chart__sunburst-leader-line---width: 1;
+    --origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
+    --origam-chart__treemap---stroke-width: 2;
+    --origam-chart__treemap-label---color: #ffffff;
+    --origam-chart__treemap-label---font-size: 0.6875rem;
+    --origam-chart__treemap-label---font-weight: 600;
+    --origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
+    --origam-chart__treemap-label--value---font-size: 0.625rem;
+    --origam-chart__treemap-label--value---font-weight: 400;
     --origam-data-table-header-cell---color: var(--origam-color__text---primary);
     --origam-data-table-header-cell---background: var(--origam-color__surface---raised);
     --origam-data-table-header-cell__content---gap: var(--origam-space---1);