@threadlabs/looma 0.15.6 → 0.16.0

package/package.json

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

package/styles/ui-tree-item.css

@@ -256,27 +256,27 @@
       );
     }
 
-    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
-       there, and comes back. Only when it actually overflows — the controller measures by how
+    /* A hovered row reads its whole name: the label slides far enough to show the end, rests
+       there, and starts again. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
        and a duration from it, so every name moves at the same speed. */
     .row[data-ui-marquee] > .label > .label-text {
-      /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
-         and forth under the pointer is harder to read than one that arrives and holds. */
+      /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
+         long enough to read rather than sliding back and forth. */
       animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
       will-change: transform;
     }
 
     /* This comes after the hover fade, which it replaces at the same specificity. While the name
        slides, the label reaches back under the icon (the controller measures how far) with its text
-       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
-       under the icon rather than stopping at a hard edge beside it. */
+       where it was, and fades out across the gap before the icon, fully gone where the icon begins
+       to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
       margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
       padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
-        transparent calc(var(--_marquee-lead, 0px) / 2),
+        transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
@@ -286,7 +286,7 @@
     .row[data-ui-marquee] > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        transparent calc(var(--_marquee-lead, 0px) / 2),
+        transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
@@ -520,15 +520,15 @@
     /* The controls sit over the label's end, so the text fades out where they begin. The fade is
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
 
-    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
-       there, and comes back. Only when it actually overflows — the controller measures by how
+    /* A hovered row reads its whole name: the label slides far enough to show the end, rests
+       there, and starts again. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
        and a duration from it, so every name moves at the same speed. */
 
     /* This comes after the hover fade, which it replaces at the same specificity. While the name
        slides, the label reaches back under the icon (the controller measures how far) with its text
-       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
-       under the icon rather than stopping at a hard edge beside it. */
+       where it was, and fades out across the gap before the icon, fully gone where the icon begins
+       to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
 
     /* Reduced motion keeps the fade, which already says the name continues. */
     @media (prefers-reduced-motion: reduce) {

package/vanilla/UiDialog.d.ts

@@ -12,6 +12,7 @@ export interface UiDialogProps {
   closedby?: "any" | "closerequest" | "none" | null;
   for?: string | null;
   label?: string | null;
+  modal?: boolean | null;
   modeless?: boolean | null;
   open?: boolean | null;
   size?: "sm" | "md" | "lg" | "fullscreen" | null;

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"},"default":"closerequest"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"}},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDialog(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiDialog.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     closedby?: 'any' | 'closerequest' | 'none';
     for?: string;
     label?: string;
+    modal?: boolean;
     modeless?: boolean;
     open?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'fullscreen';
@@ -42,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     for: string;
     open: boolean;
     alert: boolean;
-    closedby: "any" | "closerequest" | "none";
+    modal: boolean;
     modeless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiDialog.vue

@@ -12,14 +12,15 @@ const props = withDefaults(
     closedby?: 'any' | 'closerequest' | 'none'
     for?: string
     label?: string
+    modal?: boolean
     modeless?: boolean
     open?: boolean
     size?: 'sm' | 'md' | 'lg' | 'fullscreen'
   }>(),
   {
     alert: false,
-    closedby: 'closerequest',
     for: '',
+    modal: false,
     modeless: false,
     open: false,
     size: 'md',

package/vue/UiSearchShell.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     label: string;
     open: boolean;
-    dismissible: boolean;
     modal: boolean;
+    dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiTreeItem.vue

@@ -449,21 +449,21 @@ useComponentHost(controllerModule.default, {
   );
 }
 
-/* A hovered row reads its whole name: the label slides far enough to show the end, waits
-   there, and comes back. Only when it actually overflows — the controller measures by how
+/* A hovered row reads its whole name: the label slides far enough to show the end, rests
+   there, and starts again. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
    and a duration from it, so every name moves at the same speed. */
 .row[data-ui-marquee] > .label > .label-text {
-  /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
-     and forth under the pointer is harder to read than one that arrives and holds. */
+  /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
+     long enough to read rather than sliding back and forth. */
   animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
 /* This comes after the hover fade, which it replaces at the same specificity. While the name
    slides, the label reaches back under the icon (the controller measures how far) with its text
-   where it was, and fades out across that stretch, gone by the icon's middle: the name slips
-   under the icon rather than stopping at a hard edge beside it. */
+   where it was, and fades out across the gap before the icon, fully gone where the icon begins
+   to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
 .row[data-ui-marquee] > .label {
   margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
   padding-inline-start: calc(
@@ -471,7 +471,7 @@ useComponentHost(controllerModule.default, {
   );
   mask-image: linear-gradient(
     to right,
-    transparent calc(var(--_marquee-lead, 0px) / 2),
+    transparent var(--_marquee-icon-width, 0px),
     #000 calc(
       var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
     ),
@@ -483,7 +483,7 @@ useComponentHost(controllerModule.default, {
 .row[data-ui-marquee] > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
-    transparent calc(var(--_marquee-lead, 0px) / 2),
+    transparent var(--_marquee-icon-width, 0px),
     #000 calc(
       var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
     ),

package/vue/chunks/UiDialog.js

@@ -25,9 +25,13 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
-		closedby: { default: "closerequest" },
+		closedby: {},
 		for: { default: "" },
 		label: {},
+		modal: {
+			type: Boolean,
+			default: false
+		},
 		modeless: {
 			type: Boolean,
 			default: false
@@ -92,6 +96,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8d67e1e0"]]);
+}), [["__scopeId", "data-v-ef5a672e"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiTreeItem.js

@@ -252,6 +252,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ad0fbbba"]]);
+}), [["__scopeId", "data-v-12522ec8"]]);
 //#endregion
 export { UiTreeItem_default as t };