@scattered-light/loomiere-mojave 0.10.0 → 0.12.0

package/dist/exports/tailwind.css

@@ -1097,6 +1097,7 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
+  --sl-collection-tree-line-color: var(--sl-border-strong);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);
   --sl-description-list-value-color: var(--sl-text-primary);
@@ -1120,7 +1121,7 @@
   --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-border-strong);
+  --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);
@@ -1281,6 +1282,7 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
+  --sl-collection-tree-line-color: var(--sl-border-strong);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);
   --sl-description-list-value-color: var(--sl-text-primary);
@@ -1304,7 +1306,7 @@
   --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-border-strong);
+  --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);
@@ -1465,6 +1467,7 @@
   --sl-app-bar-background: var(--sl-surface-raised);
   --sl-app-bar-border-color: var(--sl-rule-color);
   --sl-app-bar-divider-color: var(--sl-border-strong);
+  --sl-collection-tree-line-color: var(--sl-border-strong);
   --sl-description-list-row-border-color: var(--sl-border-subtle);
   --sl-description-list-label-color: var(--sl-text-secondary);
   --sl-description-list-value-color: var(--sl-text-primary);
@@ -1488,7 +1491,7 @@
   --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-border-strong);
+  --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

@@ -12188,6 +12188,15 @@
       "$value": "{space.4}",
       "$description": "How far each deeper level steps in, so a child sits under its parent's text."
     },
+    "tree-line-color": {
+      "$type": "color",
+      "$value": "{border.strong}",
+      "$description": "The elbow connector from a child row back to its parent, with treeLines."
+    },
+    "disclosure-size-small": {
+      "$value": "{space.5}",
+      "$description": "The expand and collapse button when a table sets disclosure=\"small\", small enough that a parent row keeps its siblings' height."
+    },
     "list-row-padding-block": {
       "$value": "{space.3}",
       "$description": "Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit."
@@ -12494,27 +12503,35 @@
       "$value": "{text.secondary}",
       "$description": "A group heading's caps label."
     },
-    "toggle-size": {
+    "toggle-width": {
       "$value": "{space.6}",
-      "$description": "The collapse button's width and height. It sits on the column's edge."
+      "$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.4}",
+      "$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 button's fill."
+      "$description": "The collapse handle's fill."
     },
     "toggle-border-color": {
       "$type": "color",
-      "$value": "{border.strong}",
-      "$description": "The collapse button's outline."
+      "$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 button."
+      "$description": "Width of the column when it is collapsed, wide enough for the collapse handle."
     }
   },
   "slider": {

package/dist/tokens.css

@@ -1873,6 +1873,7 @@
     --sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
     --sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
     --sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
+    --sl-collection-disclosure-size-small: var(--sl-space-5); /** The expand and collapse button when a table sets disclosure="small", small enough that a parent row keeps its siblings' height. */
     --sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
     --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
     --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
@@ -1901,9 +1902,10 @@
     --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-size: var(--sl-space-6); /** The collapse button's width and height. It sits on the column's edge. */
-    --sl-side-nav-toggle-offset: var(--sl-space-4); /** 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 button. */
+    --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. */
@@ -2177,6 +2179,7 @@
     --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. */
@@ -2277,6 +2280,7 @@
     --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. */
@@ -2364,6 +2368,7 @@
     --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
     --sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
+    --sl-collection-tree-line-color: var(--sl-border-strong); /** The elbow connector from a child row back to its parent, with treeLines. */
     --sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
     --sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
     --sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
@@ -2381,8 +2386,7 @@
     --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 button's fill. */
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong); /** The collapse button's outline. */
+    --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. */
@@ -5898,6 +5902,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -5921,7 +5926,7 @@
     --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-border-strong);
+    --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);
@@ -6082,6 +6087,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6105,7 +6111,7 @@
     --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-border-strong);
+    --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);
@@ -6266,6 +6272,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6289,7 +6296,7 @@
     --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-border-strong);
+    --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

@@ -2769,6 +2769,8 @@ declare const tokens: {
     readonly "header-height-sm": string;
     readonly "header-height-md": string;
     readonly "tree-indent": string;
+    readonly "tree-line-color": string;
+    readonly "disclosure-size-small": string;
     readonly "list-row-padding-block": string;
     readonly "list-row-gap": string;
     readonly "toolbar-gap": string;
@@ -2855,7 +2857,9 @@ declare const tokens: {
     readonly "count-color-quiet": string;
     readonly "group-padding-top": string;
     readonly "group-label-color": string;
-    readonly "toggle-size": 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;

package/dist/tokens.js

@@ -2769,6 +2769,8 @@ const tokens = {
     "header-height-sm": "2.75rem",
     "header-height-md": "3.25rem",
     "tree-indent": "1rem",
+    "tree-line-color": "#7c8980",
+    "disclosure-size-small": "1.25rem",
     "list-row-padding-block": "0.75rem",
     "list-row-gap": "0.5rem",
     "toolbar-gap": "0.5rem",
@@ -2855,10 +2857,12 @@ const tokens = {
     "count-color-quiet": "#4f5852",
     "group-padding-top": "1.25rem",
     "group-label-color": "#4f5852",
-    "toggle-size": "1.5rem",
-    "toggle-offset": "1rem",
+    "toggle-width": "1.5rem",
+    "toggle-height": "2.75rem",
+    "toggle-radius": "0.125rem",
+    "toggle-offset": "1.75rem",
     "toggle-background": "#f8fbf9",
-    "toggle-border-color": "#7c8980",
+    "toggle-border-color": "#221928",
     "collapsed-width": "2.75rem"
   },
   "slider": {

package/dist/tokens.json

@@ -20289,6 +20289,23 @@
       "references": "{space.4}",
       "description": "How far each deeper level steps in, so a child sits under its parent's text."
     },
+    {
+      "name": "--sl-collection-tree-line-color",
+      "path": "collection.tree-line-color",
+      "layer": "component",
+      "type": "color",
+      "value": "#7c8980",
+      "references": "{border.strong}",
+      "description": "The elbow connector from a child row back to its parent, with treeLines."
+    },
+    {
+      "name": "--sl-collection-disclosure-size-small",
+      "path": "collection.disclosure-size-small",
+      "layer": "component",
+      "value": "1.25rem",
+      "references": "{space.5}",
+      "description": "The expand and collapse button when a table sets disclosure=\"small\", small enough that a parent row keeps its siblings' height."
+    },
     {
       "name": "--sl-collection-list-row-padding-block",
       "path": "collection.list-row-padding-block",
@@ -20828,19 +20845,35 @@
       "description": "A group heading's caps label."
     },
     {
-      "name": "--sl-side-nav-toggle-size",
-      "path": "side-nav.toggle-size",
+      "name": "--sl-side-nav-toggle-width",
+      "path": "side-nav.toggle-width",
       "layer": "component",
       "value": "1.5rem",
       "references": "{space.6}",
-      "description": "The collapse button's width and height. It sits on the column's edge."
+      "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": "1rem",
-      "references": "{space.4}",
+      "value": "1.75rem",
+      "references": "{space.7}",
       "description": "Distance of the collapse button from the top of the column."
     },
     {
@@ -20850,16 +20883,16 @@
       "type": "color",
       "value": "#f8fbf9",
       "references": "{surface.raised}",
-      "description": "The collapse button's fill."
+      "description": "The collapse handle's fill."
     },
     {
       "name": "--sl-side-nav-toggle-border-color",
       "path": "side-nav.toggle-border-color",
       "layer": "component",
       "type": "color",
-      "value": "#7c8980",
-      "references": "{border.strong}",
-      "description": "The collapse button's outline."
+      "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",
@@ -20867,7 +20900,7 @@
       "layer": "component",
       "value": "2.75rem",
       "references": "{space.11}",
-      "description": "Width of the column when it is collapsed, wide enough for the collapse button."
+      "description": "Width of the column when it is collapsed, wide enough for the collapse handle."
     },
     {
       "name": "--sl-slider-thumb-size",
@@ -23773,6 +23806,7 @@
         "--sl-avatar-initials-font-size-lg": "clamp(0.875rem, 0.8167rem + 0.2917vw, 1.05rem)",
         "--sl-avatar-initials-font-size-xl": "clamp(1.26rem, 1.176rem + 0.42vw, 1.512rem)",
         "--sl-button-radius": "0.0938rem",
+        "--sl-collection-tree-line-color": "#6b8d99",
         "--sl-description-list-row-border-color": "#def6ff",
         "--sl-description-list-label-color": "#3c5a66",
         "--sl-description-list-value-color": "#203d48",
@@ -23797,8 +23831,9 @@
         "--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": "#6b8d99",
+        "--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.10.0",
+  "version": "0.12.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.10.0"
+    "@scattered-light/loomiere": "0.12.0"
   }
 }