sveltekit-ui 1.1.75 → 1.1.77

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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.
+- Accept Apple's domain-restricted, non-expiring MapKit JS tokens while continuing to reject malformed and expired tokens.
+
 ## 1.1.75 - 2026-07-25
 
 ### Security and resilience

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

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

@@ -6,6 +6,8 @@
   import DisplayFile from "./DisplayFile/index.svelte"
   import FileInput from "../FileInput/index.svelte"
   import InfoBox from "../InfoBox/index.svelte"
+  import Checkbox from "../Checkbox/index.svelte"
+  import Icon from "../Icon/index.svelte"
   import { onDestroy } from "svelte"
 
   let { manager } = $props()
@@ -13,6 +15,41 @@
   onDestroy(() => manager?.on_destroy?.())
 </script>
 
+{#snippet file_item(file)}
+  {#if manager?.view_mode === "list"}
+    <div class="file_row" data-file-view="list">
+      {#if manager?.is_multiselect}
+        <Checkbox manager={file?.selection_checkbox_manager} />
+      {/if}
+      <div class="list_file_icon">
+        <Icon manager={manager?.list_file_icon_manager} />
+      </div>
+      <h4 title={file?.file_name}>{file?.file_name}</h4>
+      <p class="list_file_type">{file?.mime_type ?? file?.file?.type}</p>
+      <p class="list_file_size">{file?.size_kb != null ? `${file.size_kb}KB` : ""}</p>
+      {#if !manager?.is_multiselect}
+        <div class="list_file_action">
+          <Button manager={file?.select_button_manager} />
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div class="file_container" data-file-view="grid">
+      <div>
+        <div class="file_display" style="height: {manager?.display_height}rem;">
+          <DisplayFile manager={file} />
+        </div>
+        <div class="file_det">
+          <p>{file?.mime_type ?? file?.file?.type}</p>
+          <p>{file?.size_kb != null ? `${file.size_kb}KB` : ""}</p>
+        </div>
+        <h4>{file?.file_name}</h4>
+      </div>
+      <Button manager={file?.select_button_manager} />
+    </div>
+  {/if}
+{/snippet}
+
 <div style="margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;">
   {#if manager?.is_show_button}
     <Button manager={manager?.select_file_from_storage_button_manager} />
@@ -35,27 +72,28 @@
     {#snippet content()}
       <div>
         <InfoBox message={manager?.error_message} mb={1} />
+        {#if manager?.is_show_select_all_locally_uploaded_files || manager?.is_show_file_view_controls}
+          <div class="picker_toolbar">
+            {#if manager?.is_show_select_all_locally_uploaded_files}
+              <Button manager={manager?.select_all_locally_uploaded_files_button_manager} />
+            {/if}
+            {#if manager?.is_show_file_view_controls}
+              <div class="view_toggle" role="group" aria-label="File view">
+                <Button manager={manager?.grid_view_button_manager} />
+                <Button manager={manager?.list_view_button_manager} />
+              </div>
+            {/if}
+          </div>
+        {/if}
         {#if manager?.storage_origins.includes("locally_uploaded_files")}
           <h3>Locally Uploaded Files</h3>
           <div>
             <FileInput manager={manager?.file_input_manager} />
           </div>
           {#if Array.isArray(manager?.locally_uploaded_files_prepped) && manager?.locally_uploaded_files_prepped.length > 0}
-            <div class="files_container">
+            <div class:list_view={manager?.view_mode === "list"} class="files_container">
               {#each manager?.locally_uploaded_files_prepped as locally_uploaded_file_prepped (locally_uploaded_file_prepped?.id)}
-                <div class="file_container">
-                  <div>
-                    <div class="file_display" style="height: {manager?.display_height}rem;">
-                      <DisplayFile manager={locally_uploaded_file_prepped} />
-                    </div>
-                    <div class="file_det">
-                      <p>{locally_uploaded_file_prepped?.file?.type}</p>
-                      <p>{Math.round(locally_uploaded_file_prepped?.file?.size * 0.001)}KB</p>
-                    </div>
-                    <h4>{locally_uploaded_file_prepped?.file_name}</h4>
-                  </div>
-                  <Button manager={locally_uploaded_file_prepped?.select_button_manager} />
-                </div>
+                {@render file_item(locally_uploaded_file_prepped)}
               {/each}
             </div>
           {:else}
@@ -79,22 +117,10 @@
               {/if}
             </div>
             <div class="storage_files_container">
-              <div class="files_container">
+              <div class:list_view={manager?.view_mode === "list"} class="files_container">
                 {#if Array.isArray(manager?.storage_files_prepped) && manager?.storage_files_prepped.length > 0}
                   {#each manager?.storage_files_prepped as storage_file_prepped (storage_file_prepped?.id)}
-                    <div class="file_container">
-                      <div>
-                        <div style="height: 20rem;">
-                          <DisplayFile manager={storage_file_prepped} />
-                        </div>
-                        <div class="file_det">
-                          <p>{storage_file_prepped?.mime_type}</p>
-                          <p>{storage_file_prepped?.size_kb}KB</p>
-                        </div>
-                        <h4>{storage_file_prepped?.file_name}</h4>
-                      </div>
-                      <Button manager={storage_file_prepped?.select_button_manager} />
-                    </div>
+                    {@render file_item(storage_file_prepped)}
                   {/each}
                 {:else}
                   <p>No files-to-upload found</p>
@@ -125,6 +151,18 @@
 </div>
 
 <style>
+  .picker_toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+  .view_toggle {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: auto;
+  }
   .storage_container {
     display: flex;
   }
@@ -144,6 +182,11 @@
     grid-template-columns: repeat(auto-fill, minmax(clamp(20%, 20rem, 100%), 1fr));
     grid-auto-rows: 1fr;
   }
+  .files_container.list_view {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
   .file_container {
     display: flex;
     flex-direction: column;
@@ -190,4 +233,50 @@
     max-height: 20rem;
     max-width: 100%;
   }
+  .file_row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+    padding: 0.75rem;
+    border: 1px solid var(--shadow3-t);
+    border-radius: 1rem;
+  }
+  .file_row h4,
+  .file_row p {
+    margin: 0;
+  }
+  .file_row h4 {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .list_file_icon {
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+  }
+  .list_file_type,
+  .list_file_size {
+    color: var(--g7-t);
+    white-space: nowrap;
+  }
+  .list_file_action {
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 600px) {
+    .picker_toolbar {
+      align-items: stretch;
+      flex-direction: column;
+    }
+    .view_toggle {
+      align-self: flex-end;
+    }
+    .list_file_type {
+      display: none;
+    }
+  }
 </style>