@threadlabs/looma 0.26.17 → 0.26.18

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

@@ -2,6 +2,7 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="icons" type="boolean" default="false">Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.</prop>
     <prop name="size" type="keyword" values="sm, md" default="md"
     >sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the
       standard size.</prop>
@@ -77,6 +78,10 @@
       gap: 0;
     }
 
+    :host([icons]) {
+      --_ui-default-menu-icon-display: inline-flex;
+    }
+
     :host {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
@@ -89,6 +94,7 @@
       --_ui-default-menu-item-radius: initial;
       --_ui-default-menu-item-min-block-size: initial;
       --_ui-default-menu-indicator-size: initial;
+      --_ui-default-menu-icon-display: none;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

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

@@ -10,6 +10,7 @@
     <prop name="type" type="keyword" values="action, checkbox, radio" default="action"
     >An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.</prop>
     <prop name="checked" type="boolean" default="false">Initial or externally controlled checked state of a checkbox or radio item.</prop>
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral">Danger identifies a destructive action without changing its behavior.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -27,6 +28,7 @@
       from:data-value="$value"
       from:href="{ true: null, false: $href }[concat($disabled)]"
     >
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </a>
@@ -41,6 +43,7 @@
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="($type = 'checkbox' or $type = 'radio') and $internalChecked" name="check"></ui-icon>
       </span>
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </div>
@@ -91,6 +94,29 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+    .icon {
+      display: var(--_ui-default-menu-icon-display, none);
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    .icon:not(:empty) {
+      display: inline-flex;
+    }
+
+    .icon :slotted(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    :host([tone="danger"]) {
+      color: var(--ui-danger);
+    }
+
     .label {
       display: flex;
       align-items: center;