@threadlabs/looma 0.26.1 → 0.26.2

package/vue/UiIconButton.vue

@@ -71,6 +71,14 @@ const propValidityContract = {
       values: ['sm', 'md', 'lg'],
       default: 'md',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action\n      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
+      values: ['accent', 'neutral'],
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -91,6 +99,7 @@ const props = defineProps({
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
   round: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  tone: { type: null as unknown as PropType<'accent' | 'neutral' | null>, default: null },
   variant: {
     type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null>,
     default: 'ghost',
@@ -105,6 +114,7 @@ const acceptedProps: Record<string, unknown> = {
   pending: false,
   round: false,
   size: 'md',
+  tone: null,
   variant: 'ghost',
 }
 const checkedProps = computed(() => ({
@@ -164,6 +174,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'sm' | 'md' | 'lg',
+  tone: checkedProp<'accent' | 'neutral'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ),
   variant: checkedProp<'ghost' | 'outline' | 'solid'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -269,6 +286,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.anticipatory && 'anticipatory',
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
@@ -308,6 +327,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'pending',
     'round',
     'size',
+    'tone',
     'variant',
   ],
   propValidity: (name: string) =>
@@ -364,6 +384,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
@@ -461,6 +482,25 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--ui-text-secondary);
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=accent"] {
+  --_icon-button-border: var(--ui-accent-solid);
+  --_icon-button-hover-border: var(--ui-accent-hover);
+  --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+  --_icon-button-outline-surface: color-mix(
+    in srgb,
+    var(--ui-accent-solid) 5%,
+    var(--ui-surface-default)
+  );
+  color: var(--_icon-button-text);
+}
+
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=neutral"] {
+  --_icon-button-solid-surface: var(--ui-text-primary);
+  --_icon-button-solid-hover-surface: var(--ui-text-primary);
+  --_icon-button-solid-text: var(--ui-surface-default);
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] {
   position: relative;
 }
@@ -495,13 +535,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background-color: transparent;
     box-shadow: none;
   }
 
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
     .content {
     opacity: 0;
     transform: scale(0.65);
@@ -509,7 +549,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   }
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
 
@@ -622,17 +662,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
-  border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-  background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  border-color: var(
+    --ui-icon-button-border,
+    var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
+  );
+  background-color: var(
+    --ui-icon-button-outline-surface,
+    var(--_icon-button-outline-surface, var(--ui-surface-default))
+  );
   background-image: var(--ui-raised-highlight);
-  color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
   box-shadow: var(--ui-raised);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
-  background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  background-color: var(
+    --ui-icon-button-solid-surface,
+    var(--_icon-button-solid-surface, var(--ui-accent-solid))
+  );
   background-image: var(--ui-raised-highlight);
-  color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
   box-shadow: var(
     --ui-icon-button-solid-shadow,
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
@@ -645,18 +694,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-hover-surface,
     color-mix(in srgb, currentColor 8%, transparent)
   );
-  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
   border-color: var(
     --ui-icon-button-hover-border,
-    var(--ui-control-border-hover, var(--ui-control-border))
+    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
   );
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+  background-color: var(
+    --ui-icon-button-solid-hover-surface,
+    var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+  );
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
@@ -664,7 +721,17 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --ui-icon-button-active-surface,
     color-mix(in srgb, currentColor 16%, transparent)
   );
-  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+  box-shadow: var(--ui-pressed);
+}
+
+/* Native toggle state persists after pointer release, including during loading. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+  );
+  background-image: none;
   box-shadow: var(--ui-pressed);
 }
 
@@ -698,6 +765,22 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   box-shadow: var(--ui-focus-halo);
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+  box-shadow:
+    var(--ui-pressed),
+    var(--ui-focus-halo);
+}
+
+@media (forced-colors: active) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: calc(-2 * var(--ui-focus-width));
+  }
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+    outline-offset: var(--ui-focus-width);
+  }
+}
+
 /* Disabled is a flat neutral control, independent of the active variant's tone. */
 [data-component~="ui-icon-button"]:disabled {
   border-color: var(--ui-disabled-border);

package/vue/chunks/UiBadge.js

@@ -46,12 +46,13 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "shape" },
-				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.",
+				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.",
 				values: [
 					"pill",
 					"tag",
 					"dot",
-					"square"
+					"square",
+					"circle"
 				],
 				default: "pill"
 			},
@@ -62,7 +63,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.",
+				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing. A circle is\n      16px at xs and 24px at md.",
 				values: ["xs", "md"],
 				default: "md"
 			},
@@ -173,6 +174,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a45f2b52"]]);
+}), [["__scopeId", "data-v-c96818e7"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiContainer.js

@@ -3,6 +3,7 @@ import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"data-fill",
 	"data-gutters",
 	"data-measure",
 	"data-ui-container-state"
@@ -13,6 +14,10 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	inheritAttrs: false,
 	__name: "UiContainer",
 	props: {
+		fill: {
+			type: null,
+			default: false
+		},
 		gutters: {
 			type: null,
 			default: null
@@ -24,6 +29,16 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			fill: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "fill" },
+				description: "Keeps the readable width while filling available layout space. Uses a flex column so scrolling children can shrink inside a bounded flex or grid parent.\n      Omit it to keep the usual block layout.",
+				default: false
+			},
 			gutters: {
 				type: {
 					kind: "terminal",
@@ -51,10 +66,15 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		} };
 		const props = __props;
 		const acceptedProps = {
+			fill: false,
 			gutters: null,
 			measure: null
 		};
 		const checkedProps = computed(() => ({
+			fill: checkedProp(props["fill"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "fill", acceptedProps),
 			gutters: checkedProp(props["gutters"], {
 				kind: "terminal",
 				name: "keyword"
@@ -92,11 +112,13 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const hostState = computed(() => [
 			checkedProps.value.measure && "measure",
 			checkedProps.value.measure != null && `measure=${encodeURIComponent(checkedProps.value.measure)}`,
+			checkedProps.value.fill && "fill",
 			checkedProps.value.gutters && "gutters",
 			checkedProps.value.gutters != null && `gutters=${encodeURIComponent(checkedProps.value.gutters)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-container" }, nativeAttrs(_ctx.$attrs), {
+				"data-fill": reflectedProp("fill", "fill", checkedProps.value.fill, void 0, false),
 				"data-gutters": reflectedProp("gutters", "gutters", checkedProps.value.gutters, void 0, false),
 				"data-measure": reflectedProp("measure", "measure", checkedProps.value.measure, void 0, false),
 				"data-ui-container-state": hostState.value || void 0
@@ -106,6 +128,6 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-955318c7"]]);
+}), [["__scopeId", "data-v-d3919ea4"]]);
 //#endregion
 export { UiContainer_default as t };

package/vue/chunks/UiIconButton.js

@@ -17,6 +17,7 @@ var _hoisted_1 = [
 	"data-pending",
 	"data-round",
 	"data-size",
+	"data-tone",
 	"data-variant",
 	"data-ui-icon-button-state"
 ];
@@ -59,6 +60,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: "md"
 		},
+		tone: {
+			type: null,
+			default: null
+		},
 		variant: {
 			type: null,
 			default: "ghost"
@@ -150,6 +155,16 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				],
 				default: "md"
 			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action\n      or neutral for a quiet one. Native aria-pressed=\"true\" keeps an outline toggle visibly pressed; the consumer owns that state.",
+				values: ["accent", "neutral"]
+			},
 			variant: {
 				type: {
 					kind: "terminal",
@@ -176,6 +191,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			pending: false,
 			round: false,
 			size: "md",
+			tone: null,
 			variant: "ghost"
 		};
 		const checkedProps = computed(() => ({
@@ -211,6 +227,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "keyword"
 			}, false, "size", acceptedProps),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", acceptedProps),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
@@ -261,6 +281,8 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		/** 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.anticipatory && "anticipatory",
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -294,6 +316,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"pending",
 				"round",
 				"size",
+				"tone",
 				"variant"
 			],
 			propValidity: (name) => propValidityState({
@@ -332,6 +355,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
 				"data-round": reflectedProp("round", "round", checkedProps.value.round, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-icon-button-state": hostState.value || void 0,
 				ref_key: "root",
@@ -345,6 +369,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-cb9aaf03"]]);
+}), [["__scopeId", "data-v-b66a1661"]]);
 //#endregion
 export { UiIconButton_default as t };