sveltekit-ui 1.1.75 → 1.1.76

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Component fixes
+
+- Preserve native button activation, including popover toggles and form submission, when an `on_click` callback starts an async loading state, while still blocking repeated actions until it settles.
+
 ## 1.1.75 - 2026-07-25
 
 ### Security and resilience

package/dist/Components/Alert/manager.svelte.d.ts

@@ -0,0 +1,13 @@
+export function create_alert_manager(config: any): {
+    readonly interval: null;
+    readonly alerts: any[];
+    readonly is_small_screen: boolean;
+    readonly x_color: string;
+    readonly border_radius: number;
+    readonly success_icon_color: string;
+    readonly error_icon_color: string;
+    add_alert: (header: any, message: any, icon: any) => void;
+    delete_alert: (id: any) => void;
+    run_auto_delete: () => void;
+    destroy: () => void;
+};

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

@@ -1,5 +1,5 @@
 import { create_unique_id } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 import { browser } from "$app/environment"
 
 export function create_alert_manager(config) {

package/dist/Components/Attachment/manager.svelte.d.ts

@@ -0,0 +1,14 @@
+export function create_attachment_manager(config: any): {
+    readonly val_prepped: null;
+    readonly show_content_popover_manager: null;
+    readonly show_content_button_manager: null;
+    readonly download_button_manager: null;
+    readonly is_show_content: any;
+    readonly error_message: string;
+    readonly download_is_loading: boolean;
+    readonly content_error_message: string;
+    readonly download_error_message: string;
+    download_attachment: (input?: null) => Promise<void>;
+    set_val_prepped: (input: any) => void;
+    destroy: () => void;
+};

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

@@ -1,9 +1,9 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_image_manager } from "../Image/index.svelte.js"
-import { create_audio_manager } from "../Audio/index.svelte.js"
-import { create_json_manager } from "../Json/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_image_manager } from "../Image/manager.svelte.js"
+import { create_audio_manager } from "../Audio/manager.svelte.js"
+import { create_json_manager } from "../Json/manager.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
 import { set_closurable } from "../../client/index.js"
 
 export function create_attachment_manager(config) {

package/dist/Components/Audio/manager.svelte.d.ts

@@ -0,0 +1,55 @@
+export function create_audio_manager(config: any): {
+    id: string;
+    readonly src: null;
+    readonly type: string;
+    readonly title: null;
+    readonly artist: null;
+    readonly album: null;
+    readonly image_src: null;
+    readonly image_type: null;
+    readonly default_skip_time: number;
+    readonly ui_type: string;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly is_hide_image: any;
+    readonly play_pause_button_manager: null;
+    readonly time_slider_manager: null;
+    readonly settings_popover_manager: null;
+    readonly settings_button_manager: null;
+    readonly volume_slider_manager: null;
+    readonly rate_slider_manager: null;
+    readonly has_setup_media_session: boolean;
+    readonly formatted_duration: string;
+    readonly formatted_current_time: string;
+    readonly is_loading: boolean;
+    readonly download_audio_button_manager: null;
+    readonly is_show_download_button: any;
+    readonly download_is_loading: boolean;
+    readonly download_error_message: null;
+    readonly playback_error_message: null;
+    handle_mount: () => void;
+    handle_loaded_metadata: () => void;
+    handle_progress: () => void;
+    handle_time_update: () => void;
+    handle_volume_change: (volume: any) => void;
+    handle_rate_change: (rate: any) => void;
+    handle_seeking: () => void;
+    handle_can_play: () => void;
+    seek_to_audio: (time: any) => void;
+    resize_image: (src: any, callback: any) => void;
+    setup_media_session: () => void;
+    update_position_state: () => void;
+    nav_seek_backward: (details: any) => void;
+    nav_seek_forward: (details: any) => void;
+    toggle_play_pause: () => void;
+    play_audio: () => Promise<void>;
+    pause_audio: () => void;
+    handle_playing: () => void;
+    handle_ended: () => void;
+    handle_audio_error: () => void;
+    download_audio: () => Promise<void>;
+    set_is_loading: (input: any) => void;
+    destroy: () => void;
+};

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

@@ -1,7 +1,7 @@
 import { browser } from "$app/environment"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_slider_manager } from "../Slider/manager.svelte.js"
 import { create_unique_id, set_closurable, deep_copy } from "../../client/index.js"
 
 let active_media_session_owner_id = null

package/dist/Components/AudioEditor/manager.svelte.d.ts

@@ -0,0 +1,254 @@
+export function create_audio_editor_manager(config: any): {
+    id: string;
+    readonly account: any;
+    readonly is_text_to_audio: boolean;
+    readonly is_disabled: any;
+    readonly is_read_only: any;
+    readonly error_message: null;
+    readonly success_message: null;
+    readonly generate_audio_changes_button_manager: null;
+    readonly use_text_to_audio_button_manager: null;
+    readonly select_file_from_storage_button_manager: null;
+    readonly use_mp3_file_button_manager: null;
+    readonly text_to_audio_text_input_manager: null;
+    readonly file_name_text_input_manager: null;
+    readonly additional_tags_input_prepped: null;
+    readonly additional_tag_keys_ordered: string[];
+    readonly audio_storage_picker_manager: null;
+    readonly title_text_input_manager: null;
+    readonly album_title_text_input_manager: null;
+    readonly image_storage_picker_manager: null;
+    readonly image_description_text_input_manager: null;
+    readonly artist_text_input_manager: null;
+    readonly lyrics_text_input_manager: null;
+    readonly release_year_text_input_manager: null;
+    readonly language_dropdown_manager: null;
+    readonly is_popover: boolean;
+    readonly popover_manager: null;
+    readonly text_to_audio_time_in_minutes: number;
+    readonly voice_options: null;
+    readonly voice_id: null;
+    readonly edit_voice_popover_manager: null;
+    readonly edit_voice_button_manager: null;
+    readonly seed_from_input_popover_manager: null;
+    readonly seed_from_input_popover_button_manager: null;
+    readonly seed_audio_storage_picker_manager: null;
+    readonly is_loading_generate_audio: boolean;
+    readonly generated_audio_file_obj: null;
+    readonly audio_manager: null;
+    readonly clear_generated_audio_button_manager: null;
+    readonly download_audio_file_button_manager: null;
+    readonly clear_button_manager: null;
+    readonly finish_button_manager: null;
+    readonly additional_metatags_dropdown_manager: null;
+    audio_input_tag_defs: {
+        TIT2: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TALB: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        APIC: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPE1: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        USLT: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TYER: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TLAN: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TIT3: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPE2: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TCOM: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TCON: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TIT1: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPE3: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPE4: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TRCK: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPOS: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TPUB: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TKEY: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TMED: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TDAT: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TSRC: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TCOP: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TEXT: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WCOM: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WCOP: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WOAF: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WOAR: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WOAS: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WORS: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WPAY: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        WPUB: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TLEN: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TBPM: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        COMM: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        IPLS: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        SYLT: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        TXXX: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+        PRIV: {
+            display_order: number;
+            name: string;
+            example: string;
+        };
+    };
+    lang_options: {
+        key: string;
+        name: string;
+    }[];
+    init: (config: any) => void;
+    seed: (input: any) => Promise<void>;
+    get_audio_metadata: (audio_file: any, signal: any) => Promise<{
+        tags: null;
+        image: null;
+    }>;
+    resize_and_convert_image: (src: any, max_width: any, max_height: any, output_format: any) => Promise<any>;
+    set_text_to_audio_input: (val: any) => void;
+    generate_new_audio: () => Promise<void>;
+    download_audio_file: () => Promise<void>;
+    set_is_text_to_audio: (is_text_to_audio_input: any) => void;
+    clear: () => void;
+    finish: () => void;
+    on_destroy: () => void;
+};

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

@@ -1,10 +1,10 @@
 import { create_unique_id, set_closurable, clean_file_name, url_to_file } from "../../client/index.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_storage_picker_manager } from "../StoragePicker/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_audio_manager } from "../Audio/index.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_storage_picker_manager } from "../StoragePicker/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_audio_manager } from "../Audio/manager.svelte.js"
 import alloy_voice_sample from "./samples/alloy-voice-sample.mp3"
 import echo_voice_sample from "./samples/echo-voice-sample.mp3"
 import fable_voice_sample from "./samples/fable-voice-sample.mp3"

package/dist/Components/AuthCodeInput/manager.svelte.d.ts

@@ -0,0 +1,18 @@
+export function create_auth_code_input_manager(config: any): {
+    id: string;
+    readonly val: any;
+    readonly name: any;
+    readonly is_required: any;
+    readonly is_read_only: any;
+    readonly autocomplete: any;
+    readonly aria_label: any;
+    readonly is_valid: any;
+    readonly is_disabled: any;
+    readonly border_radius: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    set_val: (input: any) => void;
+    set_focus: () => void;
+};

package/dist/Components/Breadcrumbs/manager.svelte.d.ts

@@ -0,0 +1,8 @@
+export function create_breadcrumbs_manager(config: any): {
+    readonly val: null;
+    readonly breadcrumb_managers: null;
+    readonly back_button_manager: null;
+    readonly slash_button_manager: null;
+    set_val: (input: any) => void;
+    select_path_breadcrumb_index: (i: any) => void;
+};

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

@@ -1,5 +1,5 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
 import { deep_copy } from "../../client/index.js"
 
 export function create_breadcrumbs_manager(config) {

package/dist/Components/Button/index.svelte

@@ -101,14 +101,14 @@
       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}
+      disabled={manager?.is_link ? undefined : manager?.is_native_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}
+      aria-disabled={manager?.is_action_disabled ? "true" : undefined}
       aria-busy={manager?.is_loading}
     >
       {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}

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

@@ -0,0 +1,79 @@
+export function create_button_manager(config: any): {
+    id: string;
+    readonly type: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly pl: any;
+    readonly pr: any;
+    readonly pt: any;
+    readonly pb: any;
+    readonly border_radius: any;
+    readonly is_loading: any;
+    readonly is_pointer_down: boolean;
+    readonly is_prevent_default: any;
+    readonly is_stop_propagation: any;
+    readonly tabindex: any;
+    readonly is_disabled: any;
+    readonly is_action_disabled: any;
+    readonly is_native_disabled: any;
+    readonly selected_type: any;
+    readonly is_hovered: boolean;
+    readonly min_height: any;
+    readonly fixed_width: any;
+    readonly min_width: any;
+    readonly is_compressed: any;
+    readonly is_pill: any;
+    readonly is_uniform: any;
+    readonly cursor: any;
+    readonly text_align: any;
+    readonly text: any;
+    readonly is_success_animation: any;
+    readonly font_size: any;
+    readonly line_height: any;
+    readonly font_weight: any;
+    readonly color: any;
+    readonly gradient_to_color: any;
+    readonly gradient_turn: any;
+    readonly contrast_color: any;
+    readonly border_color: any;
+    readonly hover_shadow_color: any;
+    readonly hover_shadow_size: any;
+    readonly support_icon: any;
+    readonly is_icon_bg_tint: any;
+    readonly icon_deg: any;
+    readonly icon_sw: any;
+    readonly icon_size: any;
+    readonly icon_ml: any;
+    readonly icon_mr: any;
+    readonly icon_pos: any;
+    readonly is_icon_shimmyable: any;
+    readonly icon_movement_stiffness: any;
+    readonly icon_movement_damping: any;
+    readonly aria_label: any;
+    readonly popover_target: any;
+    readonly href: string | null;
+    readonly target: any;
+    readonly rel: any;
+    readonly download: any;
+    readonly html_type: any;
+    readonly is_link: boolean;
+    readonly element_tag: string;
+    readonly is_no_wrap: any;
+    readonly is_word_break_all: any;
+    readonly is_simulated_active: any;
+    readonly is_success: boolean;
+    readonly is_error: boolean;
+    readonly icon_manager: null;
+    success_trigger: () => void;
+    error_trigger: () => void;
+    icon_shimmy_trigger: () => void;
+    handle_click: (e: any) => Promise<any>;
+    pointer_down: () => void;
+    pointer_up: () => void;
+    pointer_enter: () => void;
+    pointer_leave: () => void;
+    simulate_click: () => void;
+    focus: () => void;
+};

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

@@ -1,5 +1,5 @@
 import { create_unique_id, normalize_link_href, set_closurable } from "../../client/index.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
 
 export function create_button_manager(config) {
   const id = create_unique_id(null, 20)
@@ -87,7 +87,12 @@ export function create_button_manager(config) {
   let is_error = $state(false)
   let is_success = $state(false)
   let icon_manager = $state(null)
+  let is_native_activation_in_progress = $state(false)
   let is_action_disabled = $derived(is_disabled || is_loading || is_success || is_error)
+  let is_native_disabled = $derived(
+    is_disabled ||
+      (!is_native_activation_in_progress && (is_loading || is_success || is_error)),
+  )
 
   let is_hovered = $state(false)
   let is_pointer_down = $state(false)
@@ -115,6 +120,13 @@ export function create_button_manager(config) {
     }
   }
 
+  function preserve_current_native_activation() {
+    is_native_activation_in_progress = true
+    queueMicrotask(() => {
+      is_native_activation_in_progress = false
+    })
+  }
+
   async function handle_click(e) {
     if (is_action_disabled) {
       e?.preventDefault?.()
@@ -127,6 +139,7 @@ export function create_button_manager(config) {
     if (is_stop_propagation) {
       e?.stopPropagation?.()
     }
+    preserve_current_native_activation()
     try {
       let result = typeof config?.on_click == "function" ? config.on_click(e) : undefined
       if (result && typeof result.then == "function") {
@@ -270,6 +283,9 @@ export function create_button_manager(config) {
     get is_action_disabled() {
       return is_action_disabled
     },
+    get is_native_disabled() {
+      return is_native_disabled
+    },
     get selected_type() {
       return selected_type
     },

package/dist/Components/Chart/manager.svelte.d.ts

@@ -0,0 +1,46 @@
+export function create_chart_manager(config: any): {
+    readonly datasets: null;
+    readonly chart_prepped: null;
+    readonly y_axis_width: number;
+    readonly x_axis_height: number;
+    readonly grid_width: null;
+    readonly frame_width: number;
+    period_to_sec: {
+        "5m": number;
+        "10m": number;
+        "15m": number;
+        "20m": number;
+        "30m": number;
+        "45m": number;
+        "1h": number;
+        "2h": number;
+        "3h": number;
+        "4h": number;
+        "6h": number;
+        "8h": number;
+        "12h": number;
+        "1d": number;
+        "2d": number;
+        "3d": number;
+        "4d": number;
+        "1w": number;
+        "2w": number;
+    };
+    handle_scroll_frame: (e: any) => void;
+    handle_pointer_down: (e: any, frame_index: any) => void;
+    handle_pointer_move: (e: any, frame_index: any) => void;
+    handle_pointer_up: (e: any, frame_index: any) => void;
+    handle_pointer_cancel: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_down: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_move: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_up: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_cancel: (e: any, frame_index: any) => void;
+    handle_y_axis_click: (frame_index: any) => void;
+    handle_scroll_y_axis: (e: any, frame_index: any) => void;
+    handle_chart_hover: (e: any, frame_index: any) => void;
+    handle_chart_hover_leave: (e: any, frame_index: any) => void;
+    set_grid_width: (input: any) => void;
+    gen_color: (l: any, c: any, h: any, o?: number, is_theme_based?: boolean, dark_l_offset?: number, is_dark_theme?: boolean, is_safari?: boolean) => string;
+    set_datasets: (input: any) => void;
+    refresh_chart: (opts?: {}) => void;
+};

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