sveltekit-ui 1.1.80 → 1.1.82

package/README.md

@@ -45,13 +45,23 @@ npm run dev
 
 Copy `.env.example` to `.env` and provide `PUBLIC_APPLE_MAPKIT_JS_API_KEY` if you want to run the MapKit showcases locally.
 
+Keep TypeScript on version 6 for the current Svelte tooling, even when writing JavaScript. The `.ncurc.js` configuration lets `ncu -u` update TypeScript within version 6 while other packages continue receiving normal updates.
+
 Before publishing, run the complete verification suite:
 
 ```sh
 npm run verify
 ```
 
-This checks the Svelte source, runs tests, generates the distributable package and type declarations, and builds the documentation site.
+This checks the Svelte source, runs tests, generates and verifies the distributable package, and builds the documentation site.
+
+Publish with `npm run publish:npm`. It checks npm for the newest published release, selects the next patch version when needed, keeps `package.json` and `package-lock.json` in sync, and runs verification before publishing. A prepared version that is newer than the published releases is reused, so retrying a failed publish does not skip another version.
+
+Preview the version without changing files or publishing:
+
+```sh
+npm run version:available -- --dry-run
+```
 
 ## Compatibility and releases
 

package/dist/Components/Alert/index.svelte

@@ -1,22 +1,24 @@
 <script>
   import SuccessCheck from "../SuccessCheck/index.svelte"
   import ErrorX from "../ErrorX/index.svelte"
-  import Icon from "../Icon/index.svelte"
   import Button from "../Button/index.svelte"
+  import { untrack } from "svelte"
+  import { flip } from "svelte/animate"
   import { fly } from "svelte/transition"
 
   let { manager = null, options = null, on_alert_added } = $props()
 
   $effect(() => {
     const current_manager = manager
-    current_manager?.run_auto_delete?.()
+    // Only manager replacement should restart the lifecycle, not timer or queue updates.
+    untrack(() => current_manager?.run_auto_delete?.())
     return () => current_manager?.destroy?.()
   })
 </script>
 
 <div class="alerts_container" role="region" aria-label="Notifications" aria-live="polite">
   {#if Array.isArray(manager?.alerts) && manager?.alerts.length > 0}
-    {#each manager?.alerts as alert, i (alert)}
+    {#each manager?.alerts as alert (alert.id)}
       <div
         class="card alert_box"
         role="status"
@@ -24,6 +26,7 @@
         class:small_alert_container={manager?.is_small_screen}
         style="--br: {manager?.border_radius}rem;"
         transition:fly={{ x: 300, duration: 400 }}
+        animate:flip={{ duration: 250 }}
       >
         <div class="icon">
           {#if alert.icon === "check"}
@@ -46,11 +49,17 @@
 
 <style>
   .alerts_container {
-    position: absolute;
+    position: fixed;
+    top: 0;
     right: 0;
-    overflow: scroll;
+    width: 32rem;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
     max-height: 100vh;
-    z-index: 10;
+    max-height: 100dvh;
+    z-index: 11;
+    pointer-events: none;
   }
   .alerts_container h3 {
     font-size: clamp(2.2rem, 4.2vw, 2.4rem);
@@ -58,7 +67,6 @@
   }
   .alert_container {
     position: relative;
-    width: 30rem;
     height: 7rem;
     display: flex;
     align-items: center;
@@ -70,6 +78,7 @@
     align-items: center;
   }
   .alert_box {
+    pointer-events: auto;
     border-radius: var(--br);
     border: 1px solid var(--g15-t);
     box-shadow: 0 0.2rem 1rem var(--shadow3);

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

@@ -94,7 +94,13 @@ export function create_checkbox_manager(config) {
       is_no_wrap: true,
       mr: 0.5,
       text: () => (val == null ? "Select Value" : "Set Null"),
-      on_click: () => set_val(val == null ? true : null),
+      is_disabled: () => is_disabled || is_read_only || is_loading,
+      on_click: () => {
+        set_val(val == null ? on_val : null)
+        if (typeof config?.on_change == "function") {
+          config.on_change(val)
+        }
+      },
     })
   }
 

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

@@ -84,6 +84,7 @@ export function create_dropdown_manager(config) {
               font_weight: font_weight,
               is_compressed: type == "horiz_selector",
               is_no_wrap: type == "horiz_selector",
+              is_disabled: () => is_disabled,
               mb: item_mb,
               l: 2,
               c: 1,
@@ -130,6 +131,7 @@ export function create_dropdown_manager(config) {
   }
 
   function item_clicked(item) {
+    if (is_disabled) return
     if (item == null || item?.[val_key] == null) {
       val = null
     } else if (is_multiselect) {
@@ -224,6 +226,7 @@ export function create_dropdown_manager(config) {
     val = set_closurable(config?.val ?? null)
     search_text_input_manager = create_text_input_manager({
       type: "search",
+      is_disabled: () => is_disabled,
       on_change: (input) => {
         if (typeof config?.on_search == "function") {
           get_db_search_results(input)
@@ -261,7 +264,7 @@ export function create_dropdown_manager(config) {
       font_size: font_size,
       font_weight: font_weight,
       mb: item_mb,
-      is_disabled: () => val == null || (Array.isArray(val) && val.length < 1),
+      is_disabled: () => is_disabled || val == null || (Array.isArray(val) && val.length < 1),
       is_compressed: type == "horiz_selector",
       is_no_wrap: type == "horiz_selector",
       on_click: () => item_clicked(null),

package/dist/Components/Hamburger/index.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <button
+  type="button"
   class="side_bar_toggle_button"
   style="--color_base: {color_base}; --color_hover: {color_hover};"
   onpointerenter={() => (is_hovered = true)}
@@ -18,6 +19,7 @@
   class:is_hovered
   onclick={() => toggle()}
   aria-label="Hamburger Toggle"
+  aria-expanded={!!val}
 >
   <span class="bar_base top_line" class:top_line_x={val}></span>
   <span class="bar_base mid_line" class:mid_line_x={val}></span>

package/dist/Components/ImageSlider/index.svelte

@@ -9,13 +9,16 @@
     if (typeof manager?.handle_mount == "function") {
       manager?.handle_mount()
     }
+    return () => manager?.handle_pointer_event(null, "cancel", manager?.id)
   })
 </script>
 
 <svelte:document
   onpointerup={(e) => manager?.handle_pointer_event(e, "up", manager?.id)}
   onpointermove={(e) => manager?.handle_pointer_event(e, "move", manager?.id)}
+  onpointercancel={(e) => manager?.handle_pointer_event(e, "cancel", manager?.id)}
 />
+<svelte:window onblur={() => manager?.handle_pointer_event(null, "cancel", manager?.id)} />
 
 <div
   id={`container_${manager?.id}`}
@@ -29,17 +32,20 @@
     <img class="top_img" src={manager?.src2} alt="New" style="width: calc({manager?.percent_shown}% - 2px);" />
     <input
       type="range"
-      min="1"
+      min="0"
       max="100"
+      step="any"
       value={manager?.percent_shown}
       class="slider"
       name="slider"
-      id="slider"
+      id={`image_slider_${manager?.id}`}
+      aria-label={manager?.aria_label}
+      oninput={(e) => manager?.set_percent_shown(e.currentTarget.value)}
       onpointerdown={(e) => manager?.handle_pointer_event(e, "down", manager?.id)}
     />
     {#if manager?.aspect_ratio}
       <div class="line" style="left: calc({manager?.percent_shown}% - 6px);"></div>
-      <div class="slider_button" style="left: calc({manager?.percent_shown}% - 18px);">
+      <div class="slider_button" aria-hidden="true" style="left: calc({manager?.percent_shown}% - 18px);">
         <Button manager={manager?.button_manager} />
       </div>
     {/if}
@@ -88,6 +94,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    touch-action: none;
+  }
+  .slider:focus-visible {
+    outline: 2px solid var(--selected-t);
+    outline-offset: 2px;
+    border-radius: 1rem;
   }
   .slider::-webkit-slider-thumb {
     -webkit-appearance: none;

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

@@ -7,14 +7,17 @@ export function create_image_slider_manager(config) {
   let src2 = $derived(set_closurable(config?.src2, null))
   let color1 = $derived(set_closurable(config?.color1, "var(--primary-t)"))
   let color2 = $derived(set_closurable(config?.color2, "color-mix(in oklab, var(--primary-t), var(--bg) 80%)"))
+  let aria_label = $derived(set_closurable(config?.aria_label, "Image comparison"))
   let percent_shown = $state(50)
 
   function init(config) {
-    percent_shown = config?.percent_shown ?? 50
+    set_percent_shown(config?.percent_shown ?? 50)
   }
   init(config)
 
-  let touch_start_x = $state(0)
+  let touch_start_x = $state(null)
+  let is_dragging = false
+  let active_pointer_id = null
   let aspect_ratio = $state(null)
 
   function handle_mount() {
@@ -46,25 +49,43 @@ export function create_image_slider_manager(config) {
     min_height: 3,
     is_icon_bg_tint: false,
     is_uniform: true,
+    tabindex: -1,
   })
 
+  function set_percent_shown(input) {
+    const next_percent = Number(input)
+    if (Number.isFinite(next_percent)) {
+      percent_shown = Math.max(0, Math.min(100, next_percent))
+    }
+  }
+
   function handle_pointer_event(event, type, id_input) {
-    if (id != id_input) {
+    if (id != id_input || !["down", "move", "up", "cancel"].includes(type)) {
       return
     }
-    if (event) {
-      event.preventDefault()
-    }
-    if (type == "move" && !touch_start_x) {
+    if (type !== "down" && !is_dragging) return
+    if (type !== "down" && event?.pointerId != null && active_pointer_id != null && event.pointerId !== active_pointer_id) {
       return
-    } else if (type == "up") {
+    }
+    if (type == "up" || type == "cancel") {
+      is_dragging = false
+      active_pointer_id = null
       touch_start_x = null
       return
     }
+    if (!event || typeof document === "undefined") return
+    if (type == "down" && (is_dragging || (event.button != null && event.button !== 0))) return
+    const container_el = document.querySelector(`#container_${id}`)
+    const container_rect = container_el?.getBoundingClientRect()
+    if (!container_rect?.width) return
+    if (type == "down") {
+      is_dragging = true
+      active_pointer_id = event.pointerId ?? null
+      event.currentTarget?.focus?.({ preventScroll: true })
+    }
+    event.preventDefault()
     touch_start_x = event.clientX
-    let container_el = document?.querySelector(`#container_${id}`)
-    const container_rect = container_el.getBoundingClientRect()
-    percent_shown = Math.max(0, Math.min(100, ((touch_start_x - container_rect.left) / container_rect.width) * 100))
+    set_percent_shown(((touch_start_x - container_rect.left) / container_rect.width) * 100)
   }
 
   return {
@@ -81,6 +102,9 @@ export function create_image_slider_manager(config) {
     get color2() {
       return color2
     },
+    get aria_label() {
+      return aria_label
+    },
     get percent_shown() {
       return percent_shown
     },
@@ -95,5 +119,6 @@ export function create_image_slider_manager(config) {
     },
     handle_mount,
     handle_pointer_event,
+    set_percent_shown,
   }
 }

package/dist/Components/Json/Nested/index.svelte

@@ -48,6 +48,9 @@
     <span style="vertical-align: middle; color: {bracket_color};">{"{"}</span>
     <div style="display: inline-block; vertical-align: middle;">
       <button
+        type="button"
+        aria-expanded={!manager?.is_collapsed}
+        aria-label={manager?.is_collapsed ? "Expand object" : "Collapse object"}
         style="width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:.5rem; background:var(--shadow2-t); border:1px solid var(--shadow8-t); cursor:pointer; line-height:1; "
         onclick={manager?.toggle_is_collapsed}>{manager?.is_collapsed ? "+" : "-"}</button
       >
@@ -99,6 +102,9 @@
     <span style="vertical-align: middle; color: {bracket_color};">{"["}</span>
     <div style="display: inline-block; vertical-align: middle;">
       <button
+        type="button"
+        aria-expanded={!manager?.is_collapsed}
+        aria-label={manager?.is_collapsed ? "Expand array" : "Collapse array"}
         style="width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:.5rem; background:var(--shadow2-t); border:1px solid var(--shadow8-t); cursor:pointer; line-height:1; "
         onclick={manager?.toggle_is_collapsed}>{manager?.is_collapsed ? "+" : "-"}</button
       >

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

@@ -57,7 +57,7 @@ export function create_json_manager(config) {
   }
 
   function get_replace_key_in_object(obj, path_remaining, old_key, new_key) {
-    let return_obj = { ...obj }
+    let return_obj = Array.isArray(obj) ? [...obj] : { ...obj }
     if (Array.isArray(path_remaining) && path_remaining.length > 0) {
       const current_key = path_remaining[0]
       if (return_obj[current_key]) {
@@ -294,7 +294,7 @@ export function create_json_manager(config) {
                 null,
                 json_prepped_loc?.nested_levels,
                 indentation,
-                [...path, json_prepped_loc.val.length - 1],
+                [...path, json_prepped_loc.val.length],
                 true
               ),
             })
@@ -354,7 +354,6 @@ export function create_json_manager(config) {
         json_prepped_loc.type = "array"
         json_prepped_loc.val = []
         for (let i = 0; i < input.length; i++) {
-          const test = get_json_prepped(input?.[i], json_prepped_loc?.nested_levels, indentation, [...path, i], true)
           json_prepped_loc.val.push({
             json_prepped: get_json_prepped(
               input?.[i],
@@ -494,18 +493,18 @@ export function create_json_manager(config) {
       rows: 15,
       placeholder: '{"hello_world": true }',
       max_length: 10000000000,
-      on_change: (input) => {
-        if (input && typeof input == "object") {
-          set_val(JSON.parse(JSON.stringify(input)))
-        } else {
-          set_val(null)
-        }
-      },
     })
     finish_data_upload_button_manager = create_button_manager({
       text: "Finish",
       on_click: () => {
-        set_val(data_text_input_manager?.val ? JSON.parse(data_text_input_manager?.val) : null)
+        let next_val
+        try {
+          next_val = data_text_input_manager?.val ? JSON.parse(data_text_input_manager.val) : null
+        } catch {
+          data_upload_popover_manager.show_temp_message("Enter valid JSON before finishing.", "error", 1800, false)
+          return
+        }
+        set_val(next_val)
         data_upload_popover_manager.close()
       },
     })

package/dist/Components/LabeledItem/index.svelte

@@ -25,11 +25,10 @@
   class="container"
   style="margin-left: {ml}rem; margin-right: {mr}rem; margin-top: {mt}rem; margin-bottom: {mb}rem;"
 >
-  <div class="attr_label">
+  <div class="attr_label" style="--heading_min_width: {heading_min_width}rem;">
     <h4
       class:required={is_required}
-      class:is_disabled
-      style="color: {color}; font-weight: {font_weight}; font-size: {font_size}rem; --disabled_color: {disabled_color};--heading_min_width: {heading_min_width}rem;"
+      style="color: {is_disabled ? disabled_color : color}; font-weight: {font_weight}; font-size: {font_size}rem;"
     >
       {label}:
     </h4>
@@ -81,9 +80,6 @@
     place-content: center;
     font-size: 1.2rem;
   }
-  .is_disabled {
-    color: var(--disabled_color, var(--g12-t, "gray"));
-  }
   .required::after {
     content: "*";
     color: var(--g12-t);

package/dist/Components/Layout/NavBar/FullNav/index.svelte

@@ -1,25 +1,52 @@
 <script>
   import { fly } from "svelte/transition"
+  import { tick } from "svelte"
 
   let { manager, full_nav } = $props()
+
+  function manage_keyboard_focus(node) {
+    const opener = document.activeElement
+    let destroyed = false
+    if (opener instanceof HTMLElement && opener.matches(":focus-visible")) {
+      tick().then(() => {
+        if (!destroyed && manager?.is_full_nav_shown && document.activeElement === opener) {
+          node.querySelector("input:not(:disabled), a[href], button:not(:disabled), [tabindex='0']")?.focus()
+        }
+      })
+    }
+
+    function handle_escape(event) {
+      if (event.key !== "Escape" || event.isComposing || event.defaultPrevented || !manager?.is_full_nav_shown) return
+      // Let nested native popovers handle their own Escape key first.
+      if (document.querySelector(":popover-open")) return
+      event.preventDefault()
+      manager.set_is_full_nav_toggled_on(false)
+      if (opener instanceof HTMLElement && opener.isConnected) opener.focus()
+    }
+
+    window.addEventListener("keydown", handle_escape)
+    return {
+      destroy() {
+        destroyed = true
+        window.removeEventListener("keydown", handle_escape)
+      },
+    }
+  }
 </script>
 
 {#if manager?.is_full_nav_shown}
-  <div
-    role="button"
-    tabindex="0"
+  <button
+    type="button"
+    aria-label="Close navigation"
+    tabindex="-1"
     class="underlay"
     onwheel={(e) => e.stopPropagation()}
     ontouchmove={(e) => e.stopPropagation()}
     onclick={() => manager.set_is_full_nav_toggled_on(false)}
-    onkeydown={(event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        manager.set_is_full_nav_toggled_on(false)
-      }
-    }}
-  ></div>
+  ></button>
   <div
     class="container"
+    use:manage_keyboard_focus
     style="height: {manager?.available_content_height + 1}px; top: {manager?.shown_nav_bar_height - 1}px;"
     in:fly={{ duration: 300, x: -255, opacity: "100%" }}
     out:fly={{ duration: 300, x: -255, opacity: "100%" }}
@@ -32,6 +59,8 @@
 
 <style>
   .underlay {
+    padding: 0;
+    border: 0;
     position: fixed;
     top: 0;
     left: 0;

package/dist/Components/Layout/NavBar/NavGuts/index.svelte

@@ -33,6 +33,7 @@
       onclick={() => manager.to_home()}
       onkeydown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault()
           manager.to_home()
         }
       }}

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

@@ -34,6 +34,9 @@ export function create_link_manager(config) {
   let is_show_preview = $derived(set_closurable(config?.is_show_preview, !is_internal_link))
 
   function handle_a_click(e) {
+    if (e?.defaultPrevented || e?.metaKey || e?.ctrlKey || e?.shiftKey || e?.altKey || (e?.button != null && e.button !== 0)) {
+      return
+    }
     e?.preventDefault?.()
     if (!href) return
     if (is_internal_link) {

package/dist/Components/Slider/index.svelte

@@ -17,7 +17,7 @@
     {#if manager?.label || manager?.error_message}
       <div style="display: inline-flex;">
         {#if manager?.label}
-          <label style="--label_font_size: {manager?.label_font_size}rem;" for={`input_${manager?.id}`}>{manager?.label}:</label>
+          <p class="label" style="--label_font_size: {manager?.label_font_size}rem;">{manager?.label}:</p>
         {/if}
         {#if manager?.error_message}
           <p id={`slider_error_${manager?.id}`} class="error_text">{manager?.error_message}</p>
@@ -60,12 +60,12 @@
             <div
               id={`thumb_${i}_${manager?.id}`}
               role="slider"
-              tabindex={manager?.is_disabled ? -1 : 0}
+              tabindex={manager?.is_disabled || manager?.loading_i != null ? -1 : 0}
               aria-label={`${manager?.label ?? manager?.name ?? "Slider"}${manager?.working_val?.length > 1 ? ` ${i + 1}` : ""}`}
               aria-valuemin={manager?.min}
               aria-valuemax={manager?.max}
               aria-valuenow={thumb}
-              aria-disabled={manager?.is_disabled || manager?.loading_i == i}
+              aria-disabled={manager?.is_disabled || manager?.loading_i != null}
               aria-readonly={manager?.is_read_only}
               aria-invalid={manager?.error_i == i || !!manager?.error_message}
               aria-describedby={manager?.error_message ? `slider_error_${manager?.id}` : undefined}
@@ -100,6 +100,7 @@
             id={`input_${manager?.id}`}
             type="range"
             tabindex="-1"
+            aria-hidden="true"
             name={manager?.name}
             required={manager?.is_required}
             aria-readonly={manager?.is_read_only}
@@ -211,6 +212,10 @@
       0 0 0.4rem 0.1rem var(--shadow8),
       0 0 0 0.7rem var(--shadow8-t);
   }
+  .thumb:focus-visible {
+    outline: 2px solid var(--selected-t);
+    outline-offset: 2px;
+  }
   .thumb_dot {
     font-size: var(--font_size);
     color: var(--g2);
@@ -237,7 +242,7 @@
   .display_none {
     display: none;
   }
-  label {
+  .label {
     font-size: var(--label_font_size);
     font-weight: 600;
     color: var(--g12-t);

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

@@ -65,13 +65,30 @@ export function create_slider_manager(config) {
       new_val = input
     }
     if (step > 0) {
-      new_val = Math.round(new_val / step) * step
-      const step_decimal_places = (step.toString().split(".")[1] || "").length
-      new_val = parseFloat(new_val.toFixed(step_decimal_places))
+      new_val = min + Math.round((new_val - min) / step) * step
+      const decimal_places = Math.max(get_decimal_places(min), get_decimal_places(step))
+      new_val = Number(new_val.toFixed(Math.min(decimal_places, 100)))
     }
     return Math.max(min, Math.min(max, new_val))
   }
 
+  function get_decimal_places(input) {
+    const [coefficient, exponent = "0"] = String(input).toLowerCase().split("e")
+    return Math.max(0, (coefficient.split(".")[1] ?? "").length - Number(exponent))
+  }
+
+  function get_incremented_val(input, increments) {
+    if (!(step > 0)) return clean_val(input + increments * (max - min) / 100)
+    let step_index = (input - min) / step
+    const nearest_index = Math.round(step_index)
+    const tolerance = Number.EPSILON * Math.max(1, Math.abs(step_index)) * 4
+    if (Math.abs(step_index - nearest_index) <= tolerance) {
+      step_index = nearest_index
+    }
+    step_index = (increments > 0 ? Math.floor(step_index) : Math.ceil(step_index)) + increments
+    return clean_val(min + step_index * step)
+  }
+
   function set_hover(e) {
     const percent_decimal = get_e_percentage(e)
     if (Array.isArray(working_val) && working_val.length > 0) {
@@ -217,20 +234,20 @@ export function create_slider_manager(config) {
       return
     }
     const key = typeof key_or_event == "string" ? key_or_event : key_or_event?.key
-    const key_step = step > 0 ? step : (max - min) / 100
     let next_val = working_val?.[i]
+    if (!Number.isFinite(next_val)) return
     if (["ArrowLeft", "ArrowDown"].includes(key)) {
-      next_val = clean_val(next_val - key_step)
+      next_val = get_incremented_val(next_val, -1)
     } else if (["ArrowRight", "ArrowUp"].includes(key)) {
-      next_val = clean_val(next_val + key_step)
+      next_val = get_incremented_val(next_val, 1)
     } else if (key == "Home") {
       next_val = min
     } else if (key == "End") {
       next_val = max
     } else if (key == "PageDown") {
-      next_val = clean_val(next_val - key_step * 10)
+      next_val = get_incremented_val(next_val, -10)
     } else if (key == "PageUp") {
-      next_val = clean_val(next_val + key_step * 10)
+      next_val = get_incremented_val(next_val, 10)
     } else {
       return
     }

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

@@ -160,11 +160,10 @@ export function create_table_advanced_manager(config) {
     return default_json_schema
   }
 
-  let cur_page_to_use = $derived(
-    !Array.isArray(row_indexes_display_order) || row_indexes_display_order.length < rows_per_page_dropdown_manager?.val
-      ? 1
-      : cur_page
+  let total_pages = $derived(
+    Math.max(1, Math.ceil(row_indexes_display_order.length / (rows_per_page_dropdown_manager?.val ?? 100)))
   )
+  let cur_page_to_use = $derived(Math.max(1, Math.min(cur_page, total_pages)))
 
   let row_indexes_bulk_selected = $derived(
     Array.isArray(rows_prepped)
@@ -227,10 +226,10 @@ export function create_table_advanced_manager(config) {
   function get_row_indexes_shown() {
     if (!Array.isArray(row_indexes_display_order)) {
       return []
-    } else if (row_indexes_display_order.length < rows_per_page_dropdown_manager?.val) {
+    } else if (!is_paginate || row_indexes_display_order.length <= rows_per_page_dropdown_manager?.val) {
       return row_indexes_display_order
     }
-    const start_index = (cur_page - 1) * rows_per_page_dropdown_manager?.val
+    const start_index = (cur_page_to_use - 1) * rows_per_page_dropdown_manager?.val
     const end_index = start_index + rows_per_page_dropdown_manager?.val
     return row_indexes_display_order.slice(start_index, end_index)
   }
@@ -835,13 +834,7 @@ export function create_table_advanced_manager(config) {
     })
     pagination_manager = create_pagination_manager({
       cur_page: () => cur_page_to_use,
-      total_pages: () => {
-        if (Array.isArray(row_indexes_display_order)) {
-          return Math.ceil(row_indexes_display_order.length / rows_per_page_dropdown_manager?.val)
-        } else {
-          return 1
-        }
-      },
+      total_pages: () => total_pages,
       on_change: (input) => (cur_page = input),
     })
     rows_per_page_dropdown_manager = create_dropdown_manager({

package/dist/Components/TextInput/index.svelte

@@ -16,7 +16,7 @@
             <label for={`input_${manager?.id}`}>{manager?.label}:</label>
           {/if}
           {#if manager?.error_message}
-            <p class="error_text">{manager?.error_message}</p>
+            <p id={`input_error_${manager?.id}`} class="error_text">{manager?.error_message}</p>
           {/if}
         </div>
       {/if}
@@ -35,6 +35,9 @@
               style="max-height: {manager?.max_height}rem; border-radius: {manager?.border_radius}rem; margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
               type={manager?.input_type}
               name={manager?.name}
+              aria-label={manager?.aria_label ?? undefined}
+              aria-invalid={manager?.error_message ? "true" : undefined}
+              aria-describedby={manager?.error_message ? `input_error_${manager?.id}` : undefined}
               autocomplete={manager?.autocomplete}
               placeholder={manager?.placeholder}
               required={manager?.is_required}
@@ -56,6 +59,9 @@
               id={`input_${manager?.id}`}
               type={manager?.input_type}
               name={manager?.name}
+              aria-label={manager?.aria_label ?? undefined}
+              aria-invalid={manager?.error_message ? "true" : undefined}
+              aria-describedby={manager?.error_message ? `input_error_${manager?.id}` : undefined}
               autocomplete={manager?.autocomplete}
               placeholder={manager?.placeholder}
               {...["number", "tel"].includes(manager?.input_type) ? { pattern: "[0-9]*" } : {}}

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

@@ -82,6 +82,7 @@ export function create_text_input_manager(config) {
   let is_loading = $derived(set_closurable(config?.is_loading, false))
   let popover_header = $derived(set_closurable(config?.popover_header, null))
   let label = $derived(set_closurable(config?.label, null))
+  let aria_label = $derived(set_closurable(config?.aria_label, null))
   let name = $derived(set_closurable(config?.name, defaults?.[type]?.name ?? "text"))
   let is_required = $derived(set_closurable(config?.is_required, false))
   let is_read_only = $derived(set_closurable(config?.is_read_only, false))
@@ -319,6 +320,9 @@ export function create_text_input_manager(config) {
     get label() {
       return label
     },
+    get aria_label() {
+      return aria_label
+    },
     get autocomplete() {
       return autocomplete
     },

package/dist/Components/Tooltip/index.svelte

@@ -7,11 +7,31 @@
   let screen_width = $state(null)
   let screen_height = $state(null)
   let positions = $state(null)
+  let is_pointer_inside = $state(false)
+  let has_focus = $state(false)
+  let is_dismissed = $state(false)
+  let is_visible = $derived(!is_disabled && !is_dismissed && (is_pointer_inside || has_focus))
 
   function handle_pointer_enter() {
+    is_pointer_inside = true
+    is_dismissed = false
     positions = calc_positions()
   }
 
+  function handle_focus_in() {
+    has_focus = true
+    is_dismissed = false
+    positions = calc_positions()
+  }
+
+  function handle_focus_out(event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) has_focus = false
+  }
+
+  function handle_keydown(event) {
+    if (event.key === "Escape" && is_visible) is_dismissed = true
+  }
+
   function calc_positions() {
     let edge_forgiveness = 10
     let target_width = 400
@@ -78,17 +98,24 @@
   }
 </script>
 
-<svelte:window bind:innerWidth={screen_width} bind:innerHeight={screen_height} />
+<svelte:window bind:innerWidth={screen_width} bind:innerHeight={screen_height} onkeydown={handle_keydown} />
 
-<div id={`container_${id}`} class="container" class:is_disabled>
+<div
+  id={`container_${id}`}
+  role="presentation"
+  class="container"
+  class:is_disabled
+  onpointerenter={handle_pointer_enter}
+  onpointerleave={() => (is_pointer_inside = false)}
+  onfocusin={handle_focus_in}
+  onfocusout={handle_focus_out}
+>
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <div
     id={`toggle_${id}`}
     role="group"
     tabindex={is_disabled ? undefined : 0}
     aria-describedby={is_disabled ? undefined : `tooltip_${id}`}
-    onpointerenter={handle_pointer_enter}
-    onfocusin={handle_pointer_enter}
   >
     {#if target_content}
       {@render target_content()}
@@ -97,7 +124,9 @@
   <div
     id={`tooltip_${id}`}
     class="tooltip"
+    class:is_visible
     role="tooltip"
+    aria-hidden={!is_visible}
     style="
       --modal_top_pos: {positions?.modal_top_pos}; 
       --modal_left_pos: {positions?.modal_left_pos};
@@ -139,9 +168,7 @@
     overflow: auto;
     z-index: 11;
   }
-  .container:hover .tooltip,
-  .container:focus-within .tooltip,
-  .container:active .tooltip {
+  .tooltip.is_visible {
     visibility: visible;
     opacity: 1;
   }

package/dist/client/index.js

@@ -15,6 +15,7 @@ export {
 } from "../Components/TimeInput/index.js"
 export { intersection_observer } from "../actions/index.js"
 export { normalize_link_href } from "./links.js"
+export { v } from "./value.svelte.js"
 
 function has_own(value, key) {
   return (
@@ -833,35 +834,3 @@ export function set_definition_stack(input, definition_stack, pass_event_down) {
   }
   return finish_update(defined_variables_loc)
 }
-
-// tbd could also turn into a typed thing with arrays of v or objects, color, etc
-export function v(config) {
-  let val = $state(null)
-  function on_change(from_id = null) {
-    if (typeof config?.on_change == "function") {
-      config?.on_change({ val, from_id: from_id })
-    }
-  }
-  function init(config) {
-    val = config?.val
-  }
-  init(config)
-  return {
-    get val() {
-      return val
-    },
-    set val(input) {
-      val = input
-      on_change()
-    },
-    set_val(input) {
-      if (typeof input == "object" && input?.from_id) {
-        val = input?.val
-        on_change(input?.from_id)
-      } else {
-        val = input
-        on_change()
-      }
-    },
-  }
-}

package/dist/client/value.svelte.js

@@ -0,0 +1,30 @@
+export function v(config) {
+  let val = $state(null)
+  function on_change(from_id = null) {
+    if (typeof config?.on_change == "function") {
+      config?.on_change({ val, from_id: from_id })
+    }
+  }
+  function init(config) {
+    val = config?.val
+  }
+  init(config)
+  return {
+    get val() {
+      return val
+    },
+    set val(input) {
+      val = input
+      on_change()
+    },
+    set_val(input) {
+      if (typeof input == "object" && input?.from_id) {
+        val = input?.val
+        on_change(input?.from_id)
+      } else {
+        val = input
+        on_change()
+      }
+    },
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.80",
+  "version": "1.1.82",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "repository": {
@@ -41,7 +41,7 @@
     "version:available": "node ./scripts/use-next-npm-version.js",
     "postpublish": "npm run clean:dist",
     "prepublishOnly": "npm run verify",
-    "publish:npm": "npm run package && npm run version:available && (npm whoami >/dev/null 2>&1 || npm login --auth-type=web) && npm publish"
+    "publish:npm": "npm run version:available && (npm whoami >/dev/null 2>&1 || npm login --auth-type=web) && npm publish"
   },
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
@@ -58,11 +58,11 @@
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@vercel/analytics": "^2.0.1",
     "jsdom": "^30.0.1",
-    "svelte": "^5.56.10",
+    "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [