@widgetic/design-system 0.3.68 → 0.3.70

package/dist/components/EmptyState.svelte

@@ -121,7 +121,7 @@
 
   /* Icon container to prevent scaling */
   .icon-container {
-    flex-shrink: 0;
+    shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;

package/dist/components/WScrollArea.svelte

@@ -26,16 +26,16 @@ export let element: HTMLElement | null = null;
 <ScrollArea bind:ref={element}
         class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
               "widgetic-radius widgetic-colors select-text " +  
-              "[&_[data-scroll-area-viewport]]:!pr-[var(--scrollbar-width)]"}
+              "**:data-scroll-area-viewport:pr-(--scrollbar-width)!"}
         style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
                 --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
         {orientation}
         {type}
         {scrollHideDelay}
-        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-[var(--scrollbar-padding)] " + 
-                          "!bg-transparent border-none select-none touch-none " + 
+        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] p-(--scrollbar-padding)! " + 
+                          "bg-transparent! border-none select-none touch-none " + 
                           "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
-                          "[&>div]:bg-[hsl(var(--grey1))] [&>div]:hover:bg-[hsl(var(--grey2))] " + 
+                          "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
                           "[&>div]:transition-colors [&>div]:duration-250"}
       >
       <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-right: {scrollbarWidth}px;">

package/dist/components/debug-grid/DebugGrid.svelte

@@ -163,7 +163,7 @@
                   {#if isDashboard && !isMobile}
                     <div class="grid-sidebar flex">
                       <div class="grid-sidebar-margin-left grid-margin-left" style="width: {marginWidth}px"></div>
-                      <div class="grid-sidebar-content grid-column flex-grow"></div>
+                      <div class="grid-sidebar-content grid-column grow"></div>
                       <div class="grid-sidebar-margin-right grid-margin-right" style="width: {marginWidth}px"></div>
                     </div>
                   {/if}

package/dist/components/ic/browser/BrowserInputController.svelte

@@ -333,7 +333,7 @@
           <Tooltip.Content 
             side="right" 
             sideOffset={5}
-            class="bg-gray-900 text-white z-[99999] overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
+            class="bg-gray-900 text-white z-99999 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
             style="position: fixed; left: {mouseX + 20}px; top: {mouseY}px; z-index: 999999;"
           >
             <p class="text-sm">{header.helpText}</p>

package/dist/components/index.d.ts

@@ -12,7 +12,7 @@ export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs, type BreadcrumbsProps } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
-export { default as SearchInput } from './search-input/SearchInput.svelte';
+export { SearchInput } from './search-input';
 export { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';

package/dist/components/index.js

@@ -13,7 +13,7 @@ export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
-export { default as SearchInput } from './search-input/SearchInput.svelte';
+export { SearchInput } from './search-input';
 export { ShadEditor } from './shad-editor';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';

package/dist/components/modals/ActionModal.svelte

@@ -146,7 +146,7 @@
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div 
-            class="cancel-button modal-btn-secondary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--grey1))] hover:bg-[hsl(var(--grey2))] text-[hsl(var(--grey7))] rounded-full" 
+            class="cancel-button modal-btn-secondary h-[34px]! radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--grey1))] hover:bg-[hsl(var(--grey2))] text-[hsl(var(--grey7))] rounded-full" 
             on:click={handleClose}
             role="button"
             tabindex="0"
@@ -158,7 +158,7 @@
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div 
-            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white rounded-full' : 'confirm-button modal-btn-primary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white rounded-full'}"
+            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention h-[34px]! radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white rounded-full' : 'confirm-button modal-btn-primary h-[34px]! radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white rounded-full'}"
             on:click={handleConfirm}
             role="button"
             tabindex="0"

package/dist/components/modals/BaseModal.svelte

@@ -284,7 +284,7 @@
       ></div>
 
       <!-- Close button -->
-      <div class="modal-close-bt-container absolute top-4 right-4 z-[1004]" transition:fade={{ duration: transitionDuration, easing }}>
+      <div class="modal-close-bt-container absolute top-4 right-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div 
@@ -294,7 +294,7 @@
           role="button"
           tabindex="0"
         >
-          <IconX class="!w-[24px] !h-[24px] text-white" />
+          <IconX class="w-[24px]! h-[24px]! text-white" />
         </div>
       </div>
 

package/dist/components/modals/NewItemDialog.svelte

@@ -131,7 +131,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-none focus:ring-0
+               bg-transparent border-none focus:outline-hidden focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
         placeholder={placeholder}
@@ -149,14 +149,14 @@
       <Button 
         type="button" 
         variant="secondary"
-        class="modal-btn-secondary !rounded-[100px] !h-[34px]" 
+        class="modal-btn-secondary rounded-[100px]! h-[34px]!" 
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
       <Button 
         type="submit" 
-        class="modal-btn-primary !rounded-[100px] !h-[34px]"
+        class="modal-btn-primary rounded-[100px]! h-[34px]!"
         onclick={handleSubmit}
         disabled={!isValid}
       >

package/dist/components/modals/RenameDialog.svelte

@@ -264,7 +264,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-none focus:ring-0
+               bg-transparent border-none focus:outline-hidden focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
         maxlength={maxLength}
@@ -285,14 +285,14 @@
       <Button 
         type="button" 
         variant="secondary"
-        class="modal-btn-secondary !h-[34px]" 
+        class="modal-btn-secondary h-[34px]!" 
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
       <Button 
         type="submit" 
-        class="modal-btn-primary !h-[34px]"
+        class="modal-btn-primary h-[34px]!"
         onclick={handleRename}
         disabled={!isValid}
       >

package/dist/components/navigation/Breadcrumbs.svelte

@@ -182,7 +182,7 @@
 >
   <!-- NAVIGATION BUTTONS -->
   {#if showNavigationButtons}
-    <div class="nav-buttons flex items-center flex-shrink-0">
+    <div class="nav-buttons flex items-center shrink-0">
       <!-- Left arrow -->
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
@@ -222,7 +222,7 @@
       <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
         <div class="inline-flex items-center min-w-0 min-h-[24px]">
           <!-- Root Breadcrumb Item -->
-          <Breadcrumb.Item class="flex-shrink-0">
+          <Breadcrumb.Item class="shrink-0">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <span 
               role="link"
@@ -241,10 +241,10 @@
           {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
             {#if shouldShowEllipsis && currentPath.length > itemsToShow}
               <!-- Breadcrumb Separator -->
-              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
 
               <!-- Dropdown Menu for Ellipsis -->
-              <Breadcrumb.Item class="flex-shrink-0">
+              <Breadcrumb.Item class="shrink-0">
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
                     <span class="h5 text-[hsl(var(--grey6))]">...</span>
@@ -269,8 +269,8 @@
 
               <!-- Always show last N segments based on available width -->
               {#each currentPath.slice(-itemsToShow + 1) as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="flex-shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="shrink-0">
                   {#if index === itemsToShow - 2}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[currentPath.length - 1]}
@@ -293,8 +293,8 @@
               {/each}
             {:else}
               {#each currentPath as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="flex-shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="shrink-0">
                   {#if index === currentPath.length - 1}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[index]}
@@ -323,7 +323,7 @@
   </div>
 
   {#if showDebugVisualizer}
-    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow">
+    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
       Available width: {Math.round(availableWidth)}px
       <br>
       Items to show: {itemsToShow}

package/dist/components/pdf/PDFViewer.svelte

@@ -549,7 +549,7 @@
           aria-label="Previous page"
         >
           <IconChevronLeft 
-            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            class="text-[hsl(var(--grey5))]! group-hover:text-[hsl(var(--grey7))]!"
             style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
@@ -563,7 +563,7 @@
           aria-label="Next page"
         >
           <IconChevronRight 
-            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            class="text-[hsl(var(--grey5))]! group-hover:text-[hsl(var(--grey7))]!"
             style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>

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

@@ -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/code-extended.svelte

@@ -43,7 +43,7 @@
 					'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
 			})}
 			>{defaultLanguage}
-			<ChevronDown class="!size-3" />
+			<ChevronDown class="size-3!" />
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="h-60 w-40 overflow-auto" contenteditable="false">
 			{#each languages as language}

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

@@ -131,7 +131,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/highlighter.svelte

@@ -30,7 +30,7 @@
 						onclick={() => editor.chain().focus()}
 					>
 						<Highlighter />
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

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

@@ -18,7 +18,7 @@
 				<Popover.Trigger>
 					<Button variant="ghost" size="sm" class="h-8">
 						<Image />
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

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

@@ -31,7 +31,7 @@
 						class={cn('h-8', editor.isActive('link') && 'bg-muted')}
 					>
 						<Link />
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

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

@@ -30,7 +30,7 @@
 				<DropdownMenu.Trigger>
 					<Button variant="ghost" size="sm" class="h-8" style={`color: ${currentColor}`}>
 						A
-						<ChevronDown class="!size-3" />
+						<ChevronDown class="size-3!" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
@@ -56,7 +56,7 @@
 								>
 								<span>{color.label}</span>
 								{#if editor.isActive('textStyle', { color: color.value })}
-									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+									<Check class="absolute right-2 size-3! text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}
@@ -80,7 +80,7 @@
 								>
 								<span>{color.label}</span>
 								{#if editor.isActive('highlight', { color: color.value })}
-									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+									<Check class="absolute right-2 size-3! text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}

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

@@ -15,7 +15,7 @@
 				<DropdownMenu.Trigger>
 					<Button variant="ghost" size="sm" class="h-8">
 						<Table />
-						<ChevronDown class="!size-3" />
+						<ChevronDown class="size-3!" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
@@ -70,7 +70,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>
@@ -89,7 +89,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>
@@ -97,7 +97,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

@@ -36,7 +36,7 @@
 						{:else}
 							<Minus />
 						{/if}
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="w-56">
@@ -46,7 +46,7 @@
 					>
 						<Heading1 /> Heading 1
 						{#if editor.isActive('heading', { level: 1 })}
-							<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
@@ -55,7 +55,7 @@
 					>
 						<Heading2 /> Heading 2
 						{#if editor.isActive('heading', { level: 2 })}
-							<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
@@ -64,7 +64,7 @@
 					>
 						<Heading3 /> Heading 3
 						{#if editor.isActive('heading', { level: 3 })}
-							<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
@@ -73,7 +73,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
@@ -82,7 +82,7 @@
 					>
 						<FileJson /> Code Block
 						{#if editor.isActive('codeBlock')}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute right-2 size-3! text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>

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

@@ -32,7 +32,7 @@
 						{:else}
 							<AlignLeft />
 						{/if}
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="w-56">
@@ -42,7 +42,7 @@
 					>
 						<AlignLeft /> Align Left
 						{#if editor.isActive({ textAlign: 'left' })}
-							<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
@@ -51,7 +51,7 @@
 					>
 						<AlignCenter /> Align Center
 						{#if editor.isActive({ textAlign: 'center' })}
-							<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
@@ -60,7 +60,7 @@
 					>
 						<AlignRight /> Align Right
 						{#if editor.isActive({ textAlign: 'right' })}
-							<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
@@ -69,7 +69,7 @@
 					>
 						<AlignJustify /> Align Justify
 						{#if editor.isActive({ textAlign: 'justify' })}
-							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+							<Check class="absolute right-2 size-3! text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>

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

@@ -30,7 +30,7 @@
 						onclick={() => editor.chain().focus()}
 					>
 						<Baseline />
-						<ChevronDown class="!size-3 text-muted-foreground" />
+						<ChevronDown class="size-3! text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

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

@@ -62,7 +62,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: [