sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/ChartInput/DisplayNav/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/ChartInput/EditPanel/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/ChartInput/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/ChartInput/manager.svelte.d.ts

@@ -0,0 +1,34 @@
+export function create_chart_input_manager(config: any): {
+    readonly val: {
+        id: any;
+        x_axis_type: any;
+        x_axis_title: any;
+        shown_start_x: any;
+        shown_end_x: any;
+        min_x_scrollable: any;
+        max_x_scrollable: any;
+        frames: {
+            shown_y_axis_index: any;
+            aspect_ratio: any;
+            shared_y_axiss: {
+                y_axis_title: any;
+                y_axis_type: any;
+                bottom_padding_pd: any;
+                top_padding_pd: any;
+                datasets: {
+                    colors: any;
+                    dataset_id: any;
+                    keys: any;
+                    name: any;
+                    period_x: any;
+                    type: any;
+                }[];
+            }[];
+        }[];
+    };
+    readonly chart_builder_popover_manager: null;
+    readonly chart_builder_popover_button_manager: null;
+    readonly path_breadcrumbs_manager: null;
+    readonly chart_prepped: null;
+    readonly finish_button_manager: null;
+};

package/dist/Components/ChartInput/{index.svelte.js → manager.svelte.js}

@@ -1,10 +1,10 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_color_input_manager } from "../ColorInput/index.svelte.js"
-import { create_breadcrumbs_manager } from "../Breadcrumbs/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_slider_manager } from "../Slider/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_color_input_manager } from "../ColorInput/manager.svelte.js"
+import { create_breadcrumbs_manager } from "../Breadcrumbs/manager.svelte.js"
 import { create_unique_id, deep_copy } from "../../client/index.js"
 
 export function create_chart_input_manager(config) {
@@ -66,12 +66,10 @@ export function create_chart_input_manager(config) {
   }
 
   function remove_frame(i) {
-    console.log("remove_frame", i)
     chart_prepped = get_chart_prepped({ ...chart_prepped, frames: chart_prepped.frames.filter((_, idx) => idx !== i) })
   }
 
   function add_frame() {
-    console.log("add_frame", chart_prepped?.frames, frame_base)
     chart_prepped = get_chart_prepped({ ...chart_prepped, frames: [...chart_prepped?.frames, frame_base] })
   }
 
@@ -135,14 +133,12 @@ export function create_chart_input_manager(config) {
   }
 
   function remove_shared_y_axis(i) {
-    console.log("remove_frame", i)
     let chart_copy = deep_copy(chart_prepped)
     chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss.splice(i, 1)
     chart_prepped = get_chart_prepped(chart_copy)
   }
 
   function add_shared_y_axis() {
-    console.log("add_shared_y_axis")
     let chart_copy = deep_copy(chart_prepped)
     chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss = [
       ...chart_copy.frames[path_breadcrumbs_manager?.val?.[0]].shared_y_axiss,
@@ -169,14 +165,12 @@ export function create_chart_input_manager(config) {
   }
 
   function remove_dataset(path) {
-    console.log("remove_dataset", path)
     let chart_copy = deep_copy(chart_prepped)
     chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets.splice(path?.[2], 1)
     chart_prepped = get_chart_prepped(chart_copy)
   }
 
   function add_dataset(path) {
-    console.log("add_dataset")
     let chart_copy = deep_copy(chart_prepped)
     chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets = [
       ...chart_copy.frames[path[0]].shared_y_axiss[path[1]].datasets,
@@ -333,8 +327,8 @@ export function create_chart_input_manager(config) {
             if (Array.isArray(input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets)) {
               for (let g = 0; g < input?.frames?.[i]?.shared_y_axiss?.[j].datasets.length; g++) {
                 let name_text_input_manager = $state(null)
-                let dataset_type_dropdown_manager = $state(null)
-                let dataset_id_dropdown_manager = $state(null)
+                let dataset_type_dropdown_manager = null
+                let dataset_id_dropdown_manager = null
                 let dataset_period_dropdown_manager = $state(null)
                 let add_dataset_color_button_manager = $state(null)
                 name_text_input_manager = create_text_input_manager({
@@ -363,7 +357,7 @@ export function create_chart_input_manager(config) {
                   options: period_options,
                   val: input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.period_x,
                 })
-                let colors_input = $state([])
+                const initial_colors_input = []
                 if (Array.isArray(input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.colors)) {
                   for (let color of input?.frames?.[i]?.shared_y_axiss?.[j]?.datasets?.[g]?.colors) {
                     const id = create_unique_id(null, 20)
@@ -376,7 +370,7 @@ export function create_chart_input_manager(config) {
                       },
                     })
                     let color_input_manager = create_color_input_manager({ val: color })
-                    colors_input.push({
+                    initial_colors_input.push({
                       id,
                       get color_input_manager() {
                         return color_input_manager
@@ -387,6 +381,7 @@ export function create_chart_input_manager(config) {
                     })
                   }
                 }
+                let colors_input = $state(initial_colors_input)
                 add_dataset_color_button_manager = create_button_manager({
                   type: "outlined",
                   support_icon: "plus",
@@ -633,7 +628,6 @@ export function create_chart_input_manager(config) {
       l: 1,
       c: 1,
       on_click: () => {
-        console.log("finish", val)
         if (typeof config?.on_finish == "function") {
           config?.on_finish(val)
         }
@@ -641,9 +635,6 @@ export function create_chart_input_manager(config) {
       },
     })
     chart_prepped = get_chart_prepped(config?.chart)
-    setTimeout(() => {
-      console.log("chart_prepped_init", deep_copy(chart_prepped))
-    })
   }
 
   init(config)

package/dist/Components/Checkbox/index.svelte

@@ -11,10 +11,10 @@
   {#if manager?.label || manager?.error_message}
     <div style="display: inline-flex;">
       {#if manager?.label}
-        <p class="label">{manager?.label}:</p>
+        <label class="label" for={manager?.id}>{manager?.label}:</label>
       {/if}
       {#if manager?.error_message}
-        <p class="error_text">{manager?.error_message}</p>
+        <p id={`checkbox_error_${manager?.id}`} class="error_text">{manager?.error_message}</p>
       {/if}
     </div>
   {/if}
@@ -40,18 +40,16 @@
           id={manager?.id}
           name={manager?.name}
           required={manager?.is_required}
-          readonly={manager?.is_read_only}
           style="min-height: {manager?.size}rem; min-width: {manager?.size}rem;"
           class:dark_theme_input={manager?.type == "dark_theme"}
           type="checkbox"
-          disabled={manager?.is_disabled}
+          disabled={manager?.is_disabled || manager?.is_read_only || manager?.is_loading}
           checked={manager?.val_bool}
           tabindex="0"
-          onkeydown={(e) => {
-            if (e.key === "Enter") {
-              manager.set_val_from_bool(!manager?.val_bool, true)
-            }
-          }}
+          aria-readonly={manager?.is_read_only}
+          aria-invalid={!!manager?.error_message}
+          aria-label={manager?.aria_label}
+          aria-describedby={manager?.error_message ? `checkbox_error_${manager?.id}` : undefined}
           onclick={(e) => manager?.set_val_from_bool(e?.target?.checked, true)}
         />
         {#if manager?.type == "checkbox"}

package/dist/Components/Checkbox/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/Checkbox/manager.svelte.d.ts

@@ -0,0 +1,97 @@
+export function create_checkbox_manager(config: any): {
+    id: string;
+    readonly type: any;
+    readonly val_initial: null;
+    readonly val: null;
+    readonly val_bool: boolean;
+    readonly off_val: any;
+    readonly on_val: any;
+    readonly name: any;
+    readonly label: any;
+    readonly aria_label: any;
+    readonly color: any;
+    readonly is_required: any;
+    readonly is_read_only: any;
+    readonly is_disabled: any;
+    readonly is_loading: any;
+    readonly error_message: any;
+    readonly size: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly check_icon_manager: {
+        id: any;
+        readonly icon_id: any;
+        readonly deg: any;
+        readonly deg_spring: any;
+        readonly color: any;
+        readonly color_alt: any;
+        readonly fill: any;
+        readonly size: any;
+        readonly sw: any;
+        readonly ml: any;
+        readonly mr: any;
+        readonly mt: any;
+        readonly mb: any;
+        readonly sort_state: any;
+        readonly is_shimmy_infinite: any;
+        readonly is_shimmyable: any;
+        readonly movement_stiffness: any;
+        readonly movement_damping: any;
+        readonly is_shimmying: boolean;
+        trigger_shimmy: () => void;
+        set_attributes: (input: any) => void;
+    };
+    readonly moon_icon_manager: {
+        id: any;
+        readonly icon_id: any;
+        readonly deg: any;
+        readonly deg_spring: any;
+        readonly color: any;
+        readonly color_alt: any;
+        readonly fill: any;
+        readonly size: any;
+        readonly sw: any;
+        readonly ml: any;
+        readonly mr: any;
+        readonly mt: any;
+        readonly mb: any;
+        readonly sort_state: any;
+        readonly is_shimmy_infinite: any;
+        readonly is_shimmyable: any;
+        readonly movement_stiffness: any;
+        readonly movement_damping: any;
+        readonly is_shimmying: boolean;
+        trigger_shimmy: () => void;
+        set_attributes: (input: any) => void;
+    };
+    readonly sun_icon_manager: {
+        id: any;
+        readonly icon_id: any;
+        readonly deg: any;
+        readonly deg_spring: any;
+        readonly color: any;
+        readonly color_alt: any;
+        readonly fill: any;
+        readonly size: any;
+        readonly sw: any;
+        readonly ml: any;
+        readonly mr: any;
+        readonly mt: any;
+        readonly mb: any;
+        readonly sort_state: any;
+        readonly is_shimmy_infinite: any;
+        readonly is_shimmyable: any;
+        readonly movement_stiffness: any;
+        readonly movement_damping: any;
+        readonly is_shimmying: boolean;
+        trigger_shimmy: () => void;
+        set_attributes: (input: any) => void;
+    };
+    readonly is_nullable: any;
+    readonly toggle_null_button_manager: null;
+    set_val: (val_input: any) => void;
+    set_val_from_bool: (val_bool_input: any, is_trigger_on_change?: boolean) => void;
+    handle_on_hover_change: (input: any) => void;
+};

package/dist/Components/Checkbox/{index.svelte.js → manager.svelte.js}

@@ -1,6 +1,6 @@
 import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 
 export function create_checkbox_manager(config) {
   let id = create_unique_id(null, 20)
@@ -10,6 +10,12 @@ export function create_checkbox_manager(config) {
   let val_bool = $state(false)
   let label = $derived(set_closurable(config?.label, null))
   let name = $derived(set_closurable(config?.name, "checkbox"))
+  let aria_label = $derived(
+    set_closurable(
+      config?.aria_label,
+      label ?? (type == "dark_theme" ? "Toggle dark theme" : name == "checkbox" ? "Toggle option" : name),
+    ),
+  )
   let on_val = $derived(set_closurable(config?.on_val, true))
   let off_val = $derived(set_closurable(config?.off_val, false))
   let color = $derived(set_closurable_color(config?.color, "var(--primary-t)"))
@@ -81,9 +87,6 @@ export function create_checkbox_manager(config) {
     val_initial = set_closurable(config?.val) ?? null
     val = set_closurable(config?.val) ?? null
     val_bool = val == on_val
-    if (error_message) {
-      handle_error_trigger()
-    }
     toggle_null_button_manager = create_button_manager({
       type: "outlined",
       font_size: 1.2,
@@ -123,6 +126,9 @@ export function create_checkbox_manager(config) {
     get label() {
       return label
     },
+    get aria_label() {
+      return aria_label
+    },
     get color() {
       return color
     },

package/dist/Components/Code/index.svelte

@@ -16,7 +16,8 @@
       </p>
       <Button manager={manager?.copy_button_manager} />
     </div>
-    <pre><code id={manager?.selector_id} style="padding: .5rem 0;"
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex (scrollable code must be keyboard reachable) -->
+    <pre tabindex="0" aria-label={`${manager?.language ?? "Code"} sample`}><code id={manager?.selector_id} style="padding: .5rem 0;"
         >{typeof manager?.content == "string" ? manager?.content : JSON.stringify(manager?.content, null, 2)}</code
       ></pre>
   </div>

package/dist/Components/Code/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/Code/manager.svelte.d.ts

@@ -0,0 +1,7 @@
+export function create_code_manager(config: any): {
+    id: string;
+    readonly selector_id: any;
+    readonly copy_button_manager: null;
+    readonly language: any;
+    readonly content: any;
+};

package/dist/Components/Code/{index.svelte.js → manager.svelte.js}

@@ -1,9 +1,10 @@
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 import { create_unique_id, copy_to_clipboard, set_closurable } from "../../client/index.js"
 
 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/manager.svelte.d.ts

@@ -0,0 +1,9 @@
+export function create_color_manager(config: any): {
+    id: string;
+    readonly val: any;
+    readonly color: string;
+    readonly is_show_details: any;
+    readonly size: any;
+    readonly border_radius: any;
+    readonly aria_label: any;
+};

package/{src/lib/Components/Color/index.svelte.js → dist/Components/Color/manager.svelte.js}

@@ -1,5 +1,4 @@
-import { color_var } from "$lib/client/index.js"
-import { create_unique_id, set_closurable } from "$lib/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;
+};