@soybeanjs/ui 0.15.5 → 0.16.0

package/dist/styles.css

@@ -100,6 +100,7 @@
 .group[data-fixed-top=true] .group-data-\[fixed-top\=true\]\:absolute{position:absolute;}
 .fixed{position:fixed;}
 .sticky{position:sticky;}
+.focus-within\:relative:focus-within{position:relative;}
 .data-\[fixed-first-end\]\:before\:absolute[data-fixed-first-end]::before{position:absolute;}
 .after\:absolute::after{position:absolute;}
 .data-\[fixed-last-start\]\:after\:absolute[data-fixed-last-start]::after{position:absolute;}
@@ -246,6 +247,7 @@
 .z-3{z-index:3;}
 .z-49{z-index:49;}
 .z-99999{z-index:99999;}
+.focus-within\:z-20:focus-within{z-index:20;}
 .focus-visible\:\[\&\>\*\]\:z-2>*:focus-visible{z-index:2;}
 .-order-1{order:-1;}
 .order-1{order:1;}
@@ -253,6 +255,7 @@
 .col-start-1{grid-column-start:1;}
 .col-start-2{grid-column-start:2;}
 .row-start-1{grid-row-start:1;}
+.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}
 .grid-cols-\[auto_auto\]{grid-template-columns:auto auto;}
 .grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto;}
 .grid-cols-\[repeat\(auto-fill\,minmax\(1\.25rem\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(1.25rem,1fr));}
@@ -262,6 +265,8 @@
 .grid-cols-\[repeat\(auto-fill\,minmax\(1\.75rem\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(1.75rem,1fr));}
 .grid-cols-\[repeat\(auto-fill\,minmax\(2rem\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(2rem,1fr));}
 .grid-cols-\[repeat\(var\(--columns\)\,minmax\(0\,1fr\)\)\]{grid-template-columns:repeat(var(--columns),minmax(0,1fr));}
+.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
+.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
 .m-0{margin:0;}
 .-mx-0\.75{margin-left:-0.1875rem;margin-right:-0.1875rem;}
 .-mx-0\.875{margin-left:-0.21875rem;margin-right:-0.21875rem;}
@@ -316,9 +321,11 @@
 .mb-1\.5{margin-bottom:0.375rem;}
 .mb-2{margin-bottom:0.5rem;}
 .mb-2\.5{margin-bottom:0.625rem;}
+.mb-3{margin-bottom:0.75rem;}
 .me-0\.5{margin-inline-end:0.125rem;}
 .me-1{margin-inline-end:0.25rem;}
 .me-1\.5{margin-inline-end:0.375rem;}
+.me-4{margin-inline-end:1rem;}
 .ml-\[--soybean-tree-menu-indent\]{margin-left:var(--soybean-tree-menu-indent);}
 .ml-0,
 [dir="rtl"] .rtl\:ml-0{margin-left:0;}
@@ -341,12 +348,14 @@
 .mt-1\.5{margin-top:0.375rem;}
 .mt-1\.75{margin-top:0.4375rem;}
 .mt-2{margin-top:0.5rem;}
+.mt-2\.25{margin-top:0.5625rem;}
 .mt-2\.5{margin-top:0.625rem;}
 .mt-3{margin-top:0.75rem;}
 .mt-3\.5{margin-top:0.875rem;}
 .mt-4{margin-top:1rem;}
 [dir="rtl"] .rtl\:-mr-4{margin-right:-1rem;}
 [dir="rtl"] .rtl\:mr-0{margin-right:0;}
+.last\:me-0:last-child{margin-inline-end:0;}
 .box-border{box-sizing:border-box;}
 .inline{display:inline;}
 .block,
@@ -437,6 +446,9 @@
 .w-1px,
 .w-px{width:1px;}
 .data-\[password-manager-badge\]\:w-\[calc\(100\%\+40px\)\][data-password-manager-badge]{width:calc(100% + 40px);}
+.data-\[segment\=literal\]\:min-w-0[data-segment=literal],
+.min-w-0{min-width:0;}
+.data-\[segment\=timeZoneName\]\:min-w-fit[data-segment=timeZoneName]{min-width:fit-content;}
 .data-\[state\=collapsed\]\:w-\[--soybean-tree-menu-collapsed-width\][data-state=collapsed]{width:var(--soybean-tree-menu-collapsed-width);}
 .data-\[state\=indeterminate\]\:w-2\/5[data-state=indeterminate]{width:40%;}
 .group[data-collapsible=icon] .group-data-\[collapsible\=icon\]\:w-\[--soybean-collapsed-sidebar-width\],
@@ -495,6 +507,7 @@
 .max-h-60{max-height:15rem;}
 .max-h-65{max-height:16.25rem;}
 .max-h-70{max-height:17.5rem;}
+.max-h-72{max-height:18rem;}
 .max-h-75{max-height:18.75rem;}
 .max-h-80{max-height:20rem;}
 .max-h-90{max-height:22.5rem;}
@@ -512,6 +525,7 @@
 .max-w-sm{max-width:24rem;}
 .min-h-0{min-height:0;}
 .min-h-10{min-height:2.5rem;}
+.min-h-11{min-height:2.75rem;}
 .min-h-12{min-height:3rem;}
 .min-h-2{min-height:0.5rem;}
 .min-h-2\.5{min-height:0.625rem;}
@@ -519,14 +533,16 @@
 .min-h-3{min-height:0.75rem;}
 .min-h-3\.5{min-height:0.875rem;}
 .min-h-4{min-height:1rem;}
+.min-h-4\.5{min-height:1.125rem;}
 .min-h-5{min-height:1.25rem;}
+.min-h-5\.5{min-height:1.375rem;}
 .min-h-6{min-height:1.5rem;}
+.min-h-6\.5{min-height:1.625rem;}
 .min-h-7{min-height:1.75rem;}
 .min-h-8{min-height:2rem;}
 .min-h-9{min-height:2.25rem;}
 .min-w-\[--soybean-popper-anchor-width\]{min-width:var(--soybean-popper-anchor-width);}
 .min-w-\[--soybean-select-trigger-width\]{min-width:var(--soybean-select-trigger-width);}
-.min-w-0{min-width:0;}
 .min-w-24{min-width:6rem;}
 .min-w-25{min-width:6.25rem;}
 .min-w-2xl{min-width:42rem;}
@@ -535,7 +551,9 @@
 .min-w-4{min-width:1rem;}
 .min-w-4\.5{min-width:1.125rem;}
 .min-w-5{min-width:1.25rem;}
+.min-w-5\.5{min-width:1.375rem;}
 .min-w-6{min-width:1.5rem;}
+.min-w-6\.5{min-width:1.625rem;}
 .min-w-7{min-width:1.75rem;}
 .min-w-8{min-width:2rem;}
 .min-w-full{min-width:100%;}
@@ -617,6 +635,8 @@
 .group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:flex-col{flex-direction:column;}
 .flex-col-reverse{flex-direction:column-reverse;}
 .flex-wrap{flex-wrap:wrap;}
+.inline-table{display:inline-table;}
+.border-collapse{border-collapse:collapse;}
 .border-spacing-0{--un-border-spacing-x:0;--un-border-spacing-y:0;border-spacing:var(--un-border-spacing-x) var(--un-border-spacing-y);}
 .origin-top-center{transform-origin:top center;}
 .perspective-2000px{-webkit-perspective:2000px;perspective:2000px;}
@@ -655,7 +675,8 @@
 .data-\[orientation\=vertical\]\:after\:translate-x-0[data-orientation=vertical]::after{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .\[\&\[data-state\=open\]\>\.trigger-icon\]\:rotate-180[data-state=open]>.trigger-icon,
 .group[data-side=right] .group-data-\[side\=right\]\:rotate-180,
-.group[data-state=open] .group-data-\[state\=open\]\:rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.group[data-state=open] .group-data-\[state\=open\]\:rotate-180,
+[dir="rtl"] .rtl\:rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:-rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:-90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .group\/button[data-state=open] .group-data-\[state\=open\]\/button\:rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 .rotate-45{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:45deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
@@ -670,7 +691,8 @@
 @keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}
 .animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}
 .cursor-default,
-.data-\[disabled\]\:cursor-default[data-disabled]{cursor:default;}
+.data-\[disabled\]\:cursor-default[data-disabled],
+.data-\[readonly\]\:cursor-default[data-readonly]{cursor:default;}
 .cursor-pointer{cursor:pointer;}
 .cursor-text{cursor:text;}
 .data-\[disabled\]\:cursor-not-allowed[data-disabled],
@@ -847,6 +869,8 @@
 .hover\:border-warning:hover{--un-border-opacity:1;border-color:hsl(var(--warning) / var(--un-border-opacity));}
 .data-\[orientation\=horizontal\]\:border-t-transparent[data-orientation=horizontal]{border-top-color:transparent;}
 .data-\[orientation\=vertical\]\:border-l-transparent[data-orientation=vertical]{border-left-color:transparent;}
+.\[\&\:has\(\[data-selected\]\)\]\:rounded-md:has([data-selected]),
+.rounded-md{border-radius:calc(var(--radius) - 2px);}
 .\[\&\>\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:\!rounded-none>*:not(:first-child):not(:last-child),
 .\[\&\>\*\:not\(\:first-child\)\:not\(\:last-child\)\>\*\]\:\!rounded-none>*:not(:first-child):not(:last-child)>*{border-radius:0 !important;}
 .group[data-variant=floating] .group-data-\[variant\=floating\]\:rounded-lg,
@@ -857,11 +881,12 @@
 .rounded-\[inherit\]{border-radius:inherit;}
 .rounded-0\.5{border-radius:0.125rem;}
 .rounded-full{border-radius:9999px;}
-.rounded-md{border-radius:calc(var(--radius) - 2px);}
 .rounded-sm{border-radius:calc(var(--radius) - 4px);}
 .rounded-xl{border-radius:calc(var(--radius) + 4px);}
 .group[data-state=collapsed] .group-data-\[state\=collapsed\]\:hover\:rounded-sm:hover{border-radius:calc(var(--radius) - 4px);}
 .after\:rounded-full::after{border-radius:9999px;}
+.\[\&\:has\(\[data-selection-end\]\)\]\:rounded-e-md:has([data-selection-end]){border-start-end-radius:calc(var(--radius) - 2px);border-end-end-radius:calc(var(--radius) - 2px);}
+.\[\&\:has\(\[data-selection-start\]\)\]\:rounded-s-md:has([data-selection-start]){border-end-start-radius:calc(var(--radius) - 2px);border-start-start-radius:calc(var(--radius) - 2px);}
 .\[\&\>\*\:first-child\]\:\!rounded-b-none>*:first-child,
 .\[\&\>\*\:first-child\>\*\]\:\!rounded-b-none>*:first-child>*{border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}
 .\[\&\>\*\:first-child\]\:\!rounded-r-none>*:first-child,
@@ -875,8 +900,10 @@
 .rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0;}
 .rounded-t-0{border-top-left-radius:0;border-top-right-radius:0;}
 .rounded-t-md{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px);}
+.first\:\[\&\:has\(\[data-selected\]\)\]\:rounded-s-md:has([data-selected]):first-child{border-end-start-radius:calc(var(--radius) - 2px);border-start-start-radius:calc(var(--radius) - 2px);}
 .first\:\[\&\>\*\]\:rd-b-0>*:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}
 .first\:\[\&\>\*\]\:rd-r-0>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;}
+.last\:\[\&\:has\(\[data-selected\]\)\]\:rounded-e-md:has([data-selected]):last-child{border-start-end-radius:calc(var(--radius) - 2px);border-end-end-radius:calc(var(--radius) - 2px);}
 .last\:\[\&\>\*\]\:rd-l-0>*:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}
 .last\:\[\&\>\*\]\:rd-t-0>*:last-child{border-top-left-radius:0;border-top-right-radius:0;}
 .\[\&\>tr\:first-child\>td\:first-child\]\:rounded-tl-\[--rounded\]>tr:first-child>td:first-child,
@@ -897,13 +924,13 @@
 .bg-transparent,
 .selection\:bg-transparent *::selection,
 .selection\:bg-transparent::selection{background-color:transparent /* transparent */;}
-.bg-\[length\:8px_8px\]{background-size:8px 8px;}
-.bg-\[linear-gradient\(45deg\,rgba\(0\,0\,0\,0\.08\)_25\%\,transparent_25\%\,transparent_75\%\,rgba\(0\,0\,0\,0\.08\)_75\%\)\,linear-gradient\(45deg\,rgba\(0\,0\,0\,0\.08\)_25\%\,transparent_25\%\,transparent_75\%\,rgba\(0\,0\,0\,0\.08\)_75\%\)\]{background-image:linear-gradient(45deg,rgba(0,0,0,0.08) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.08) 75%),linear-gradient(45deg,rgba(0,0,0,0.08) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.08) 75%);}
-.bg-\[position\:0_0\,4px_4px\]{background-position:0px 0,4px 4px;}
-.bg-\[var\(--soybean-color-swatch-color\)\]{background-color:var(--soybean-color-swatch-color) /* var(--soybean-color-swatch-color) */;}
+.\[\&\:has\(\[data-selected\]\)\]\:bg-accent:has([data-selected]),
+.\[\&\:not\(\[data-selected\]\)\:hover\]\:bg-accent:not([data-selected]):hover,
+.\[\&\[data-today\]\:not\(\[data-selected\]\)\]\:bg-accent[data-today]:not([data-selected]),
 .bg-accent,
 .dark .dark\:data-\[active\=true\]\:bg-accent[data-active=true],
 .data-\[highlighted\]\:bg-accent[data-highlighted],
+.data-\[selected\]\:bg-accent[data-selected],
 .data-\[state\=active\]\:bg-accent[data-state=active],
 .data-\[state\=drag\]\:bg-accent[data-state=drag],
 .data-\[state\=hover\]\:bg-accent[data-state=hover],
@@ -911,6 +938,23 @@
 .data-\[state\=open\]\:bg-accent[data-state=open],
 .group[data-state=active] .group-data-\[state\=active\]\:bg-accent,
 .group[data-state=completed] .group-data-\[state\=completed\]\:bg-accent{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
+.\[\&\[data-selection-end\]\:hover\]\:bg-primary[data-selection-end]:hover,
+.\[\&\[data-selection-start\]\:hover\]\:bg-primary[data-selection-start]:hover,
+.bg-primary,
+.data-\[range-end\]\:bg-primary[data-range-end],
+.data-\[range-start\]\:bg-primary[data-range-start],
+.data-\[selected\]\:bg-primary[data-selected],
+.data-\[selection-end\]\:bg-primary[data-selection-end],
+.data-\[selection-start\]\:bg-primary[data-selection-start],
+.data-\[state\=checked\]\:bg-primary[data-state=checked],
+.data-\[state\=indeterminate\]\:bg-primary[data-state=indeterminate],
+.group[data-state=active] .group-data-\[state\=active\]\:bg-primary,
+.group[data-state=completed] .group-data-\[state\=completed\]\:bg-primary,
+.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:bg-primary{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
+.bg-\[length\:8px_8px\]{background-size:8px 8px;}
+.bg-\[linear-gradient\(45deg\,rgba\(0\,0\,0\,0\.08\)_25\%\,transparent_25\%\,transparent_75\%\,rgba\(0\,0\,0\,0\.08\)_75\%\)\,linear-gradient\(45deg\,rgba\(0\,0\,0\,0\.08\)_25\%\,transparent_25\%\,transparent_75\%\,rgba\(0\,0\,0\,0\.08\)_75\%\)\]{background-image:linear-gradient(45deg,rgba(0,0,0,0.08) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.08) 75%),linear-gradient(45deg,rgba(0,0,0,0.08) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.08) 75%);}
+.bg-\[position\:0_0\,4px_4px\]{background-position:0px 0,4px 4px;}
+.bg-\[var\(--soybean-color-swatch-color\)\]{background-color:var(--soybean-color-swatch-color) /* var(--soybean-color-swatch-color) */;}
 .bg-accent-foreground\/10,
 .data-\[state\=active\]\:bg-accent-foreground\/10[data-state=active],
 .data-\[state\=on\]\:bg-accent-foreground\/10[data-state=on]{background-color:hsl(var(--accent-foreground) / 0.1) /* hsl(var(--accent-foreground)) */;}
@@ -956,13 +1000,6 @@
 .bg-muted-foreground{--un-bg-opacity:1;background-color:hsl(var(--muted-foreground) / var(--un-bg-opacity)) /* hsl(var(--muted-foreground)) */;}
 .bg-muted-foreground\/70{background-color:hsl(var(--muted-foreground) / 0.7) /* hsl(var(--muted-foreground)) */;}
 .bg-popover{--un-bg-opacity:1;background-color:hsl(var(--popover) / var(--un-bg-opacity)) /* hsl(var(--popover)) */;}
-.bg-primary,
-.data-\[selected\]\:bg-primary[data-selected],
-.data-\[state\=checked\]\:bg-primary[data-state=checked],
-.data-\[state\=indeterminate\]\:bg-primary[data-state=indeterminate],
-.group[data-state=active] .group-data-\[state\=active\]\:bg-primary,
-.group[data-state=completed] .group-data-\[state\=completed\]\:bg-primary,
-.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:bg-primary{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
 .bg-primary\/10,
 .data-\[active\=true\]\:bg-primary\/10[data-active=true],
 .data-\[selected\]\:bg-primary\/10[data-selected],
@@ -999,6 +1036,7 @@
 .data-\[active\]\:bg-accent\/50[data-active],
 .data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:hsl(var(--accent) / 0.5) /* hsl(var(--accent)) */;}
 .data-\[active\=true\]\:bg-primary-50[data-active=true]{--un-bg-opacity:1;background-color:hsl(var(--primary-50) / var(--un-bg-opacity)) /* hsl(var(--primary-50)) */;}
+.data-\[highlighted\]\:bg-accent\/80[data-highlighted]{background-color:hsl(var(--accent) / 0.8) /* hsl(var(--accent)) */;}
 .data-\[no-color\]\:bg-muted\/40[data-no-color],
 .data-\[readonly\]\:bg-muted\/40[data-readonly]{background-color:hsl(var(--muted) / 0.4) /* hsl(var(--muted)) */;}
 .data-\[state\=checked\]\:bg-accent-foreground[data-state=checked]{--un-bg-opacity:1;background-color:hsl(var(--accent-foreground) / var(--un-bg-opacity)) /* hsl(var(--accent-foreground)) */;}
@@ -1035,6 +1073,7 @@
 .hover\:after\:bg-sidebar-border:hover::after{--un-bg-opacity:var(--sidebar-border-alpha, 1);background-color:hsl(var(--sidebar-border) / var(--un-bg-opacity)) /* hsl(var(--sidebar-border) / var(--sidebar-border-alpha, 1)) */;}
 .hover\:bg-accent-foreground\/10:hover{background-color:hsl(var(--accent-foreground) / 0.1) /* hsl(var(--accent-foreground)) */;}
 .hover\:bg-accent:hover{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
+.hover\:bg-accent\/50:hover{background-color:hsl(var(--accent) / 0.5) /* hsl(var(--accent)) */;}
 .hover\:bg-accent\/60:hover{background-color:hsl(var(--accent) / 0.6) /* hsl(var(--accent)) */;}
 .hover\:bg-accent\/80:hover{background-color:hsl(var(--accent) / 0.8) /* hsl(var(--accent)) */;}
 .hover\:bg-carbon\/10:hover{background-color:hsl(var(--carbon) / 0.1) /* hsl(var(--carbon)) */;}
@@ -1056,7 +1095,11 @@
 .data-\[active\=false\]\:focus\:bg-accent:focus[data-active=false]{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
 .data-\[active\=false\]\:focus\:bg-sidebar-accent:focus[data-active=false]{--un-bg-opacity:1;background-color:hsl(var(--sidebar-accent) / var(--un-bg-opacity)) /* hsl(var(--sidebar-accent)) */;}
 .focus\:bg-accent:focus{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
+.data-\[selection-end\]\:focus-visible\:bg-primary:focus-visible[data-selection-end]{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
+.data-\[selection-start\]\:focus-visible\:bg-primary:focus-visible[data-selection-start]{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
 .focus-visible\:after\:bg-primary:focus-visible::after{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
+.focus-visible\:bg-accent:focus-visible{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
+.focus-visible\:bg-accent\/60:focus-visible{background-color:hsl(var(--accent) / 0.6) /* hsl(var(--accent)) */;}
 .active\:bg-accent-foreground\/20:active{background-color:hsl(var(--accent-foreground) / 0.2) /* hsl(var(--accent-foreground)) */;}
 .active\:bg-accent:active{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
 .active\:bg-carbon-600:active{--un-bg-opacity:1;background-color:hsl(var(--carbon-600) / var(--un-bg-opacity)) /* hsl(var(--carbon-600)) */;}
@@ -1119,14 +1162,16 @@
 .p-5\.5{padding:1.375rem;}
 .p-6{padding:1.5rem;}
 .p-px{padding:1px;}
+.data-\[segment\=literal\]\:px-0[data-segment=literal],
+.px-0{padding-left:0;padding-right:0;}
+.data-\[segment\=timeZoneName\]\:px-1[data-segment=timeZoneName],
+.px-1{padding-left:0.25rem;padding-right:0.25rem;}
 .px,
 .px-4{padding-left:1rem;padding-right:1rem;}
-.px-0{padding-left:0;padding-right:0;}
 .px-0\.5{padding-left:0.125rem;padding-right:0.125rem;}
 .px-0\.625{padding-left:0.15625rem;padding-right:0.15625rem;}
 .px-0\.75{padding-left:0.1875rem;padding-right:0.1875rem;}
 .px-0\.875{padding-left:0.21875rem;padding-right:0.21875rem;}
-.px-1{padding-left:0.25rem;padding-right:0.25rem;}
 .px-1\.125{padding-left:0.28125rem;padding-right:0.28125rem;}
 .px-1\.25{padding-left:0.3125rem;padding-right:0.3125rem;}
 .px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
@@ -1144,6 +1189,7 @@
 .px-6{padding-left:1.5rem;padding-right:1.5rem;}
 .px-7{padding-left:1.75rem;padding-right:1.75rem;}
 .px-8{padding-left:2rem;padding-right:2rem;}
+.py-0{padding-top:0;padding-bottom:0;}
 .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
 .py-0\.625{padding-top:0.15625rem;padding-bottom:0.15625rem;}
 .py-0\.75{padding-top:0.1875rem;padding-bottom:0.1875rem;}
@@ -1235,6 +1281,7 @@
 .text-end{text-align:end;}
 .indent{text-indent:1.5rem;}
 .text-balance{text-wrap:balance;}
+.align-middle{vertical-align:middle;}
 .text-\[10px\]{font-size:10px;}
 .text-2xl{font-size:1.5rem;line-height:2rem;}
 .text-2xs{font-size:0.625rem;line-height:0.75rem;}
@@ -1253,6 +1300,17 @@
 .text-sm\/relaxed{font-size:0.875rem;line-height:1.625;}
 .text-xl{font-size:1.25rem;line-height:1.75rem;}
 .text-xs{font-size:0.75rem;line-height:1rem;}
+.\[\&\:not\(\[data-selected\]\)\:hover\]\:text-accent-foreground:not([data-selected]):hover,
+.\[\&\[data-today\]\:not\(\[data-selected\]\)\]\:text-accent-foreground[data-today]:not([data-selected]),
+.data-\[highlighted\]\:text-accent-foreground[data-highlighted],
+.data-\[selected\]\:text-accent-foreground[data-selected],
+.data-\[state\=active\]\:text-accent-foreground[data-state=active],
+.data-\[state\=checked\]\:text-accent-foreground[data-state=checked],
+.data-\[state\=indeterminate\]\:text-accent-foreground[data-state=indeterminate],
+.data-\[state\=on\]\:text-accent-foreground[data-state=on],
+.data-\[state\=open\]\:text-accent-foreground[data-state=open],
+.group[data-state=active] .group-data-\[state\=active\]\:text-accent-foreground,
+.text-accent-foreground{--un-text-opacity:1;color:hsl(var(--accent-foreground) / var(--un-text-opacity)) /* hsl(var(--accent-foreground)) */;}
 .\[\&\>a\:hover\]\:text-primary>a:hover,
 .data-\[active\=true\]\:text-primary[data-active=true],
 .data-\[child-active\]\:text-primary[data-child-active],
@@ -1267,21 +1325,22 @@
 .group\/trigger[data-child-active] .group-data-\[child-active\]\/trigger\:text-primary,
 .text-primary{--un-text-opacity:1;color:hsl(var(--primary) / var(--un-text-opacity)) /* hsl(var(--primary)) */;}
 .dark .dark\:data-\[active\=true\]\:text-foreground[data-active=true],
+.data-\[highlighted\]\:text-foreground[data-highlighted],
+.data-\[selected\]\:text-foreground[data-selected],
 .data-\[state\=active\]\:text-foreground[data-state=active],
 .text-foreground{--un-text-opacity:1;color:hsl(var(--foreground) / var(--un-text-opacity)) /* hsl(var(--foreground)) */;}
-.data-\[highlighted\]\:text-accent-foreground[data-highlighted],
-.data-\[selected\]\:text-accent-foreground[data-selected],
-.data-\[state\=active\]\:text-accent-foreground[data-state=active],
-.data-\[state\=checked\]\:text-accent-foreground[data-state=checked],
-.data-\[state\=indeterminate\]\:text-accent-foreground[data-state=indeterminate],
-.data-\[state\=on\]\:text-accent-foreground[data-state=on],
-.data-\[state\=open\]\:text-accent-foreground[data-state=open],
-.group[data-state=active] .group-data-\[state\=active\]\:text-accent-foreground,
-.text-accent-foreground{--un-text-opacity:1;color:hsl(var(--accent-foreground) / var(--un-text-opacity)) /* hsl(var(--accent-foreground)) */;}
+.data-\[disabled\]\:text-muted-foreground[data-disabled],
+.data-\[outside-view\]\:text-muted-foreground[data-outside-view],
 .data-\[placeholder-shown\]\:text-muted-foreground[data-placeholder-shown],
 .data-\[placeholder\]\:text-muted-foreground[data-placeholder],
+.data-\[segment\=literal\]\:text-muted-foreground[data-segment=literal],
+.data-\[segment\=timeZoneName\]\:text-muted-foreground[data-segment=timeZoneName],
 .text-muted-foreground{--un-text-opacity:1;color:hsl(var(--muted-foreground) / var(--un-text-opacity)) /* hsl(var(--muted-foreground)) */;}
+.data-\[range-end\]\:text-primary-foreground[data-range-end],
+.data-\[range-start\]\:text-primary-foreground[data-range-start],
 .data-\[selected\]\:text-primary-foreground[data-selected],
+.data-\[selection-end\]\:text-primary-foreground[data-selection-end],
+.data-\[selection-start\]\:text-primary-foreground[data-selection-start],
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked],
 .data-\[state\=indeterminate\]\:text-primary-foreground[data-state=indeterminate],
 .group[data-state=active] .group-data-\[state\=active\]\:text-primary-foreground,
@@ -1377,6 +1436,8 @@
 .text-secondary-foreground\/40{color:hsl(var(--secondary-foreground) / 0.4) /* hsl(var(--secondary-foreground)) */;}
 .dark .dark\:hover\:text-foreground:hover{--un-text-opacity:1;color:hsl(var(--foreground) / var(--un-text-opacity)) /* hsl(var(--foreground)) */;}
 .data-\[selected\]\:hover\:text-primary-foreground:hover[data-selected]{--un-text-opacity:1;color:hsl(var(--primary-foreground) / var(--un-text-opacity)) /* hsl(var(--primary-foreground)) */;}
+.data-\[selection-end\]\:hover\:text-primary-foreground:hover[data-selection-end]{--un-text-opacity:1;color:hsl(var(--primary-foreground) / var(--un-text-opacity)) /* hsl(var(--primary-foreground)) */;}
+.data-\[selection-start\]\:hover\:text-primary-foreground:hover[data-selection-start]{--un-text-opacity:1;color:hsl(var(--primary-foreground) / var(--un-text-opacity)) /* hsl(var(--primary-foreground)) */;}
 .hover\:text-accent-foreground:hover{--un-text-opacity:1;color:hsl(var(--accent-foreground) / var(--un-text-opacity)) /* hsl(var(--accent-foreground)) */;}
 .hover\:text-carbon:hover{--un-text-opacity:1;color:hsl(var(--carbon) / var(--un-text-opacity)) /* hsl(var(--carbon)) */;}
 .hover\:text-destructive:hover{--un-text-opacity:1;color:hsl(var(--destructive) / var(--un-text-opacity)) /* hsl(var(--destructive)) */;}
@@ -1388,7 +1449,11 @@
 .hover\:text-success:hover{--un-text-opacity:1;color:hsl(var(--success) / var(--un-text-opacity)) /* hsl(var(--success)) */;}
 .hover\:text-warning:hover{--un-text-opacity:1;color:hsl(var(--warning) / var(--un-text-opacity)) /* hsl(var(--warning)) */;}
 .focus\:text-accent-foreground:focus{--un-text-opacity:1;color:hsl(var(--accent-foreground) / var(--un-text-opacity)) /* hsl(var(--accent-foreground)) */;}
+.data-\[selection-end\]\:focus-visible\:text-primary-foreground:focus-visible[data-selection-end]{--un-text-opacity:1;color:hsl(var(--primary-foreground) / var(--un-text-opacity)) /* hsl(var(--primary-foreground)) */;}
+.data-\[selection-start\]\:focus-visible\:text-primary-foreground:focus-visible[data-selection-start]{--un-text-opacity:1;color:hsl(var(--primary-foreground) / var(--un-text-opacity)) /* hsl(var(--primary-foreground)) */;}
+.focus-visible\:text-accent-foreground:focus-visible{--un-text-opacity:1;color:hsl(var(--accent-foreground) / var(--un-text-opacity)) /* hsl(var(--accent-foreground)) */;}
 .placeholder\:text-muted-foreground::placeholder{--un-text-opacity:1;color:hsl(var(--muted-foreground) / var(--un-text-opacity)) /* hsl(var(--muted-foreground)) */;}
+.data-\[selected\]\:font-medium[data-selected],
 .font-medium{font-weight:500;}
 .font-normal{font-weight:400;}
 .font-semibold{font-weight:600;}
@@ -1418,7 +1483,9 @@
 .tracking-widest{letter-spacing:0.1em;}
 .font-inherit{font-family:inherit;}
 .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
+.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
 .\[\&\>a\]\:underline>a{text-decoration-line:underline;}
+.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through;}
 .hover\:underline:hover{text-decoration-line:underline;}
 .\[\&\>a\]\:underline-offset-4>a,
 .underline-offset-4{text-underline-offset:4px;}
@@ -1462,9 +1529,12 @@
 .focus-visible\:outline-1:focus-visible{outline-width:1px;}
 .outline{outline-style:solid;}
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
+.focus-within\:outline-none:focus-within{outline:2px solid transparent;outline-offset:2px;}
+.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px;}
+.data-\[focused\]\:ring-2[data-focused],
+.data-\[state\=active\]\:ring-2[data-state=active]{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .data-\[invalid\]\:ring-3[data-invalid],
 .data-\[state\=active\]\:ring-3[data-state=active]{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.data-\[state\=active\]\:ring-2[data-state=active]{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .focus-within\:ring-3:focus-within{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .hover\:ring-3:hover{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
@@ -1476,6 +1546,7 @@
 .data-\[state\=active\]\:ring-offset-2[data-state=active]{--un-ring-offset-width:2px;}
 .focus-visible\:ring-offset-1:focus-visible{--un-ring-offset-width:1px;}
 .focus-visible\:ring-offset-2:focus-visible{--un-ring-offset-width:2px;}
+.data-\[focused\]\:ring-primary\/20[data-focused]{--un-ring-color:hsl(var(--primary) / 0.2) /* hsl(var(--primary)) */;}
 .data-\[invalid\]\:ring-destructive\/20[data-invalid]{--un-ring-color:hsl(var(--destructive) / 0.2) /* hsl(var(--destructive)) */;}
 .data-\[state\=active\]\:ring-ring[data-state=active]{--un-ring-opacity:1;--un-ring-color:hsl(var(--ring) / var(--un-ring-opacity)) /* hsl(var(--ring)) */;}
 .data-\[state\=active\]\:ring-ring\/40[data-state=active]{--un-ring-color:hsl(var(--ring) / 0.4) /* hsl(var(--ring)) */;}
@@ -1510,6 +1581,7 @@
 .focus-visible\:ring-offset-background:focus-visible{--un-ring-offset-opacity:1;--un-ring-offset-color:hsl(var(--background) / var(--un-ring-offset-opacity)) /* hsl(var(--background)) */;}
 .filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-\[background-color\,color\,box-shadow\]{transition-property:background-color,color,box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .transition-\[border-color\,box-shadow\,transform\]{transition-property:border-color,box-shadow,transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .transition-\[box-shadow\,background-color\]{transition-property:box-shadow,background-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}

package/dist/theme/shared.js

@@ -1 +1 @@
-import{cn as e}from"./merge.js";function t(t,...n){return Object.entries(t).reduce((t,[r,i])=>{let a=r;return t[a]=e(i(),...n.filter(Boolean).map(e=>e?.[a]).filter(Boolean)),t},{})}function n(e,t){return Object.entries(e).reduce((e,[n,r])=>{let i=n,a=t[i];return e[i]=()=>`${a??``} ${r()}`.trim(),e},{})}export{n as mergeBaseVariants,t as mergeSlotVariants};
+import{cn as e}from"./merge.js";function t(t,...n){return Object.entries(t).reduce((t,[r,i])=>{let a=r;return t[a]=e(i()??``,...n.filter(Boolean).map(e=>e?.[a]).filter(Boolean)),t},{})}function n(e,t){return Object.entries(e).reduce((e,[n,r])=>{let i=n,a=t[i];return e[i]=()=>`${a??``} ${r()??``}`.trim(),e},{})}export{n as mergeBaseVariants,t as mergeSlotVariants};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soybeanjs/ui",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "description": "SoybeanUI is built on top of SoybeanHeadless, providing a collection of styled components for Vue 3.",
   "homepage": "https://github.com/soybeanjs/soybean-ui",
   "bugs": {
@@ -49,15 +49,15 @@
     "@soybeanjs/colord": "^0.5.0",
     "@soybeanjs/hooks": "^0.2.0",
     "@soybeanjs/shadcn-theme": "^0.3.1",
-    "@soybeanjs/utils": "^0.1.0",
-    "@vueuse/core": "^14.2.1",
+    "@soybeanjs/utils": "^0.1.1",
+    "@vueuse/core": "^14.3.0",
     "clsx": "^2.1.1",
     "fuse.js": "^7.3.0",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "valibot": "^1.3.1",
-    "zod": "^4.3.6",
-    "@soybeanjs/headless": "^0.15.5"
+    "zod": "^4.4.1",
+    "@soybeanjs/headless": "^0.16.0"
   },
   "devDependencies": {
     "@soybeanjs/cli": "^1.7.2",
@@ -67,13 +67,13 @@
     "@types/node": "^25.6.0",
     "@unocss/cli": "^66.6.8",
     "@vitest/coverage-v8": "^4.1.5",
-    "@vue/test-utils": "^2.4.8",
-    "axe-core": "^4.11.3",
+    "@vue/test-utils": "^2.4.10",
+    "axe-core": "^4.11.4",
     "eslint": "^10.2.1",
     "happy-dom": "^20.9.0",
     "lint-staged": "^16.4.0",
-    "oxfmt": "^0.46.0",
-    "oxlint": "^1.61.0",
+    "oxfmt": "^0.47.0",
+    "oxlint": "^1.62.0",
     "simple-git-hooks": "^2.13.1",
     "tsdown": "0.21.10",
     "tsx": "^4.21.0",
@@ -82,7 +82,7 @@
     "unocss": "^66.6.8",
     "unocss-preset-animations": "^1.3.0",
     "unplugin-auto-import": "^21.0.0",
-    "unplugin-vue": "^7.1.1",
+    "unplugin-vue": "^7.2.0",
     "unplugin-vue-components": "^32.0.0",
     "unplugin-vue-jsx": "^0.8.1",
     "vite": "^8.0.10",
@@ -115,6 +115,7 @@
     "fmt": "oxfmt",
     "gen:api": "tsx scripts/api.ts && oxfmt docs/src/generated/api/",
     "gen:headless": "tsx scripts/headless.ts && oxfmt headless/src/constants/components.ts headless/src/namespaced/index.ts",
+    "gen:ui": "tsx scripts/ui.ts && oxfmt src/constants/components.ts",
     "preview": "vite preview",
     "preview:docs": "pnpm --filter @soybeanjs/ui-docs preview",
     "publish-pkg": "pnpm publish -r --access public",