nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/link/link.vue

@@ -26,11 +26,11 @@ const props = defineProps({
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 const { link, rest: { underline, ...rest } } = pickLinkProps(props);

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

@@ -1,14 +1,14 @@
-import type { NuanceColor, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
+export interface LoaderVars {
+    root: '--loader-size' | '--loader-color';
+}
 export interface LoaderProps {
     /** Component size */
-    size?: NuanceSize | `compact-${NuanceSize}` | string;
+    size?: NuanceSize | `compact-${NuanceSize}` | AnyString;
     /** Color from theme */
-    color?: NuanceColor | string;
-    /**
-     * Loader animation type
-     * @default `'oval'`
-     */
+    color?: NuanceColor | AnyString;
+    /** Loader animation type @default `'oval'` */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/loader/loader.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getSize, parseThemeColor } from "@nui/utils";
-import { computed } from "vue";
 import BarsLoader from "./_loaders/bars-loader.vue";
 import DotsLoader from "./_loaders/dots-loader.vue";
 import OvalLoader from "./_loaders/oval-loader.vue";
@@ -15,17 +14,19 @@ const loaders = {
   oval: OvalLoader,
   dots: DotsLoader
 };
-const style = computed(() => useStyleResolver((theme) => {
+const style = useVarsResolver((theme) => {
   const _color = parseThemeColor({ color, theme });
   return {
-    "--loader-size": getSize(size, "loader-size"),
-    "--loader-color": _color.value
+    root: {
+      "--loader-size": getSize(size, "loader-size"),
+      "--loader-color": _color.value
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<component :is='loaders[type]' :class='$style.root' :style />
+	<component :is='loaders[type]' :class='$style.root' :style='style.root' />
 </template>
 
 <style module>

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

@@ -1,14 +1,14 @@
-import type { NuanceColor, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
+export interface LoaderVars {
+    root: '--loader-size' | '--loader-color';
+}
 export interface LoaderProps {
     /** Component size */
-    size?: NuanceSize | `compact-${NuanceSize}` | string;
+    size?: NuanceSize | `compact-${NuanceSize}` | AnyString;
     /** Color from theme */
-    color?: NuanceColor | string;
-    /**
-     * Loader animation type
-     * @default `'oval'`
-     */
+    color?: NuanceColor | AnyString;
+    /** Loader animation type @default `'oval'` */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-close-button.vue

@@ -2,15 +2,15 @@
 import DialogCloseButton from "../dialog/ui/dialog-close-button.vue";
 const props = defineProps({
   size: { type: null, required: false },
-  variant: { type: String, required: false },
   gradient: { type: Object, required: false },
-  loading: { type: Boolean, required: false },
   color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  mod: { type: [Object, Array, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  loading: { type: Boolean, required: false },
   icon: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false }
 });
 </script>
 

package/dist/runtime/components/modal/modal-root.vue

@@ -15,16 +15,16 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  portalTarget: { type: [String, Object, null], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   yOffset: { type: void 0, required: false },
   xOffset: { type: void 0, required: false },
   radius: { type: [String, Number], required: false },
   size: { type: String, required: false },
   shadow: { type: String, required: false },
   padding: { type: [String, Number], required: false },
-  transition: { type: String, required: false },
-  portalTarget: { type: [String, Object, null], required: false },
-  is: { type: null, required: false },
-  mod: { type: [Object, Array, null], required: false }
+  transition: { type: String, required: false }
 });
 defineEmits(["open", "close"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });

package/dist/runtime/components/modal/modal-title.vue

@@ -9,11 +9,11 @@ const props = defineProps({
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 </script>

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -14,13 +14,13 @@ const {
   active: { type: String, required: false },
   notActive: { type: String, required: false },
   size: { type: null, required: false },
-  variant: { type: String, required: false },
   gradient: { type: Object, required: false },
+  radius: { type: [String, Number, Object], required: false },
   loading: { type: Boolean, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  mod: { type: [Object, Array, null], required: false },
   disabled: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
   rel: { type: [String, Object, null], required: false },

package/dist/runtime/components/nav-link/nav-link.d.vue.ts

@@ -1,6 +1,10 @@
 import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
+export type NavLinkVariant = 'filled' | 'light' | 'subtle';
+export interface NavLinkVars {
+    root: '--nl-bg' | '--nl-hover' | '--nl-color' | '--nl-spacing';
+}
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link description displayed below the label */
     description?: string;
@@ -14,13 +18,10 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
     noWrap?: boolean;
     /** Disables the component */
     disabled?: boolean;
-    /**
-     * Visual variant
-     * @default `'filled'`
-     */
-    variant?: 'filled' | 'light' | 'subtle';
     /** Icon displayed before the label */
     icon?: string;
+    /** Visual variant */
+    variant?: NavLinkVariant;
 }
 declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/nav-link/nav-link.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getSize } from "@nui/utils";
-import { computed } from "vue";
 import Box from "../box.vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import { pickLinkProps } from "../link";
@@ -12,8 +11,8 @@ const props = defineProps({
   spacing: { type: [String, Number], required: false },
   noWrap: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  variant: { type: String, required: false },
   icon: { type: String, required: false },
+  variant: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   to: { type: null, required: false },
@@ -35,6 +34,7 @@ const props = defineProps({
 const {
   link,
   rest: {
+    active,
     disabled,
     mod,
     variant = "filled",
@@ -45,15 +45,21 @@ const {
     icon
   }
 } = pickLinkProps(props);
-const style = computed(() => useStyleResolver((theme) => {
-  const { background, hover, text } = createVariantColorResolver({ variant, color, theme });
+const style = useVarsResolver((theme) => {
+  const {
+    background,
+    hover,
+    text
+  } = createVariantColorResolver({ variant, color, theme });
   return {
-    "--nl-bg": variant ? background : void 0,
-    "--nl-hover": variant ? hover : void 0,
-    "--nl-color": variant ? text : void 0,
-    "--nl-spacing": getSize(spacing, "nl-spacing")
+    root: {
+      "--nl-bg": variant ? background : void 0,
+      "--nl-hover": variant ? hover : void 0,
+      "--nl-color": variant ? text : void 0,
+      "--nl-spacing": getSize(spacing, "nl-spacing")
+    }
   };
-}));
+});
 </script>
 
 <template>
@@ -61,15 +67,19 @@ const style = computed(() => useStyleResolver((theme) => {
 		<UnstyledButton
 			is='a'
 			:href
-			:style
+			:style='style.root'
 			:class='$style.root'
-			:mod='[{ active: isActive, disabled }, mod]'
+			:mod='[{ active: active ?? isActive, disabled }, mod]'
 			:aria-current="isActive ? 'page' : void 0"
 			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
 			:target='"target" in linkProps ? linkProps?.target : void 0'
 			@click='navigate'
 		>
-			<span v-if='$slots.leftSection || icon' :class='$style.section' data-position='left'>
+			<span
+				v-if='$slots.leftSection || icon'
+				:class='$style.section'
+				data-position='left'
+			>
 				<slot name='leftSection'>
 					<Icon v-if='icon' :name='icon' />
 				</slot>
@@ -86,110 +96,17 @@ const style = computed(() => useStyleResolver((theme) => {
 				</Box>
 			</Box>
 
-			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+			<span
+				v-if='$slots.rightSection'
+				:class='$style.section'
+				data-position='right'
+			>
 				<slot name='rightSection' />
 			</span>
 		</UnstyledButton>
 	</NuxtLink>
 </template>
 
-<style module lang="postcss">
-.root {
-	--nl-spacing-xs: .25rem;
-	--nl-spacing-sm: .5rem;
-	--nl-spacing-md: .75rem;
-	--nl-spacing-lg: 1rem;
-	--nl-spacing-xl: 1.25rem;
-
-	--nl-bg: var(--color-primary-light);
-	--nl-hover: var(--color-primary-light-hover);
-	--nl-color: var(--color-primary-light-color);
-	--nl-spacing: var(--nl-spacing-xs);
-
-	user-select: none;
-
-	display: flex;
-	gap: var(--nl-spacing);
-	align-items: center;
-
-	width: 100%;
-	padding: .25rem var(--spacing-sm);
-	border-radius: var(--radius-default);
-
-	&:where([data-disabled]) {
-		pointer-events: none;
-
-		opacity: 0.4;
-	}
-
-	&:hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-6);
-		}
-	}
-
-	&:where([data-active]) {
-		color: var(--nl-color);
-
-		background-color: var(--nl-bg);
-
-		.description {
-			--description-opacity: 0.9;
-			--description-color: var(--nl-color);
-		}
-
-		&:hover {
-			background-color: var(--nl-hover);
-		}
-	}
-}
-
-.section {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: transform 150ms ease;
-
-	&>svg {
-		display: block;
-	}
-
-	&:where([data-rotate]) {
-		transform: rotate(90deg);
-	}
-}
-
-.label {
-	font-size: var(--font-size-sm);
-}
-
-.body {
-	overflow: hidden;
-	flex: 1;
-
-	text-overflow: ellipsis;
-
-	&:where([data-no-wrap]) {
-		white-space: nowrap;
-	}
-}
-
-.description {
-	overflow: hidden;
-
-	font-size: var(--font-size-xs);
-	color: var(--description-color, var(--color-dimmed));
-	text-overflow: ellipsis;
-
-	opacity: var(--description-opacity, 1);
-
-	:where([data-no-wrap]) & {
-		white-space: nowrap;
-	}
-}
+<style module>
+.root{--nl-spacing-xs:.25rem;--nl-spacing-sm:.5rem;--nl-spacing-md:.75rem;--nl-spacing-lg:1rem;--nl-spacing-xl:1.25rem;--nl-bg:var(--color-primary-light);--nl-hover:var(--color-primary-light-hover);--nl-color:var(--color-primary-light-color);--nl-spacing:var(--nl-spacing-xs);align-items:center;border-radius:var(--radius-default);display:flex;gap:var(--nl-spacing);padding:.25rem var(--spacing-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.root:where([data-disabled]){opacity:.4;pointer-events:none}.root:hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-6)}}.root:where([data-active]){background-color:var(--nl-bg);color:var(--nl-color)}.root:where([data-active]) .description{--description-opacity:0.9;--description-color:var(--nl-color)}.root:where([data-active]):hover{background-color:var(--nl-hover)}.section{align-items:center;display:flex;justify-content:center;transition:transform .15s ease}.section>svg{display:block}.section:where([data-rotate]){transform:rotate(90deg)}.label{font-size:var(--font-size-sm)}.body{flex:1;overflow:hidden;text-overflow:ellipsis}.body:where([data-no-wrap]){white-space:nowrap}.description{color:var(--description-color,var(--color-dimmed));font-size:var(--font-size-xs);opacity:var(--description-opacity,1);overflow:hidden;text-overflow:ellipsis}:where([data-no-wrap]) .description{white-space:nowrap}
 </style>

package/dist/runtime/components/nav-link/nav-link.vue.d.ts

@@ -1,6 +1,10 @@
 import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
+export type NavLinkVariant = 'filled' | 'light' | 'subtle';
+export interface NavLinkVars {
+    root: '--nl-bg' | '--nl-hover' | '--nl-color' | '--nl-spacing';
+}
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link description displayed below the label */
     description?: string;
@@ -14,13 +18,10 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
     noWrap?: boolean;
     /** Disables the component */
     disabled?: boolean;
-    /**
-     * Visual variant
-     * @default `'filled'`
-     */
-    variant?: 'filled' | 'light' | 'subtle';
     /** Icon displayed before the label */
     icon?: string;
+    /** Visual variant */
+    variant?: NavLinkVariant;
 }
 declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/paper.vue

@@ -21,35 +21,6 @@ const style = computed(() => ({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	--paper-radius: var(--radius-default);
-	--paper-shadow: none;
-
-	touch-action: manipulation;
-
-	display: block;
-
-	border-radius: var(--paper-radius);
-
-	text-decoration: none;
-
-	background-color: var(--color-body);
-
-	outline: 0;
-	box-shadow: var(--paper-shadow);
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-border]) {
-		border: rem(1px) solid var(--paper-border-color);
-	}
-
-	@mixin light {
-		--paper-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--paper-border-color: var(--color-slate-7);
-	}
-}
+<style module>
+.root{--paper-radius:var(--radius-default);--paper-shadow:none;background-color:var(--color-body);border-radius:var(--paper-radius);box-shadow:var(--paper-shadow);display:block;outline:0;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.root:where([data-with-border]){border:rem(1px) solid var(--paper-border-color)}.root{@mixin light{--paper-border-color:var(--color-gray-3)}}.root{@mixin dark{--paper-border-color:var(--color-slate-7)}}
 </style>

package/dist/runtime/components/popover/popover-dropdown.vue

@@ -35,58 +35,6 @@ const style = computed(() => ({
 	</div>
 </template>
 
-<style module lang="postcss">
-.dropdown {
-	--popover-radius: var(--radius-default);
-	--popover-shadow: none;
-
-	overflow: visible;
-
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border: 1px solid var(--popover-border-color);
-	border-radius: var(--popover-radius);
-
-	color: var(--color-text);
-
-	opacity: 0;
-	box-shadow: var(--popover-shadow);
-
-	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
-
-	&:popover-open {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@mixin where-light {
-		--popover-border-color: var(--color-gray-2);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		--popover-border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.arrow {
-	--arrow-size: 7px;
-	--arrow-radius: 0px;
-	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
-
-	position: absolute;
-	transform: rotate(45deg);
-
-	width: var(--arrow-size);
-	height: var(--arrow-size);
-
-	border: 1px solid var(--popover-border-color);
-
-	background-color: inherit;
-}
+<style module>
+.dropdown{--popover-radius:var(--radius-default);--popover-shadow:none;border:1px solid var(--popover-border-color);border-radius:var(--popover-radius);box-shadow:var(--popover-shadow);color:var(--color-text);opacity:0;overflow:visible;padding:var(--spacing-xs) var(--spacing-sm);transition:opacity .2s,overlay allow-discrete .2s,display allow-discrete .2s}.dropdown:popover-open{opacity:1}@starting-style{.dropdown:popover-open{opacity:0}}.dropdown{@mixin where-light{--popover-border-color:var(--color-gray-2);background-color:var(--color-white)}}.dropdown{@mixin where-dark{--popover-border-color:var(--color-dark-4);background-color:var(--color-dark-6)}}.arrow{--arrow-size:7px;--arrow-radius:0px;--arrow-placement:calc(var(--arrow-size)/2*-1);background-color:inherit;border:1px solid var(--popover-border-color);height:var(--arrow-size);position:absolute;transform:rotate(45deg);width:var(--arrow-size)}
 </style>

package/dist/runtime/components/progress/progress-root.d.vue.ts

@@ -1,10 +1,10 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
     /** Component size @default `'md'` */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Border radius @default `theme.defaultRadius` */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
     /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
     /** Orientation @default `'horizontal'` */

package/dist/runtime/components/progress/progress-root.vue

@@ -10,8 +10,8 @@ const {
   radius,
   transitionDuration
 } = defineProps({
-  size: { type: String, required: false },
-  radius: { type: [String, Number], required: false },
+  size: { type: [String, Object], required: false },
+  radius: { type: [String, Number, Object], required: false },
   transitionDuration: { type: Number, required: false },
   orientation: { type: String, required: false },
   is: { type: null, required: false },

package/dist/runtime/components/progress/progress-root.vue.d.ts

@@ -1,10 +1,10 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
     /** Component size @default `'md'` */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Border radius @default `theme.defaultRadius` */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
     /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
     /** Orientation @default `'horizontal'` */

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

@@ -1,5 +1,8 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionVars {
+    root: '--progress-section-size' | '--progress-section-color';
+}
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -26,15 +26,17 @@ const ariaAttributes = computed(() => withAria ? {
   "aria-valuenow": value.value,
   "aria-valuetext": `${value.value}%`
 } : {});
-const style = computed(() => useStyleResolver((theme) => ({
-  "--progress-section-size": `${value.value}%`,
-  "--progress-section-color": getThemeColor(color, theme)
-})));
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--progress-section-size": `${value.value}%`,
+    "--progress-section-color": getThemeColor(color, theme)
+  }
+}));
 </script>
 
 <template>
 	<Box
-		:style
+		:style='style.root'
 		v-bind='ariaAttributes'
 		:class='css.section'
 		:mod='[{ striped: striped || animated, animated }, mod]'

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

@@ -1,5 +1,8 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionVars {
+    root: '--progress-section-size' | '--progress-section-color';
+}
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;

package/dist/runtime/components/progress/progress.vue

@@ -12,8 +12,8 @@ const {
   orientation,
   transitionDuration
 } = defineProps({
-  size: { type: String, required: false },
-  radius: { type: [String, Number], required: false },
+  size: { type: [String, Object], required: false },
+  radius: { type: [String, Number, Object], required: false },
   transitionDuration: { type: Number, required: false },
   orientation: { type: String, required: false },
   is: { type: null, required: false },

package/dist/runtime/components/select.vue

@@ -40,11 +40,11 @@ const {
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
@@ -166,10 +166,6 @@ function onSubmit(val) {
 	</ComboboxRoot>
 </template>
 
-<style module lang="postcss">
-.input {
-	:where([readonly]) {
-		cursor: pointer;
-	}
-}
+<style module>
+.input :where([readonly]){cursor:pointer}
 </style>