@sveltia/ui 0.78.3 → 0.79.0

package/dist/components/dialog/dialog.svelte

@@ -9,11 +9,11 @@
   import { sleep } from '@sveltia/utils/misc';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
-  import Icon from '../icon/icon.svelte';
   import Modal from '../util/modal.svelte';
+  import ModalCloseButton from './modal-close-button.svelte';
 
   /**
-   * @import { DialogProps, ModalProps } from '../../typedefs';
+   * @import { DialogProps, ModalProps } from '../../typedefs.js';
    */
 
   /**
@@ -50,7 +50,7 @@
   } = $props();
 
   /**
-   * The ID of the drawer.
+   * The ID of the dialog.
    * @type {string}
    */
   const id = $props.id();
@@ -139,23 +139,13 @@
           <Spacer flex={true} />
           {@render headerExtra?.()}
           {#if showClose}
-            <Button
-              variant="ghost"
-              iconic
-              aria-label={_('_sui.close')}
-              aria-controls={id}
-              onclick={() => {
+            <ModalCloseButton
+              controls={id}
+              {closeIcon}
+              onClose={() => {
                 modal?.close('close');
               }}
-            >
-              {#snippet startIcon()}
-                {#if closeIcon}
-                  {@render closeIcon()}
-                {:else}
-                  <Icon name="close" />
-                {/if}
-              {/snippet}
-            </Button>
+            />
           {/if}
         {/if}
       </div>

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

@@ -9,5 +9,5 @@ type Dialog = {
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 declare const Dialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "value" | "open">;
-import type { ModalProps } from '../../typedefs';
-import type { DialogProps } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';
+import type { DialogProps } from '../../typedefs.js';

package/dist/components/dialog/modal-close-button.svelte

@@ -0,0 +1,50 @@
+<!--
+  @component
+  The Close button shared by `<Dialog>` and `<Drawer>`. Internal; not exported.
+-->
+<script>
+  import { _ } from '@sveltia/i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [class] The `class` attribute on the button.
+   * @property {string} controls ID of the dialog or drawer the button closes.
+   * @property {Snippet} [closeIcon] Custom icon, used instead of the default one.
+   * @property {() => void} onClose Callback invoked when the button is clicked.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    class: className = undefined,
+    controls,
+    closeIcon = undefined,
+    onClose,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<Button
+  variant="ghost"
+  iconic
+  class={className}
+  aria-label={_('_sui.close')}
+  aria-controls={controls}
+  onclick={() => {
+    onClose();
+  }}
+>
+  {#snippet startIcon()}
+    {#if closeIcon}
+      {@render closeIcon()}
+    {:else}
+      <Icon name="close" />
+    {/if}
+  {/snippet}
+</Button>

package/dist/components/dialog/modal-close-button.svelte.d.ts

@@ -0,0 +1,43 @@
+export default ModalCloseButton;
+type ModalCloseButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/** The Close button shared by `<Dialog>` and `<Drawer>`. Internal; not exported. */
+declare const ModalCloseButton: import("svelte").Component<{
+    /**
+     * The `class` attribute on the button.
+     */
+    class?: string | undefined;
+    /**
+     * ID of the dialog or drawer the button closes.
+     */
+    controls: string;
+    /**
+     * Custom icon, used instead of the default one.
+     */
+    closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the button is clicked.
+     */
+    onClose: () => void;
+}, {}, "">;
+type Props = {
+    /**
+     * The `class` attribute on the button.
+     */
+    class?: string | undefined;
+    /**
+     * ID of the dialog or drawer the button closes.
+     */
+    controls: string;
+    /**
+     * Custom icon, used instead of the default one.
+     */
+    closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the button is clicked.
+     */
+    onClose: () => void;
+};
+import type { Snippet } from 'svelte';

package/dist/components/dialog/prompt-dialog.svelte

@@ -17,7 +17,7 @@
    * DialogProps,
    * InputEventHandlers,
    * ModalProps,
-   * } from '../../typedefs';
+   * } from '../../typedefs.js';
    */
 
   /**

package/dist/components/dialog/prompt-dialog.svelte.d.ts

@@ -10,7 +10,7 @@ type PromptDialog = {
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
  */
-declare const PromptDialog: import("svelte").Component<ModalProps & DialogProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const PromptDialog: import("svelte").Component<ModalProps & DialogProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Value entered on the textbox.
      */
@@ -48,7 +48,7 @@ type Props = {
      */
     input?: Snippet<[]> | undefined;
 };
-import type { ModalProps } from '../../typedefs';
-import type { DialogProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';
+import type { DialogProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/disclosure/disclosure.svelte

@@ -68,7 +68,7 @@
       aria-expanded={expanded}
       onclick={() => {
         expanded = !expanded;
-        onChange?.(new CustomEvent('change', { detail: { expanded } }));
+        onChange?.(new CustomEvent('Change', { detail: { expanded } }));
       }}
     >
       {#snippet startIcon()}

package/dist/components/drawer/drawer.svelte

@@ -5,11 +5,9 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
   import { untrack } from 'svelte';
-  import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
-  import Icon from '../icon/icon.svelte';
+  import ModalCloseButton from '../dialog/modal-close-button.svelte';
   import Modal from '../util/modal.svelte';
   import {
     addSwipeSample,
@@ -21,7 +19,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ModalProps } from '../../typedefs';
+   * @import { ModalProps } from '../../typedefs.js';
    * @import { SwipeState } from './drawer.js';
    */
 
@@ -251,24 +249,14 @@
     {/if}
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
-        <Button
-          variant="ghost"
-          iconic
+        <ModalCloseButton
           class="close"
-          aria-label={_('_sui.close')}
-          aria-controls={id}
-          onclick={() => {
+          controls={id}
+          {closeIcon}
+          onClose={() => {
             modal?.close('close');
           }}
-        >
-          {#snippet startIcon()}
-            {#if closeIcon}
-              {@render closeIcon()}
-            {:else}
-              <Icon name="close" />
-            {/if}
-          {/snippet}
-        </Button>
+        />
       {/if}
     </div>
     {#if title || showClose === 'inside' || header || headerExtra}
@@ -282,24 +270,14 @@
           <Spacer flex={true} />
           {@render headerExtra?.()}
           {#if showClose === 'inside'}
-            <Button
-              variant="ghost"
-              iconic
+            <ModalCloseButton
               class="close"
-              aria-label={_('_sui.close')}
-              aria-controls={id}
-              onclick={() => {
+              controls={id}
+              {closeIcon}
+              onClose={() => {
                 modal?.close('close');
               }}
-            >
-              {#snippet startIcon()}
-                {#if closeIcon}
-                  {@render closeIcon()}
-                {:else}
-                  <Icon name="close" />
-                {/if}
-              {/snippet}
-            </Button>
+            />
           {/if}
         </div>
       {/if}

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

@@ -140,5 +140,5 @@ type Props = {
      */
     extraContent?: Snippet<[]> | undefined;
 };
-import type { ModalProps } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/emoji/caret.d.ts

@@ -1,2 +1,2 @@
 export function getFieldCaretRect(element: HTMLInputElement | HTMLTextAreaElement, start: number, end: number): EmojiAnchorRect | undefined;
-import type { EmojiAnchorRect } from '../../typedefs';
+import type { EmojiAnchorRect } from '../../typedefs.js';

package/dist/components/emoji/caret.js

@@ -1,5 +1,5 @@
 /**
- * @import { EmojiAnchorRect } from '../../typedefs';
+ * @import { EmojiAnchorRect } from '../../typedefs.js';
  */
 
 /**

package/dist/components/emoji/emoji-suggestions.svelte

@@ -16,7 +16,7 @@
   import { getSuggestionListPosition } from './position.js';
 
   /**
-   * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger } from '../../typedefs';
+   * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger } from '../../typedefs.js';
    */
 
   /**

package/dist/components/emoji/emoji-suggestions.svelte.d.ts

@@ -61,6 +61,6 @@ type Props = {
      */
     ariaOwner?: HTMLElement | undefined;
 };
-import type { EmojiTrigger } from '../../typedefs';
-import type { EmojiAnchorRect } from '../../typedefs';
-import type { EmojiEntry } from '../../typedefs';
+import type { EmojiTrigger } from '../../typedefs.js';
+import type { EmojiAnchorRect } from '../../typedefs.js';
+import type { EmojiEntry } from '../../typedefs.js';

package/dist/components/emoji/emoji.d.ts

@@ -1,5 +1,5 @@
 /**
- * @import { EmojiEntry } from '../../typedefs';
+ * @import { EmojiEntry } from '../../typedefs.js';
  */
 /**
  * Regular expression that matches an emoji shortcode being typed at the end of a line, like `:smi`.
@@ -30,4 +30,4 @@ export function getEmojiMatchRank({ name, aliases }: EmojiEntry, query: string):
 export function searchEmojis(query: string): EmojiEntry[];
 export function getEmojiInsertText(emoji: string, textAfterCaret: string): string;
 export function detectEmojiTrigger(textBeforeCaret: string): string | undefined;
-import type { EmojiEntry } from '../../typedefs';
+import type { EmojiEntry } from '../../typedefs.js';

package/dist/components/emoji/emoji.js

@@ -1,7 +1,7 @@
 import { EMOJI_DATA } from './generated.js';
 
 /**
- * @import { EmojiEntry } from '../../typedefs';
+ * @import { EmojiEntry } from '../../typedefs.js';
  */
 
 /**

package/dist/components/emoji/position.d.ts

@@ -3,7 +3,7 @@
  * tested against arbitrary viewports.
  */
 /**
- * @import { EmojiAnchorRect } from '../../typedefs';
+ * @import { EmojiAnchorRect } from '../../typedefs.js';
  */
 /**
  * Width of the dropdown, also enforced in the component’s stylesheet.
@@ -41,4 +41,4 @@ export type SuggestionListPosition = {
      */
     maxHeight: string;
 };
-import type { EmojiAnchorRect } from '../../typedefs';
+import type { EmojiAnchorRect } from '../../typedefs.js';

package/dist/components/emoji/position.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @import { EmojiAnchorRect } from '../../typedefs';
+ * @import { EmojiAnchorRect } from '../../typedefs.js';
  */
 
 /**

package/dist/components/grid/grid-body.svelte

@@ -54,7 +54,7 @@
    */
   const toggle = () => {
     expanded = !expanded;
-    onChange?.(new CustomEvent('change', { detail: { expanded } }));
+    onChange?.(new CustomEvent('Change', { detail: { expanded } }));
   };
 
   /**
@@ -91,7 +91,11 @@
   aria-roledescription={_('_sui.role_descriptions.grid_body')}
 >
   {#if label}
-    <div role="row" class="row-group-caption" {@attach handleCaptionClick}>
+    <!--
+      The caption is a row the keyboard can land on, but not one that can be selected: clicking or
+      pressing Enter on it toggles the group instead
+    -->
+    <div role="row" class="row-group-caption" data-selectable="false" {@attach handleCaptionClick}>
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
       <svelte:element this={"th"} role="columnheader" id="{id}-label" colspan="9999">
         {#if hasExpander}

package/dist/components/grid/grid-cell.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#gridcell
 -->
 <script>
+  import TablePart from '../table/table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,17 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="gridcell" class="sui grid-cell {className}">
-  {@render children?.()}
-</div>
-
-<style>.grid-cell {
-  display: table-cell;
-}</style>
+<TablePart {...restProps} role="gridcell" kind="grid-cell" />

package/dist/components/grid/grid-col-header.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#columnheader
 -->
 <script>
+  import TablePart from '../table/table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,17 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="columnheader" class="sui grid-col-header {className}">
-  {@render children?.()}
-</div>
-
-<style>.grid-col-header {
-  display: table-cell;
-}</style>
+<TablePart {...restProps} role="columnheader" kind="grid-col-header" />

package/dist/components/grid/grid-foot.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
+  import TablePart from '../table/table-part.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -22,22 +23,14 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div
+<TablePart
   {...restProps}
   role="rowgroup"
-  class="sui grid-foot {className}"
+  kind="grid-foot"
   aria-roledescription={_('_sui.role_descriptions.grid_foot')}
->
-  {@render children?.()}
-</div>
-
-<style>.grid-foot {
-  display: table-footer-group;
-}</style>
+/>

package/dist/components/grid/grid-head.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
+  import TablePart from '../table/table-part.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -22,22 +23,14 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div
+<TablePart
   {...restProps}
   role="rowgroup"
-  class="sui grid-head {className}"
+  kind="grid-head"
   aria-roledescription={_('_sui.role_descriptions.grid_head')}
->
-  {@render children?.()}
-</div>
-
-<style>.grid-head {
-  display: table-header-group;
-}</style>
+/>

package/dist/components/grid/grid-row-header.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowheader
 -->
 <script>
+  import TablePart from '../table/table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,18 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="rowheader" class="sui grid-row-header {className}">
-  {@render children?.()}
-</div>
-
-<style>.grid-row-header {
-  display: table-cell;
-  height: var(--sui-secondary-row-height);
-}</style>
+<TablePart {...restProps} role="rowheader" kind="grid-row-header" />

package/dist/components/grid/grid-row.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#row
 -->
 <script>
+  import TablePart from '../table/table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -24,25 +26,10 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
     selected = false,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div
-  {...restProps}
-  role="row"
-  class="sui grid-row {className}"
-  tabindex="0"
-  aria-selected={selected}
->
-  {@render children?.()}
-</div>
-
-<style>.grid-row {
-  display: table-row;
-  height: var(--sui-primary-row-height);
-}</style>
+<TablePart {...restProps} role="row" kind="grid-row" tabindex="0" aria-selected={selected} />

package/dist/components/listbox/listbox.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

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

@@ -9,7 +9,7 @@ type Listbox = {
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
-declare const Listbox: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Listbox: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/components/listbox/option.svelte

@@ -13,7 +13,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/listbox/option.svelte.d.ts

@@ -8,7 +8,7 @@ type Option = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
  * @see https://w3c.github.io/aria/#option
  */
-declare const Option: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Option: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -62,5 +62,5 @@ type Props = {
      */
     checkIcon?: Snippet<[]> | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/menu/menu-button.svelte

@@ -9,13 +9,13 @@
   import Popup from '../util/popup.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**
    * @typedef {object} Props
    * @property {HTMLElement} [popupPositionBaseElement] The base element of {@link popupPosition}.
-   * If omitted, this will be {@link buttonComponent}.
+   * If omitted, this will be the button itself.
    */
 
   /**