odj-svelte-ui 0.2.0 → 0.2.1

package/README.md

@@ -18,11 +18,20 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
   - `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
   - `Input:Search` has a better X button for Chromium browsers;
   - `Radio` has a new design and it's animated;
+  - `Header` has blur, some small design tweaks and a fixed design for the menu on mobile;
+  - `Dropdown` is more modern;
+  - `Avatar` has better borders;
+  - `Sidebar` has better hover colors and some other design tweaks, like border radius;
 - `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
 - The `Tooltip` component received a rework;
 - `Modal` has <kbd>Esc</kbd> to close again;
 - `Button` has now a built-in loading state and can be controlled by the `loading` prop;
 - `Textarea` can autoexpand as user type, control this by `autoexpand` and `maxRows` props;
+- `Dropdown` now locks the page scroll and you can disable this default behaviour setting `lock` to `false`;
+- `Avatar` supports a `fallback` snippet to show when the image is loading or can't be loaded;
+- `Sidebar` can not be opened or closed anymore. If you want this behaviour, this component should be inside the `Drawer` component. On mobile, `Sidebar` will look like tabs;
+- `SidebarButton` has been removed. Please use the `Drawer` component to maintain the old sidebar behaviour;
+
 
 ## Installation
 

package/dist/avatar/Avatar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Indicator } from "..";
-  import { type AvatarProps as Props, avatar } from ".";
+  import { onMount } from "svelte";
+  import { type AvatarProps as Props, avatar, fallback as fallbackTheme } from ".";
 
-  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: Props = $props();
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, fallback, fallbackClass: fallbackClassName, ...restProps }: Props = $props();
 
-  dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
+  dot = dot && { placement: "top-right", color: "red", size: "lg", ...dot };
 
   let avatarClass = $derived(
     avatar({
@@ -15,12 +16,43 @@
       className
     })
   );
+  let fallbackClass = $derived(
+    fallbackTheme({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      className: fallbackClassName
+    })
+  );
+
+  let imageState: "loading" | "loaded" | "error" = $state("loading");
+  onMount(() => {
+    const img = new Image();
+    if (!src) return;
+
+    img.src = src;
+    imageState = "loading";
+
+    img.onload = () => {
+      imageState = "loaded";
+    };
+    img.onerror = () => {
+      imageState = "error";
+    };
+  });
 </script>
 
 {#if !src || !!href || children || dot}
   <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
-      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+      {#if fallback && imageState !== "loaded"}
+        <div class={fallbackClass}>
+          {@render fallback()}
+        </div>
+      {:else}
+        <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+      {/if}
     {:else if children}
       {@render children()}
     {:else}
@@ -32,6 +64,10 @@
       <Indicator border offset={cornerStyle === "circular" ? true : false} {...dot} />
     {/if}
   </svelte:element>
+{:else if fallback && imageState !== "loaded"}
+  <div class={fallbackClass}>
+    {@render fallback()}
+  </div>
 {:else}
   <img {alt} {src} {...restProps} class={avatarClass} />
 {/if}
@@ -40,7 +76,8 @@
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@props: children: any;
+@props:children: any;
+@props:fallback: any;
 @props:src: any;
 @props:href: any;
 @props:target: any;
@@ -49,6 +86,7 @@
 @props:stacked: any = false;
 @props:dot: any;
 @props:class: string;
+@props:fallbackClass: string;
 @props:alt: any;
 @props:size: any = "md";
 @props:onclick: any;

package/dist/avatar/Avatar.svelte.d.ts

@@ -2,7 +2,8 @@ import { type AvatarProps as Props } from ".";
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
- * @props: children: any;
+ * @props:children: any;
+ * @props:fallback: any;
  * @props:src: any;
  * @props:href: any;
  * @props:target: any;
@@ -11,6 +12,7 @@ import { type AvatarProps as Props } from ".";
  * @props:stacked: any = false;
  * @props:dot: any;
  * @props:class: string;
+ * @props:fallbackClass: string;
  * @props:alt: any;
  * @props:size: any = "md";
  * @props:onclick: any;

package/dist/avatar/index.d.ts

@@ -1,4 +1,4 @@
 import type { AvatarProps } from "./type";
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar, type AvatarProps };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback, type AvatarProps };

package/dist/avatar/index.js

@@ -1,3 +1,3 @@
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback };

package/dist/avatar/theme.d.ts

@@ -18,7 +18,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -98,7 +98,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -139,4 +139,145 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         xl: string;
     };
 }>, unknown, unknown, undefined>>;
-export { avatar };
+declare const fallback: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { avatar, fallback };

package/dist/avatar/theme.js

@@ -1,17 +1,17 @@
 import { tv } from "tailwind-variants";
 const avatar = tv({
-    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    base: "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300",
     variants: {
         cornerStyle: {
             rounded: "rounded-sm",
             circular: "rounded-full"
         },
         border: {
-            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
             false: ""
         },
         stacked: {
-            true: "border-2 -ms-4 border-white dark:border-gray-800",
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
             false: ""
         },
         size: {
@@ -29,4 +29,34 @@ const avatar = tv({
         size: "md"
     }
 });
-export { avatar };
+const fallback = tv({
+    base: "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});
+export { avatar, fallback };

package/dist/avatar/type.d.ts

@@ -12,5 +12,7 @@ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     onclick?: () => void;
     border?: boolean;
+    fallback?: Snippet;
+    fallbackClass?: string;
 }
 export { type AvatarProps };

package/dist/dropdown/Dropdown.svelte

@@ -5,7 +5,7 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
-  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, activeUrl = "", ...restProps }: Props = $props();
+  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params = { y: -5 }, transition = fly, activeUrl = "", lock = true, ...restProps }: Props = $props();
 
   const { base, backdrop } = $derived(dropdown());
   const activeUrlStore = writable("");
@@ -14,6 +14,17 @@
   $effect(() => {
     activeUrlStore.set(activeUrl ?? "");
   });
+
+  $effect(() => {
+    if (dropdownStatus && lock) {
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollWidth}px`;
+    } else if (lock) {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+  });
 </script>
 
 <!-- Dropdown menu -->

package/dist/dropdown/DropdownLi.svelte

@@ -2,12 +2,11 @@
   import { getContext } from "svelte";
   import { type DropdownLiProps as Props, dropdownli } from "./";
 
-  let { aClass, children, href, activeClass, liClass, ...restProps }: Props = $props();
+  let { aClass, children, href, activeClass, liClass, custom = false, ...restProps }: Props = $props();
 
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
   let sidebarUrl = $state("");
   activeUrlStore.subscribe((value) => {
-    // console.log('value: ', value)
     sidebarUrl = value;
   });
   let active = $state(false);
@@ -23,8 +22,14 @@
     <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
       {@render children()}
     </a>
+  {:else if custom}
+    <button {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </button>
   {:else}
-    {@render children()}
+    <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </a>
   {/if}
 </li>
 
@@ -37,4 +42,5 @@
 @props:href: any;
 @props:activeClass: any;
 @props:liClass: any;
+@props:custom: boolean;
 -->

package/dist/dropdown/DropdownLi.svelte.d.ts

@@ -7,6 +7,7 @@ import { type DropdownLiProps as Props } from "./";
  * @props:href: any;
  * @props:activeClass: any;
  * @props:liClass: any;
+ * @props:custom: boolean;
  */
 declare const DropdownLi: import("svelte").Component<Props, {}, "">;
 type DropdownLi = ReturnType<typeof DropdownLi>;

package/dist/dropdown/theme.d.ts

@@ -43,9 +43,9 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export declare const dropdownli: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -91,4 +91,4 @@ export declare const dropdownli: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -1,25 +1,25 @@
 import { tv } from "tailwind-variants";
 export const dropdown = tv({
     slots: {
-        base: "z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700",
+        base: "z-10 w-max mt-2 rounded-xl shadow-lg bg-white dark:bg-dark-surface-700 text-light-surface-700 dark:text-dark-surface-200 border border-light-surface-200 dark:border-dark-surface-600 divide-y divide-light-surface-100 dark:divide-dark-surface-600 overflow-hidden",
         backdrop: "fixed top-0 start-0 w-full h-full"
     }
 });
 export const dropdowndivider = tv({
-    base: "my-1 h-px bg-gray-100 dark:bg-gray-500"
+    base: "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600"
 });
 export const dropdownHeader = tv({
-    base: "px-4 py-3 text-sm text-gray-900 dark:text-white"
+    base: "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white"
 });
 export const dropdownFooter = tv({
-    base: "overflow-hidden rounded-b-lg py-1"
+    base: "overflow-hidden rounded-b-xl"
 });
 export const dropdownli = tv({
     slots: {
-        anchor: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
-        activeAnchor: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        anchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm hover:bg-light-surface-200/70 dark:hover:bg-dark-surface-600 hover:text-light-surface-900 dark:hover:text-white",
+        activeAnchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm bg-primary-700 dark:bg-primary-600 text-white dark:text-white hover:bg-primary-800 dark:hover:bg-primary-700"
     }
 });
 export const dropdownul = tv({
-    base: "py-2 text-sm text-gray-700 dark:text-gray-200"
+    base: "p-1 flex flex-col"
 });

package/dist/dropdown/type.d.ts

@@ -13,6 +13,7 @@ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     params?: ParamsType;
     transition?: TransitionFunc;
     activeUrl?: string;
+    lock?: boolean;
 }
 interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
     class?: string;
@@ -29,6 +30,7 @@ interface DropdownLiProps extends HTMLAnchorAttributes {
     href?: string;
     activeClass?: string;
     liClass?: string;
+    custom?: boolean;
 }
 interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
     children: Snippet;

package/dist/forms/checkbox/Checkbox.svelte

@@ -2,24 +2,53 @@
   import Label from "../label/Label.svelte";
   import { type CheckboxProps as Props, checkbox } from ".";
 
-  let { children, aria_describedby, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classLabel, indeterminate, class: className, ...restProps }: Props = $props();
+  let { children, aria_describedby, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classLabel, indeterminate, class: className, disabled = false, ...restProps }: Props = $props();
 
   const { base, label } = $derived(checkbox({ color, tinted, custom, rounded, inline }));
 </script>
 
+<style> 
+  [type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
+    background-color: currentColor;
+    border-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 0.55em 0.55em;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .dark [type="radio"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    background-size: 1em 1em;
+  }
+
+  [type="checkbox"]:indeterminate {
+    background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
+    background-color: currentColor;
+    border-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 0.55em 0.55em;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+</style>
+
 {#if choices.length > 0}
   {#each choices as { value, checkboxLabel }, i}
-    <Label class={label({ class: classLabel })} for={`checkbox-${i}`}>
+    <Label class={label({ class: classLabel })} for={`checkbox-${i}`} {disabled}>
       {checkboxLabel}
-      <input id={`checkbox-${i}`} type="checkbox" {value} bind:group {...restProps} class={base({ class: className })} />
+      <input id={`checkbox-${i}`} type="checkbox" {value} bind:group {disabled} {...restProps} class={base({ class: className })} />
       {#if children}
         {@render children()}
       {/if}
     </Label>
   {/each}
 {:else}
-  <Label class={label({ class: classLabel })}>
-    <input type="checkbox" bind:checked aria-describedby={aria_describedby} {indeterminate} {...restProps} class={base({ class: className })} />
+  <Label class={label({ class: classLabel })} {disabled}>
+    <input type="checkbox" bind:checked aria-describedby={aria_describedby} {indeterminate} {disabled} {...restProps} class={base({ class: className })} />
     {#if children}
       {@render children()}
     {/if}