@threadlabs/looma 0.26.17 → 0.26.19

package/vue/UiMenuItem.vue

@@ -45,6 +45,14 @@ const propValidityContract = {
         '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', name: 'keyword' },
       required: false,
@@ -68,6 +76,7 @@ const props = defineProps({
   checked: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   href: { type: null as unknown as PropType<string | null>, default: '' },
+  tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
   type: {
     type: null as unknown as PropType<'action' | 'checkbox' | 'radio' | null>,
     default: 'action',
@@ -78,6 +87,7 @@ const acceptedProps: Record<string, unknown> = {
   checked: false,
   disabled: false,
   href: '',
+  tone: 'neutral',
   type: 'action',
   value: '',
 }
@@ -103,6 +113,13 @@ const checkedProps = computed(() => ({
     'href',
     acceptedProps,
   ) as string,
+  tone: checkedProp<'neutral' | 'danger'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'neutral' | 'danger',
   type: checkedProp<'action' | 'checkbox' | 'radio'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
@@ -250,6 +267,8 @@ if (
 /** The values the styles' :host-state() rules test. */
 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(' ')
@@ -296,7 +315,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['checked', 'disabled', 'href', 'type', 'value'],
+  propNames: ['checked', 'disabled', 'href', 'tone', 'type', 'value'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalChecked },
@@ -347,11 +366,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="label"><slot /></span>
+  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
   <div
     v-else
@@ -370,6 +391,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
@@ -379,6 +401,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
         name="check"
       /></span>
+    <span class="icon" aria-hidden="true"><slot name="icon" /></span>
     <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
   </div>
@@ -444,6 +467,29 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     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%;
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"] {
+  color: var(--ui-danger);
+}
+
 .label {
   display: flex;
   align-items: center;

package/vue/chunks/UiEditorTableOverlay.js

@@ -697,144 +697,156 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 					}
 				},
 				hovered: {
-					kind: "object",
-					fields: [
-						{
-							name: "left",
-							type: {
-								kind: "terminal",
-								name: "number"
-							},
-							optional: false
-						},
-						{
-							name: "top",
-							type: {
-								kind: "terminal",
-								name: "number"
+					kind: "union",
+					members: [{
+						kind: "object",
+						fields: [
+							{
+								name: "left",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "width",
-							type: {
-								kind: "terminal",
-								name: "number"
+							{
+								name: "top",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "height",
-							type: {
-								kind: "terminal",
-								name: "number"
+							{
+								name: "width",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "rowIndex",
-							type: {
-								kind: "terminal",
-								name: "integer"
+							{
+								name: "height",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "columnIndex",
-							type: {
-								kind: "terminal",
-								name: "integer"
+							{
+								name: "rowIndex",
+								type: {
+									kind: "terminal",
+									name: "integer"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "rowOffset",
-							type: {
-								kind: "terminal",
-								name: "string"
+							{
+								name: "columnIndex",
+								type: {
+									kind: "terminal",
+									name: "integer"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "columnOffset",
-							type: {
-								kind: "terminal",
-								name: "string"
+							{
+								name: "rowOffset",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
 							},
-							optional: false
-						}
-					],
-					open: false
+							{
+								name: "columnOffset",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
+							}
+						],
+						open: false
+					}, {
+						kind: "terminal",
+						name: "null"
+					}]
 				},
 				active: {
-					kind: "object",
-					fields: [
-						{
-							name: "left",
-							type: {
-								kind: "terminal",
-								name: "number"
-							},
-							optional: false
-						},
-						{
-							name: "top",
-							type: {
-								kind: "terminal",
-								name: "number"
+					kind: "union",
+					members: [{
+						kind: "object",
+						fields: [
+							{
+								name: "left",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "width",
-							type: {
-								kind: "terminal",
-								name: "number"
+							{
+								name: "top",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "height",
-							type: {
-								kind: "terminal",
-								name: "number"
+							{
+								name: "width",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "rowIndex",
-							type: {
-								kind: "terminal",
-								name: "integer"
+							{
+								name: "height",
+								type: {
+									kind: "terminal",
+									name: "number"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "columnIndex",
-							type: {
-								kind: "terminal",
-								name: "integer"
+							{
+								name: "rowIndex",
+								type: {
+									kind: "terminal",
+									name: "integer"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "menuLeft",
-							type: {
-								kind: "terminal",
-								name: "string"
+							{
+								name: "columnIndex",
+								type: {
+									kind: "terminal",
+									name: "integer"
+								},
+								optional: false
 							},
-							optional: false
-						},
-						{
-							name: "menuTop",
-							type: {
-								kind: "terminal",
-								name: "string"
+							{
+								name: "menuLeft",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
 							},
-							optional: false
-						}
-					],
-					open: false
+							{
+								name: "menuTop",
+								type: {
+									kind: "terminal",
+									name: "string"
+								},
+								optional: false
+							}
+						],
+						open: false
+					}, {
+						kind: "terminal",
+						name: "null"
+					}]
 				},
 				activeKey: {
 					kind: "terminal",
@@ -1005,6 +1017,6 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-57feae5c"]]);
+}), [["__scopeId", "data-v-0e632fe0"]]);
 //#endregion
 export { UiEditorTableOverlay_default as t };

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 };