@threadlabs/looma 0.23.5 → 0.23.6

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/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/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 };

package/vue/components.css

@@ -92,7 +92,7 @@
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon"][data-v-87aa3ce3] {
+[data-component~="ui-icon"][data-v-47b12d9e] {
   /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
      sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
   --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -102,14 +102,14 @@
   inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
-svg[data-v-87aa3ce3] {
+svg[data-v-47b12d9e] {
   inline-size: 100%;
   block-size: 100%;
   stroke-width: var(--_ui-icon-stroke-width, 2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden][data-v-87aa3ce3] {
+[data-component~="ui-icon"][hidden][data-v-47b12d9e] {
   display: none;
 }
 
@@ -5150,7 +5150,7 @@ svg[data-v-7bb0fe2e-s] {
    padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
    a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
    stay their own. */
-[data-component~="ui-list-item"][data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-v-b8e3f0cd] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -5175,86 +5175,91 @@ svg[data-v-7bb0fe2e-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-b8e3f0cd] {
   padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
   padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
   border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
-[data-component~="ui-list-item"][data-v-e7ecd203]:has(.title a[href]:hover) {
+[data-component~="ui-list-item"][data-v-b8e3f0cd]:has(.title a[href]:hover) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-e7ecd203]:has(.title
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-b8e3f0cd]:has(.title
   a[href]:hover) {
   border-color: var(--ui-border-strong);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-b8e3f0cd] {
   background: var(--ui-selection-surface);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-b8e3f0cd] {
   background: var(--ui-selection-surface);
   color: var(--ui-selection-text);
 }
-[data-component~="ui-list-item"][data-v-e7ecd203]:has(.title a[href]:focus-visible) {
+[data-component~="ui-list-item"][data-v-b8e3f0cd]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-e7ecd203],
-.trailing[data-v-e7ecd203] {
+.leading[data-v-b8e3f0cd],
+.trailing[data-v-b8e3f0cd] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-e7ecd203] {
+.leading[data-v-b8e3f0cd] {
   color: var(--ui-text-muted);
   font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-b8e3f0cd] {
   color: var(--ui-selection-text);
 }
 
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing[data-v-e7ecd203] {
+.trailing[data-v-b8e3f0cd] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-e7ecd203] {
+.content[data-v-b8e3f0cd] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.title[data-v-e7ecd203],
-.description[data-v-e7ecd203] {
+.title[data-v-b8e3f0cd],
+.description[data-v-b8e3f0cd] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.title[data-v-e7ecd203] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-b8e3f0cd],
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-b8e3f0cd] {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.title[data-v-b8e3f0cd] {
   font-size: var(--ui-font-size-md);
   font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-e7ecd203] {
+.description[data-v-b8e3f0cd] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
 }
-.title > a[data-v-e7ecd203-s] {
+.title > a[data-v-b8e3f0cd-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-e7ecd203-s]:focus-visible {
+.title > a[data-v-b8e3f0cd-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-e7ecd203-s]::after {
+.title > a[href][data-v-b8e3f0cd-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -5262,24 +5267,24 @@ svg[data-v-7bb0fe2e-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-e7ecd203]:empty,
-.description[data-v-e7ecd203]:empty,
-.trailing[data-v-e7ecd203]:empty {
+.leading[data-v-b8e3f0cd]:empty,
+.description[data-v-b8e3f0cd]:empty,
+.trailing[data-v-b8e3f0cd]:empty {
   display: none;
 }
 @media (forced-colors: active) {
-[data-component~="ui-list-item"][data-v-e7ecd203]:has(a:focus-visible) {
+[data-component~="ui-list-item"][data-v-b8e3f0cd]:has(a:focus-visible) {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
 }
-:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-e7ecd203], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-e7ecd203]):not(:has(a:focus-visible)) {
+:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-b8e3f0cd], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-b8e3f0cd]):not(:has(a:focus-visible)) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list-item"][hidden][data-v-e7ecd203] {
+[data-component~="ui-list-item"][hidden][data-v-b8e3f0cd] {
   display: none;
 }