@threadlabs/looma 0.12.7 → 0.13.1

package/styles/ui-switch.css

@@ -1,6 +1,24 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-switch-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-switch-track-height {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-switch-track-width {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-switch-track-width: var(--ui-switch-track-width);
+      --_ui-switch-track-height: var(--ui-switch-track-height);
+
       display: inline-flex;
       align-items: flex-start;
       gap: var(--ui-switch-gap, var(--ui-space-2));
@@ -37,8 +55,8 @@
       -webkit-appearance: none;
       position: relative;
       flex: 0 0 auto;
-      width: var(--ui-switch-track-width, 2.5rem);
-      height: var(--ui-switch-track-height, 1.5rem);
+      width: var(--_ui-switch-track-width, 2.5rem);
+      height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
       border-radius: 999px;
@@ -99,7 +117,9 @@
     }
 }
 @scope ([data-component~="ui-switch"]) to ([data-component]) {
-/* The label, and under it an optional line saying what the choice means. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* The label, and under it an optional line saying what the choice means. */
 
     @media (prefers-reduced-motion: reduce) {
     }

package/styles/ui-switcher.css

@@ -1,6 +1,19 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-switcher-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-switcher-threshold {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-switcher-threshold: var(--ui-switcher-threshold);
+
       --_switcher-gap: var(--ui-space-4);
       display: flex;
       flex-wrap: wrap;
@@ -41,20 +54,22 @@
     }
 }
 @scope ([data-component~="ui-switcher"]) to ([data-component]) {
-:scope > :where([data-slotted], [data-slotted] *):is(*) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope > :where([data-slotted], [data-slotted] *):is(*) {
       min-inline-size: 0;
       flex-grow: 1;
       /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
-      flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
     }
     :scope[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
     }
     :scope[data-ui-switcher-state~="threshold=md"] > :where([data-slotted], [data-slotted] *):is(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
     }
     :scope[data-ui-switcher-state~="threshold=lg"] > :where([data-slotted], [data-slotted] *):is(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-tabs.css

@@ -1,7 +1,26 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-tabs-tab-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tabs-tab-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tabs-tab-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
-/* Density resolves into the tab row's own values; the public tokens still override them. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the tab row's own values; the public tokens still override them. */
     :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
+      --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
+      --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+
       --_tab-min-block-size: var(--ui-control-size);
       --_tab-padding-block: var(--ui-space-2);
       --_tab-padding-inline: var(--ui-space-3);
@@ -37,9 +56,9 @@
     }
 
     .list button {
-      min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
+      min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
       margin: 0 0 -1px;
-      padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+      padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
       border: 0;
       border-block-end: 2px solid transparent;
       background: transparent;
@@ -129,7 +148,9 @@
     }
 }
 @scope ([data-component~="ui-tabs"]) to ([data-component]) {
-/* Density resolves into the tab row's own values; the public tokens still override them. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the tab row's own values; the public tokens still override them. */
 
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.

package/styles/ui-textarea.css

@@ -1,6 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-textarea-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-textarea-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-textarea-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       box-sizing: border-box;
       display: inline-block;
       inline-size: 100%;
@@ -69,7 +83,9 @@
     }
 }
 @scope ([data-component~="ui-textarea"]) to ([data-component]) {
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 

package/styles/ui-toast-region.css

@@ -1,4 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-toast-region-enter-duration {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-toast-region-exit-duration {
+      syntax: "*";
+      inherits: false;
+    }
 @keyframes ui-toast-enter {
       from {
         opacity: 0;
@@ -20,7 +28,13 @@
       }
     }
 @scope ([data-component~="ui-toast-region"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+      --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
       position: fixed;
       top: calc(var(--ui-space-4) + env(safe-area-inset-top));
       right: auto;
@@ -58,12 +72,12 @@
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-      animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+      animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
+      animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 
@@ -89,7 +103,9 @@
     }
 }
 @scope ([data-component~="ui-toast-region"]) to ([data-component]) {
-:scope > .toast,
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope > .toast,
     :scope > :where([data-slotted], [data-slotted] *):is(*) {
       pointer-events: auto;
     }

package/styles/ui-tooltip.css

@@ -1,6 +1,55 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-tooltip-arrow-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-inverse-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-inverse-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-max-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tooltip-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-tooltip-border: var(--ui-tooltip-border);
+      --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
+      --_ui-tooltip-radius: var(--ui-tooltip-radius);
+      --_ui-tooltip-surface: var(--ui-tooltip-surface);
+      --_ui-tooltip-text: var(--ui-tooltip-text);
+      --_ui-tooltip-shadow: var(--ui-tooltip-shadow);
+      --_ui-tooltip-inverse-surface: var(--ui-tooltip-inverse-surface);
+      --_ui-tooltip-inverse-text: var(--ui-tooltip-inverse-text);
+      --_ui-tooltip-arrow-size: var(--ui-tooltip-arrow-size);
+
       position: fixed;
       inset: auto;
       margin: 0;
@@ -23,25 +72,25 @@
     }
 
     .surface {
-      --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
+      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-border-default));
       position: relative;
       box-sizing: border-box;
-      max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
+      max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
-      background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
-      color: var(--ui-tooltip-text, var(--ui-text-primary));
+      border-radius: var(--_ui-tooltip-radius, var(--ui-radius-sm));
+      background: var(--_ui-tooltip-surface, var(--ui-surface-elevated));
+      color: var(--_ui-tooltip-text, var(--ui-text-primary));
       padding: var(--ui-space-1) var(--ui-space-2);
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
-      box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+      box-shadow: var(--_ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
     }
 
     :scope[data-ui-tooltip-state~="inverse"] .surface {
-      --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
-      background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
-      color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
+      --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+      background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+      color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
     }
 
     /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
@@ -51,9 +100,9 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
-      inline-size: var(--ui-tooltip-arrow-size, 0.5rem);
-      block-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inline-size: var(--_ui-tooltip-arrow-size, 0.5rem);
+      block-size: var(--_ui-tooltip-arrow-size, 0.5rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
@@ -64,7 +113,7 @@
     }
 
     :is(:scope[data-ui-tooltip-state~="placement=bottom"], :scope[data-ui-tooltip-state~="placement=bottom-start"], :scope[data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
-      inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
@@ -102,7 +151,9 @@
     }
 }
 @scope ([data-component~="ui-tooltip"]) to ([data-component]) {
-/* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
      * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 
     @starting-style {

package/styles/ui-top-bar.css

@@ -1,6 +1,39 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-top-bar-actions-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-height {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-top-bar-z-index {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
+
       position: sticky;
       inset-block-start: 0;
       z-index: var(--ui-top-bar-z-index, 100);
@@ -24,7 +57,7 @@
     }
 
     .actions {
-      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
+      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
     }
 
     .title {
@@ -45,7 +78,9 @@
     }
 }
 @scope ([data-component~="ui-top-bar"]) to ([data-component]) {
-/* An unused region takes no space, so it adds no gap. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* An unused region takes no space, so it adds no gap. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-tree-item.css

@@ -1,4 +1,24 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-tree-item-depth {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-item-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-item-label-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-item-label-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
 @keyframes ui-tree-item-marquee {
       from {
         transform: translateX(0);
@@ -9,14 +29,23 @@
       }
     }
 @scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. The tree's density
+         sets the defaults, in --_ui-default-*. */
+      --_ui-tree-item-min-block-size: var(--ui-tree-item-min-block-size, var(--_ui-default-tree-item-min-block-size));
+      --_ui-tree-item-font-size: var(--ui-tree-item-font-size, var(--_ui-default-tree-item-font-size));
+      --_ui-tree-item-label-padding-block: var(--ui-tree-item-label-padding-block, var(--_ui-default-tree-item-label-padding-block));
+      --_ui-tree-item-label-padding-inline: var(--ui-tree-item-label-padding-inline);
+
       --_tree-row-min-height: 32px;
       --_tree-disclosure-size: 16px;
 
       position: relative;
       display: block;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--_ui-tree-indent, 16px));
     }
 
     .row {
@@ -24,9 +53,9 @@
       display: grid;
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
       align-items: center;
-      min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
+      min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
+      font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-secondary);
       transition:
@@ -63,7 +92,7 @@
     /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
     :scope[data-drop-position="inside"] > .row {
       background: var(--ui-accent-subtle);
-      box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
+      box-shadow: inset 0 0 0 1px var(--_ui-tree-drop-color, var(--ui-accent-solid));
     }
 
     .disclosure,
@@ -158,7 +187,7 @@
       min-inline-size: 0;
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
-      padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
       column-gap: var(--ui-space-3);
@@ -215,11 +244,11 @@
        under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
       margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
-      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2)));
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
         transparent calc(var(--_marquee-lead, 0px) / 2),
-        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
+        #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -229,7 +258,7 @@
       mask-image: linear-gradient(
         to left,
         transparent calc(var(--_marquee-lead, 0px) / 2),
-        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
+        #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -332,7 +361,7 @@
       display: none;
       block-size: 2px;
       border-radius: 999px;
-      background: var(--ui-tree-drop-color, var(--ui-accent-solid));
+      background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
     }
 
@@ -343,7 +372,7 @@
       inset-block-start: 50%;
       inline-size: 7px;
       block-size: 7px;
-      border: 2px solid var(--ui-tree-drop-color, var(--ui-accent-solid));
+      border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
       border-radius: 999px;
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
@@ -392,7 +421,9 @@
     }
 }
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
-/* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
 

package/styles/ui-tree.css

@@ -1,18 +1,41 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-tree-drop-color {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-gutter {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-tree-indent {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
-/* Reaches the items the way density does, so the setting lives on the tree the way a reader
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Reaches the items the way density does, so the setting lives on the tree the way a reader
        thinks about it: this list scrolls its long names. */
     :scope[data-ui-tree-state~="marquee"] {
-      --ui-tree-item-marquee: 1;
+      --_ui-default-tree-item-marquee: 1;
     }
 
+    /* The items' defaults for this density: an item's own hook still wins. */
     :scope[data-ui-tree-state~="density=compact"] {
-      --ui-tree-item-min-block-size: var(--ui-control-size-sm);
-      --ui-tree-item-font-size: var(--ui-font-size-sm);
-      --ui-tree-item-label-padding-block: 0;
+      --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
+      --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
+      --_ui-default-tree-item-label-padding-block: 0;
     }
 
     :scope {
+      /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
+         starts again from its own settings. */
+      --_ui-tree-indent: var(--ui-tree-indent);
+      --_ui-tree-drop-color: var(--ui-tree-drop-color);
+      --_ui-default-tree-item-marquee: initial;
+      --_ui-default-tree-item-min-block-size: initial;
+      --_ui-default-tree-item-font-size: initial;
+      --_ui-default-tree-item-label-padding-block: initial;
       display: block;
       min-inline-size: 0;
       padding-inline-start: var(--ui-tree-gutter, 0px);
@@ -24,8 +47,12 @@
     }
 }
 @scope ([data-component~="ui-tree"]) to ([data-component]) {
-/* Reaches the items the way density does, so the setting lives on the tree the way a reader
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Reaches the items the way density does, so the setting lives on the tree the way a reader
        thinks about it: this list scrolls its long names. */
 
+    /* The items' defaults for this density: an item's own hook still wins. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiAvatarGroup.d.ts

@@ -8,6 +8,7 @@ export interface UiAvatarGroupElement extends HTMLDivElement {
 export interface UiAvatarGroupProps {
   label?: string | null;
   max?: number | null;
+  size?: "sm" | "md" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiAvatarGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";
 
-const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;