@threadlabs/looma 0.12.7 → 0.13.1

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

@@ -9,10 +9,19 @@
     </div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-action-bar-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
     /* 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. */
     :host {
+      /* 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. */
@@ -28,7 +37,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

package/components/ui-avatar/ui-avatar.html

@@ -27,6 +27,24 @@
     <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage" $value="initials"></span>
   </span>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
       display: inline-grid;
       place-items: center;

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

@@ -5,6 +5,8 @@
       the badge.</prop>
     <prop name="label" type="string" default="People"
     >The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.</prop>
+    <prop name="size" type="sm | md" default="md"
+    >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size.</prop>
     <state name="overflowCount" :value="0"></state>
   </defs>
   <div role="group" :aria-label="label">
@@ -14,7 +16,21 @@
       ></template></span>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-avatar-group-edge-ring {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-avatar-group-overlap-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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;
@@ -50,14 +66,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;
     }
 
+    :host-state([size="sm"]) .overflow {
+      margin-inline-start: -0.25rem;
+      inline-size: 1.75rem;
+      block-size: 1.75rem;
+    }
+
     .overflow[hidden] {
       display: none;
     }

package/components/ui-avatar-group/ui-avatar-group.js

@@ -6,9 +6,11 @@ export default function controller(host) {
     const max = Number(host.state.max);
     const visible = Number.isFinite(max) ? Math.max(0, Math.floor(max)) : 0;
     const avatars = Array.from(element.children).filter((child) => child !== host.refs.overflow);
+    // Small avatars overlap less, so their initials stay clear of the next one.
+    const overlap = host.state.size === "sm" ? "-0.25rem" : "-0.5rem";
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
-      avatar.style.marginInlineStart = index === 0 ? "0px" : "-0.5rem";
+      avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;
       avatar.style.borderRadius = "999px";
       // Later avatars cast a crisp shadow back onto the one they overlap; the first overlaps nothing.
       avatar.style.boxShadow = index === 0

package/components/ui-badge/ui-badge.html

@@ -11,6 +11,48 @@
   </defs>
   <span><slot></slot></span>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
       --_badge-surface: var(--ui-surface-subtle);
       --_badge-text: var(--ui-text-secondary);

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

@@ -38,6 +38,76 @@
     <slot></slot>
   </button>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);

package/components/ui-callout/ui-callout.html

@@ -34,7 +34,58 @@
     <div class="content"><slot></slot></div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
+      /* 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);
@@ -60,14 +111,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 {

package/components/ui-checkbox/ui-checkbox.html

@@ -34,7 +34,20 @@
     </span>
   </label>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-checkbox-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-checkbox-size {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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));
@@ -71,8 +84,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);

package/components/ui-cluster/ui-cluster.html

@@ -2,13 +2,19 @@
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem (also the default), m 1rem, l 1.5rem, and xl 2rem. The --ui-cluster-gap custom property,
-      when set, overrides it.</prop>
+      set on the cluster itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="align" type="start | center | end | stretch"
     >How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as
       its row.</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-cluster-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       --_layout-gap: var(--ui-space-3);
       display: flex;

package/components/ui-combobox/ui-combobox.html

@@ -239,7 +239,61 @@
     <div class="authored-options" $ref="options" hidden aria-hidden="true"><slot></slot></div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @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;
+    }
+
     :host {
+      /* 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;
@@ -247,8 +301,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,
@@ -346,7 +400,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;
@@ -381,7 +435,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);
@@ -411,11 +465,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);
@@ -475,7 +529,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")
       );
     }
@@ -485,11 +539,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);
     }
     :host-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);
@@ -498,7 +552,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;

package/components/ui-container/ui-container.html

@@ -2,12 +2,23 @@
   <defs>
     <prop name="measure" type="narrow | wide"
     >The container's maximum width, in characters of the current font: narrow is 45ch, wide is 80ch, and unset is 65ch, a comfortable reading line. The
-      container centres itself when its parent is wider. The --ui-container-measure custom property, when set, overrides it.</prop>
+      container centres itself when its parent is wider. The --ui-container-measure custom property, set on the container itself, overrides it; set on an
+      ancestor, it does nothing.</prop>
     <prop name="gutters" type="s | m | l"
     >Inline padding on both sides, which keeps content off the edges of a narrow screen: s is 0.75rem, m is 1rem (also the default), and l is 1.5rem.</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-container-gutters {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-container-measure {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
       --_container-measure: 65ch;
       --_container-gutters: var(--ui-space-4);

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

@@ -15,7 +15,16 @@
   </defs>
   <span><div class="menu" $ref="menu" role="menu" aria-orientation="vertical"><slot></slot></div></span>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-context-menu-z-index {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* 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;
     }
 
@@ -33,7 +42,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);

package/components/ui-dialog/ui-dialog.html

@@ -22,7 +22,24 @@
     <footer><slot name="actions"></slot></footer>
   </dialog>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-dialog-duration {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-dialog-max-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-dialog-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-dialog-duration: var(--ui-dialog-duration);
+
       position: fixed;
       inset: 0;
       box-sizing: border-box;
@@ -189,14 +206,14 @@
     :host::backdrop {
       background-color: transparent;
       transition:
-        background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-        display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
-        overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+        background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+        overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
     :host[open]::backdrop {
       background-color: var(--ui-overlay-backdrop);
-      animation: ui-dialog-backdrop-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+      animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
     @keyframes ui-dialog-backdrop-enter {

package/components/ui-disclosure/ui-disclosure.html

@@ -26,8 +26,27 @@
     <div class="panel" :id="contentId" :inert="not internalOpen"><div class="panel-inner"><slot></slot></div></div>
   </div>
   <style>
+    /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-disclosure-trigger-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-disclosure-trigger-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-disclosure-trigger-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+
     /* Density resolves into the summary 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-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
+      --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
+      --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
+
       --_trigger-min-block-size: var(--ui-control-size);
       --_trigger-padding-block: var(--ui-space-2);
       --_trigger-padding-inline: var(--ui-space-3);
@@ -55,9 +74,9 @@
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
-      min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
-      padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
-        var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+      min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
       border: 0;
       background: transparent;
       color: inherit;

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

@@ -154,8 +154,8 @@
     }
 
     .icon {
-      --ui-icon-size: 1rem;
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: 1rem;
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     .body {

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -91,8 +91,8 @@
     }
 
     :host button {
-      --ui-icon-size: 1rem;
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: 1rem;
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     :host button:hover:not(:disabled) {