orio-ui 1.16.2 → 1.18.0

package/dist/module.json

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

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;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}
+:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-xs:0.65rem;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}

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

@@ -2,6 +2,7 @@ export type BadgeVariant = "danger" | "alert" | "primary" | "grey";
 interface Props {
     variant?: BadgeVariant;
     pill?: boolean;
+    hidden?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -14,6 +15,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: BadgeVariant;
     pill: boolean;
+    hidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Badge.vue

@@ -2,7 +2,8 @@
 import { useSlots, computed } from "vue";
 const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
-  pill: { type: Boolean, required: false, default: false }
+  pill: { type: Boolean, required: false, default: false },
+  hidden: { type: Boolean, required: false, default: false }
 });
 const slots = useSlots();
 const hasWrapping = computed(() => !!slots.wrapping);
@@ -13,15 +14,23 @@ const isDot = computed(() => !hasDefaultContent.value);
 <template>
   <div v-if="hasWrapping" class="badge-wrapper">
     <slot name="wrapping" />
-    <span class="badge positioned" :class="[variant, { pill, dot: isDot }]">
+    <span
+      v-if="!hidden"
+      class="badge positioned"
+      :class="[variant, { pill, dot: isDot }]"
+    >
       <slot />
     </span>
   </div>
-  <span v-else class="badge" :class="[variant, { pill, dot: isDot }]">
+  <span
+    v-else-if="!hidden"
+    class="badge"
+    :class="[variant, { pill, dot: isDot }]"
+  >
     <slot />
   </span>
 </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:var(--font-sm);font-weight:600;justify-content:center;padding:.125rem .35rem;-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 .35rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.badge.positioned{position:absolute;right:15%;top:15%;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/Badge.vue.d.ts

@@ -2,6 +2,7 @@ export type BadgeVariant = "danger" | "alert" | "primary" | "grey";
 interface Props {
     variant?: BadgeVariant;
     pill?: boolean;
+    hidden?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -14,6 +15,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: BadgeVariant;
     pill: boolean;
+    hidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;

package/dist/runtime/components/Button.vue

@@ -1,13 +1,19 @@
 <script setup>
-import { computed, toRefs, useAttrs, useSlots } from "vue";
+import { computed, toRefs, useSlots } from "vue";
 const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
   icon: { type: String, required: false },
   loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 const { loading, disabled } = toRefs(props);
-const attrs = useAttrs();
 const slots = useSlots();
 const isIconOnly = computed(() => {
   const hasIcon = !!props.icon || !!slots.icon;
@@ -32,9 +38,9 @@ function onMouseleave(event) {
 </script>
 
 <template>
-  <orio-control-element>
+  <orio-control-element v-bind="props">
     <button
-      v-bind="attrs"
+      v-bind="$attrs"
       :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
       :disabled
       @click="click"

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

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     variant?: "primary" | "secondary" | "subdued";
     icon?: string;
     loading?: boolean;

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

@@ -1,4 +1,5 @@
-export interface CheckBoxProps {
+import type { ControlProps } from "./ControlElement.vue.js";
+export interface CheckBoxProps extends ControlProps {
     checkedIcon?: string;
     uncheckedIcon?: string;
 }

package/dist/runtime/components/CheckBox.vue

@@ -1,19 +1,27 @@
 <script setup>
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
-defineProps({
+const props = defineProps({
   checkedIcon: { type: String, required: false },
-  uncheckedIcon: { type: String, required: false }
+  uncheckedIcon: { type: String, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element class="checkbox">
+  <orio-control-element v-bind="props" class="checkbox">
     <label class="checkbox-label">
       <input
         v-model="modelValue"
         type="checkbox"
         class="checkbox-input"
         tabindex="-1"
+        v-bind="$attrs"
       />
       <span
         class="checkbox-box"

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

@@ -1,4 +1,5 @@
-export interface CheckBoxProps {
+import type { ControlProps } from "./ControlElement.vue.js";
+export interface CheckBoxProps extends ControlProps {
     checkedIcon?: string;
     uncheckedIcon?: string;
 }

package/dist/runtime/components/ControlElement.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useId } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   appearance: { type: String, required: false, default: "normal" },
   error: { type: [String, null], required: false, default: null },
@@ -15,7 +16,10 @@ const props = defineProps({
   <div
     class="control"
     :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
-    v-bind="group ? { role: 'group', 'aria-labelledby': id } : {}"
+    v-bind="{
+  ...$attrs,
+  ...group ? { role: 'group', ...label ? { 'aria-labelledby': id } : {} } : {}
+}"
   >
     <component
       :is="group ? 'span' : 'label'"
@@ -26,7 +30,7 @@ const props = defineProps({
       {{ label }}
     </component>
     <div class="control-group">
-      <div class="slot-wrapper" v-bind="$attrs">
+      <div class="slot-wrapper">
         <slot :id />
       </div>
       <span v-if="error" class="control-error">{{ error }}</span>
@@ -37,46 +41,50 @@ const props = defineProps({
 <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.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.15rem;
+  --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.75rem;
-  --control-inner-block-end: 0.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: 2.25rem;
-  --control-inner-block-end: 0.375rem;
+  --control-inner-block-start: 1.5rem;
+  --control-inner-block-end: 0;
   --control-label-block-start: 0.25rem;
 }
 .control {
@@ -86,7 +94,7 @@ const props = defineProps({
   gap: 0.1rem;
 }
 .control .control-label {
-  font-size: var(--control-font-size);
+  font-size: var(--control-label-font-size);
   user-select: none;
 }
 .control .control-group {
@@ -94,13 +102,15 @@ const props = defineProps({
 }
 .control .control-error {
   color: var(--color-danger);
-  font-size: var(--control-font-size);
+  font-size: var(--control-label-font-size);
 }
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }
+.control.has-error .slot-wrapper {
+  border: 1px solid var(--color-danger);
+}
 .control.has-error .slot-wrapper :deep(*) {
-  border-color: var(--color-danger);
   font-size: var(--control-font-size);
 }
 .control.minimal {

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

@@ -6,7 +6,6 @@ export interface IconProps {
 }
 declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
     color: string;
-    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Icon.vue

@@ -3,31 +3,24 @@ import { computed } from "vue";
 import { iconRegistry } from "../utils/icon-registry";
 const props = defineProps({
   name: { type: null, required: true },
-  size: { type: [String, Number], required: false, default: "1em" },
+  size: { type: [String, Number], required: false },
   color: { type: String, required: false, default: "currentColor" }
 });
 const iconSvg = computed(() => iconRegistry[props.name] || "");
-const sizeValue = computed(
-  () => typeof props.size === "number" ? `${props.size}px` : props.size
-);
+const sizeValue = computed(() => {
+  if (props.size == null) return void 0;
+  return typeof props.size === "number" ? `${props.size}px` : props.size;
+});
 </script>
 
 <template>
   <span
     class="orio-icon"
-    :style="{
-  width: sizeValue,
-  height: sizeValue,
-  color,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-}"
+    :style="{ color, width: sizeValue, height: sizeValue }"
     v-html="iconSvg"
   />
 </template>
 
 <style scoped>
-.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
+.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;height:var(--control-icon-size,1.5em);justify-content:center;width:var(--control-icon-size,1.5em)}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
 </style>

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

@@ -6,7 +6,6 @@ export interface IconProps {
 }
 declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
     color: string;
-    size: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,6 @@
-import type { ControlLayout } from "./ControlElement.vue.js";
+import type { ControlLayout, ControlProps } from "./ControlElement.vue.js";
 export type InputLayout = ControlLayout | "inner";
-interface Props {
+interface Props extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
 }
 type __VLS_Props = Props;

package/dist/runtime/components/Input.vue

@@ -1,6 +1,12 @@
 <script setup>
-defineProps({
-  layout: { type: String, required: false, default: "vertical" }
+const props = defineProps({
+  layout: { type: String, required: false, default: "vertical" },
+  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 }
 });
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>
@@ -8,12 +14,12 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
 <template>
   <orio-control-element
     v-slot="{ id }"
-    v-bind="$attrs"
+    v-bind="props"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
     <slot name="before" />
-    <input v-bind="$attrs" :id v-model="modelValue" type="text" />
+    <input :id v-model="modelValue" type="text" v-bind="$attrs" />
     <slot name="after" />
   </orio-control-element>
 </template>
@@ -66,12 +72,14 @@ input {
 .inner :deep(.control-label) {
   position: absolute;
   z-index: 1;
-  pointer-events: none;
   left: var(--control-px);
   top: var(--control-label-block-start);
   color: var(--color-muted);
 }
+.inner :deep(.slot-wrapper) {
+  padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
+}
 .inner input {
-  padding: var(--control-inner-block-start) 0 var(--control-inner-block-end);
+  padding: 0;
 }
 </style>

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

@@ -1,6 +1,6 @@
-import type { ControlLayout } from "./ControlElement.vue.js";
+import type { ControlLayout, ControlProps } from "./ControlElement.vue.js";
 export type InputLayout = ControlLayout | "inner";
-interface Props {
+interface Props extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
 }
 type __VLS_Props = Props;

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

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     icon?: string;
     disabled?: boolean;
     active?: boolean;

package/dist/runtime/components/NavButton.vue

@@ -1,12 +1,18 @@
 <script setup>
-import { computed, toRefs, useAttrs, useSlots } from "vue";
+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 }
+  active: { 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 },
+  layout: { type: String, required: false },
+  size: { type: String, required: false }
 });
 const { disabled, active } = toRefs(props);
-const attrs = useAttrs();
 const slots = useSlots();
 const isIconOnly = computed(() => {
   const hasIcon = !!props.icon || !!slots.icon;
@@ -21,9 +27,9 @@ function click(event) {
 </script>
 
 <template>
-  <orio-control-element>
+  <orio-control-element v-bind="props">
     <button
-      v-bind="attrs"
+      v-bind="$attrs"
       :class="{ 'icon-only': isIconOnly, active }"
       :disabled
       :aria-current="active ? 'page' : void 0"

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

@@ -1,4 +1,5 @@
-interface Props {
+import type { ControlProps } from "./ControlElement.vue.js";
+interface Props extends ControlProps {
     icon?: string;
     disabled?: boolean;
     active?: boolean;

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

@@ -9,8 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    disabled: boolean;
     layout: import("../Input.vue.js").InputLayout;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -6,7 +6,13 @@ 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 }
+  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 }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

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

@@ -9,8 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    disabled: boolean;
     layout: import("../Input.vue.js").InputLayout;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -9,8 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    disabled: boolean;
     layout: import("../Input.vue.js").InputLayout;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -6,7 +6,13 @@ 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 }
+  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 }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

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

@@ -9,8 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    disabled: boolean;
     layout: import("../Input.vue.js").InputLayout;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -1,5 +1,6 @@
+import type { ControlProps } from "../ControlElement.vue.js";
 import type { InputLayout } from "../Input.vue.js";
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
     min?: number;
     max?: number;
@@ -28,8 +29,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;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -6,7 +6,13 @@ 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 }
+  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 }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
@@ -36,6 +42,17 @@ const isAtMax = computed(
 const isAtMin = computed(
   () => Number.isFinite(min.value) && modelValue.value <= min.value
 );
+const controlProps = computed(() => {
+  const {
+    min: _min,
+    max: _max,
+    step: _step,
+    decimalPlaces: _decimalPlaces,
+    disabled: _disabled,
+    ...rest
+  } = props;
+  return rest;
+});
 const slotExpose = computed(() => ({
   increase,
   decrease,
@@ -47,7 +64,7 @@ const slotExpose = computed(() => ({
 <template>
   <orio-control-element
     v-slot="{ id }"
-    v-bind="$attrs"
+    v-bind="controlProps"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
@@ -58,6 +75,10 @@ const slotExpose = computed(() => ({
         v-model="modelValue"
         type="number"
         class="number-input"
+        :disabled
+        :min
+        :max
+        :step
         @blur="onBlur"
       />
       <div class="controls">
@@ -117,7 +138,6 @@ input[type=number] {
 .inner :deep(.control-label) {
   position: absolute;
   z-index: 1;
-  pointer-events: none;
   left: var(--control-px);
   top: var(--control-label-block-start);
   color: var(--color-muted);

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

@@ -1,5 +1,6 @@
+import type { ControlProps } from "../ControlElement.vue.js";
 import type { InputLayout } from "../Input.vue.js";
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
     min?: number;
     max?: number;
@@ -28,8 +29,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;
+    disabled: boolean;
     step: number;
     min: number;
     max: number;