sveltekit-ui 1.1.74 → 1.1.75

package/dist/Components/Breadcrumbs/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/Breadcrumbs/index.svelte.js

@@ -1,5 +1,6 @@
 import { create_button_manager } from "../Button/index.svelte.js"
 import { create_icon_manager } from "../Icon/index.svelte.js"
+import { deep_copy } from "../../client/index.js"
 
 export function create_breadcrumbs_manager(config) {
   let val = $state(null)
@@ -8,7 +9,12 @@ export function create_breadcrumbs_manager(config) {
   let breadcrumb_managers = $state(null)
 
   function set_val(input) {
-    val = JSON.parse(JSON.stringify(input))
+    try {
+      const copied_input = deep_copy(input)
+      val = Array.isArray(copied_input) ? copied_input : []
+    } catch {
+      val = []
+    }
     let breadcrumb_managers_loc = []
     if (Array.isArray(val) && val.length > 0) {
       for (let i = 0; i < val.length; i++) {
@@ -38,7 +44,7 @@ export function create_breadcrumbs_manager(config) {
   function select_path_breadcrumb_index(i) {
     val = Array.isArray(val) ? val.slice(0, i + 1) : []
     if (config?.on_change) {
-      config?.on_change(val)
+      config.on_change(deep_copy(val))
     }
   }
 
@@ -54,12 +60,14 @@ export function create_breadcrumbs_manager(config) {
       border_radius: 0.5,
       min_height: 2,
       icon_pos: "left",
+      aria_label: "Go back one breadcrumb",
       on_click: () => select_path_breadcrumb_index(val.length - 2),
     })
     slash_button_manager = create_button_manager({
       type: "plain",
       min_height: 2,
       text: "/",
+      aria_label: "Go to breadcrumb root",
       pl: 0.5,
       pr: 0.5,
       on_click: () => select_path_breadcrumb_index(-1),

package/dist/Components/Button/index.svelte

@@ -98,6 +98,7 @@
       target={manager?.is_link ? manager?.target : undefined}
       rel={manager?.is_link ? manager?.rel : undefined}
       download={manager?.is_link ? manager?.download : undefined}
+      type={manager?.is_link ? undefined : manager?.html_type}
       popovertarget={manager?.is_link ? undefined : manager?.popover_target}
       tabindex={manager?.tabindex}
       disabled={manager?.is_link ? undefined : manager?.is_action_disabled}
@@ -108,6 +109,7 @@
       role={manager?.is_link ? "link" : "button"}
       aria-label={manager?.aria_label}
       aria-disabled={manager?.is_link && manager?.is_action_disabled ? "true" : undefined}
+      aria-busy={manager?.is_loading}
     >
       {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}
         <div

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

@@ -0,0 +1,13 @@
+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;
+    content: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+    content: any;
+};

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

@@ -1,4 +1,4 @@
-import { create_unique_id, set_closurable } from "../../client/index.js"
+import { create_unique_id, normalize_link_href, set_closurable } from "../../client/index.js"
 import { create_icon_manager } from "../Icon/index.svelte.js"
 
 export function create_button_manager(config) {
@@ -18,10 +18,11 @@ export function create_button_manager(config) {
   let icon_movement_damping = $derived(set_closurable(config?.icon_movement_damping, 0.1))
   let aria_label = $derived(set_closurable(config?.aria_label, null))
   let popover_target = $derived(set_closurable(config?.popover_target, null))
-  let href = $derived(set_closurable(config?.href, null))
+  let href = $derived(normalize_link_href(set_closurable(config?.href, null)))
   let target = $derived(set_closurable(config?.target, null))
   let rel = $derived(set_closurable(config?.rel, target === "_blank" ? "noopener noreferrer" : null))
   let download = $derived(set_closurable(config?.download, null))
+  let html_type = $derived(set_closurable(config?.html_type, "button"))
   let is_link = $derived(!!href && !popover_target)
   let element_tag = $derived(is_link ? "a" : "button")
   let is_no_wrap = $derived(set_closurable(config?.is_no_wrap, false))
@@ -78,7 +79,8 @@ export function create_button_manager(config) {
   let hover_shadow_color = $derived(set_closurable(config?.hover_shadow_color, "transparent"))
   let hover_shadow_size = $derived(set_closurable(config?.hover_shadow_size, 1))
   let text = $derived(set_closurable(config?.text, null))
-  let is_loading = $derived(set_closurable(config?.is_loading, false))
+  let is_callback_loading = $state(false)
+  let is_loading = $derived(set_closurable(config?.is_loading, false) || is_callback_loading)
   let is_disabled = $derived(set_closurable(config?.is_disabled, false))
   let selected_type = $derived(set_closurable(config?.selected_type, null))
 
@@ -113,7 +115,7 @@ export function create_button_manager(config) {
     }
   }
 
-  function handle_click(e) {
+  async function handle_click(e) {
     if (is_action_disabled) {
       e?.preventDefault?.()
       e?.stopPropagation?.()
@@ -125,11 +127,26 @@ export function create_button_manager(config) {
     if (is_stop_propagation) {
       e?.stopPropagation?.()
     }
-    if (is_success_animation) {
-      success_trigger()
-    }
-    if (config?.on_click) {
-      config?.on_click(e)
+    try {
+      let result = typeof config?.on_click == "function" ? config.on_click(e) : undefined
+      if (result && typeof result.then == "function") {
+        is_callback_loading = true
+        result = await result
+      }
+      if (is_success_animation) {
+        success_trigger()
+      }
+      return result
+    } catch (error) {
+      if (is_success_animation) {
+        error_trigger()
+      }
+      if (typeof config?.on_error == "function") {
+        config.on_error(error)
+      }
+      return undefined
+    } finally {
+      is_callback_loading = false
     }
   }
 
@@ -370,6 +387,9 @@ export function create_button_manager(config) {
     get download() {
       return download
     },
+    get html_type() {
+      return html_type
+    },
     get is_link() {
       return is_link
     },

package/dist/Components/Chart/Klines/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<{
+    dataset: any;
+}, {}, "">;
+type $$ComponentProps = {
+    dataset: any;
+};

package/dist/Components/Chart/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/Chart/index.svelte.js

@@ -1,4 +1,4 @@
-import { color_var, deep_copy } from "../../client/index.js"
+import { color_var, create_unique_id, deep_copy } from "../../client/index.js"
 
 export function create_chart_manager(config) {
   const y_axis_width = 70
@@ -136,7 +136,7 @@ export function create_chart_manager(config) {
   }
 
   function generate_id(prefix) {
-    return prefix + "-" + Math.floor(Math.random() * 1000000000000)
+    return create_unique_id(prefix, 20)
   }
 
   function add_val_to_obj_with_path(obj, pathList) {
@@ -1468,21 +1468,19 @@ export function create_chart_manager(config) {
       chart_prepped = null
       return
     }
-    let id = $state(input?.id)
-    let x_axis_type = $state(input?.x_axis_type)
-    let x_axis_title = $state(input?.x_axis_title)
-    let shown_start_x = $state(input?.shown_start_x)
-    let shown_end_x = $state(input?.shown_end_x)
-    let frames = $state(input?.frames)
-    let min_x_scrollable = $state(input?.min_x_scrollable)
-    let max_x_scrollable = $state(input?.max_x_scrollable)
+    const id = input?.id
+    const x_axis_type = input?.x_axis_type
+    const x_axis_title = input?.x_axis_title
+    let shown_start_x_initial = input?.shown_start_x
+    let shown_end_x_initial = input?.shown_end_x
+    const input_frames = Array.isArray(input?.frames) ? input.frames : []
     let x_axis_highlight_tic = $state(input?.x_axis_highlight_tic)
     let x_hovered_percent_decimal = $state(input?.x_hovered_percent_decimal)
-    let all_data_start_x_loc = $state(null)
-    let all_data_end_x_loc = $state(null)
+    let all_data_start_x_loc = null
+    let all_data_end_x_loc = null
     let most_datapoints_for_x_dataset = 0
-    if (Array.isArray(frames)) {
-      for (let frame of frames) {
+    if (input_frames.length > 0) {
+      for (let frame of input_frames) {
         if (Array.isArray(frame?.shared_y_axiss)) {
           for (let shared_y_axis of frame.shared_y_axiss) {
             if (Array.isArray(shared_y_axis?.datasets)) {
@@ -1529,25 +1527,16 @@ export function create_chart_manager(config) {
       range_to_show = (x_range * range_to_show_default) / most_datapoints_for_x_dataset
       shown_start_x_loc = all_data_end_x_loc - parseFloat(range_to_show.toPrecision(8))
     }
-    // console.log("x_range0", {
-    //   x_range,
-    //   range_to_show,
-    //   all_data_end_x_loc,
-    //   all_data_start_x_loc,
-    //   shown_start_x,
-    //   shown_end_x,
-    //   most_datapoints_for_x_dataset,
-    // })
-    min_x_scrollable = all_data_start_x_loc + Math.floor(range_to_show * 0.1)
-    max_x_scrollable = all_data_end_x_loc - Math.floor(range_to_show * 0.1)
-    if (shown_start_x == null || isNaN(shown_start_x)) {
-      shown_start_x = shown_start_x_loc
-    }
-    if (shown_end_x == null || isNaN(shown_end_x)) {
-      shown_end_x = all_data_end_x_loc
+    const min_x_scrollable = all_data_start_x_loc + Math.floor(range_to_show * 0.1)
+    const max_x_scrollable = all_data_end_x_loc - Math.floor(range_to_show * 0.1)
+    if (shown_start_x_initial == null || isNaN(shown_start_x_initial)) {
+      shown_start_x_initial = shown_start_x_loc
+    }
+    if (shown_end_x_initial == null || isNaN(shown_end_x_initial)) {
+      shown_end_x_initial = all_data_end_x_loc
     }
     let prepped_frames = []
-    for (let frame of frames) {
+    for (let frame of input_frames) {
       const frame_height = frame_width / frame.aspect_ratio
       let shown_y_axis_index = $state(Number.isInteger(frame?.shown_y_axis_index) ? frame.shown_y_axis_index : 0)
       let prepped_shared_y_axiss = []
@@ -1578,8 +1567,8 @@ export function create_chart_manager(config) {
                 !isNaN(kline[dataset?.keys[2]]) &&
                 !isNaN(kline[dataset?.keys[3]]) &&
                 !isNaN(kline[dataset?.keys[4]]) &&
-                shown_start_x <= kline[dataset?.keys[0]] &&
-                kline[dataset?.keys[0]] < shown_end_x
+                shown_start_x_initial <= kline[dataset?.keys[0]] &&
+                kline[dataset?.keys[0]] < shown_end_x_initial
               ) {
                 const item_to_add = {
                   x: kline[dataset?.keys[0]],
@@ -1602,8 +1591,8 @@ export function create_chart_manager(config) {
               if (
                 !isNaN(datapoint[dataset?.keys[0]]) &&
                 !isNaN(datapoint[dataset?.keys[1]]) &&
-                shown_start_x <= datapoint[dataset?.keys[0]] &&
-                datapoint[dataset?.keys[0]] < shown_end_x
+                shown_start_x_initial <= datapoint[dataset?.keys[0]] &&
+                datapoint[dataset?.keys[0]] < shown_end_x_initial
               ) {
                 const item_to_add = {
                   x: datapoint[dataset?.keys[0]],
@@ -1622,8 +1611,8 @@ export function create_chart_manager(config) {
                   s: dataset?.keys?.length > 2 ? datapoint[dataset?.keys[2]] : null,
                 }
                 shown_data.push(item_to_add)
-                register_y_value(item_to_add.m * shown_start_x + item_to_add.b, affects_y_scale)
-                register_y_value(item_to_add.m * shown_end_x + item_to_add.b, affects_y_scale)
+                register_y_value(item_to_add.m * shown_start_x_initial + item_to_add.b, affects_y_scale)
+                register_y_value(item_to_add.m * shown_end_x_initial + item_to_add.b, affects_y_scale)
                 register_y_value(datasets[dataset?.dataset_id]?.y_min, affects_y_scale)
                 register_y_value(datasets[dataset?.dataset_id]?.y_max, affects_y_scale)
               }
@@ -1696,14 +1685,14 @@ export function create_chart_manager(config) {
           shown_low_y = Number(shown_low_y) - shown_y_range / 2
           shown_high_y = shown_low_y + shown_y_range
         }
-        const shown_x_range = shown_end_x - shown_start_x
+        const shown_x_range = shown_end_x_initial - shown_start_x_initial
         let prepped_datasets = []
         for (let pre_prepped_dataset of pre_prepped_datasets) {
           const kline_width_pd = (pre_prepped_dataset.period_x * 1) / shown_x_range
           let normalized_datapoints_in_range_loc = []
           for (let datapoint of pre_prepped_dataset.data) {
             if (pre_prepped_dataset.type === "klines") {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
+              const norm_x = (datapoint.x - shown_start_x_initial) / shown_x_range
               const norm_o = (datapoint.o - shown_low_y) / shown_y_range
               const norm_l = (datapoint.l - shown_low_y) / shown_y_range
               const norm_h = (datapoint.h - shown_low_y) / shown_y_range
@@ -1718,7 +1707,7 @@ export function create_chart_manager(config) {
                 ...norm_details,
               })
             } else if (pre_prepped_dataset.type === "lines") {
-              let x1 = shown_start_x
+              let x1 = shown_start_x_initial
               let y1 = datapoint.m * x1 + datapoint.b
               if (y1 < shown_low_y) {
                 x1 = (shown_low_y - datapoint.b) / datapoint.m
@@ -1727,7 +1716,7 @@ export function create_chart_manager(config) {
                 x1 = (shown_high_y - datapoint.b) / datapoint.m
                 y1 = shown_high_y
               }
-              let x2 = shown_end_x
+              let x2 = shown_end_x_initial
               let y2 = datapoint.m * x2 + datapoint.b
               if (y2 < shown_low_y) {
                 x2 = (shown_low_y - datapoint.b) / datapoint.m
@@ -1738,8 +1727,8 @@ export function create_chart_manager(config) {
               }
               const norm_y1 = (y1 - shown_low_y) / shown_y_range
               const norm_y2 = (y2 - shown_low_y) / shown_y_range
-              const norm_x1 = (x1 - shown_start_x) / shown_x_range
-              const norm_x2 = (x2 - shown_start_x) / shown_x_range
+              const norm_x1 = (x1 - shown_start_x_initial) / shown_x_range
+              const norm_x2 = (x2 - shown_start_x_initial) / shown_x_range
               normalized_datapoints_in_range_loc.push({
                 x1: parseFloat(norm_x1.toPrecision(6)),
                 y1: parseFloat(norm_y1.toPrecision(6)),
@@ -1748,7 +1737,7 @@ export function create_chart_manager(config) {
                 s: datapoint?.s,
               })
             } else {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
+              const norm_x = (datapoint.x - shown_start_x_initial) / shown_x_range
               const norm_y = (datapoint.y - shown_low_y) / shown_y_range
               normalized_datapoints_in_range_loc.push({
                 x: parseFloat(norm_x.toPrecision(6)),
@@ -1802,8 +1791,10 @@ export function create_chart_manager(config) {
         change_shown_y_axis,
       })
     }
-    frames = prepped_frames
-    let x_axis_tics = prep_x_axis(shown_start_x, shown_end_x, frame_width)
+    let frames = $state(prepped_frames)
+    let shown_start_x = $state(shown_start_x_initial)
+    let shown_end_x = $state(shown_end_x_initial)
+    const x_axis_tics = prep_x_axis(shown_start_x_initial, shown_end_x_initial, frame_width)
     function set_shown_start_x(input) {
       shown_start_x = input
     }

package/dist/Components/ChartInput/DisplayNav/Klines/index.svelte.d.ts

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

package/dist/Components/ChartInput/DisplayNav/Lines/index.svelte.d.ts

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

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/index.svelte.js

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

@@ -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;
+};