@sveltia/ui 0.7.4 → 0.8.0

package/package/components/select/combobox.svelte

@@ -3,6 +3,7 @@
   A variant of the `<Select>` widget with an auto-complete text input field.
   @see https://w3c.github.io/aria/#combobox
   @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+  @todo Add DOM API compatibility.
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
@@ -32,30 +33,29 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
    * @type {boolean}
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
-  /**
-   * Text label displayed on the readonly item.
-   * @type {string}
-   */
-  export let label = '';
   /**
    * Selected option’s value.
    * @type {(string | number | undefined)}
    */
   export let value = undefined;
+  /**
+   * Whether to make the `combobox` editable.
+   */
+  export let editable = true;
   /**
    * Where to show the dropdown menu.
    * @type {PopupPosition}
@@ -71,27 +71,54 @@
   /** @type {Popup?} */
   let popupComponent;
   let isPopupOpen = writable(false);
+  /** @type {string} */
+  let label = '';
+
+  /**
+   * Update the `value` and `label` whenever an option is selected
+   * @param {HTMLButtonElement} target Selected option.
+   */
+  const onSelect = (target) => {
+    // @todo support more types
+    value = target.dataset.type === 'number' ? Number(target.value) : target.value;
+    label = target.querySelector('.label')?.textContent || target.value;
+    dispatch('change', { target: inputComponent?.element, value });
+  };
+
+  $: {
+    if (popupComponent?.content) {
+      window.requestAnimationFrame(() => {
+        const selected = popupComponent.content.querySelector(
+          '[role="option"][aria-selected="true"]',
+        );
+
+        if (selected) {
+          onSelect(/** @type {HTMLButtonElement?} */ (selected));
+        }
+      });
+    }
+  }
 </script>
 
-<div class="sui combobox {className}" class:readonly hidden={hidden || undefined} {...$$restProps}>
-  {#if readonly}
+<div role="none" class="sui combobox {className}" hidden={hidden || undefined} {...$$restProps}>
+  {#if !editable}
     <div
+      role="combobox"
       {id}
       class:selected={value !== undefined}
       tabindex={disabled ? -1 : 0}
-      role="combobox"
       aria-controls="{id}-popup"
       aria-expanded={$isPopupOpen}
       aria-hidden={hidden}
       aria-disabled={disabled}
-      aria-readonly="true"
+      aria-readonly={readonly}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
       bind:this={comboboxElement}
     >
-      <div class="label">
-        {value !== undefined ? label || value : $_('_sui.combobox.select_an_option')}
+      <div role="none" class="label">
+        {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
       </div>
     </div>
   {:else}
@@ -118,21 +145,19 @@
     {hidden}
     {disabled}
     tabindex={readonly || disabled ? -1 : 0}
+    aria-label={$isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
     on:click={(event) => {
+      event.preventDefault();
       event.stopPropagation();
 
-      if (!disabled) {
+      if (!disabled && !readonly) {
         $isPopupOpen = !$isPopupOpen;
       }
     }}
   >
-    <Icon
-      slot="start-icon"
-      name="expand_more"
-      label={$isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
-    />
+    <Icon slot="start-icon" name="expand_more" />
   </Button>
 </div>
 <Popup
@@ -147,13 +172,7 @@
   <Listbox
     on:click={(event) => {
       if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
-        // eslint-disable-next-line prefer-destructuring
-        const target = /** @type {HTMLButtonElement?} */ (event.target);
-
-        // @todo support more types
-        value = target.dataset.type === 'number' ? Number(target.value) : target.value;
-        label = target.querySelector('.label')?.textContent || target.value;
-        dispatch('change', { target: inputComponent?.element, value });
+        onSelect(/** @type {HTMLButtonElement?} */ (event.target));
       }
     }}
   >
@@ -162,6 +181,7 @@
 </Popup>
 
 <style>.combobox {
+  margin: var(--sui-focus-ring-width);
   display: flex;
   align-items: center;
   position: relative;
@@ -180,6 +200,7 @@
   position: absolute;
   inset: 0 0 auto auto;
   z-index: 1;
+  margin: 0 !important;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -214,11 +235,6 @@
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
   background-color: var(--sui-hover-background-color);
 }
-.combobox div[role=combobox][aria-disabled=true] {
-  background-color: var(--sui-disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
-}
 .combobox div[role=combobox] .label {
   display: block;
   overflow: hidden;
@@ -226,9 +242,13 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.combobox :global(.text-input) {
+  margin: 0 !important;
+  width: 100% !important;
+}
 .combobox :global(input) {
   padding: 0 32px 0 8px;
-  width: 100%;
+  width: 0;
 }
 .combobox + :global([role="listbox"]) {
   position: fixed;
@@ -237,8 +257,8 @@
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
   background-color: var(--sui-secondary-background-color);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
   /* Add .1s delay before the position can be determined */
   transition: opacity 100ms 100ms;
 }

package/package/components/select/combobox.svelte.d.ts

@@ -5,11 +5,11 @@
  * A variant of the `<Select>` widget with an auto-complete text input field.
  * @see https://w3c.github.io/aria/#combobox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * @todo Add DOM API compatibility.
  */
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
@@ -17,6 +17,7 @@ export default class Combobox extends SvelteComponent<{
     position?: PopupPosition;
     hidden?: boolean;
     readonly?: boolean;
+    editable?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -33,7 +34,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
         invalid?: boolean;
         disabled?: boolean;
         required?: boolean;
@@ -41,6 +41,7 @@ declare const __propDef: {
         position?: PopupPosition;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        editable?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/select/select.svelte

@@ -1,8 +1,9 @@
 <!--
   @component
-  A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+  A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
   @see https://w3c.github.io/aria/#combobox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 -->
 <script>
   import Combobox from './combobox.svelte';
@@ -23,21 +24,21 @@
    * @type {boolean}
    */
   export let disabled = false;
+  /**
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
   /**
    * Whether to disable the widget. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
-  /**
-   * Text label displayed on the readonly item.
-   * @type {string}
-   */
-  export let label = '';
   /**
    * Selected option’s value.
    * @type {(string | number | undefined)}
@@ -50,11 +51,11 @@
   class="sui select {className}"
   {hidden}
   {disabled}
-  readonly={true}
+  {readonly}
   {required}
   {invalid}
-  {label}
   {...$$restProps}
+  editable={false}
   on:change
 >
   <slot />

package/package/components/select/select.svelte.d.ts

@@ -2,19 +2,20 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 /**
- * A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+ * A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#combobox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
 export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
     value?: string | number;
     hidden?: boolean;
+    readonly?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -31,12 +32,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
         invalid?: boolean;
         disabled?: boolean;
         required?: boolean;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -27,12 +27,12 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
    * @type {boolean}
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -250,6 +250,10 @@
    * Initialize the variables.
    */
   const init = () => {
+    if (!base) {
+      return;
+    }
+
     barWidth = base.clientWidth;
 
     const stepCount = (max - min) / step + 1;
@@ -262,13 +266,15 @@
   };
 
   onMount(() => {
+    const observer = new ResizeObserver(() => init());
     const query = window.matchMedia('(pointer: coarse)');
 
-    new ResizeObserver(() => init()).observe(base);
+    observer.observe(base);
     query.addEventListener('change', init);
     init();
 
     return () => {
+      observer.disconnect();
       query.removeEventListener('change', init);
     };
   });
@@ -287,20 +293,21 @@
 />
 
 <div
+  role="none"
   class="sui slider {className}"
   class:disabled
-  role="none"
+  class:readonly
   hidden={hidden || undefined}
   {...$$restProps}
   on:click|preventDefault|stopPropagation
 >
   <div
-    class="base"
     role="none"
+    class="base"
     bind:this={base}
     on:click|preventDefault|stopPropagation={(event) => onClick(event)}
   >
-    <div class="base-bar" />
+    <div role="none" class="base-bar" />
     <div
       class="slider-bar"
       style:left="{multiThumb ? sliderPositions[0] : 0}px"
@@ -341,8 +348,8 @@
     {#if optionLabels.length}
       {#each optionLabels as label, index}
         <span
+          role="none"
           class="label"
-          role="presentation"
           style:left="{(barWidth / (optionLabels.length - 1)) * index}px"
         >
           {label}
@@ -355,6 +362,7 @@
 <style>.slider {
   position: relative;
   display: inline-block;
+  margin: var(--sui-focus-ring-width);
   padding: var(--sui-checkbox-height) calc(var(--sui-checkbox-height) / 2);
   touch-action: none;
 }

package/package/components/switch/switch.svelte

@@ -22,17 +22,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
    * @type {boolean}
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -49,9 +49,9 @@
 </script>
 
 <button
+  role="switch"
   class="sui switch {className}"
   type="button"
-  role="switch"
   hidden={hidden || undefined}
   disabled={disabled || undefined}
   aria-checked={checked}
@@ -62,10 +62,12 @@
   aria-invalid={invalid}
   {...$$restProps}
   on:click={() => {
-    checked = !checked;
+    if (!disabled && !readonly) {
+      checked = !checked;
+    }
   }}
 >
-  <span />
+  <span role="none" />
   {#if label}
     {label}
   {:else}
@@ -77,6 +79,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  margin: var(--sui-focus-ring-width);
   border-width: 0;
   border-style: solid;
   border-color: transparent;

package/package/components/switch/switch.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     invalid?: boolean;
+    label?: string;
     checked?: boolean | "mixed";
     disabled?: boolean;
     required?: boolean;
@@ -30,8 +30,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string | undefined;
         invalid?: boolean;
+        label?: string | undefined;
         checked?: boolean | 'mixed';
         disabled?: boolean;
         required?: boolean;

package/package/components/table/table-body.svelte

@@ -5,19 +5,47 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { getRandomId } from '../../services/util';
+
   /**
-   * CSS class name on the button.
+   * 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 table-body {className}" {...$$restProps}>
+<div
+  role="rowgroup"
+  class="sui table-body row-group {className}"
+  aria-labelledby={label ? `${id}-label` : undefined}
+  aria-roledescription="table body"
+  {...$$restProps}
+>
+  {#if label}
+    <tr class="row-group-caption">
+      <th id="{id}-label" colspan="9999" scope="rowgroup">{label}</th>
+    </tr>
+  {/if}
   <slot />
 </div>
 
 <style>.table-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/table/table-body.svelte.d.ts

@@ -9,6 +9,7 @@
 export default class TableBody extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,6 +24,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-cell.svelte

@@ -2,19 +2,18 @@
   @component
   The equivalent of the HTML `<td>` element.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
-  @see https://w3c.github.io/aria/#gridcell
+  @see https://w3c.github.io/aria/#cell
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 
-<div role="gridcell" class="sui table-cell {className}" {...$$restProps}>
+<div role="cell" class="sui table-cell {className}" {...$$restProps}>
   <slot />
 </div>
 

package/package/components/table/table-cell.svelte.d.ts

@@ -4,7 +4,7 @@
 /**
  * The equivalent of the HTML `<td>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
- * @see https://w3c.github.io/aria/#gridcell
+ * @see https://w3c.github.io/aria/#cell
  */
 export default class TableCell extends SvelteComponent<{
     [x: string]: any;

package/package/components/table/table-col-header.svelte

@@ -6,11 +6,10 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 

package/package/components/table/table-foot.svelte

@@ -6,15 +6,19 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 
-<div role="rowgroup" class="sui table-foot {className}" {...$$restProps}>
+<div
+  role="rowgroup"
+  class="sui table-foot {className}"
+  aria-roledescription="table foot"
+  {...$$restProps}
+>
   <slot />
 </div>
 

package/package/components/table/table-head.svelte

@@ -6,15 +6,19 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 
-<div role="rowgroup" class="sui table-head {className}" {...$$restProps}>
+<div
+  role="rowgroup"
+  class="sui table-head {className}"
+  aria-roledescription="table head"
+  {...$$restProps}
+>
   <slot />
 </div>
 

package/package/components/table/table-row-header.svelte

@@ -6,11 +6,10 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 

package/package/components/table/table-row.svelte

@@ -11,22 +11,9 @@
    */
   let className = '';
   export { className as class };
-  /**
-   * Whether to select the widget. An alias of the `aria-selected` attribute.
-   * @type {boolean}
-   */
-  export let selected = false;
 </script>
 
-<div
-  class="sui table-row {className}"
-  role="row"
-  tabindex="0"
-  aria-selected={selected}
-  {...$$restProps}
-  on:click
-  on:select
->
+<div role="row" class="sui table-row {className}" {...$$restProps}>
   <slot />
 </div>