orio-ui 1.12.2 → 1.13.0

package/dist/module.json

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

package/dist/runtime/assets/css/main.css

@@ -1 +1 @@
-@import "./colors.css";@import "./variables.css";@import "./animation.css";@import "./scroll.css";@import "./cool-gradient-hover.css";*,:after,:before{box-sizing:border-box}
+@import "./colors.css";@import "./variables.css";@import "./animation.css";@import "./scroll.css";@import "./cool-gradient-hover.css";*,:after,:before{box-sizing:border-box;line-height:1.5}

package/dist/runtime/assets/css/variables.css

@@ -1 +1 @@
-:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px}
+:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}

package/dist/runtime/components/Badge.vue

@@ -23,5 +23,5 @@ const isDot = computed(() => !hasDefaultContent.value);
 </template>
 
 <style scoped>
-.badge-wrapper{display:inline-flex;position:relative}.badge{align-items:center;border:1px solid transparent;border-radius:var(--border-radius-sm);display:inline-flex;font-size:.75rem;font-weight:600;justify-content:center;line-height:1.25;padding:.125rem .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.badge.positioned{position:absolute;right:.5rem;top:.5rem;transform:translate(50%,-50%)}.badge.pill{border-radius:var(--border-radius-pill)}.badge.dot{border-radius:50%;height:.5rem;min-height:.5rem;min-width:.5rem;padding:0;width:.5rem}.badge.primary{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.badge.danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger-ink)}.badge.alert{background-color:var(--color-alert);border-color:var(--color-alert);color:var(--color-alert-ink)}.badge.grey{background-color:var(--color-surface);border-color:var(--color-border);color:var(--color-muted)}
+.badge-wrapper{display:inline-flex;position:relative}.badge{align-items:center;border:1px solid transparent;border-radius:var(--border-radius-sm);display:inline-flex;font-size:var(--font-sm);font-weight:600;justify-content:center;padding:.125rem .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.badge.positioned{position:absolute;right:.5rem;top:.5rem;transform:translate(50%,-50%)}.badge.pill{border-radius:var(--border-radius-pill)}.badge.dot{border-radius:50%;height:.5rem;min-height:.5rem;min-width:.5rem;padding:0;width:.5rem}.badge.primary{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.badge.danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger-ink)}.badge.alert{background-color:var(--color-alert);border-color:var(--color-alert);color:var(--color-alert-ink)}.badge.grey{background-color:var(--color-surface);border-color:var(--color-border);color:var(--color-muted)}
 </style>

package/dist/runtime/components/Button.vue

@@ -58,8 +58,6 @@ button {
   border: 1px solid transparent;
   border-radius: var(--border-radius-md);
   padding: 8px 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;

package/dist/runtime/components/CheckBox.vue

@@ -46,7 +46,6 @@ defineProps({
   align-items: center;
   gap: 0.4rem;
   cursor: pointer;
-  font-size: 0.9rem;
   color: var(--color-text);
 }
 .checkbox-input {

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

@@ -1,3 +1,4 @@
+export type ControlLayout = "vertical" | "horizontal";
 export interface ControlProps {
     /**
      * Minimal will reset margin and remove border and box shadow from every element inside the slot
@@ -7,14 +8,26 @@ export interface ControlProps {
      * Error message to display below the control
      */
     error?: string | null;
+    /**
+     * ID for the control's form element, auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Label position relative to the control
+     */
+    layout?: ControlLayout;
 }
-declare var __VLS_1: {};
+declare var __VLS_1: {
+    id: string;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ControlProps> & Readonly<{}>, {
     appearance: "normal" | "minimal";
     error: string | null;
+    id: string;
+    layout: ControlLayout;
 }, {}, {}, {}, 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,17 +1,24 @@
 <script setup>
-defineProps({
+import { useId } from "vue";
+const props = defineProps({
   appearance: { type: String, required: false, default: "normal" },
-  error: { type: [String, null], required: false, default: null }
+  error: { type: [String, null], required: false, default: null },
+  id: { type: String, required: false, default: () => useId() },
+  layout: { type: String, required: false, default: "vertical" }
 });
 </script>
 
 <template>
-  <div class="control" :class="[appearance, { 'has-error': error }]">
-    <label v-if="$attrs.label" class="control-label">{{ $attrs.label }}</label>
-    <div class="slot-wrapper" v-bind="$attrs">
-      <slot />
+  <div class="control" :class="[appearance, layout, { 'has-error': error }]">
+    <label v-if="$attrs.label" class="control-label" :for="id">
+      {{ $attrs.label }}
+    </label>
+    <div class="control-group">
+      <div class="slot-wrapper" v-bind="$attrs">
+        <slot :id />
+      </div>
+      <span v-if="error" class="control-error">{{ error }}</span>
     </div>
-    <span v-if="error" class="control-error">{{ error }}</span>
   </div>
 </template>
 
@@ -23,23 +30,35 @@ defineProps({
   gap: 0.1rem;
 }
 .control .control-label {
+  font-size: var(--font-md);
   user-select: none;
 }
+.control .control-group {
+  width: 100%;
+}
 .control .control-error {
   color: var(--color-danger);
-  font-size: 0.875rem;
+  font-size: var(--font-md);
 }
 .control.has-error .slot-wrapper :deep(*) {
   border-color: var(--color-danger);
+  font-size: var(--font-md);
 }
 .control.minimal {
   margin: 0;
 }
 .control.minimal .slot-wrapper :first-child {
-  line-height: 1.5;
   border: 0;
 }
 .control.minimal .slot-wrapper :first-child:focus {
   box-shadow: none;
 }
+.control.horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+}
+.control.horizontal .control-label {
+  white-space: nowrap;
+}
 </style>

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

@@ -1,3 +1,4 @@
+export type ControlLayout = "vertical" | "horizontal";
 export interface ControlProps {
     /**
      * Minimal will reset margin and remove border and box shadow from every element inside the slot
@@ -7,14 +8,26 @@ export interface ControlProps {
      * Error message to display below the control
      */
     error?: string | null;
+    /**
+     * ID for the control's form element, auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Label position relative to the control
+     */
+    layout?: ControlLayout;
 }
-declare var __VLS_1: {};
+declare var __VLS_1: {
+    id: string;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ControlProps> & Readonly<{}>, {
     appearance: "normal" | "minimal";
     error: string | null;
+    id: string;
+    layout: ControlLayout;
 }, {}, {}, {}, 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/DatePicker.vue

@@ -1,26 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { nanoid } from "nanoid";
 defineProps({
   month: { type: Boolean, required: false }
 });
 const date = defineModel("date", { type: null, ...{
   required: true
 } });
-const randomName = computed(() => `date-${nanoid(8)}`);
 </script>
 
 <template>
-  <orio-control-element class="date-picker" v-bind="$attrs">
+  <orio-control-element v-slot="{ id }" class="date-picker" v-bind="$attrs">
     <input
+      :id
       v-model="date"
       :type="month ? 'month' : 'date'"
       class="date-input"
-      :name="randomName"
+      :name="id"
     />
   </orio-control-element>
 </template>
 
 <style scoped>
-.date-picker *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
+.date-picker *{cursor:pointer;width:100%}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-sizing:border-box;color:var(--color-text);padding:.4rem .6rem;transition:border-color .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
 </style>

package/dist/runtime/components/DateRangePicker.vue

@@ -22,18 +22,16 @@ defineExpose({ dateIsCorrect });
 </script>
 
 <template>
-  <div>
-    <orio-control-element v-bind="$attrs">
-      <div class="date-range-picker">
-        <orio-date-picker v-model:date="dates.startDate" :month />
-        <orio-date-picker v-model:date="dates.endDate" :month />
-        <orio-check-box v-model="present"> Present </orio-check-box>
-      </div>
-    </orio-control-element>
-    <div v-if="!dateIsCorrect" class="error-message">
-      <p>Start date must be before end date.</p>
+  <orio-control-element
+    v-bind="$attrs"
+    :error="!dateIsCorrect && 'Start date must be before end date.'"
+  >
+    <div class="date-range-picker">
+      <orio-date-picker v-model:date="dates.startDate" :month />
+      <orio-date-picker v-model:date="dates.endDate" :month />
+      <orio-check-box v-model="present"> Present </orio-check-box>
     </div>
-  </div>
+  </orio-control-element>
 </template>
 
 <style scoped>
@@ -54,10 +52,4 @@ defineExpose({ dateIsCorrect });
 .date-range-picker .checkbox {
   margin-inline-start: 0.25rem;
 }
-
-.error-message {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-}
 </style>

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

@@ -1,10 +1,31 @@
+import type { ControlLayout } from "./ControlElement.vue.js";
+export type InputLayout = ControlLayout | "inner";
+interface Props {
+    layout?: InputLayout;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_8) => any;
+} & {
+    after?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    layout: InputLayout;
+}, {}, {}, {}, 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/Input.vue

@@ -1,44 +1,77 @@
 <script setup>
+defineProps({
+  layout: { type: String, required: false, default: "vertical" }
+});
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>
 
 <template>
-  <orio-control-element v-bind="$attrs">
-    <input
-      v-model="modelValue"
-      type="text"
-      v-bind="$attrs"
-      class="text-input"
-    />
+  <orio-control-element
+    v-slot="{ id }"
+    v-bind="$attrs"
+    :layout="layout === 'inner' ? 'vertical' : layout"
+    :class="{ inner: layout === 'inner' }"
+  >
+    <slot name="before" />
+    <input v-bind="$attrs" :id v-model="modelValue" type="text" />
+    <slot name="after" />
   </orio-control-element>
 </template>
 
 <style scoped>
-.text-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
+:deep(.slot-wrapper) {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--color-text);
   background-color: var(--color-bg);
-  box-sizing: border-box;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-.text-input::placeholder {
-  color: var(--color-muted);
+  transition: border-color 0.2s ease;
 }
-.text-input:hover {
+:deep(.slot-wrapper):hover {
   border-color: var(--color-accent);
 }
-.text-input:focus {
+:deep(.slot-wrapper):focus-within {
   border-color: var(--color-accent);
-  outline: none;
 }
-.text-input:disabled {
+:deep(.slot-wrapper):has(:disabled) {
   background-color: var(--color-surface);
   color: var(--color-muted);
   cursor: not-allowed;
 }
+:deep(.slot-wrapper) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+}
+
+input {
+  border: 0;
+  background: transparent;
+  outline: none;
+  font-size: var(--font-md);
+  color: var(--color-text);
+}
+input::placeholder {
+  color: var(--color-muted);
+  user-select: none;
+}
+input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0;
+}
+
+.inner {
+  position: relative;
+}
+.inner :deep(.control-label) {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  left: 0.75rem;
+  top: 0.25rem;
+  color: var(--color-muted);
+}
+.inner input {
+  padding: 1.25rem 0 0.25rem;
+}
 </style>

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

@@ -1,10 +1,31 @@
+import type { ControlLayout } from "./ControlElement.vue.js";
+export type InputLayout = ControlLayout | "inner";
+interface Props {
+    layout?: InputLayout;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_8) => any;
+} & {
+    after?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    layout: InputLayout;
+}, {}, {}, {}, 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

@@ -44,8 +44,6 @@ button {
   border: none;
   border-radius: var(--border-radius-md);
   padding: 8px 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   cursor: pointer;
   display: inline-flex;
   align-items: center;

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

@@ -1,11 +1,5 @@
-interface Props {
-    min?: number;
-    max?: number;
-    step?: number;
-    decimalPlaces?: number;
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+import type { NumberInputProps } from "./index.vue.js";
+type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
@@ -16,6 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
+    layout: import("../Input.vue.js").InputLayout;
     step: number;
     min: number;
     max: number;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { usePressAndHold } from "../../composables/usePressAndHold";
 defineProps({
+  layout: { type: String, required: false, default: "vertical" },
   min: { type: Number, required: false, default: void 0 },
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },
@@ -47,4 +48,9 @@ const { pressAndHold, stop } = usePressAndHold();
 .horizontal :deep(.slot-wrapper) {
   line-height: 0;
 }
+.horizontal.inner :deep(.control-label) {
+  left: 0;
+  right: 0;
+  text-align: center;
+}
 </style>

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

@@ -1,11 +1,5 @@
-interface Props {
-    min?: number;
-    max?: number;
-    step?: number;
-    decimalPlaces?: number;
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+import type { NumberInputProps } from "./index.vue.js";
+type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
@@ -16,6 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
+    layout: import("../Input.vue.js").InputLayout;
     step: number;
     min: number;
     max: number;

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

@@ -1,11 +1,5 @@
-interface Props {
-    min?: number;
-    max?: number;
-    step?: number;
-    decimalPlaces?: number;
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+import type { NumberInputProps } from "./index.vue.js";
+type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
@@ -16,6 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
+    layout: import("../Input.vue.js").InputLayout;
     step: number;
     min: number;
     max: number;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { usePressAndHold } from "../../composables/usePressAndHold";
 defineProps({
+  layout: { type: String, required: false, default: "vertical" },
   min: { type: Number, required: false, default: void 0 },
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },

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

@@ -1,11 +1,5 @@
-interface Props {
-    min?: number;
-    max?: number;
-    step?: number;
-    decimalPlaces?: number;
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+import type { NumberInputProps } from "./index.vue.js";
+type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
@@ -16,6 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
+    layout: import("../Input.vue.js").InputLayout;
     step: number;
     min: number;
     max: number;

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

@@ -1,10 +1,13 @@
-interface Props {
+import type { InputLayout } from "../Input.vue.js";
+export interface NumberInputProps {
+    layout?: InputLayout;
     min?: number;
     max?: number;
     step?: number;
     decimalPlaces?: number;
+    disabled?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = NumberInputProps;
 declare function increase(): void;
 declare function decrease(): void;
 type __VLS_ModelProps = {
@@ -25,6 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
+    disabled: boolean;
+    layout: InputLayout;
     step: number;
     min: number;
     max: number;

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

@@ -1,10 +1,12 @@
 <script setup>
 import { computed, toRefs } from "vue";
 const props = defineProps({
+  layout: { type: String, required: false, default: "vertical" },
   min: { type: Number, required: false, default: void 0 },
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },
-  decimalPlaces: { type: Number, required: false, default: 0 }
+  decimalPlaces: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false, default: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
@@ -43,10 +45,16 @@ const slotExpose = computed(() => ({
 </script>
 
 <template>
-  <orio-control-element v-bind="$attrs">
+  <orio-control-element
+    v-slot="{ id }"
+    v-bind="$attrs"
+    :layout="layout === 'inner' ? 'vertical' : layout"
+    :class="{ inner: layout === 'inner' }"
+  >
     <div class="wrapper">
       <input
         v-bind="$attrs"
+        :id
         v-model="modelValue"
         type="number"
         class="number-input"
@@ -80,15 +88,15 @@ input[type=number] {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: var(--font-md);
   color: var(--color-text);
   background-color: var(--color-bg);
   box-sizing: border-box;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 .number-input::placeholder {
   color: var(--color-muted);
+  user-select: none;
 }
 .number-input:hover {
   border-color: var(--color-accent);
@@ -103,6 +111,21 @@ input[type=number] {
   cursor: not-allowed;
 }
 
+.inner {
+  position: relative;
+}
+.inner :deep(.control-label) {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  left: 0.75rem;
+  top: 0.25rem;
+  color: var(--color-muted);
+}
+.inner .number-input {
+  padding: 1.25rem 0.75rem 0.25rem;
+}
+
 .controls {
   position: absolute;
   inset: 0;

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

@@ -1,10 +1,13 @@
-interface Props {
+import type { InputLayout } from "../Input.vue.js";
+export interface NumberInputProps {
+    layout?: InputLayout;
     min?: number;
     max?: number;
     step?: number;
     decimalPlaces?: number;
+    disabled?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = NumberInputProps;
 declare function increase(): void;
 declare function decrease(): void;
 type __VLS_ModelProps = {
@@ -25,6 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
+    disabled: boolean;
+    layout: InputLayout;
     step: number;
     min: number;
     max: number;

package/dist/runtime/components/Selector.vue

@@ -138,8 +138,6 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   padding: 0.5rem 0.75rem;
-  font-size: 0.95rem;
-  line-height: 1.5;
   color: var(--color-text);
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }

package/dist/runtime/components/SwitchButton.vue

@@ -10,8 +10,9 @@ function toggle() {
 </script>
 
 <template>
-  <orio-control-element>
+  <orio-control-element v-slot="{ id }">
     <button
+      :id
       class="switch-button"
       :class="{ active: modelValue, disabled }"
       :disabled="disabled"
@@ -35,8 +36,6 @@ function toggle() {
   color: var(--color-muted);
   border: 1px solid var(--color-border);
   padding: 8px 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   cursor: pointer;
   user-select: none;
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

package/dist/runtime/components/Tag.vue

@@ -12,5 +12,5 @@ defineProps({
 </template>
 
 <style scoped>
-.tag{border:1px solid transparent;border-radius:var(--border-radius-lg);display:inline-block;font-size:.8rem;font-weight:500;line-height:1;max-height:1rem;padding:.25rem .6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag--neutral{background-color:var(--color-surface);border-color:color-mix(in srgb,var(--color-border) 80%,var(--color-accent) 20%);color:var(--color-muted)}.tag--accent{background-color:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}
+.tag{border:1px solid transparent;border-radius:var(--border-radius-lg);display:inline-block;font-size:var(--font-sm);font-weight:500;padding:.25rem .6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag--neutral{background-color:var(--color-surface);border-color:color-mix(in srgb,var(--color-border) 80%,var(--color-accent) 20%);color:var(--color-muted)}.tag--accent{background-color:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}
 </style>

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

@@ -1,13 +1,18 @@
+import type { InputLayout } from "./Input.vue.js";
+interface Props {
+    layout?: InputLayout;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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: string) => any;
-} & {
-    input: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    onInput?: ((value: string) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    layout: InputLayout;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Textarea.vue

@@ -1,44 +1,78 @@
 <script setup>
 import { useAttrs } from "vue";
 const attrs = useAttrs();
-defineEmits(["input"]);
 const modelValue = defineModel({ type: String, ...{ default: "" } });
+defineProps({
+  layout: { type: String, required: false, default: "vertical" }
+});
 </script>
 
 <template>
-  <orio-control-element v-bind="attrs">
-    <textarea v-model="modelValue" rows="4" v-bind="attrs" class="textarea" />
+  <orio-control-element
+    v-slot="{ id }"
+    v-bind="attrs"
+    :layout="layout === 'inner' ? 'vertical' : layout"
+    :class="{ inner: layout === 'inner' }"
+  >
+    <textarea v-bind="attrs" :id v-model="modelValue" rows="4" />
   </orio-control-element>
 </template>
 
 <style scoped>
-.textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
+.control.horizontal {
+  align-items: flex-start;
+}
+.control.horizontal :deep(.control-label) {
+  padding-top: 0.5rem;
+}
+
+:deep(.slot-wrapper) {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--color-text);
   background-color: var(--color-bg);
-  box-sizing: border-box;
-  resize: vertical; /* Let user resize vertically only */
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
 }
-.textarea::placeholder {
-  color: var(--color-muted);
-}
-.textarea:hover {
+:deep(.slot-wrapper):hover {
   border-color: var(--color-accent);
 }
-.textarea:focus {
+:deep(.slot-wrapper):focus-within {
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-soft);
-  outline: none;
 }
-.textarea:disabled {
+:deep(.slot-wrapper):has(:disabled) {
   background-color: var(--color-surface);
   color: var(--color-muted);
   cursor: not-allowed;
 }
+
+textarea {
+  border: 0;
+  background: transparent;
+  outline: none;
+  font-size: var(--font-md);
+  color: var(--color-text);
+}
+textarea::placeholder {
+  color: var(--color-muted);
+  user-select: none;
+}
+textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  resize: vertical;
+}
+
+.inner {
+  position: relative;
+}
+.inner :deep(.control-label) {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  left: 0.75rem;
+  top: 0.25rem;
+  color: var(--color-muted);
+}
+.inner textarea {
+  padding: 1.25rem 0.75rem 0.25rem;
+}
 </style>

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

@@ -1,13 +1,18 @@
+import type { InputLayout } from "./Input.vue.js";
+interface Props {
+    layout?: InputLayout;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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: string) => any;
-} & {
-    input: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    onInput?: ((value: string) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    layout: InputLayout;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Tooltip.vue

@@ -108,5 +108,5 @@ const arrowClass = computed(() => `arrow-${props.placement}`);
 </template>
 
 <style scoped>
-.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:.875rem;line-height:1.4;padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
+.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
 </style>

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

@@ -130,7 +130,7 @@ onMounted(() => {
     <div
       v-if="isDynamicHeight || isDynamicWidth"
       ref="measureContainer"
-      class="carousel__measure"
+      class="carousel-measure"
     >
       <slot name="image" :image="activeImage">
         <img :src="activeImage" :alt="activeImage" @load="measureContent" />
@@ -138,44 +138,46 @@ onMounted(() => {
     </div>
     <div ref="carousel" class="carousel">
       <div
-        class="carousel__track"
+        class="carousel-track"
         @pointerdown="onPointerDown"
         @pointerup="onPointerUp"
       >
         <div
           v-for="image of images"
           :key="image"
-          class="carousel__item"
+          class="carousel-item"
           :class="getItemClasses(image)"
         >
           <slot name="image" :image>
             <img :src="image" :alt="image" draggable="false" />
           </slot>
         </div>
-        <orio-button
-          variant="subdued"
-          icon="chevron-left"
-          class="switch-button previous-button"
-          @click="previousImage"
-        >
-          <template #icon>
-            <orio-icon name="chevron-left" size="40px" />
-          </template>
-        </orio-button>
-        <orio-button
-          variant="subdued"
-          class="switch-button next-button"
-          @click="nextImage"
-        >
-          <template #icon>
-            <orio-icon name="chevron-right" size="40px" />
-          </template>
-        </orio-button>
+        <template v-if="images.length > 1">
+          <orio-button
+            variant="subdued"
+            icon="chevron-left"
+            class="switch-button previous-button"
+            @click="previousImage"
+          >
+            <template #icon>
+              <orio-icon name="chevron-left" size="40px" />
+            </template>
+          </orio-button>
+          <orio-button
+            variant="subdued"
+            class="switch-button next-button"
+            @click="nextImage"
+          >
+            <template #icon>
+              <orio-icon name="chevron-right" size="40px" />
+            </template>
+          </orio-button>
+        </template>
       </div>
     </div>
   </div>
 </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;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-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;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}
 </style>

package/dist/runtime/components/view/Text.vue

@@ -54,15 +54,15 @@ div.italics {
   color: var(--color-muted);
 }
 div.small {
-  font-size: 0.75rem;
+  font-size: var(--font-sm);
 }
 div.medium {
-  font-size: 0.875rem;
+  font-size: var(--font-md);
 }
 div.large {
-  font-size: 1.25rem;
+  font-size: var(--font-lg);
 }
 div.extra-large {
-  font-size: 1.75rem;
+  font-size: var(--font-xl);
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",
@@ -39,7 +39,6 @@
     "@vueuse/integrations": "^11.0.0",
     "change-case": "^5.4.4",
     "fuse.js": "^7.0.0",
-    "nanoid": "^5.0.0",
     "ofetch": "^1.5.1",
     "universal-cookie": "^7.0.0"
   },