@scattered-light/loomiere-mojave 0.9.0 → 0.11.0

package/dist/exports/tailwind.css

@@ -1108,6 +1108,19 @@
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --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-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);
@@ -1279,6 +1292,19 @@
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --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-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);
@@ -1450,6 +1476,19 @@
   --sl-sheet-rule-color: var(--sl-rule-color);
   --sl-sheet-tab-background: var(--sl-surface-inverse);
   --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+  --sl-side-nav-background: var(--sl-surface-tray);
+  --sl-side-nav-border-color: var(--sl-border-default);
+  --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+  --sl-side-nav-item-color: var(--sl-text-primary);
+  --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+  --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+  --sl-side-nav-item-background-current: var(--sl-surface-raised);
+  --sl-side-nav-indicator-color: var(--sl-rule-color);
+  --sl-side-nav-count-color: var(--sl-text-accent);
+  --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+  --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-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

@@ -12418,6 +12418,113 @@
       "$description": "Space between the tab label and an action at the end of the header row, such as an Edit link."
     }
   },
+  "side-nav": {
+    "background": {
+      "$type": "color",
+      "$value": "{surface.tray}",
+      "$description": "The column's fill: the tray surface, a step off the page, so the current row on the raised surface stands out from it."
+    },
+    "border-color": {
+      "$type": "color",
+      "$value": "{border.default}",
+      "$description": "The line between the column and the page."
+    },
+    "item-height": {
+      "$value": "{control.height-md}",
+      "$description": "Least height of a row: the regular control height, so a row is as tall as a button."
+    },
+    "item-padding-inline": {
+      "$value": "{space.5}",
+      "$description": "Space at each end of a row."
+    },
+    "item-gap": {
+      "$value": "{space.2}",
+      "$description": "Space between a row's label and its count."
+    },
+    "item-divider-color": {
+      "$type": "color",
+      "$value": "{border.subtle}",
+      "$description": "The hairline under each row."
+    },
+    "item-color": {
+      "$type": "color",
+      "$value": "{text.primary}",
+      "$description": "A row's text."
+    },
+    "item-color-disabled": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
+    },
+    "item-background-hover": {
+      "$type": "color",
+      "$value": "{fill.subtle}",
+      "$description": "A row under the pointer."
+    },
+    "item-background-current": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The current row: the raised surface, so it reads as the open page."
+    },
+    "indicator-width": {
+      "$value": "{stroke.medium}",
+      "$description": "The line under the current row."
+    },
+    "indicator-color": {
+      "$type": "color",
+      "$value": "{rule.color}",
+      "$description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
+    },
+    "count-color": {
+      "$type": "color",
+      "$value": "{text.accent}",
+      "$description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
+    },
+    "count-color-quiet": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A count that is only information (tone=\"quiet\"), such as a total."
+    },
+    "group-padding-top": {
+      "$value": "{space.5}",
+      "$description": "Space above a group heading."
+    },
+    "group-label-color": {
+      "$type": "color",
+      "$value": "{text.secondary}",
+      "$description": "A group heading's caps label."
+    },
+    "toggle-width": {
+      "$value": "{space.6}",
+      "$description": "The collapse handle's width. It straddles the column's edge."
+    },
+    "toggle-height": {
+      "$value": "{space.11}",
+      "$description": "The collapse handle's height, a tall tab on the column's edge."
+    },
+    "toggle-radius": {
+      "$value": "{radius.control}",
+      "$description": "The collapse handle's corners."
+    },
+    "toggle-offset": {
+      "$value": "{space.7}",
+      "$description": "Distance of the collapse button from the top of the column."
+    },
+    "toggle-background": {
+      "$type": "color",
+      "$value": "{surface.raised}",
+      "$description": "The collapse handle's fill."
+    },
+    "toggle-border-color": {
+      "$type": "color",
+      "$value": "{text.primary}",
+      "$description": "The collapse handle's outline and chevron. It fills with this color on hover."
+    },
+    "collapsed-width": {
+      "$value": "{space.11}",
+      "$description": "Width of the column when it is collapsed, wide enough for the collapse handle."
+    }
+  },
   "slider": {
     "thumb-size": {
       "$value": "{space.5}",

package/dist/tokens.css

@@ -1897,6 +1897,14 @@
     --sl-sheet-tab-padding-inline: var(--sl-space-3-5); /** Space either side of the tab label's text. */
     --sl-sheet-tab-radius: var(--sl-radius-sm); /** The tab label's top corners. Its bottom corners stay square where it meets the rule. */
     --sl-sheet-header-gap: var(--sl-space-3); /** Space between the tab label and an action at the end of the header row, such as an Edit link. */
+    --sl-side-nav-item-padding-inline: var(--sl-space-5); /** Space at each end of a row. */
+    --sl-side-nav-item-gap: var(--sl-space-2); /** Space between a row's label and its count. */
+    --sl-side-nav-indicator-width: var(--sl-stroke-medium); /** The line under the current row. */
+    --sl-side-nav-group-padding-top: var(--sl-space-5); /** Space above a group heading. */
+    --sl-side-nav-toggle-width: var(--sl-space-6); /** The collapse handle's width. It straddles the column's edge. */
+    --sl-side-nav-toggle-height: var(--sl-space-11); /** The collapse handle's height, a tall tab on the column's edge. */
+    --sl-side-nav-toggle-offset: var(--sl-space-7); /** Distance of the collapse button from the top of the column. */
+    --sl-side-nav-collapsed-width: var(--sl-space-11); /** Width of the column when it is collapsed, wide enough for the collapse handle. */
     --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. */
@@ -2169,6 +2177,8 @@
     --sl-description-list-leader-width: var(--sl-stroke-default); /** Thickness of the dotted leader. */
     --sl-sheet-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
     --sl-sheet-radius: var(--sl-radius-surface); /** Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule. */
+    --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-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. */
@@ -2268,6 +2278,8 @@
     --sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
     --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
     --sl-description-list-value-color: var(--sl-text-primary); /** Values. */
+    --sl-side-nav-item-color: var(--sl-text-primary); /** A row's text. */
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary); /** The collapse handle's outline and chevron. It fills with this color on hover. */
     --sl-stat-figure-figure-color: var(--sl-text-primary); /** The figure's color. */
     --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
     --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
@@ -2363,6 +2375,16 @@
     --sl-sheet-background: var(--sl-surface-raised); /** The sheet's fill: the raised surface, one level above the page like any card or panel. */
     --sl-sheet-border-color: var(--sl-border-default); /** The sheet's sides and bottom, the everyday divider. */
     --sl-sheet-tab-background: var(--sl-surface-inverse); /** The tab label's fill: the inverse surface, so the label reads as the sheet's name, and its text passes AA in every theme. */
+    --sl-side-nav-background: var(--sl-surface-tray); /** The column's fill: the tray surface, a step off the page, so the current row on the raised surface stands out from it. */
+    --sl-side-nav-border-color: var(--sl-border-default); /** The line between the column and the page. */
+    --sl-side-nav-item-divider-color: var(--sl-border-subtle); /** The hairline under each row. */
+    --sl-side-nav-item-color-disabled: var(--sl-text-secondary); /** A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable. */
+    --sl-side-nav-item-background-hover: var(--sl-fill-subtle); /** A row under the pointer. */
+    --sl-side-nav-item-background-current: var(--sl-surface-raised); /** The current row: the raised surface, so it reads as the open page. */
+    --sl-side-nav-count-color: var(--sl-text-accent); /** A count at the end of a row, such as items open. Accent text so it asks for attention. */
+    --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-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. */
@@ -2388,6 +2410,7 @@
     --sl-app-bar-border-color: var(--sl-rule-color); /** The line under the bar, in the rule color, so an ink rule brand gets an ink line here too. */
     --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-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. */
@@ -5888,6 +5911,19 @@
     --sl-sheet-rule-color: var(--sl-rule-color);
     --sl-sheet-tab-background: var(--sl-surface-inverse);
     --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-side-nav-background: var(--sl-surface-tray);
+    --sl-side-nav-border-color: var(--sl-border-default);
+    --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+    --sl-side-nav-item-color: var(--sl-text-primary);
+    --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+    --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+    --sl-side-nav-item-background-current: var(--sl-surface-raised);
+    --sl-side-nav-indicator-color: var(--sl-rule-color);
+    --sl-side-nav-count-color: var(--sl-text-accent);
+    --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+    --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-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);
@@ -6059,6 +6095,19 @@
     --sl-sheet-rule-color: var(--sl-rule-color);
     --sl-sheet-tab-background: var(--sl-surface-inverse);
     --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-side-nav-background: var(--sl-surface-tray);
+    --sl-side-nav-border-color: var(--sl-border-default);
+    --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+    --sl-side-nav-item-color: var(--sl-text-primary);
+    --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+    --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+    --sl-side-nav-item-background-current: var(--sl-surface-raised);
+    --sl-side-nav-indicator-color: var(--sl-rule-color);
+    --sl-side-nav-count-color: var(--sl-text-accent);
+    --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+    --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-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);
@@ -6230,6 +6279,19 @@
     --sl-sheet-rule-color: var(--sl-rule-color);
     --sl-sheet-tab-background: var(--sl-surface-inverse);
     --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-side-nav-background: var(--sl-surface-tray);
+    --sl-side-nav-border-color: var(--sl-border-default);
+    --sl-side-nav-item-divider-color: var(--sl-border-subtle);
+    --sl-side-nav-item-color: var(--sl-text-primary);
+    --sl-side-nav-item-color-disabled: var(--sl-text-secondary);
+    --sl-side-nav-item-background-hover: var(--sl-fill-subtle);
+    --sl-side-nav-item-background-current: var(--sl-surface-raised);
+    --sl-side-nav-indicator-color: var(--sl-rule-color);
+    --sl-side-nav-count-color: var(--sl-text-accent);
+    --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
+    --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-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

@@ -2838,6 +2838,31 @@ declare const tokens: {
     readonly "tab-radius": string;
     readonly "header-gap": string;
   };
+  readonly "side-nav": {
+    readonly "background": string;
+    readonly "border-color": string;
+    readonly "item-height": string;
+    readonly "item-padding-inline": string;
+    readonly "item-gap": string;
+    readonly "item-divider-color": string;
+    readonly "item-color": string;
+    readonly "item-color-disabled": string;
+    readonly "item-background-hover": string;
+    readonly "item-background-current": string;
+    readonly "indicator-width": string;
+    readonly "indicator-color": string;
+    readonly "count-color": string;
+    readonly "count-color-quiet": string;
+    readonly "group-padding-top": string;
+    readonly "group-label-color": string;
+    readonly "toggle-width": string;
+    readonly "toggle-height": string;
+    readonly "toggle-radius": string;
+    readonly "toggle-offset": string;
+    readonly "toggle-background": string;
+    readonly "toggle-border-color": string;
+    readonly "collapsed-width": string;
+  };
   readonly "slider": {
     readonly "thumb-size": string;
     readonly "vertical-height": string;

package/dist/tokens.js

@@ -2838,6 +2838,31 @@ const tokens = {
     "tab-radius": "0.125rem",
     "header-gap": "0.75rem"
   },
+  "side-nav": {
+    "background": "#f8fbf9",
+    "border-color": "#e7ece4",
+    "item-height": "2.75rem",
+    "item-padding-inline": "1.25rem",
+    "item-gap": "0.5rem",
+    "item-divider-color": "#eff3ee",
+    "item-color": "#221928",
+    "item-color-disabled": "#4f5852",
+    "item-background-hover": "#eff3ee",
+    "item-background-current": "#f8fbf9",
+    "indicator-width": "2px",
+    "indicator-color": "#7c8980",
+    "count-color": "#7131a0",
+    "count-color-quiet": "#4f5852",
+    "group-padding-top": "1.25rem",
+    "group-label-color": "#4f5852",
+    "toggle-width": "1.5rem",
+    "toggle-height": "2.75rem",
+    "toggle-radius": "0.125rem",
+    "toggle-offset": "1.75rem",
+    "toggle-background": "#f8fbf9",
+    "toggle-border-color": "#221928",
+    "collapsed-width": "2.75rem"
+  },
   "slider": {
     "thumb-size": "1.25rem",
     "vertical-height": "200px"

package/dist/tokens.json

@@ -20688,6 +20688,203 @@
       "references": "{space.3}",
       "description": "Space between the tab label and an action at the end of the header row, such as an Edit link."
     },
+    {
+      "name": "--sl-side-nav-background",
+      "path": "side-nav.background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.tray}",
+      "description": "The column's fill: the tray surface, a step off the page, so the current row on the raised surface stands out from it."
+    },
+    {
+      "name": "--sl-side-nav-border-color",
+      "path": "side-nav.border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#e7ece4",
+      "references": "{border.default}",
+      "description": "The line between the column and the page."
+    },
+    {
+      "name": "--sl-side-nav-item-height",
+      "path": "side-nav.item-height",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{control.height-md}",
+      "description": "Least height of a row: the regular control height, so a row is as tall as a button."
+    },
+    {
+      "name": "--sl-side-nav-item-padding-inline",
+      "path": "side-nav.item-padding-inline",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "Space at each end of a row."
+    },
+    {
+      "name": "--sl-side-nav-item-gap",
+      "path": "side-nav.item-gap",
+      "layer": "component",
+      "value": "0.5rem",
+      "references": "{space.2}",
+      "description": "Space between a row's label and its count."
+    },
+    {
+      "name": "--sl-side-nav-item-divider-color",
+      "path": "side-nav.item-divider-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{border.subtle}",
+      "description": "The hairline under each row."
+    },
+    {
+      "name": "--sl-side-nav-item-color",
+      "path": "side-nav.item-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#221928",
+      "references": "{text.primary}",
+      "description": "A row's text."
+    },
+    {
+      "name": "--sl-side-nav-item-color-disabled",
+      "path": "side-nav.item-color-disabled",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A row that is not available yet. Secondary text, not the faded disabled color, so its hint stays readable."
+    },
+    {
+      "name": "--sl-side-nav-item-background-hover",
+      "path": "side-nav.item-background-hover",
+      "layer": "component",
+      "type": "color",
+      "value": "#eff3ee",
+      "references": "{fill.subtle}",
+      "description": "A row under the pointer."
+    },
+    {
+      "name": "--sl-side-nav-item-background-current",
+      "path": "side-nav.item-background-current",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The current row: the raised surface, so it reads as the open page."
+    },
+    {
+      "name": "--sl-side-nav-indicator-width",
+      "path": "side-nav.indicator-width",
+      "layer": "component",
+      "value": "2px",
+      "references": "{stroke.medium}",
+      "description": "The line under the current row."
+    },
+    {
+      "name": "--sl-side-nav-indicator-color",
+      "path": "side-nav.indicator-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{rule.color}",
+      "description": "The current row's line: the working-paper rule color, so the nav and the sheets share one ink."
+    },
+    {
+      "name": "--sl-side-nav-count-color",
+      "path": "side-nav.count-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7131a0",
+      "references": "{text.accent}",
+      "description": "A count at the end of a row, such as items open. Accent text so it asks for attention."
+    },
+    {
+      "name": "--sl-side-nav-count-color-quiet",
+      "path": "side-nav.count-color-quiet",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A count that is only information (tone=\"quiet\"), such as a total."
+    },
+    {
+      "name": "--sl-side-nav-group-padding-top",
+      "path": "side-nav.group-padding-top",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "Space above a group heading."
+    },
+    {
+      "name": "--sl-side-nav-group-label-color",
+      "path": "side-nav.group-label-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#4f5852",
+      "references": "{text.secondary}",
+      "description": "A group heading's caps label."
+    },
+    {
+      "name": "--sl-side-nav-toggle-width",
+      "path": "side-nav.toggle-width",
+      "layer": "component",
+      "value": "1.5rem",
+      "references": "{space.6}",
+      "description": "The collapse handle's width. It straddles the column's edge."
+    },
+    {
+      "name": "--sl-side-nav-toggle-height",
+      "path": "side-nav.toggle-height",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{space.11}",
+      "description": "The collapse handle's height, a tall tab on the column's edge."
+    },
+    {
+      "name": "--sl-side-nav-toggle-radius",
+      "path": "side-nav.toggle-radius",
+      "layer": "component",
+      "value": "0.125rem",
+      "references": "{radius.control}",
+      "description": "The collapse handle's corners."
+    },
+    {
+      "name": "--sl-side-nav-toggle-offset",
+      "path": "side-nav.toggle-offset",
+      "layer": "component",
+      "value": "1.75rem",
+      "references": "{space.7}",
+      "description": "Distance of the collapse button from the top of the column."
+    },
+    {
+      "name": "--sl-side-nav-toggle-background",
+      "path": "side-nav.toggle-background",
+      "layer": "component",
+      "type": "color",
+      "value": "#f8fbf9",
+      "references": "{surface.raised}",
+      "description": "The collapse handle's fill."
+    },
+    {
+      "name": "--sl-side-nav-toggle-border-color",
+      "path": "side-nav.toggle-border-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#221928",
+      "references": "{text.primary}",
+      "description": "The collapse handle's outline and chevron. It fills with this color on hover."
+    },
+    {
+      "name": "--sl-side-nav-collapsed-width",
+      "path": "side-nav.collapsed-width",
+      "layer": "component",
+      "value": "2.75rem",
+      "references": "{space.11}",
+      "description": "Width of the column when it is collapsed, wide enough for the collapse handle."
+    },
     {
       "name": "--sl-slider-thumb-size",
       "path": "slider.thumb-size",
@@ -23605,6 +23802,20 @@
         "--sl-sheet-tab-background": "#203d48",
         "--sl-sheet-tab-color": "#f3fcff",
         "--sl-sheet-tab-radius": "0.0938rem",
+        "--sl-side-nav-background": "#f3fcff",
+        "--sl-side-nav-border-color": "#d1f3ff",
+        "--sl-side-nav-item-divider-color": "#def6ff",
+        "--sl-side-nav-item-color": "#203d48",
+        "--sl-side-nav-item-color-disabled": "#3c5a66",
+        "--sl-side-nav-item-background-hover": "#def6ff",
+        "--sl-side-nav-item-background-current": "#f3fcff",
+        "--sl-side-nav-indicator-color": "#6b8d99",
+        "--sl-side-nav-count-color": "#70463c",
+        "--sl-side-nav-count-color-quiet": "#3c5a66",
+        "--sl-side-nav-group-label-color": "#3c5a66",
+        "--sl-side-nav-toggle-radius": "0.0938rem",
+        "--sl-side-nav-toggle-background": "#f3fcff",
+        "--sl-side-nav-toggle-border-color": "#203d48",
         "--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.9.0",
+  "version": "0.11.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.9.0"
+    "@scattered-light/loomiere": "0.11.0"
   }
 }