sveltekit-ui 1.1.73 → 1.1.75

package/dist/Components/Code/index.svelte.js

@@ -4,6 +4,7 @@ import { create_unique_id, copy_to_clipboard, set_closurable } from "../../clien
 export function create_code_manager(config) {
   const id = create_unique_id(null, 20)
   let content = $derived(set_closurable(config?.content, null))
+  let selector_id = $derived(set_closurable(config?.selector_id, `code_${id}`))
   let copy_button_manager = $state(null)
 
   function init() {
@@ -11,6 +12,7 @@ export function create_code_manager(config) {
       type: "soft",
       is_uniform: true,
       support_icon: "clipboard",
+      aria_label: "Copy code",
       is_success_animation: true,
       on_click: () => copy_to_clipboard(typeof content == "string" ? content : JSON.stringify(content)),
     })
@@ -20,6 +22,9 @@ export function create_code_manager(config) {
 
   return {
     id,
+    get selector_id() {
+      return selector_id
+    },
     get copy_button_manager() {
       return copy_button_manager
     },

package/dist/Components/Color/index.svelte

@@ -5,31 +5,36 @@
 </script>
 
 {#if manager?.val}
-<div>
-  <TransparentBackground>
-    {#snippet content()}
-      <div
-        id={manager?.id}
-        class="color_overlay"
-        style="
-          background-color: {manager?.color}; 
-          width: {manager?.size}rem; 
-          height: {manager?.size}rem; 
-          border-radius: {manager?.border_radius}rem;
-        "
-      ></div>
-    {/snippet}
-  </TransparentBackground>
-  {#if manager?.is_show_details}
-    <div>
-      l: {manager?.val?.l ?? 24}, c: {manager?.val?.c ?? 24}, h: {manager?.val?.h ?? 24}, o: {manager?.val?.o ?? 24}, is_dark_theme_invert: {manager?.val?.is_dark_theme_invert}
-    </div>
-  {/if}
-</div>
+  <div>
+    <TransparentBackground>
+      {#snippet content()}
+        <div
+          id={manager?.id}
+          class="color_overlay"
+          role="img"
+          aria-label={manager?.aria_label}
+          style="
+            background-color: {manager?.color};
+            width: {manager?.size}rem;
+            height: {manager?.size}rem;
+            border-radius: {manager?.border_radius}rem;
+          "
+        ></div>
+      {/snippet}
+    </TransparentBackground>
+    {#if manager?.is_show_details}
+      <div>
+        l: {manager?.val?.l ?? 24}, c: {manager?.val?.c ?? 24}, h: {manager?.val?.h ?? 24}, o: {manager
+          ?.val?.o ?? 24}, is_dark_theme_invert: {manager?.val?.is_dark_theme_invert}
+      </div>
+    {/if}
+  </div>
 {:else}
   <div
     id={manager?.id}
     class="color_overlay"
+    role="img"
+    aria-label={manager?.aria_label}
     style="
       width: {manager?.size}rem; 
       height: {manager?.size}rem; 
@@ -39,13 +44,13 @@
       place-items: center;
     "
   >
-  <p style="font-size: 1.2rem;">null</p>
-</div>
+    <p style="font-size: 1.2rem;">null</p>
+  </div>
 {/if}
 
 <style>
   .color_overlay {
-    box-shadow: inset 0 0 0 .1rem var(--g15-t);
+    box-shadow: inset 0 0 0 0.1rem var(--g15-t);
     overflow: hidden;
   }
 </style>

package/dist/Components/Color/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/Color/index.svelte.js

@@ -1,5 +1,4 @@
-import { color_var } from "../../client/index.js"
-import { create_unique_id, set_closurable } from "../../client/index.js"
+import { color_var, create_unique_id, set_closurable } from "../../client/index.js"
 
 export function create_color_manager(config) {
   const id = create_unique_id(null, 20)
@@ -7,6 +6,12 @@ export function create_color_manager(config) {
   let is_show_details = $derived(set_closurable(config?.is_show_details, false))
   let size = $derived(set_closurable(config?.size, 3))
   let border_radius = $derived(set_closurable(config?.border_radius, 0.5))
+  let aria_label = $derived(
+    set_closurable(
+      config?.aria_label,
+      val ? `Color: lightness ${val?.l}, chroma ${val?.c}, hue ${val?.h}, opacity ${val?.o}` : "No color selected",
+    ),
+  )
 
   let color = $derived(val ? color_var(val?.l, val?.c, val?.h, val?.o, val?.is_dark_theme_invert) : "transparent")
 
@@ -27,5 +32,8 @@ export function create_color_manager(config) {
     get border_radius() {
       return border_radius
     },
+    get aria_label() {
+      return aria_label
+    },
   }
 }

package/dist/Components/ColorInput/ChromaPicker/index.svelte

@@ -7,24 +7,26 @@
 <div class="color_grid_container" style="--columns: {manager?.c_options.length};">
   {#if Array.isArray(manager?.c_options) && manager?.c_options.length > 0}
     {#each manager?.c_options as c_option}
-      <div
+      <button
+        type="button"
         id={`chroma_square_${manager?.id}_${c_option}`}
         class="color_box"
-        role="button"
         tabindex={manager?.val?.c == c_option ? 0 : -1}
+        aria-label={`Chroma ${c_option}`}
+        aria-pressed={manager?.val?.c == c_option}
         class:is_selected={manager?.val?.c == c_option}
         style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, c_option, manager?.val?.h ?? manager?.val_base?.h, 24, false)}`}"
         onclick={() => manager?.set_chroma(c_option)}
         onkeydown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            manager?.set_chroma(c_option)
-          } else if (event.key === "ArrowRight") {
-            manager?.set_chroma(c_option + 1)
+          if (event.key === "ArrowRight") {
+            event.preventDefault()
+            manager?.set_chroma(c_option, 1)
           } else if (event.key === "ArrowLeft") {
-            manager?.set_chroma(c_option - 1)
+            event.preventDefault()
+            manager?.set_chroma(c_option, -1)
           }
         }}
-      ></div>
+      ></button>
     {/each}
   {/if}
 </div>
@@ -42,6 +44,9 @@
     display: flex;
     width: 100%;
     aspect-ratio: 1;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
   }
   .is_selected {
     outline: 1px solid var(--g24);

package/dist/Components/ColorInput/ChromaPicker/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ColorInput/ColorPalette/index.svelte

@@ -11,28 +11,32 @@
   >
     {#each manager?.l_options as l_option}
       {#each manager?.h_options as h_option}
-        <div
+        <button
+          type="button"
           id={`lightness_hue_square_${manager?.id}_${l_option}_${h_option}`}
           class="color_box"
           class:is_selected={manager?.val?.l == l_option && manager?.val?.h == h_option}
-          role="button"
           tabindex={manager?.val?.l == l_option && manager?.val?.h == h_option ? 0 : -1}
+          aria-label={`Lightness ${l_option}, hue ${h_option}`}
+          aria-pressed={manager?.val?.l == l_option && manager?.val?.h == h_option}
           style="--bg_col: {`${color_var(l_option, manager?.val?.c ?? manager?.val_base?.c, h_option, 24, false)}`}"
           onclick={() => manager?.set_lightness_and_hue(l_option, h_option)}
           onkeydown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              manager?.set_lightness_and_hue(l_option, h_option)
-            } else if (event.key === "ArrowRight") {
-              manager?.set_lightness_and_hue(l_option, h_option + 1)
+            if (event.key === "ArrowRight") {
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 0, 1)
             } else if (event.key === "ArrowLeft") {
-              manager?.set_lightness_and_hue(l_option, h_option - 1)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 0, -1)
             } else if (event.key === "ArrowDown") {
-              manager?.set_lightness_and_hue(l_option + 1, h_option)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 1, 0)
             } else if (event.key === "ArrowUp") {
-              manager?.set_lightness_and_hue(l_option - 1, h_option)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, -1, 0)
             }
           }}
-        ></div>
+        ></button>
       {/each}
     {/each}
   </div>
@@ -54,6 +58,9 @@
     aspect-ratio: 1;
     align-items: center;
     justify-content: center;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
   }
   .is_selected {
     outline: 1px solid var(--g24);

package/dist/Components/ColorInput/ColorPalette/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ColorInput/OpacityPicker/index.svelte

@@ -12,23 +12,25 @@
         <div class="color_grid_container" style="--columns: {manager?.o_options.length};">
           {#each manager?.o_options as o_option}
             <div class="opacity_bg" class:is_selected={manager?.val?.o == o_option}>
-              <div
+              <button
+                type="button"
                 id={`opacity_square_${manager?.id}_${o_option}`}
                 class="color_box"
-                role="button"
                 tabindex={manager?.val?.o == o_option ? 0 : -1}
+                aria-label={`Opacity ${o_option}`}
+                aria-pressed={manager?.val?.o == o_option}
                 style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, manager?.val?.c?? manager?.val_base?.c, manager?.val?.h?? manager?.val_base?.h, o_option, false)}`}"
                 onclick={() => manager?.set_opacity(o_option)}
                 onkeydown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    manager?.set_opacity(o_option)
-                  } else if (event.key === "ArrowRight") {
-                    manager?.set_opacity(o_option + 1)
+                  if (event.key === "ArrowRight") {
+                    event.preventDefault()
+                    manager?.set_opacity(o_option, 1)
                   } else if (event.key === "ArrowLeft") {
-                    manager?.set_opacity(o_option - 1)
+                    event.preventDefault()
+                    manager?.set_opacity(o_option, -1)
                   }
                 }}
-              ></div>
+              ></button>
             </div>
           {/each}
         </div>
@@ -44,7 +46,7 @@
     overflow: hidden;
   }
   .color_grid_container {
-    background-color: none;
+    background-color: transparent;
     display: grid;
     grid-template-columns: repeat(var(--columns), 1fr);
   }
@@ -60,6 +62,9 @@
     background-color: var(--bg_col);
     height: 100%;
     width: 100%;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
   }
   .is_selected {
     outline: 1px solid var(--g24);

package/dist/Components/ColorInput/OpacityPicker/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ColorInput/ShowcasePicker/index.svelte

@@ -13,11 +13,11 @@
       <div
         class="color_overlay"
         style="--bg_col: {`${color_var(
-          manager?.val?.l,
-          manager?.val?.c,
-          manager?.val?.h,
-          manager?.val?.o,
-          manager?.val?.is_dark_theme_invert
+          manager?.val?.l ?? manager?.val_base?.l,
+          manager?.val?.c ?? manager?.val_base?.c,
+          manager?.val?.h ?? manager?.val_base?.h,
+          manager?.val?.o ?? manager?.val_base?.o,
+          manager?.val?.is_dark_theme_invert ?? manager?.val_base?.is_dark_theme_invert
         )}`}"
       ></div>
     {/snippet}
@@ -29,17 +29,25 @@
       <div class="swatch_bg" style="background-color: var(--g24); border: 1px solid var(--shadow5-t);">
         <div
           class="swatch"
-          style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, false)}`}"
+          style="--bg_col: {`${color_var(
+            manager?.val?.l ?? manager?.val_base?.l,
+            manager?.val?.c ?? manager?.val_base?.c,
+            manager?.val?.h ?? manager?.val_base?.h,
+            manager?.val?.o ?? manager?.val_base?.o,
+            false
+          )}`}"
         ></div>
       </div>
       <div class="swatch_bg" style="background-color: var(--g1); border: 1px solid var(--shadow5-t);">
         <div
           class="swatch"
           style="--bg_col: {`${color_var(
-            manager?.val?.is_dark_theme_invert ? 25 - manager?.val?.l : manager?.val?.l,
-            manager?.val?.c,
-            manager?.val?.h,
-            manager?.val?.o,
+            (manager?.val?.is_dark_theme_invert ?? manager?.val_base?.is_dark_theme_invert)
+              ? 25 - (manager?.val?.l ?? manager?.val_base?.l)
+              : manager?.val?.l ?? manager?.val_base?.l,
+            manager?.val?.c ?? manager?.val_base?.c,
+            manager?.val?.h ?? manager?.val_base?.h,
+            manager?.val?.o ?? manager?.val_base?.o,
             false
           )}`}"
         ></div>

package/dist/Components/ColorInput/ShowcasePicker/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ColorInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ColorInput/index.svelte.js

@@ -39,9 +39,10 @@ export function create_color_input_manager(config) {
   function order_num_options(input) {
     let res = deep_copy(input)
     if (Array.isArray(res)) {
-      return res.sort((a, b) => a - b)
+      const normalized_options = [...new Set(res.map(Number).filter(Number.isFinite))].sort((a, b) => a - b)
+      if (normalized_options.length) return normalized_options
     }
-    return null
+    return [...base_range]
   }
 
   let css_val = $derived(
@@ -82,8 +83,9 @@ export function create_color_input_manager(config) {
   }
 
   function get_value_in_range(value, custom_range, index_change = 1) {
+    if (!Array.isArray(custom_range) || custom_range.length === 0) return value
     const index = custom_range.findIndex((h) => h === value)
-    const new_index = index + index_change
+    const new_index = (index < 0 ? 0 : index) + index_change
     if (new_index > -1 && new_index < custom_range.length) {
       return custom_range[new_index]
     } else {
@@ -118,7 +120,7 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let chroma_square_el = document?.querySelector(`#chroma_square_${id}_${c_to_use}`)
+    let chroma_square_el = typeof document !== "undefined" ? document.querySelector(`#chroma_square_${id}_${c_to_use}`) : null
     if (chroma_square_el) {
       chroma_square_el.focus()
     }
@@ -138,7 +140,7 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    if (config?.on_change && is_ignore_on_change) {
+    if (config?.on_change && !is_ignore_on_change) {
       config?.on_change(val)
     }
   }
@@ -154,7 +156,8 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let opacity_square_el = document?.querySelector(`#opacity_square_${id}_${o_to_use}`)
+    let opacity_square_el =
+      typeof document !== "undefined" ? document.querySelector(`#opacity_square_${id}_${o_to_use}`) : null
     if (opacity_square_el) {
       opacity_square_el.focus()
     }
@@ -163,10 +166,13 @@ export function create_color_input_manager(config) {
     }
   }
 
-  function set_lightness_and_hue(l_input, h_input) {
-    set_lightness(l_input, 0, true)
-    set_hue(h_input, 0, true)
-    let color_square_el = document?.querySelector(`#lightness_hue_square_${id}_${val?.l}_${val?.h}`)
+  function set_lightness_and_hue(l_input, h_input, l_change = 0, h_change = 0) {
+    set_lightness(l_input, l_change, true)
+    set_hue(h_input, h_change, true)
+    let color_square_el =
+      typeof document !== "undefined"
+        ? document.querySelector(`#lightness_hue_square_${id}_${val?.l}_${val?.h}`)
+        : null
     if (color_square_el) {
       color_square_el.focus()
     }
@@ -182,10 +188,16 @@ export function create_color_input_manager(config) {
     }
   }
 
+  function set_null() {
+    val = null
+    is_dark_theme_invert_checkbox_manager.set_val(val_base?.is_dark_theme_invert)
+    if (typeof config?.on_change === "function") config.on_change(null)
+  }
+
   function init(config) {
-    val_base.is_dark_theme_invert = config?.is_dark_theme_invert
+    val_base.is_dark_theme_invert = config?.is_dark_theme_invert ?? true
     is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
-      val: config?.is_dark_theme_invert,
+      val: config?.is_dark_theme_invert ?? true,
       type: "toggle",
       on_change: (input) => set_is_dark_theme_invert(input),
     })
@@ -202,6 +214,7 @@ export function create_color_input_manager(config) {
       is_compressed: true,
       pl: 0.3,
       pr: 0.3,
+      aria_label: "Choose color",
       popover_target: () => `popover_${popover_manager?.id}`,
     })
     finish_button_manager = create_button_manager({
@@ -219,6 +232,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase lightness",
       on_click: () => set_lightness(val?.l ?? val_base?.l, 1),
     })
     lightness_down_button_manager = create_button_manager({
@@ -230,6 +244,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease lightness",
       on_click: () => set_lightness(val?.l ?? val_base?.l, -1),
     })
     chroma_up_button_manager = create_button_manager({
@@ -240,6 +255,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase chroma",
       on_click: () => set_chroma(val?.c ?? val_base?.c, 1),
     })
     chroma_down_button_manager = create_button_manager({
@@ -251,6 +267,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease chroma",
       on_click: () => set_chroma(val?.c ?? val_base?.c, -1),
     })
     hue_up_button_manager = create_button_manager({
@@ -261,6 +278,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase hue",
       on_click: () => set_hue(val?.h ?? val_base?.h, 1),
     })
     hue_down_button_manager = create_button_manager({
@@ -272,6 +290,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease hue",
       on_click: () => set_hue(val?.h ?? val_base?.h, -1),
     })
     opacity_up_button_manager = create_button_manager({
@@ -282,6 +301,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase opacity",
       on_click: () => set_opacity(val?.o ?? val_base?.o, 1),
     })
     opacity_down_button_manager = create_button_manager({
@@ -293,13 +313,14 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease opacity",
       on_click: () => set_opacity(val?.o ?? val_base?.o, -1),
     })
     set_null_button_manager = create_button_manager({
       type: "outlined",
       text: "Set null",
       font_size: 1.2,
-      on_click: () => (val = null),
+      on_click: () => set_null(),
     })
     set_val(config?.val)
   }
@@ -381,6 +402,7 @@ export function create_color_input_manager(config) {
     set_opacity,
     set_lightness_and_hue,
     set_is_dark_theme_invert,
+    set_null,
     finish,
   }
 }

package/dist/Components/ConditionsInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/ConditionsInput/index.svelte.js

@@ -70,7 +70,6 @@ export function create_conditions_input_manager(config) {
     if (val?.type == "operator" && Array.isArray(val?.conditions) && val?.conditions.length > 0) {
       for (let i = 0; i < val?.conditions.length; i++) {
         const input_type = predicate_options.find((h) => h?.key == val?.conditions?.[i]?.predicate)?.input
-        console.log("predicate_options", predicate_options, input_type)
         conditions_loc.push({
           input_type: input_type,
           x_button_manager: create_button_manager({
@@ -115,7 +114,6 @@ export function create_conditions_input_manager(config) {
   }
 
   function add_condition() {
-    console.log("add_condition", val)
     val.conditions = [
       ...val?.conditions,
       {
@@ -125,7 +123,6 @@ export function create_conditions_input_manager(config) {
       },
     ]
     set_conditions()
-    console.log("add_condition2", val)
   }
 
   function init(config) {

package/dist/Components/Confetti/index.svelte

@@ -1,11 +1,17 @@
 <script>
   let { manager } = $props()
+
+  $effect(() => {
+    const current_manager = manager
+    return () => current_manager?.destroy?.()
+  })
 </script>
 
 {#if manager?.is_show}
   <div
     class="container"
     class:full={manager?.type == "full"}
+    aria-hidden="true"
     style="
     --border_radius: {manager?.border_radius}rem;
     --fall_distance: {manager?.fall_distance};
@@ -13,7 +19,7 @@
     --transition_duration: {manager?.transition_duration}ms;
     --x_spread: {manager?.x_spread}"
   >
-    {#each manager?.confetti_prepped as item}
+    {#each manager?.confetti_prepped as item, i (`${item?.rotation_xyz}_${i}`)}
       <div
         class="item"
         style="
@@ -34,6 +40,7 @@
   .container {
     position: relative;
     z-index: 100;
+    pointer-events: none;
   }
   .full {
     position: fixed;
@@ -95,4 +102,11 @@
     animation: rotate var(--transition_duration) var(--transition_delay) 1 linear;
     border-radius: var(--border_radius);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .item,
+    .item::before {
+      animation-duration: 1ms;
+      animation-delay: 0ms;
+    }
+  }
 </style>

package/dist/Components/Confetti/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};