@threadlabs/looma 0.23.5 → 0.23.7

package/vanilla/UiListItem.d.ts

@@ -9,6 +9,7 @@ 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

@@ -8,6 +8,7 @@ export function createUiListItem(options = {}) {
   const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
   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;
@@ -72,6 +73,7 @@ export function createUiListItem(options = {}) {
     { 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" | "dot" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | 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" | "dot" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | null>;
         default: string;
     };
     size: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "dot" | "tag" | "pill" | null;
+    shape: "dot" | "tag" | "square" | "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 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'],
+        '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.',
+      values: ['pill', 'tag', 'dot', 'square'],
       default: 'pill',
     },
     size: {
@@ -22,7 +22,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is a compact count beside small controls; md is the usual text badge.',
+        '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.',
       values: ['xs', 'md'],
       default: 'md',
     },
@@ -47,7 +47,10 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  shape: { type: null as unknown as PropType<'pill' | 'tag' | 'dot' | null>, default: 'pill' },
+  shape: {
+    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | null>,
+    default: 'pill',
+  },
   size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
@@ -67,13 +70,13 @@ const acceptedProps: Record<string, unknown> = {
   variant: 'subtle',
 }
 const checkedProps = computed(() => ({
-  shape: checkedProp<'pill' | 'tag' | 'dot'>(
+  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
     acceptedProps,
-  ) as 'pill' | 'tag' | 'dot',
+  ) as 'pill' | 'tag' | 'dot' | 'square',
   size: checkedProp<'xs' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -183,6 +186,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-square-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -394,6 +401,31 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--_badge-square-size);
+  block-size: var(--_badge-square-size);
+  min-inline-size: var(--_badge-square-size);
+  min-block-size: var(--_badge-square-size);
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
+  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* 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;

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

@@ -22,6 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         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>;
@@ -35,9 +39,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         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>;

package/vue/UiListItem.vue

@@ -33,17 +33,27 @@ 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,
   highlighted: false,
   variant: 'row',
+  wrap: false,
 }
 const checkedProps = computed(() => ({
   current: checkedProp<boolean>(
@@ -67,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(() => {
@@ -131,6 +148,7 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.highlighted && 'highlighted',
     checkedProps.value.current && 'current',
+    checkedProps.value.wrap && 'wrap',
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -144,6 +162,7 @@ const hostState = computed(() =>
     :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>
@@ -279,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));

package/vue/chunks/UiBadge.js

@@ -42,11 +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 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.",
+				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.",
 				values: [
 					"pill",
 					"tag",
-					"dot"
+					"dot",
+					"square"
 				],
 				default: "pill"
 			},
@@ -57,7 +58,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.",
+				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.",
 				values: ["xs", "md"],
 				default: "md"
 			},
@@ -168,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-84736a7c"]]);
+}), [["__scopeId", "data-v-470f6e28"]]);
 //#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

@@ -7,6 +7,7 @@ var _hoisted_1 = [
 	"data-current",
 	"data-highlighted",
 	"data-variant",
+	"data-wrap",
 	"data-ui-list-item-state"
 ];
 var _hoisted_2 = { class: "leading" };
@@ -31,6 +32,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		variant: {
 			type: null,
 			default: "row"
+		},
+		wrap: {
+			type: null,
+			default: false
 		}
 	},
 	setup(__props) {
@@ -65,13 +70,24 @@ 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,
 			highlighted: false,
-			variant: "row"
+			variant: "row",
+			wrap: false
 		};
 		const checkedProps = computed(() => ({
 			current: checkedProp(props["current"], {
@@ -85,7 +101,11 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			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(() => {
@@ -116,7 +136,8 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.highlighted && "highlighted",
-			checkedProps.value.current && "current"
+			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), {
@@ -124,6 +145,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"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")]),
@@ -135,6 +157,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-e7ecd203"]]);
+}), [["__scopeId", "data-v-b8e3f0cd"]]);
 //#endregion
 export { UiListItem_default as t };