@threadlabs/looma 0.17.0 → 0.17.2

package/editor/chunks/extensions.js

@@ -9200,6 +9200,12 @@ function setActiveTableCellBackground(editor, backgroundColor) {
 * Default Tiptap extension preset for Looma editor.
 * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
 */
+var LoomaCodeBlock = CodeBlockLowlight.extend({ addInputRules() {
+	return [...this.parent?.() ?? [], textblockTypeInputRule({
+		find: /^```$/,
+		type: this.type
+	})];
+} });
 var StoredOnlyHighlight = Highlight.extend({
 	parseHTML: () => [],
 	addKeyboardShortcuts: () => ({}),
@@ -9243,9 +9249,13 @@ function getLoomaTableExtensions() {
 * can be replaced without coupling UI chrome to an application directory.
 * Use with `new Editor({ extensions: getDefaultEditorExtensions(), ... })` or a
 * framework's Tiptap editor hook.
+* @contract Code blocks accept three backticks in an empty paragraph as an
+* immediate typing shortcut. An optional node view changes presentation only;
+* the code and explicit language stay in the document schema.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeBlockNodeView } = options;
+	const codeBlock = LoomaCodeBlock.configure({ lowlight: createLowlight(codeLanguages) });
 	return [
 		Document,
 		Paragraph,
@@ -9283,7 +9293,7 @@ function getDefaultEditorExtensions(options = {}) {
 		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
 		LoomaSmartPaste,
-		CodeBlockLowlight.configure({ lowlight: createLowlight(codeLanguages) }),
+		codeBlockNodeView ? codeBlock.extend({ addNodeView: () => codeBlockNodeView }) : codeBlock,
 		Typography,
 		Placeholder.configure({
 			placeholder: ({ node }) => node.type.name === "paragraph" ? placeholder : "",

package/editor/extensions/preset.d.ts

@@ -2,7 +2,7 @@
  * Default Tiptap extension preset for Looma editor.
  * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
  */
-import { type AnyExtension } from "@tiptap/core";
+import { type AnyExtension, type NodeViewRenderer } from "@tiptap/core";
 import { createLowlight } from "lowlight";
 /** Grammars supplied by the host; importing a language remains the host's choice. */
 export type LoomaCodeLanguages = NonNullable<Parameters<typeof createLowlight>[0]>;
@@ -29,6 +29,8 @@ export interface DefaultEditorExtensionsOptions {
     disableHighlight?: boolean;
     /** Code block grammars to register. None are loaded by default. */
     codeLanguages?: LoomaCodeLanguages;
+    /** Optional presentation for a code block; the Vue editor supplies its language control. */
+    codeBlockNodeView?: NodeViewRenderer;
 }
 /**
  * Complete Looma table schema as one Tiptap extension.
@@ -50,5 +52,8 @@ export declare function getLoomaTableExtensions(): AnyExtension[];
  * can be replaced without coupling UI chrome to an application directory.
  * Use with `new Editor({ extensions: getDefaultEditorExtensions(), ... })` or a
  * framework's Tiptap editor hook.
+ * @contract Code blocks accept three backticks in an empty paragraph as an
+ * immediate typing shortcut. An optional node view changes presentation only;
+ * the code and explicit language stay in the document schema.
  */
 export declare function getDefaultEditorExtensions(options?: DefaultEditorExtensionsOptions): AnyExtension[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar-group.css

@@ -15,10 +15,9 @@
       --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
       --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
 
-      /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
-       * whole circle set on top, not a shape cut into the one beneath. */
-      --_overlap-shadow: 0 0 0 0 transparent;
-      --_edge-ring: 0 0 0 2px var(--ui-surface);
+      /* A one-pixel shadow on the leading edge separates overlapping circles without cutting
+       * a white gap out of the avatar underneath. */
+      --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
       display: flex;
       align-items: center;
@@ -29,6 +28,10 @@
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
 
+    :scope:dir(rtl) {
+      --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
+    }
+
     .overflow {
       margin-inline-start: -0.5rem;
       display: inline-flex;
@@ -42,7 +45,7 @@
       color: var(--ui-text-primary);
       box-shadow:
         var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
-        var(--_ui-avatar-group-edge-ring, var(--_edge-ring));
+        var(--_ui-avatar-group-edge-ring, 0 0 0 0 transparent);
       font: inherit;
       font-size: var(--ui-font-size-xs);
       font-weight: 600;

package/styles/ui-badge.css

@@ -123,27 +123,32 @@
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
-      --_badge-surface: var(--ui-accent-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
-      --_badge-surface: var(--ui-danger-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
-      --_badge-surface: var(--ui-success-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
-      --_badge-surface: var(--ui-warning-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
-      --_badge-surface: var(--ui-info-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 

package/styles/ui-breadcrumb-item.css

@@ -7,12 +7,13 @@
       align-items: center;
       gap: var(--ui-space-2);
       min-inline-size: 0;
+      margin: 0;
     }
 
     .separator {
       display: inline-flex;
       color: var(--ui-text-muted);
-      font-size: var(--ui-font-size-xs);
+      font-size: var(--ui-font-size-sm);
     }
 
     :scope:first-child .separator {

package/styles/ui-button.css

@@ -127,12 +127,15 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease);
       margin: 0;
     }
 
-    .pending-spinner {
+    .spinner-wrap {
+      display: inline-flex;
+      flex: none;
       margin-inline-end: var(--ui-space-2);
+      vertical-align: middle;
     }
 
     @supports (text-box-trim: trim-both) {
@@ -262,12 +265,12 @@
         var(--ui-focus-halo);
     }
 
-    /* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
-       fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
-       toward the page. The highlight and shadow go, because nothing that cannot be pressed should
-       look raised. */
-    :scope:is(:disabled, [aria-disabled="true"]) {
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+    :scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
@@ -275,16 +278,13 @@
       box-shadow: none;
     }
 
-    :scope[data-ui-button-state~="pending"]:focus-visible {
+    :is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
-    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
-       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
-       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-    :scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]) {
-      background-color: oklch(from var(--_tone) l c h / 14%);
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+    :scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
 
@@ -343,7 +343,7 @@
       transform: none;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]) {
+    :scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
@@ -378,16 +378,10 @@
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
-    /* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
-       fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
-       toward the page. The highlight and shadow go, because nothing that cannot be pressed should
-       look raised. */
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
 
-    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
-       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
-       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {

package/styles/ui-callout.css

@@ -61,7 +61,9 @@
       gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
       align-items: start;
       max-width: 100%;
-      padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
+      padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
+      padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
+      padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
       border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
       border-radius: var(--ui-radius-md);

package/styles/ui-card.css

@@ -9,7 +9,7 @@
       box-sizing: border-box;
       min-inline-size: 0;
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-default);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
       color: var(--ui-text-primary);
@@ -35,7 +35,9 @@
     }
 
     :scope[data-ui-card-state~="tone=danger"] {
-      border-color: var(--ui-danger);
+      border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+      border-inline-start: 4px solid var(--ui-danger);
+      background: var(--ui-danger-soft);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-checkbox.css

@@ -11,6 +11,20 @@
       syntax: "*";
       inherits: false;
     }
+@keyframes ui-checkbox-check {
+      from {
+        opacity: 0;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+      }
+      65% {
+        opacity: 1;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+      }
+      to {
+        opacity: 1;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+      }
+    }
 @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -58,10 +72,10 @@
       inline-size: var(--_ui-checkbox-size, 1.125rem);
       block-size: var(--_ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
-      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
-      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
+      box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -73,28 +87,30 @@
       content: "";
       position: absolute;
       opacity: 0;
+      transition: opacity 120ms var(--ui-motion-ease);
     }
 
     input:checked,
     input:indeterminate {
       border-color: var(--ui-accent-solid);
       background: var(--ui-accent-solid);
-      box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
+      box-shadow: var(--ui-control-inset);
     }
 
     /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
     input:checked::after {
       inset: 0;
       margin: auto;
-      inline-size: 0.32rem;
-      block-size: 0.58rem;
+      inline-size: 0.28rem;
+      block-size: 0.5rem;
       /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
          component, which left the tick with no style and no colour. */
       border-style: solid;
       border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
-      transform: translateY(-0.11rem) rotate(45deg);
+      transform: translate(0.07rem, -0.09rem) rotate(45deg);
+      animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate::after {
@@ -106,6 +122,13 @@
       transform: translateY(-50%);
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      input::after {
+        transition: none;
+        animation: none;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }
@@ -123,9 +146,13 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :scope[data-ui-checkbox-state~="disabled"] .description {
+      color: var(--ui-disabled-text);
+    }
     :scope[data-ui-checkbox-state~="disabled"] input {
-      border-color: var(--ui-border-default);
-      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      border-color: var(--ui-disabled-border);
+      background: var(--ui-disabled-surface);
+      box-shadow: none;
       cursor: not-allowed;
     }
 
@@ -172,6 +199,9 @@
 
     /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
 
+    @media (prefers-reduced-motion: reduce) {
+    }
+
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */

package/styles/ui-combobox.css

@@ -121,6 +121,11 @@
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
     }
+    .entry {
+      display: flex;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
@@ -240,7 +245,7 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px 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)));
       color: var(--ui-text-primary);
@@ -264,6 +269,10 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    .option[aria-disabled="true"] .primary,
+    .option[aria-disabled="true"] .secondary {
+      color: var(--ui-disabled-text);
+    }
     .primary {
       display: block;
       color: var(--_ui-combobox-option-text, var(--ui-text-primary));
@@ -360,21 +369,29 @@
       );
     }
 
-    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+    /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
+       while the clear and disclosure controls remain fixed at the end of the field. */
     :scope[data-ui-combobox-state~="multiple"] .field {
-      flex-wrap: wrap;
       align-items: center;
-      gap: var(--ui-space-1);
       min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
+    :scope[data-ui-combobox-state~="multiple"] .entry {
+      align-items: center;
+      gap: var(--ui-space-1);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    :scope[data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
+      display: none;
+    }
     :scope[data-ui-combobox-state~="multiple"] input {
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
     }
-    /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+    /* Size variants keep their control height as selections are added. */
     :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] .field {
       min-block-size: 0;
       padding: var(--ui-space-0-5);
@@ -393,6 +410,7 @@
     .item {
       appearance: none;
       display: inline-flex;
+      flex: none;
       min-inline-size: 0;
       max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
@@ -409,7 +427,7 @@
       outline-offset: 1px;
     }
     .item:disabled {
-      opacity: 0.6;
+      color: var(--ui-disabled-text);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -434,8 +452,9 @@
        before anything is picked. aria-selected is the state; this draws it.
        Longhands, not shorthands: lowering drops a shorthand that omits a component. */
 
-    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-    /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+    /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
+       while the clear and disclosure controls remain fixed at the end of the field. */
+    /* Size variants keep their control height as selections are added. */
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-context-menu.css

@@ -42,7 +42,7 @@
       box-sizing: border-box;
       padding: var(--ui-space-1);
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
@@ -63,7 +63,7 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .menu:popover-open {

package/styles/ui-description-item.css

@@ -12,7 +12,7 @@
       padding: var(--_ui-description-padding, 0);
       border-width: var(--_ui-description-border-width, 0);
       border-style: solid;
-      border-color: var(--ui-border-default);
+      border-color: var(--_ui-description-border-color, var(--ui-border-default));
       border-radius: var(--ui-radius-md);
       font-size: var(--ui-font-size-sm);
     }

package/styles/ui-description-list.css

@@ -33,6 +33,7 @@
        than that many fit. */
     :scope[data-ui-description-list-state~="layout=grid"],
     :scope[data-ui-description-list-state~="layout=tiles"] {
+      inline-size: 100%;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
     }
 
@@ -41,6 +42,7 @@
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
+      --_ui-description-border-color: var(--ui-border-strong);
       --_gap: var(--ui-space-3);
       --_gap-compact: var(--ui-space-2);
       --_column-gap: var(--_gap);

package/styles/ui-dialog.css

@@ -59,7 +59,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
@@ -111,7 +111,6 @@
       gap: var(--ui-space-3);
       flex: none;
       padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
-      border-block-end: 1px solid var(--ui-border-default);
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -186,26 +185,7 @@
     .body {
       flex: 1 1 auto;
       min-block-size: 0;
-      overflow: auto;
-      overscroll-behavior: contain;
       padding: var(--ui-space-5);
-      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-      --_ui-scroll-fade-direction: to bottom;
-      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-      mask-image: linear-gradient(
-        var(--_ui-scroll-fade-direction),
-        transparent,
-        #000 var(--_ui-scroll-fade-start),
-        #000 calc(100% - var(--_ui-scroll-fade-end)),
-        transparent
-      );
-      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
-      animation-timeline: scroll(self block);
-      animation-range:
-        0 var(--_ui-scroll-fade-size),
-        var(--_ui-scroll-fade-size) calc(100% + 1px),
-        -1px calc(100% - var(--_ui-scroll-fade-size)),
-        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     footer {
@@ -215,7 +195,6 @@
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-5);
-      border-block-start: 1px solid var(--ui-border-default);
     }
 
     footer:empty {

package/styles/ui-disclosure.css

@@ -38,7 +38,7 @@
       display: block;
       inline-size: 100%;
       overflow: clip;
-      border-block-end: 1px solid var(--ui-border-default);
+      border-block-end: 1px solid var(--ui-border-divider);
       color: var(--ui-text-primary);
     }
 
@@ -63,7 +63,7 @@
     }
 
     .trigger:hover:not(:disabled) {
-      background: var(--ui-surface-muted);
+      background: color-mix(in srgb, currentColor 6%, transparent);
     }
     .trigger:focus-visible {
       outline: none;

package/styles/ui-editor-insert-table-grid.css

@@ -3,7 +3,7 @@
 :scope {
       padding: var(--ui-space-3);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     }
@@ -48,7 +48,7 @@
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-control-border);
       border-radius: 2px;
       background: var(--ui-surface);
       cursor: pointer;

package/styles/ui-editor-mention-menu.css

@@ -9,7 +9,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
     }
@@ -21,12 +21,12 @@
       gap: var(--ui-space-3);
       padding: var(--ui-space-2) var(--ui-space-3);
       color: var(--ui-text-secondary);
-      border-bottom: 1px solid var(--ui-border);
+      border-bottom: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
     }
 
-    .header:not(:has(> *)), .empty:not(:has(> *)) {
+    :scope > .header:empty, :scope > .empty:empty {
       display: none;
     }