@widgetic/design-system 0.3.68 → 0.3.71

package/dist/components/CopyableHeader.svelte

@@ -30,8 +30,10 @@ const dispatch = createEventDispatcher();
 /**
  * COMPONENT IMPORTS
  */
-import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
-import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+// import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
+import { toast, Button, Tooltip, Portal } from './';
+// import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+import { IconCopy, IconHelp } from '../icons';
 
 /**
  * COMPONENT PROPS
@@ -189,7 +191,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
         {#if showHelp && helpUrl}
           <Tooltip.Provider>
             <Tooltip.Root open={showHelpTooltip}>
-              <Tooltip.Trigger class="focus:outline-none">
+              <Tooltip.Trigger class="focus:outline-hidden">
                 <a 
                   href={helpUrl} 
                   target="_blank"
@@ -218,7 +220,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                   <Tooltip.Content 
                     side="right" 
                     sideOffset={5}
-                    class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-2 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                    class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-2 py-1.5 shadow-md widgetic-colors widgetic-radius"
                   >
                     <p class="caption text-white">{helpText}</p>
                   </Tooltip.Content>
@@ -231,7 +233,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {#if showStandaloneCopyButton}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-none">
+            <Tooltip.Trigger class="focus:outline-hidden">
               <Button 
                 variant="default" 
                 class="h-9 w-6 {headerBackgroundColor ? headerBackgroundColor + ' text-[hsl(var(--grey7))]' : buttonClass || 'bg-[hsl(var(--dark))] hover:bg-white text-white rounded-full'} flex items-center justify-center active:scale-95 transition-transform duration-150"
@@ -256,7 +258,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                 <Tooltip.Content 
                   side="left" 
                   sideOffset={5}
-                  class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                  class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
                 >
                   <p class="caption text-white">{standaloneCopyButtonText}</p>
                 </Tooltip.Content>
@@ -267,7 +269,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {:else}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-none">
+            <Tooltip.Trigger class="focus:outline-hidden">
               <Button 
                 variant="ghost" 
                 size="icon"
@@ -294,7 +296,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                 <Tooltip.Content 
                   side="left" 
                   sideOffset={5}
-                  class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                  class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
                 >
                   <p class="caption text-white">{standaloneCopyButtonText}</p>
                 </Tooltip.Content>
@@ -339,15 +341,11 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
   .copyable-content-area {
     -webkit-user-select: text !important;
     -moz-user-select: text !important;
+    -ms-user-select: text !important;
     user-select: text !important;
     overflow-y: auto !important;
   }
 
-  .copyable-content-area::-moz-selection {
-    background-color: rgba(59, 130, 246, 0.2) !important;
-    color: inherit !important;
-  }
-
   .copyable-content-area::selection {
     background-color: rgba(59, 130, 246, 0.2) !important;
     color: inherit !important;

package/dist/components/EmptyState.svelte

@@ -11,8 +11,10 @@
  * - Responsive: hides icon when space is limited
  -->
 <script lang="ts">
-  import { IconExclamationCircle } from '@widgetic/design-system/icons';
   import { onMount } from 'svelte';
+
+  // import { IconExclamationCircle } from '@widgetic/design-system/icons';
+  import { IconExclamationCircle } from '../icons';
   
   /**
    * Component Props
@@ -121,7 +123,7 @@
 
   /* Icon container to prevent scaling */
   .icon-container {
-    flex-shrink: 0;
+    shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;

package/dist/components/EmptyState.svelte.d.ts

@@ -1,3 +1,4 @@
+import { IconExclamationCircle } from '../icons';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -26,7 +27,7 @@ declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
     showIcon?: boolean;
     iconColor?: string;
     textColor?: string;
-    icon?: any;
+    icon?: typeof IconExclamationCircle;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/components/PasswordInput.svelte

@@ -5,6 +5,10 @@
   // SHADCN Imports
   import { Input } from './ui/input';
 
+  // Import icon URLs
+  import eyeIconUrl from '../icons/eye.svg?url';
+  import eyeOffIconUrl from '../icons/eye-off.svg?url';
+
   // External Props
   export let value = '';
   export let placeholder = 'Enter password';
@@ -37,7 +41,7 @@
       on:click={() => showPassword = !showPassword}
     >
       <img 
-        src={showPassword ? '/icons/eye-off.svg' : '/icons/eye.svg'} 
+        src={showPassword ? eyeOffIconUrl : eyeIconUrl}
         alt={showPassword ? 'Hide password' : 'Show password'} 
         class="w-5 h-5"
       />

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)] " + 
+        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/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 

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}

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}
@@ -282,16 +282,17 @@
 
     <!-- Buttons Container -->
     <div class="buttons-container flex justify-center gap-4">
+      <!-- Cancel Button -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <Button 
-        type="button" 
-        variant="secondary"
-        class="modal-btn-secondary !h-[34px]" 
+        class="modal-btn-secondary !h-[34px]"
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
-      <Button 
-        type="submit" 
+
+      <!-- Confirm Button -->
+      <Button
         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

@@ -542,29 +542,19 @@
     <!-- Page Navigation Bar -->
     <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
       <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onPrevPage}
-          disabled={pageNum <= 1}
-          aria-label="Previous page"
-        >
-          <IconChevronLeft 
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
+          <IconChevronLeft
             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;"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
         
         <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
         
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onNextPage}
-          disabled={pageNum >= pageCount}
-          aria-label="Next page"
-        >
-          <IconChevronRight 
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
+          <IconChevronRight
             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;"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
       </div>

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

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

@@ -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

@@ -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

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: [

package/dist/components/toast/ToasterModal.svelte

@@ -3,8 +3,8 @@
 import { toast, Toaster } from '../ui/sonner';
 
 // Import Icons from Icons Folder
-import Close from '../../icons/Exclamation.svelte';
-import Checked from '../../icons/checked.svelte';
+import Exclamation 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,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,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 -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-[0px] !left-[0px] 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, {}, "ref" | "value">;
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };