@sewadah/selaras 0.7.1 → 0.9.0

package/dist/runtime/internal/color-mode-control.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef } from 'vue';
+import { useColorMode } from '#imports';
+export declare function useColorModeControl(): {
+    colorMode: ReturnType<typeof useColorMode>;
+    isDark: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+};

package/dist/runtime/internal/color-mode-control.js

@@ -0,0 +1,12 @@
+import { computed, onMounted, ref } from "vue";
+import { useColorMode } from "#imports";
+export function useColorModeControl() {
+  const colorMode = useColorMode();
+  const mounted = ref(false);
+  onMounted(() => mounted.value = true);
+  return {
+    colorMode,
+    isDark: computed(() => mounted.value && colorMode.value === "dark"),
+    isDisabled: computed(() => !mounted.value || colorMode.unknown || colorMode.forced)
+  };
+}

package/dist/runtime/internal/list-selection.d.ts

@@ -0,0 +1,15 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+export type ListSelection = SelectModelValue | SelectModelValue[] | undefined;
+export declare function selectionForMode(value: ListSelection, multiple: boolean): ListSelection;
+export declare function assertUniqueSelection(value: ListSelection): void;
+export declare function useListSelection(props: {
+    modelValue?: ListSelection;
+    defaultValue?: ListSelection;
+    multiple?: boolean;
+    disabled?: boolean;
+}, emit: (value: ListSelection) => void): {
+    selection: import("vue").ComputedRef<string | number | object | undefined>;
+    values: import("vue").ComputedRef<SelectModelValue[]>;
+    update: (value: ListSelection) => void;
+    reset: () => void;
+};

package/dist/runtime/internal/list-selection.js

@@ -0,0 +1,43 @@
+import { computed, getCurrentInstance, ref, watch } from "vue";
+export function selectionForMode(value, multiple) {
+  return multiple ? value === void 0 ? [] : Array.isArray(value) ? [...value] : [value] : Array.isArray(value) ? value[0] : value;
+}
+export function assertUniqueSelection(value) {
+  if (Array.isArray(value) && new Set(value).size !== value.length)
+    throw new TypeError("[selaras] List selection values must be unique.");
+}
+export function useListSelection(props, emit) {
+  const instance = getCurrentInstance();
+  const controlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+  const initial = Array.isArray(props.defaultValue) ? [...props.defaultValue] : props.defaultValue;
+  assertUniqueSelection(initial);
+  const local = ref(selectionForMode(initial, !!props.multiple));
+  const selection = computed(() => {
+    const value = controlled() ? props.modelValue : local.value;
+    if (controlled() && value !== void 0 && Array.isArray(value) !== !!props.multiple)
+      throw new TypeError("[selaras] List modelValue must be an array in multiple mode and a scalar in single mode.");
+    assertUniqueSelection(value);
+    return value;
+  });
+  void selection.value;
+  function update(value) {
+    if (props.disabled)
+      return;
+    assertUniqueSelection(value);
+    if (!controlled())
+      local.value = value;
+    emit(value);
+  }
+  watch(() => props.multiple, (multiple) => {
+    if (!controlled())
+      update(selectionForMode(local.value, !!multiple));
+  });
+  function reset() {
+    const value = selectionForMode(initial, !!props.multiple);
+    if (!controlled())
+      local.value = value;
+    emit(value);
+  }
+  const values = computed(() => selection.value === void 0 ? [] : Array.isArray(selection.value) ? selection.value : [selection.value]);
+  return { selection, values, update, reset };
+}

package/dist/runtime/theme/input.d.ts

@@ -42,6 +42,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -89,6 +91,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -136,6 +140,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/input.js

@@ -10,6 +10,8 @@ export const inputTheme = tv({
     // hardcoded here - hover's own color stays neutral regardless of
     // `color`, matching every other component's own hover state.
     base: "w-full rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leading: "absolute top-1/2 -translate-y-1/2 start-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute top-1/2 -translate-y-1/2 end-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     leadingIcon: "absolute start-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     // A separate slot from trailingIcon (not reused) - that one is a

package/dist/runtime/theme/listbox.d.ts

@@ -0,0 +1,131 @@
+export declare const listboxTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}>>;
+export type ListboxThemeSlots = keyof (typeof listboxTheme)['slots'];

package/dist/runtime/theme/listbox.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+export const listboxTheme = tv({
+  slots: {
+    root: "flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)]",
+    header: "flex items-center justify-between gap-2 border-b border-[var(--selaras-resolved-border-default)] px-3 py-2",
+    footer: "border-t border-[var(--selaras-resolved-border-default)] px-3 py-2",
+    searchWrapper: "flex items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-3",
+    searchInput: "h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
+    content: "max-h-72 min-h-0 overflow-y-auto p-1 outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
+    group: "",
+    groupLabel: "px-2 py-2 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    item: "my-0.5 flex w-full min-w-0 items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-2 outline-none cursor-pointer select-none transition-colors data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[state=checked]:bg-[var(--_selaras-color-subtle)] data-[state=checked]:text-[var(--_selaras-color-on-subtle)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    label: "truncate",
+    description: "text-xs text-[var(--selaras-resolved-text-muted)]",
+    itemContent: "flex min-w-0 flex-1 flex-col gap-0.5",
+    icon: "size-4 shrink-0",
+    indicator: "ms-auto flex size-4 shrink-0 items-center justify-center text-[var(--_selaras-color-indicator)]",
+    checkbox: "pointer-events-none flex size-4 shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] border border-[var(--selaras-resolved-border-default)] data-[state=checked]:border-[var(--_selaras-color-fill)] data-[state=checked]:bg-[var(--_selaras-color-fill)] data-[state=checked]:text-[var(--_selaras-color-on-fill)]",
+    empty: "px-3 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]"
+  },
+  variants: {
+    size: { sm: { item: "py-1.5 text-xs" }, md: { item: "text-sm" }, lg: { item: "py-2.5 text-base" } },
+    color: { primary: "", secondary: "", neutral: "", success: "", danger: "", info: "", warning: "" },
+    invalid: { true: { root: "border-[var(--_selaras-color-border)]" } }
+  },
+  defaultVariants: { size: "md", color: "primary" }
+});

package/dist/runtime/theme/select.d.ts

@@ -29,6 +29,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -76,6 +78,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -123,6 +127,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;

package/dist/runtime/theme/select.js

@@ -8,6 +8,8 @@ export const selectTheme = tv({
     // let the plain gray hover ring beat the primary one in the cascade,
     // since they're all equal-specificity pseudo-class/attribute selectors.
     trigger: "inline-flex w-full min-h-10 flex-wrap items-center gap-1.5 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] outline-none transition-[color,background-color,box-shadow] not-focus:not-focus-within:not-data-[state=open]:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] focus-within:ring-2 focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-2 data-[state=open]:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leading: "absolute start-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute end-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     value: "flex-1 truncate text-start text-[var(--selaras-resolved-text-default)] data-[placeholder]:text-[var(--selaras-resolved-text-muted)]",
     // Both chip display branches render a real Chip (see
     // ComboboxSelectBase.vue) instead of hand-rolled markup, styled/
@@ -40,7 +42,7 @@ export const selectTheme = tv({
     mobilePanel: "",
     viewport: "max-h-72 overflow-y-auto p-1",
     group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
-    item: "relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    item: "relative my-0.5 flex w-full min-w-0 items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none transition-colors data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[state=checked]:bg-[var(--_selaras-color-subtle)] data-[state=checked]:text-[var(--_selaras-color-on-subtle)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
     itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-indicator)]",
     empty: "px-2 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"

package/dist/runtime/theme/textarea.d.ts

@@ -51,6 +51,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -107,6 +109,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -163,6 +167,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/textarea.js

@@ -9,6 +9,8 @@ export const textareaTheme = tv({
     // way Input's own icons are - once content wraps past one line,
     // centering against the whole (variable) box height would drift the
     // icon away from the first line of text it's meant to sit beside.
+    leading: "absolute top-1 start-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute top-1 end-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     leadingIcon: "absolute start-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     clear: "absolute end-1 top-1 shrink-0 rounded-full"

package/dist/runtime/theme/transfer-list.d.ts

@@ -0,0 +1,74 @@
+export declare const transferListTheme: import("tailwind-variants").TVReturnType<{
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}, undefined, {
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}>>;
+export type TransferListThemeSlots = keyof (typeof transferListTheme)['slots'];

package/dist/runtime/theme/transfer-list.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const transferListTheme = tv({
+  slots: {
+    root: "flex min-w-0 gap-3",
+    panel: "flex min-w-0 flex-1 flex-col gap-2",
+    header: "flex items-center justify-between gap-2 text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    count: "text-xs font-normal text-[var(--selaras-resolved-text-muted)]",
+    listbox: "flex-1",
+    actions: "flex shrink-0 items-center justify-center gap-2",
+    action: "",
+    announcement: "sr-only"
+  },
+  variants: {
+    layout: {
+      auto: { root: "flex-col sm:flex-row", actions: "flex-row sm:flex-col" },
+      horizontal: { root: "flex-row", actions: "flex-col" },
+      vertical: { root: "flex-col", actions: "flex-row" }
+    }
+  },
+  defaultVariants: { layout: "auto" }
+});

package/dist/runtime/theme-config.d.ts

@@ -41,6 +41,7 @@ import type { inputTheme, InputThemeSlots } from './theme/input.js';
 import type { inputGroupTheme, InputGroupThemeSlots } from './theme/input-group.js';
 import type { inputNumberTheme, InputNumberThemeSlots } from './theme/input-number.js';
 import type { kbdTheme, KbdThemeSlots } from './theme/kbd.js';
+import type { listboxTheme, ListboxThemeSlots } from './theme/listbox.js';
 import type { modalTheme, ModalThemeSlots } from './theme/modal.js';
 import type { navigationMenuTheme, NavigationMenuThemeSlots } from './theme/navigation-menu.js';
 import type { pageAsideTheme, PageAsideThemeSlots } from './theme/page-aside.js';
@@ -72,6 +73,7 @@ import type { toastTheme, ToastThemeSlots } from './theme/toast.js';
 import type { toggleTheme, ToggleThemeSlots } from './theme/toggle.js';
 import type { toggleGroupTheme, ToggleGroupThemeSlots } from './theme/toggle-group.js';
 import type { tooltipTheme, TooltipThemeSlots } from './theme/tooltip.js';
+import type { transferListTheme, TransferListThemeSlots } from './theme/transfer-list.js';
 import type { treeTheme, TreeThemeSlots } from './theme/tree.js';
 import type { ColorRole, RuntimeTokenOverrides } from './utils/color-registry.js';
 type AccordionVariants = VariantProps<typeof accordionTheme>;
@@ -362,6 +364,14 @@ export interface ThemeComponentRegistry {
         slots: RadioGroupThemeSlots;
         conditions: WithRegisteredColor<Pick<RadioGroupVariants, 'color' | 'size' | 'orientation' | 'variant' | 'invalid'>>;
     };
+    listbox: {
+        slots: ListboxThemeSlots;
+        conditions: WithRegisteredColor<Pick<VariantProps<typeof listboxTheme>, 'color' | 'size' | 'invalid'>>;
+    };
+    transferList: {
+        slots: TransferListThemeSlots;
+        conditions: Pick<VariantProps<typeof transferListTheme>, 'layout'>;
+    };
     rating: {
         slots: RatingThemeSlots;
         conditions: WithRegisteredColor<Pick<RatingVariants, 'color' | 'size' | 'orientation'>>;

package/dist/runtime/types/index.d.ts

@@ -46,6 +46,7 @@ export type * from '../components/Input.vue';
 export type * from '../components/InputGroup.vue';
 export type * from '../components/InputNumber.vue';
 export type * from '../components/Kbd.vue';
+export type * from '../components/Listbox.vue';
 export type * from '../components/Modal.vue';
 export type * from '../components/NavigationMenu.vue';
 export type * from '../components/PageAside.vue';
@@ -83,6 +84,7 @@ export type * from '../components/Toast.vue';
 export type * from '../components/Toggle.vue';
 export type * from '../components/ToggleGroup.vue';
 export type * from '../components/Tooltip.vue';
+export type * from '../components/TransferList.vue';
 export type * from '../components/Tree.vue';
 export type { UseCommandPaletteReturn } from '../composables/use-command-palette.js';
 export type { UseConfirmOptions, UseConfirmReturn } from '../composables/use-confirm.js';
@@ -95,6 +97,7 @@ export type { ThemeComponentRegistry, ThemeConfiguration, ThemeDefaults, ThemeUi
 export type { ArrowConfig, RoundedArrowConfig } from '../utils/arrow.js';
 export type { AutocompleteValue } from '../utils/autocomplete-contracts.js';
 export type { BuiltinColorName, ColorRecipe, ColorRecipeInput, ColorRole, RuntimeColorOverrides, RuntimeThemeMode, RuntimeTokenOverrides } from '../utils/color-registry.js';
+export type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 export type { FunctionalTokenOverrides, GeometryTokenOverrides, ThemeTokenOverrides } from '../utils/functional-tokens.js';
 export type { IconRegistry } from '../utils/icons.js';
 export { defaultIcons } from '../utils/icons.js';

package/dist/runtime/utils/field-adornments.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'vue';
+export interface FieldAdornmentSlotProps {
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    /** Button size that fits inside the field. */
+    buttonSize: 'sm' | 'md';
+}
+/** Reserve the rendered width of custom content, including dynamic suffixes. */
+export declare function useFieldAdornments(): {
+    leading: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    trailing: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    padding: (hasLeading: boolean, hasTrailing: boolean, trailingExtra?: string) => CSSProperties | undefined;
+    clearOffset: () => CSSProperties;
+};

package/dist/runtime/utils/field-adornments.js

@@ -0,0 +1,36 @@
+import { shallowRef, watchEffect } from "vue";
+export function useFieldAdornments() {
+  const leading = shallowRef(null);
+  const trailing = shallowRef(null);
+  const leadingWidth = shallowRef();
+  const trailingWidth = shallowRef();
+  watchEffect((onCleanup) => {
+    const start = leading.value;
+    const end = trailing.value;
+    function measure() {
+      leadingWidth.value = start ? `${start.getBoundingClientRect().width}px` : void 0;
+      trailingWidth.value = end ? `${end.getBoundingClientRect().width}px` : void 0;
+    }
+    measure();
+    if (!start && !end || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(measure);
+    if (start)
+      observer.observe(start);
+    if (end)
+      observer.observe(end);
+    onCleanup(() => observer.disconnect());
+  }, { flush: "post" });
+  function padding(hasLeading, hasTrailing, trailingExtra = "0rem") {
+    if (!hasLeading && !hasTrailing)
+      return;
+    return {
+      paddingInlineStart: hasLeading ? `calc(${leadingWidth.value ?? "2rem"} + 0.5rem)` : void 0,
+      paddingInlineEnd: hasTrailing ? `calc(${trailingWidth.value ?? "2rem"} + 0.5rem + ${trailingExtra})` : void 0
+    };
+  }
+  function clearOffset() {
+    return { insetInlineEnd: `calc(${trailingWidth.value ?? "2rem"} + 0.25rem)` };
+  }
+  return { leading, trailing, padding, clearOffset };
+}

package/dist/runtime/utils/listbox-contracts.d.ts

@@ -0,0 +1,31 @@
+import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { SelectEntry, SelectEntryGroup, SelectEntryItem, SelectIdentity, SelectModel, SelectProps } from './select-contracts.js';
+import type { UiProp } from './ui.js';
+export interface ListboxProps<Entry extends SelectEntry = SelectEntry, Key extends string = 'value', Multiple extends boolean = false> extends Pick<SelectProps<Entry, Key, Multiple>, 'items' | 'modelValue' | 'defaultValue' | 'valueKey' | 'labelKey' | 'multiple' | 'searchable' | 'searchTerm' | 'virtualize' | 'disabled' | 'loading' | 'invalid' | 'size' | 'color' | 'id' | 'name' | 'form' | 'required'> {
+    label?: string;
+    descriptionKey?: keyof SelectEntryItem<Entry> & string;
+    selectionBehavior?: 'toggle' | 'replace';
+    checkbox?: boolean;
+    selectAll?: boolean;
+    ui?: UiProp<ListboxThemeSlots>;
+}
+export interface ListboxEmits<Entry extends SelectEntry = SelectEntry, Key extends string = 'value', Multiple extends boolean = false> {
+    'update:modelValue': [value: SelectModel<SelectIdentity<Entry, Key>, Multiple>];
+    'update:searchTerm': [value: string];
+}
+export interface ListboxItemSlot<Entry extends SelectEntry> {
+    item: SelectEntryItem<Entry>;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface ListboxSlots<Entry extends SelectEntry> {
+    'item'?: (props: ListboxItemSlot<Entry>) => any;
+    'group'?: (props: {
+        group: SelectEntryGroup<Entry>;
+    }) => any;
+    'header'?: () => any;
+    'footer'?: () => any;
+    'empty'?: () => any;
+    'empty-filter'?: () => any;
+}

package/dist/runtime/utils/messages.d.ts

@@ -44,6 +44,13 @@ export interface MessageRegistry {
     increment: string;
     decrement: string;
     noOptions: string;
+    selectAll: string;
+    transferSource: string;
+    transferTarget: string;
+    moveToTarget: string;
+    moveToSource: string;
+    listSelectionCount: (selected: number, total: number) => string;
+    transferItems: (count: number, target: string) => string;
     noResultsFound: string;
     createOption: (value: string) => string;
     noData: string;

package/dist/runtime/utils/messages.js

@@ -44,6 +44,13 @@ export const defaultMessages = {
   increment: "Increment",
   decrement: "Decrement",
   noOptions: "No options",
+  selectAll: "Select all",
+  transferSource: "Available",
+  transferTarget: "Assigned",
+  moveToTarget: "Add selected",
+  moveToSource: "Remove selected",
+  listSelectionCount: (selected, total) => `${selected} of ${total} selected`,
+  transferItems: (count, target) => `${count} item${count === 1 ? "" : "s"} moved to ${target}`,
   noResultsFound: "No results found",
   createOption: (value) => `Create "${value}"`,
   noData: "No data",

package/dist/runtime/utils/select-contracts.d.ts

@@ -2,6 +2,7 @@ import type { VariantProps } from 'tailwind-variants';
 import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from './arrow.js';
 import type { ColorRole } from './color-registry.js';
+import type { FieldAdornmentSlotProps } from './field-adornments.js';
 import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
@@ -94,6 +95,8 @@ export interface SelectEmits<Entry extends SelectEntry = {
     'update:searchTerm': [value: string];
 }
 export interface SelectSlots<Entry extends SelectEntry, Key extends string = 'value'> {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
     'item'?: (props: {
         item: SelectEntryItem<Entry>;
     }) => any;

package/dist/runtime/utils/slot-children.d.ts

@@ -0,0 +1,2 @@
+import type { VNode } from 'vue';
+export declare function flattenSlotChildren(vnodes: VNode[]): VNode[];