@threadlabs/looma 0.26.24 → 0.26.26

package/package.json

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

package/styles/ui-icon-button.css

@@ -135,6 +135,13 @@
       pointer-events: none;
     }
 
+    :scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+      inline-size: 2px;
+      block-size: 20px;
+      background: var(--ui-border-strong);
+      opacity: 1;
+    }
+
     :scope[data-ui-icon-button-state~="anticipatory"]:disabled::before {
       opacity: 0;
     }
@@ -189,7 +196,7 @@
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
+        scale var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     @media (hover: none), (pointer: coarse) {
@@ -319,7 +326,7 @@
     }
 
     :scope:active:enabled:not([aria-disabled="true"]) {
-      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+      scale: var(--ui-icon-button-active-scale, 0.96);
     }
 
     :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {

package/vanilla/UiIconButton.d.ts

@@ -8,6 +8,7 @@ export interface UiIconButtonElement extends HTMLButtonElement {
 export interface UiIconButtonProps {
   anticipatory?: boolean | null;
   disabled?: boolean | null;
+  guide?: "dot" | "bar" | null;
   label?: string | null;
   loading?: boolean | null;
   matchButton?: boolean | null;

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button" };
-const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, ["matchButton"], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -45,35 +45,35 @@ export function createUiIconButton(options = {}, html) {
       const s0 = toAttribute(x0, "disabled");
       if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
     }
-    if (c & 4) {
-      const x1 = v[2];
+    if (c & 8) {
+      const x1 = v[3];
       const s1 = toAttribute(x1, "aria-label");
       if (s1 !== r.v1) writeAttribute(r.n, "aria-label", r.v1 = s1);
     }
-    if (c & 16) {
-      const x2 = v[4];
+    if (c & 32) {
+      const x2 = v[5];
       const s2 = toAttribute(x2, "data-match-button");
       if (s2 !== r.v2) writeAttribute(r.n, "data-match-button", r.v2 = s2);
     }
-    if (c & 1073741864) {
-      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[3]) || truthy(v[5]))]));
+    if (c & 1073741904) {
+      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[4]) || truthy(v[6]))]));
       if (x3 !== NONCONFORMING) {
         const s3 = toAttribute(x3, "aria-disabled");
         if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
       }
     }
-    if (c & 40) {
-      const x4 = (truthy(v[3]) || truthy(v[5]));
+    if (c & 80) {
+      const x4 = (truthy(v[4]) || truthy(v[6]));
       const s4 = toAttribute(x4, "aria-busy");
       if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
     }
-    if (c & 1017) {
-      const x5 = hostState(["tone","anticipatory","variant","loading","pending","size","matchButton","round"], [v[8], v[0], v[9], v[3], v[5], v[7], v[4], v[6]]);
+    if (c & 2037) {
+      const x5 = hostState(["tone","anticipatory","guide","variant","loading","pending","size","matchButton","round"], [v[9], v[0], v[2], v[10], v[4], v[6], v[8], v[5], v[7]]);
       const s5 = x5;
       if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
     }
-    if (c & 40) {
-      const t0 = (truthy(v[3]) || truthy(v[5]));
+    if (c & 80) {
+      const t0 = (truthy(v[4]) || truthy(v[6]));
       if (true) {
         {
           r.b0 = undefined;

package/vue/UiIconButton.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    guide: {
+        type: PropType<"dot" | "bar" | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: null;
@@ -53,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    guide: {
+        type: PropType<"dot" | "bar" | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: null;
@@ -87,6 +95,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     label: string | null;
+    guide: "bar" | "dot" | null;
     round: boolean | null;
     size: "sm" | "md" | "lg" | null;
     tone: "neutral" | "accent" | null;

package/vue/UiIconButton.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
         'Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.',
       default: false,
     },
+    guide: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'guide' },
+      description:
+        'The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or\n      keyboard focus; touch always shows the icon.',
+      values: ['dot', 'bar'],
+      default: 'dot',
+    },
     label: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -93,6 +102,7 @@ const propValidityContract = {
 const props = defineProps({
   anticipatory: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  guide: { type: null as unknown as PropType<'dot' | 'bar' | null>, default: 'dot' },
   label: { type: null as unknown as PropType<string | null>, default: null },
   loading: { type: null as unknown as PropType<boolean | null>, default: false },
   matchButton: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -108,6 +118,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   anticipatory: false,
   disabled: false,
+  guide: 'dot',
   label: null,
   loading: false,
   matchButton: false,
@@ -132,6 +143,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  guide: checkedProp<'dot' | 'bar'>(
+    props['guide'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'guide',
+    acceptedProps,
+  ) as 'dot' | 'bar',
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
@@ -289,6 +307,8 @@ const hostState = computed(() =>
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.anticipatory && 'anticipatory',
+    checkedProps.value.guide && 'guide',
+    checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -321,6 +341,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   propNames: [
     'anticipatory',
     'disabled',
+    'guide',
     'label',
     'loading',
     'matchButton',
@@ -378,6 +399,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, true)"
@@ -539,6 +561,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   pointer-events: none;
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+  inline-size: 2px;
+  block-size: 20px;
+  background: var(--ui-border-strong);
+  opacity: 1;
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:disabled::before {
   opacity: 0;
 }
@@ -595,7 +624,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
+    scale var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 @media (hover: none), (pointer: coarse) {
@@ -752,7 +781,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
-  transform: scale(var(--ui-icon-button-active-scale, 0.96));
+  scale: var(--ui-icon-button-active-scale, 0.96);
 }
 
 :is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"]) {

package/vue/UiTooltip.vue

@@ -84,7 +84,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'trigger' },
       description:
-        'How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only while the trigger holds focus.',
+        'How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only on keyboard-visible focus. Action activation dismisses hover/focus hints without removing focus; a fresh hover or keyboard focus can open them\n      again.',
       values: ['hover', 'click', 'focus'],
       default: 'hover',
     },

package/vue/chunks/UiIconButton.js

@@ -11,6 +11,7 @@ var _hoisted_1 = [
 	"aria-busy",
 	"data-anticipatory",
 	"data-disabled",
+	"data-guide",
 	"data-label",
 	"data-loading",
 	"data-match-button",
@@ -36,6 +37,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: false
 		},
+		guide: {
+			type: null,
+			default: "dot"
+		},
 		label: {
 			type: null,
 			default: null
@@ -91,6 +96,17 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.",
 				default: false
 			},
+			guide: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "guide" },
+				description: "The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or\n      keyboard focus; touch always shows the icon.",
+				values: ["dot", "bar"],
+				default: "dot"
+			},
 			label: {
 				type: {
 					kind: "terminal",
@@ -185,6 +201,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const acceptedProps = {
 			anticipatory: false,
 			disabled: false,
+			guide: "dot",
 			label: null,
 			loading: false,
 			matchButton: false,
@@ -203,6 +220,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "boolean"
 			}, false, "disabled", acceptedProps),
+			guide: checkedProp(props["guide"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "guide", acceptedProps),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
@@ -284,6 +305,8 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.tone && "tone",
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
 			checkedProps.value.anticipatory && "anticipatory",
+			checkedProps.value.guide && "guide",
+			checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.loading && "loading",
@@ -310,6 +333,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			propNames: [
 				"anticipatory",
 				"disabled",
+				"guide",
 				"label",
 				"loading",
 				"matchButton",
@@ -349,6 +373,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
 				"data-anticipatory": reflectedProp("anticipatory", "anticipatory", checkedProps.value.anticipatory, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-guide": reflectedProp("guide", "guide", checkedProps.value.guide, void 0, false),
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
 				"data-match-button": reflectedProp("matchButton", "match-button", checkedProps.value.matchButton, void 0, true),
@@ -369,6 +394,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-219fa683"]]);
+}), [["__scopeId", "data-v-ea2a5496"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiTooltip.js

@@ -148,7 +148,7 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				},
 				required: false,
 				target: { attribute: "trigger" },
-				description: "How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only while the trigger holds focus.",
+				description: "How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only on keyboard-visible focus. Action activation dismisses hover/focus hints without removing focus; a fresh hover or keyboard focus can open them\n      again.",
 				values: [
 					"hover",
 					"click",
@@ -299,6 +299,6 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a876d863"]]);
+}), [["__scopeId", "data-v-4a6fb61a"]]);
 //#endregion
 export { UiTooltip_default as t };