@threadlabs/looma 0.12.6 → 0.13.0

package/components/ui-reel/ui-reel.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-reel-gap custom property,
-      when set, overrides it.</prop>
+      set on the reel itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="itemWidth" type="sm | md | lg"
     >A fixed width for every item: sm is 12rem, md is 16rem, and lg is 20rem. Unset, each item keeps its content's width. Items never shrink to fit, so the reel
       scrolls sideways once they overflow.</prop>
@@ -12,7 +12,20 @@
   </defs>
   <div role="region" tabindex="0"><slot></slot></div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-reel-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-reel-item-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-reel-item-width: var(--ui-reel-item-width);
+
       --_reel-gap: var(--ui-space-4);
       --_reel-item-width: auto;
       display: flex;
@@ -52,7 +65,7 @@
 
     :host > :slotted(*) {
       min-inline-size: 0;
-      flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
+      flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
     }
 
     :host-state([gap="xs"]) {

package/components/ui-search-result-row/ui-search-result-row.html

@@ -15,6 +15,40 @@
     <span class="trailing"><slot name="trailing"></slot></span>
   </button>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-search-result-row-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-min-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-selected-bg {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-result-row-surface {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       appearance: none;
       inline-size: 100%;

package/components/ui-search-shell/ui-search-shell.html

@@ -21,22 +21,76 @@
     </dialog>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-search-shell-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-focus-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-max-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-max-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-padding-top {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-search-shell-z-index {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
+      --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
+      --_ui-search-shell-viewport-gap: var(--ui-search-shell-viewport-gap);
+      --_ui-search-shell-max-width: var(--ui-search-shell-max-width);
+      --_ui-search-shell-max-height: var(--ui-search-shell-max-height);
+      --_ui-search-shell-surface: var(--ui-search-shell-surface);
+      --_ui-search-shell-border: var(--ui-search-shell-border);
+      --_ui-search-shell-radius: var(--ui-search-shell-radius);
+      --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
+      --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
+
       display: contents;
     }
 
     dialog {
       position: fixed;
       inset: 0;
-      z-index: var(--ui-search-shell-z-index, 400);
+      z-index: var(--_ui-search-shell-z-index, 400);
       box-sizing: border-box;
       inline-size: 100%;
       max-inline-size: none;
       block-size: 100%;
       max-block-size: none;
       margin: 0;
-      padding: var(--ui-search-shell-padding-top, 10vh) var(--ui-search-shell-viewport-gap, var(--ui-space-4))
-        var(--ui-search-shell-viewport-gap, var(--ui-space-4));
+      padding: var(--_ui-search-shell-padding-top, 10vh) var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
+        var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
       overflow: auto;
       border: 0;
       background: var(--ui-overlay-backdrop);
@@ -51,14 +105,14 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      inline-size: min(100%, var(--ui-search-shell-max-width, 40rem));
-      max-block-size: var(--ui-search-shell-max-height, 80vh);
+      inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
+      max-block-size: var(--_ui-search-shell-max-height, 80vh);
       margin-inline: auto;
       overflow: hidden;
-      background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
-      border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
-      border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
-      box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+      background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
+      border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
+      border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
+      box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
     }
 
     .search {
@@ -69,8 +123,8 @@
 
     /* 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));
+      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));
     }
 
     :slotted(input[slot="search"]) {

package/components/ui-select/ui-select.html

@@ -9,6 +9,20 @@
   </defs>
   <select :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-select-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-select-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-select-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       box-sizing: border-box;
       display: inline-block;
@@ -69,7 +83,7 @@
 
     :host:disabled {
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }

package/components/ui-separator/ui-separator.html

@@ -5,7 +5,14 @@
   </defs>
   <hr :aria-orientation="orientation">
   <style>
-    hr {
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-separator-color {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
+    :host {
       box-sizing: border-box;
       align-self: stretch;
       margin: 0;
@@ -13,7 +20,7 @@
       border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
     }
 
-    hr[aria-orientation="vertical"] {
+    :host[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
       border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));

package/components/ui-sidebar/ui-sidebar.html

@@ -31,7 +31,28 @@
     </div>
   </aside>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-sidebar-backdrop {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-sidebar-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-sidebar-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-sidebar-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+
       position: relative;
       box-sizing: border-box;
       display: flex;
@@ -184,7 +205,7 @@
     }
 
     :host[popover]::backdrop {
-      background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+      background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
     }
 
     @media (prefers-reduced-motion: reduce) {

package/components/ui-stack/ui-stack.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,
-      when set, overrides it.</prop>
+      set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="align" type="start | center | end | stretch"
     >How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the
       start, in the middle, or against the end.</prop>
@@ -12,6 +12,12 @@
   </defs>
   <div><slot></slot></div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-stack-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       --_layout-gap: var(--ui-space-4);
       display: flex;

package/components/ui-switch/ui-switch.html

@@ -20,7 +20,25 @@
     </span>
   </label>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-switch-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-switch-track-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-switch-track-width {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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));
@@ -57,8 +75,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;
@@ -98,7 +116,7 @@
     }
 
     :host-state([disabled]) {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
     :host-state([disabled]) input {

package/components/ui-switcher/ui-switcher.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom
-      property, when set, overrides it.</prop>
+      property, set on the switcher itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="threshold" type="xs | sm | md | lg"
     >The container width at which items switch between a row and a stack: wider, they all sit side by side; narrower, each takes the full width. xs is 20rem, sm
       is 30rem (also the default), md is 45rem, and lg is 60rem.</prop>
@@ -12,7 +12,20 @@
   </defs>
   <div><slot></slot></div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-switcher-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-switcher-threshold {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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;
@@ -26,7 +39,7 @@
       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);
     }
 
     :host-state([gap="xs"]) {
@@ -45,13 +58,13 @@
       --_switcher-gap: var(--ui-space-6);
     }
     :host-state([threshold="xs"]) > :slotted(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
     }
     :host-state([threshold="md"]) > :slotted(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
     }
     :host-state([threshold="lg"]) > :slotted(*) {
-      flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+      flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
     }
     :host-state([align="start"]) {
       align-items: flex-start;

package/components/ui-tabs/ui-tabs.html

@@ -32,8 +32,27 @@
     <div class="panels" $ref="panels"><slot></slot></div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     /* Density resolves into the tab row's own values; the public tokens still override them. */
     :host {
+      /* 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);
@@ -69,9 +88,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;

package/components/ui-textarea/ui-textarea.html

@@ -11,6 +11,20 @@
   </defs>
   <textarea :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid" :rows="rows"></textarea>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-textarea-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       box-sizing: border-box;
       display: inline-block;
@@ -69,7 +83,7 @@
 
     :host:disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }

package/components/ui-toast-region/ui-toast-region.html

@@ -29,7 +29,21 @@
     </div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-toast-region-enter-duration {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-toast-region-exit-duration {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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;
@@ -72,12 +86,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;
     }
 

package/components/ui-tooltip/ui-tooltip.html

@@ -21,7 +21,56 @@
   </defs>
   <span role="tooltip" :hidden="not internalOpen"><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-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;
+    }
+
     :host {
+      /* 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;
@@ -44,25 +93,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)));
     }
 
     :host-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
@@ -72,9 +121,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);
@@ -85,7 +134,7 @@
     }
 
     :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-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;

package/components/ui-top-bar/ui-top-bar.html

@@ -6,7 +6,40 @@
     <div class="actions"><slot name="actions"></slot></div>
   </header>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
+      /* 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);
@@ -30,7 +63,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 {