nuance-ui 0.2.10 → 0.2.11

package/dist/module.json

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

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

@@ -1,21 +1,22 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+import type { ActionIconSize, ActionIconVariant } from './action-icon.vue.js';
+export interface ActionIconSectionVars {
+    root: '--section-height' | '--section-padding-x' | '--section-fz' | '--section-radius' | '--section-bg' | '--section-color' | '--section-bd';
+}
 export interface ActionIconSectionProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | `compact-${NuanceSize}`;
-    /**
-     * Visual variant
-     * @default 'default'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    size?: ActionIconSize;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Loading state */
-    loading?: boolean;
     /** Color from theme */
     color?: NuanceColor;
     /** Border radius */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
+    /** Loading state */
+    loading?: boolean;
+    /** Visual variant */
+    variant?: ActionIconVariant;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

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

@@ -1,7 +1,6 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
-import { computed } from "vue";
 import Box from "../box.vue";
 import css from "./action-icon.module.css";
 const {
@@ -14,34 +13,32 @@ const {
   color
 } = 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 },
+  radius: { type: [String, Number, Object], required: false },
+  loading: { type: Boolean, required: false },
+  variant: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const style = computed(() => useStyleResolver((theme) => {
-  const {
-    background,
-    border,
-    text
-  } = createVariantColorResolver({ variant, color, theme, gradient });
+const style = useVarsResolver((theme) => {
+  const { background, border, text } = createVariantColorResolver({ variant, color, theme, gradient });
   return {
-    "--section-height": getSize(size, "section-height"),
-    "--section-padding-x": getSize(size, "section-padding-x"),
-    "--section-fz": getFontSize(size),
-    "--section-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--section-bg": color || variant ? background : void 0,
-    "--section-color": text,
-    "--section-bd": color || variant ? border : void 0
+    root: {
+      "--section-height": getSize(size, "section-height"),
+      "--section-padding-x": getSize(size, "section-padding-x"),
+      "--section-fz": getFontSize(size),
+      "--section-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--section-bg": color || variant ? background : void 0,
+      "--section-color": text,
+      "--section-bd": color || variant ? border : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<Box :is :mod='[mod, { variant }]' :style :class='css.section'>
+	<Box :is :mod='[mod, { variant }]' :style='style.root' :class='css.section'>
 		<slot />
 	</Box>
 </template>

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

@@ -1,21 +1,22 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+import type { ActionIconSize, ActionIconVariant } from './action-icon.vue.js';
+export interface ActionIconSectionVars {
+    root: '--section-height' | '--section-padding-x' | '--section-fz' | '--section-radius' | '--section-bg' | '--section-color' | '--section-bd';
+}
 export interface ActionIconSectionProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | `compact-${NuanceSize}`;
-    /**
-     * Visual variant
-     * @default 'default'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    size?: ActionIconSize;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Loading state */
-    loading?: boolean;
     /** Color from theme */
     color?: NuanceColor;
     /** Border radius */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
+    /** Loading state */
+    loading?: boolean;
+    /** Visual variant */
+    variant?: ActionIconVariant;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

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

@@ -1,29 +1,32 @@
-import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+export type ActionIconClasses = 'root' | 'icon';
+export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+export type ActionIconSize = NuanceSize | `input-${NuanceSize}` | AnyString;
+export interface ActionIconVars {
+    root: '--ai-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
+}
 export interface ActionIconProps {
     /** Component size */
-    size?: NuanceSize | `input-${NuanceSize}` | string;
-    /**
-     * Visual variant
-     * @default 'default'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    size?: ActionIconSize;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Loading state */
-    loading?: boolean;
     /** Color from theme */
     color?: NuanceColor;
     /** Border radius */
-    radius?: NuanceRadius;
-    /** Styles API */
-    classes?: Classes<'root' | 'icon'>;
-    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
-    mod?: BoxProps['mod'];
+    radius?: NuanceRadius | AnyString;
+    /** Loading state */
+    loading?: boolean;
     /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;
     /** Disables the component */
     disabled?: boolean;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
+    mod?: BoxProps['mod'];
+    /** Visual variant */
+    variant?: ActionIconVariant;
+    /** Styles API */
+    classes?: Classes<ActionIconClasses>;
 }
 declare var __VLS_19: {};
 type __VLS_Slots = {} & {

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

@@ -1,7 +1,6 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
-import { computed } from "vue";
 import Box from "../box.vue";
 import Loader from "../loader/loader.vue";
 import css from "./action-icon.module.css";
@@ -18,17 +17,17 @@ const {
   disabled
 } = 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 }
 });
-const style = computed(() => useStyleResolver((theme) => {
+const style = useVarsResolver((theme) => {
   const {
     background,
     border,
@@ -36,14 +35,16 @@ const style = computed(() => useStyleResolver((theme) => {
     text
   } = createVariantColorResolver({ variant, color, theme, gradient });
   return {
-    "--ai-size": getSize(size, "ai-size"),
-    "--ai-radius": getRadius(radius),
-    "--ai-bg": background,
-    "--ai-hover": hover,
-    "--ai-color": text,
-    "--ai-bd": border
+    root: {
+      "--ai-size": getSize(size, "ai-size"),
+      "--ai-radius": getRadius(radius),
+      "--ai-bg": background,
+      "--ai-hover": hover,
+      "--ai-color": text,
+      "--ai-bd": border
+    }
   };
-}));
+});
 </script>
 
 <template>
@@ -51,7 +52,7 @@ const style = computed(() => useStyleResolver((theme) => {
 		is='button'
 		type='button'
 		:mod='[{ loading }, mod]'
-		:style
+		:style='style.root'
 		:class='[css.root, classes?.root]'
 		:disabled='(!disabled ? loading : disabled) || void 0'
 	>

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

@@ -1,29 +1,32 @@
-import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
+export type ActionIconClasses = 'root' | 'icon';
+export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+export type ActionIconSize = NuanceSize | `input-${NuanceSize}` | AnyString;
+export interface ActionIconVars {
+    root: '--ai-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
+}
 export interface ActionIconProps {
     /** Component size */
-    size?: NuanceSize | `input-${NuanceSize}` | string;
-    /**
-     * Visual variant
-     * @default 'default'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    size?: ActionIconSize;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Loading state */
-    loading?: boolean;
     /** Color from theme */
     color?: NuanceColor;
     /** Border radius */
-    radius?: NuanceRadius;
-    /** Styles API */
-    classes?: Classes<'root' | 'icon'>;
-    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
-    mod?: BoxProps['mod'];
+    radius?: NuanceRadius | AnyString;
+    /** Loading state */
+    loading?: boolean;
     /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;
     /** Disables the component */
     disabled?: boolean;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
+    mod?: BoxProps['mod'];
+    /** Visual variant */
+    variant?: ActionIconVariant;
+    /** Styles API */
+    classes?: Classes<ActionIconClasses>;
 }
 declare var __VLS_19: {};
 type __VLS_Slots = {} & {

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

@@ -1,11 +1,11 @@
 import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
+export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export interface AlertVars {
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+}
 export interface AlertProps extends BoxProps {
-    /**
-     * Visual variant
-     * @default 'light'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'default';
     /** Border radius */
     radius?: NuanceRadius;
     /** Color from theme */
@@ -20,8 +20,10 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Visual variant */
+    variant?: AlertVariant;
     /** Styles API */
-    classes?: Classes<'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton'>;
+    classes?: Classes<AlertClasses>;
 }
 declare var __VLS_19: {}, __VLS_27: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/alert.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius } from "@nui/utils";
-import { computed, useId } from "vue";
+import { useId } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Box from "./box.vue";
 const {
@@ -14,7 +14,6 @@ const {
   withCloseButton,
   classes
 } = defineProps({
-  variant: { type: String, required: false },
   radius: { type: [String, Number], required: false },
   color: { type: null, required: false },
   title: { type: String, required: false },
@@ -22,31 +21,30 @@ const {
   withCloseButton: { type: Boolean, required: false },
   onClose: { type: Function, required: false },
   closeButtonLabel: { type: String, required: false },
+  variant: { type: String, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 defineEmits(["close"]);
 const id = useId();
-const style = computed(() => useStyleResolver((theme) => {
-  const { background, border, text } = createVariantColorResolver({
-    variant,
-    color,
-    theme
-  });
+const style = useVarsResolver((theme) => {
+  const { background, border, text } = createVariantColorResolver({ variant, color, theme });
   return {
-    "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--alert-bg": color || variant ? background : void 0,
-    "--alert-color": text,
-    "--alert-bd": color || variant ? border : void 0
+    root: {
+      "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--alert-bg": color || variant ? background : void 0,
+      "--alert-color": text,
+      "--alert-bd": color || variant ? border : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
 	<Box
 		role='alert'
-		:style
+		:style='style.root'
 		:class='[$style.root, classes?.root]'
 		:mod='[{ variant }, mod]'
 		:aria-describedby='$slots.default ? `${id}-body` : void 0'
@@ -89,90 +87,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	--alert-radius: var(--radius-default);
-	--alert-bg: var(--color-primary-light);
-	--alert-bd: 1px solid transparent;
-	--alert-color: var(--color-primary-light-color);
-
-	position: relative;
-
-	overflow: hidden;
-	display: flex;
-	gap: var(--spacing-md);
-
-	padding: var(--spacing-md) var(--spacing-md);
-	border: var(--alert-bd);
-	border-radius: var(--alert-radius);
-
-	color: var(--alert-color);
-
-	background-color: var(--alert-bg);
-}
-
-.body {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: var(--spacing-xs);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	font-size: var(--font-size-sm);
-	font-weight: 700;
-}
-
-.label {
-	overflow: hidden;
-	display: block;
-
-	text-overflow: ellipsis;
-}
-
-.icon {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-
-	width: 1.25rem;
-	height: 1.25rem;
-	margin-top: 1px;
-
-	line-height: 1;
-}
-
-.message {
-	overflow: hidden;
-
-	font-size: var(--font-size-sm);
-	text-overflow: ellipsis;
-
-	:where([data-mantine-color-scheme='light']) & {
-		color: var(--color-black);
-	}
-
-	:where([data-mantine-color-scheme='dark']) & {
-		color: var(--color-white);
-	}
-
-	&:where([data-variant='filled']) {
-		color: var(--alert-color);
-	}
-
-	&:where([data-variant='white']) {
-		color: var(--color-black);
-	}
-}
-
-.closeButton {
-	width: 20px;
-	height: 20px;
-
-	color: var(--alert-color);
-}
+<style module>
+.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-md);overflow:hidden;padding:var(--spacing-md) var(--spacing-md);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column;gap:var(--spacing-xs)}.title{align-items:center;display:flex;font-size:var(--font-size-sm);font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;height:1.25rem;justify-content:flex-start;line-height:1;margin-top:1px;width:1.25rem}.message{font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
 </style>

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

@@ -1,11 +1,11 @@
 import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
+export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export interface AlertVars {
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+}
 export interface AlertProps extends BoxProps {
-    /**
-     * Visual variant
-     * @default 'light'
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'default';
     /** Border radius */
     radius?: NuanceRadius;
     /** Color from theme */
@@ -20,8 +20,10 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Visual variant */
+    variant?: AlertVariant;
     /** Styles API */
-    classes?: Classes<'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton'>;
+    classes?: Classes<AlertClasses>;
 }
 declare var __VLS_19: {}, __VLS_27: {};
 type __VLS_Slots = {} & {

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

@@ -12,32 +12,6 @@ const { mod } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	position: fixed;
-	z-index: 1;
-	top: var(--app-shell-header-offset, 0);
-
-	inset-inline-end: 0;
-	transform: var(--app-shell-aside-transform);
-
-	display: flex;
-	flex-direction: column;
-
-	width: var(--app-shell-aside-width);
-
-	height: calc(100dvh - var(--app-shell-header-offset, 0rem));
-
-	padding-block: var(--app-shell-element-padding);
-
-	background-color: var(--color-aside);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, top, height;
-
-	:where([data-with-border]) > & {
-		border-inline-start: 1px solid var(--app-shell-border-color);
-	}
-}
+<style module>
+.root{background-color:var(--color-aside);display:flex;flex-direction:column;height:calc(100dvh - var(--app-shell-header-offset, 0rem));inset-inline-end:0;padding-block:var(--app-shell-element-padding);position:fixed;top:var(--app-shell-header-offset,0);transform:var(--app-shell-aside-transform);transition-duration:var(--app-shell-transition-duration);transition-property:transform,top,height;transition-timing-function:var(--app-shell-transition-timing-function);width:var(--app-shell-aside-width);z-index:1}:where([data-with-border])>.root{border-inline-start:1px solid var(--app-shell-border-color)}
 </style>

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

@@ -12,31 +12,6 @@ const { mod } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	position: fixed;
-	z-index: 1;
-
-	bottom: 0;
-	inset-inline: 0;
-	transform: var(--app-shell-footer-transform);
-
-	height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
-	padding-bottom: env(safe-area-inset-bottom);
-
-	background-color: var(--color-body);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, left, right;
-
-	:where([data-layout='alt']) > & {
-		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-		inset-inline-end: var(--app-shell-aside-offset, 0rem);
-	}
-
-	:where([data-with-border]) > & {
-		border-top: 1px solid var(--app-shell-border-color);
-	}
-}
+<style module>
+.root{background-color:var(--color-body);bottom:0;height:calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));inset-inline:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;transform:var(--app-shell-footer-transform);transition-duration:var(--app-shell-transition-duration);transition-property:transform,left,right;transition-timing-function:var(--app-shell-transition-timing-function);z-index:1}:where([data-layout=alt])>.root{inset-inline-end:var(--app-shell-aside-offset,0);inset-inline-start:var(--app-shell-navbar-offset,0)}:where([data-with-border])>.root{border-top:1px solid var(--app-shell-border-color)}
 </style>

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

@@ -12,32 +12,6 @@ const { mod } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	inset-inline: 0;
-	transform: var(--app-shell-header-transform);
-
-	display: flex;
-
-	height: var(--app-shell-header-height);
-	padding-block: var(--app-shell-element-padding);
-	padding-inline: 1rem;
-
-	background-color: var(--color-header);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, left, right;
-
-	:where([data-with-border]) > & {
-		border-bottom: 1px solid var(--app-shell-border-color);
-	}
-
-	:where([data-layout='alt']) > & {
-		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-	}
-}
+<style module>
+.root{background-color:var(--color-header);display:flex;height:var(--app-shell-header-height);position:fixed;top:0;inset-inline:0;padding-block:var(--app-shell-element-padding);padding-inline:1rem;transform:var(--app-shell-header-transform);transition-duration:var(--app-shell-transition-duration);transition-property:transform,left,right;transition-timing-function:var(--app-shell-transition-timing-function);z-index:2}:where([data-with-border])>.root{border-bottom:1px solid var(--app-shell-border-color)}:where([data-layout=alt])>.root{inset-inline-start:var(--app-shell-navbar-offset,0)}
 </style>

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

@@ -12,20 +12,6 @@ const { mod } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	display: flex;
-	flex-direction: column;
-
-	min-height: 100dvh;
-	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
-	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-
-	transition-property: padding;
-}
+<style module>
+.root{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));padding-inline-end:calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));padding-top:calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));padding-inline-start:calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));transition-duration:var(--app-shell-transition-duration);transition-property:padding;transition-timing-function:var(--app-shell-transition-timing-function)}
 </style>