sveltekit-ui 1.1.73 → 1.1.75

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+## 1.1.75 - 2026-07-25
+
+### Security and resilience
+
+- Reject executable or malformed link targets in `Link`, `Button`, `InfoBox`, and rendered content.
+- Escape generated email HTML and restrict emitted attributes, URLs, and inline style values.
+- Generate identifiers with cryptographically secure randomness when available, and harden theme cookies.
+- Make browser-dependent utilities safe to import and call during server rendering.
+- Harden CSV parsing against malformed input and prototype-key mutation.
+
+### Component fixes
+
+- Correct manager/view contracts across content, table, number, tag, cron, code, icon, location, media, and input components.
+- Fix stale Svelte 5 state, disabled input behavior, keyboard interaction, labels, popovers, tooltips, and horizontal scrolling.
+- Prevent invalid paragraph nesting and hydration mismatches when rich content contains interactive or block elements.
+- Add accessible names and document landmarks to icon-only controls, theme toggles, navigation, and documentation pages.
+- Improve MapKit loading and failure states, embedded media URL handling, and object URL cleanup.
+- Restore missing public exports and aliases, including `Alert`, `Confetti`, `PhoneCountryCode`, and `YouTubeVideo`.
+
+### Packaging and quality
+
+- Publish generated type declarations and a restricted package file set.
+- Move Svelte to peer dependencies and add explicit Svelte 5 / SvelteKit 2 compatibility metadata.
+- Add automated component, manager, utility, action, security, public API, and package-content checks.
+- Load documentation showcases on demand and replace the oversized home-page documentation dump with a lightweight summary.
+- Update development dependencies and resolve known dependency audit findings.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SvelteKit UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,35 +1,62 @@
-## Setup
+# SvelteKit UI
 
-Refer to https://www.sveltekit-ui.com. for documentation
+SvelteKit UI is a Svelte 5 component library built around paired components and reactive manager functions. It is intended for SvelteKit 2 applications.
 
-You can use an existing sveltekit project and install this package in your project with
-`npm install sveltekit-ui`
+The component documentation and interactive examples live at [sveltekit-ui.com](https://www.sveltekit-ui.com).
 
-or to start a new project with a starter template (recommended). In your terminal cd into a folder you want to put your project files in such as /projects/my-project-all to use as the parent folder for stuff related to your project (but replace "my-project" with your own project name)
+## Install
 
-`npx create-sveltekit-ui-site my-project`
+```sh
+npm install sveltekit-ui
+```
+
+Import the shared styles once in your root layout:
+
+```svelte
+<script>
+  import "sveltekit-ui/style.css"
+  import { Button, create_button_manager } from "sveltekit-ui"
 
-## Open Code Editor
+  const button = create_button_manager({
+    text: "Save",
+    on_click: () => console.log("saved"),
+  })
+</script>
+
+<Button manager={button} />
+```
 
-`code .` should open the project in your code editor such as vscode
+Most interactive components expose a `create_*_manager` function. The manager owns state and behavior; the Svelte component renders that manager. Components that depend on browser APIs should be initialized or used in the browser, while imports remain safe during SvelteKit server rendering.
 
-## Update Package
+## Starter project
 
-It's possible the starter template is a few updates behind. Check for updates by running `ncu -u`. You should run that periodically to keep the latest version of your npm packges
+To create a new site using the library:
 
-## Developing
+```sh
+npx create-sveltekit-ui-site my-project
+```
 
-Once you've created a project and installed dependencies start a development server:
+## Development
 
-```bash
-npm i
+```sh
+npm install
 npm run dev
 ```
 
-## Browser
+Copy `.env.example` to `.env` and provide `PUBLIC_APPLE_MAPKIT_JS_API_KEY` if you want to run the MapKit showcases locally.
+
+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.
 
-That should spit out a url like http://localhost:5173/ where you should see your starting website.
+## Compatibility and releases
 
-## Code Generator
+- Svelte 5 is required.
+- SvelteKit 2 is required because some components use SvelteKit navigation and environment modules.
+- Public API changes are documented with package releases. Consumers should review release notes before adopting a new minor version.
 
-This is experimental but you can check out https://www.contibase.com/code_generator for component building help
+The experimental Contibase code generator is available at [contibase.com/code_generator](https://www.contibase.com/code_generator).

package/dist/Components/Alert/index.svelte

@@ -6,13 +6,20 @@
   import { fly } from "svelte/transition"
 
   let { manager = null, options = null, on_alert_added } = $props()
+
+  $effect(() => {
+    const current_manager = manager
+    current_manager?.run_auto_delete?.()
+    return () => current_manager?.destroy?.()
+  })
 </script>
 
-<div class="alerts_container">
+<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)}
       <div
         class="card alert_box"
+        role="status"
         class:alert_container={!manager?.is_small_screen}
         class:small_alert_container={manager?.is_small_screen}
         style="--br: {manager?.border_radius}rem;"

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

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

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

@@ -1,5 +1,6 @@
 import { create_unique_id } from "../../client/index.js"
 import { create_button_manager } from "../Button/index.svelte.js"
+import { browser } from "$app/environment"
 
 export function create_alert_manager(config) {
   let alerts = $state([])
@@ -15,7 +16,7 @@ export function create_alert_manager(config) {
       clearInterval(interval)
       interval = null
     }
-    if (Array.isArray(alerts) && alerts.length > 0) {
+    if (browser && Array.isArray(alerts) && alerts.length > 0) {
       interval = setInterval(function () {
         if (Array.isArray(alerts) && alerts.length > 0) {
           alerts.sort((a, b) => a?.epoch - b?.epoch)
@@ -50,6 +51,7 @@ export function create_alert_manager(config) {
         type: "soft",
         support_icon: "x",
         is_uniform: true,
+        aria_label: "Dismiss notification",
         on_click: () => delete_alert(id),
       }),
     }
@@ -63,13 +65,34 @@ export function create_alert_manager(config) {
   }
 
   function init(config) {
-    alerts = config?.alerts ?? []
+    alerts = Array.isArray(config?.alerts)
+      ? config.alerts.map((alert) => {
+          const id = alert?.id ?? create_unique_id(null, 20)
+          return {
+            ...alert,
+            id,
+            epoch: alert?.epoch ?? Math.floor(Date.now() / 1000),
+            x_button_manager:
+              alert?.x_button_manager ??
+              create_button_manager({
+                type: "soft",
+                support_icon: "x",
+                is_uniform: true,
+                aria_label: "Dismiss notification",
+                on_click: () => delete_alert(id),
+              }),
+          }
+        })
+      : []
     is_small_screen = config?.is_small_screen ?? false
     x_color = config?.x_color ?? "var(--g7-t)"
     border_radius = config?.border_radius ?? 1
     success_icon_color = config?.success_icon_color ?? "var(--success-t)"
-    error_icon_color = config?.alerts ?? "var(--error-t)"
-    run_auto_delete()
+    error_icon_color = config?.error_icon_color ?? "var(--error-t)"
+  }
+  function destroy() {
+    if (interval) clearInterval(interval)
+    interval = null
   }
   init(config)
 
@@ -97,5 +120,7 @@ export function create_alert_manager(config) {
     },
     add_alert,
     delete_alert,
+    run_auto_delete,
+    destroy,
   }
 }

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

@@ -0,0 +1,15 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    direction?: string;
+    is_open?: boolean;
+    color_one?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    direction?: string;
+    is_open?: boolean;
+    color_one?: string;
+};

package/dist/Components/Attachment/index.svelte

@@ -7,14 +7,19 @@
   import Icon from "../Icon/index.svelte"
 
   let { manager } = $props()
+
+  $effect(() => {
+    const current_manager = manager
+    return () => current_manager?.destroy?.()
+  })
 </script>
 
 {#snippet display_content()}
-  {#if ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(manager?.val_prepped?.content_type)}
+  {#if ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(manager?.val_prepped?.content_type) && manager?.val_prepped?.image_manager}
     <Image manager={manager?.val_prepped?.image_manager} />
-  {:else if ["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(manager?.val_prepped?.content_type)}
+  {:else if ["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(manager?.val_prepped?.content_type) && manager?.val_prepped?.audio_manager}
     <Audio manager={manager?.val_prepped?.audio_manager} />
-  {:else if ["application/json"].includes(manager?.val_prepped?.content_type)}
+  {:else if ["application/json"].includes(manager?.val_prepped?.content_type) && manager?.val_prepped?.json_manager}
     <Json manager={manager?.val_prepped?.json_manager} />
   {/if}
 {/snippet}
@@ -27,11 +32,9 @@
         <p class="file_name">{manager?.val_prepped?.name}</p>
         <p style="margin-top: 0; line-height: 1.4rem; color: var(--g10-t); font-size: 1.2rem;">
           {manager?.val_prepped?.content_type}
-          <span style="color: var(--g6-t); font-size: 1.2rem; margin-left: 1rem;"
-            >{manager?.val_prepped?.content
-              ? `${Math.round(((manager?.val_prepped?.content.length * 3) / 4) * 0.001)}KB`
-              : ""}</span
-          >
+          <span style="color: var(--g6-t); font-size: 1.2rem; margin-left: 1rem;">
+            {manager?.val_prepped?.size_label ?? ""}
+          </span>
         </p>
       </div>
     </div>
@@ -42,6 +45,9 @@
       {/if}
     </div>
   </div>
+  {#if manager?.error_message}
+    <p class="error_message" role="alert">{manager.error_message}</p>
+  {/if}
   {#if manager?.is_show_content}
     {@render display_content()}
   {/if}
@@ -74,4 +80,8 @@
     overflow: hidden;
     min-width: 0;
   }
+  .error_message {
+    color: oklch(var(--l3-t) var(--c16) var(--h3));
+    margin: 0.5rem 0;
+  }
 </style>

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

@@ -11,15 +11,53 @@ export function create_attachment_manager(config) {
   let show_content_popover_manager = $state(null)
   let show_content_button_manager = $state(null)
   let download_button_manager = $state(null)
+  let content_error_message = $state("")
+  let download_error_message = $state("")
+  let error_message = $derived(content_error_message || download_error_message)
+  let download_is_loading = $state(false)
   let is_show_content = $derived(set_closurable(config?.is_show_content, false))
+  const object_urls = new Set()
+  const revoke_timeout_ids = new Set()
+
+  function destroy_embedded_content(input) {
+    input?.image_manager?.destroy?.()
+    input?.audio_manager?.destroy?.()
+    input?.json_manager?.destroy?.()
+  }
+
+  function decode_json_content(content) {
+    const binary_content = atob(String(content ?? ""))
+    const bytes = Uint8Array.from(binary_content, (character) => character.charCodeAt(0))
+    return JSON.parse(new TextDecoder().decode(bytes))
+  }
+
+  function get_content_size(content) {
+    const normalized_content = String(content ?? "").replace(/\s/g, "")
+    if (!normalized_content) return 0
+    const padding = normalized_content.endsWith("==") ? 2 : normalized_content.endsWith("=") ? 1 : 0
+    return Math.max(0, Math.floor((normalized_content.length * 3) / 4) - padding)
+  }
+
+  function format_file_size(size) {
+    if (!size) return ""
+    if (size < 1000) return `${size} B`
+    if (size < 1000000) return `${Math.round(size / 1000)} KB`
+    return `${(size / 1000000).toFixed(1)} MB`
+  }
 
   function set_val_prepped(input) {
+    destroy_embedded_content(val_prepped)
+    content_error_message = ""
+    download_error_message = ""
+
     if (!input || typeof input != "object" || Array.isArray(input)) {
       val_prepped = null
+      content_error_message = "Attachment data is missing or invalid."
       return
     }
     let val_prepped_loc = {
       ...input,
+      size_label: format_file_size(get_content_size(input?.content)),
     }
     if (["image/webp", "image/jpeg", "image/png", "image/gif"].includes(input?.content_type)) {
       val_prepped_loc.image_manager = create_image_manager({
@@ -45,14 +83,17 @@ export function create_attachment_manager(config) {
         sw: 30,
       })
     } else if (["application/json"].includes(input?.content_type)) {
-      const decoded_content = atob(input.content)
-      const extracted_json = JSON.parse(decoded_content)
-      val_prepped_loc.json_manager = create_json_manager({
-        is_edit_mode: false,
-        is_popover: false,
-        is_show_buttons: true,
-        val: extracted_json,
-      })
+      try {
+        const extracted_json = decode_json_content(input.content)
+        val_prepped_loc.json_manager = create_json_manager({
+          is_edit_mode: false,
+          is_popover: false,
+          is_show_buttons: true,
+          val: extracted_json,
+        })
+      } catch {
+        content_error_message = "This attachment does not contain valid JSON."
+      }
       val_prepped_loc.icon_manager = create_icon_manager({
         icon_id: "file", // tbd
         sw: 30,
@@ -66,14 +107,48 @@ export function create_attachment_manager(config) {
     val_prepped = val_prepped_loc
   }
 
-  function download_attachment(input) {
-    const data_url = `data:${input.content_type};base64,${input.content}`
-    const link = document.createElement("a")
-    link.href = data_url
-    link.download = input.name
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
+  function sanitize_file_name(input) {
+    return String(input ?? "attachment")
+      .replace(/[\\/:*?"<>|\u0000-\u001f]/g, "_")
+      .trim()
+      .slice(0, 180) || "attachment"
+  }
+
+  function create_attachment_blob(input) {
+    const binary_content = atob(String(input?.content ?? "").replace(/\s/g, ""))
+    const bytes = Uint8Array.from(binary_content, (character) => character.charCodeAt(0))
+    return new Blob([bytes], { type: input?.content_type || "application/octet-stream" })
+  }
+
+  async function download_attachment(input = val_prepped) {
+    download_error_message = ""
+    if (typeof document === "undefined" || !input?.content) {
+      download_error_message = "This attachment has no downloadable content."
+      return
+    }
+
+    download_is_loading = true
+    try {
+      const object_url = URL.createObjectURL(create_attachment_blob(input))
+      object_urls.add(object_url)
+      const link = document.createElement("a")
+      link.href = object_url
+      link.download = sanitize_file_name(input?.name)
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+
+      const timeout_id = window.setTimeout(() => {
+        URL.revokeObjectURL(object_url)
+        object_urls.delete(object_url)
+        revoke_timeout_ids.delete(timeout_id)
+      }, 1000)
+      revoke_timeout_ids.add(timeout_id)
+    } catch {
+      download_error_message = "The attachment could not be downloaded."
+    } finally {
+      download_is_loading = false
+    }
   }
 
   function init(config) {
@@ -87,16 +162,31 @@ export function create_attachment_manager(config) {
       type: "outlined",
       is_uniform: true,
       support_icon: "download",
-      on_click: () => download_attachment(config?.attachment),
+      aria_label: "Download attachment",
+      is_loading: () => download_is_loading,
+      is_disabled: () => !val_prepped?.content,
+      on_click: () => download_attachment(),
     })
     show_content_button_manager = create_button_manager({
       type: "outlined",
       text: "View",
       is_compressed: true,
+      aria_label: "View attachment contents",
+      is_disabled: () => !!content_error_message,
       popover_target: () => `popover_${show_content_popover_manager?.id}`,
     })
   }
 
+  function destroy() {
+    destroy_embedded_content(val_prepped)
+    if (typeof window !== "undefined") {
+      revoke_timeout_ids.forEach((timeout_id) => window.clearTimeout(timeout_id))
+      object_urls.forEach((object_url) => URL.revokeObjectURL(object_url))
+    }
+    revoke_timeout_ids.clear()
+    object_urls.clear()
+  }
+
   init(config)
 
   return {
@@ -115,5 +205,20 @@ export function create_attachment_manager(config) {
     get is_show_content() {
       return is_show_content
     },
+    get error_message() {
+      return error_message
+    },
+    get download_is_loading() {
+      return download_is_loading
+    },
+    get content_error_message() {
+      return content_error_message
+    },
+    get download_error_message() {
+      return download_error_message
+    },
+    download_attachment,
+    set_val_prepped,
+    destroy,
   }
 }

package/dist/Components/Audio/index.svelte

@@ -3,14 +3,16 @@
   import Popover from "../Popover/index.svelte"
   import LoadingWheel from "../LoadingWheel/index.svelte"
   import Slider from "../Slider/index.svelte"
-  import { onMount } from "svelte"
 
   let { manager } = $props()
 
-  onMount(() => {
-    if (typeof manager?.handle_mount == "function") {
-      manager?.handle_mount()
+  $effect(() => {
+    const current_manager = manager
+    if (typeof current_manager?.handle_mount == "function") {
+      current_manager.handle_mount()
     }
+
+    return () => current_manager?.destroy?.()
   })
 </script>
 
@@ -24,26 +26,20 @@
         {#if manager?.is_show_download_button}
           <Button manager={manager?.download_audio_button_manager} />
         {/if}
+        {#if manager?.download_error_message}
+          <p class="error_message" role="alert">{manager.download_error_message}</p>
+        {/if}
       </div>
     {/snippet}
   </Popover>
 {/snippet}
 
-<!-- onloadstart={() => console.log('Load start')}
-onwaiting={() => console.log('Waiting')}
-onstalled={() => console.log('Stalled')}
-onseeked={() => console.log('seeked')}
-onseeking={() => console.log('seeking')}
-ondurationchange={(e) => console.log('durationchange',e)}
-onloadeddata={(e) => console.log('onloadeddata',e)}
-oncanplaythrough={() => console.log('can_play_through')}
-onerror={(e) => console.log('error',e)}
-onabort={(e) => console.log('abort',e)} -->
 <div class="container">
   <audio
     id={`audio_${manager?.id}`}
-    onplaying={() => manager?.play_audio()}
-    onended={() => manager?.pause_audio()}
+    onplaying={() => manager?.handle_playing()}
+    onended={() => manager?.handle_ended()}
+    onerror={() => manager?.handle_audio_error()}
     ontimeupdate={() => manager?.handle_time_update()}
     oncanplay={() => manager?.handle_can_play()}
     onloadedmetadata={(e) => manager?.handle_loaded_metadata(e)}
@@ -140,12 +136,16 @@ onabort={(e) => console.log('abort',e)} -->
       {/if}
     </div>
   {/if}
+  {#if manager?.playback_error_message}
+    <p class="error_message" role="alert">{manager.playback_error_message}</p>
+  {/if}
 </div>
 
 <style>
   .container {
     display: flex;
     flex: 0;
+    flex-direction: column;
   }
   .container_line {
     display: flex;
@@ -196,4 +196,8 @@ onabort={(e) => console.log('abort',e)} -->
   .is_short {
     flex: 0;
   }
+  .error_message {
+    color: oklch(var(--l3-t) var(--c16) var(--h3));
+    margin: 0.5rem 0 0;
+  }
 </style>

package/dist/Components/Audio/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;
+};