@threadlabs/looma 0.37.6 → 0.39.0

package/docs/theme.mjs

@@ -3,7 +3,7 @@ import { mixColour as mix, paletteSeeds, companionSurface, toLch, fromLch } from
 
 const bounds = {
   'text-size': [14, 24], 'control-roominess': [2, 4], 'corner-roundness': [0, 32],
-  'line-weight': [.5, 3], spacing: [.75, 1.5], 'scale-contrast': [1, 1.5],
+  'line-weight': [.5, 3], rhythm: [.75, 1.5], spacing: [.75, 1.5], 'scale-contrast': [1, 1.5],
   'space-curve': [.5, 2], 'text-weight': [400, 700], 'outer-depth': [0, 2], 'inner-depth': [0, 2],
   'response-time': [0, 600],
 };
@@ -16,12 +16,13 @@ export const themeFields = [
   ['Colour', 'text', 'Text', '--ui-text', 'colour', '#1a1a1a', 'Readable content; supporting text follows this and Surface.'],
   ['Colour', 'warmth', 'Surface warmth', null, 'fraction', '0.5', '0% cool, 50% original, 100% warm paper and ink; your brand hue stays independent.'],
   ['Colour', 'color-intensity', 'Color intensity', null, 'fraction', '0.5', '0% quiet, 50% original, 100% vivid, coordinated across surfaces, actions and status colors.'],
-  ['Colour', 'palette-relationship', 'Palette relationship', null, 'choice', 'preserve', 'Keep seed hues, or relate quiet surfaces to the brand through neighboring or complementary hues.'],
-  ['Type', 'body-font', 'Body font', '--ui-font-sans', 'font', 'system-ui, sans-serif', 'The shared interface typeface.'],
-  ['Type', 'display-font', 'Display font', '--ui-font-display', 'font', 'system-ui, sans-serif', 'The heading typeface.'],
+  ['Colour', 'palette-relationship', 'Palette relationship', null, 'choice', 'preserve', 'Keep base hues, or relate quiet surfaces to the brand through neighboring or complementary hues.'],
+  ['Type', 'body-font', 'Font', '--ui-font-sans', 'font', 'system-ui, sans-serif', 'The shared interface typeface.'],
+  ['Type', 'display-font', 'Heading font', '--ui-font-display', 'font', 'system-ui, sans-serif', 'The heading typeface.'],
   ['Type', 'text-size', 'Base text size', '--ui-font-size', 'positive-length', '16px', 'Sets the document root in px. Type, spacing and layout use rem relationships and scale from this base once.'],
   ['Type', 'text-weight', 'Emphasis weight', '--ui-font-medium', 'weight', '500', 'Control-label emphasis; body and headings keep their roles.'],
   ['Size & spacing', 'control-roominess', 'Control roominess', '--ui-control-roominess', 'positive', '2.5', 'Shared control height as a multiple of base text size; buttons, fields and swatches stay aligned.'],
+  ['Size & spacing', 'rhythm', 'Rhythm', '--ui-rhythm', 'positive', '1', 'More or less breathing room between lines and groups. Spacing fine-tunes gaps independently.'],
   ['Size & spacing', 'spacing', 'Spacing', '--ui-spacing', 'positive', '1', 'More or less breathing room throughout the interface.'],
   ['Size & spacing', 'scale-contrast', 'Size ratio', '--ui-scale-ratio', 'ratio', '1.2', 'The multiplier between small, medium and large controls. At 1 the sizes are equal; higher values separate them.'],
   ['Size & spacing', 'space-curve', 'Spacing curve', '--ui-space-curve', 'nonnegative', '1', 'Spacing growth: 1 is linear, 2 is quadratic. Independent of control sizes.'],
@@ -31,7 +32,7 @@ export const themeFields = [
   ['Material', 'inner-depth', 'Inner depth', '--ui-inner-depth', 'nonnegative', '0.3', 'How strongly fields and pressed controls sit into their surface.'],
   ['Material', 'glassiness', 'Glassiness', '--ui-glassiness', 'fraction', '0', 'Clear through richly frosted: the upper range adds stronger blur, saturation and glass edges. Content stays readable.'],
   ['Material', 'surface-separation', 'Surface separation', '--ui-surface-separation', 'fraction', '0', 'One material offset, scaled by popup purpose and actual size: quiet tooltips through substantial dialogs.'],
-  ['Material', 'translucency', 'Overlay translucency', '--ui-overlay-translucency', 'fraction', '0', 'How much background comes through floating surfaces.'],
+  ['Material', 'translucency', 'Overlay translucency', '--ui-overlay-translucency', 'fraction', '0', 'How much background comes through floating material around opaque content.'],
   ['Material', 'edge-light', 'Edge light', '--ui-edge-light', 'fraction', '0', 'Light caught by surface edges, independent of depth.'],
   ['Material', 'finish', 'Finish', '--ui-finish', 'fraction', '0', 'Matte through polished: how strongly the material catches a reflection.'],
   ['Material', 'glow', 'Glow', '--ui-glow', 'fraction', '0', 'Reflected light beyond a surface, from a quiet halo to a vivid bloom at the upper end.'],
@@ -47,11 +48,11 @@ export const defaultRecipe = () => ({ schemaVersion: 1, values: Object.fromEntri
 const starting = values => ({ schemaVersion: 1, values: { ...defaultRecipe().values, ...values } });
 export const startingPoints = {
   clear: defaultRecipe(),
-  bookish: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-roominess': '2.625', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', finish: '0.85', glow: '0.3', 'light-spread': '0.3', 'light-strength': '0.9', 'response-time': '150ms', 'response-curve': 'ease' }),
-  wiki: starting({ action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-roominess': '2.125', spacing: '0.85', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
-  editorial: starting({ action: '#182c24', canvas: '#eee9dc', surface: '#fffdf5', text: '#182c24', 'corner-roundness': '0px', 'outer-depth': '0', 'inner-depth': '0', 'body-font': 'Georgia, serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'line-weight': '2px', 'response-time': '90ms', 'response-curve': 'linear' }),
-  night: starting({ action: '#a7b8ff', canvas: '#11141c', surface: '#202634', text: '#edf1fb', 'corner-roundness': '12px', 'outer-depth': '1.4', 'inner-depth': '0.45', translucency: '0.2', 'edge-light': '0.65', 'response-time': '210ms', 'response-curve': 'cubic-bezier(0.2,0.8,0.2,1)' }),
-  garden: starting({ action: '#256342', canvas: '#eef5e7', surface: '#fcfff6', text: '#173121', 'corner-roundness': '22px', 'outer-depth': '0.35', 'inner-depth': '0', 'edge-light': '0.2', 'control-roominess': '2.875', 'scale-contrast': '1.24', spacing: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
+  bookish: starting({ rhythm: '1.05', action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-roominess': '2.625', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', finish: '0.85', glow: '0.3', 'light-spread': '0.3', 'light-strength': '0.9', 'response-time': '150ms', 'response-curve': 'ease' }),
+  wiki: starting({ rhythm: '0.8', 'text-weight': '400', 'space-curve': '0.8', action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-roominess': '2.125', spacing: '0.85', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
+  editorial: starting({ rhythm: '1.3', 'text-size': '17px', spacing: '1.12', 'space-curve': '1.4', 'scale-contrast': '1.3', action: '#182c24', canvas: '#eee9dc', surface: '#fffdf5', text: '#182c24', 'corner-roundness': '0px', 'outer-depth': '0', 'inner-depth': '0', 'body-font': 'Georgia, serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'line-weight': '2px', 'response-time': '90ms', 'response-curve': 'linear' }),
+  night: starting({ rhythm: '0.9', 'display-font': 'ui-monospace, monospace', 'text-weight': '600', 'control-roominess': '2.375', spacing: '0.9', 'scale-contrast': '1.25', 'space-curve': '1.2', finish: '0.6', glow: '0.45', glassiness: '0.45', 'surface-separation': '0.25', 'light-x': '0.25', 'light-spread': '0.65', action: '#a7b8ff', canvas: '#11141c', surface: '#202634', text: '#edf1fb', 'corner-roundness': '12px', 'outer-depth': '1.4', 'inner-depth': '0.45', translucency: '0.2', 'edge-light': '0.65', 'response-time': '210ms', 'response-curve': 'cubic-bezier(0.2,0.8,0.2,1)' }),
+  garden: starting({ rhythm: '1.2', 'body-font': 'ui-rounded, system-ui, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'space-curve': '1.15', finish: '0.15', 'light-spread': '1', action: '#256342', canvas: '#f4edda', surface: '#fff8e7', text: '#173121', 'corner-roundness': '22px', 'outer-depth': '0.35', 'inner-depth': '0', 'edge-light': '0.2', 'control-roominess': '2.875', 'scale-contrast': '1.24', spacing: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
 };
 export const startingPointLabels = { clear: 'Clear', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
 const paletteKeys = themeFields.filter(field => field.family === 'Colour').map(field => field.id);

package/editor/expressmark.js

@@ -109,7 +109,7 @@ function safeBackground(value, path) {
 			value: "color",
 			attributes: { style }
 		}]
-	})), (node) => typeof node.attributes?.style === "string")?.attributes?.style;
+	}), { syntax: "compatible" }), (node) => typeof node.attributes?.style === "string")?.attributes?.style;
 	if (typeof accepted !== "string" || accepted.replace(/\s/g, "").replace(/;$/, "") !== style.replace(/\s/g, "")) fail(path, "unsafe or unsupported table background");
 }
 function safeNavigation(value, image, path) {
@@ -129,7 +129,7 @@ function safeNavigation(value, image, path) {
 				value: "link"
 			}]
 		}]
-	})), (child) => child.type === (image ? "image" : "link"))?.url !== value) fail(path, "unsafe or unsupported navigation URL");
+	}), { syntax: "compatible" }), (child) => child.type === (image ? "image" : "link"))?.url !== value) fail(path, "unsafe or unsupported navigation URL");
 }
 var MARKS = {
 	bold: "strong",
@@ -605,6 +605,7 @@ function editorDocumentToExpressmark(document, options = {}) {
 	return {
 		type: "document",
 		version: 1,
+		syntax: options.syntax ?? "compatible",
 		body: (document.content ?? []).map((node, index) => {
 			const child = toNode(node, `document.body[${index}]`, context);
 			return child.type === "image" ? {
@@ -1007,7 +1008,11 @@ function expressmarkToEditorDocument(document) {
 * @failure Unsupported editor data raises EditorMarkdownConversionError before any input is changed.
 */
 function editorDocumentToMarkdown(document, options = {}) {
-	return stringify(editorDocumentToExpressmark(document, options), options);
+	const conversion = {
+		syntax: "compatible",
+		...options
+	};
+	return stringify(editorDocumentToExpressmark(document, conversion), conversion);
 }
 /**
 * Serializes the current editor, including its current display cache and concrete TOC entries.
@@ -1024,7 +1029,10 @@ function editorToMarkdown(editor, options = {}) {
 * @failure Unsupported content or root metadata stops conversion instead of being silently flattened.
 */
 function markdownToEditorDocument(markdown, options = {}) {
-	return expressmarkToEditorDocument(parse(markdown, options));
+	return expressmarkToEditorDocument(parse(markdown, {
+		syntax: "compatible",
+		...options
+	}));
 }
 //#endregion
 export { EditorMarkdownConversionError, editorDocumentToExpressmark, editorDocumentToMarkdown, editorToMarkdown, expressmarkToEditorDocument, markdownToEditorDocument };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.37.6",
+  "version": "0.39.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -119,7 +119,7 @@
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0",
-    "expressmark": "0.1.6"
+    "expressmark": ">=0.2.0 <1"
   },
   "peerDependencies": {
     "@nextwebwg/html-next": "1.0.0-alpha.69",
@@ -127,9 +127,9 @@
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.43",
-    "markupress": "^0.8.7 || ^0.9.0",
-    "@nextwebwg/htmlkit": "1.0.0-alpha.69",
-    "vite": "^8.3.4"
+    "markupress": ">=0.10.0 <1",
+    "@threadlabs/markupkit": ">=0.2.0 <1",
+    "vite": ">=7.2.7 <9"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -147,7 +147,7 @@
     "markupress": {
       "optional": true
     },
-    "@nextwebwg/htmlkit": {
+    "@threadlabs/markupkit": {
       "optional": true
     },
     "vite": {

package/styles/ui-button.css

@@ -268,7 +268,6 @@
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
@@ -277,6 +276,12 @@
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][aria-pressed="true"] {
+      background-color: var(--ui-selection-surface);
+      border-color: var(--ui-selection-border);
+      color: var(--ui-selection-text);
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
@@ -324,6 +329,18 @@
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, transparent);
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
@@ -411,10 +428,8 @@
       border-color: transparent;
     }
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
     :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
     }
@@ -548,8 +563,6 @@
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -559,9 +572,6 @@
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-    /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-       edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
     /* A loading action stays visually active; only an explicitly disabled action takes the

package/styles/ui-combobox.css

@@ -136,6 +136,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty {
+      display: none !important;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .start {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
@@ -174,6 +189,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]))::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -258,7 +277,7 @@
       padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
-      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-material-content, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
@@ -537,6 +556,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start:where(:scope, :scope *) {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty:where(:scope, :scope *) {
+      display: none !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help:where(:scope, :scope *) {
       flex: none;
@@ -574,6 +608,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope *)::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -657,7 +695,7 @@
       padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
-      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-material-content, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/styles/ui-icon-button.css

@@ -172,10 +172,14 @@
       color: var(--_icon-button-text);
     }
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
     :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+      --_icon-button-outline-surface: transparent;
+      --_icon-button-border: var(--ui-control-border);
+      --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+      --_icon-button-text: var(--ui-text);
       --_icon-button-solid-surface: var(--ui-neutral-surface);
       --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
       --_icon-button-solid-text: var(--ui-text);
@@ -363,6 +367,12 @@
     :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+    }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
@@ -487,7 +497,7 @@
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
 
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */

package/styles/ui-menu-item.css

@@ -131,7 +131,12 @@
     }
 
     :scope:where([data-component~="ui-menu-item"]):is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+      background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-checked="true"]:not([aria-disabled="true"]) {
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :scope:where([data-component~="ui-menu-item"]):focus-visible {

package/styles/ui-select.css

@@ -88,6 +88,10 @@
       background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] {
+      color: var(--ui-text-secondary);
+    }
+
     :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
@@ -160,6 +164,11 @@
 
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(option),
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(optgroup) {
+      color: var(--ui-text-primary);
+      background-color: var(--ui-control-surface);
+    }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 

package/theme-system.css

@@ -14,6 +14,7 @@
 @layer theme {
   :root {
     --ui-spacing: 1;
+    --ui-rhythm: 1;
     --ui-control-roominess: 2.5;
     --ui-scale-ratio: 1.2;
     --ui-space-curve: 1;
@@ -36,7 +37,11 @@
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
     --ui-control-size: calc(1rem * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)));
+    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)) * clamp(0.75, var(--ui-rhythm), 1.5));
+    --ui-line-height-tight: clamp(1.1, calc(1.2 + (var(--ui-rhythm) - 1) * 0.2), 1.3);
+    --ui-line-height: clamp(1.35, calc(1.4 + (var(--ui-rhythm) - 1) * 0.4), 1.6);
+    --ui-line-height-md: var(--ui-line-height);
+    --ui-line-height-relaxed: calc(var(--ui-line-height) * 1.15);
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -89,7 +94,7 @@
     --ui-elevation-dialog: var(--ui-shadow-lg);
     --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
     --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
-    --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+    --ui-overlay-surface: var(--ui-surface-raised);
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);

package/vanilla/UiButton.js

@@ -27,7 +27,7 @@ let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P
 const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
 const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiButton(options = {}, html) {

package/vanilla/UiCombobox.d.ts

@@ -36,6 +36,7 @@ export interface UiComboboxProps {
   labelVisibility?: "visible" | "sr-only" | null;
   loading?: boolean | null;
   multiple?: boolean | null;
+  muted?: boolean | null;
   name?: string | null;
   openOnFocus?: boolean | null;
   placeholder?: string | null;