@threadlabs/looma 0.26.17 → 0.26.18

package/vue/chunks/UiMenu.js

@@ -6,6 +6,7 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 var _hoisted_1 = [
 	"data-density",
 	"data-for",
+	"data-icons",
 	"data-inline",
 	"data-open",
 	"data-placement",
@@ -27,6 +28,10 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: null,
 			default: ""
 		},
+		icons: {
+			type: null,
+			default: false
+		},
 		inline: {
 			type: null,
 			default: false
@@ -73,6 +78,16 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				description: "ID of the control that toggles and anchors the menu.",
 				default: ""
 			},
+			icons: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "icons" },
+				description: "Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.",
+				default: false
+			},
 			inline: {
 				type: {
 					kind: "terminal",
@@ -119,6 +134,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const acceptedProps = {
 			density: "comfortable",
 			for: "",
+			icons: false,
 			inline: false,
 			open: false,
 			placement: "bottom-start",
@@ -133,6 +149,10 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				kind: "terminal",
 				name: "string"
 			}, false, "for", acceptedProps),
+			icons: checkedProp(props["icons"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "icons", acceptedProps),
 			inline: checkedProp(props["inline"], {
 				kind: "terminal",
 				name: "boolean"
@@ -185,6 +205,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
 			checkedProps.value.size && "size",
 			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+			checkedProps.value.icons && "icons",
 			internalOpen.value && "internalOpen",
 			checkedProps.value.inline && "inline"
 		].filter(Boolean).join(" "));
@@ -231,6 +252,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			propNames: [
 				"density",
 				"for",
+				"icons",
 				"inline",
 				"open",
 				"placement",
@@ -250,6 +272,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, nativeAttrs(_ctx.$attrs), {
 				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
 				"data-for": reflectedProp("for", "for", checkedProps.value.for, void 0, false),
+				"data-icons": reflectedProp("icons", "icons", checkedProps.value.icons, void 0, false),
 				"data-inline": reflectedProp("inline", "inline", checkedProps.value.inline, void 0, false),
 				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
 				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
@@ -263,6 +286,6 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-672d5adf"]]);
+}), [["__scopeId", "data-v-b6bd5ab3"]]);
 //#endregion
 export { UiMenu_default as t };

package/vue/chunks/UiMenuItem.js

@@ -10,32 +10,42 @@ var _hoisted_1 = [
 	"data-checked",
 	"data-disabled",
 	"data-href",
+	"data-tone",
 	"data-type",
 	"data-value",
 	"data-ui-menu-item-state"
 ];
-var _hoisted_2 = { class: "label" };
-var _hoisted_3 = {
+var _hoisted_2 = {
+	class: "icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "label" };
+var _hoisted_4 = {
 	class: "shortcut",
 	"aria-hidden": "true"
 };
-var _hoisted_4 = [
+var _hoisted_5 = [
 	"role",
 	"aria-checked",
 	"aria-disabled",
 	"data-checked",
 	"data-disabled",
 	"data-href",
+	"data-tone",
 	"data-type",
 	"data-value",
 	"data-ui-menu-item-state"
 ];
-var _hoisted_5 = {
+var _hoisted_6 = {
 	class: "indicator",
 	"aria-hidden": "true"
 };
-var _hoisted_6 = { class: "label" };
 var _hoisted_7 = {
+	class: "icon",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = { class: "label" };
+var _hoisted_9 = {
 	class: "shortcut",
 	"aria-hidden": "true"
 };
@@ -65,6 +75,10 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: ""
 		},
+		tone: {
+			type: null,
+			default: "neutral"
+		},
 		type: {
 			type: null,
 			default: "action"
@@ -112,6 +126,17 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "A destination makes an action item a real link, with native navigation and link context actions.",
 				default: ""
 			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Danger identifies a destructive action without changing its behavior.",
+				values: ["neutral", "danger"],
+				default: "neutral"
+			},
 			type: {
 				type: {
 					kind: "terminal",
@@ -143,6 +168,7 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checked: false,
 			disabled: false,
 			href: "",
+			tone: "neutral",
 			type: "action",
 			value: ""
 		};
@@ -159,6 +185,10 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "string"
 			}, false, "href", acceptedProps),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", acceptedProps),
 			type: checkedProp(props["type"], {
 				kind: "terminal",
 				name: "keyword"
@@ -227,7 +257,12 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			})
 		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [checkedProps.value.type && "type", checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.tone && "tone",
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+			checkedProps.value.type && "type",
+			checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`
+		].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["type"] === "checkbox" || detail["type"] === "radio") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -263,6 +298,7 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"checked",
 				"disabled",
 				"href",
+				"tone",
 				"type",
 				"value"
 			],
@@ -298,11 +334,16 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
 				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, true),
 				"data-ui-menu-item-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")]),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "shortcut")])
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]) : withDirectives((openBlock(), createElementBlock("div", mergeProps({
@@ -320,23 +361,25 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
 				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, true),
 				"data-ui-menu-item-state": hostState.value || void 0,
 				ref: "@html-next/root"
 			}), [
-				createElementVNode("span", _hoisted_5, [(checkedProps.value.type === "checkbox" || checkedProps.value.type === "radio") && internalChecked.value ? (openBlock(), createBlock(UiIcon_default, {
+				createElementVNode("span", _hoisted_6, [(checkedProps.value.type === "checkbox" || checkedProps.value.type === "radio") && internalChecked.value ? (openBlock(), createBlock(UiIcon_default, {
 					key: 0,
 					name: "check"
 				})) : createCommentVNode("v-if", true)]),
-				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "default")]),
-				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "shortcut")])
-			], 16, _hoisted_4)), [[unref(vPropValidity), {
+				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "icon")]),
+				createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "shortcut")])
+			], 16, _hoisted_5)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3aab9247"]]);
+}), [["__scopeId", "data-v-32e2a3e1"]]);
 //#endregion
 export { UiMenuItem_default as t };

package/vue/components.css

@@ -6254,7 +6254,7 @@ svg[data-v-219fa683-s] {
 
 /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
    still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-b6bd5ab3] {
   --_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);
@@ -6264,7 +6264,7 @@ svg[data-v-219fa683-s] {
 }
 
 /* Small follows its trigger down: an item's own hooks still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="size=sm"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="size=sm"][data-v-b6bd5ab3] {
   --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
   --_ui-default-menu-item-padding-inline: var(--ui-space-2);
   --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
@@ -6275,7 +6275,10 @@ svg[data-v-219fa683-s] {
   padding: var(--ui-space-1);
   gap: 0;
 }
-[data-component~="ui-menu"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="icons"][data-v-b6bd5ab3] {
+  --_ui-default-menu-icon-display: inline-flex;
+}
+[data-component~="ui-menu"][data-v-b6bd5ab3] {
   --_ui-menu-surface: var(--ui-menu-surface);
   --_ui-menu-border: var(--ui-menu-border);
   --_ui-menu-radius: var(--ui-menu-radius);
@@ -6287,6 +6290,7 @@ svg[data-v-219fa683-s] {
   --_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;
@@ -6301,7 +6305,7 @@ svg[data-v-219fa683-s] {
   box-shadow: none;
   overflow: visible;
 }
-.surface[data-v-672d5adf] {
+.surface[data-v-b6bd5ab3] {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -6318,17 +6322,17 @@ svg[data-v-219fa683-s] {
   max-block-size: inherit;
   overflow: auto;
 }
-.surface hr[data-v-672d5adf] {
+.surface hr[data-v-b6bd5ab3] {
   align-self: stretch;
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
   border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-menu"][data-v-672d5adf]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
+[data-component~="ui-menu"][data-v-b6bd5ab3]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
   display: none;
 }
-[data-component~="ui-menu"][popover][data-v-672d5adf] {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3] {
   position: fixed;
   inset: auto;
   margin: 0;
@@ -6342,21 +6346,21 @@ svg[data-v-219fa683-s] {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-[data-component~="ui-menu"][popover][data-v-672d5adf]:popover-open {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3]:popover-open {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
 @starting-style {
-[data-component~="ui-menu"][popover][data-v-672d5adf]:popover-open {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3]:popover-open {
     opacity: 0;
     transform: translateY(-4px) scale(0.99);
 }
 }
-[data-component~="ui-menu"][hidden][data-v-672d5adf] {
+[data-component~="ui-menu"][hidden][data-v-b6bd5ab3] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-menu"][popover][data-v-672d5adf] {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3] {
     transition: none;
 }
 }
@@ -6401,7 +6405,7 @@ svg[data-v-219fa683-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-menu-item"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-v-32e2a3e1] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -6433,14 +6437,34 @@ svg[data-v-219fa683-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-3aab9247] {
+
+/* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+.icon[data-v-32e2a3e1] {
+  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[data-v-32e2a3e1]:not(:empty) {
+  display: inline-flex;
+}
+.icon svg[data-v-32e2a3e1-s] {
+  inline-size: 100%;
+  block-size: 100%;
+}
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"][data-v-32e2a3e1] {
+  color: var(--ui-danger);
+}
+.label[data-v-32e2a3e1] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }
-.indicator[data-v-3aab9247] {
+.indicator[data-v-32e2a3e1] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6453,39 +6477,39 @@ svg[data-v-219fa683-s] {
   color: var(--ui-surface);
   --_ui-default-icon-size: 0.75rem;
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-32e2a3e1] {
   display: none;
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator[data-v-3aab9247] {
+  .indicator[data-v-32e2a3e1] {
   border-color: var(--ui-accent);
   background: var(--ui-accent);
 }
 
 /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
    as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-32e2a3e1] {
   border-color: transparent;
   color: var(--ui-text-secondary);
 }
-.shortcut[data-v-3aab9247] {
+.shortcut[data-v-32e2a3e1] {
   margin-inline-start: auto;
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
 }
-.shortcut[data-v-3aab9247]:empty {
+.shortcut[data-v-32e2a3e1]:empty {
   display: none;
 }
 
 /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
-.shortcut kbd[data-v-3aab9247-s] {
+.shortcut kbd[data-v-32e2a3e1-s] {
   font: inherit;
 }
 
 /* Keep the text row at the shared control height where cap trimming is available. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-menu-item"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-v-32e2a3e1] {
     min-block-size: var(
       --ui-menu-item-min-block-size,
       var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
@@ -6494,34 +6518,34 @@ svg[data-v-219fa683-s] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-menu-item"][data-v-3aab9247]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][data-v-3aab9247]:focus-visible {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-32e2a3e1] {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-32e2a3e1] {
   border-color: var(--ui-disabled-border);
   background: transparent;
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-3aab9247]::after {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-32e2a3e1]::after {
   background: var(--ui-disabled-text);
 }
 @media (forced-colors: active) {
-[data-component~="ui-menu-item"][data-v-3aab9247]:focus-visible {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:focus-visible {
     outline-color: Highlight;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-3aab9247] {
+[data-component~="ui-menu-item"][hidden][data-v-32e2a3e1] {
   display: none;
 }