@threadlabs/looma 0.15.7 → 0.16.0

package/package.json

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

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/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/components.css

@@ -2214,7 +2214,7 @@ dd[data-v-6e5b491d] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-dialog"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-v-ef5a672e] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -2249,21 +2249,21 @@ dd[data-v-6e5b491d] {
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][open][data-v-ef5a672e] {
   display: flex;
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
   transform: scale(1);
-  animation: ui-dialog-enter-8d67e1e0 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+  animation: ui-dialog-enter-ef5a672e var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-ef5a672e] {
   --_ui-dialog-size: 360px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-ef5a672e] {
   --_ui-dialog-size: 640px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-ef5a672e] {
   inset: 0;
   inline-size: 100%;
   block-size: 100dvh;
@@ -2271,12 +2271,12 @@ dd[data-v-6e5b491d] {
   margin: 0;
   border-radius: var(--ui-dialog-radius, 0);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-ef5a672e] {
   display: none;
 }
 
 /* Header and actions stay pinned; only the body scrolls when content is long. */
-header[data-v-8d67e1e0] {
+header[data-v-ef5a672e] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -2286,7 +2286,7 @@ header[data-v-8d67e1e0] {
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title[data-v-8d67e1e0] {
+[data-component~="ui-dialog"] .title[data-v-ef5a672e] {
   flex: 1;
   min-inline-size: 0;
   margin: 0;
@@ -2298,7 +2298,7 @@ header[data-v-8d67e1e0] {
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-.close[data-v-8d67e1e0] {
+.close[data-v-ef5a672e] {
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -2317,8 +2317,8 @@ header[data-v-8d67e1e0] {
 }
 
 /* A CSS-drawn X. */
-.close[data-v-8d67e1e0]::before,
-.close[data-v-8d67e1e0]::after {
+.close[data-v-ef5a672e]::before,
+.close[data-v-ef5a672e]::after {
   content: "";
   grid-area: 1 / 1;
   inline-size: 0.875rem;
@@ -2327,30 +2327,30 @@ header[data-v-8d67e1e0] {
   background: currentColor;
   transform: rotate(45deg);
 }
-.close[data-v-8d67e1e0]::after {
+.close[data-v-ef5a672e]::after {
   transform: rotate(-45deg);
 }
-.close[data-v-8d67e1e0]:hover {
+.close[data-v-ef5a672e]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-.close[data-v-8d67e1e0]:focus-visible {
+.close[data-v-ef5a672e]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
-.close[data-v-8d67e1e0] {
+.close[data-v-ef5a672e] {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-8d67e1e0] {
+html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-ef5a672e] {
   inline-size: var(--ui-control-min-block-size);
   block-size: var(--ui-control-min-block-size);
 }
-.body[data-v-8d67e1e0] {
+.body[data-v-ef5a672e] {
   flex: 1 1 auto;
   min-block-size: 0;
   overflow: auto;
@@ -2378,7 +2378,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v
     -1px calc(100% - var(--_ui-scroll-fade-size)),
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-footer[data-v-8d67e1e0] {
+footer[data-v-ef5a672e] {
   display: flex;
   flex: none;
   flex-wrap: wrap;
@@ -2387,28 +2387,28 @@ footer[data-v-8d67e1e0] {
   padding: var(--ui-space-3) var(--ui-space-5);
   border-block-start: 1px solid var(--ui-border-default);
 }
-footer[data-v-8d67e1e0]:empty {
+footer[data-v-ef5a672e]:empty {
   display: none;
 }
-@keyframes ui-dialog-enter-8d67e1e0 {
+@keyframes ui-dialog-enter-ef5a672e {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-[data-component~="ui-dialog"][data-v-8d67e1e0]::backdrop {
+[data-component~="ui-dialog"][data-v-ef5a672e]::backdrop {
   background-color: transparent;
   transition:
     background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
     display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-8d67e1e0]::backdrop {
+[data-component~="ui-dialog"][open][data-v-ef5a672e]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter-8d67e1e0 var(--_ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter-ef5a672e var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
-@keyframes ui-dialog-backdrop-enter-8d67e1e0 {
+@keyframes ui-dialog-backdrop-enter-ef5a672e {
 from {
     background-color: transparent;
 }