@threadlabs/looma 0.23.4 → 0.23.6

package/vanilla/UiListItem.d.ts

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

package/vanilla/UiListItem.js

@@ -6,7 +6,9 @@ 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 prop3 = componentProps["wrap"] === undefined ? false : componentProps["wrap"];
   const element = document.createElement("li");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -69,7 +71,9 @@ 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: "wrap", attribute: "data-wrap", value: componentProps["wrap"], default: false, type: "boolean", required: false },
   ], (name, value) => {
     if (name === "current") {
       if (value === null || value === undefined) element.removeAttribute("aria-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/UiIcon.vue

@@ -107,6 +107,10 @@ const shapes = cycleCheckedComputed(() =>
       d: 'M21 19H7',
     }],
     'arrow-left': [{ tag: 'path', d: 'm12 19-7-7 7-7' }, { tag: 'path', d: 'M19 12H5' }],
+    bell: [{ tag: 'path', d: 'M10.268 21a2 2 0 0 0 3.464 0' }, {
+      tag: 'path',
+      d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326',
+    }],
     bold: [{
       tag: 'path',
       d: 'M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8',

package/vue/UiListItem.d.ts

@@ -14,22 +14,40 @@ 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;
     };
+    wrap: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     current: {
         type: PropType<boolean | null>;
         default: boolean;
     };
+    highlighted: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
     };
+    wrap: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     variant: "row" | "card" | null;
     current: boolean | null;
+    wrap: 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,
@@ -25,13 +33,28 @@ const propValidityContract = {
       values: ['row', 'card'],
       default: 'row',
     },
+    wrap: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'wrap' },
+      description:
+        'Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.',
+      default: false,
+    },
   },
 } 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' },
+  wrap: { type: null as unknown as PropType<boolean | null>, default: false },
 })
-const acceptedProps: Record<string, unknown> = { current: false, variant: 'row' }
+const acceptedProps: Record<string, unknown> = {
+  current: false,
+  highlighted: false,
+  variant: 'row',
+  wrap: false,
+}
 const checkedProps = computed(() => ({
   current: checkedProp<boolean>(
     props['current'],
@@ -40,6 +63,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' },
@@ -47,6 +77,13 @@ const checkedProps = computed(() => ({
     'variant',
     acceptedProps,
   ) as 'row' | 'card',
+  wrap: checkedProp<boolean>(
+    props['wrap'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'wrap',
+    acceptedProps,
+  ) as boolean,
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -109,7 +146,9 @@ const hostState = computed(() =>
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+    checkedProps.value.highlighted && 'highlighted',
     checkedProps.value.current && 'current',
+    checkedProps.value.wrap && 'wrap',
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -121,7 +160,9 @@ 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-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
   >
     <span class="leading"><slot name="leading" /></span>
@@ -202,6 +243,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);
@@ -253,6 +298,12 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title,
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
 .title {
   font-size: var(--ui-font-size-md);
   font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
@@ -294,7 +345,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/UiIcon.js

@@ -148,6 +148,13 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				tag: "path",
 				d: "M19 12H5"
 			}],
+			bell: [{
+				tag: "path",
+				d: "M10.268 21a2 2 0 0 0 3.464 0"
+			}, {
+				tag: "path",
+				d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+			}],
 			bold: [{
 				tag: "path",
 				d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"
@@ -1214,6 +1221,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-87aa3ce3"]]);
+}), [["__scopeId", "data-v-47b12d9e"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/chunks/UiListItem.js

@@ -5,7 +5,9 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 var _hoisted_1 = [
 	"aria-current",
 	"data-current",
+	"data-highlighted",
 	"data-variant",
+	"data-wrap",
 	"data-ui-list-item-state"
 ];
 var _hoisted_2 = { class: "leading" };
@@ -23,9 +25,17 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		highlighted: {
+			type: null,
+			default: false
+		},
 		variant: {
 			type: null,
 			default: "row"
+		},
+		wrap: {
+			type: null,
+			default: false
 		}
 	},
 	setup(__props) {
@@ -40,6 +50,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",
@@ -50,22 +70,42 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,\n      for items set in a grid (a List with layout=\"grid\"). Both have the same parts: leading, title, description, and trailing.",
 				values: ["row", "card"],
 				default: "row"
+			},
+			wrap: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "wrap" },
+				description: "Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.",
+				default: false
 			}
 		} };
 		const props = __props;
 		const acceptedProps = {
 			current: false,
-			variant: "row"
+			highlighted: false,
+			variant: "row",
+			wrap: false
 		};
 		const checkedProps = computed(() => ({
 			current: checkedProp(props["current"], {
 				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"
-			}, false, "variant", acceptedProps)
+			}, false, "variant", acceptedProps),
+			wrap: checkedProp(props["wrap"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "wrap", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -95,13 +135,17 @@ 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.current && "current"
+			checkedProps.value.highlighted && "highlighted",
+			checkedProps.value.current && "current",
+			checkedProps.value.wrap && "wrap"
 		].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-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
 			}), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
@@ -113,6 +157,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7f3a2b0f"]]);
+}), [["__scopeId", "data-v-b8e3f0cd"]]);
 //#endregion
 export { UiListItem_default as t };