@threadlabs/looma 0.23.4 → 0.23.5

package/package.json

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

package/styles/ui-badge.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-badge-dot-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-badge-color {
       syntax: "*";
       inherits: false;
@@ -203,6 +207,29 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+    :scope[data-ui-badge-state~="shape=dot"] {
+      position: relative;
+      box-sizing: border-box;
+      flex: none;
+      inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      padding: 0;
+      border-radius: var(--ui-radius-round);
+      text-box-trim: none;
+    }
+
+    :scope[data-ui-badge-state~="shape=dot"] .label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
     :scope[data-ui-badge-state~="shape=tag"] {
@@ -238,6 +265,12 @@
     }
 
     @media (forced-colors: active) {
+      :scope[data-ui-badge-state~="shape=dot"] {
+        forced-color-adjust: none;
+        border-color: CanvasText;
+        background: CanvasText;
+      }
+
       :scope[data-ui-badge-state~="shape=tag"] {
         forced-color-adjust: none;
         background: CanvasText;
@@ -266,6 +299,8 @@
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
 
+    /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
 

package/styles/ui-list-item.css

@@ -61,6 +61,10 @@
       border-color: var(--ui-border-strong);
     }
 
+    :scope[data-ui-list-item-state~="highlighted"] {
+      background: var(--ui-selection-surface);
+    }
+
     :scope[data-ui-list-item-state~="current"] {
       background: var(--ui-selection-surface);
       color: var(--ui-selection-text);
@@ -136,7 +140,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :scope[data-ui-list-item-state~="current"]:not(:has(a:focus-visible)) {
+      :is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

package/vanilla/UiBadge.d.ts

@@ -6,7 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiBadgeProps {
-  shape?: "pill" | "tag" | null;
+  shape?: "pill" | "tag" | "dot" | null;
   size?: "xs" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | "outline" | null;

package/vanilla/UiBadge.js

@@ -15,17 +15,20 @@ export function createUiBadge(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   element.setAttribute("data-component", "ui-badge");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "label");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
-      element.append(node);
+      element0.append(node);
     }
   } else {
   }
+  element.append(element0);
   manageGeneratedProps(element, [
-    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag"], required: false },
+    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot"], required: false },
     { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },
     { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },

package/vanilla/UiListItem.d.ts

@@ -7,6 +7,7 @@ export interface UiListItemElement extends HTMLLIElement {
 }
 export interface UiListItemProps {
   current?: boolean | null;
+  highlighted?: boolean | null;
   variant?: "row" | "card" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiListItem.js

@@ -6,7 +6,8 @@ export function createUiListItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
-  const prop1 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const prop1 = componentProps["highlighted"] === undefined ? false : componentProps["highlighted"];
+  const prop2 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
   const element = document.createElement("li");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -69,6 +70,7 @@ export function createUiListItem(options = {}) {
   element.append(element4);
   manageGeneratedProps(element, [
     { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
+    { name: "highlighted", attribute: "data-highlighted", value: componentProps["highlighted"], default: false, type: "boolean", required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
   ], (name, value) => {
     if (name === "current") {

package/vue/UiBadge.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | null>;
+        type: PropType<"pill" | "tag" | "dot" | null>;
         default: string;
     };
     size: {
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | null>;
+        type: PropType<"pill" | "tag" | "dot" | null>;
         default: string;
     };
     size: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "tag" | "pill" | null;
+    shape: "dot" | "tag" | "pill" | null;
     size: "xs" | "md" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "solid" | "subtle" | "outline" | null;

package/vue/UiBadge.vue

@@ -13,8 +13,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'shape' },
       description:
-        'Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.',
-      values: ['pill', 'tag'],
+        '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.',
+      values: ['pill', 'tag', 'dot'],
       default: 'pill',
     },
     size: {
@@ -47,7 +47,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  shape: { type: null as unknown as PropType<'pill' | 'tag' | null>, default: 'pill' },
+  shape: { type: null as unknown as PropType<'pill' | 'tag' | 'dot' | null>, default: 'pill' },
   size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
@@ -67,13 +67,13 @@ const acceptedProps: Record<string, unknown> = {
   variant: 'subtle',
 }
 const checkedProps = computed(() => ({
-  shape: checkedProp<'pill' | 'tag'>(
+  shape: checkedProp<'pill' | 'tag' | 'dot'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
     acceptedProps,
-  ) as 'pill' | 'tag',
+  ) as 'pill' | 'tag' | 'dot',
   size: checkedProp<'xs' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -174,7 +174,7 @@ const hostState = computed(() =>
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-badge-state="hostState || undefined"
-  ><slot /></span>
+  ><span class="label"><slot /></span></span>
 </template>
 
 <style scoped>
@@ -183,6 +183,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-dot-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-color {
   syntax: "*";
   inherits: false;
@@ -390,6 +394,29 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+  block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+  min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+  min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+  padding: 0;
+  border-radius: var(--ui-radius-round);
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"] {
@@ -439,6 +466,12 @@ const hostState = computed(() =>
 }
 
 @media (forced-colors: active) {
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: CanvasText;
+  }
+
   [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"] {
     forced-color-adjust: none;
     background: CanvasText;

package/vue/UiListItem.d.ts

@@ -14,6 +14,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    highlighted: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -23,6 +27,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    highlighted: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -30,6 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     variant: "row" | "card" | null;
     current: boolean | null;
+    highlighted: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiListItem.vue

@@ -16,6 +16,14 @@ const propValidityContract = {
         'Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology\n      announces. Set it on one item at a time.',
       default: false,
     },
+    highlighted: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'highlighted' },
+      description:
+        'Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item\'s text; use current only for the current destination.',
+      default: false,
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -29,9 +37,14 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
+  highlighted: { type: null as unknown as PropType<boolean | null>, default: false },
   variant: { type: null as unknown as PropType<'row' | 'card' | null>, default: 'row' },
 })
-const acceptedProps: Record<string, unknown> = { current: false, variant: 'row' }
+const acceptedProps: Record<string, unknown> = {
+  current: false,
+  highlighted: false,
+  variant: 'row',
+}
 const checkedProps = computed(() => ({
   current: checkedProp<boolean>(
     props['current'],
@@ -40,6 +53,13 @@ const checkedProps = computed(() => ({
     'current',
     acceptedProps,
   ) as boolean,
+  highlighted: checkedProp<boolean>(
+    props['highlighted'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'highlighted',
+    acceptedProps,
+  ) as boolean,
   variant: checkedProp<'row' | 'card'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -109,6 +129,7 @@ const hostState = computed(() =>
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+    checkedProps.value.highlighted && 'highlighted',
     checkedProps.value.current && 'current',
   ].filter(Boolean).join(' ')
 )
@@ -121,6 +142,7 @@ const hostState = computed(() =>
     :aria-current="checkedProps.current ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
   >
@@ -202,6 +224,10 @@ const hostState = computed(() =>
   border-color: var(--ui-border-strong);
 }
 
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"] {
+  background: var(--ui-selection-surface);
+}
+
 [data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
   background: var(--ui-selection-surface);
   color: var(--ui-selection-text);
@@ -294,7 +320,7 @@ const hostState = computed(() =>
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
-  [data-component~="ui-list-item"][data-ui-list-item-state~="current"]:not(:has(a:focus-visible)) {
+  :is([data-component~="ui-list-item"][data-ui-list-item-state~="current"], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
   }

package/vue/chunks/UiBadge.js

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { i as vPropValidity, t as checkedProp } from "./props.js";
-import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-shape",
@@ -9,6 +9,7 @@ var _hoisted_1 = [
 	"data-variant",
 	"data-ui-badge-state"
 ];
+var _hoisted_2 = { class: "label" };
 //#endregion
 //#region .build/vue/UiBadge.vue
 var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -41,8 +42,12 @@ 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 label: flat at the start and coming to a point at the end, for a tag or a chosen chip.",
-				values: ["pill", "tag"],
+				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.",
+				values: [
+					"pill",
+					"tag",
+					"dot"
+				],
 				default: "pill"
 			},
 			size: {
@@ -157,12 +162,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-badge-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-dac78ff4"]]);
+}), [["__scopeId", "data-v-84736a7c"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiListItem.js

@@ -5,6 +5,7 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 var _hoisted_1 = [
 	"aria-current",
 	"data-current",
+	"data-highlighted",
 	"data-variant",
 	"data-ui-list-item-state"
 ];
@@ -23,6 +24,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		highlighted: {
+			type: null,
+			default: false
+		},
 		variant: {
 			type: null,
 			default: "row"
@@ -40,6 +45,16 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current=\"true\", which assistive technology\n      announces. Set it on one item at a time.",
 				default: false
 			},
+			highlighted: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "highlighted" },
+				description: "Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item's text; use current only for the current destination.",
+				default: false
+			},
 			variant: {
 				type: {
 					kind: "terminal",
@@ -55,6 +70,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const props = __props;
 		const acceptedProps = {
 			current: false,
+			highlighted: false,
 			variant: "row"
 		};
 		const checkedProps = computed(() => ({
@@ -62,6 +78,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "current", acceptedProps),
+			highlighted: checkedProp(props["highlighted"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "highlighted", acceptedProps),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
@@ -95,12 +115,14 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const hostState = computed(() => [
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current"
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, nativeAttrs(_ctx.$attrs), {
 				"aria-current": checkedProps.value.current ?? void 0,
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
+				"data-highlighted": reflectedProp("highlighted", "highlighted", checkedProps.value.highlighted, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
 			}), [
@@ -113,6 +135,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7f3a2b0f"]]);
+}), [["__scopeId", "data-v-e7ecd203"]]);
 //#endregion
 export { UiListItem_default as t };