orio-ui 1.24.0 → 1.27.0

package/dist/runtime/components/CheckBox.vue

@@ -10,19 +10,25 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element v-bind="props" class="checkbox" fill>
+  <orio-control-element v-slot="{ control }" v-bind="props" class="checkbox" fill>
     <label class="checkbox-label">
       <input
         v-model="modelValue"
+        v-bind="{ ...$attrs, ...control }"
         type="checkbox"
         class="checkbox-input"
         tabindex="-1"
-        v-bind="$attrs"
       />
       <span
         class="checkbox-box"

package/dist/runtime/components/CheckboxGroup.vue

@@ -6,7 +6,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
   size: { type: String, required: false, default: "md" },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
 function isChecked(value) {

package/dist/runtime/components/ControlElement.USAGE.md

@@ -0,0 +1,69 @@
+# ControlElement — agent-only invariants
+
+`ControlElement` is the wrapper every form input uses (Input, Textarea,
+NumberInput, Selector, CheckBox, etc.). When you build a new orio form
+component, wrap it in `<orio-control-element>`. When you consume an existing
+one, pass `ControlProps` straight through — they are usually re-exported.
+
+## Invariants
+
+- **`inheritAttrs: false`.** Attrs do **not** auto-flow onto the wrapper or
+  the inner element. The component exposes a `control` slot prop containing
+  the a11y/form attr bag (`id`, `ariaDescribedby`, `ariaInvalid`,
+  `ariaRequired`, plus passthrough `tabindex`, `focusKey`, `disabled`,
+  `required`, `name`, `ariaLabel`). The inner element **must** spread it:
+  ```vue
+  <orio-control-element v-slot="{ control }" v-bind="props">
+    <input v-bind="control" />
+  </orio-control-element>
+  ```
+- **`group` prop changes the semantic root.** When `true`, the wrapper gets
+  `role="group"` + `aria-labelledby`, and the label renders as `<span>`
+  (still id-linked) instead of `<label>`. Use this for `CheckboxGroup`,
+  radio groups, anything where the "control" is multiple inputs.
+- **Error wiring is automatic.** Setting `error` to a non-null string:
+  - Renders a `.control-error` span below the slot.
+  - Sets `aria-invalid` and `aria-describedby` on the inner element via the
+    `control` slot prop.
+  - Adds a red border to `.slot-wrapper` (unless the wrapper contains a
+    `:deep(.error-fields)` element, in which case the inner component owns
+    error styling — see TaggableSelector).
+- **`size` is provided to descendants** via `provideControlSize`. Children
+  that use `useControlSize()` (e.g. inner buttons, icons) inherit it
+  automatically — do not re-pass `size` down manually.
+- **`appearance="minimal"`** zeros margin and strips border + box-shadow from
+  the first slot child. Use for inputs embedded in a row with their own
+  surrounding chrome.
+
+## Gotchas
+
+- The slot's `id` matches what the `<label>` points to via `for`. The inner
+  element receives the same `id` through the `control` bag. Do **not**
+  override it — it is `useId()` by default and accessibility breaks if two
+  inputs in the same render share an id.
+- `disabled` is forwarded to the inner element AND drives the wrapper's
+  `.disabled` class for styling. Pass `disabled` on the wrapper, never on the
+  inner element directly.
+- The exported types are the contract:
+  - `ControlProps` — what consumers pass to ControlElement.
+  - `ControlPassthroughProps` — the subset that travels to the inner element.
+  - `ControlSlotAttrs` — the bag exposed via the `control` slot prop.
+  - `ControlLayout = "vertical" | "horizontal"`.
+  Components that wrap ControlElement extend `ControlProps`, e.g.
+  `interface Props extends ControlProps { ... }`.
+
+## Quick reference
+
+```vue
+<script setup lang="ts">
+import type { ControlProps } from "./ControlElement.vue";
+interface Props extends ControlProps { /* component-specific props */ }
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <orio-control-element v-slot="{ control }" v-bind="props">
+    <my-inner-element v-bind="control" />
+  </orio-control-element>
+</template>
+```

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

@@ -1,43 +1,58 @@
 export type ControlLayout = "vertical" | "horizontal";
 export type ControlSize = "sm" | "md" | "lg" | "xl";
-export interface ControlProps {
-    /**
-     * Minimal will reset margin and remove border and box shadow from every element inside the slot
-     */
+/**
+ * A11y + form attrs that flow from the caller through ControlElement to the
+ * actual interactive element via the `control` slot prop. Never rendered on
+ * the wrapper itself.
+ */
+export interface ControlPassthroughProps {
+    /** Native `tabindex` for the inner element. */
+    tabindex?: number | string;
+    /** Roving-focus identifier — see useRovingGrid. Rendered as `focus-key` DOM attr. */
+    focusKey?: string;
+    /** Disables the inner element AND drives wrapper disabled styling. */
+    disabled?: boolean;
+    /** Marks the inner element required and sets `aria-required`. */
+    required?: boolean;
+    /** Native `name` attribute for the inner form element. */
+    name?: string;
+    /** Accessible name for the inner element when no visible label is set. */
+    ariaLabel?: string;
+}
+export interface ControlProps extends ControlPassthroughProps {
+    /** Minimal resets margin and removes border/box-shadow from every element inside the slot. */
     appearance?: "normal" | "minimal";
-    /**
-     * Error message to display below the control
-     */
+    /** Error message to display below the control. Also drives `aria-invalid` and `aria-describedby` on the inner element. */
     error?: string | null;
-    /**
-     * Marks this control as a group (adds role="group" and aria-labelledby).
-     * The label renders as a <span> instead of <label>.
-     * Use for groups of related controls (e.g. CheckboxGroup).
-     */
+    /** Marks this control as a group (adds role="group" + aria-labelledby on the wrapper). The label renders as a <span> instead of <label>. Use for groups of related controls (e.g. CheckboxGroup). */
     group?: boolean;
-    /**
-     * ID for the control's form element, auto-generated if not provided
-     */
+    /** ID for the inner form element. Auto-generated if not provided. */
     id?: string;
-    /**
-     * Label text for the control (or legend text when group is true)
-     */
+    /** Label text for the control (or legend text when group is true). */
     label?: string;
-    /**
-     * Label position relative to the control
-     */
+    /** Label position relative to the control. */
     layout?: ControlLayout;
-    /**
-     * Size of the control and its inner elements
-     */
+    /** Size of the control and its inner elements. */
     size?: ControlSize;
-    /**
-     * Whether element should fill the container
-     */
+    /** Whether the element should fill the container. */
     fill?: boolean;
 }
+/**
+ * Bag the consumer spreads onto the inner interactive element via the `control`
+ * slot prop: `<input v-bind="control" />`. Extends the caller-facing
+ * passthrough props with attrs derived from ControlElement state
+ * (`aria-invalid` from `error`, `aria-describedby` pointing at the error span,
+ * etc.) and the required `id`.
+ */
+export interface ControlSlotAttrs extends ControlPassthroughProps {
+    id: string;
+    ariaDescribedby?: string;
+    ariaInvalid?: boolean;
+    ariaRequired?: boolean;
+}
 declare var __VLS_7: {
     id: string;
+    control: ControlSlotAttrs;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;

package/dist/runtime/components/ControlElement.vue

@@ -10,10 +10,29 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
   size: { type: String, required: false, default: "md" },
-  fill: { type: Boolean, required: false, default: false }
+  fill: { type: Boolean, required: false, default: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 provideControlSize(toRef(props, "size"));
 const sizeStyle = computed(() => sizeTokens[props.size]);
+const errorId = computed(() => props.error ? `${props.id}-error` : void 0);
+const control = computed(() => ({
+  id: props.id,
+  tabindex: props.tabindex,
+  focusKey: props.focusKey,
+  disabled: props.disabled || void 0,
+  required: props.required || void 0,
+  name: props.name,
+  ariaLabel: props.ariaLabel,
+  ariaDescribedby: errorId.value,
+  ariaInvalid: props.error ? true : void 0,
+  ariaRequired: props.required || void 0
+}));
 </script>
 
 <template>
@@ -23,13 +42,13 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
   appearance,
   layout,
   `size-${size}`,
-  { 'has-error': error, group, fill }
+  { 'has-error': error, group, fill, disabled },
+  $attrs.class
 ]"
-    :style="sizeStyle"
-    v-bind="{
-  ...$attrs,
-  ...group ? { role: 'group', ...label ? { 'aria-labelledby': id } : {} } : {}
-}"
+    :style="[sizeStyle, $attrs.style]"
+    v-bind="
+  group ? { role: 'group', ...label ? { 'aria-labelledby': id } : {} } : {}
+"
   >
     <component
       :is="group ? 'span' : 'label'"
@@ -41,9 +60,9 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
     </component>
     <div class="control-group">
       <div class="slot-wrapper">
-        <slot :id />
+        <slot :id :control />
       </div>
-      <span v-if="error" class="control-error">{{ error }}</span>
+      <span v-if="error" :id="errorId" class="control-error">{{ error }}</span>
     </div>
   </div>
 </template>

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

@@ -1,43 +1,58 @@
 export type ControlLayout = "vertical" | "horizontal";
 export type ControlSize = "sm" | "md" | "lg" | "xl";
-export interface ControlProps {
-    /**
-     * Minimal will reset margin and remove border and box shadow from every element inside the slot
-     */
+/**
+ * A11y + form attrs that flow from the caller through ControlElement to the
+ * actual interactive element via the `control` slot prop. Never rendered on
+ * the wrapper itself.
+ */
+export interface ControlPassthroughProps {
+    /** Native `tabindex` for the inner element. */
+    tabindex?: number | string;
+    /** Roving-focus identifier — see useRovingGrid. Rendered as `focus-key` DOM attr. */
+    focusKey?: string;
+    /** Disables the inner element AND drives wrapper disabled styling. */
+    disabled?: boolean;
+    /** Marks the inner element required and sets `aria-required`. */
+    required?: boolean;
+    /** Native `name` attribute for the inner form element. */
+    name?: string;
+    /** Accessible name for the inner element when no visible label is set. */
+    ariaLabel?: string;
+}
+export interface ControlProps extends ControlPassthroughProps {
+    /** Minimal resets margin and removes border/box-shadow from every element inside the slot. */
     appearance?: "normal" | "minimal";
-    /**
-     * Error message to display below the control
-     */
+    /** Error message to display below the control. Also drives `aria-invalid` and `aria-describedby` on the inner element. */
     error?: string | null;
-    /**
-     * Marks this control as a group (adds role="group" and aria-labelledby).
-     * The label renders as a <span> instead of <label>.
-     * Use for groups of related controls (e.g. CheckboxGroup).
-     */
+    /** Marks this control as a group (adds role="group" + aria-labelledby on the wrapper). The label renders as a <span> instead of <label>. Use for groups of related controls (e.g. CheckboxGroup). */
     group?: boolean;
-    /**
-     * ID for the control's form element, auto-generated if not provided
-     */
+    /** ID for the inner form element. Auto-generated if not provided. */
     id?: string;
-    /**
-     * Label text for the control (or legend text when group is true)
-     */
+    /** Label text for the control (or legend text when group is true). */
     label?: string;
-    /**
-     * Label position relative to the control
-     */
+    /** Label position relative to the control. */
     layout?: ControlLayout;
-    /**
-     * Size of the control and its inner elements
-     */
+    /** Size of the control and its inner elements. */
     size?: ControlSize;
-    /**
-     * Whether element should fill the container
-     */
+    /** Whether the element should fill the container. */
     fill?: boolean;
 }
+/**
+ * Bag the consumer spreads onto the inner interactive element via the `control`
+ * slot prop: `<input v-bind="control" />`. Extends the caller-facing
+ * passthrough props with attrs derived from ControlElement state
+ * (`aria-invalid` from `error`, `aria-describedby` pointing at the error span,
+ * etc.) and the required `id`.
+ */
+export interface ControlSlotAttrs extends ControlPassthroughProps {
+    id: string;
+    ariaDescribedby?: string;
+    ariaInvalid?: boolean;
+    ariaRequired?: boolean;
+}
 declare var __VLS_7: {
     id: string;
+    control: ControlSlotAttrs;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;

package/dist/runtime/components/Input.USAGE.md

@@ -0,0 +1,49 @@
+# Input — agent-only invariants
+
+`<orio-input>` is the text input wrapping `ControlElement`. Read
+`ControlElement.USAGE.md` first — most of the contract lives there.
+
+## Invariants
+
+- **Extends `ControlProps`** with one override: `layout?: InputLayout` where
+  `InputLayout = ControlLayout | "inner"`. The extra `"inner"` is an
+  Input-specific mode that floats the label inside the input chrome.
+- **`layout="inner"` translates internally** to `layout="vertical"` on
+  ControlElement and adds an `.inner` class on the wrapper. The label
+  reposition is driven by `:deep()` styles on ControlElement internals — no
+  duplicate label DOM is created.
+- **The `control` slot bag is spread onto the inner `<input>`** alongside
+  `$attrs`: `v-bind="{ ...$attrs, ...control }"`. Attrs like `type`,
+  `autocomplete`, `placeholder`, `inputmode` work on `<orio-input>` and land
+  on the underlying `<input>`.
+- **v-model is `string`** (default `""`). For numeric input use
+  `<orio-number-input>` instead.
+
+## Gotchas
+
+- The `.slot-wrapper` uses `display: flex; align-items: center;` so `before`
+  and `after` slots sit inline with the input. Don't add wrapping divs inside
+  those slots — they'll break alignment.
+- `:placeholder-shown` is used internally for the inner-label "empty" state.
+  If you pass an empty placeholder, the inner-label trick still works because
+  the wrapper sets `placeholder=" "` upstream when needed.
+- The default browser input border is removed; the visible border lives on
+  `.slot-wrapper`. Custom inputs swapped in via slots will not inherit it —
+  prefer `before`/`after` slots over replacing the input.
+
+## Quick reference
+
+```vue
+<orio-input
+  v-model="email"
+  label="Email"
+  layout="inner"
+  type="email"
+  autocomplete="email"
+  :error="emailError"
+>
+  <template #before>
+    <orio-icon name="mail" />
+  </template>
+</orio-input>
+```

package/dist/runtime/components/Input.vue

@@ -7,20 +7,30 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>
 
 <template>
   <orio-control-element
-    v-slot="{ id }"
+    v-slot="{ control }"
     v-bind="props"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
     <slot name="before" />
-    <input :id v-model="modelValue" type="text" v-bind="$attrs" />
+    <input
+      v-model="modelValue"
+      type="text"
+      v-bind="{ ...$attrs, ...control }"
+    />
     <slot name="after" />
   </orio-control-element>
 </template>

package/dist/runtime/components/Modal.USAGE.md

@@ -0,0 +1,64 @@
+# Modal — agent-only invariants
+
+`<orio-modal>` is the teleported overlay dialog.
+
+## Invariants
+
+- **Teleported to `<body>`.** Renders outside the parent DOM subtree. Any
+  CSS that targets `.modal` from a parent will not apply; scope styles via
+  `:deep()` from a parent or write global styles.
+- **`origin` prop drives the open animation.** Pass the `getBoundingClientRect`
+  of the element that triggered the open (e.g. the clicked button) to
+  animate the modal **from** that rect to centered. Pass `null` to fade in
+  at center with no scale-from.
+- **`v-model:show`** controls visibility. Backdrop click closes (`@click.self`
+  on the overlay). The default close button (rendered when no `header`
+  slot is supplied) also toggles `show`.
+- **Body scroll lock** is applied automatically while `show` is true, via
+  `useScrollLock` from `@vueuse/core`. SSR-safe: ref defaults to `false`
+  on the server.
+- **Header/footer are auto-hidden** when no `title` prop and no
+  `#header`/`#footer` slot is present. The content section (`#default`)
+  always renders.
+
+## Gotchas
+
+- Multiple modals stacked at once will all lock body scroll; closing one
+  releases the lock for all. If you nest modals, manage the lock yourself.
+- `origin`'s `width` / `height` should be the trigger's rendered size, not
+  the modal's. The animation derives the inverse scale from
+  `width / modalWidth` — wrong size = visible jump.
+- The component uses inline styles via direct `.style.transform`
+  assignment on the wrapper ref. Do not animate `transform` from outside;
+  the component will overwrite it on the next open.
+
+## Quick reference
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+const open = ref(false);
+const origin = ref<DOMRect | null>(null);
+
+function trigger(event: MouseEvent) {
+  origin.value = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  open.value = true;
+}
+</script>
+
+<template>
+  <orio-button @click="trigger">Open settings</orio-button>
+
+  <orio-modal v-model:show="open" :origin="origin" title="Settings">
+    <p>Modal body…</p>
+    <template #footer>
+      <orio-button @click="open = false">Done</orio-button>
+    </template>
+  </orio-modal>
+</template>
+```
+
+## Related
+
+- `useModal` composable — programmatic open/close API without managing
+  `show` yourself. See `docs/composables/use-modal.md`.

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

@@ -1,7 +1,6 @@
 import type { ControlProps } from "./ControlElement.vue.js";
 interface Props extends ControlProps {
     icon?: string;
-    disabled?: boolean;
     active?: boolean;
 }
 declare var __VLS_8: {}, __VLS_15: {};

package/dist/runtime/components/NavButton.vue

@@ -2,7 +2,6 @@
 import { computed, toRefs, useSlots } from "vue";
 const props = defineProps({
   icon: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
@@ -11,7 +10,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const { disabled, active } = toRefs(props);
 const slots = useSlots();
@@ -28,11 +33,10 @@ function click(event) {
 </script>
 
 <template>
-  <orio-control-element v-bind="props">
+  <orio-control-element v-slot="{ control }" v-bind="props">
     <button
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...control }"
       :class="{ 'icon-only': isIconOnly, active }"
-      :disabled
       :aria-current="active ? 'page' : void 0"
       @click="click"
     >

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

@@ -1,7 +1,6 @@
 import type { ControlProps } from "./ControlElement.vue.js";
 interface Props extends ControlProps {
     icon?: string;
-    disabled?: boolean;
     active?: boolean;
 }
 declare var __VLS_8: {}, __VLS_15: {};

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

@@ -6,14 +6,19 @@ defineProps({
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },
   decimalPlaces: { type: Number, required: false, default: 0 },
-  disabled: { type: Boolean, required: false, default: 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 },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

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

@@ -6,14 +6,19 @@ defineProps({
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },
   decimalPlaces: { type: Number, required: false, default: 0 },
-  disabled: { type: Boolean, required: false, default: 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 },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

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

@@ -6,7 +6,6 @@ export interface NumberInputProps extends Omit<ControlProps, "layout"> {
     max?: number;
     step?: number;
     decimalPlaces?: number;
-    disabled?: boolean;
 }
 type __VLS_Props = NumberInputProps;
 declare function increase(): void;
@@ -30,7 +29,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     layout: InputLayout;
-    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -6,14 +6,19 @@ const props = defineProps({
   max: { type: Number, required: false, default: void 0 },
   step: { type: Number, required: false, default: 1 },
   decimalPlaces: { type: Number, required: false, default: 0 },
-  disabled: { type: Boolean, required: false, default: 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 },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
@@ -49,7 +54,6 @@ const controlProps = computed(() => {
     max: _max,
     step: _step,
     decimalPlaces: _decimalPlaces,
-    disabled: _disabled,
     ...rest
   } = props;
   return rest;
@@ -64,19 +68,17 @@ const slotExpose = computed(() => ({
 
 <template>
   <orio-control-element
-    v-slot="{ id }"
+    v-slot="{ control }"
     v-bind="controlProps"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
     <div class="wrapper">
       <input
-        v-bind="$attrs"
-        :id
+        v-bind="{ ...$attrs, ...control }"
         v-model="modelValue"
         type="number"
         class="number-input"
-        :disabled
         :min
         :max
         :step