@threadlabs/looma 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "./*.css"
   ],
   "dependencies": {
-    "@nextwebwg/declarative-components": "^1.0.0-alpha.1",
+    "@nextwebwg/html-next": "^1.0.0-alpha.2",
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0"

package/styles/ui-affordance-scope.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;

package/styles/ui-avatar-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;

package/styles/ui-avatar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-grid;

package/styles/ui-badge.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
 :scope {
       --_badge-surface: var(--ui-surface-subtle);

package/styles/ui-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -12,6 +12,16 @@
       color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     }
 
+    :scope[data-ui-button-state~="align=start"] {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :scope[data-ui-button-state~="stretch"] {
+      display: flex;
+      inline-size: 100%;
+    }
+
     :scope {
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
@@ -107,6 +117,7 @@
       border-color: transparent;
       background: transparent;
       box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
@@ -134,9 +145,31 @@
         var(--ui-focus-halo);
     }
 
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
     :scope:disabled {
-      opacity: 0.6;
+      opacity: var(--ui-button-disabled-opacity, 0.6);
       cursor: not-allowed;
+      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    :scope[data-ui-button-state~="variant=solid"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+    }
+
+    :scope[data-ui-button-state~="variant=danger"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
+      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
+      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+    }
+
+    :scope[data-ui-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
     }
 
     @media (pointer: coarse) {
@@ -176,6 +209,11 @@
       transform: none;
     }
 
+    :scope[data-ui-button-state~="variant=link"]:disabled {
+      background: none;
+      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+    }
+
     :scope[data-ui-button-state~="variant=link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
@@ -196,6 +234,8 @@
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+
     @media (pointer: coarse) {
     }
 

package/styles/ui-callout.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
 :scope {
       --_callout-surface: var(--ui-info-soft);

package/styles/ui-checkbox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-cluster.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
 :scope {
       --_layout-gap: var(--ui-space-3, 0.75rem);

package/styles/ui-combobox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;

package/styles/ui-container.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
 :scope {
       --_container-measure: 65ch;

package/styles/ui-context-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;

package/styles/ui-dialog.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @keyframes ui-dialog-enter {
       from {
         opacity: 0;
@@ -116,6 +116,19 @@
       outline-offset: 2px;
     }
 
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+      .close {
+        inline-size: var(--ui-control-min-block-size, 2.75rem);
+        block-size: var(--ui-control-min-block-size, 2.75rem);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :scope .close {
+      inline-size: var(--ui-control-min-block-size, 2.75rem);
+      block-size: var(--ui-control-min-block-size, 2.75rem);
+    }
+
     .body {
       flex: 1 1 auto;
       min-block-size: 0;
@@ -157,4 +170,8 @@
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
     /* A CSS-drawn X. */
+
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+    }
 }

package/styles/ui-disclosure.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
 /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */

package/styles/ui-editable.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
 :scope {
       padding: var(--ui-space-3, 12px);

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       user-select: none;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       user-select: none;

package/styles/ui-editor-table-context-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       min-width: 14rem;

package/styles/ui-editor-table-overlay.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
 :scope {
       display: block;

package/styles/ui-editor-table-toolbar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
 .looma-editor__mobile-toolbar-shell :scope {
       min-width: max-content;

package/styles/ui-editor-toolbar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;

package/styles/ui-floating-action-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
 :scope {
       position: fixed;

package/styles/ui-form-field.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;
@@ -8,25 +8,39 @@
       color: var(--ui-text-primary);
     }
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
-      display: none;
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+    .label,
+    .help,
+    .error {
+      display: contents;
     }
-}
-@scope ([data-component~="ui-form-field"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is([slot="label"]) {
+
+    .label {
       color: var(--ui-text-secondary);
       font-size: 0.95rem;
     }
 
-    :where([data-slotted], [data-slotted] *):is([slot="help"]) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    .help {
       color: var(--ui-text-muted);
       font-size: 0.875rem;
       line-height: var(--ui-line-height-md);
     }
 
-    :where([data-slotted], [data-slotted] *):is([slot="error"]),
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component]) {
+/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+
+    .help > :where([data-slotted], [data-slotted] *):is(*) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    }
+
+    .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
       color: var(--ui-accent-active);
       font-size: 0.875rem;

package/styles/ui-grid.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
 :scope {
       --_grid-gap: var(--ui-space-4, 1rem);

package/styles/ui-icon-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -70,6 +70,36 @@
       }
     }
 
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+      :scope {
+        position: relative;
+      }
+
+      :scope::after {
+        content: "";
+        position: absolute;
+        inset: 50% auto auto 50%;
+        inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+        block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :scope {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :scope::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+      block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+      transform: translate(-50%, -50%);
+    }
+
     :scope[data-ui-icon-button-state~="size=sm"] {
       inline-size: var(--ui-icon-button-size-sm, 1.75rem);
       block-size: var(--ui-icon-button-size-sm, 1.75rem);
@@ -126,11 +156,24 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
     :scope:disabled {
-      opacity: 0.6;
+      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
+      color: var(--ui-icon-button-disabled-color, inherit);
       cursor: not-allowed;
     }
 
+    :scope[data-ui-icon-button-state~="variant=outline"]:disabled {
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
+    }
+
+    :scope[data-ui-icon-button-state~="variant=solid"]:disabled {
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
+    }
+
     :scope {
       --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
     }
@@ -158,6 +201,13 @@
     @media (hover: none), (pointer: coarse) {
     }
 
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+    }
+
+    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
+
     :where([data-slotted], [data-slotted] *):is(svg) {
       inline-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
       block-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));

package/styles/ui-icon.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-input.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-menu-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
 :scope {
       display: block;

package/styles/ui-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;

package/styles/ui-popover.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-radio-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-radio.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-reel.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
 :scope {
       --_reel-gap: var(--ui-space-4, 1rem);

package/styles/ui-search-result-row.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
 :scope {
       appearance: none;

package/styles/ui-search-shell.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;
@@ -43,6 +43,13 @@
     .search {
       padding: var(--ui-space-3);
       border-block-end: 1px solid var(--ui-border-default);
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* The search region shows where typing goes, whatever the author put in it. */
+    .search:focus-within {
+      border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
+      box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     .status,
@@ -100,7 +107,9 @@
     }
 }
 @scope ([data-component~="ui-search-shell"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
+/* The search region shows where typing goes, whatever the author put in it. */
+
+    :where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
       box-sizing: border-box;
       inline-size: 100%;
       min-block-size: var(--ui-control-min-block-size);

package/styles/ui-select.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-separator.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
 hr {
       box-sizing: border-box;

package/styles/ui-sidebar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: relative;

package/styles/ui-stack.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
 :scope {
       --_layout-gap: var(--ui-space-4, 1rem);

package/styles/ui-switch.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-switcher.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
 :scope {
       --_switcher-gap: var(--ui-space-4, 1rem);

package/styles/ui-tabs.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;

package/styles/ui-textarea.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-toast-region.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @keyframes ui-toast-enter {
       from {
         opacity: 0;

package/styles/ui-tooltip.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
 :scope {
       position: fixed;

package/styles/ui-top-bar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;

package/styles/ui-tree-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
 :scope {
       --_tree-row-min-height: 32px;
@@ -132,11 +132,16 @@
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
 
+    /* The label spans the row's height and centres its content, so slotted content (a link) can
+       stretch to fill the row as its own hit area; the padding tokens remove the inset. */
     .label {
       grid-column: 3;
       grid-row: 1;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
       min-inline-size: 0;
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-tree-label-padding-block, var(--ui-space-1)) var(--ui-tree-label-padding-inline, var(--ui-space-2));
     }
 
     .actions {
@@ -260,6 +265,9 @@
       flex: none;
     }
 
+    /* The label spans the row's height and centres its content, so slotted content (a link) can
+       stretch to fill the row as its own hit area; the padding tokens remove the inset. */
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/styles/ui-tree.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
 :scope {
       display: block;