sveltekit-ui 1.1.63 → 1.1.65

package/dist/Components/Button/index.svelte

@@ -18,7 +18,8 @@
       : manager?.border_radius - manager?.pt}rem;"
     class="container"
   >
-    <button
+    <svelte:element
+      this={manager?.element_tag}
       id={`button_${manager?.id}`}
       style="
     --min_width: {manager?.min_width ? manager?.min_width + 'rem' : 0};
@@ -92,14 +93,21 @@
         !manager?.selected_type &&
         manager?.selected_type == "half_selected"}
       class:border={!!manager?.border_color}
-      popovertarget={manager?.popover_target}
+      class:is_disabled={manager?.is_action_disabled}
+      href={manager?.is_link ? manager?.href : undefined}
+      target={manager?.is_link ? manager?.target : undefined}
+      rel={manager?.is_link ? manager?.rel : undefined}
+      download={manager?.is_link ? manager?.download : undefined}
+      popovertarget={manager?.is_link ? undefined : manager?.popover_target}
       tabindex={manager?.tabindex}
-      disabled={manager?.is_disabled || manager?.is_loading || manager?.is_success || manager?.is_error}
+      disabled={manager?.is_link ? undefined : manager?.is_action_disabled}
       onclick={(e) => manager?.handle_click(e)}
       onpointerdown={(e) => manager?.pointer_down(e)}
       onpointerenter={(e) => manager?.pointer_enter(e)}
       onpointerleave={(e) => manager?.pointer_leave(e)}
+      role={manager?.is_link ? "link" : "button"}
       aria-label={manager?.aria_label}
+      aria-disabled={manager?.is_link && manager?.is_action_disabled ? "true" : undefined}
     >
       {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}
         <div
@@ -171,7 +179,7 @@
           <ErrorX sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h2))" />
         </div>
       {/if}
-    </button>
+    </svelte:element>
   </div>
 {/if}
 
@@ -197,10 +205,16 @@
     width: var(--base_width);
     overflow: hidden;
     text-overflow: ellipsis;
+    box-sizing: border-box;
+    font-family: inherit;
+    text-decoration: none;
   }
-  .base:not(:disabled) {
+  .base:not(:disabled):not(.is_disabled) {
     cursor: pointer;
   }
+  .is_disabled {
+    cursor: default;
+  }
   .base:focus-visible {
     outline: 1px solid var(--selected-t);
     outline-offset: -1px;
@@ -238,7 +252,7 @@
   .supporting_icon_right {
     right: var(--pt);
   }
-  .cursor_move {
+  .cursor_move:not(.is_disabled) {
     cursor: move;
   }
   .text_align_center {
@@ -281,7 +295,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--contrast_color);
   }
-  .primary:hover:enabled:not(:active) {
+  .primary:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h),
@@ -292,7 +306,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .primary:active {
+  .primary:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
@@ -308,7 +322,7 @@
     );
     color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .primary:disabled {
+  .primary.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       color-mix(in oklab, var(--color), var(--g8-t) 93%),
@@ -326,7 +340,7 @@
     color: oklch(from var(--contrast_color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h);
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
   }
-  .primary_selected:hover:enabled:not(:active) {
+  .primary_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h),
@@ -337,7 +351,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .primary_selected:active {
+  .primary_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
@@ -353,7 +367,7 @@
     );
     color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .primary_selected:disabled {
+  .primary_selected.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       color-mix(in oklab, var(--color), var(--g14-t) 95%),
@@ -371,7 +385,7 @@
     color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h);
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
   }
-  .primary_half_selected:hover:enabled:not(:active) {
+  .primary_half_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.05) h),
@@ -382,7 +396,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .primary_half_selected:active {
+  .primary_half_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
@@ -398,7 +412,7 @@
     );
     color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .primary_half_selected:disabled {
+  .primary_half_selected.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       color-mix(in oklab, var(--color), var(--g8-t) 93%),
@@ -413,7 +427,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--color);
   }
-  .outlined:hover:enabled:not(:active) {
+  .outlined:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -424,7 +438,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .outlined:active {
+  .outlined:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
@@ -440,7 +454,7 @@
     );
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .outlined:disabled {
+  .outlined.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
@@ -455,7 +469,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--contrast_color);
   }
-  .outlined_selected:hover:enabled:not(:active) {
+  .outlined_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h / calc(0.9 + var(--l-shift-t))),
@@ -466,7 +480,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .outlined_selected:active {
+  .outlined_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t))),
@@ -482,7 +496,7 @@
     );
     color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .outlined_selected:disabled {
+  .outlined_selected.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
@@ -502,7 +516,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--color);
   }
-  .outlined_half_selected:hover:enabled:not(:active) {
+  .outlined_half_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.3 + var(--l-shift-t))),
@@ -513,7 +527,7 @@
       0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
   }
-  .outlined_half_selected:active {
+  .outlined_half_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
@@ -529,7 +543,7 @@
     );
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .outlined_half_selected:disabled {
+  .outlined_half_selected.is_disabled {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
@@ -544,7 +558,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--color);
   }
-  .soft:hover:enabled:not(:active) {
+  .soft:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.12 + var(--l-shift-t))),
@@ -553,7 +567,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.01) h);
   }
-  .soft:active {
+  .soft:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -569,7 +583,7 @@
     );
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
   }
-  .soft:disabled {
+  .soft.is_disabled {
     background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
     color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
   }
@@ -583,7 +597,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
   }
-  .soft_selected:hover:enabled:not(:active) {
+  .soft_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -592,7 +606,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
   }
-  .soft_selected:active {
+  .soft_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -608,7 +622,7 @@
     );
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
   }
-  .soft_selected:disabled {
+  .soft_selected.is_disabled {
     background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
     color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
   }
@@ -622,7 +636,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--color);
   }
-  .soft_half_selected:hover:enabled:not(:active) {
+  .soft_half_selected:hover:not(.is_disabled):not(:active) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.15 + var(--l-shift-t))),
@@ -631,7 +645,7 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .soft_half_selected:active {
+  .soft_half_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -647,7 +661,7 @@
     );
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .soft_half_selected:disabled {
+  .soft_half_selected.is_disabled {
     background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
     color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
   }
@@ -657,17 +671,17 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: var(--color);
   }
-  .plain:hover:enabled:not(:active) {
+  .plain:hover:not(.is_disabled):not(:active) {
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l - 3 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .plain:active {
+  .plain:active:not(.is_disabled) {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
   }
   .plain_simulate_active {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .plain:disabled {
+  .plain.is_disabled {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
   }
 
@@ -676,11 +690,11 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .plain_selected:hover:enabled:not(:active) {
+  .plain_selected:hover:not(.is_disabled):not(:active) {
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l - 1 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .plain_selected:active {
+  .plain_selected:active:not(.is_disabled) {
     background: linear-gradient(
       var(--gradient_turn),
       oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
@@ -696,7 +710,7 @@
     );
     color: oklch(from var(--color) calc(l - 4 * var(--l-shift-t)) calc(c + 0.1) h);
   }
-  .plain_selected:disabled {
+  .plain_selected.is_disabled {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
   }
 
@@ -705,17 +719,17 @@
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h);
   }
-  .plain_half_selected:hover:enabled:not(:active) {
+  .plain_half_selected:hover:not(.is_disabled):not(:active) {
     box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
     color: oklch(from var(--color) calc(l + 4 * var(--l-shift-t)) calc(c + 0.05) h);
   }
-  .plain_half_selected:active {
+  .plain_half_selected:active:not(.is_disabled) {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
   }
   .plain_half_selected_simulate_active {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
   }
-  .plain_half_selected:disabled {
+  .plain_half_selected.is_disabled {
     color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
   }
 </style>

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

@@ -18,6 +18,12 @@ 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 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 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))
   let is_word_break_all = $derived(set_closurable(config?.is_word_break_all, false))
   let is_success_animation = $derived(set_closurable(config?.is_success_animation, false))
@@ -79,6 +85,7 @@ export function create_button_manager(config) {
   let is_error = $state(false)
   let is_success = $state(false)
   let icon_manager = $state(null)
+  let is_action_disabled = $derived(is_disabled || is_loading || is_success || is_error)
 
   let is_hovered = $state(false)
   let is_pointer_down = $state(false)
@@ -107,17 +114,22 @@ export function create_button_manager(config) {
   }
 
   function handle_click(e) {
+    if (is_action_disabled) {
+      e?.preventDefault?.()
+      e?.stopPropagation?.()
+      return
+    }
     if (is_prevent_default) {
-      e.preventDefault()
+      e?.preventDefault?.()
     }
     if (is_stop_propagation) {
-      e.stopPropagation()
+      e?.stopPropagation?.()
     }
     if (is_success_animation) {
       success_trigger()
     }
     if (config?.on_click) {
-      config?.on_click()
+      config?.on_click(e)
     }
   }
 
@@ -238,6 +250,9 @@ export function create_button_manager(config) {
     get is_disabled() {
       return is_disabled
     },
+    get is_action_disabled() {
+      return is_action_disabled
+    },
     get selected_type() {
       return selected_type
     },
@@ -343,6 +358,24 @@ export function create_button_manager(config) {
     get popover_target() {
       return popover_target
     },
+    get href() {
+      return href
+    },
+    get target() {
+      return target
+    },
+    get rel() {
+      return rel
+    },
+    get download() {
+      return download
+    },
+    get is_link() {
+      return is_link
+    },
+    get element_tag() {
+      return element_tag
+    },
     get is_no_wrap() {
       return is_no_wrap
     },

package/dist/Components/Chart/index.svelte

@@ -107,6 +107,7 @@
         onpointermove={(e) => manager?.handle_y_axis_pointer_move(e, i)}
         onpointerup={(e) => manager?.handle_y_axis_pointer_up(e, i)}
         onpointercancel={(e) => manager?.handle_y_axis_pointer_cancel(e, i)}
+        onlostpointercapture={(e) => manager?.handle_y_axis_pointer_cancel(e, i)}
         onclick={() => manager?.handle_y_axis_click(i)}
         onkeypress={() => manager?.handle_y_axis_click(i)}
       >