@scattered-light/loomiere-mojave 0.15.6 → 0.16.0

package/dist/exports/tailwind.css

@@ -1129,6 +1129,13 @@
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
   --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+  --sl-stat-card-background: var(--sl-surface-raised);
+  --sl-stat-card-background-hover: var(--sl-fill-subtle);
+  --sl-stat-card-border-color: var(--sl-border-default);
+  --sl-stat-card-rule-color: var(--sl-rule-color);
+  --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+  --sl-stat-card-caption-color: var(--sl-text-secondary);
+  --sl-stat-card-footer-border-color: var(--sl-border-subtle);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -1319,6 +1326,13 @@
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
   --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+  --sl-stat-card-background: var(--sl-surface-raised);
+  --sl-stat-card-background-hover: var(--sl-fill-subtle);
+  --sl-stat-card-border-color: var(--sl-border-default);
+  --sl-stat-card-rule-color: var(--sl-rule-color);
+  --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+  --sl-stat-card-caption-color: var(--sl-text-secondary);
+  --sl-stat-card-footer-border-color: var(--sl-border-subtle);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -1509,6 +1523,13 @@
   --sl-side-nav-group-label-color: var(--sl-text-secondary);
   --sl-side-nav-toggle-background: var(--sl-surface-raised);
   --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+  --sl-stat-card-background: var(--sl-surface-raised);
+  --sl-stat-card-background-hover: var(--sl-fill-subtle);
+  --sl-stat-card-border-color: var(--sl-border-default);
+  --sl-stat-card-rule-color: var(--sl-rule-color);
+  --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+  --sl-stat-card-caption-color: var(--sl-text-secondary);
+  --sl-stat-card-footer-border-color: var(--sl-border-subtle);
   --sl-stat-figure-figure-color: var(--sl-text-primary);
   --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
   --sl-stat-figure-underline-color: var(--sl-rule-color);

package/dist/exports/tokens.dtcg.json

@@ -12629,6 +12629,67 @@
       "$description": "The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key."
     }
   },
+  "stat-card": {
+    "background": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The card's fill: the raised surface, like a sheet."
+    },
+    "background-hover": {
+      "$type": "color",
+      "$value": "{fill.subtle}",
+      "$description": "The fill under the pointer on a card that opens something."
+    },
+    "border-color": {
+      "$type": "color",
+      "$value": "{border.default}",
+      "$description": "The card's sides and bottom."
+    },
+    "border-width": {
+      "$value": "{stroke.default}",
+      "$description": "Thickness of the sides and bottom."
+    },
+    "rule-width": {
+      "$value": "{stroke.medium}",
+      "$description": "The rule across the top of the card, as on a sheet."
+    },
+    "rule-color": {
+      "$type": "color",
+      "$value": "{rule.color}",
+      "$description": "The top rule's color, and the rule above the figures."
+    },
+    "radius": {
+      "$value": "{radius.surface}",
+      "$description": "Corners, like any card or panel."
+    },
+    "header-padding-block": {
+      "$value": "{space.3}",
+      "$description": "Space above and below the name and caption."
+    },
+    "padding-inline": {
+      "$value": "{space.4}",
+      "$description": "Space either side of the name, the figures and the footer."
+    },
+    "facts-padding-block": {
+      "$value": "{space.2-5}",
+      "$description": "Space above and below each figure."
+    },
+    "facts-divider-color": {
+      "$type": "color",
+      "$value": "{border.subtle}",
+      "$description": "The hairline between figures."
+    },
+    "caption-color": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "The caption under the name."
+    },
+    "footer-border-color": {
+      "$type": "color",
+      "$value": "{border.subtle}",
+      "$description": "The hairline above the footer."
+    }
+  },
   "stat-figure": {
     "figure-font-size": {
       "$value": "{font-size.4xl}",

package/dist/tokens.css

@@ -1454,12 +1454,9 @@
     --sl-focus-outline-offset: var(--sl-a11y-focus-outline-offset); /** Outside ring: a gap between the control and the ring so it never blends into the control border. The default. */
     --sl-focus-outline-offset-inset: calc(-1 * var(--sl-a11y-focus-outline-width)); /** Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor. */
     --sl-focus-halo-spread: calc(var(--sl-a11y-focus-outline-offset) + var(--sl-a11y-focus-outline-width) + 2px); /** A soft glow just outside the focus ring: the gap, the ring, then 2px of tint. The ring carries the contrast (WCAG 1.4.11), so the glow can stay pale. */
-    --sl-bar-padding: var(--sl-space-1); /** Space between the strip's edge and its controls, small so the controls nearly fill it. */
     --sl-bar-gap: var(--sl-space-1); /** Space between controls in one group. */
-    --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
     --sl-bar-separator-length: var(--sl-space-6); /** Divider height, shorter than the controls so the groups still read as one strip. */
     --sl-bar-separator-spacing: var(--sl-space-1); /** Extra space either side of a divider. */
-    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
     --sl-calendar-grid-gap: var(--sl-space-0-5); /** Space between week rows. Days in a week share an edge, so the range band reads as one shape. */
     --sl-calendar-month-gap: var(--sl-space-4); /** Space between months shown side by side, the same step as panel padding so the two columns line up. */
     --sl-calendar-header-gap: var(--sl-space-2); /** Space between the month title and the weekday row. */
@@ -1914,6 +1911,10 @@
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
     --sl-splitter-handle-hit-size: var(--sl-a11y-min-touch-target); /** The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px. */
     --sl-splitter-grip-size: var(--sl-space-1); /** 4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control. */
+    --sl-stat-card-rule-width: var(--sl-stroke-medium); /** The rule across the top of the card, as on a sheet. */
+    --sl-stat-card-header-padding-block: var(--sl-space-3); /** Space above and below the name and caption. */
+    --sl-stat-card-padding-inline: var(--sl-space-4); /** Space either side of the name, the figures and the footer. */
+    --sl-stat-card-facts-padding-block: var(--sl-space-2-5); /** Space above and below each figure. */
     --sl-stat-figure-figure-font-size: var(--sl-font-size-4xl); /** Size of the figure. Large enough to lead the page, a step under the page title. */
     --sl-stat-figure-figure-font-size-sm: var(--sl-font-size-2xl); /** Size of the figure at size="sm", for a row of figures in a card or a sheet header. */
     --sl-stat-figure-figure-line-height: var(--sl-line-height-4xl); /** Line height paired with figure-font-size. */
@@ -1952,8 +1953,8 @@
     --sl-color-chrome-on-1100: var(--sl-color-neutral-on-1100);
     --sl-color-chrome-on-1200: var(--sl-color-neutral-on-1200);
     --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
+    --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
     --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
-    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
     --sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
     --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
     --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
@@ -2186,8 +2187,9 @@
     --sl-side-nav-item-height: var(--sl-control-height-md); /** Least height of a row: the regular control height, so a row is as tall as a button. */
     --sl-side-nav-toggle-radius: var(--sl-radius-control); /** The collapse handle's corners. */
     --sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
+    --sl-stat-card-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
+    --sl-stat-card-radius: var(--sl-radius-surface); /** Corners, like any card or panel. */
     --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
-    --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
     --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
     --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
     --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
@@ -2202,6 +2204,13 @@
     --sl-interactive-tint-hover: var(--sl-scope-accent-soft-hover); /** Accent wash for a highlighted menu item or a pressed toggle. */
     --sl-interactive-tint-active: var(--sl-scope-accent-soft-active); /** Accent wash for a selected or pressed item: one step past tint-hover. */
     --sl-interactive-tint-strong: var(--sl-scope-accent-soft-strong); /** Strongest accent wash, for hovering an item that is already pressed. */
+    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
+    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
+    --sl-bar-padding: var(--sl-space-1); /** Space between the strip's edge and its controls, small so the controls nearly fill it. */
+    --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
+    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
+    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
+    --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
     --sl-surface-canvas: var(--sl-scope-chrome-canvas); /** The page itself. Paper in light mode, the darkest neutral in dark mode. */
     --sl-surface-overlay: var(--sl-scope-chrome-overlay); /** Popups, menus and code blocks that sit above raised surfaces. */
     --sl-surface-raised: var(--sl-scope-chrome-raised); /** Cards and panels one level above the canvas. */
@@ -2223,9 +2232,6 @@
     --sl-content-prose-color: var(--sl-text-primary); /** Long-form body text. The same as body text, so prose and UI read as one voice. */
     --sl-content-selection-text: var(--sl-text-primary); /** Selected text stays body text so it reads the same on the tint. */
     --sl-field-border-color-error: var(--sl-status-error); /** Field edge when the value is invalid. */
-    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
-    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
-    --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
     --sl-field-color: var(--sl-text-primary); /** The value you typed. */
     --sl-gauge-label-color: var(--sl-text-primary); /** What is being measured. */
     --sl-icon-button-color-hover: var(--sl-text-primary); /** Darkens on hover to confirm it's the target. */
@@ -2397,6 +2403,12 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary); /** A count that is only information (tone="quiet"), such as a total. */
     --sl-side-nav-group-label-color: var(--sl-text-secondary); /** A group heading's caps label. */
     --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse handle's fill. */
+    --sl-stat-card-background: var(--sl-surface-raised); /** The card's fill: the raised surface, like a sheet. */
+    --sl-stat-card-background-hover: var(--sl-fill-subtle); /** The fill under the pointer on a card that opens something. */
+    --sl-stat-card-border-color: var(--sl-border-default); /** The card's sides and bottom. */
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle); /** The hairline between figures. */
+    --sl-stat-card-caption-color: var(--sl-text-secondary); /** The caption under the name. */
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle); /** The hairline above the footer. */
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent); /** The figure's color at tone="accent", for a figure that asks for action (open questions, items to review). */
     --sl-stat-figure-label-color: var(--sl-text-secondary); /** The caps label above the figure. */
     --sl-stat-figure-caption-color: var(--sl-text-secondary); /** The caption under the figure. */
@@ -2425,6 +2437,7 @@
     --sl-sheet-rule-color: var(--sl-rule-color); /** The top rule's color: the working-paper rule color, so sheets and ruled tables match. */
     --sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
     --sl-side-nav-indicator-color: var(--sl-rule-color); /** The current row's line: the working-paper rule color, so the nav and the sheets share one ink. */
+    --sl-stat-card-rule-color: var(--sl-rule-color); /** The top rule's color, and the rule above the figures. */
     --sl-stat-figure-underline-color: var(--sl-rule-color); /** The double underline's color: the working-paper rule color, like a grand total's double rule. */
     --sl-toggle-group-segmented-border-color: var(--sl-rule-color); /** The outline around a segmented group and the line between its toggles. The rule color, so it is a control edge by default and ink with an ink rule. */
     --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
@@ -5950,6 +5963,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6140,6 +6160,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6330,6 +6357,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);

package/dist/tokens.d.ts

@@ -2890,6 +2890,21 @@ declare const tokens: {
     readonly "key-step": string;
     readonly "key-step-large": string;
   };
+  readonly "stat-card": {
+    readonly "background": string;
+    readonly "background-hover": string;
+    readonly "border-color": string;
+    readonly "border-width": string;
+    readonly "rule-width": string;
+    readonly "rule-color": string;
+    readonly "radius": string;
+    readonly "header-padding-block": string;
+    readonly "padding-inline": string;
+    readonly "facts-padding-block": string;
+    readonly "facts-divider-color": string;
+    readonly "caption-color": string;
+    readonly "footer-border-color": string;
+  };
   readonly "stat-figure": {
     readonly "figure-font-size": string;
     readonly "figure-font-size-sm": string;

package/dist/tokens.js

@@ -2890,6 +2890,21 @@ const tokens = {
     "key-step": "5%",
     "key-step-large": "10%"
   },
+  "stat-card": {
+    "background": "#f8fbf9",
+    "background-hover": "#eff3ee",
+    "border-color": "#e7ece4",
+    "border-width": "1px",
+    "rule-width": "2px",
+    "rule-color": "#7c8980",
+    "radius": "0.5rem",
+    "header-padding-block": "0.75rem",
+    "padding-inline": "1rem",
+    "facts-padding-block": "0.625rem",
+    "facts-divider-color": "#eff3ee",
+    "caption-color": "#4f5852",
+    "footer-border-color": "#eff3ee"
+  },
   "stat-figure": {
     "figure-font-size": "clamp(2.0736rem, 1.9354rem + 0.6912vw, 2.4883rem)",
     "figure-font-size-sm": "clamp(1.44rem, 1.344rem + 0.48vw, 1.728rem)",

package/dist/tokens.json

@@ -21072,6 +21072,117 @@
       "value": "10%",
       "description": "The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key."
     },
+    {
+      "name": "--sl-stat-card-background",
+      "path": "stat-card.background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The card's fill: the raised surface, like a sheet."
+    },
+    {
+      "name": "--sl-stat-card-background-hover",
+      "path": "stat-card.background-hover",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{fill.subtle}",
+      "description": "The fill under the pointer on a card that opens something."
+    },
+    {
+      "name": "--sl-stat-card-border-color",
+      "path": "stat-card.border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#e7ece4",
+      "references": "{border.default}",
+      "description": "The card's sides and bottom."
+    },
+    {
+      "name": "--sl-stat-card-border-width",
+      "path": "stat-card.border-width",
+      "layer": "component",
+      "value": "1px",
+      "references": "{stroke.default}",
+      "description": "Thickness of the sides and bottom."
+    },
+    {
+      "name": "--sl-stat-card-rule-width",
+      "path": "stat-card.rule-width",
+      "layer": "component",
+      "value": "2px",
+      "references": "{stroke.medium}",
+      "description": "The rule across the top of the card, as on a sheet."
+    },
+    {
+      "name": "--sl-stat-card-rule-color",
+      "path": "stat-card.rule-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{rule.color}",
+      "description": "The top rule's color, and the rule above the figures."
+    },
+    {
+      "name": "--sl-stat-card-radius",
+      "path": "stat-card.radius",
+      "layer": "component",
+      "value": "0.5rem",
+      "references": "{radius.surface}",
+      "description": "Corners, like any card or panel."
+    },
+    {
+      "name": "--sl-stat-card-header-padding-block",
+      "path": "stat-card.header-padding-block",
+      "layer": "component",
+      "value": "0.75rem",
+      "references": "{space.3}",
+      "description": "Space above and below the name and caption."
+    },
+    {
+      "name": "--sl-stat-card-padding-inline",
+      "path": "stat-card.padding-inline",
+      "layer": "component",
+      "value": "1rem",
+      "references": "{space.4}",
+      "description": "Space either side of the name, the figures and the footer."
+    },
+    {
+      "name": "--sl-stat-card-facts-padding-block",
+      "path": "stat-card.facts-padding-block",
+      "layer": "component",
+      "value": "0.625rem",
+      "references": "{space.2-5}",
+      "description": "Space above and below each figure."
+    },
+    {
+      "name": "--sl-stat-card-facts-divider-color",
+      "path": "stat-card.facts-divider-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{border.subtle}",
+      "description": "The hairline between figures."
+    },
+    {
+      "name": "--sl-stat-card-caption-color",
+      "path": "stat-card.caption-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "The caption under the name."
+    },
+    {
+      "name": "--sl-stat-card-footer-border-color",
+      "path": "stat-card.footer-border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{border.subtle}",
+      "description": "The hairline above the footer."
+    },
     {
       "name": "--sl-stat-figure-figure-font-size",
       "path": "stat-figure.figure-font-size",
@@ -23955,6 +24066,14 @@
         "--sl-side-nav-toggle-radius": "0.0938rem",
         "--sl-side-nav-toggle-background": "#f3fcff",
         "--sl-side-nav-toggle-border-color": "#203d48",
+        "--sl-stat-card-background": "#f3fcff",
+        "--sl-stat-card-background-hover": "#def6ff",
+        "--sl-stat-card-border-color": "#d1f3ff",
+        "--sl-stat-card-rule-color": "#6b8d99",
+        "--sl-stat-card-radius": "0.375rem",
+        "--sl-stat-card-facts-divider-color": "#def6ff",
+        "--sl-stat-card-caption-color": "#3c5a66",
+        "--sl-stat-card-footer-border-color": "#def6ff",
         "--sl-stat-figure-figure-font-size": "clamp(1.8144rem, 1.6934rem + 0.6048vw, 2.1773rem)",
         "--sl-stat-figure-figure-font-size-sm": "clamp(1.26rem, 1.176rem + 0.42vw, 1.512rem)",
         "--sl-stat-figure-figure-line-height-sm": 1.183,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.15.6",
+  "version": "0.16.0",
   "description": "Mojave, the demo theme for Loomiere: desert stone and purple, built from one brand file.",
   "repository": {
     "type": "git",
@@ -62,6 +62,6 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.15.6"
+    "@scattered-light/loomiere": "0.16.0"
   }
 }