nuance-ui 0.1.4 → 0.1.6

package/README.md

@@ -15,6 +15,12 @@ yarn add nuance-ui
 pnpm add nuance-ui
 ```
 
+### Install modules
+
+```bash
+npx nuxt module add color-mode icon
+```
+
 ## Quick Start
 
 Add `nuance-ui` to the `modules` section of your `nuxt.config.ts`:

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.4",
+  "version": "0.1.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/action-icon/action-icon-group.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ActionIconGroupProps extends /* @vue-ignore */ BoxProps {
+export interface ActionIconGroupProps extends BoxProps {
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_6: {};

package/dist/runtime/components/action-icon/action-icon-group.vue

@@ -2,7 +2,9 @@
 import Box from "../box.vue";
 import css from "./action-icon.module.css";
 const { mod, orientation = "horizontal", is } = defineProps({
-  orientation: { type: String, required: false }
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 </script>
 

package/dist/runtime/components/action-icon/action-icon-group.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ActionIconGroupProps extends /* @vue-ignore */ BoxProps {
+export interface ActionIconGroupProps extends BoxProps {
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_6: {};

package/dist/runtime/components/action-icon/action-icon-section.d.vue.ts

@@ -1,6 +1,6 @@
 import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
-export interface ActionIconSectionProps extends /* @vue-ignore */ BoxProps {
+export interface ActionIconSectionProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
     gradient?: UiKitGradient;

package/dist/runtime/components/action-icon/action-icon-section.vue

@@ -18,7 +18,9 @@ const {
   gradient: { type: Object, required: false },
   loading: { type: Boolean, required: false },
   color: { type: null, required: false },
-  radius: { type: [String, Number], required: false }
+  radius: { type: [String, Number], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => useStyleResolver((theme) => {
   const {

package/dist/runtime/components/action-icon/action-icon-section.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
-export interface ActionIconSectionProps extends /* @vue-ignore */ BoxProps {
+export interface ActionIconSectionProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
     gradient?: UiKitGradient;

package/dist/runtime/components/action-icon/action-icon.vue

@@ -23,7 +23,7 @@ const {
   color: { type: null, required: false },
   radius: { type: [String, Number], required: false },
   classes: { type: Object, required: false },
-  mod: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   icon: { type: String, required: false }
 });
 const style = computed(() => useStyleResolver((theme) => {

package/dist/runtime/components/app-shell/app-shell-section.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface AppShellSectionProps extends /* @vue-ignore */ BoxProps {
+export interface AppShellSectionProps extends BoxProps {
     /** Determines whether the section should take all available space, `false` by default */
     grow?: boolean;
 }

package/dist/runtime/components/app-shell/app-shell-section.vue

@@ -1,7 +1,9 @@
 <script setup>
 import Box from "../box.vue";
 const { is = "section", mod, grow } = defineProps({
-  grow: { type: Boolean, required: false }
+  grow: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 </script>
 

package/dist/runtime/components/app-shell/app-shell-section.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface AppShellSectionProps extends /* @vue-ignore */ BoxProps {
+export interface AppShellSectionProps extends BoxProps {
     /** Determines whether the section should take all available space, `false` by default */
     grow?: boolean;
 }

package/dist/runtime/components/app-shell/app-shell.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface AppShellProps extends /* @vue-ignore */ BoxProps {
+export interface AppShellProps extends BoxProps {
     /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
     navbar?: boolean;
     /** AppShellAside collapsed state. Required if you use AppShellAside component. */

package/dist/runtime/components/app-shell/app-shell.vue

@@ -15,7 +15,9 @@ const {
   header: { type: Boolean, required: false },
   footer: { type: Boolean, required: false },
   layout: { type: String, required: false },
-  withBorder: { type: Boolean, required: false }
+  withBorder: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => ({
   "--app-shell-navbar-transform": navbar ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,

package/dist/runtime/components/app-shell/app-shell.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface AppShellProps extends /* @vue-ignore */ BoxProps {
+export interface AppShellProps extends BoxProps {
     /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
     navbar?: boolean;
     /** AppShellAside collapsed state. Required if you use AppShellAside component. */

package/dist/runtime/components/background-image.d.vue.ts

@@ -1,6 +1,6 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
-export interface BackgroundImageProps extends /* @vue-ignore */ BoxProps {
+export interface BackgroundImageProps extends BoxProps {
     radius?: NuanceRadius | string;
     /** Image url */
     src: string;

package/dist/runtime/components/background-image.vue

@@ -4,7 +4,9 @@ import { computed } from "vue";
 import Box from "./box.vue";
 const { radius, src, ...rest } = defineProps({
   radius: { type: [String, Number], required: false },
-  src: { type: String, required: true }
+  src: { type: String, required: true },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => ({
   "--bi-radius": radius ? getRadius(radius) : void 0,

package/dist/runtime/components/background-image.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
-export interface BackgroundImageProps extends /* @vue-ignore */ BoxProps {
+export interface BackgroundImageProps extends BoxProps {
     radius?: NuanceRadius | string;
     /** Image url */
     src: string;

package/dist/runtime/components/button/button-group.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ButtonGroupProps extends /* @vue-ignore */ BoxProps {
+export interface ButtonGroupProps extends BoxProps {
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_6: {};

package/dist/runtime/components/button/button-group.vue

@@ -2,7 +2,9 @@
 import Box from "../box.vue";
 import css from "./button.module.css";
 const { is, mod, orientation = "horizontal" } = defineProps({
-  orientation: { type: String, required: false }
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 </script>
 

package/dist/runtime/components/button/button-group.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ButtonGroupProps extends /* @vue-ignore */ BoxProps {
+export interface ButtonGroupProps extends BoxProps {
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_6: {};

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

@@ -1,7 +1,7 @@
 import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
-export interface ButtonProps extends /* @vue-ignore */ BoxProps {
+export interface ButtonProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
     gradient?: UiKitGradient;

package/dist/runtime/components/button/button.vue

@@ -30,7 +30,9 @@ const {
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
   rightSectionPE: { type: null, required: false },
-  rightSectionProps: { type: Object, required: false }
+  rightSectionProps: { type: Object, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => useStyleResolver((theme) => {
   const {

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

@@ -1,7 +1,7 @@
 import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
-export interface ButtonProps extends /* @vue-ignore */ BoxProps {
+export interface ButtonProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
     gradient?: UiKitGradient;

package/dist/runtime/components/button/unstyled-button.d.vue.ts

@@ -1,11 +1,12 @@
 import type { BoxProps } from '../box.vue.js';
 import type { InputBaseProps } from '../input/index.js';
-type __VLS_Props = InputBaseProps & Omit<BoxProps, 'is'>;
+interface UnstyledButtonProps extends InputBaseProps, BoxProps {
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UnstyledButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnstyledButtonProps> & Readonly<{}>, {}, {}, {}, {}, 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;

package/dist/runtime/components/button/unstyled-button.vue

@@ -1,14 +1,15 @@
 <script setup>
 import Box from "../box.vue";
-const props = defineProps({
+const { is = "button", ...props } = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
+  is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 </script>
 
 <template>
-	<Box is='button' v-bind='props' :class='$style.root' type='button'>
+	<Box :is v-bind='props' :class='$style.root' type='button'>
 		<slot />
 	</Box>
 </template>

package/dist/runtime/components/button/unstyled-button.vue.d.ts

@@ -1,11 +1,12 @@
 import type { BoxProps } from '../box.vue.js';
 import type { InputBaseProps } from '../input/index.js';
-type __VLS_Props = InputBaseProps & Omit<BoxProps, 'is'>;
+interface UnstyledButtonProps extends InputBaseProps, BoxProps {
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UnstyledButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnstyledButtonProps> & Readonly<{}>, {}, {}, {}, {}, 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;

package/dist/runtime/components/card/card-section.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface CardSectionProps extends /* @vue-ignore */ BoxProps {
+export interface CardSectionProps extends BoxProps {
     withBorder?: boolean;
     /** Determines whether the section should inherit padding from the parent `UiCard`, `false` by default */
     inheritPadding?: boolean;

package/dist/runtime/components/card/card-section.vue

@@ -3,7 +3,9 @@ import Box from "../box.vue";
 import css from "./card.module.css";
 const { is = "section", mod, inheritPadding, withBorder } = defineProps({
   withBorder: { type: Boolean, required: false },
-  inheritPadding: { type: Boolean, required: false }
+  inheritPadding: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 </script>
 

package/dist/runtime/components/card/card-section.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface CardSectionProps extends /* @vue-ignore */ BoxProps {
+export interface CardSectionProps extends BoxProps {
     withBorder?: boolean;
     /** Determines whether the section should inherit padding from the parent `UiCard`, `false` by default */
     inheritPadding?: boolean;

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

@@ -1,6 +1,6 @@
 import type { NuanceSpacing } from '@nui/types';
 import type { PaperProps } from '../paper.vue.js';
-export interface CardProps extends /* @vue-ignore */ PaperProps {
+export interface CardProps extends PaperProps {
     padding?: NuanceSpacing;
 }
 declare var __VLS_6: {};

package/dist/runtime/components/card/card.vue

@@ -4,7 +4,12 @@ import { computed } from "vue";
 import Paper from "../paper.vue";
 import css from "./card.module.css";
 const { padding, is = "article", ...rest } = defineProps({
-  padding: { type: [String, Number], required: false }
+  padding: { type: [String, Number], required: false },
+  shadow: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  withBorder: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => ({
   "--card-padding": getSpacing(padding)

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

@@ -1,6 +1,6 @@
 import type { NuanceSpacing } from '@nui/types';
 import type { PaperProps } from '../paper.vue.js';
-export interface CardProps extends /* @vue-ignore */ PaperProps {
+export interface CardProps extends PaperProps {
     padding?: NuanceSpacing;
 }
 declare var __VLS_6: {};

package/dist/runtime/components/checkbox/checkbox-group.d.vue.ts

@@ -1,6 +1,6 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
-export interface CheckboxGroupProps extends /* @vue-ignore */ Omit<InputWrapperProps, 'resize' | 'multiline' | 'id'> {
+export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
     name: string;
     size?: NuanceSize;
 }

package/dist/runtime/components/checkbox/checkbox-group.vue

@@ -5,7 +5,15 @@ import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
 import { useProvideCheckboxGroup } from "./lib/group.context";
 const { size, name, ...rest } = defineProps({
   name: { type: String, required: true },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  error: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  radius: { type: String, required: false },
+  variant: { type: String, required: false },
+  leftSectionPE: { type: null, required: false },
+  rightSectionPE: { type: null, required: false }
 });
 const value = defineModel({ type: Array, ...{ default: [] } });
 const id = useId();

package/dist/runtime/components/checkbox/checkbox-group.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
-export interface CheckboxGroupProps extends /* @vue-ignore */ Omit<InputWrapperProps, 'resize' | 'multiline' | 'id'> {
+export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
     name: string;
     size?: NuanceSize;
 }

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

@@ -1,6 +1,6 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
-export interface CheckboxProps extends /* @vue-ignore */ Omit<InlineInputProps, 'id'> {
+export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     color?: NuanceColor;
     iconColor?: NuanceColor;
     variant?: 'filled' | 'outline';

package/dist/runtime/components/checkbox/checkbox.vue

@@ -21,7 +21,14 @@ const {
   radius: { type: String, required: false },
   size: { type: String, required: false },
   indeterminate: { type: Boolean, required: false },
-  value: { type: String, required: false }
+  value: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  error: { type: String, required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  labelPosition: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 const id = useId();
 const modelValue = defineModel({ type: Boolean });
@@ -54,7 +61,7 @@ const style = computed(() => useStyleResolver((theme) => {
 				type='checkbox'
 				:class='$style.input'
 				:disabled='rest.disabled'
-				@click='value ? ctx?.onUpdate?.(value) ?? toggle() : toggle()'
+				@change='() => value && ctx ? ctx.onUpdate(value) : toggle()'
 			>
 
 			<slot name='icon' :indeterminate='indeterminate' :class='$style.icon'>
@@ -92,6 +99,8 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input {
+	cursor: pointer;
+
 	display: block;
 
 	width: var(--checkbox-size);

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

@@ -1,6 +1,6 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
-export interface CheckboxProps extends /* @vue-ignore */ Omit<InlineInputProps, 'id'> {
+export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     color?: NuanceColor;
     iconColor?: NuanceColor;
     variant?: 'filled' | 'outline';

package/dist/runtime/components/checkbox/lib/card.context.d.ts

@@ -4,4 +4,4 @@ export interface CheckboxCardState {
     onUpdate: () => void;
 }
 export declare const useProvideCheckboxCard: (props: CheckboxCardState) => CheckboxCardState;
-export declare const useCheckboxCardState: () => CheckboxCardState;
+export declare const useCheckboxCardState: () => CheckboxCardState | undefined;

package/dist/runtime/components/checkbox/lib/card.context.js

@@ -1,8 +1,7 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createInjectionState } from "@vueuse/core";
 const injectionKey = Symbol("CheckboxCard");
-const [useProvide, useState] = createStrictInjection((props) => props, {
-  injectionKey,
-  name: "CheckboxCard"
+const [useProvide, useState] = createInjectionState((props) => props, {
+  injectionKey
 });
 export const useProvideCheckboxCard = useProvide;
 export const useCheckboxCardState = useState;

package/dist/runtime/components/checkbox/lib/group.context.d.ts

@@ -13,4 +13,4 @@ export declare const useCheckboxGroupState: () => {
     value: ModelRef<string[]>;
     size: NuanceSize | undefined;
     onUpdate: (newValue: string) => number | string[];
-};
+} | undefined;

package/dist/runtime/components/checkbox/lib/group.context.js

@@ -1,6 +1,6 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createInjectionState } from "@vueuse/core";
 const injectionKey = Symbol("CheckboxGroup");
-const [useProvide, useState] = createStrictInjection(({ value, size }) => {
+const [useProvide, useState] = createInjectionState(({ value, size }) => {
   const onUpdate = (newValue) => {
     if (value.value.includes(newValue))
       return value.value = value.value.filter((i) => i !== newValue);
@@ -8,8 +8,7 @@ const [useProvide, useState] = createStrictInjection(({ value, size }) => {
   };
   return { value, size, onUpdate };
 }, {
-  injectionKey,
-  name: "CheckboxGroup"
+  injectionKey
 });
 export const useProvideCheckboxGroup = useProvide;
 export const useCheckboxGroupState = useState;

package/dist/runtime/components/chip/chip.vue

@@ -5,7 +5,7 @@ import { computed, useId } from "vue";
 import Box from "../box.vue";
 import { useChipGroupState, useChipState } from "./lib";
 const {
-  id: _id,
+  id: uid,
   color,
   size = "sm",
   radius = "xl",
@@ -27,7 +27,7 @@ const {
   hideIcon: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
-const id = _id || useId();
+const id = uid || useId();
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
 const ctx = useChipGroupState();
 const { checked, onUpdate } = useChipState(ctx, modelValue, value);

package/dist/runtime/components/combobox/combobox-empty.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ComboboxEmptyProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+export interface ComboboxEmptyProps extends BoxProps {
 }
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/combobox/combobox-empty.vue

@@ -1,11 +1,14 @@
 <script setup>
 import Box from "../box.vue";
 import css from "./combobox.module.css";
-const { mod } = defineProps({});
+const { is, mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
 </script>
 
 <template>
-	<Box :mod :class='css.empty'>
+	<Box :is :mod :class='css.empty'>
 		<slot />
 	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-empty.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ComboboxEmptyProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+export interface ComboboxEmptyProps extends BoxProps {
 }
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/combobox/combobox-group.d.vue.ts

@@ -1,6 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
-export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<BoxProps, 'is'>, ComboboxItemProps {
+export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
     data: ComboboxItemGroup<Value, Ext>;

package/dist/runtime/components/combobox/combobox-group.vue

@@ -14,6 +14,8 @@ const {
 } = defineProps({
   label: { type: String, required: false },
   data: { type: Object, required: true },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   withCheckIcon: { type: Boolean, required: false },
   checkIcon: { type: String, required: false },
   iconPosition: { type: String, required: false }

package/dist/runtime/components/combobox/combobox-group.vue.d.ts

@@ -1,6 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
-export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<BoxProps, 'is'>, ComboboxItemProps {
+export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
     data: ComboboxItemGroup<Value, Ext>;

package/dist/runtime/components/combobox/combobox-option-list.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ComboboxOptionListProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+export interface ComboboxOptionListProps extends BoxProps {
     /** Id of the element that labels the options list */
     labelledBy?: string;
 }

package/dist/runtime/components/combobox/combobox-option-list.vue

@@ -2,7 +2,9 @@
 import Box from "../box.vue";
 import css from "./combobox.module.css";
 const { labelledBy, mod } = defineProps({
-  labelledBy: { type: String, required: false }
+  labelledBy: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
 });
 </script>
 

package/dist/runtime/components/combobox/combobox-option-list.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-export interface ComboboxOptionListProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+export interface ComboboxOptionListProps extends BoxProps {
     /** Id of the element that labels the options list */
     labelledBy?: string;
 }

package/dist/runtime/components/combobox/combobox-option.d.vue.ts

@@ -1,6 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
-export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<BoxProps, 'is'>, ComboboxItemProps {
+export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     data: ComboboxItem<Value, Ext>;
     checked: boolean;
     selected?: boolean;

package/dist/runtime/components/combobox/combobox-option.vue

@@ -16,6 +16,8 @@ const {
   data: { type: Object, required: true },
   checked: { type: Boolean, required: true },
   selected: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   withCheckIcon: { type: Boolean, required: false },
   checkIcon: { type: String, required: false },
   iconPosition: { type: String, required: false }