@widgetic/design-system 0.3.78 → 0.3.80

package/dist/components/toast/ToasterModal.svelte

@@ -3,8 +3,8 @@
 import { toast, Toaster } from '../ui/sonner';
 
 // Import Icons from Icons Folder
-import Exclamation from '../../icons/Exclamation.svelte';
-import Checked from '../../icons/Checked.svelte';
+import Close from '../../icons/Exclamation.svelte';
+import Checked from '../../icons/checked.svelte';
 
 // Import Toast Types directly from the svelte-sonner module
 // import type { ToastTypes } from 'svelte-sonner';
@@ -50,34 +50,27 @@ export function showToast(type: string = 'success', title: string, options: any
   const duration = options?.duration || defaultDuration;
 
   // set close icon - not working !!!
-  options.closeIcon = Exclamation;
+  options.closeIcon = Close;
 
   // Get the title color from the options or use the default color
   const titleColor = type === 'success' ? '--grey7' : type === 'error' ? '--error' : '--dark';
 
   // set icon depending on the type of toast
-  if(type === 'error') options.icon = Exclamation;
+  if(type === 'error') options.icon = Close;
   if(type === 'success') options.icon = Checked;
 
   // set icon background fill color
   if(type === 'success') options.iconBgFillColor = '--icon-success';
-  if(type === 'error')   options.iconBgFillColor = '--icon-error';
+  if(type === 'error') options.iconBgFillColor = '--icon-error';
   if(type === 'warning') options.iconBgFillColor = '--sunny-yellow';
   // console.log('showToast:', type, title, titleColor, duration);
 
   // set style of the data-icon element
   setTimeout(() => {
-    // set the close button color
     let closeButtonElement = document.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
-    // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
 
-    // set icon background fill color
     let iconElement = document.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
     if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
-
-    // set the title color
-    let titleElement = document.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
-    if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
   }, 20);
   
   // Call toast with custom styling
@@ -85,6 +78,9 @@ export function showToast(type: string = 'success', title: string, options: any
     ...options,
     duration,
     unstyled: true,
+    classes: {
+      title: "text-[hsl(var(" + titleColor + "))]",
+    },
     onAutoClose: () => {
       isToastVisible = false;
     },
@@ -107,10 +103,10 @@ export function showToast(type: string = 'success', title: string, options: any
     classes: {
       toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
                               "!min-w-[334px] !max-w-[450px] " +
-                              // "fixed top-auto bottom-[20px] right-[20px] " + 
+                              "!fixed !top-auto !bottom-[20px] !right-[20px] " + 
                               "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
                               // Icon Styling
-                              "*:data-icon:!w-[24px] *:data-icon:!h-[24px] *:data-icon:!m-0 " + 
+                              "[&>[data-icon]]:!w-[24px] [&>[data-icon]]:!h-[24px] [&>[data-icon]]:!m-0 " + 
                               "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
                               // Content Styling
                               "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
@@ -123,7 +119,7 @@ export function showToast(type: string = 'success', title: string, options: any
       // Cancel Button Styling
       cancelButton: "",
       // Close Button Styling
-      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[0px] !left-[0px] z-10 !bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !text-white'
+      closeButton: toastMainClass + '-close-button w-[16px] h-[16px] absolute -translate-x-1/2 -translate-y-1/2 top-[1px] left-[1px] z-10 !bg-[hsl(var(--grey7))] border !border-[hsl(var(--grey5))] !text-white'
     }
   }}
   expand={false}

package/dist/components/ui/accordion/index.d.ts

@@ -2,5 +2,5 @@ import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/badge/badge.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
 		variants: {
 			variant: {
 				default:

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -34,7 +34,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         default: string;
         secondary: string;

package/dist/components/ui/button/button.svelte

@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",

package/dist/components/ui/button/button.svelte.d.ts

@@ -16,7 +16,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -76,7 +76,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/calendar/calendar-day.svelte

@@ -17,13 +17,13 @@
 		"size-9 p-0 font-normal",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
 		// Selected
-		"data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground data-selected:opacity-100",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
 		// Disabled
-		"data-disabled:text-muted-foreground data-disabled:opacity-50",
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
-		"data-unavailable:text-destructive-foreground data-unavailable:line-through",
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
 		// Outside months
-		"data-outside-month:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-outside-month:pointer-events-none data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
+declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/card/card.svelte

@@ -13,7 +13,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-2xs", className)}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/checkbox/checkbox.svelte

@@ -16,7 +16,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked

package/dist/components/ui/collapsible/index.d.ts

@@ -1,5 +1,5 @@
 import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "open" | "ref">;
+declare const Root: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
 declare const Trigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
 declare const Content: import("svelte").Component<Omit<{
     forceMount?: boolean;

package/dist/components/ui/command/command-dialog.svelte

@@ -25,7 +25,7 @@
 <Dialog.Root bind:open {...restProps}>
 	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
 		<Command
-			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 **:data-command-group:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
 			{...restProps}
 			bind:value
 			bind:ref

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -4,6 +4,6 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "open" | "value" | "ref">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/command/command-input.svelte

@@ -15,7 +15,7 @@
 	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
 		bind:ref

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "value" | "ref">;
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

package/dist/components/ui/command/command-item.svelte

@@ -11,7 +11,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		className
 	)}
 	bind:ref

package/dist/components/ui/command/command-link-item.svelte

@@ -11,7 +11,7 @@
 
 <CommandPrimitive.LinkItem
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	bind:ref

package/dist/components/ui/command/command.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "value" | "ref">;
+declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "ref" | "value">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/components/ui/dialog/dialog-content.svelte

@@ -29,7 +29,7 @@
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -18,7 +18,7 @@
 		bind:ref
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -12,7 +12,7 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -21,5 +21,5 @@ declare const Root: import("svelte").Component<{
 }, {}, "open">;
 declare const Trigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
 declare const Group: import("svelte").Component<DropdownMenuPrimitive.GroupProps, {}, "ref">;
-declare const RadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
+declare const RadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
 export { CheckboxItem, Content, Root, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Root as DropdownMenu, Group as DropdownMenuGroup, GroupHeading as DropdownMenuGroupHeading, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger };

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -20,7 +20,7 @@
 		{align}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/input/input.svelte

@@ -14,7 +14,7 @@
 <input
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { WithElementRef } from "bits-ui";
-declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "value" | "ref">;
+declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "ref" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-otp/input-otp.svelte

@@ -15,7 +15,7 @@
 	bind:ref
 	bind:value
 	class={cn(
-		"flex items-center gap-2 has-disabled:opacity-50 disabled:[&_input]:cursor-not-allowed",
+		"flex items-center gap-2 has-[:disabled]:opacity-50 [&_input]:disabled:cursor-not-allowed",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "value" | "ref">;
+declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "ref" | "value">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

package/dist/components/ui/popover/popover-content.svelte

@@ -20,7 +20,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -13,7 +13,7 @@
 <RadioGroupPrimitive.Item
 	bind:ref
 	class={cn(
-		"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/radio-group/radio-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "value" | "ref">;
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/components/ui/range-calendar/range-calendar-day.svelte

@@ -16,18 +16,18 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-9 p-0 font-normal data-selected:opacity-100",
+		"size-9 p-0 font-normal data-[selected]:opacity-100",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
 		// Selection Start
-		"data-selection-start:bg-primary data-selection-start:text-primary-foreground data-selection-start:hover:bg-primary data-selection-start:hover:text-primary-foreground data-selection-start:focus:bg-primary data-selection-start:focus:text-primary-foreground",
+		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
 		// Selection End
-		"data-selection-end:bg-primary data-selection-end:text-primary-foreground data-selection-end:hover:bg-primary data-selection-end:hover:text-primary-foreground data-selection-end:focus:bg-primary data-selection-end:focus:text-primary-foreground",
+		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
 		// Outside months
-		"data-outside-month:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-outside-month:pointer-events-none data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
 		// Disabled
-		"data-disabled:text-muted-foreground data-disabled:opacity-50",
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
-		"data-unavailable:text-destructive-foreground data-unavailable:line-through",
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "placeholder" | "ref">;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "ref" | "value" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/select/index.d.ts

@@ -6,6 +6,6 @@ import Trigger from "./select-trigger.svelte";
 import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
 declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
 export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton };

package/dist/components/ui/select/select-item.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/select/select-trigger.svelte

@@ -14,7 +14,7 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/slider/slider.svelte

@@ -27,7 +27,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

package/dist/components/ui/slider/slider.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "value" | "ref">;
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/components/ui/switch/switch.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	bind:checked
 	class={cn(
-		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/index.d.ts

@@ -2,5 +2,5 @@ import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
 import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
+declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/tabs-content.svelte

@@ -12,7 +12,7 @@
 <TabsPrimitive.Content
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2",
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -12,7 +12,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs",
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/textarea/textarea.svelte

@@ -14,7 +14,7 @@
 <textarea
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { WithElementRef } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/components/ui/toggle/toggle.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-transparent",