@skeletonlabs/skeleton-common 1.0.0-next.11 → 1.0.0-next.13

package/README.md

@@ -0,0 +1,11 @@
+# Skeleton Common
+
+## Installation
+
+```bash
+pnpm add @skeletonlabs/skeleton-common
+```
+
+## Documentation
+
+Explore the full documentation at [skeleton.dev](https://skeleton.dev/).

package/dist/classes/accordion.js

@@ -1,10 +1,10 @@
 //#region src/classes/accordion.ts
 const classesAccordion = {
-	"root": "skb:w-full skb:grid skb:gap-2",
+	"root": "skb:flex skb:flex-col skb:gap-2 skb:w-full",
 	"content": "skb:py-2 skb:px-4",
 	"heading": "",
 	"trigger": "skb:w-full skb:grid skb:items-center skb:gap-4 skb:py-2 skb:px-4 skb:rounded-base skb:text-left skb:hover:preset-tonal-primary",
-	"item": "skb:grid skb:gap-2",
+	"item": "skb:flex skb:flex-col skb:gap-2",
 	"indicator": ""
 };
 

package/dist/classes/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/classes/accordion.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesAccordion = defineSkeletonClasses({\n\troot: 'w-full grid gap-2',\n\tcontent: 'py-2 px-4',\n\theading: '',\n\ttrigger: 'w-full grid items-center gap-4 py-2 px-4 rounded-base text-left hover:preset-tonal-primary',\n\titem: 'grid gap-2',\n\tindicator: '',\n});\n"],"mappings":";AAEA,MAAa,mBAAmB;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,aAAA;CAO9B"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../../src/classes/accordion.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesAccordion = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2 w-full',\n\tcontent: 'py-2 px-4',\n\theading: '',\n\ttrigger: 'w-full grid items-center gap-4 py-2 px-4 rounded-base text-left hover:preset-tonal-primary',\n\titem: 'flex flex-col gap-2',\n\tindicator: '',\n});\n"],"mappings":";AAEA,MAAa,mBAAmB;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,aAAA;CAO9B"}

package/dist/classes/combobox.js

@@ -1,12 +1,12 @@
 //#region src/classes/combobox.ts
 const classesCombobox = {
-	"root": "skb:w-full skb:space-y-1",
+	"root": "skb:flex skb:flex-col skb:gap-2",
 	"label": "skb:label-text",
 	"control": "skb:relative",
 	"input": "skb:input",
 	"trigger": "skb:btn-icon skb:btn-icon-sm skb:preset-tonal skb:absolute skb:right-1 skb:top-1/2 skb:-translate-y-1/2",
 	"positioner": "",
-	"content": "skb:card skb:bg-surface-50-950 skb:border skb:border-surface-200-800 skb:p-2 skb:space-y-2",
+	"content": "skb:card skb:bg-surface-50-950 skb:border skb:border-surface-200-800 skb:p-2 skb:flex skb:flex-col skb:gap-2",
 	"itemGroup": "",
 	"itemGroupLabel": "skb:text-surface-600-400 skb:text-xs skb:px-2 skb:py-1",
 	"item": "skb:flex skb:justify-between skb:items-center skb:px-2 skb:py-1 skb:rounded skb:cursor-pointer skb:data-highlighted:outline-2 skb:data-highlighted:outline-offset-1 skb:data-highlighted:outline-surface-950-50 skb:data-disabled:pointer-events-none skb:data-disabled:opacity-50",

package/dist/classes/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/classes/combobox.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesCombobox = defineSkeletonClasses({\n\troot: 'w-full space-y-1',\n\tlabel: 'label-text',\n\tcontrol: 'relative',\n\tinput: 'input',\n\ttrigger: 'btn-icon btn-icon-sm preset-tonal absolute right-1 top-1/2 -translate-y-1/2',\n\tpositioner: '',\n\tcontent: 'card bg-surface-50-950 border border-surface-200-800 p-2 space-y-2',\n\titemGroup: '',\n\titemGroupLabel: 'text-surface-600-400 text-xs px-2 py-1',\n\titem: [\n\t\t'flex justify-between items-center px-2 py-1 rounded cursor-pointer',\n\t\t'data-highlighted:outline-2 data-highlighted:outline-offset-1 data-highlighted:outline-surface-950-50',\n\t\t'data-disabled:pointer-events-none data-disabled:opacity-50',\n\t],\n\titemText: '',\n\titemIndicator: '',\n});\n"],"mappings":";AAEA,MAAa,kBAAkB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,SAAA;CAAA,WAAA;CAAA,cAAA;CAAA,WAAA;CAAA,aAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,YAAA;CAAA,iBAAA;CAiB7B"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/classes/combobox.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesCombobox = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2',\n\tlabel: 'label-text',\n\tcontrol: 'relative',\n\tinput: 'input',\n\ttrigger: 'btn-icon btn-icon-sm preset-tonal absolute right-1 top-1/2 -translate-y-1/2',\n\tpositioner: '',\n\tcontent: 'card bg-surface-50-950 border border-surface-200-800 p-2 flex flex-col gap-2',\n\titemGroup: '',\n\titemGroupLabel: 'text-surface-600-400 text-xs px-2 py-1',\n\titem: [\n\t\t'flex justify-between items-center px-2 py-1 rounded cursor-pointer',\n\t\t'data-highlighted:outline-2 data-highlighted:outline-offset-1 data-highlighted:outline-surface-950-50',\n\t\t'data-disabled:pointer-events-none data-disabled:opacity-50',\n\t],\n\titemText: '',\n\titemIndicator: '',\n});\n"],"mappings":";AAEA,MAAa,kBAAkB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,SAAA;CAAA,WAAA;CAAA,cAAA;CAAA,WAAA;CAAA,aAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,YAAA;CAAA,iBAAA;CAiB7B"}

package/dist/classes/file-upload.d.ts

@@ -1,6 +1,7 @@
 //#region src/classes/file-upload.d.ts
 declare const classesFileUpload: {
   root: string;
+  label: string;
   dropzone: string;
   hiddenInput: string;
   trigger: string;

package/dist/classes/file-upload.js

@@ -1,6 +1,7 @@
 //#region src/classes/file-upload.ts
 const classesFileUpload = {
-	"root": "skb:space-y-1 skb:data-disabled:disabled",
+	"root": "skb:flex skb:flex-col skb:gap-2 skb:w-full skb:data-disabled:disabled",
+	"label": "skb:label-text",
 	"dropzone": "skb:card skb:px-4 skb:py-10 skb:border skb:border-dashed skb:border-surface-200-800 skb:flex skb:flex-col skb:justify-center skb:items-center skb:gap-2 skb:data-dragging:preset-tonal",
 	"hiddenInput": "",
 	"trigger": "skb:btn skb:preset-filled",

package/dist/classes/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/classes/file-upload.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesFileUpload = defineSkeletonClasses({\n\troot: ['space-y-1 data-disabled:disabled'],\n\tdropzone: [\n\t\t'card px-4 py-10 border border-dashed border-surface-200-800 flex flex-col justify-center items-center gap-2 data-dragging:preset-tonal',\n\t],\n\thiddenInput: '',\n\ttrigger: 'btn preset-filled',\n\titemGroup: 'flex flex-col gap-2',\n\titem: 'grid grid-cols-[auto_1fr_auto] rtl:grid-cols-[1fr_auto_auto] gap-4 items-center preset-tonal px-4 py-2 rounded',\n\titemName: 'text-sm',\n\titemSizeText: 'text-xs opacity-60',\n\titemDeleteTrigger: 'btn-icon',\n});\n"],"mappings":";AAEA,MAAa,oBAAoB;CAAA,QAAA;CAAA,YAAA;CAAA,eAAA;CAAA,WAAA;CAAA,aAAA;CAAA,QAAA;CAAA,YAAA;CAAA,gBAAA;CAAA,qBAAA;CAY/B"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/classes/file-upload.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesFileUpload = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2 w-full data-disabled:disabled',\n\tlabel: 'label-text',\n\tdropzone: [\n\t\t'card px-4 py-10 border border-dashed border-surface-200-800 flex flex-col justify-center items-center gap-2 data-dragging:preset-tonal',\n\t],\n\thiddenInput: '',\n\ttrigger: 'btn preset-filled',\n\titemGroup: 'flex flex-col gap-2',\n\titem: 'grid grid-cols-[auto_1fr_auto] rtl:grid-cols-[1fr_auto_auto] gap-4 items-center preset-tonal px-4 py-2 rounded',\n\titemName: 'text-sm',\n\titemSizeText: 'text-xs opacity-60',\n\titemDeleteTrigger: 'btn-icon',\n});\n"],"mappings":";AAEA,MAAa,oBAAoB;CAAA,QAAA;CAAA,SAAA;CAAA,YAAA;CAAA,eAAA;CAAA,WAAA;CAAA,aAAA;CAAA,QAAA;CAAA,YAAA;CAAA,gBAAA;CAAA,qBAAA;CAa/B"}

package/dist/classes/navigation.d.ts

@@ -0,0 +1,13 @@
+//#region src/classes/navigation.d.ts
+declare const classesNavigation: {
+  root: string;
+  header: string;
+  content: string;
+  group: string;
+  label: string;
+  menu: string;
+  footer: string;
+};
+//#endregion
+export { classesNavigation };
+//# sourceMappingURL=navigation.d.ts.map

package/dist/classes/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","names":[],"sources":["../../src/classes/navigation.ts"],"sourcesContent":[],"mappings":";cAEa;EAAA,IAAA,EAAA,MAAA"}

package/dist/classes/navigation.js

@@ -0,0 +1,14 @@
+//#region src/classes/navigation.ts
+const classesNavigation = {
+	"root": "skb:bg-surface-100-900 skb:overflow-x-hidden skb:transition-[width] skb:duration-200 skb:data-[layout=bar]:w-full skb:data-[layout=bar]:p-2 skb:data-[layout=rail]:w-[100px] skb:data-[layout=rail]:h-full skb:data-[layout=rail]:overflow-y-hidden skb:data-[layout=rail]:p-2 skb:data-[layout=rail]:flex skb:data-[layout=rail]:flex-col skb:data-[layout=rail]:gap-4 skb:data-[layout=sidebar]:w-[280px] skb:data-[layout=sidebar]:h-full skb:data-[layout=sidebar]:overflow-y-auto skb:data-[layout=sidebar]:p-4",
+	"header": "",
+	"content": "skb:data-[layout=rail]:contents skb:data-[layout=sidebar]:space-y-4",
+	"group": "skb:data-[layout=rail]:contents skb:data-[layout=sidebar]:flex skb:flex-col skb:gap-2",
+	"label": "skb:text-xs skb:text-surface-700-300",
+	"menu": "skb:flex-1 skb:flex skb:gap-2 skb:data-[layout=bar]:items-stretch skb:data-[layout=rail]:flex-col skb:data-[layout=rail]:justify-center skb:data-[layout=sidebar]:flex-col skb:data-[layout=sidebar]:items-stretch",
+	"footer": ""
+};
+
+//#endregion
+export { classesNavigation };
+//# sourceMappingURL=navigation.js.map

package/dist/classes/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","names":[],"sources":["../../src/classes/navigation.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesNavigation = defineSkeletonClasses({\n\troot: [\n\t\t'bg-surface-100-900 overflow-x-hidden transition-[width] duration-200',\n\t\t// Bar\n\t\t'data-[layout=bar]:w-full data-[layout=bar]:p-2',\n\t\t// Rail\n\t\t'data-[layout=rail]:w-[100px] data-[layout=rail]:h-full data-[layout=rail]:overflow-y-hidden data-[layout=rail]:p-2 data-[layout=rail]:flex data-[layout=rail]:flex-col data-[layout=rail]:gap-4',\n\t\t// Sidebar\n\t\t'data-[layout=sidebar]:w-[280px] data-[layout=sidebar]:h-full data-[layout=sidebar]:overflow-y-auto data-[layout=sidebar]:p-4',\n\t],\n\theader: '',\n\tcontent: [\n\t\t// Rail\n\t\t'data-[layout=rail]:contents',\n\t\t// Sidebar\n\t\t'data-[layout=sidebar]:space-y-4',\n\t],\n\tgroup: [\n\t\t// Rail\n\t\t'data-[layout=rail]:contents',\n\t\t// Sidebar\n\t\t'data-[layout=sidebar]:flex flex-col gap-2',\n\t],\n\tlabel: 'text-xs text-surface-700-300',\n\tmenu: [\n\t\t'flex-1 flex gap-2',\n\t\t// Bar\n\t\t'data-[layout=bar]:items-stretch',\n\t\t// Rail\n\t\t'data-[layout=rail]:flex-col data-[layout=rail]:justify-center',\n\t\t// Sidebar\n\t\t'data-[layout=sidebar]:flex-col data-[layout=sidebar]:items-stretch',\n\t],\n\tfooter: '',\n});\n"],"mappings":";AAEA,MAAa,oBAAoB;CAAA,QAAA;CAAA,UAAA;CAAA,WAAA;CAAA,SAAA;CAAA,SAAA;CAAA,QAAA;CAAA,UAAA;CAkC/B"}

package/dist/classes/progress-linear.js

@@ -1,6 +1,6 @@
 //#region src/classes/progress-linear.ts
 const classesProgressLinear = {
-	"root": "skb:items-center skb:justify-center skb:gap-2 skb:data-[orientation=horizontal]:flex skb:data-[orientation=horizontal]:flex-row skb:data-[orientation=horizontal]:w-full skb:data-[orientation=vertical]:inline-flex skb:data-[orientation=vertical]:flex-col",
+	"root": "skb:flex skb:flex-col skb:gap-2 skb:data-[orientation=horizontal]:w-full skb:data-[orientation=vertical]:items-center",
 	"label": "skb:label-text skb:whitespace-nowrap",
 	"track": "skb:bg-surface-200-800 skb:rounded-base skb:overflow-hidden skb:data-[orientation=horizontal]:w-full skb:data-[orientation=horizontal]:h-2 skb:data-[orientation=vertical]:w-2 skb:data-[orientation=vertical]:h-[100px]",
 	"range": "skb:h-full skb:bg-surface-950-50 skb:rounded-base skb:data-[orientation=horizontal]:transition-[width] skb:data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-indeterminate-horz skb:data-[orientation=vertical]:transition-[height] skb:data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-indeterminate-vert"

package/dist/classes/progress-linear.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-linear.js","names":[],"sources":["../../src/classes/progress-linear.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesProgressLinear = defineSkeletonClasses({\n\troot: [\n\t\t// Common\n\t\t'items-center justify-center gap-2',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:inline-flex data-[orientation=vertical]:flex-col',\n\t],\n\tlabel: 'label-text whitespace-nowrap',\n\ttrack: [\n\t\t// Common\n\t\t'bg-surface-200-800 rounded-base overflow-hidden',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]',\n\t],\n\trange: [\n\t\t// Common\n\t\t'h-full bg-surface-950-50 rounded-base',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-indeterminate-horz',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-indeterminate-vert',\n\t],\n});\n"],"mappings":";AAEA,MAAa,wBAAwB;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA,SAAA;CA0BnC"}
+{"version":3,"file":"progress-linear.js","names":[],"sources":["../../src/classes/progress-linear.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesProgressLinear = defineSkeletonClasses({\n\troot: [\n\t\t// Common\n\t\t'flex flex-col gap-2',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:w-full',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:items-center',\n\t],\n\tlabel: 'label-text whitespace-nowrap',\n\ttrack: [\n\t\t// Common\n\t\t'bg-surface-200-800 rounded-base overflow-hidden',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]',\n\t],\n\trange: [\n\t\t// Common\n\t\t'h-full bg-surface-950-50 rounded-base',\n\t\t// Horizontal Orientation\n\t\t'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-indeterminate-horz',\n\t\t// Vertical Orientation\n\t\t'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-indeterminate-vert',\n\t],\n});\n"],"mappings":";AAEA,MAAa,wBAAwB;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA,SAAA;CA0BnC"}

package/dist/classes/rating-group.js

@@ -1,6 +1,6 @@
 //#region src/classes/rating-group.ts
 const classesRatingGroup = {
-	"root": "skb:flex skb:flex-col skb:gap-1",
+	"root": "skb:flex skb:flex-col skb:gap-2",
 	"label": "skb:label-text",
 	"control": "skb:flex skb:gap-2 skb:data-disabled:cursor-not-allowed skb:data-disabled:opacity-50",
 	"item": "",

package/dist/classes/rating-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-group.js","names":[],"sources":["../../src/classes/rating-group.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesRatingGroup = defineSkeletonClasses({\n\troot: 'flex flex-col gap-1',\n\tlabel: 'label-text',\n\tcontrol: 'flex gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\titem: '',\n\thiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,qBAAqB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,QAAA;CAAA,eAAA;CAMhC"}
+{"version":3,"file":"rating-group.js","names":[],"sources":["../../src/classes/rating-group.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesRatingGroup = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2',\n\tlabel: 'label-text',\n\tcontrol: 'flex gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\titem: '',\n\thiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,qBAAqB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,QAAA;CAAA,eAAA;CAMhC"}

package/dist/classes/segmented-control.d.ts

@@ -1,6 +1,8 @@
 //#region src/classes/segmented-control.d.ts
 declare const classesSegmentedControl: {
   root: string;
+  label: string;
+  control: string;
   indicator: string;
   item: string;
   itemText: string;

package/dist/classes/segmented-control.js

@@ -1,6 +1,8 @@
 //#region src/classes/segmented-control.ts
 const classesSegmentedControl = {
-	"root": "skb:inline-flex skb:preset-outlined-surface-200-800 skb:p-2 skb:gap-2 skb:rounded skb:data-[orientation=horizontal]:flex-row skb:data-[orientation=vertical]:flex-col",
+	"root": "skb:flex skb:flex-col skb:gap-2",
+	"label": "skb:label-text",
+	"control": "skb:inline-flex skb:preset-outlined-surface-200-800 skb:p-2 skb:gap-2 skb:rounded skb:data-[orientation=horizontal]:flex-row skb:data-[orientation=vertical]:flex-col",
 	"indicator": "skb:top-(--top) skb:left-(--left) skb:w-(--width) skb:h-(--height) skb:preset-filled skb:rounded skb:data-disabled:opacity-50",
 	"item": "skb:btn skb:cursor-pointer skb:z-10 skb:data-focus-visible:outline-2 skb:data-focus-visible:outline-offset-1 skb:data-focus-visible:outline-surface-950-50 skb:data-readonly:pointer-events-none skb:data-disabled:pointer-events-none skb:data-disabled:opacity-50",
 	"itemText": "skb:transition-colors skb:data-[state=checked]:text-surface-contrast-950 skb:data-[state=checked]:dark:text-surface-contrast-50",

package/dist/classes/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/classes/segmented-control.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesSegmentedControl = defineSkeletonClasses({\n\troot: [\n\t\t'inline-flex preset-outlined-surface-200-800 p-2 gap-2 rounded',\n\t\t'data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',\n\t],\n\tindicator: 'top-(--top) left-(--left) w-(--width) h-(--height) preset-filled rounded data-disabled:opacity-50',\n\titem: [\n\t\t'btn cursor-pointer z-10',\n\t\t'data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50',\n\t\t'data-readonly:pointer-events-none',\n\t\t'data-disabled:pointer-events-none data-disabled:opacity-50',\n\t],\n\titemText: ['transition-colors', 'data-[state=checked]:text-surface-contrast-950 data-[state=checked]:dark:text-surface-contrast-50 '],\n\titemHiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,0BAA0B;CAAA,QAAA;CAAA,aAAA;CAAA,QAAA;CAAA,YAAA;CAAA,mBAAA;CAcrC"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/classes/segmented-control.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesSegmentedControl = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2',\n\tlabel: 'label-text',\n\tcontrol: [\n\t\t'inline-flex preset-outlined-surface-200-800 p-2 gap-2 rounded',\n\t\t'data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',\n\t],\n\tindicator: 'top-(--top) left-(--left) w-(--width) h-(--height) preset-filled rounded data-disabled:opacity-50',\n\titem: [\n\t\t'btn cursor-pointer z-10',\n\t\t'data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50',\n\t\t'data-readonly:pointer-events-none',\n\t\t'data-disabled:pointer-events-none data-disabled:opacity-50',\n\t],\n\titemText: ['transition-colors', 'data-[state=checked]:text-surface-contrast-950 data-[state=checked]:dark:text-surface-contrast-50 '],\n\titemHiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,0BAA0B;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,aAAA;CAAA,QAAA;CAAA,YAAA;CAAA,mBAAA;CAgBrC"}

package/dist/classes/slider.js

@@ -1,6 +1,6 @@
 //#region src/classes/slider.ts
 const classesSlider = {
-	"root": "skb:space-y-3",
+	"root": "skb:flex skb:flex-col skb:gap-2",
 	"label": "skb:label-text",
 	"valueText": "",
 	"control": "skb:flex skb:items-center skb:data-disabled:opacity-50",

package/dist/classes/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/classes/slider.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesSlider = defineSkeletonClasses({\n\troot: 'space-y-3',\n\tlabel: 'label-text',\n\tvalueText: '',\n\tcontrol: ['flex items-center', 'data-disabled:opacity-50'],\n\ttrack: 'bg-surface-200-800 rounded-base h-2 overflow-hidden flex-1',\n\trange: 'bg-surface-950-50 h-full',\n\tthumb: [\n\t\t'size-5 bg-surface-50-950 ring-inset ring-2 ring-surface-950-50 rounded-full',\n\t\t'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-surface-950-50',\n\t],\n\thiddenInput: '',\n\tmarkerGroup: '',\n\tmarker: 'text-xs text-surface-600-400',\n});\n"],"mappings":";AAEA,MAAa,gBAAgB;CAAA,QAAA;CAAA,SAAA;CAAA,aAAA;CAAA,WAAA;CAAA,SAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,eAAA;CAAA,UAAA;CAc3B"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/classes/slider.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };\n\nexport const classesSlider = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2',\n\tlabel: 'label-text',\n\tvalueText: '',\n\tcontrol: ['flex items-center', 'data-disabled:opacity-50'],\n\ttrack: 'bg-surface-200-800 rounded-base h-2 overflow-hidden flex-1',\n\trange: 'bg-surface-950-50 h-full',\n\tthumb: [\n\t\t'size-5 bg-surface-50-950 ring-inset ring-2 ring-surface-950-50 rounded-full',\n\t\t'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-surface-950-50',\n\t],\n\thiddenInput: '',\n\tmarkerGroup: '',\n\tmarker: 'text-xs text-surface-600-400',\n});\n"],"mappings":";AAEA,MAAa,gBAAgB;CAAA,QAAA;CAAA,SAAA;CAAA,aAAA;CAAA,WAAA;CAAA,SAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,eAAA;CAAA,UAAA;CAc3B"}

package/dist/classes/tags-input.js

@@ -1,6 +1,6 @@
 //#region src/classes/tags-input.ts
 const classesTagsInput = {
-	"root": "skb:w-full skb:space-y-2 skb:gap-2",
+	"root": "skb:flex skb:flex-col skb:gap-2",
 	"label": "skb:label-text",
 	"control": "skb:input skb:flex skb:flex-wrap skb:gap-2 skb:p-2",
 	"item": "",

package/dist/classes/tags-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.js","names":[],"sources":["../../src/classes/tags-input.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesTagsInput = defineSkeletonClasses({\n\troot: 'w-full space-y-2 gap-2',\n\tlabel: 'label-text',\n\tcontrol: 'input flex flex-wrap gap-2 p-2',\n\titem: '',\n\titemPreview: ['chip flex gap-0 p-0 preset-filled hover:brightness-100 w-fit', 'data-highlighted:ring data-highlighted:ring-primary-500'],\n\titemText: 'leading-none px-2 py-1',\n\titemDeleteTrigger: 'hover:preset-tonal px-2 py-1',\n\titemInput: 'input text-xs',\n\tinput: 'input-ghost',\n\tclearTrigger: 'btn btn-sm preset-tonal hover:preset-filled-error-500',\n\thiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,mBAAmB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,QAAA;CAAA,eAAA;CAAA,YAAA;CAAA,qBAAA;CAAA,aAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,eAAA;CAY9B"}
+{"version":3,"file":"tags-input.js","names":[],"sources":["../../src/classes/tags-input.ts"],"sourcesContent":["import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };\n\nexport const classesTagsInput = defineSkeletonClasses({\n\troot: 'flex flex-col gap-2',\n\tlabel: 'label-text',\n\tcontrol: 'input flex flex-wrap gap-2 p-2',\n\titem: '',\n\titemPreview: ['chip flex gap-0 p-0 preset-filled hover:brightness-100 w-fit', 'data-highlighted:ring data-highlighted:ring-primary-500'],\n\titemText: 'leading-none px-2 py-1',\n\titemDeleteTrigger: 'hover:preset-tonal px-2 py-1',\n\titemInput: 'input text-xs',\n\tinput: 'input-ghost',\n\tclearTrigger: 'btn btn-sm preset-tonal hover:preset-filled-error-500',\n\thiddenInput: '',\n});\n"],"mappings":";AAEA,MAAa,mBAAmB;CAAA,QAAA;CAAA,SAAA;CAAA,WAAA;CAAA,QAAA;CAAA,eAAA;CAAA,YAAA;CAAA,qBAAA;CAAA,aAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,eAAA;CAY9B"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { classesAvatar } from "./classes/avatar.js";
 import { classesCombobox } from "./classes/combobox.js";
 import { classesDialog } from "./classes/dialog.js";
 import { classesFileUpload } from "./classes/file-upload.js";
+import { classesNavigation } from "./classes/navigation.js";
 import { classesPopover } from "./classes/popover.js";
 import { classesProgressLinear } from "./classes/progress-linear.js";
 import { classesRatingGroup } from "./classes/rating-group.js";
@@ -15,4 +16,4 @@ import { classesTagsInput } from "./classes/tags-input.js";
 import { classesToast } from "./classes/toast.js";
 import { classesTooltip } from "./classes/tooltip.js";
 import { Theme, themes } from "./themes.js";
-export { Theme, classesAccordion, classesAppBar, classesAvatar, classesCombobox, classesDialog, classesFileUpload, classesPopover, classesProgressLinear, classesRatingGroup, classesSegmentedControl, classesSlider, classesSwitch, classesTabs, classesTagsInput, classesToast, classesTooltip, themes };
+export { Theme, classesAccordion, classesAppBar, classesAvatar, classesCombobox, classesDialog, classesFileUpload, classesNavigation, classesPopover, classesProgressLinear, classesRatingGroup, classesSegmentedControl, classesSlider, classesSwitch, classesTabs, classesTagsInput, classesToast, classesTooltip, themes };

package/dist/index.js

@@ -4,6 +4,7 @@ import { classesAvatar } from "./classes/avatar.js";
 import { classesCombobox } from "./classes/combobox.js";
 import { classesDialog } from "./classes/dialog.js";
 import { classesFileUpload } from "./classes/file-upload.js";
+import { classesNavigation } from "./classes/navigation.js";
 import { classesPopover } from "./classes/popover.js";
 import { classesProgressLinear } from "./classes/progress-linear.js";
 import { classesRatingGroup } from "./classes/rating-group.js";
@@ -16,4 +17,4 @@ import { classesToast } from "./classes/toast.js";
 import { classesTooltip } from "./classes/tooltip.js";
 import { themes } from "./themes.js";
 
-export { classesAccordion, classesAppBar, classesAvatar, classesCombobox, classesDialog, classesFileUpload, classesPopover, classesProgressLinear, classesRatingGroup, classesSegmentedControl, classesSlider, classesSwitch, classesTabs, classesTagsInput, classesToast, classesTooltip, themes };
+export { classesAccordion, classesAppBar, classesAvatar, classesCombobox, classesDialog, classesFileUpload, classesNavigation, classesPopover, classesProgressLinear, classesRatingGroup, classesSegmentedControl, classesSlider, classesSwitch, classesTabs, classesTagsInput, classesToast, classesTooltip, themes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-common",
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.13",
   "description": "The common package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "repository": {
@@ -24,7 +24,7 @@
     "typescript": "5.9.2",
     "unplugin-macros": "0.18.1",
     "unplugin-raw": "0.6.1",
-    "@skeletonlabs/skeleton": "4.0.0-next.5"
+    "@skeletonlabs/skeleton": "4.0.0-next.6"
   },
   "license": "MIT",
   "type": "module",