@threadlabs/looma 0.22.12 → 0.22.14

package/vanilla/UiPopover.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-popover/ui-popover.js";
 import "../styles/ui-popover.css";
 
-const definition = {...{"contract":{"tag":"ui-popover","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-popover","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"bottom-start"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiPopover(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiScrollArea.d.ts

@@ -7,6 +7,7 @@ export interface UiScrollAreaElement extends HTMLDivElement {
 }
 export interface UiScrollAreaProps {
   orientation?: "vertical" | "horizontal" | null;
+  size?: "content" | "sm" | "md" | "lg" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiScrollArea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-scroll-area/ui-scroll-area.js";
 import "../styles/ui-scroll-area.css";
 
-const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiScrollArea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiSearchResultRow.d.ts

@@ -6,6 +6,7 @@ export interface UiSearchResultRowElement extends HTMLButtonElement {
   removeEventListener<K extends keyof UiSearchResultRowEventMap>(type: K, listener: (this: UiSearchResultRowElement, event: UiSearchResultRowEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiSearchResultRowProps {
+  density?: "comfortable" | "compact" | null;
   disabled?: boolean | null;
   selected?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiSearchResultRow.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-search-result-row.css";
 
-const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSearchResultRow(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiStack.d.ts

@@ -7,7 +7,7 @@ export interface UiStackElement extends HTMLDivElement {
 }
 export interface UiStackProps {
   align?: "start" | "center" | "end" | "stretch" | null;
-  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiStack.js

@@ -25,7 +25,7 @@ export function createUiStack(options = {}) {
   }
   manageGeneratedProps(element, [
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
-    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["none","xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
   ]);
   return element;

package/vanilla/UiText.d.ts

@@ -8,11 +8,13 @@ export interface UiTextElement extends HTMLElement {
 export interface UiTextProps {
   align?: "start" | "center" | null;
   as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
+  font?: "inherit" | "sans" | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;
   variant?: "body" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;
+  wrap?: "normal" | "anywhere" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiText.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 
-const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"font":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","sans"],"required":false,"target":{"attribute":"font"},"default":"inherit"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"},"wrap":{"type":{"kind":"terminal","name":"keyword"},"values":["normal","anywhere"],"required":false,"target":{"attribute":"wrap"},"default":"normal"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiCard.d.ts

@@ -15,7 +15,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     padding: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -32,7 +36,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     padding: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -44,10 +52,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
+    size: "sm" | "md" | "content" | "lg" | null;
     tone: "neutral" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
     as: "div" | "article" | "aside" | "section" | null;
-    padding: "sm" | "md" | "lg" | null;
+    padding: "xs" | "sm" | "md" | "lg" | 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/UiCard.vue

@@ -23,10 +23,19 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'padding' },
       description:
-        'The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).',
-      values: ['sm', 'md', 'lg'],
+        'The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).',
+      values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.',
+      values: ['content', 'sm', 'md', 'lg'],
+      default: 'content',
+    },
     tone: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -52,7 +61,11 @@ const props = defineProps({
     type: null as unknown as PropType<'div' | 'section' | 'article' | 'aside' | null>,
     default: 'div',
   },
-  padding: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  padding: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: 'md' },
+  size: {
+    type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
+    default: 'content',
+  },
   tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
   variant: {
     type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null>,
@@ -62,6 +75,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   as: 'div',
   padding: 'md',
+  size: 'content',
   tone: 'neutral',
   variant: 'outlined',
 }
@@ -73,13 +87,20 @@ const checkedProps = computed(() => ({
     'as',
     acceptedProps,
   ) as 'div' | 'section' | 'article' | 'aside',
-  padding: checkedProp<'sm' | 'md' | 'lg'>(
+  padding: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['padding'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'padding',
     acceptedProps,
-  ) as 'sm' | 'md' | 'lg',
+  ) as 'xs' | 'sm' | 'md' | 'lg',
+  size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    acceptedProps,
+  ) as 'content' | 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
@@ -166,6 +187,8 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -178,6 +201,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -192,6 +216,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -206,6 +231,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -220,6 +246,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -245,6 +272,10 @@ const hostState = computed(() =>
   color: var(--ui-text-primary);
 }
 
+[data-component~="ui-card"][data-ui-card-state~="padding=xs"] {
+  gap: var(--ui-space-1);
+  padding: var(--ui-space-2);
+}
 [data-component~="ui-card"][data-ui-card-state~="padding=sm"] {
   gap: var(--ui-space-2);
   padding: var(--ui-space-3);
@@ -270,6 +301,19 @@ const hostState = computed(() =>
   background: var(--ui-danger-soft);
 }
 
+[data-component~="ui-card"][data-ui-card-state~="size=sm"] {
+  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-card"][data-ui-card-state~="size=md"] {
+  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-card"][data-ui-card-state~="size=lg"] {
+  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-card"][hidden] {
   display: none;

package/vue/UiIcon.vue

@@ -177,6 +177,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21',
     }, { tag: 'path', d: 'm5.082 11.09 8.828 8.828' }],
+    'external-link': [{ tag: 'path', d: 'M15 3h6v6' }, { tag: 'path', d: 'M10 14 21 3' }, {
+      tag: 'path',
+      d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6',
+    }],
     'file-text': [
       {
         tag: 'path',
@@ -319,6 +323,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M3 9h18',
     }],
+    pencil: [{
+      tag: 'path',
+      d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z',
+    }, { tag: 'path', d: 'm15 5 4 4' }],
     pilcrow: [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, {
       tag: 'path',
       d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13',
@@ -344,6 +352,7 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M21 9H3',
     }, { tag: 'path', d: 'M21 15H3' }],
+    search: [{ tag: 'path', d: 'm21 21-4.34-4.34' }, { tag: 'circle', cx: '11', cy: '11', r: '8' }],
     settings: [{
       tag: 'path',
       d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915',
@@ -400,6 +409,20 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11',
     }],
+    unlink: [
+      {
+        tag: 'path',
+        d: 'm18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71',
+      },
+      {
+        tag: 'path',
+        d: 'm5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71',
+      },
+      { tag: 'line', x1: '8', x2: '8', y1: '2', y2: '5' },
+      { tag: 'line', x1: '2', x2: '5', y1: '8', y2: '8' },
+      { tag: 'line', x1: '16', x2: '16', y1: '19', y2: '22' },
+      { tag: 'line', x1: '19', x2: '22', y1: '16', y2: '16' },
+    ],
     'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, {
       tag: 'path',
       d: 'M20 21a8 8 0 0 0-16 0',

package/vue/UiInput.vue

@@ -553,6 +553,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
+  padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
   border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
     var(
       --ui-input-border,

package/vue/UiInputGroup.d.ts

@@ -14,13 +14,22 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    prefixKind: {
+        type: PropType<"text" | "icon" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
     };
+    prefixKind: {
+        type: PropType<"text" | "icon" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     disabled: boolean | null;
+    prefixKind: "text" | "icon" | 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/UiInputGroup.vue

@@ -17,12 +17,22 @@ const propValidityContract = {
         'Fades the group\'s framing to match a disabled input inside it. Disable the input itself too.',
       default: false,
     },
+    prefixKind: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'prefixkind' },
+      description:
+        'Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.',
+      values: ['text', 'icon'],
+      default: 'text',
+    },
   },
 } as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  prefixKind: { type: null as unknown as PropType<'text' | 'icon' | null>, default: 'text' },
 })
-const acceptedProps: Record<string, unknown> = { disabled: false }
+const acceptedProps: Record<string, unknown> = { disabled: false, prefixKind: 'text' }
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
@@ -31,6 +41,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  prefixKind: checkedProp<'text' | 'icon'>(
+    props['prefixKind'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'prefixKind',
+    acceptedProps,
+  ) as 'text' | 'icon',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -92,6 +109,9 @@ if (
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',
+    checkedProps.value.prefixKind && 'prefixKind',
+    checkedProps.value.prefixKind != null
+    && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -112,7 +132,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['disabled'],
+  propNames: ['disabled', 'prefixKind'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -124,6 +144,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
   >
@@ -283,6 +304,16 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   border-inline-start: 1px solid var(--ui-border-divider);
 }
 
+[data-component~="ui-input-group"][data-ui-input-group-state~="prefixKind=icon"] {
+  --_ui-default-input-padding-inline-start: var(--ui-space-2);
+}
+[data-component~="ui-input-group"][data-ui-input-group-state~="prefixKind=icon"]
+  .affix:first-child {
+  padding-inline-end: 0;
+  border-inline-end: 0;
+  background: transparent;
+}
+
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
 .action {

package/vue/UiPopover.d.ts

@@ -16,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null>;
         default: string;
     };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: (event: CustomEvent<{
         readonly open: boolean;
@@ -41,6 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null>;
         default: string;
     };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
 }>> & Readonly<{
     onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
@@ -55,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any) | undefined;
 }>, {
     open: boolean | null;
+    size: "sm" | "md" | "content" | "lg" | null;
     for: string | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiPopover.vue

@@ -45,6 +45,15 @@ const propValidityContract = {
       ],
       default: 'bottom-start',
     },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.',
+      values: ['content', 'sm', 'md', 'lg'],
+      default: 'content',
+    },
   },
 } as const
 const props = defineProps({
@@ -68,8 +77,17 @@ const props = defineProps({
     >,
     default: 'bottom-start',
   },
+  size: {
+    type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
+    default: 'content',
+  },
 })
-const acceptedProps: Record<string, unknown> = { for: '', open: false, placement: 'bottom-start' }
+const acceptedProps: Record<string, unknown> = {
+  for: '',
+  open: false,
+  placement: 'bottom-start',
+  size: 'content',
+}
 const checkedProps = computed(() => ({
   for: checkedProp<string>(
     props['for'],
@@ -111,6 +129,13 @@ const checkedProps = computed(() => ({
     | 'right'
     | 'right-start'
     | 'right-end',
+  size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    acceptedProps,
+  ) as 'content' | 'sm' | 'md' | 'lg',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -195,6 +220,8 @@ if (
 const hostState = computed(() =>
   [
     internalOpen.value && 'internalOpen',
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -232,7 +259,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['for', 'open', 'placement'],
+  propNames: ['for', 'open', 'placement', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
@@ -247,6 +274,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-popover-state="hostState || undefined"
     ref="root"
   ><div class="surface"><slot /></div></span>
@@ -348,6 +376,19 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   }
 }
 
+[data-component~="ui-popover"][data-ui-popover-state~="size=sm"] {
+  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-popover"][data-ui-popover-state~="size=md"] {
+  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-popover"][data-ui-popover-state~="size=lg"] {
+  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+}
+
 [data-component~="ui-popover"][hidden] {
   display: none;
 }