@threadlabs/looma 0.22.6 → 0.22.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.22.6",
+  "version": "0.22.8",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-menu-item.css

@@ -94,6 +94,8 @@
       display: none;
     }
 
+    /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+
     /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
       :scope {
@@ -145,6 +147,11 @@
     /* 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. */
 
+    /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+    .shortcut :where([data-slotted], [data-slotted] *):is(kbd) {
+      font: inherit;
+    }
+
     /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
     }

package/styles/ui-tooltip.css

@@ -110,9 +110,7 @@
       display: none;
     }
 
-    .shortcut kbd {
-      font: inherit;
-    }
+    /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
 
     :scope[data-ui-tooltip-state~="inverse"] .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
@@ -219,6 +217,11 @@
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
 
+    /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
+    .shortcut :where([data-slotted], [data-slotted] *):is(kbd) {
+      font: inherit;
+    }
+
     /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
      * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 

package/vue/UiMenuItem.vue

@@ -413,6 +413,11 @@ function attribute(value: unknown): any {
   display: none;
 }
 
+/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+.shortcut :slotted(kbd) {
+  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"] {

package/vue/UiTooltip.vue

@@ -432,7 +432,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   display: none;
 }
 
-.shortcut kbd {
+/* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
+.shortcut :slotted(kbd) {
   font: inherit;
 }
 

package/vue/chunks/UiMenuItem.js

@@ -253,7 +253,7 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"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", {}, void 0, true)]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut")])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...checkedProps.value }
 			}]]) : withDirectives((openBlock(), createElementBlock("div", mergeProps({
@@ -280,14 +280,14 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					key: 0,
 					name: "check"
 				})) : createCommentVNode("v-if", true)]),
-				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "shortcut")])
 			], 16, _hoisted_4)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...checkedProps.value }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-66db7524"]]);
+}), [["__scopeId", "data-v-070bbdf2"]]);
 //#endregion
 export { UiMenuItem_default as t };

package/vue/chunks/UiTooltip.js

@@ -254,12 +254,12 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"data-ui-tooltip-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default"), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut")])])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...checkedProps.value }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7648518b"]]);
+}), [["__scopeId", "data-v-07f66486"]]);
 //#endregion
 export { UiTooltip_default as t };

package/vue/components.css

@@ -1484,7 +1484,7 @@ input[data-v-f591bc2c]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tooltip"][data-v-7648518b] {
+[data-component~="ui-tooltip"][data-v-07f66486] {
   /* 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);
@@ -1516,7 +1516,7 @@ input[data-v-f591bc2c]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-7648518b] {
+.surface[data-v-07f66486] {
   --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
   position: relative;
   box-sizing: border-box;
@@ -1537,7 +1537,7 @@ input[data-v-f591bc2c]:focus-visible {
 
 /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
    it. The label stays first in the description, so a screen reader hears the name, then the keys. */
-.shortcut[data-v-7648518b] {
+.shortcut[data-v-07f66486] {
   display: inline-flex;
   align-items: center;
   margin-inline-start: var(--ui-space-2);
@@ -1549,13 +1549,15 @@ input[data-v-f591bc2c]:focus-visible {
   white-space: nowrap;
   vertical-align: baseline;
 }
-.shortcut[data-v-7648518b]:empty {
+.shortcut[data-v-07f66486]:empty {
   display: none;
 }
-.shortcut kbd[data-v-7648518b] {
+
+/* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
+.shortcut kbd[data-v-07f66486-s] {
   font: inherit;
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-7648518b] {
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-07f66486] {
   --_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));
@@ -1563,7 +1565,7 @@ input[data-v-f591bc2c]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-7648518b]::after {
+.surface[data-v-07f66486]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -1579,7 +1581,7 @@ input[data-v-f591bc2c]:focus-visible {
   border-end-end-radius: 1px;
   transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-07f66486]::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -1589,59 +1591,59 @@ input[data-v-f591bc2c]:focus-visible {
   border-end-end-radius: 0;
   border-start-start-radius: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-07f66486]::after {
   inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-07f66486]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-7648518b]::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-07f66486]::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-07f66486]::after {
   inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   inset-block-end: auto;
   border: 0 solid var(--_tooltip-line);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-07f66486]::after {
   inset-inline-start: auto;
   inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
   border-block-start-width: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-7648518b]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-07f66486]::after {
   inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
   border-block-end-width: 1px;
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
-  .surface[data-v-7648518b]::after,
+  .surface[data-v-07f66486]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
-  .surface[data-v-7648518b]::after {
+  .surface[data-v-07f66486]::after {
   inset-block-start: var(--ui-space-3);
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
-  .surface[data-v-7648518b]::after,
+  .surface[data-v-07f66486]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
-  .surface[data-v-7648518b]::after {
+  .surface[data-v-07f66486]::after {
   inset-block-start: auto;
   inset-block-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-7648518b]:popover-open {
+[data-component~="ui-tooltip"][data-v-07f66486]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-7648518b]:popover-open {
+[data-component~="ui-tooltip"][data-v-07f66486]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-7648518b] {
+[data-component~="ui-tooltip"][hidden][data-v-07f66486] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-7648518b] {
+[data-component~="ui-tooltip"][data-v-07f66486] {
     transition: none;
 }
 }
@@ -5374,7 +5376,7 @@ svg[data-v-fee3a5e1-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-menu-item"][data-v-66db7524] {
+[data-component~="ui-menu-item"][data-v-070bbdf2] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -5406,14 +5408,14 @@ svg[data-v-fee3a5e1-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-66db7524] {
+.label[data-v-070bbdf2] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }
-.indicator[data-v-66db7524] {
+.indicator[data-v-070bbdf2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5426,34 +5428,39 @@ svg[data-v-fee3a5e1-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-66db7524] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-070bbdf2] {
   display: none;
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator[data-v-66db7524] {
+  .indicator[data-v-070bbdf2] {
   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-66db7524] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-070bbdf2] {
   border-color: transparent;
   color: var(--ui-text-secondary);
 }
-.shortcut[data-v-66db7524] {
+.shortcut[data-v-070bbdf2] {
   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-66db7524]:empty {
+.shortcut[data-v-070bbdf2]:empty {
   display: none;
 }
 
+/* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
+.shortcut kbd[data-v-070bbdf2-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-66db7524] {
+[data-component~="ui-menu-item"][data-v-070bbdf2] {
     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))
@@ -5462,34 +5469,34 @@ svg[data-v-fee3a5e1-s] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-menu-item"][data-v-66db7524]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+[data-component~="ui-menu-item"][data-v-070bbdf2]: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-66db7524]:focus-visible {
+[data-component~="ui-menu-item"][data-v-070bbdf2]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-66db7524] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-070bbdf2] {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-66db7524] {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-070bbdf2] {
   border-color: var(--ui-disabled-border);
   background: transparent;
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-66db7524]::after {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-070bbdf2]::after {
   background: var(--ui-disabled-text);
 }
 @media (forced-colors: active) {
-[data-component~="ui-menu-item"][data-v-66db7524]:focus-visible {
+[data-component~="ui-menu-item"][data-v-070bbdf2]: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-66db7524] {
+[data-component~="ui-menu-item"][hidden][data-v-070bbdf2] {
   display: none;
 }