nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/input/ui/input-base.vue

@@ -6,13 +6,13 @@ import { useInputWrapperState } from "../lib/input-wrapper.context";
 const { classes, ...props } = defineProps({
   classes: { type: Object, 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 },
   multiline: { type: Boolean, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
 });
 defineSlots();
 const api = computed(() => useInputWrapperState() ?? props);
@@ -58,265 +58,6 @@ const style = computed(() => ({
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.root {
-	--input-height-xs: rem(30px);
-	--input-height-sm: rem(36px);
-	--input-height-md: rem(42px);
-	--input-height-lg: rem(50px);
-	--input-height-xl: rem(60px);
-
-	--input-padding-y-xs: rem(5px);
-	--input-padding-y-sm: rem(6px);
-	--input-padding-y-md: rem(8px);
-	--input-padding-y-lg: rem(10px);
-	--input-padding-y-xl: rem(13px);
-
-	--input-height: var(--input-height-sm);
-	--input-radius: var(--radius-default);
-
-	--input-cursor: text;
-	--input-text-align: left;
-	--input-line-height: calc(var(--input-height) - rem(2px));
-	--input-padding: calc(var(--input-height) / 3);
-	--input-padding-inline-start: var(--input-padding);
-	--input-padding-inline-end: var(--input-padding);
-	--input-placeholder-color: var(--color-placeholder);
-	--input-color: var(--color-text);
-
-	--input-left-section-width: calc(var(--input-height) - rem(2px));
-	--input-right-section-width: calc(var(--input-height) - rem(2px));
-	--input-left-section-pointer-events: none;
-	--input-right-section-pointer-events: none;
-	--input-left-section-size: var(--input-left-section-width);
-	--input-right-section-size: var(--input-right-section-width);
-
-	--input-fz: var(--font-size-sm);
-	--input-size: var(--input-height);
-	--input-resize: none;
-
-	--section-y: 1px;
-	--left-section-start: 1px;
-	--left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
-
-	--right-section-end: 1px;
-	--right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
-
-	position: relative;
-
-	&[data-variant='unstyled'] {
-		--input-padding: 0;
-		--input-padding-y: 0;
-		--input-padding-inline-start: 0;
-		--input-padding-inline-end: 0;
-	}
-
-	&[data-pointer] {
-		--input-cursor: pointer;
-	}
-
-	&[data-multiline] {
-		--input-padding-y-xs: 4.5px;
-		--input-padding-y-sm: 5.5px;
-		--input-padding-y-md: 7px;
-		--input-padding-y-lg: 9.5px;
-		--input-padding-y-xl: 13px;
-
-		--input-size: auto;
-		--input-line-height: var(--line-height);
-		--input-padding-y: var(--input-padding-y-sm);
-	}
-
-	&[data-with-left-section] {
-		--input-padding-inline-start: var(--input-left-section-size);
-	}
-
-	&[data-with-right-section] {
-		--input-padding-inline-end: var(--input-right-section-size);
-	}
-
-	&[data-error] {
-		--input-color: var(--color-error);
-		--input-placeholder-color: var(--color-error);
-		--input-section-color: var(--color-error);
-
-		--input-bd: var(--color-error);
-	}
-
-	@mixin where-light {
-		--input-disabled-bg: var(--color-gray-1);
-		--input-disabled-color: var(--color-gray-6);
-
-		&[data-variant='default'] {
-			--input-bd: var(--color-gray-4);
-			--input-bg: var(--color-white);
-			--input-bd-focus: var(--color-primary-filled);
-		}
-
-		&[data-variant='filled'] {
-			--input-bd: transparent;
-			--input-bg: var(--color-gray-1);
-			--input-bd-focus: var(--color-primary-filled);
-		}
-
-		&[data-variant='unstyled'] {
-			--input-bd: transparent;
-			--input-bg: transparent;
-			--input-bd-focus: transparent;
-		}
-	}
-
-	@mixin where-dark {
-		--input-disabled-bg: var(--color-dark-6);
-		--input-disabled-color: var(--color-dark-2);
-
-		&[data-variant='default'] {
-			--input-bd: var(--color-dark-4);
-			--input-bg: var(--color-dark-6);
-			--input-bd-focus: var(--color-primary-filled);
-		}
-
-		&[data-variant='filled'] {
-			--input-bd: transparent;
-			--input-bg: var(--color-dark-5);
-			--input-bd-focus: var(--color-primary-filled);
-		}
-
-		&[data-variant='unstyled'] {
-			--input-bd: transparent;
-			--input-bg: transparent;
-			--input-bd-focus: transparent;
-		}
-	}
-
-	@mixin where-rtl {
-		--input-text-align: right;
-		--left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
-		--right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
-	}
-}
-
-.input {
-	cursor: var(--input-cursor);
-	resize: var(--input-resize, none);
-
-	overflow: var(--input-overflow);
-	display: block;
-
-	width: 100%;
-	height: var(--input-size);
-	min-height: var(--input-height);
-	padding-top: var(--input-padding-y, 0rem);
-	padding-bottom: var(--input-padding-y, 0rem);
-	padding-inline-start: var(--input-padding-inline-start);
-	padding-inline-end: var(--input-padding-inline-end);
-	border: rem(1px) solid var(--input-bd);
-	border-radius: var(--input-radius);
-
-	font-family: var(--font-family), serif;
-	font-size: var(--input-fz);
-	line-height: var(--input-line-height);
-	color: var(--input-color);
-
-	text-align: var(--input-text-align);
-
-	appearance: none;
-	background-color: var(--input-bg);
-
-	transition: border-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	/* Used as data attribute in Textarea component, does not have associated prop on the Input component */
-
-	&[data-no-overflow] {
-		--input-overflow: hidden;
-	}
-
-	&:focus,
-	&:focus-within {
-		--input-bd: var(--input-bd-focus);
-
-		outline: none;
-
-		[data-error] & {
-			--input-bd: var(--color-error);
-		}
-	}
-
-	&::placeholder {
-		color: var(--input-placeholder-color);
-
-		opacity: 1;
-	}
-
-	&::-webkit-inner-spin-button,
-	&::-webkit-outer-spin-button,
-	&::-webkit-search-decoration,
-	&::-webkit-search-cancel-button,
-	&::-webkit-search-results-button,
-	&::-webkit-search-results-decoration {
-		appearance: none;
-	}
-
-	&[type='number'] {
-		-moz-appearance: textfield;
-		appearance: textfield;
-	}
-
-	&:disabled,
-	&[data-disabled] {
-		cursor: not-allowed;
-
-		color: var(--input-disabled-color);
-
-		opacity: 0.6;
-		background-color: var(--input-disabled-bg);
-	}
-
-	/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */
-
-	&:has(input:disabled) {
-		cursor: not-allowed;
-
-		color: var(--input-disabled-color);
-
-		opacity: .6;
-		background-color: var(--input-disabled-bg);
-	}
-}
-
-.section {
-	pointer-events: var(--section-pointer-events);
-
-	position: absolute;
-	z-index: 1;
-	top: var(--section-y);
-	bottom: var(--section-y);
-	inset-inline-start: var(--section-start);
-	inset-inline-end: var(--section-end);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--section-size);
-
-	border-radius: var(--section-border-radius);
-
-	color: var(--input-section-color, var(--color-dimmed));
-
-	&[data-position='right'] {
-		--section-pointer-events: var(--input-right-section-pointer-events);
-		--section-end: var(--right-section-end);
-		--section-size: var(--input-right-section-size);
-		--section-border-radius: var(--right-section-border-radius);
-	}
-
-	&[data-position='left'] {
-		--section-pointer-events: var(--input-left-section-pointer-events);
-		--section-start: var(--left-section-start);
-		--section-size: var(--input-left-section-size);
-		--section-border-radius: var(--left-section-border-radius);
-	}
-}
+<style module>
+.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:has(input:disabled){background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
 </style>

package/dist/runtime/components/input/ui/input-inline.d.vue.ts

@@ -1,4 +1,4 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
     /** Input id */
@@ -12,7 +12,7 @@ export interface InlineInputProps extends BoxProps {
     /** Disables the component */
     disabled?: boolean | undefined;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
     /** HTML element used for the body wrapper */

package/dist/runtime/components/input/ui/input-inline.vue

@@ -19,7 +19,7 @@ const {
   description: { type: String, required: false },
   error: { type: String, required: false },
   disabled: { type: Boolean, required: false, skipCheck: true },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   labelPosition: { type: String, required: false },
   bodyElement: { type: null, required: false },
   labelElement: { type: null, required: false },
@@ -60,85 +60,6 @@ const style = computed(() => ({
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.root {
-	--label-lh-xs: rem(16px);
-	--label-lh-sm: rem(20px);
-	--label-lh-md: rem(24px);
-	--label-lh-lg: rem(30px);
-	--label-lh-xl: rem(36px);
-	--label-lh: var(--label-lh-sm);
-
-	--label-fz: var(--font-size-sm);
-
-	&[data-label-position='left'] {
-		--label-order: 0;
-	}
-
-	&[data-label-position='right'] {
-		--label-order: 1;
-	}
-}
-
-.body {
-	display: flex;
-	gap: var(--spacing-sm);
-}
-
-.wrapper {
-	--label-cursor: default;
-
-	cursor: var(--label-cursor);
-
-	display: inline-flex;
-	flex-direction: column;
-	gap: .25rem;
-	order: var(--label-order);
-
-	font-size: var(--label-fz);
-	line-height: var(--label-lh);
-
-	-webkit-tap-highlight-color: transparent;
-
-	fieldset:disabled &,
-	&[data-disabled] {
-		--label-cursor: not-allowed;
-	}
-
-	&:empty {
-		display: none;
-	}
-}
-
-.label {
-	cursor: var(--label-cursor);
-
-	color: inherit;
-
-	fieldset:disabled &,
-	&:where([data-disabled]) {
-		color: var(--color-gray-5);
-	}
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
+<style module>
+.root{--label-lh-xs:rem(16px);--label-lh-sm:rem(20px);--label-lh-md:rem(24px);--label-lh-lg:rem(30px);--label-lh-xl:rem(36px);--label-lh:var(--label-lh-sm);--label-fz:var(--font-size-sm)}.root[data-label-position=left]{--label-order:0}.root[data-label-position=right]{--label-order:1}.body{display:flex;gap:var(--spacing-sm)}.wrapper{--label-cursor:default;cursor:var(--label-cursor);display:inline-flex;flex-direction:column;font-size:var(--label-fz);gap:.25rem;line-height:var(--label-lh);order:var(--label-order);-webkit-tap-highlight-color:transparent}.wrapper[data-disabled],fieldset:disabled .wrapper{--label-cursor:not-allowed}.wrapper:empty{display:none}.label{color:inherit;cursor:var(--label-cursor)}.label:where([data-disabled]),fieldset:disabled .label{color:var(--color-gray-5)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}.error{color:var(--color-error);font-size:var(--input-error-size)}
 </style>

package/dist/runtime/components/input/ui/input-inline.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
     /** Input id */
@@ -12,7 +12,7 @@ export interface InlineInputProps extends BoxProps {
     /** Disables the component */
     disabled?: boolean | undefined;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
     /** HTML element used for the body wrapper */

package/dist/runtime/components/input/ui/input-label.d.vue.ts

@@ -1,9 +1,9 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 export interface InputLabelProps {
     /** Required input prop @default false */
     required?: boolean;
     /** Component size @default 'sm' */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/input/ui/input-label.vue

@@ -3,7 +3,7 @@ import { getFontSize } from "@nui/utils";
 import { computed } from "vue";
 const { required = false, size = "sm" } = defineProps({
   required: { type: Boolean, required: false },
-  size: { type: String, required: false }
+  size: { type: [String, Object], required: false }
 });
 const style = computed(() => ({
   "--input-label-size": getFontSize(size),

package/dist/runtime/components/input/ui/input-label.vue.d.ts

@@ -1,9 +1,9 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 export interface InputLabelProps {
     /** Required input prop @default false */
     required?: boolean;
     /** Component size @default 'sm' */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/input/ui/input-wrapper.d.vue.ts

@@ -19,7 +19,11 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {
+    size: import("../../../types/index.js").NuanceSize | import("../../../types/index.js").AnyString;
+    radius: import("../../../types/index.js").NuanceRadius | import("../../../types/index.js").AnyString;
+    variant: import("..").InputVariant;
+}, {}, {}, {}, 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/input/ui/input-wrapper.vue

@@ -1,53 +1,27 @@
 <script setup>
 import { getFontSize } from "@nui/utils";
-import { computed, useId } from "vue";
+import { computed, reactive, toRefs, useId } from "vue";
 import { useProvideInputWrapper } from "../lib/input-wrapper.context";
 import InputLabel from "./input-label.vue";
-const {
-  id,
-  error,
-  description,
-  label,
-  required,
-  variant = "default",
-  size = "sm",
-  radius = "sm",
-  leftSectionPE,
-  rightSectionPE,
-  multiline,
-  resize
-} = defineProps({
+const props = defineProps({
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
-  variant: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false, default: "sm" },
+  size: { type: [String, Object], required: false, default: "sm" },
+  variant: { type: String, required: false, default: "default" },
   multiline: { type: Boolean, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
-});
-const uid = id ?? useId();
-useProvideInputWrapper({
-  id: uid,
-  error,
-  description,
-  label,
-  required,
-  variant,
-  size,
-  radius,
-  leftSectionPE,
-  rightSectionPE,
-  multiline,
-  resize
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
 });
+const uid = props.id ?? useId();
+useProvideInputWrapper(reactive({ ...toRefs(props), id: uid }));
 const style = computed(() => ({
-  "--input-error-size": `calc(${getFontSize(size)} - .125rem)`,
-  "--input-description-size": `calc(${getFontSize(size)} - .125rem)`
+  "--input-error-size": `calc(${getFontSize(props.size)} - .125rem)`,
+  "--input-description-size": `calc(${getFontSize(props.size)} - .125rem)`
 }));
 </script>
 
@@ -81,32 +55,6 @@ const style = computed(() => ({
 	</div>
 </template>
 
-<style lang="postcss" module>
-.wrapper {
-	--input-error-size: calc(var(--font-size-sm) - rem(2px));
-	--input-description-size: calc(var(--font-size-sm) - rem(2px));
-
-	line-height: var(--line-height);
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
+<style module>
+.wrapper{--input-error-size:calc(var(--font-size-sm) - rem(2px));--input-description-size:calc(var(--font-size-sm) - rem(2px));line-height:var(--line-height)}.description,.error{display:block;line-height:1.2;margin:0;overflow-wrap:break-word;padding:0}.error{color:var(--color-error);font-size:var(--input-error-size)}.description{color:var(--color-dimmed);font-size:var(--input-description-size,calc(var(--font-size-sm) - rem(2px)))}
 </style>

package/dist/runtime/components/input/ui/input-wrapper.vue.d.ts

@@ -19,7 +19,11 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {
+    size: import("../../../types/index.js").NuanceSize | import("../../../types/index.js").AnyString;
+    radius: import("../../../types/index.js").NuanceRadius | import("../../../types/index.js").AnyString;
+    variant: import("..").InputVariant;
+}, {}, {}, {}, 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/input/ui/spin-input.vue

@@ -106,57 +106,6 @@ function handleKeyDown(event) {
 	>
 </template>
 
-<style lang="postcss" module>
-.field {
-	position: relative;
-
-	width: calc(2ch + 0.3em);
-	height: 100%;
-	padding-inline: 0.15em;
-	border: 0;
-	border-radius: 2px;
-
-	font-variant-numeric: tabular-nums;
-	line-height: 1;
-	color: var(--input-color);
-	text-align: center;
-	text-align-last: center;
-
-	appearance: none;
-	background-color: transparent;
-	caret-color: transparent;
-
-	&:where([data-am-pm]) {
-		width: auto;
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-	}
-
-	&::selection {
-		background-color: transparent;
-	}
-
-	&::placeholder {
-		color: inherit;
-
-		opacity: 1;
-	}
-
-	&:not(:read-only):focus {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-		outline: 0;
-
-		&::placeholder {
-			color: var(--color-white);
-		}
-	}
-
-	&:read-only:focus {
-		outline: 0;
-	}
-}
+<style module>
+.field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:2px;caret-color:transparent;color:var(--input-color);font-variant-numeric:tabular-nums;height:100%;line-height:1;padding-inline:.15em;position:relative;text-align:center;-moz-text-align-last:center;text-align-last:center;width:calc(2ch + .3em)}.field:where([data-am-pm]){width:auto}.field:where(:disabled){cursor:not-allowed}.field::-moz-selection{background-color:transparent}.field::selection{background-color:transparent}.field::-moz-placeholder{color:inherit;opacity:1}.field::placeholder{color:inherit;opacity:1}.field:not(:-moz-read-only):focus{background-color:var(--color-primary-filled);color:var(--color-white);outline:0}.field:not(:read-only):focus{background-color:var(--color-primary-filled);color:var(--color-white);outline:0}.field:not(:read-only):focus::-moz-placeholder{color:var(--color-white)}.field:not(:-moz-read-only):focus::placeholder{color:var(--color-white)}.field:not(:read-only):focus::placeholder{color:var(--color-white)}.field:-moz-read-only:focus{outline:0}.field:read-only:focus{outline:0}
 </style>

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

@@ -17,19 +17,20 @@ const props = defineProps({
   ariaCurrentValue: { type: String, required: false },
   viewTransition: { type: Boolean, required: false },
   replace: { type: Boolean, required: false },
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  spacing: { type: String, required: false },
-  variant: { type: String, required: false },
+  spacing: { type: [String, Number, Object], required: false },
   gradient: { type: Object, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  justify: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   loading: { type: Boolean, required: false },
-  color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  leftSectionPE: { type: null, required: false },
-  leftSectionProps: { type: Object, required: false },
   icon: { type: String, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });