@threadlabs/looma 0.12.7 → 0.13.1

package/package.json

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

package/styles/ui-action-bar.css

@@ -1,9 +1,18 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-action-bar-gap {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-action-bar"]) to ([data-component], [data-slotted]) {
-/* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
        edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
        row. The bar arranges its actions and leaves their look to them. */
     :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-action-bar-gap: var(--ui-action-bar-gap);
+
       --_gap: var(--ui-space-2);
       display: block;
       /* A size container sizes itself from its container, never its content. */
@@ -19,7 +28,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: var(--ui-action-bar-gap, var(--_gap));
+      gap: var(--_ui-action-bar-gap, var(--_gap));
     }
 
     /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
@@ -61,7 +70,9 @@
     }
 }
 @scope ([data-component~="ui-action-bar"]) to ([data-component]) {
-/* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
        edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
        row. The bar arranges its actions and leaves their look to them. */
 

package/styles/ui-avatar-group.css

@@ -1,6 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-avatar-group-edge-ring {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-avatar-group-overlap-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-avatar-group"]) 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-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;
@@ -27,14 +41,20 @@
       background: var(--ui-surface-elevated);
       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-overlap-shadow, var(--_overlap-shadow)),
+        var(--_ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
       font-size: var(--ui-font-size-xs);
       font-weight: 600;
       flex-shrink: 0;
     }
 
+    :scope[data-ui-avatar-group-state~="size=sm"] .overflow {
+      margin-inline-start: -0.25rem;
+      inline-size: 1.75rem;
+      block-size: 1.75rem;
+    }
+
     .overflow[hidden] {
       display: none;
     }
@@ -45,7 +65,9 @@
     }
 }
 @scope ([data-component~="ui-avatar-group"]) to ([data-component]) {
-/* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :where([data-slotted], [data-slotted] *):is(*) {
       margin-inline-start: -0.5rem;

package/styles/ui-avatar.css

@@ -1,6 +1,24 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-avatar-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-avatar-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-avatar-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-avatar-active-ring {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       display: inline-grid;
       place-items: center;
       overflow: hidden;
@@ -61,7 +79,9 @@
     }
 }
 @scope ([data-component~="ui-avatar"]) to ([data-component]) {
-/* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
 
     .image,

package/styles/ui-badge.css

@@ -1,6 +1,48 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-badge-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-font-weight {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-line-height {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-point {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-badge-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       --_badge-surface: var(--ui-surface-subtle);
       --_badge-text: var(--ui-text-secondary);
       /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
@@ -120,7 +162,9 @@
     }
 }
 @scope ([data-component~="ui-badge"]) to ([data-component]) {
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
      * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
      * replaces, still sizes to its label rather than filling its container. */
     @supports (text-box-trim: trim-both) {

package/styles/ui-button.css

@@ -1,6 +1,76 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-ghost-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-ghost-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-ghost-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-link-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-link-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-button-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -276,7 +346,9 @@
     }
 }
 @scope ([data-component~="ui-button"]) to ([data-component]) {
-@supports (text-box-trim: trim-both) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    @supports (text-box-trim: trim-both) {
     }
 
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that

package/styles/ui-callout.css

@@ -1,6 +1,57 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-callout-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-icon {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-icon-column {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-leading-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-callout-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-callout"]) 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-callout-icon-column: var(--ui-callout-icon-column);
+      --_ui-callout-icon: var(--ui-callout-icon);
+      --_ui-callout-icon-size: var(--ui-callout-icon-size);
+
       --_callout-surface: var(--ui-info-soft);
       --_callout-border: var(--ui-info-solid);
       --_callout-icon: var(--ui-info-solid);
@@ -26,14 +77,14 @@
     .icon {
       display: grid;
       place-items: center;
-      inline-size: var(--ui-callout-icon-column, 1.125rem);
+      inline-size: var(--_ui-callout-icon-column, 1.125rem);
       block-size: 1lh;
-      color: var(--ui-callout-icon, var(--_callout-icon));
+      color: var(--_ui-callout-icon, var(--_callout-icon));
     }
 
     .icon svg {
-      inline-size: var(--ui-callout-icon-size, 1.125rem);
-      block-size: var(--ui-callout-icon-size, 1.125rem);
+      inline-size: var(--_ui-callout-icon-size, 1.125rem);
+      block-size: var(--_ui-callout-icon-size, 1.125rem);
     }
 
     .content {
@@ -72,7 +123,9 @@
     }
 }
 @scope ([data-component~="ui-callout"]) to ([data-component]) {
-/* One line box tall, so the icon centres on the first line of text. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* One line box tall, so the icon centres on the first line of text. */
 
     /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
     .content :where([data-slotted], [data-slotted] *):is(a) {

package/styles/ui-checkbox.css

@@ -1,6 +1,19 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-checkbox-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-checkbox-size {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-checkbox"]) 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-checkbox-size: var(--ui-checkbox-size);
+
       display: inline-flex;
       align-items: flex-start;
       gap: var(--ui-checkbox-gap, var(--ui-space-2));
@@ -37,8 +50,8 @@
       -webkit-appearance: none;
       position: relative;
       flex: 0 0 auto;
-      inline-size: var(--ui-checkbox-size, 1.125rem);
-      block-size: var(--ui-checkbox-size, 1.125rem);
+      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-radius: var(--ui-radius-sm);
@@ -113,7 +126,9 @@
     }
 }
 @scope ([data-component~="ui-checkbox"]) 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. */
 
     /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
 

package/styles/ui-cluster.css

@@ -1,6 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-cluster-gap {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       --_layout-gap: var(--ui-space-3);
       display: flex;
       flex-wrap: wrap;
@@ -42,5 +48,7 @@
     }
 }
 @scope ([data-component~="ui-cluster"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-combobox.css

@@ -1,6 +1,60 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-combobox-affordance-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-item-input-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-item-item-max-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-label-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-label-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-max-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-message-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-option-check {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-combobox-option-text {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-combobox"]) 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-combobox-label-text: var(--ui-combobox-label-text);
+      --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
+      --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
+      --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
+      --_ui-combobox-option-text: var(--ui-combobox-option-text);
+      --_ui-combobox-message-text: var(--ui-combobox-message-text);
+      --_ui-combobox-option-check: var(--ui-combobox-option-check);
+      --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
+      --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
+      --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+
       display: grid;
       gap: var(--ui-space-1);
       min-inline-size: 0;
@@ -8,8 +62,8 @@
       font: inherit;
     }
     label {
-      color: var(--ui-combobox-label-text, var(--ui-text-primary));
-      font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
+      color: var(--_ui-combobox-label-text, var(--ui-text-primary));
+      font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
       font-weight: 500;
     }
     /* The field and anything that annotates it sit on one row; the help button is beside the box,
@@ -107,7 +161,7 @@
       border: 0;
       border-radius: var(--ui-radius-md);
       background: transparent;
-      color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
+      color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
       font: inherit;
       font-weight: 400;
       min-inline-size: 2rem;
@@ -142,7 +196,7 @@
       box-sizing: border-box;
       min-inline-size: 12rem;
       max-inline-size: calc(100vw - 1rem);
-      max-block-size: var(--ui-combobox-max-block-size, 18rem);
+      max-block-size: var(--_ui-combobox-max-block-size, 18rem);
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
@@ -172,11 +226,11 @@
     }
     .primary {
       display: block;
-      color: var(--ui-combobox-option-text, var(--ui-text-primary));
+      color: var(--_ui-combobox-option-text, var(--ui-text-primary));
       font-weight: 500;
     }
     .message, .group {
-      color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+      color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
       font-weight: 400;
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
@@ -236,7 +290,7 @@
       border-color: var(--ui-accent-solid);
       background-color: var(--ui-accent-solid);
       background-image: var(
-        --ui-combobox-option-check,
+        --_ui-combobox-option-check,
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
       );
     }
@@ -246,11 +300,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: var(--ui-space-1);
-      min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
+      min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
     :scope[data-ui-combobox-state~="multiple"] input {
-      flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
+      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);
@@ -259,7 +313,7 @@
       appearance: none;
       display: inline-flex;
       min-inline-size: 0;
-      max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
+      max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
       padding: 0;
       border: 0;
@@ -283,7 +337,8 @@
     }
 }
 @scope ([data-component~="ui-combobox"]) to ([data-component]) {
-/* The field and anything that annotates it sit on one row; the help button is beside the box,
+/* This component's hooks style the element they are set on, and never a nested one. */
+    /* The field and anything that annotates it sit on one row; the help button is beside the box,
        not inside it, because a control's box holds its value. */
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     @media (pointer: coarse) {

package/styles/ui-container.css

@@ -1,6 +1,16 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-container-gutters {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-container-measure {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       --_container-measure: 65ch;
       --_container-gutters: var(--ui-space-4);
       display: block;
@@ -32,5 +42,7 @@
     }
 }
 @scope ([data-component~="ui-container"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-context-menu.css

@@ -1,6 +1,15 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-context-menu-z-index {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-context-menu"]) 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-context-menu-z-index: var(--ui-context-menu-z-index);
+
       display: contents;
     }
 
@@ -18,7 +27,7 @@
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       outline: 0;
       overflow: auto;
-      z-index: var(--ui-context-menu-z-index, 1000);
+      z-index: var(--_ui-context-menu-z-index, 1000);
       min-width: 12rem;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
@@ -58,7 +67,9 @@
     }
 }
 @scope ([data-component~="ui-context-menu"]) to ([data-component]) {
-@starting-style {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    @starting-style {
     }
 
     @media (prefers-reduced-motion: reduce) {