@widgetic/design-system 0.3.89 → 0.5.7

package/dist/components/search-input/SearchInput.svelte

@@ -10,8 +10,8 @@
  * - Uses Widgetic design system styling
  -->
 <script lang="ts">
-  import { X, IconSearch } from '@widgetic/design-system/icons';
-
+  // import { X, IconSearch } from '@widgetic/design-system/icons';
+  import { X, IconSearch } from '../../icons';
   /**
    * Placeholder text for the search input
    */
@@ -79,7 +79,7 @@
             onKeydown(e);
           }}
           onpaste={onPaste}
-          class="w-full h-[38px] border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
+          class="w-full h-[38px] border-0 bg-transparent focus:outline-hidden focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
                 transition-all duration-300 
                 {value ? 'text-[hsl(var(--grey7))]' : 'text-[hsl(var(--grey3))] placeholder:text-[hsl(var(--grey3))] placeholder:transition-colors placeholder:duration-300 group-hover:text-[hsl(var(--grey7))] group-hover:placeholder:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))] group-focus-within:placeholder:text-[hsl(var(--grey7)))'} 
                 {inputClass}"
@@ -104,11 +104,6 @@
     transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease !important;
   }
   
-  input::-moz-placeholder {
-    -moz-transition: color 300ms ease !important;
-    transition: color 300ms ease !important;
-  }
-  
   input::placeholder {
     transition: color 300ms ease !important;
   }

package/dist/components/search-input/index.d.ts

@@ -1,14 +1,3 @@
-import { SvelteComponent } from 'svelte';
-
-export interface SearchInputProps {
-  placeholder?: string;
-  value?: string;
-  onInput?: (event: Event) => Promise<void> | void;
-  onKeydown?: (event: KeyboardEvent) => void;
-  onClear?: () => void;
-  onPaste?: (event: ClipboardEvent) => void;
-  containerClass?: string;
-  inputClass?: string;
-}
-
-export default class SearchInput extends SvelteComponent<SearchInputProps> {} 
+import SearchInput from './SearchInput.svelte';
+export { SearchInput };
+export default SearchInput;

package/dist/components/search-input/index.js

@@ -1,4 +1,3 @@
 import SearchInput from './SearchInput.svelte';
-
 export { SearchInput };
-export default SearchInput; 
+export default SearchInput;

package/dist/components/search-input/index2.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from 'svelte';
+
+export interface SearchInputProps {
+  placeholder?: string;
+  value?: string;
+  onInput?: (event: Event) => Promise<void> | void;
+  onKeydown?: (event: KeyboardEvent) => void;
+  onClear?: () => void;
+  onPaste?: (event: ClipboardEvent) => void;
+  containerClass?: string;
+  inputClass?: string;
+}
+
+export default class SearchInput extends SvelteComponent<SearchInputProps> {} 

package/dist/components/shad-editor/README.md

@@ -0,0 +1,18 @@
+# ShadEditor Component
+
+This directory contains the Svelte components for a rich text editor based on Tiptap and styled with shadcn-svelte UI elements.
+
+## Origin
+
+The code was originally scaffolded using version `0.0.7` of the now-deprecated `shadeditor` CLI tool.
+
+*   Original (deprecated) npm package: [https://www.npmjs.com/package/shadeditor](https://www.npmjs.com/package/shadeditor)
+*   The author appears to have continued development under a new name/project called "Edra": [https://edra.tsuzat.com/](https://edra.tsuzat.com/)
+
+## Current Status
+
+The components in this directory have been adapted to work within the Widgetic Design System after its migration to **Tailwind CSS v4**.
+
+**Important:** Do not attempt to update or reinstall this component using the original `shadeditor` CLI (`npx shadeditor init`) or the new one from edra, as it is designed for Tailwind v3 and will likely break the current Tailwind v4 configuration and component adaptations.
+
+Use the component as it exists within this design system project.

package/dist/components/shad-editor/custom/image-extended-component.svelte

@@ -136,7 +136,7 @@
 			<input
 				value={node.attrs.title}
 				type="text"
-				class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-none"
+				class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-hidden"
 				onchange={(e) => {
 					if (e.target === null) return;
 					//@ts-ignore

package/dist/components/shad-editor/editor.css

@@ -1,11 +1,14 @@
+/* @config "../../../../tailwind.config.ts"; */
+@reference "../../styles/global.css";
+
 .tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	margin-top: 0 !important;
 	margin-bottom: 0 !important;
 }
 
 .tiptap code:not(pre code) {
-	/* Remove the before and after pseudo elements */
-	@apply rounded border bg-muted/50 p-1 before:content-[''] after:content-[''];
+	/* Remove the before and after pseudo elements, replace rounded with rounded-sm */
+	@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
 }
 
 .tiptap blockquote p {
@@ -54,7 +57,7 @@ ul[data-type='taskList'] li[data-checked='true'] div {
 }
 
 input[type='checkbox'] {
-	@apply size-4 cursor-pointer rounded !important;
+	@apply !size-4 !cursor-pointer !rounded-sm;
 }
 
 ul[data-type='taskList'] ul[data-type='taskList'] {
@@ -67,7 +70,8 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 }
 
 .color::before {
-	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded border border-muted align-middle;
+	/* Replace rounded with rounded-md */
+	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-md border border-muted align-middle;
 	background-color: var(--color);
 	content: ' ';
 }

package/dist/components/shad-editor/icons/table.svelte

@@ -75,7 +75,7 @@
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteRow().run()}
-								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 							>
 								<span>Delete Row</span>
 							</DropdownMenu.Item>
@@ -94,7 +94,7 @@
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteColumn().run()}
-								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 							>
 								<span>Delete</span>
 							</DropdownMenu.Item>
@@ -102,7 +102,7 @@
 					</DropdownMenu.Sub>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().deleteTable().run()}
-						class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+						class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
 					>
 						<span>Delete</span>
 					</DropdownMenu.Item>

package/dist/components/shad-editor/icons/text.svelte

@@ -78,7 +78,7 @@
 					>
 						<Pilcrow /> Paragraph
 						{#if editor.isActive('paragraph')}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute right-2 size-3! text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item

package/dist/components/shad-editor/onedark.css

@@ -1,3 +1,6 @@
+/* @config "../../../../tailwind.config.ts"; */
+@reference "../../styles/global.css";
+
 /* One Dark and Light Theme for Highlight.js using Tailwind CSS */
 .tiptap pre code {
 	@apply text-[#383a42] dark:text-[#abb2bf];

package/dist/components/shad-editor/shad-editor.svelte

@@ -67,7 +67,7 @@
 			editorProps: {
 				attributes: {
 					class:
-						'm-auto p-2 focus:outline-none flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
+						'm-auto p-2 focus:outline-hidden flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
 				}
 			},
 			extensions: [

package/dist/components/toast/ToasterModal.svelte

@@ -3,7 +3,7 @@
 import { toast, Toaster } from '../ui/sonner';
 
 // Import Icons from Icons Folder
-import Close from '../../icons/Exclamation.svelte';
+import Exclamation from '../../icons/Exclamation.svelte';
 import Checked from '../../icons/Checked.svelte';
 
 // Import Toast Types directly from the svelte-sonner module
@@ -50,27 +50,34 @@ export function showToast(type: string = 'success', title: string, options: any
   const duration = options?.duration || defaultDuration;
 
   // set close icon - not working !!!
-  options.closeIcon = Close;
+  options.closeIcon = Exclamation;
 
   // 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 = Close;
+  if(type === 'error') options.icon = Exclamation;
   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
@@ -78,9 +85,6 @@ export function showToast(type: string = 'success', title: string, options: any
     ...options,
     duration,
     unstyled: true,
-    classes: {
-      title: "text-[hsl(var(" + titleColor + "))]",
-    },
     onAutoClose: () => {
       isToastVisible = false;
     },
@@ -106,7 +110,7 @@ export function showToast(type: string = 'success', title: string, options: any
                               "!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]",
@@ -119,7 +123,9 @@ 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 -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'
+      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !left-[-4px] z-10 ' + 
+                                    '!flex !items-center !justify-center ' +
+                                    '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white'
     }
   }}
   expand={false}

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

@@ -7,7 +7,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -27,7 +27,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

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-none 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-hidden focus:ring-2 focus:ring-offset-2",
 		variants: {
 			variant: {
 				default:

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

@@ -7,7 +7,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-none 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-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -35,7 +35,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-none 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-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").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-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",
+		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",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",

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

@@ -22,13 +22,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/card/card.svelte

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

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

@@ -21,7 +21,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-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",
+		"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",
 		className
 	)}
 	bind:checked

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

@@ -1,16 +1,5 @@
 import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 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;
-}, "children" | "child"> & {
-    child?: import("svelte").Snippet<[import("bits-ui").CollapsibleContentSnippetProps & {
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CollapsibleContentPropsWithoutHTML> & {
-    forceMount?: boolean;
-}, {}, "ref">;
+declare const Content: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
 export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger };

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-input.svelte

@@ -20,7 +20,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-none 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-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
 		bind:ref

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

@@ -16,7 +16,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-none 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-hidden 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

@@ -16,7 +16,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-none 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-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	bind:ref

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-none 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-hidden 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-none 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-hidden 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-none",
+			"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",
 			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-none 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-hidden 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

@@ -19,7 +19,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-none 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-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -17,7 +17,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-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
 		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-none [&_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-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}

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

@@ -1,4 +1,4 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import type { Component } from "svelte";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
 import GroupHeading from "./dropdown-menu-group-heading.svelte";
@@ -9,17 +9,9 @@ import Separator from "./dropdown-menu-separator.svelte";
 import Shortcut from "./dropdown-menu-shortcut.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
-declare const Root: import("svelte").Component<{
-    open?: boolean;
-    onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
-    dir?: import("bits-ui").Direction;
-} & {
-    children?: import("svelte").Snippet | undefined;
-} & {
-    _internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
-}, {}, "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, {}, "ref" | "value">;
+declare const Sub: Component<any>;
+declare const Root: Component<any>;
+declare const Trigger: Component<any>;
+declare const Group: Component<any>;
+declare const RadioGroup: Component<any>;
 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-none",
+			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
 			className
 		)}
 		{...restProps}

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

@@ -19,7 +19,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-none 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-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

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

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

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-none",
+			"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",
 			className
 		)}
 		{...restProps}

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

@@ -18,7 +18,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-none 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-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -21,18 +21,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}