@sveltia/ui 0.25.15 → 0.26.0

package/dist/components/bottom-navigation/bottom-navigation.svelte

@@ -0,0 +1,44 @@
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] Whether to hide the widget. An alias of the `aria-hidden`
+   * attribute.
+   * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {string} [title] Text label displayed above the group items.
+   * @property {Snippet} [children] Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    children,
+    ...rest
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div role="none" class="sui bottom-navigation {className}" {...rest}>
+  {@render children?.()}
+</div>
+
+<style>.bottom-navigation {
+  height: var(--sui-bottom-navigation-height, var(--sui-primary-toolbar-size));
+  border-top-width: var(--sui-bottom-navigation-border-color, 1px);
+  border-top-style: var(--sui-bottom-navigation-border-style, solid);
+  border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
+}
+.bottom-navigation :global(.buttons) {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}</style>

package/dist/components/bottom-navigation/bottom-navigation.svelte.d.ts

@@ -0,0 +1,54 @@
+export default BottomNavigation;
+type BottomNavigation = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+declare const BottomNavigation: import("svelte").Component<{
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text label displayed above the group items.
+     */
+    title?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text label displayed above the group items.
+     */
+    title?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/components/button/button.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { activateKeyShortcuts } from '../../services/events.svelte';
+  import TruncatedText from '../typography/truncated-text.svelte';
   import Popup from '../util/popup.svelte';
 
   /**
@@ -29,6 +30,7 @@
     pressed = undefined,
     keyShortcuts = undefined,
     label = '',
+    lines = 1,
     variant = undefined,
     size = 'medium',
     iconic = false,
@@ -68,7 +70,9 @@
   {#if variant === 'link'}
     {#if label}
       <span role="none" class="label">
-        {label}
+        <TruncatedText {lines}>
+          {label}
+        </TruncatedText>
       </span>
     {:else}
       <span role="none" class="label">
@@ -78,7 +82,9 @@
   {:else}
     {#if label}
       <span role="none" class="label">
-        {label}
+        <TruncatedText {lines}>
+          {label}
+        </TruncatedText>
       </span>
     {/if}
     {@render children?.()}
@@ -114,7 +120,6 @@
   line-height: var(--sui-control-line-height);
   font-weight: var(--sui-font-weight-normal, normal);
   text-align: start;
-  white-space: nowrap;
   cursor: pointer;
   transition: all 200ms;
 }

package/dist/components/button/floating-action-button-wrapper.svelte

@@ -0,0 +1,41 @@
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Snippet} [children] Slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    children = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div role="none" class="sui floating-action-button-wrapper">
+  {@render children?.()}
+</div>
+
+<style>.floating-action-button-wrapper {
+  display: contents;
+}
+@media (width < 768px) {
+  .floating-action-button-wrapper {
+    display: block;
+    position: fixed;
+    inset: auto 16px 72px auto;
+    z-index: 100;
+  }
+  .floating-action-button-wrapper :global(button) {
+    border-radius: 50%;
+    height: 56px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  }
+  .floating-action-button-wrapper :global(button) :global(.icon) {
+    font-size: 32px;
+  }
+}</style>

package/dist/components/button/floating-action-button-wrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+export default FloatingActionButtonWrapper;
+type FloatingActionButtonWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FloatingActionButtonWrapper: import("svelte").Component<{
+    /**
+     * Slot content.
+     */
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * Slot content.
+     */
+    children?: Snippet<[]> | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/components/dialog/dialog.svelte

@@ -229,6 +229,7 @@
 }
 .header .title {
   font-size: var(--sui-font-size-large);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 .footer {

package/dist/components/drawer/drawer.svelte

@@ -290,6 +290,7 @@
 }
 .header .title {
   font-size: var(--sui-font-size-large);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 .footer {

package/dist/components/file/file-picker.svelte

@@ -0,0 +1,48 @@
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {string} [accept] The `accept` attribute for the `<input type="file">`.
+   * @property {boolean} [multiple] Whether to accept multiple files.
+   * @property {(detail: { files: File[], file: File }) => void} [onSelect] Custom `select` event
+   * handler. Since `multiple` could be false, we pass both `file` and `files` with the arguments.
+   * @property {() => void} [onCancel] `cancel` event handler.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    accept = undefined,
+    multiple = false,
+    onSelect = undefined,
+    onCancel = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {HTMLInputElement | undefined} */
+  let filePicker = $state();
+
+  /**
+   * Show the browser’s file picker dialog.
+   */
+  export const open = () => {
+    filePicker?.click();
+  };
+</script>
+
+<input
+  class="sui file-picker"
+  type="file"
+  hidden
+  {accept}
+  {multiple}
+  bind:this={filePicker}
+  onchange={({ target }) => {
+    const files = [.../** @type {FileList} */ (/** @type {HTMLInputElement} */ (target).files)];
+
+    onSelect?.({ files, file: files[0] });
+  }}
+  oncancel={(event) => {
+    event.stopPropagation();
+    onCancel?.();
+  }}
+/>

package/dist/components/file/file-picker.svelte.d.ts

@@ -0,0 +1,53 @@
+export default FilePicker;
+type FilePicker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+} & {
+    open: () => void;
+};
+declare const FilePicker: import("svelte").Component<{
+    /**
+     * The `accept` attribute for the `<input type="file">`.
+     */
+    accept?: string | undefined;
+    /**
+     * Whether to accept multiple files.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Custom `select` event
+     * handler. Since `multiple` could be false, we pass both `file` and `files` with the arguments.
+     */
+    onSelect?: ((detail: {
+        files: File[];
+        file: File;
+    }) => void) | undefined;
+    /**
+     * `cancel` event handler.
+     */
+    onCancel?: (() => void) | undefined;
+}, {
+    open: () => void;
+}, "">;
+type Props = {
+    /**
+     * The `accept` attribute for the `<input type="file">`.
+     */
+    accept?: string | undefined;
+    /**
+     * Whether to accept multiple files.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Custom `select` event
+     * handler. Since `multiple` could be false, we pass both `file` and `files` with the arguments.
+     */
+    onSelect?: ((detail: {
+        files: File[];
+        file: File;
+    }) => void) | undefined;
+    /**
+     * `cancel` event handler.
+     */
+    onCancel?: (() => void) | undefined;
+};

package/dist/components/listbox/option-group.svelte

@@ -7,6 +7,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
 -->
 <script>
+  import TruncatedText from '../typography/truncated-text.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -50,7 +52,11 @@
   aria-labelledby="{id}-label"
   aria-roledescription="option group"
 >
-  <div role="none" id="{id}-label" class="label">{label}</div>
+  <div role="none" id="{id}-label" class="label">
+    <TruncatedText>
+      {label}
+    </TruncatedText>
+  </div>
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}
   </div>

package/dist/components/listbox/option.svelte

@@ -100,9 +100,6 @@
   width: 100%;
   height: auto;
   min-height: var(--sui-option-height);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .option :global(button) :global(*) {
   flex: none;

package/dist/components/scroll/infinite-scroll.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component Enable infinite scroll for list items for better rendering performance.
+  @see https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots-Passing-data-back-up
+-->
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {any[]} items Item list.
+   * @property {string} itemKey Item key used for the `each` loop.
+   * @property {number} [itemChunkSize] Number of items to be loaded at once.
+   * @property {Snippet<[any]>} renderItem Snippet to render each item.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    items,
+    itemKey,
+    itemChunkSize = 25,
+    renderItem,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {number} */
+  let loadedItemSize = $state(itemChunkSize);
+
+  /** @type {HTMLElement | undefined} */
+  let spinner = $state(undefined);
+
+  const loading = $derived(items.length > loadedItemSize);
+
+  const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      if (loading) {
+        loadedItemSize += itemChunkSize;
+      } else {
+        observer.disconnect();
+      }
+    }
+  });
+
+  $effect(() => {
+    if (spinner) {
+      observer.observe(spinner);
+    }
+  });
+</script>
+
+{#each items.slice(0, loadedItemSize) as item (item[itemKey])}
+  {@render renderItem(item)}
+{/each}
+
+{#if loading}
+  <div role="none" class="spinner" bind:this={spinner}></div>
+{/if}
+
+<style>
+  .spinner {
+    height: 1px;
+  }
+</style>

package/dist/components/scroll/infinite-scroll.svelte.d.ts

@@ -0,0 +1,46 @@
+export default InfiniteScroll;
+type InfiniteScroll = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/**
+ * Enable infinite scroll for list items for better rendering performance.
+ * @see https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots-Passing-data-back-up
+ */
+declare const InfiniteScroll: import("svelte").Component<{
+    /**
+     * Item list.
+     */
+    items: any[];
+    /**
+     * Item key used for the `each` loop.
+     */
+    itemKey: string;
+    /**
+     * Number of items to be loaded at once.
+     */
+    itemChunkSize?: number | undefined;
+    /**
+     * Snippet to render each item.
+     */
+    renderItem: Snippet<[any]>;
+}, {}, "">;
+type Props = {
+    /**
+     * Item list.
+     */
+    items: any[];
+    /**
+     * Item key used for the `each` loop.
+     */
+    itemKey: string;
+    /**
+     * Number of items to be loaded at once.
+     */
+    itemChunkSize?: number | undefined;
+    /**
+     * Snippet to render each item.
+     */
+    renderItem: Snippet<[any]>;
+};
+import type { Snippet } from 'svelte';

package/dist/components/select/combobox.svelte

@@ -12,6 +12,7 @@
   import Listbox from '../listbox/listbox.svelte';
   import SearchBar from '../text-field/search-bar.svelte';
   import TextInput from '../text-field/text-input.svelte';
+  import TruncatedText from '../typography/truncated-text.svelte';
   import Popup from '../util/popup.svelte';
 
   /**
@@ -137,7 +138,9 @@
       aria-haspopup="listbox"
     >
       <div role="none" class="label">
-        {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
+        <TruncatedText>
+          {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
+        </TruncatedText>
       </div>
     </div>
   {:else}
@@ -297,11 +300,6 @@
   border-color: var(--sui-error-border-color);
 }
 .combobox div[role=combobox] .label {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  overflow: hidden;
   width: 100%;
 }
 .combobox :global(.text-input) {

package/dist/components/text-field/text-input.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { activateKeyShortcuts } from '../../services/events.svelte';
+  import TruncatedText from '../typography/truncated-text.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -75,7 +76,9 @@
   />
   {#if ariaLabel && showInlineLabel}
     <span id="{id}-label" class="label" class:hidden={!!value} aria-hidden="true">
-      {ariaLabel}
+      <TruncatedText>
+        {ariaLabel}
+      </TruncatedText>
     </span>
   {/if}
 </div>
@@ -158,7 +161,6 @@ input ~ :global(button) :global(.icon) {
   display: flex;
   align-items: center;
   justify-content: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
-  white-space: nowrap;
   pointer-events: none;
 }
 .label.hidden {

package/dist/components/toast/toast.svelte

@@ -31,7 +31,7 @@
     show = $bindable(false),
     id = undefined,
     duration = 5000,
-    position = 'bottom-right',
+    position = 'auto',
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -80,6 +80,22 @@
     };
   });
 
+  onMount(() => {
+    if (position === 'auto') {
+      const mql = globalThis.matchMedia('(width < 1024px)');
+
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const setMode = () => {
+        position = mql.matches
+          ? 'bottom-center'
+          : `bottom-${document.dir === 'rtl' ? 'left' : 'right'}`;
+      };
+
+      setMode();
+      mql.addEventListener('change', setMode);
+    }
+  });
+
   $effect(() => {
     if (popover && toast) {
       popover.appendChild(toast);
@@ -111,7 +127,7 @@
 
 <style>.toast-base {
   position: fixed;
-  inset: 0;
+  inset: 16px;
   z-index: 99999;
   display: flex;
   flex-direction: column;
@@ -120,20 +136,27 @@
   gap: 8px;
   margin: 0;
   border: 0;
-  padding: 16px;
-  width: 100dvw;
-  height: 100dvh;
+  padding: 0;
+  width: auto;
+  height: auto;
   background-color: transparent;
   font-family: var(--sui-font-family-default);
   font-size: var(--sui-font-size-default);
   font-weight: var(--sui-font-weight-normal, normal);
+  text-align: center;
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
 }
 
+:global(body:has(.sui.bottom-navigation:not([inert]:not([hidden])))) :global(.toast-base) {
+  bottom: calc(var(--sui-bottom-navigation-height) + 16px);
+}
+
 .toast {
   position: absolute;
+  width: max-content;
+  max-width: 80dvw;
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   opacity: 1;
   transition-duration: 250ms;

package/dist/components/toolbar/toolbar.svelte

@@ -56,12 +56,17 @@
   flex: none !important;
   display: flex;
   align-items: center;
-  padding: 0 8px;
+  padding-inline: 8px;
   background-color: var(--toolbar-background-color, transparent);
 }
 [role=toolbar].primary {
   --toolbar-size: var(--sui-primary-toolbar-size);
 }
+@media (width < 768px) {
+  [role=toolbar].secondary {
+    padding-inline: 0;
+  }
+}
 [role=toolbar][aria-orientation=horizontal] {
   height: var(--toolbar-size);
 }
@@ -86,12 +91,6 @@
 [role=toolbar] :global(h2):first-child {
   padding-inline-start: 12px;
 }
-[role=toolbar] :global(h2) :global(strong) {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 [role=toolbar] :global(h2) :global(span) {
   font-size: var(--sui-font-size-small);
   font-weight: var(--sui-font-weight-normal, normal);

package/dist/components/typography/truncated-text.svelte

@@ -0,0 +1,35 @@
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {number} [lines] Number of lines.
+   * @property {Snippet} [children] Primary slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    lines = 1,
+    children = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<span
+  role="none"
+  class="sui truncated-text"
+  style="-webkit-line-clamp: {lines}; line-clamp: {lines};"
+>
+  {@render children?.()}
+</span>
+
+<style>.truncated-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}</style>

package/dist/components/typography/truncated-text.svelte.d.ts

@@ -0,0 +1,26 @@
+export default TruncatedText;
+type TruncatedText = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const TruncatedText: import("svelte").Component<{
+    /**
+     * Number of lines.
+     */
+    lines?: number | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * Number of lines.
+     */
+    lines?: number | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/components/util/app-shell.svelte

@@ -202,7 +202,7 @@
   --sui-control-large-border-width: 1px;
   --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
   --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
-  --sui-control-large-height: 48px;
+  --sui-control-large-height: 40px;
   --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-control-foreground-color: var(--sui-primary-foreground-color);
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
@@ -251,15 +251,16 @@
   --sui-tab-large-height: var(--sui-control-large-height);
   --sui-primary-toolbar-size: 56px;
   --sui-secondary-toolbar-size: 48px;
+  --sui-bottom-navigation-height: var(--sui-primary-toolbar-size);
   --sui-primary-row-height: 56px;
   --sui-secondary-row-height: 40px;
 }
 @media (pointer: coarse) {
   :global(:root),
   :global(:host) {
-    --sui-control-small-height: 30px;
-    --sui-control-medium-height: 40px;
-    --sui-control-large-height: 60px;
+    --sui-control-small-height: 40px;
+    --sui-control-medium-height: 48px;
+    --sui-control-large-height: 56px;
     --sui-checkbox-height: 24px;
     --sui-secondary-row-height: 48px;
   }

package/dist/components/util/empty-state.svelte

@@ -0,0 +1,33 @@
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Snippet} [children] Slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    children = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div role="none" class="sui empty-state">
+  {@render children?.()}
+</div>
+
+<style>.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}</style>

package/dist/components/util/empty-state.svelte.d.ts

@@ -0,0 +1,18 @@
+export default EmptyState;
+type EmptyState = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const EmptyState: import("svelte").Component<{
+    /**
+     * Slot content.
+     */
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * Slot content.
+     */
+    children?: Snippet<[]> | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/index.d.ts

@@ -4,8 +4,10 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
 } | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Infobar } from "./components/alert/infobar.svelte";
+export { default as BottomNavigation } from "./components/bottom-navigation/bottom-navigation.svelte";
 export { default as ButtonGroup } from "./components/button/button-group.svelte";
 export { default as Button } from "./components/button/button.svelte";
+export { default as FloatingActionButtonWrapper } from "./components/button/floating-action-button-wrapper.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";
 export { default as SplitButton } from "./components/button/split-button.svelte";
@@ -20,6 +22,7 @@ export { default as Disclosure } from "./components/disclosure/disclosure.svelte
 export { default as Divider } from "./components/divider/divider.svelte";
 export { default as Spacer } from "./components/divider/spacer.svelte";
 export { default as Drawer } from "./components/drawer/drawer.svelte";
+export { default as FilePicker } from "./components/file/file-picker.svelte";
 export { default as GridBody } from "./components/grid/grid-body.svelte";
 export { default as GridCell } from "./components/grid/grid-cell.svelte";
 export { default as GridColHeader } from "./components/grid/grid-col-header.svelte";
@@ -41,6 +44,7 @@ export { default as Menu } from "./components/menu/menu.svelte";
 export { default as Progressbar } from "./components/progressbar/progressbar.svelte";
 export { default as RadioGroup } from "./components/radio/radio-group.svelte";
 export { default as Radio } from "./components/radio/radio.svelte";
+export { default as InfiniteScroll } from "./components/scroll/infinite-scroll.svelte";
 export { default as Combobox } from "./components/select/combobox.svelte";
 export { default as SelectTags } from "./components/select/select-tags.svelte";
 export { default as Select } from "./components/select/select.svelte";
@@ -68,7 +72,9 @@ export { default as TextArea } from "./components/text-field/text-area.svelte";
 export { default as TextInput } from "./components/text-field/text-input.svelte";
 export { default as Toast } from "./components/toast/toast.svelte";
 export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
+export { default as TruncatedText } from "./components/typography/truncated-text.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
+export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
 export * from "./typedefs";

package/dist/index.js

@@ -29,8 +29,10 @@ initLocales();
 
 export { default as Alert } from './components/alert/alert.svelte';
 export { default as Infobar } from './components/alert/infobar.svelte';
+export { default as BottomNavigation } from './components/bottom-navigation/bottom-navigation.svelte';
 export { default as ButtonGroup } from './components/button/button-group.svelte';
 export { default as Button } from './components/button/button.svelte';
+export { default as FloatingActionButtonWrapper } from './components/button/floating-action-button-wrapper.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
@@ -45,6 +47,7 @@ export { default as Disclosure } from './components/disclosure/disclosure.svelte
 export { default as Divider } from './components/divider/divider.svelte';
 export { default as Spacer } from './components/divider/spacer.svelte';
 export { default as Drawer } from './components/drawer/drawer.svelte';
+export { default as FilePicker } from './components/file/file-picker.svelte';
 export { default as GridBody } from './components/grid/grid-body.svelte';
 export { default as GridCell } from './components/grid/grid-cell.svelte';
 export { default as GridColHeader } from './components/grid/grid-col-header.svelte';
@@ -66,6 +69,7 @@ export { default as Menu } from './components/menu/menu.svelte';
 export { default as Progressbar } from './components/progressbar/progressbar.svelte';
 export { default as RadioGroup } from './components/radio/radio-group.svelte';
 export { default as Radio } from './components/radio/radio.svelte';
+export { default as InfiniteScroll } from './components/scroll/infinite-scroll.svelte';
 export { default as Combobox } from './components/select/combobox.svelte';
 export { default as SelectTags } from './components/select/select-tags.svelte';
 export { default as Select } from './components/select/select.svelte';
@@ -93,7 +97,9 @@ export { default as TextArea } from './components/text-field/text-area.svelte';
 export { default as TextInput } from './components/text-field/text-input.svelte';
 export { default as Toast } from './components/toast/toast.svelte';
 export { default as Toolbar } from './components/toolbar/toolbar.svelte';
+export { default as TruncatedText } from './components/typography/truncated-text.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
+export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
 

package/dist/services/events.svelte.js

@@ -100,7 +100,7 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    * Remove the event listener.
    */
   const removeListener = () => {
-    globalThis.removeEventListener('keydown', handler);
+    globalThis.removeEventListener('keydown', handler, { capture: true });
     element.removeAttribute('aria-keyshortcuts');
   };
 
@@ -113,7 +113,7 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
       : undefined;
 
     if (platformKeyShortcuts) {
-      globalThis.addEventListener('keydown', handler);
+      globalThis.addEventListener('keydown', handler, { capture: true });
       element.setAttribute('aria-keyshortcuts', platformKeyShortcuts);
     }
   };

package/dist/styles/variables.scss

@@ -180,7 +180,7 @@
     --sui-control-large-border-width: 1px;
     --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
     --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
-    --sui-control-large-height: 48px;
+    --sui-control-large-height: 40px;
     --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
     --sui-control-foreground-color: var(--sui-primary-foreground-color);
     --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
@@ -236,15 +236,16 @@
     // Toolbar
     --sui-primary-toolbar-size: 56px;
     --sui-secondary-toolbar-size: 48px;
+    --sui-bottom-navigation-height: var(--sui-primary-toolbar-size);
     // table
     --sui-primary-row-height: 56px;
     --sui-secondary-row-height: 40px;
 
     // Make controls larger on touch devices, e.g. mobile & tablet
     @media (pointer: coarse) {
-      --sui-control-small-height: 30px;
-      --sui-control-medium-height: 40px;
-      --sui-control-large-height: 60px;
+      --sui-control-small-height: 40px;
+      --sui-control-medium-height: 48px;
+      --sui-control-large-height: 56px;
       --sui-checkbox-height: 24px;
       --sui-secondary-row-height: 48px;
     }

package/dist/typedefs.d.ts

@@ -53,6 +53,10 @@ export type ButtonProps = {
      * Text label displayed on the button.
      */
     label?: string | undefined;
+    /**
+     * Number of lines to show the label. Overflowing text will be truncated.
+     */
+    lines?: number | undefined;
     /**
      * The style variant
      * of the button.
@@ -120,7 +124,7 @@ export type ModalProps = {
      * The `role` attribute on the `<dialog>`
      * element.
      */
-    role?: "dialog" | "alertdialog" | "none" | undefined;
+    role?: "none" | "dialog" | "alertdialog" | undefined;
     /**
      * Whether to show the modal.
      */
@@ -550,7 +554,7 @@ export type InputEventHandlers = {
     onchange?: ((event: Event) => void) | undefined;
 };
 export type PopupPosition = ("top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom");
-export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastPosition = "auto" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "bulleted-list" | "numbered-list" | "blockquote" | "code-block";
 export type TextEditorFormatType = "bold" | "italic" | "code";
 export type TextEditorInlineType = TextEditorFormatType | "link";

package/dist/typedefs.js

@@ -24,6 +24,7 @@
  * attribute. Accepts the special `Accel` key, which will be replaced with `Control` or `Meta`
  * depending on the user’s operating system.
  * @property {string} [label] Text label displayed on the button.
+ * @property {number} [lines] Number of lines to show the label. Overflowing text will be truncated.
  * @property {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link'} [variant] The style variant
  * of the button.
  * @property {'small' | 'medium' | 'large'} [size] The size of the button.
@@ -212,7 +213,7 @@
  */
 
 /**
- * @typedef {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' |
+ * @typedef {'auto' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' |
  * 'bottom-right'} ToastPosition
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.25.15",
+  "version": "0.26.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -48,13 +48,13 @@
   "devDependencies": {
     "@playwright/test": "^1.51.1",
     "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.20.4",
+    "@sveltejs/kit": "^2.20.5",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
     "cspell": "^8.18.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-svelte": "^2.46.1",
@@ -66,12 +66,12 @@
     "stylelint": "^16.18.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.11.1",
-    "svelte": "5.25.8",
+    "svelte": "5.26.2",
     "svelte-check": "^4.1.5",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.2.5",
+    "vite": "^6.2.6",
     "vitest": "^3.1.1"
   },
   "exports": {