@sveltia/ui 0.7.5 → 0.8.0

package/package/components/disclosure/disclosure.svelte

@@ -42,16 +42,17 @@
 </script>
 
 <div
+  role="group"
   {id}
   class="sui disclosure {className}"
-  role="group"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-header"
+  aria-roledescription="disclosure"
   {...$$restProps}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <Button
       class="header"
       id="{id}-header"

package/package/components/divider/divider.svelte

@@ -23,8 +23,8 @@
 </script>
 
 <div
-  class="sui divider {className}"
   role="separator"
+  class="sui divider {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-orientation={orientation}

package/package/components/divider/spacer.svelte

@@ -9,11 +9,6 @@
    */
   let className = '';
   export { className as class };
-  /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
-   */
-  export let hidden = undefined;
   /**
    * Whether to make the spacer flexible.
    * @type {boolean}
@@ -21,13 +16,7 @@
   export let flex = false;
 </script>
 
-<div
-  class="sui spacer {className}"
-  class:flex
-  hidden={hidden || undefined}
-  aria-hidden={hidden}
-  {...$$restProps}
-/>
+<div role="none" class="sui spacer {className}" class:flex {...$$restProps} />
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/divider/spacer.svelte.d.ts

@@ -5,7 +5,6 @@
 export default class Spacer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    hidden?: boolean;
     flex?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -19,7 +18,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        hidden?: boolean | undefined;
         flex?: boolean;
     };
     events: {

package/package/components/drawer/drawer.svelte

@@ -5,332 +5,242 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
+  import Modal from '../util/modal.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the content element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
   /**
    * Whether to open the drawer.
+   * @type {boolean}
    */
   export let open = false;
-
   /**
    * Title text displayed on the header.
+   * @type {string}
    */
   export let title = '';
-
   /**
    * Position of the drawer.
-   * @type {('top'|'right'|'bottom'|'left')}
+   * @type {'top' | 'right' | 'bottom' | 'left'}
    */
   export let position = 'right';
-
   /**
    * Width or height of the drawer.
-   * @type {('small'|'medium'|'large'|'x-large')}
+   * @type {'small' | 'medium' | 'large' | 'x-large'}
    */
   export let size = 'small';
-
   /**
    * Whether to show the Close button.
-   * @type {('inside'|'outside'|false)}
+   * @type {'inside' | 'outside' | false}
    */
   export let showClose = 'outside';
-
   /**
-   * Whether to close the drawer when the backdrop (outside of the drawer) is clicked.
+   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
+   * @type {boolean}
    */
-  export let closeOnBackdropClick = false;
-
+  export let lightDismiss = false;
   /**
-   * Whether to keep the content when the dialog is not displayed.
+   * Whether to keep the content in the DOM tree when the modal is not displayed.
+   * @type {boolean}
    */
   export let keepContent = false;
 
-  const dispatch = createEventDispatcher();
-  /** @type {?HTMLDialogElement} */
-  let dialog;
-  /** @type {?HTMLFormElement} */
-  let form;
-  let showDialog = false;
-  let showContent = false;
-
-  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
-
   /**
-   *
+   * The ID of the drawer.
+   * @type {string}
    */
-  const openDialog = async () => {
-    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
-    showContent = true;
-    dialog.showModal();
-
-    window.requestAnimationFrame(() => {
-      showDialog = true;
-    });
-  };
-
+  const id = getRandomId('drawer');
   /**
-   *
+   * A reference to the modal component.
+   * @type {Modal}
    */
-  const closeDialog = async () => {
-    showDialog = false;
-
-    if (dialog.returnValue === 'ok') {
-      dispatch('ok');
-    }
-
-    if (dialog.returnValue === 'cancel') {
-      dispatch('cancel');
-    }
+  let modal;
 
-    dispatch('close', dialog.returnValue);
-
-    await new Promise((resolve) => {
-      form.addEventListener('transitionend', () => resolve(), { once: true });
-    });
-
-    showContent = false;
-    dialog?.close();
-    dialog?.remove();
-  };
-
-  /**
-   *
-   */
-  const toggleDialog = () => {
-    if (dialog) {
-      if (open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
-    }
-  };
-
-  $: {
-    void open;
-    toggleDialog();
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
+  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog
-  bind:this={dialog}
-  class="sui dialog {className} {size} {position} {orientation}"
-  class:open={showDialog}
+<Modal
+  {id}
+  class="drawer"
+  bind:open
+  showBackdrop
+  {lightDismiss}
+  {keepContent}
   {...$$restProps}
-  on:click={({ target }) => {
-    if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
-      dialog.returnValue = 'cancel';
-      open = false;
-    }
-  }}
-  on:cancel|preventDefault={() => {
-    // Cancelled with the Escape key
-    open = false;
-  }}
+  bind:this={modal}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
 >
-  <form method="dialog" bind:this={form} on:submit|preventDefault>
-    <div class="extra-control">
+  <div role="none" class="content {className} {size} {position} {orientation}">
+    <div role="none" class="extra-control">
       {#if showClose === 'outside'}
         <Button
           variant="ghost"
           iconic
           class="close"
+          aria-label={$_('_sui.close')}
+          aria-controls={id}
           on:click={() => {
-            dialog.returnValue = 'close';
-            open = false;
+            modal.close('close');
           }}
         >
-          <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
+          <Icon slot="start-icon" name="close" />
         </Button>
       {/if}
     </div>
-    {#if keepContent || showContent}
-      {#if title || showClose === 'inside' || $$slots.header || $$slots['header-extra']}
-        <div class="header">
-          {#if $$slots.header}
-            <slot name="header" />
-          {:else}
-            <div class="title">
-              {title}
-            </div>
-            <Spacer flex={true} />
-            {#if $$slots['header-extra']}
-              <slot name="header-extra" />
-            {/if}
-            {#if showClose === 'inside'}
-              <Button
-                variant="ghost"
-                iconic
-                class="close"
-                on:click={() => {
-                  dialog.returnValue = 'close';
-                  open = false;
-                }}
-              >
-                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
-              </Button>
-            {/if}
+    {#if title || showClose === 'inside' || $$slots.header || $$slots['header-extra']}
+      <div role="none" class="header">
+        {#if $$slots.header}
+          <slot name="header" />
+        {:else}
+          <div role="none" class="title">
+            {title}
+          </div>
+          <Spacer flex={true} />
+          {#if $$slots['header-extra']}
+            <slot name="header-extra" />
           {/if}
-        </div>
-      {/if}
-      <div class="main">
-        <slot />
+          {#if showClose === 'inside'}
+            <Button
+              variant="ghost"
+              iconic
+              class="close"
+              aria-label={$_('_sui.close')}
+              aria-controls={id}
+              on:click={() => {
+                modal.close('close');
+              }}
+            >
+              <Icon slot="start-icon" name="close" />
+            </Button>
+          {/if}
+        {/if}
       </div>
-      {#if $$slots.footer}
-        <div class="footer">
-          <slot name="footer" />
-        </div>
-      {/if}
     {/if}
-  </form>
-</dialog>
+    <div role="none" class="main">
+      <slot />
+    </div>
+    {#if $$slots.footer}
+      <div role="none" class="footer">
+        <slot name="footer" />
+      </div>
+    {/if}
+  </div>
+</Modal>
 
-<style>dialog {
-  overflow: hidden;
-  outline: 0;
-  background-color: var(--sui-popup-backdrop-color);
-}
-dialog.open form {
-  opacity: 1;
-  transform: translateX(0%);
-  transition-duration: 100ms;
-}
-dialog:not(.open) {
-  pointer-events: none !important;
-}
-dialog:not(.open) form {
-  opacity: 0;
-  transform: translateX(105%);
-  pointer-events: none;
-  transition-duration: 200ms;
-}
-dialog:not(.open) :global(*) {
-  pointer-events: none !important;
-}
-dialog :global(a),
-dialog :global(input),
-dialog :global(textarea),
-dialog :global(button),
-dialog :global([tabindex="0"]) {
-  pointer-events: all;
-}
-dialog form {
+<style>.content {
   position: absolute;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  max-width: 100vw;
-  max-height: 100vh;
+  max-width: 100dvw;
+  max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);
-  -webkit-backdrop-filter: blur(32px);
-  backdrop-filter: blur(32px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  transition-property: transform;
 }
-dialog form .extra-control {
+.content .extra-control {
   position: absolute;
 }
-dialog form .extra-control :global(button.close) {
+.content .extra-control :global(button.close) {
   margin: 8px;
 }
-dialog.right form {
+:global(dialog.open) .content {
+  transition-duration: 150ms;
+  transform: translateX(0%);
+}
+:global(dialog:not(.open)) .content {
+  transition-duration: 300ms;
+}
+.content.right {
   inset: 0 0 0 auto;
 }
-dialog.right form .extra-control {
+.content.right .extra-control {
   inset: 0 100% auto auto;
 }
-dialog.right:not(.open) form {
+:global(dialog:not(.open)) .content.right {
   transform: translateX(105%);
 }
-dialog.left form {
+.content.left {
   inset: 0 auto 0 0;
 }
-dialog.left form .extra-control {
+.content.left .extra-control {
   inset: 0 auto auto 100%;
 }
-dialog.left:not(.open) form {
+:global(dialog:not(.open)) .content.left {
   transform: translateX(-105%);
 }
-dialog.vertical {
+.content.vertical {
   height: 100%;
-  max-width: 100vw;
+  max-width: 100dvw;
 }
-dialog.vertical.open form {
-  max-width: calc(100vw - 56px);
+:global(dialog.open) .content.vertical {
+  max-width: calc(100dvw - 56px);
   transform: translateX(0%);
 }
-dialog.vertical.small form {
+.content.vertical.small {
   width: 400px;
 }
-dialog.vertical.medium form {
+.content.vertical.medium {
   width: 600px;
 }
-dialog.vertical.large form {
+.content.vertical.large {
   width: 800px;
 }
-dialog.vertical.x-large form {
+.content.vertical.x-large {
   width: 1000px;
 }
-dialog.top form {
+.content.top {
   inset: 0 0 auto 0;
 }
-dialog.top form .extra-control {
+.content.top .extra-control {
   inset: 100% 0 auto auto;
 }
-dialog.top:not(.open) form {
+:global(dialog:not(.open)) .content.top {
   transform: translateY(-105%);
 }
-dialog.bottom form {
+.content.bottom {
   inset: auto 0 0 0;
 }
-dialog.bottom form .extra-control {
+.content.bottom .extra-control {
   inset: auto 0 100% auto;
 }
-dialog.bottom:not(.open) form {
+:global(dialog:not(.open)) .content.bottom {
   transform: translateY(105%);
 }
-dialog.horizontal {
+.content.horizontal {
   width: 100%;
-  max-height: 100vh;
+  max-height: 100dvh;
 }
-dialog.horizontal.open form {
-  max-height: calc(100vh - 56px);
+:global(dialog.open) .content.horizontal {
+  max-height: calc(100dvh - 56px);
   transform: translateY(0%);
 }
-dialog.horizontal.small form {
+.content.horizontal.small {
   height: 400px;
 }
-dialog.horizontal.medium form {
+.content.horizontal.medium {
   height: 600px;
 }
-dialog.horizontal.large form {
+.content.horizontal.large {
   height: 800px;
 }
-dialog.horizontal.x-large form {
+.content.horizontal.x-large {
   height: 1000px;
 }
 

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

@@ -12,14 +12,16 @@ export default class Drawer extends SvelteComponent<{
     title?: string;
     size?: "small" | "medium" | "large" | "x-large";
     position?: "top" | "right" | "bottom" | "left";
-    keepContent?: boolean;
     open?: boolean;
+    lightDismiss?: boolean;
+    keepContent?: boolean;
     showClose?: false | "inside" | "outside";
-    closeOnBackdropClick?: boolean;
 }, {
-    submit: SubmitEvent;
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
     ok: CustomEvent<any>;
     cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -39,17 +41,19 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        size?: ('small' | 'medium' | 'large' | 'x-large');
-        position?: ('top' | 'right' | 'bottom' | 'left');
-        keepContent?: boolean;
+        size?: 'small' | 'medium' | 'large' | 'x-large';
+        position?: 'top' | 'right' | 'bottom' | 'left';
         open?: boolean;
-        showClose?: ('inside' | 'outside' | false);
-        closeOnBackdropClick?: boolean;
+        lightDismiss?: boolean;
+        keepContent?: boolean;
+        showClose?: 'inside' | 'outside' | false;
     };
     events: {
-        submit: SubmitEvent;
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
         ok: CustomEvent<any>;
         cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,51 @@
+<!--
+  @component
+  The interactive version of `<TableBody>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  import { getRandomId } from '../../services/util';
+
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  /**
+   * Display label for the row group.
+   * @type {string}
+   */
+  export let label = '';
+
+  const id = getRandomId('tbody');
+</script>
+
+<div
+  role="rowgroup"
+  class="sui grid-body row-group {className}"
+  aria-labelledby={label ? `${id}-label` : undefined}
+  aria-roledescription="grid body"
+  {...$$restProps}
+>
+  {#if label}
+    <tr class="row-group-caption">
+      <th id="{id}-label" colspan="9999" scope="rowgroup">{label}</th>
+    </tr>
+  {/if}
+  <slot />
+</div>
+
+<style>.grid-body {
+  display: table-row-group;
+}
+
+th {
+  padding: 8px;
+  color: var(--sui-secondary-foreground-color);
+  background-color: var(--sui-secondary-background-color);
+  font-size: var(--sui-font-size-default);
+  text-align: left;
+}</style>

package/package/components/grid/grid-body.svelte.d.ts

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  GridBodyProps */
+/** @typedef {typeof __propDef.events}  GridBodyEvents */
+/** @typedef {typeof __propDef.slots}  GridBodySlots */
+/**
+ * The interactive version of `<TableBody>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridBody extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridBodyProps = typeof __propDef.props;
+export type GridBodyEvents = typeof __propDef.events;
+export type GridBodySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        label?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,22 @@
+<!--
+  @component
+  The interactive version of `<TableCell>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+  @see https://w3c.github.io/aria/#gridcell
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="gridcell" class="sui grid-cell {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.grid-cell {
+  display: table-cell;
+}</style>