cannonical classes

Author: Hugos68

packages/skeleton-common/src/classes/date-picker.ts

@@ -5,7 +5,7 @@ export const classesDatePicker = defineSkeletonClasses({
 	label: 'label-text',
 	control: 'relative flex flex-col gap-2',
 	input: 'input',
-	trigger: 'btn-icon btn-icon-sm preset-tonal absolute end-1.5 top-[calc(var(--spacing)*1.25)]',
+	trigger: 'btn-icon btn-icon-sm preset-tonal absolute end-1.5 top-1.25',
 	clearTrigger: '',
 	presetTrigger: '',
 	positioner: '',

packages/skeleton-common/src/classes/switch.ts

@@ -6,7 +6,7 @@ export const classesSwitch = defineSkeletonClasses({
 		'data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50',
 	],
 	control: [
-		'block preset-filled-surface-200-800 h-6 w-10 p-0.5 rounded-full flex justify-start',
+		'preset-filled-surface-200-800 h-6 w-10 p-0.5 rounded-full flex justify-start',
 		'data-[state=checked]:preset-filled-primary-500',
 	],
 	thumb: [

packages/skeleton-common/src/classes/toggle-group.ts

@@ -3,7 +3,7 @@ import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' w
 export const classesToggleGroup = defineSkeletonClasses({
 	root: [
 		'inline-flex preset-outlined-surface-200-800 divide-surface-200-800 overflow-hidden rounded-base',
-		'data-[orientation=horizontal]:divide-x-[1px] data-[orientation=vertical]:divide-y-[1px]',
+		'data-[orientation=horizontal]:divide-x data-[orientation=vertical]:divide-y',
 		'data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
 	],
 	item: [

sites/skeleton.dev/src/components/examples/tailwind-components/tables/full.astro

@@ -16,7 +16,7 @@ const tableData = [
 				<th>Position</th>
 				<th>Symbol</th>
 				<th>Name</th>
-				<th class="!text-right">Weight</th>
+				<th class="text-right!">Weight</th>
 			</tr>
 		</thead>
 		<tbody class="[&>tr]:hover:preset-tonal-primary">

sites/skeleton.dev/src/components/landing-page/component-grid.svelte

@@ -332,7 +332,7 @@
 							<th>Selected</th>
 							<th>Symbol</th>
 							<th>Name</th>
-							<th class="!text-right">Weight</th>
+							<th class="text-right!">Weight</th>
 						</tr>
 					</thead>
 					<tbody class="[&>tr]:hover:preset-tonal">

sites/skeleton.dev/src/components/ui/process-step.astro

@@ -12,7 +12,7 @@ const { step } = Astro.props;
 	<div class="text-sm preset-filled-surface-200-800 -ml-4 flex size-7 items-center justify-center rounded-full">
 		{step !== 'check' ? step : <CheckIcon class="size-4" />}
 	</div>
-	<article class="[&>.h2]:!text-lg [&>.h3]:!text-lg space-y-4 overflow-y-auto">
+	<article class="[&>.h2]:text-lg! [&>.h3]:text-lg! space-y-4 overflow-y-auto">
 		<slot />
 	</article>
 </div>

sites/skeleton.dev/src/content/docs/integrations/bits-ui.mdx

@@ -14,7 +14,7 @@ import { Image } from 'astro:assets';
 
 <Image src={banner} alt="Bits UI Banner" class="rounded-container shadow-xl" />
 
-<figure class="linker bg-noise !bg-[#cae2f7]">
+<figure class="linker bg-noise bg-[#cae2f7]!">
 	<a class="btn preset-filled" href="https://www.bits-ui.com/" target="_blank">
 		View Bits UI Docs
 	</a>

sites/skeleton.dev/src/content/docs/integrations/melt-ui.mdx

@@ -14,7 +14,7 @@ import { Image } from 'astro:assets';
 
 <Image src={banner} alt="Melt UI Banner" class="rounded-container shadow-xl" />
 
-<figure class="linker bg-noise !bg-[#d59f6a]">
+<figure class="linker bg-noise bg-[#d59f6a]!">
 	<a class="btn preset-filled" href="https://next.melt-ui.com/" target="_blank">
 		View Melt UI Docs
 	</a>