orio-ui 1.18.0 → 1.19.0

package/README.md

@@ -8,12 +8,12 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **26 Components** - Beautiful, accessible components ready to use
+✨ **32 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
 🎯 **TypeScript** - Fully typed for great developer experience
-🧪 **Tested** - 240+ unit tests for reliability
+🧪 **Tested** - 29 test suites for reliability
 📱 **Responsive** - Mobile-first design approach
 ♿ **Accessible** - ARIA-compliant components
 
@@ -66,7 +66,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (26)
+### Components (32)
 
 #### Form Controls
 
@@ -112,7 +112,7 @@ function handleClick() {
 
 - **Upload** - File upload component
 
-### Composables (8)
+### 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/   # 26 Vue components
-│   │   ├── composables/  # 8 composables
+│   │   ├── components/   # 32 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.0",
+  "version": "1.19.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/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" },
@@ -10,12 +11,15 @@ const props = defineProps({
   layout: { type: String, required: false, default: "vertical" },
   size: { type: String, required: false, default: "md" }
 });
+provideControlSize(toRef(props, "size"));
+const sizeStyle = computed(() => sizeTokens[props.size]);
 </script>
 
 <template>
   <div
     class="control"
     :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    :style="sizeStyle"
     v-bind="{
   ...$attrs,
   ...group ? { role: 'group', ...label ? { 'aria-labelledby': id } : {} } : {}
@@ -39,54 +43,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;

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/Selector.d.vue.ts

@@ -1,6 +1,6 @@
 import type { ControlProps } from "./ControlElement.vue.js";
 export type SelectableOption<T extends object = object> = string | T;
-export interface SelectProps<T extends object = object> extends ControlProps {
+export interface SelectProps extends ControlProps {
     options: SelectableOption[];
     multiple?: boolean;
     field?: string;
@@ -8,7 +8,7 @@ export interface SelectProps<T extends object = object> extends ControlProps {
     placeholder?: string;
 }
 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<(SelectProps<object> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps & {
         modelValue: SelectableOption | SelectableOption[] | null | undefined;
     }) & {
         "onUpdate:modelValue"?: ((value: SelectableOption<object> | SelectableOption<object>[] | null | undefined) => any) | undefined;

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 },
@@ -67,6 +68,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,7 +144,7 @@ const {
       </template>
 
       <template #content="{ toggle }">
-        <div class="selector-content">
+        <div class="selector-content" :style="controlTokens">
           <ul
             v-if="options.length"
             ref="listRef"

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

@@ -1,6 +1,6 @@
 import type { ControlProps } from "./ControlElement.vue.js";
 export type SelectableOption<T extends object = object> = string | T;
-export interface SelectProps<T extends object = object> extends ControlProps {
+export interface SelectProps extends ControlProps {
     options: SelectableOption[];
     multiple?: boolean;
     field?: string;
@@ -8,7 +8,7 @@ export interface SelectProps<T extends object = object> extends ControlProps {
     placeholder?: string;
 }
 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<(SelectProps<object> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps & {
         modelValue: SelectableOption | SelectableOption[] | null | undefined;
     }) & {
         "onUpdate:modelValue"?: ((value: SelectableOption<object> | SelectableOption<object>[] | null | undefined) => any) | undefined;

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;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";

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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",
@@ -21,13 +21,15 @@
   ],
   "scripts": {
     "dev": "vitepress dev docs",
+    "prebuild": "node scripts/update-counts.mjs",
     "build": "nuxt-module-build build",
     "prepack": "npm run build",
     "test": "vitest",
     "test:unit": "vitest run",
     "test:watch": "vitest watch",
     "docs:dev": "vitepress dev docs --host",
-    "docs:build": "vitepress build docs",
+    "predocs:dev": "cp CHANGELOG.md docs/changelog.md",
+    "docs:build": "cp CHANGELOG.md docs/changelog.md && vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",