@threadlabs/looma 0.11.1 → 0.11.3

package/package.json

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

package/styles/ui-input-group.css

@@ -0,0 +1,87 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-input-group"]) to ([data-component], [data-slotted]) {
+/* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+    :scope {
+      --ui-input-border: transparent;
+      --ui-input-border-hover: transparent;
+      --ui-input-focus-border: transparent;
+      --ui-input-shadow: none;
+      --ui-input-focus-shadow: none;
+      --ui-input-radius: 0;
+      --ui-input-surface: transparent;
+
+      display: flex;
+      align-items: stretch;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-surface-elevated);
+      box-shadow: var(--ui-control-inset);
+      overflow: hidden;
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope:hover:not(:focus-within) {
+      border-color: var(--ui-text-secondary);
+    }
+
+    :scope:focus-within {
+      border-color: var(--ui-accent-solid);
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    :scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :scope[data-ui-input-group-state~="disabled"] {
+      background: var(--ui-surface-muted);
+      box-shadow: none;
+    }
+
+    .field {
+      display: flex;
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .affix {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      padding-inline: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-family: var(--ui-font-family-mono);
+      font-size: var(--ui-font-size-sm);
+      white-space: nowrap;
+    }
+
+    .affix:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-input-group"]) to ([data-component]) {
+/* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-input.css

@@ -9,9 +9,9 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-input-radius, var(--ui-radius-md));
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
@@ -34,11 +34,11 @@
     }
 
     :scope:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
     :scope:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
     }

package/styles/ui-list-item.css

@@ -16,9 +16,9 @@
       align-items: center;
       gap: var(--ui-list-item-gap, var(--ui-space-3));
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size, 2.5rem);
-      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
-      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
+      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
@@ -88,7 +88,7 @@
 
     .title {
       font-size: var(--ui-font-size-md);
-      font-weight: var(--ui-font-medium);
+      font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
       line-height: var(--ui-line-height-tight);
     }
 

package/styles/ui-list.css

@@ -13,6 +13,15 @@
       list-style: none;
     }
 
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+    :scope[data-ui-list-state~="density=compact"] {
+      --_ui-list-item-min-size: 0;
+      --_ui-list-item-padding-block: 0;
+      --_ui-list-item-padding-inline: 0;
+      --_ui-list-item-title-weight: var(--ui-font-normal);
+      gap: var(--ui-list-gap, var(--ui-space-2));
+    }
+
     :scope[data-ui-list-state~="layout=grid"] {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
@@ -29,5 +38,7 @@
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
 
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-tree-item.css

@@ -201,7 +201,7 @@
     /* 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
        much — after the controls have taken their place over its end — and hands over the distance
-       and a duration from it, so a longer name travels no faster. */
+       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. */
@@ -424,7 +424,7 @@
     /* 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
        much — after the controls have taken their place over its end — and hands over the distance
-       and a duration from it, so a longer name travels no faster. */
+       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

package/vanilla/UiInputGroup.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiInputGroupEventMap {
+}
+export interface UiInputGroupElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiInputGroupEventMap>(type: K, listener: (this: UiInputGroupElement, event: UiInputGroupEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiInputGroupEventMap>(type: K, listener: (this: UiInputGroupElement, event: UiInputGroupEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiInputGroupProps {
+  disabled?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiInputGroup(props?: UiInputGroupProps): UiInputGroupElement;

package/vanilla/UiInputGroup.js

@@ -0,0 +1,53 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-input-group.css";
+
+export function createUiInputGroup(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-input-group");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "affix");
+  if (slots["prefix"] ?? [].length > 0) {
+    for (const child of slots["prefix"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "prefix"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "field");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "affix");
+  if (slots["suffix"] ?? [].length > 0) {
+    for (const child of slots["suffix"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "suffix"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element.append(element2);
+  manageGeneratedProps(element, [
+    { name: "disabled", attribute: "data-disabled", value: componentProps["disabled"], default: false, type: "boolean", required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiList.d.ts

@@ -6,6 +6,7 @@ export interface UiListElement extends HTMLUListElement {
   removeEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiListProps {
+  density?: "comfortable" | "compact" | null;
   layout?: "rows" | "grid" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiList.js

@@ -5,7 +5,8 @@ import "../styles/ui-list.css";
 export function createUiList(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const prop0 = componentProps["density"] === undefined ? "comfortable" : componentProps["density"];
+  const prop1 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
   const element = document.createElement("ul");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -22,6 +23,7 @@ export function createUiList(options = {}) {
   } else {
   }
   manageGeneratedProps(element, [
+    { name: "density", attribute: "data-density", value: componentProps["density"], default: "comfortable", type: ["comfortable","compact"], required: false },
     { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","grid"], required: false },
   ]);
   return element;

package/vanilla/index.js

@@ -32,6 +32,7 @@ export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
 export * from "./UiInput.js";
+export * from "./UiInputGroup.js";
 export * from "./UiList.js";
 export * from "./UiListItem.js";
 export * from "./UiMenu.js";

package/vue/UiInput.vue

@@ -64,9 +64,9 @@ useComponentHost(controllerModule.default, {
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
   border-radius: var(--ui-input-radius, var(--ui-radius-md));
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -89,11 +89,14 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-input"]:hover:not(:focus):not(:disabled) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+  border-color: var(
+    --ui-input-border-hover,
+    var(--ui-control-border-hover, var(--ui-text-secondary))
+  );
 }
 
 [data-component~="ui-input"]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
     --ui-input-focus-shadow,

package/vue/UiInputGroup.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    suffix?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiInputGroup.js

@@ -0,0 +1,2 @@
+import { t as UiInputGroup_default } from "./chunks/UiInputGroup.js";
+export { UiInputGroup_default as default };

package/vue/UiInputGroup.vue

@@ -0,0 +1,113 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.disabled && 'disabled',
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div
+    data-component="ui-input-group"
+    v-bind="$attrs"
+    :data-ui-input-group-state="hostState || undefined"
+  >
+    <span class="affix"><slot name="prefix" /></span>
+    <span class="field"><slot /></span>
+    <span class="affix"><slot name="suffix" /></span>
+  </div>
+</template>
+
+<style scoped>
+/* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+[data-component~="ui-input-group"] {
+  --ui-input-border: transparent;
+  --ui-input-border-hover: transparent;
+  --ui-input-focus-border: transparent;
+  --ui-input-shadow: none;
+  --ui-input-focus-shadow: none;
+  --ui-input-radius: 0;
+  --ui-input-surface: transparent;
+
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size-md);
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-elevated);
+  box-shadow: var(--ui-control-inset);
+  overflow: hidden;
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-input-group"]:hover:not(:focus-within) {
+  border-color: var(--ui-text-secondary);
+}
+
+[data-component~="ui-input-group"]:focus-within {
+  border-color: var(--ui-accent-solid);
+  box-shadow:
+    var(--ui-control-inset),
+    var(--ui-control-focus-halo-shadow);
+}
+
+[data-component~="ui-input-group"]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+  border-color: var(--ui-danger-solid);
+}
+
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"] {
+  background: var(--ui-surface-muted);
+  box-shadow: none;
+}
+
+.field {
+  display: flex;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.affix {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  padding-inline: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-family: var(--ui-font-family-mono);
+  font-size: var(--ui-font-size-sm);
+  white-space: nowrap;
+}
+
+.affix:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-input-group"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiList.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
     layout?: 'rows' | 'grid';
 };
 declare var __VLS_1: {};
@@ -7,6 +8,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     layout: "rows" | "grid";
+    density: "comfortable" | "compact";
 }, {}, {}, {}, 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/UiList.vue

@@ -6,9 +6,11 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     layout?: 'rows' | 'grid'
   }>(),
   {
+    density: 'comfortable',
     layout: 'rows',
   },
 )
@@ -16,6 +18,7 @@ const props = withDefaults(
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     props.layout && `layout layout=${props.layout}`,
   ].filter(Boolean).join(' ')
 )
@@ -46,6 +49,15 @@ const hostState = computed(() =>
   list-style: none;
 }
 
+/* Compact passes its size to the items through private properties, which cross into each item. */
+[data-component~="ui-list"][data-ui-list-state~="density=compact"] {
+  --_ui-list-item-min-size: 0;
+  --_ui-list-item-padding-block: 0;
+  --_ui-list-item-padding-inline: 0;
+  --_ui-list-item-title-weight: var(--ui-font-normal);
+  gap: var(--ui-list-gap, var(--ui-space-2));
+}
+
 [data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
   display: grid;
   grid-template-columns:

package/vue/UiListItem.vue

@@ -55,9 +55,15 @@ const hostState = computed(() =>
   align-items: center;
   gap: var(--ui-list-item-gap, var(--ui-space-3));
   min-inline-size: 0;
-  min-block-size: var(--ui-control-size, 2.5rem);
-  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
-  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+  padding-block: var(
+    --ui-list-item-padding-block,
+    var(--_ui-list-item-padding-block, var(--ui-space-2))
+  );
+  padding-inline: var(
+    --ui-list-item-padding-inline,
+    var(--_ui-list-item-padding-inline, var(--ui-space-3))
+  );
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-primary);
   transition:
@@ -130,7 +136,7 @@ const hostState = computed(() =>
 
 .title {
   font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium);
+  font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
 

package/vue/UiTreeItem.vue

@@ -378,7 +378,7 @@ 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
    much — after the controls have taken their place over its end — and hands over the distance
-   and a duration from it, so a longer name travels no faster. */
+   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. */

package/vue/chunks/UiInput.js

@@ -61,6 +61,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-f84acfe8"]]);
+}), [["__scopeId", "data-v-12ffae5a"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -0,0 +1,31 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiInputGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-input-group-state"];
+var _hoisted_2 = { class: "affix" };
+var _hoisted_3 = { class: "field" };
+var _hoisted_4 = { class: "affix" };
+//#endregion
+//#region .build/vue/UiInputGroup.vue
+var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiInputGroup",
+	props: { disabled: {
+		type: Boolean,
+		default: false
+	} },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-input-group" }, _ctx.$attrs, { "data-ui-input-group-state": hostState.value || void 0 }), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)])
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-0a135fc1"]]);
+//#endregion
+export { UiInputGroup_default as t };

package/vue/chunks/UiList.js

@@ -7,11 +7,14 @@ var _hoisted_1 = ["data-ui-list-state"];
 var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiList",
-	props: { layout: { default: "rows" } },
+	props: {
+		density: { default: "comfortable" },
+		layout: { default: "rows" }
+	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.density && `density density=${props.density}`, props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("ul", mergeProps({
 				"data-component": "ui-list",
@@ -19,6 +22,6 @@ var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-935b1197"]]);
+}), [["__scopeId", "data-v-9e6cf63f"]]);
 //#endregion
 export { UiList_default as t };

package/vue/chunks/UiListItem.js

@@ -34,6 +34,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d61daf46"]]);
+}), [["__scopeId", "data-v-30896b18"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/chunks/UiTreeItem.js

@@ -234,6 +234,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3778b642"]]);
+}), [["__scopeId", "data-v-dab96891"]]);
 //#endregion
 export { UiTreeItem_default as t };