orio-ui 1.18.1 → 1.20.0

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **31 Components** - Beautiful, accessible components ready to use
+✨ **34 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
@@ -66,7 +66,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (31)
+### Components (34)
 
 #### Form Controls
 
@@ -112,7 +112,7 @@ function handleClick() {
 
 - **Upload** - File upload component
 
-### Composables (10)
+### Composables (11)
 
 - **useTheme** - Theme and color mode management
 - **useModal** - Modal state with animation origin tracking
@@ -187,8 +187,8 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 31 Vue components
-│   │   ├── composables/  # 10 composables
+│   │   ├── components/   # 34 Vue components
+│   │   ├── composables/  # 11 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry
 │   └── module.ts         # Nuxt Module definition

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.18.1",
+  "version": "1.20.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/AnimatedContainer.d.vue.ts

@@ -2,7 +2,7 @@ interface Props {
     direction?: "column" | "row";
 }
 declare var __VLS_1: {
-    play: () => void;
+    play: () => Promise<void>;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/runtime/components/AnimatedContainer.vue.d.ts

@@ -2,7 +2,7 @@ interface Props {
     direction?: "column" | "row";
 }
 declare var __VLS_1: {
-    play: () => void;
+    play: () => Promise<void>;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/runtime/components/Button.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { loading, disabled } = toRefs(props);
 const slots = useSlots();

package/dist/runtime/components/CheckBox.vue

@@ -9,12 +9,13 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element v-bind="props" class="checkbox">
+  <orio-control-element v-bind="props" class="checkbox" fill>
     <label class="checkbox-label">
       <input
         v-model="modelValue"
@@ -47,6 +48,9 @@ const props = defineProps({
 .checkbox {
   --box-size: var(--control-icon-size, 1rem);
 }
+.checkbox .checkbox-label {
+  vertical-align: baseline;
+}
 .checkbox-label {
   position: relative;
   user-select: none;
@@ -60,7 +64,6 @@ const props = defineProps({
   position: absolute;
   inset: 0;
   width: var(--box-size);
-  height: 1rem;
   margin: 0;
   opacity: 0;
 }

package/dist/runtime/components/CheckboxGroup.vue

@@ -5,7 +5,8 @@ const props = defineProps({
   error: { type: [String, null], required: false, default: null },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
 function isChecked(value) {

package/dist/runtime/components/ControlElement.d.vue.ts

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ControlElement.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { useId } from "vue";
+import { computed, toRef, useId } from "vue";
+import { provideControlSize, sizeTokens } from "../composables/useControlSize";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   appearance: { type: String, required: false, default: "normal" },
@@ -8,14 +9,23 @@ const props = defineProps({
   id: { type: String, required: false, default: () => useId() },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false, default: false }
 });
+provideControlSize(toRef(props, "size"));
+const sizeStyle = computed(() => sizeTokens[props.size]);
 </script>
 
 <template>
   <div
     class="control"
-    :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    :class="[
+  appearance,
+  layout,
+  `size-${size}`,
+  { 'has-error': error, group, fill }
+]"
+    :style="sizeStyle"
     v-bind="{
   ...$attrs,
   ...group ? { role: 'group', ...label ? { 'aria-labelledby': id } : {} } : {}
@@ -39,54 +49,6 @@ const props = defineProps({
 </template>
 
 <style scoped>
-.control {
-  --control-font-size: var(--font-md);
-  --control-label-font-size: var(--font-sm);
-  --control-py: 0.5rem;
-  --control-px: 0.75rem;
-  --control-gap: 0.5rem;
-  --control-radius: var(--border-radius-md);
-  --control-icon-size: 1rem;
-  --control-inner-block-start: 1.25rem;
-  --control-inner-block-end: 0.2rem;
-  --control-label-block-start: 0.25rem;
-}
-.control.size-sm {
-  --control-font-size: var(--font-sm);
-  --control-label-font-size: var(--font-xs);
-  --control-py: 0.25rem;
-  --control-px: 0.5rem;
-  --control-gap: 0.25rem;
-  --control-radius: var(--border-radius-sm);
-  --control-icon-size: 0.75rem;
-  --control-inner-block-start: 1rem;
-  --control-inner-block-end: 0.1rem;
-  --control-label-block-start: 0.2rem;
-}
-.control.size-lg {
-  --control-font-size: var(--font-lg);
-  --control-label-font-size: var(--font-md);
-  --control-py: 0.625rem;
-  --control-px: 1rem;
-  --control-gap: 0.5rem;
-  --control-radius: var(--border-radius-md);
-  --control-icon-size: 1.25rem;
-  --control-inner-block-start: 1.1rem;
-  --control-inner-block-end: 0.2rem;
-  --control-label-block-start: 0.25rem;
-}
-.control.size-xl {
-  --control-font-size: var(--font-xl);
-  --control-label-font-size: var(--font-lg);
-  --control-py: 0.75rem;
-  --control-px: 1.25rem;
-  --control-gap: 0.75rem;
-  --control-radius: var(--border-radius-lg);
-  --control-icon-size: 1.5rem;
-  --control-inner-block-start: 1.5rem;
-  --control-inner-block-end: 0;
-  --control-label-block-start: 0.25rem;
-}
 .control {
   margin: 0.5rem;
   display: flex;
@@ -104,6 +66,12 @@ const props = defineProps({
   color: var(--color-danger);
   font-size: var(--control-label-font-size);
 }
+.control.fill .slot-wrapper {
+  display: flex;
+}
+.control.fill .slot-wrapper > * {
+  flex: 1;
+}
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }

package/dist/runtime/components/ControlElement.vue.d.ts

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Form.d.vue.ts

@@ -0,0 +1,33 @@
+export interface FormProps {
+    /**
+     * Disables all form controls and the submit button
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading state (e.g. during async submission)
+     */
+    loading?: boolean;
+}
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+        onSubmit?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "submit") => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Form.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { useSlots, cloneVNode } from "vue";
+const { disabled = false, loading = false } = defineProps({
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false }
+});
+const modelValue = defineModel({ type: null });
+const emit = defineEmits(["submit"]);
+const slots = useSlots();
+function getByPath(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+function setByPath(obj, path, value) {
+  const keys = path.split(".");
+  const lastKey = keys.pop();
+  const parent = keys.reduce((current, key) => current?.[key], obj);
+  if (parent) parent[lastKey] = value;
+}
+function wrapSlotFn(fn) {
+  return (...args) => bindFields(fn(...args));
+}
+function processChildren(children) {
+  if (Array.isArray(children)) {
+    return bindFields(children);
+  }
+  if (typeof children === "function") {
+    return wrapSlotFn(children);
+  }
+  if (children && typeof children === "object") {
+    const slotObj = children;
+    return Object.fromEntries(
+      Object.entries(slotObj).map(([key, fn]) => [key, wrapSlotFn(fn)])
+    );
+  }
+  return children;
+}
+function bindFields(vnodes) {
+  return vnodes.map((vnode) => {
+    const name = vnode.props?.name;
+    if (name && modelValue.value && getByPath(modelValue.value, name) !== void 0) {
+      return cloneVNode(vnode, {
+        modelValue: getByPath(modelValue.value, name),
+        "onUpdate:modelValue": (newValue) => {
+          setByPath(modelValue.value, name, newValue);
+        }
+      });
+    }
+    if (vnode.children) {
+      const clone = cloneVNode(vnode);
+      clone.children = processChildren(vnode.children);
+      return clone;
+    }
+    return vnode;
+  });
+}
+function renderSlot() {
+  const children = slots.default?.();
+  if (!children || !modelValue.value) return children;
+  return bindFields(children);
+}
+const slotRenderer = () => renderSlot();
+function onSubmit(e) {
+  e.preventDefault();
+  if (disabled || loading) return;
+  emit("submit");
+}
+</script>
+
+<template>
+  <form
+    :class="{ disabled, loading }"
+    :aria-disabled="disabled || void 0"
+    :aria-busy="loading || void 0"
+    novalidate
+    @submit="onSubmit"
+  >
+    <fieldset v-if="disabled" disabled>
+      <component :is="slotRenderer" />
+    </fieldset>
+    <component :is="slotRenderer" v-else />
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+form.disabled {
+  opacity: 0.6;
+}
+form.loading {
+  pointer-events: none;
+}
+form fieldset {
+  display: contents;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+</style>

package/dist/runtime/components/Form.vue.d.ts

@@ -0,0 +1,33 @@
+export interface FormProps {
+    /**
+     * Disables all form controls and the submit button
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading state (e.g. during async submission)
+     */
+    loading?: boolean;
+}
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+        onSubmit?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "submit") => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Input.vue

@@ -6,7 +6,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>

package/dist/runtime/components/ListItem.d.vue.ts

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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/dist/runtime/components/ListItem.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useSlots } from "vue";
+const { selectable = false } = defineProps({
+  selectable: { type: Boolean, required: false }
+});
+const slots = useSlots();
+const selected = defineModel("selected", { type: Boolean });
+function toggle() {
+  if (!selectable) return;
+  selected.value = !selected.value;
+}
+function onKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle();
+  }
+}
+</script>
+
+<template>
+  <li
+    class="list-item"
+    :class="{ selectable, selected }"
+    :tabindex="selectable ? 0 : void 0"
+    :role="selectable ? 'checkbox' : void 0"
+    :aria-checked="selectable ? selected : void 0"
+    @click="toggle"
+    @keydown="onKeydown"
+  >
+    <div v-if="!!slots.start || selectable" class="boundary">
+      <slot name="start">
+        <orio-check-box :model-value="selected" />
+      </slot>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+    <div v-if="!!slots.end" class="boundary">
+      <slot name="end" />
+    </div>
+  </li>
+</template>
+
+<style scoped>
+.list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  user-select: none;
+}
+.list-item.selectable {
+  cursor: pointer;
+}
+.list-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.list-item.selected {
+  background-color: var(--color-accent);
+  color: var(--color-accent-soft-darker);
+}
+.list-item:hover:not(.selected) {
+  background-color: var(--color-surface);
+}
+.list-item .content {
+  flex-grow: 1;
+}
+.list-item .boundary {
+  display: flex;
+}
+</style>

package/dist/runtime/components/ListItem.vue.d.ts

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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/dist/runtime/components/NavButton.vue

@@ -10,7 +10,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { disabled, active } = toRefs(props);
 const slots = useSlots();

package/dist/runtime/components/NumberInput/Horizontal.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/Vertical.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/index.vue

@@ -12,7 +12,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });

package/dist/runtime/components/RadioButton.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/Selector.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, toRef, toRefs } from "vue";
+import { useControlTokens } from "../composables/useControlSize";
 import { useListKeyboard } from "../composables/useListKeyboard";
 const props = defineProps({
   options: { type: Array, required: true },
@@ -13,7 +14,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { field, optionName, placeholder } = toRefs(props);
 const modelValue = defineModel({ type: null, ...{
@@ -67,6 +69,7 @@ function getOptionKey(option) {
   if (typeof option === "string") return option;
   return String(option[key.value]);
 }
+const { tokens: controlTokens } = useControlTokens(toRef(props, "size"));
 const controlProps = computed(() => {
   const {
     options: _options,
@@ -142,22 +145,21 @@ const {
       </template>
 
       <template #content="{ toggle }">
-        <div class="selector-content">
+        <div class="selector-content" :style="controlTokens">
           <ul
             v-if="options.length"
             ref="listRef"
             role="listbox"
             :aria-multiselectable="multiple || void 0"
           >
-            <li
+            <orio-list-item
               v-for="(option, index) in options"
               :key="getOptionKey(option)"
+              :selectable="multiple"
+              :selected="isOptionSelected(option)"
               role="option"
               :aria-selected="isOptionSelected(option)"
-              :class="{
-  selected: isOptionSelected(option),
-  highlighted: index === highlightedIndex
-}"
+              :class="{ highlighted: index === highlightedIndex }"
               @click="toggleOption(option, toggle)"
               @mouseenter="highlightedIndex = index"
             >
@@ -170,7 +172,7 @@ const {
               >
                 {{ getOptionLabel(option) }}
               </slot>
-            </li>
+            </orio-list-item>
           </ul>
           <slot v-else name="no-options">
             <orio-empty-state title="No options found" size="small" />
@@ -230,19 +232,12 @@ const {
   padding: 0;
   margin: 0;
 }
-.selector-content ul li {
+.selector-content ul :deep(.list-item) {
   padding: var(--control-py) var(--control-px);
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--color-text);
-}
-.selector-content ul li:hover, .selector-content ul li.highlighted {
-  background-color: var(--color-surface); /* neutral lift */
 }
-.selector-content ul li.selected {
-  background-color: var(--color-accent);
-  color: var(--color-accent-soft-darker);
-  font-weight: 400;
+.selector-content ul :deep(.list-item).highlighted:not(.selected) {
+  background-color: var(--color-surface);
 }
 
 .trigger-content {

package/dist/runtime/components/SwitchButton.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
 function toggle() {

package/dist/runtime/components/Tag.d.vue.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Tag.vue

@@ -1,6 +1,7 @@
 <script setup>
 defineProps({
   text: { type: String, required: true },
+  id: { type: String, required: false },
   variant: { type: String, required: false, default: "neutral" }
 });
 </script>

package/dist/runtime/components/Tag.vue.d.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/TaggableSelector.d.vue.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/TaggableSelector.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  options: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  field: { type: String, required: false },
+  optionName: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const modelValue = defineModel({ type: Array });
+</script>
+
+<template>
+  <orio-selector v-bind="props" v-model="modelValue" multiple>
+    <template #trigger-label>
+      <orio-tag
+        v-for="tag in modelValue"
+        :key="tag.id"
+        :text="tag.text"
+        :variant="tag.variant"
+      />
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+:deep(.trigger-content){display:flex;flex-wrap:wrap;gap:.5rem;text-align:left}
+</style>

package/dist/runtime/components/TaggableSelector.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Textarea.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/gallery/Carousel.vue

@@ -25,23 +25,23 @@ const carousel = useTemplateRef("carousel");
 const measureContainer = useTemplateRef("measureContainer");
 const { width: carouselWidth } = useElementSize(carousel);
 const { width: contentWidth, height: contentHeight } = useElementSize(measureContainer);
-const contentAspectRatio = computed(() => {
-  if (!contentWidth.value || !contentHeight.value) return 1;
-  return contentWidth.value / contentHeight.value;
-});
+const measureWidth = computed(
+  () => isDynamicHeight.value ? `${rawSizes.value.width}px` : "max-content"
+);
+const measureHeight = computed(
+  () => isDynamicWidth.value ? `${rawSizes.value.height}px` : "max-content"
+);
 const calculatedSize = computed(() => {
   const { width, height } = rawSizes.value;
   if (isDynamicHeight.value) {
-    const dynamicHeight = contentAspectRatio.value ? width / contentAspectRatio.value : width;
     return {
       width: `${width}px`,
-      height: `${dynamicHeight}px`
+      height: contentHeight.value ? `${contentHeight.value}px` : `${width}px`
     };
   }
   if (isDynamicWidth.value) {
-    const dynamicWidth = contentAspectRatio.value ? height * contentAspectRatio.value : height;
     return {
-      width: `${dynamicWidth}px`,
+      width: contentWidth.value ? `${contentWidth.value}px` : `${height}px`,
       height: `${height}px`
     };
   }
@@ -157,5 +157,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.carousel-wrapper{display:block;overflow:hidden;position:relative}.carousel-measure{height:-moz-max-content;height:max-content;pointer-events:none;position:absolute;visibility:hidden;width:-moz-max-content;width:max-content}.carousel-measure img{display:block}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item img{height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
+.carousel-wrapper{display:block;position:relative}.carousel-measure{height:v-bind(measureHeight);left:-9999px;pointer-events:none;position:fixed;visibility:hidden;width:v-bind(measureWidth)}.carousel-measure :deep(>*){display:block;height:100%;width:100%}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item :deep(>*){height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
 </style>

package/dist/runtime/composables/useControlSize.d.ts

@@ -0,0 +1,9 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { ControlSize } from "../components/ControlElement.vue.js";
+declare const sizeTokens: Record<ControlSize, Record<string, string>>;
+export declare function provideControlSize(size: Ref<ControlSize> | ComputedRef<ControlSize>): void;
+export declare function useControlTokens(explicit?: Ref<ControlSize | undefined> | ComputedRef<ControlSize | undefined>, fallback?: ControlSize): {
+    size: ComputedRef<ControlSize>;
+    tokens: ComputedRef<Record<string, string>>;
+};
+export { sizeTokens };

package/dist/runtime/composables/useControlSize.js

@@ -0,0 +1,67 @@
+import {
+  computed,
+  inject,
+  provide,
+  ref
+} from "vue";
+const CONTROL_SIZE_KEY = Symbol("control-size");
+const sizeTokens = {
+  sm: {
+    "--control-font-size": "var(--font-sm)",
+    "--control-label-font-size": "var(--font-xs)",
+    "--control-py": "0.25rem",
+    "--control-px": "0.5rem",
+    "--control-gap": "0.25rem",
+    "--control-radius": "var(--border-radius-sm)",
+    "--control-icon-size": "0.75rem",
+    "--control-inner-block-start": "1rem",
+    "--control-inner-block-end": "0.1rem",
+    "--control-label-block-start": "0.2rem"
+  },
+  md: {
+    "--control-font-size": "var(--font-md)",
+    "--control-label-font-size": "var(--font-sm)",
+    "--control-py": "0.5rem",
+    "--control-px": "0.75rem",
+    "--control-gap": "0.5rem",
+    "--control-radius": "var(--border-radius-md)",
+    "--control-icon-size": "1rem",
+    "--control-inner-block-start": "1.25rem",
+    "--control-inner-block-end": "0.2rem",
+    "--control-label-block-start": "0.25rem"
+  },
+  lg: {
+    "--control-font-size": "var(--font-lg)",
+    "--control-label-font-size": "var(--font-md)",
+    "--control-py": "0.625rem",
+    "--control-px": "1rem",
+    "--control-gap": "0.5rem",
+    "--control-radius": "var(--border-radius-md)",
+    "--control-icon-size": "1.25rem",
+    "--control-inner-block-start": "1.1rem",
+    "--control-inner-block-end": "0.2rem",
+    "--control-label-block-start": "0.25rem"
+  },
+  xl: {
+    "--control-font-size": "var(--font-xl)",
+    "--control-label-font-size": "var(--font-lg)",
+    "--control-py": "0.75rem",
+    "--control-px": "1.25rem",
+    "--control-gap": "0.75rem",
+    "--control-radius": "var(--border-radius-lg)",
+    "--control-icon-size": "1.5rem",
+    "--control-inner-block-start": "1.5rem",
+    "--control-inner-block-end": "0",
+    "--control-label-block-start": "0.25rem"
+  }
+};
+export function provideControlSize(size) {
+  provide(CONTROL_SIZE_KEY, size);
+}
+export function useControlTokens(explicit, fallback = "md") {
+  const injected = inject(CONTROL_SIZE_KEY, ref(fallback));
+  const size = computed(() => explicit?.value ?? injected.value);
+  const tokens = computed(() => sizeTokens[size.value]);
+  return { size, tokens };
+}
+export { sizeTokens };

package/dist/runtime/composables/useSound.d.ts

@@ -1,7 +1,9 @@
 export interface SoundOptions {
     src?: string;
     volume?: number;
+    prefetch?: boolean;
 }
 export declare function useSound(options?: SoundOptions): {
-    play: () => void;
+    play: () => Promise<void>;
+    prefetch: () => void;
 };

package/dist/runtime/composables/useSound.js

@@ -1,13 +1,53 @@
 const DEFAULT_SOUND = "https://cdn.jsdelivr.net/gh/oriondor/orio-ui@main/docs/public/sounds/mechanical-switch.wav";
+let audioContext = null;
+const bufferCache = /* @__PURE__ */ new Map();
+function getAudioContext() {
+  if (typeof window === "undefined") return null;
+  if (audioContext) return audioContext;
+  const ContextClass = window.AudioContext ?? window.webkitAudioContext;
+  if (!ContextClass) return null;
+  try {
+    audioContext = new ContextClass();
+  } catch (e) {
+    console.error("[useSound] Failed to create AudioContext:", e);
+    return null;
+  }
+  return audioContext;
+}
+function fetchBuffer(ctx, src) {
+  const cached = bufferCache.get(src);
+  if (cached) return cached;
+  const promise = fetch(src).then((response) => response.arrayBuffer()).then((arrayBuffer) => ctx.decodeAudioData(arrayBuffer)).catch((e) => {
+    console.error(`[useSound] Failed to load sound "${src}":`, e);
+    bufferCache.delete(src);
+    return null;
+  });
+  bufferCache.set(src, promise);
+  return promise;
+}
 export function useSound(options = {}) {
-  const { src = DEFAULT_SOUND, volume = 0.3 } = options;
-  const audio = typeof window !== "undefined" ? new Audio(src) : null;
-  const play = () => {
-    if (!audio) return;
-    audio.currentTime = 0;
-    audio.volume = volume;
-    audio.play().catch(() => {
-    });
+  const { src = DEFAULT_SOUND, volume = 0.3, prefetch = false } = options;
+  const warmUp = () => {
+    const ctx = getAudioContext();
+    if (ctx) fetchBuffer(ctx, src);
+  };
+  if (prefetch) warmUp();
+  const play = async () => {
+    const ctx = getAudioContext();
+    if (!ctx) return;
+    if (ctx.state === "suspended") {
+      await ctx.resume().catch(() => {
+      });
+    }
+    const buffer = await fetchBuffer(ctx, src);
+    if (!buffer) return;
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+    const gainNode = ctx.createGain();
+    gainNode.gain.value = volume;
+    source.connect(gainNode);
+    gainNode.connect(ctx.destination);
+    source.start(0);
   };
-  return { play };
+  return { play, prefetch: warmUp };
 }

package/dist/runtime/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AnimatedContainer } from "./components/AnimatedContainer.vue.js";
 export { default as Button } from "./components/Button.vue.js";
+export { default as Form, type FormProps } from "./components/Form.vue.js";
 export { default as NavButton } from "./components/NavButton.vue.js";
 export { default as Input } from "./components/Input.vue.js";
 export { default as NumberInput } from "./components/NumberInput/index.vue.js";
@@ -13,6 +14,7 @@ export { default as SwitchButton } from "./components/SwitchButton.vue.js";
 export { default as DatePicker } from "./components/DatePicker.vue.js";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";
 export { default as Selector } from "./components/Selector.vue.js";
+export { default as TaggableSelector } from "./components/TaggableSelector.vue.js";
 export { default as Tag } from "./components/Tag.vue.js";
 export { default as Badge } from "./components/Badge.vue.js";
 export { default as Banner } from "./components/Banner.vue.js";
@@ -21,7 +23,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue.js";
 export { default as Modal } from "./components/Modal.vue.js";
 export { default as Popover } from "./components/Popover.vue.js";
 export { default as Tooltip } from "./components/Tooltip.vue.js";
-export { default as Upload } from "./components/Upload/index.vue.js";
+export { default as Upload } from "./components/upload/index.vue.js";
 export { default as EmptyState } from "./components/EmptyState.vue.js";
 export { default as DashedContainer } from "./components/DashedContainer.vue.js";
 export { default as ControlElement } from "./components/ControlElement.vue.js";
@@ -29,6 +31,7 @@ export { default as GalleryCarousel } from "./components/gallery/Carousel.vue.js
 export { default as ViewText } from "./components/view/Text.vue.js";
 export { default as ViewDates } from "./components/view/Dates.vue.js";
 export { default as ViewSeparator } from "./components/view/Separator.vue.js";
+export { default as ListItem } from "./components/ListItem.vue.js";
 export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from "./composables/useApi.js";
 export { useFuzzySearch } from "./composables/useFuzzySearch.js";
 export { useModal, type ModalProps, type OriginRect, } from "./composables/useModal.js";

package/dist/runtime/index.js

@@ -1,5 +1,6 @@
 export { default as AnimatedContainer } from "./components/AnimatedContainer.vue";
 export { default as Button } from "./components/Button.vue";
+export { default as Form } from "./components/Form.vue";
 export { default as NavButton } from "./components/NavButton.vue";
 export { default as Input } from "./components/Input.vue";
 export { default as NumberInput } from "./components/NumberInput/index.vue";
@@ -17,6 +18,7 @@ export { default as SwitchButton } from "./components/SwitchButton.vue";
 export { default as DatePicker } from "./components/DatePicker.vue";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue";
 export { default as Selector } from "./components/Selector.vue";
+export { default as TaggableSelector } from "./components/TaggableSelector.vue";
 export { default as Tag } from "./components/Tag.vue";
 export { default as Badge } from "./components/Badge.vue";
 export { default as Banner } from "./components/Banner.vue";
@@ -25,7 +27,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
 export { default as Modal } from "./components/Modal.vue";
 export { default as Popover } from "./components/Popover.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
-export { default as Upload } from "./components/Upload/index.vue";
+export { default as Upload } from "./components/upload/index.vue";
 export { default as EmptyState } from "./components/EmptyState.vue";
 export { default as DashedContainer } from "./components/DashedContainer.vue";
 export { default as ControlElement } from "./components/ControlElement.vue";
@@ -33,6 +35,7 @@ export { default as GalleryCarousel } from "./components/gallery/Carousel.vue";
 export { default as ViewText } from "./components/view/Text.vue";
 export { default as ViewDates } from "./components/view/Dates.vue";
 export { default as ViewSeparator } from "./components/view/Separator.vue";
+export { default as ListItem } from "./components/ListItem.vue";
 export {
   useApi
 } from "./composables/useApi.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.18.1",
+  "version": "1.20.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",