@loidolt/theme-svelte 0.4.0 → 0.5.0

package/dist/components/AlertDialog.svelte

@@ -97,7 +97,7 @@
       class={cx('ldt-dialog', size && `ldt-dialog--${size}`, className)}
       {...rest}
     >
-      <header class="ldt-dialog__header">
+      <div class="ldt-dialog__header">
         <div>
           <AlertDialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
             >{title}</AlertDialogPrimitive.Title
@@ -105,9 +105,9 @@
               >{description}</AlertDialogPrimitive.Description
             >{/if}
         </div>
-      </header>
+      </div>
       {#if children}<div class="ldt-dialog__body">{@render children()}</div>{/if}
-      <footer class="ldt-dialog__footer">
+      <div class="ldt-dialog__footer">
         <AlertDialogPrimitive.Cancel
           class="ldt-button ldt-button--quiet"
           onclick={() => onCancel?.()}>{cancelLabel}</AlertDialogPrimitive.Cancel
@@ -124,7 +124,7 @@
             open = false;
           }}>{confirmLabel}</AlertDialogPrimitive.Action
         >
-      </footer>
+      </div>
     </AlertDialogPrimitive.Content>
   </AlertDialogPrimitive.Portal>
 </AlertDialogPrimitive.Root>

package/dist/components/AppShell.svelte

@@ -7,8 +7,10 @@
     /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
+    /** Render the content row without a second `main` landmark inside an embedded preview. */
+    embedded?: boolean;
     footer?: Snippet;
-    /** `id` of the `<main>` element, for skip links. */
+    /** `id` of the content row (`<main>` unless embedded), for skip links or demo targeting. */
     mainId?: string;
     class?: string;
     ref?: HTMLDivElement | null;
@@ -17,6 +19,7 @@
   let {
     header,
     children,
+    embedded = false,
     footer,
     mainId = 'main',
     class: className,
@@ -27,6 +30,10 @@
 
 <div bind:this={ref} class={cx('ldt-app-shell', className)} {...rest}>
   {#if header}{@render header()}{/if}
-  <main id={mainId}>{@render children()}</main>
+  {#if embedded}
+    <div id={mainId} class="ldt-app-shell__main">{@render children()}</div>
+  {:else}
+    <main id={mainId}>{@render children()}</main>
+  {/if}
   {#if footer}<footer>{@render footer()}</footer>{/if}
 </div>

package/dist/components/AppShell.svelte.d.ts

@@ -4,8 +4,10 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
+    /** Render the content row without a second `main` landmark inside an embedded preview. */
+    embedded?: boolean;
     footer?: Snippet;
-    /** `id` of the `<main>` element, for skip links. */
+    /** `id` of the content row (`<main>` unless embedded), for skip links or demo targeting. */
     mainId?: string;
     class?: string;
     ref?: HTMLDivElement | null;

package/dist/components/Dialog.svelte

@@ -86,7 +86,7 @@
       class={cx('ldt-dialog', size && `ldt-dialog--${size}`, className)}
       {...rest}
     >
-      <header class="ldt-dialog__header">
+      <div class="ldt-dialog__header">
         <div>
           <DialogPrimitive.Title level={headingLevel} class="ldt-dialog__title"
             >{title}</DialogPrimitive.Title
@@ -98,9 +98,9 @@
             class="ldt-button ldt-icon-button ldt-button--ghost"
             aria-label={closeLabel}>×</DialogPrimitive.Close
           >{/if}
-      </header>
+      </div>
       <div class="ldt-dialog__body">{@render children()}</div>
-      {#if footer}<footer class="ldt-dialog__footer">{@render footer()}</footer>{/if}
+      {#if footer}<div class="ldt-dialog__footer">{@render footer()}</div>{/if}
     </DialogPrimitive.Content>
   </DialogPrimitive.Portal>
 </DialogPrimitive.Root>

package/dist/components/Drawer.svelte

@@ -85,7 +85,7 @@
       class={cx('ldt-drawer', `ldt-drawer--${side}`, className)}
       {...rest}
     >
-      <header class="ldt-drawer__header">
+      <div class="ldt-drawer__header">
         <div>
           <DialogPrimitive.Title level={headingLevel} class="ldt-drawer__title"
             >{title}</DialogPrimitive.Title
@@ -97,9 +97,9 @@
             class="ldt-button ldt-icon-button ldt-button--ghost"
             aria-label={closeLabel}>×</DialogPrimitive.Close
           >{/if}
-      </header>
+      </div>
       <div class="ldt-drawer__body ldt-scrollbar">{@render children()}</div>
-      {#if footer}<footer class="ldt-drawer__footer">{@render footer()}</footer>{/if}
+      {#if footer}<div class="ldt-drawer__footer">{@render footer()}</div>{/if}
     </DialogPrimitive.Content>
   </DialogPrimitive.Portal>
 </DialogPrimitive.Root>

package/dist/components/ToastViewport.svelte

@@ -33,6 +33,7 @@
   aria-live={politeness}
   aria-relevant="additions text"
   {...rest}
+  role="log"
 >
   {@render children()}
 </div>

package/dist/toaster.svelte.d.ts

@@ -10,7 +10,7 @@ export interface ToastRecord extends ToastOptions {
     id: string;
 }
 export interface ToasterOptions {
-    /** Default `duration` for toasts that do not set one. */
+    /** Default `duration` for toasts that do not set one. Defaults to persistent (`0`). */
     duration?: number;
     /** Oldest toasts past this count are dropped. */
     max?: number;
@@ -35,7 +35,12 @@ export interface Toaster {
  *
  * ```svelte
  * const toaster = createToaster();
- * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ * <ToastViewport
+ *   onpointerenter={toaster.pause}
+ *   onpointerleave={toaster.resume}
+ *   onfocusin={toaster.pause}
+ *   onfocusout={toaster.resume}
+ * >
  *   {#each toaster.toasts as toast (toast.id)}
  *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
  *   {/each}

package/dist/toaster.svelte.js

@@ -5,7 +5,12 @@ import { onDestroy } from 'svelte';
  *
  * ```svelte
  * const toaster = createToaster();
- * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ * <ToastViewport
+ *   onpointerenter={toaster.pause}
+ *   onpointerleave={toaster.resume}
+ *   onfocusin={toaster.pause}
+ *   onfocusout={toaster.resume}
+ * >
  *   {#each toaster.toasts as toast (toast.id)}
  *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
  *   {/each}
@@ -13,7 +18,7 @@ import { onDestroy } from 'svelte';
  * ```
  */
 export function createToaster(options = {}) {
-    const { duration: defaultDuration = 5000, max = 5 } = options;
+    const { duration: defaultDuration = 0, max = 5 } = options;
     if (!Number.isInteger(max) || max < 1) {
         throw new RangeError('createToaster: `max` must be a positive integer');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-svelte",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Accessible Svelte 5 components for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -31,8 +31,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@loidolt/theme-styles": "^0.4.0",
-    "@loidolt/theme-tokens": "^0.4.0",
+    "@loidolt/theme-styles": "^0.5.0",
+    "@loidolt/theme-tokens": "^0.5.0",
     "bits-ui": "^2.19.0"
   },
   "peerDependencies": {