@threadlabs/looma 0.12.7 → 0.13.0

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -190,8 +190,8 @@
     }
 
     .handle {
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 14px;
+      --_ui-default-icon-stroke-width: 2;
     }
 
     .handle[data-ui-proximity="near"],
@@ -339,8 +339,8 @@
 
     .selector:hover,
     .cell-menu:hover {
-      background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
-      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
       box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
     }
 
@@ -364,8 +364,8 @@
       display: block;
       width: 14px;
       height: 14px;
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 14px;
+      --_ui-default-icon-stroke-width: 2;
       opacity: 0;
       transform: scale(0.72);
       transition:
@@ -427,8 +427,8 @@
     }
 
     .cell-menu {
-      --ui-icon-size: 15px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 15px;
+      --_ui-default-icon-stroke-width: 2;
     }
 
     :host[hidden] {

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -186,13 +186,13 @@
     }
 
     :host {
-      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     .chevron {
       display: inline-flex;
-      --ui-icon-size: 0.875rem;
+      --_ui-default-icon-size: 0.875rem;
     }
 
     :host .icon-button {

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -8,6 +8,20 @@
   </defs>
   <button type="button" :aria-label="label" :disabled="disabled"><slot></slot></button>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-floating-action-button-inset-block-end {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-floating-action-button-inset-inline-end {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-floating-action-button-z-index {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       position: fixed;
       inset-block-end: calc(var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) + env(safe-area-inset-bottom));

package/components/ui-form-field/ui-form-field.html

@@ -17,7 +17,16 @@
     <div class="error"><slot name="error"></slot></div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-form-field-help-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+
       display: grid;
       gap: var(--ui-space-2);
       min-inline-size: 0;
@@ -45,7 +54,7 @@
     }
 
     .help > :slotted(*) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+      min-block-size: var(--_ui-form-field-help-min-block-size, 0);
     }
 
     /* An error reads in the danger colour, the one the invalid control's border takes. */

package/components/ui-grid/ui-grid.html

@@ -2,13 +2,23 @@
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between cells, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-grid-gap custom property,
-      when set, overrides it.</prop>
+      set on the grid itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="min" type="sm | md | lg"
     >The narrowest a column may get before the grid drops to fewer columns: sm is 12rem (also the default), md is 16rem, and lg is 20rem. The grid fits as many
       equal columns as its width allows, and a single column never overflows a narrower container.</prop>
   </defs>
   <div><slot></slot></div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-grid-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-grid-min {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       --_grid-gap: var(--ui-space-4);
       --_grid-min: 12rem;

package/components/ui-icon/ui-icon.html

@@ -20,17 +20,31 @@
     </svg>
   </span>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
+         sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
+      --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
+
       display: inline-flex;
       flex: none;
-      inline-size: var(--ui-icon-size, 1em);
-      block-size: var(--ui-icon-size, 1em);
+      inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+      block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
     svg {
       inline-size: 100%;
       block-size: 100%;
-      stroke-width: var(--ui-icon-stroke-width, 2);
+      stroke-width: var(--_ui-icon-stroke-width, 2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/components/ui-icon-button/ui-icon-button.html

@@ -16,7 +16,85 @@
   </defs>
   <button :disabled="disabled" type="button" :aria-label="label"><slot></slot></button>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-button-active-scale {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-outline-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-solid-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-icon-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+      --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
       display: inline-flex;
       color: var(--ui-text-secondary);
     }
@@ -198,10 +276,10 @@
     }
 
     :slotted(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));
+      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));
       flex-shrink: 0;
-      stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+      stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/components/ui-input/ui-input.html

@@ -10,22 +10,74 @@
   </defs>
   <input :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid">
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+    @property --ui-input-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-outline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       box-sizing: border-box;
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-input-min-block-size, var(--ui-control-size-md));
+      min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: var(--ui-input-border-width, 1px) solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
-      border-radius: var(--ui-input-radius, var(--ui-radius-md));
-      background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
+        var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
+      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-radius-md)));
+      background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-input-shadow, var(--ui-control-inset));
+      box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -44,26 +96,29 @@
     }
 
     :host:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
+      border-color: var(--ui-input-focus-border, var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
       outline: none;
-      box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+      box-shadow: var(--ui-input-focus-shadow, var(--_ui-default-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-danger-solid)));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
       box-shadow: var(
         --ui-input-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+        var(
+          --_ui-default-input-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+        )
       );
     }
 
@@ -77,7 +132,7 @@
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
       :host:focus-visible {
-        outline: var(--ui-input-focus-outline, 2px solid Highlight);
+        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, 2px solid Highlight));
         outline-offset: 1px;
       }
     }

package/components/ui-input-group/ui-input-group.html

@@ -18,19 +18,20 @@
        thing the field is for ("Continue" after a site's address), so it reads as the field's action
        and not the form's. */
     :host {
-      /* The group's own border and height stand for the input's, so the group is a lone Input's height. */
-      --ui-input-border-width: 0;
-      --ui-input-min-block-size: 0;
-      --ui-input-border: transparent;
-      --ui-input-border-hover: transparent;
-      --ui-input-focus-border: transparent;
-      --ui-input-invalid-border: transparent;
-      --ui-input-invalid-focus-shadow: none;
-      --ui-input-shadow: none;
-      --ui-input-focus-shadow: none;
-      --ui-input-focus-outline: none;
-      --ui-input-radius: 0;
-      --ui-input-surface: transparent;
+      /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+         Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+      --_ui-default-input-border-width: 0;
+      --_ui-default-input-min-block-size: 0;
+      --_ui-default-input-border: transparent;
+      --_ui-default-input-border-hover: transparent;
+      --_ui-default-input-focus-border: transparent;
+      --_ui-default-input-invalid-border: transparent;
+      --_ui-default-input-invalid-focus-shadow: none;
+      --_ui-default-input-shadow: none;
+      --_ui-default-input-focus-shadow: none;
+      --_ui-default-input-focus-outline: none;
+      --_ui-default-input-radius: 0;
+      --_ui-default-input-surface: transparent;
 
       display: flex;
       align-items: stretch;

package/components/ui-list/ui-list.html

@@ -9,6 +9,16 @@
   </defs>
   <ul role="list"><slot></slot></ul>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-list-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-list-min-item-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     /* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */

package/components/ui-list-item/ui-list-item.html

@@ -16,6 +16,24 @@
     <span class="trailing"><slot name="trailing"></slot></span>
   </li>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-list-item-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-list-item-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-list-item-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-list-item-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+
     /* One entry in a list: something to recognise (leading, usually an icon), its name (the default
        slot), one line about it (description), and what it offers (trailing, such as a button or a
        badge). The title and description are one line each and end in an ellipsis, so every item in a
@@ -26,6 +44,9 @@
        a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
        stay their own. */
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
+
       position: relative;
       box-sizing: border-box;
       display: flex;
@@ -74,7 +95,7 @@
 
     .leading {
       color: var(--ui-text-muted);
-      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+      font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
     }
 
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */

package/components/ui-menu/ui-menu.html

@@ -14,17 +14,29 @@
   </defs>
   <div role="menu" aria-orientation="vertical"><div class="surface"><slot></slot></div></div>
   <style>
-    /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
+       still win. */
     :host-state([density="compact"]) {
-      --ui-menu-item-padding-block: var(--ui-space-1);
-      --ui-menu-item-padding-inline: var(--ui-space-2);
-      --ui-menu-item-font-size: var(--ui-font-size-sm);
-      --ui-menu-item-radius: var(--ui-radius-sm);
+      --_ui-default-menu-item-padding-block: var(--ui-space-1);
+      --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+      --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
+      --_ui-default-menu-item-radius: var(--ui-radius-sm);
       padding: var(--ui-space-1);
       gap: 0;
     }
 
     :host {
+      /* A menu nested in a compact one starts again from its own density. */
+      --_ui-default-menu-item-padding-block: initial;
+      --_ui-default-menu-item-padding-inline: initial;
+      --_ui-default-menu-item-font-size: initial;
+      --_ui-default-menu-item-radius: initial;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

package/components/ui-menu-item/ui-menu-item.html

@@ -8,15 +8,42 @@
   </defs>
   <div role="menuitem" tabindex="-1" :aria-disabled="disabled" :data-value="value"><slot></slot></div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-item-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-item-radius {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       display: block;
       box-sizing: border-box;
       width: 100%;
-      padding: var(--ui-menu-item-padding-block, var(--ui-space-2)) var(--ui-menu-item-padding-inline, var(--ui-space-3));
+      padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
+        var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3)));
       text-align: left;
-      border-radius: var(--ui-menu-item-radius, var(--ui-radius-md));
+      border-radius: var(--ui-menu-item-radius, var(--_ui-default-menu-item-radius, var(--ui-radius-md)));
       color: var(--ui-text-primary);
-      font-size: var(--ui-menu-item-font-size, var(--ui-font-size-md));
+      font-size: var(--ui-menu-item-font-size, var(--_ui-default-menu-item-font-size, var(--ui-font-size-md)));
       font-weight: var(--ui-font-medium);
       cursor: pointer;
       outline: none;

package/components/ui-nav-item/ui-nav-item.html

@@ -29,6 +29,20 @@
     </span>
   </button>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-nav-item-current-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-nav-item-indicator-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-nav-item-indicator-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     /* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
        default slot), and an optional line under it (description), such as the record a section
        belongs to. Label and description are one line each and end in an ellipsis, so every item in a

package/components/ui-popover/ui-popover.html

@@ -15,6 +15,12 @@
   </defs>
   <span><div class="surface"><slot></slot></div></span>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-popover-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       box-sizing: border-box;
       max-inline-size: min(

package/components/ui-radio/ui-radio.html

@@ -23,7 +23,20 @@
     </span>
   </label>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-radio-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-radio-size {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-radio-size: var(--ui-radio-size);
+
       display: inline-flex;
       align-items: flex-start;
       gap: var(--ui-radio-gap, var(--ui-space-2));
@@ -57,8 +70,8 @@
 
     input {
       flex: 0 0 auto;
-      inline-size: var(--ui-radio-size, 1.125rem);
-      block-size: var(--ui-radio-size, 1.125rem);
+      inline-size: var(--_ui-radio-size, 1.125rem);
+      block-size: var(--_ui-radio-size, 1.125rem);
       margin: 0.125em 0 0;
       accent-color: var(--ui-accent-solid);
       cursor: pointer;