@sveltia/ui 0.7.5 → 0.8.1

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

@@ -67,23 +67,33 @@
   };
 </script>
 
-<Button
-  class="sui menu-button {className}"
-  {hidden}
-  {disabled}
-  {label}
-  {variant}
-  {size}
-  {iconic}
-  aria-haspopup="menu"
-  {...$$restProps}
-  bind:this={buttonComponent}
->
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>
+<div role="none" class="wrapper">
+  <Button
+    class="sui menu-button {className}"
+    {hidden}
+    {disabled}
+    {label}
+    {variant}
+    {size}
+    {iconic}
+    aria-haspopup="menu"
+    {...$$restProps}
+    bind:this={buttonComponent}
+  >
+    <slot name="start-icon" slot="start-icon" />
+    <slot />
+    <slot name="end-icon" slot="end-icon" />
+  </Button>
+</div>
 
 <Popup anchor={buttonComponent?.element} position={popupPosition} bind:this={popupComponent}>
   <slot name="popup" />
 </Popup>
+
+<style>.wrapper {
+  display: contents;
+}
+.wrapper :global(.icon:last-child) {
+  margin: 0 -2px;
+  font-size: 20px;
+}</style>

package/package/components/menu/menu-button.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     focus?: () => void;
+    label?: string;
     disabled?: boolean;
     size?: "small" | "medium" | "large";
     hidden?: boolean;
@@ -38,8 +38,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
         focus?: () => void;
+        label?: string;
         disabled?: boolean;
         size?: 'small' | 'medium' | 'large';
         hidden?: boolean | undefined;

package/package/components/menu/menu-item-checkbox.svelte

@@ -44,8 +44,8 @@
 </script>
 
 <MenuItem
-  class="sui menu-item-checkbox {className}"
   role="menuitemcheckbox"
+  class="sui menu-item-checkbox {className}"
   {label}
   {hidden}
   {disabled}
@@ -54,10 +54,11 @@
   {iconLabel}
   {...$$restProps}
   on:click
-  on:click={() => {
-    checked = !checked;
-  }}
   on:select
+  on:change
+  on:change={(event) => {
+    checked = /** @type {CustomEvent} */ (event).detail.checked;
+  }}
 >
   <slot />
   <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -17,6 +17,7 @@ export default class MenuItemCheckbox extends SvelteComponent<{
 }, {
     click: MouseEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -41,6 +42,7 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/menu/menu-item-group.svelte

@@ -30,19 +30,20 @@
 </script>
 
 <div
+  role="group"
   {id}
   class="sui menu-item-group {className}"
   hidden={hidden || undefined}
-  role="group"
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby={title ? '{id}-title' : undefined}
+  aria-roledescription="menu item group"
   {...$$restProps}
 >
   {#if title}
-    <div class="title" id="{id}-title">{title}</div>
+    <div role="none" class="title" id="{id}-title">{title}</div>
   {/if}
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>

package/package/components/menu/menu-item-radio.svelte

@@ -45,8 +45,8 @@
 </script>
 
 <MenuItem
-  class="sui menu-item-radio {className}"
   role="menuitemradio"
+  class="sui menu-item-radio {className}"
   {label}
   {hidden}
   {disabled}
@@ -55,10 +55,11 @@
   {iconLabel}
   {...$$restProps}
   on:click
-  on:click={() => {
-    checked = !checked;
-  }}
   on:select
+  on:change
+  on:change={(event) => {
+    checked = /** @type {CustomEvent} */ (event).detail.checked;
+  }}
 >
   <slot />
   <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />

package/package/components/menu/menu-item-radio.svelte.d.ts

@@ -18,6 +18,7 @@ export default class MenuItemRadio extends SvelteComponent<{
 }, {
     click: MouseEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -42,6 +43,7 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/menu/menu-item.svelte

@@ -52,7 +52,7 @@
   $: hasChildren = role === 'menuitem' && $$slots.default;
 </script>
 
-<div class="sui menuitem {className}" hidden={hidden || undefined}>
+<div role="none" class="sui menuitem {className}" hidden={hidden || undefined}>
   <Button
     {role}
     {hidden}
@@ -73,20 +73,21 @@
       }
     }}
     on:select
+    on:change
   >
     {#if iconName}
-      <Icon slot="start-icon" name={iconName} label={iconLabel} />
+      <Icon slot="start-icon" name={iconName} aria-label={iconLabel} />
     {/if}
     {#if label}
-      <span class="label">{label}</span>
+      <span role="none" class="label">{label}</span>
     {/if}
     {#if $$slots['end-icon']}
-      <span class="icon-outer">
+      <span role="none" class="icon-outer">
         <slot name="end-icon" />
       </span>
     {/if}
     {#if hasChildren}
-      <span class="icon-outer">
+      <span role="none" class="icon-outer">
         <Icon name="chevron_right" />
       </span>
     {/if}
@@ -107,6 +108,7 @@
   display: flex;
   justify-content: space-between !important;
   border-radius: var(--sui-option-border-radius);
+  margin: 0 !important;
   padding: 0 16px;
   width: 100%;
   min-width: 160px;

package/package/components/menu/menu-item.svelte.d.ts

@@ -10,13 +10,14 @@ export default class MenuItem extends SvelteComponent<{
     class?: string;
     label?: string;
     disabled?: boolean;
-    hidden?: boolean;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    hidden?: boolean;
     iconName?: string;
     iconLabel?: string;
 }, {
     click: MouseEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -34,14 +35,15 @@ declare const __propDef: {
         class?: string;
         label?: string | undefined;
         disabled?: boolean;
-        hidden?: boolean | undefined;
         role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+        hidden?: boolean | undefined;
         iconName?: string;
         iconLabel?: string;
     };
     events: {
         click: MouseEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/menu/menu.svelte

@@ -26,8 +26,8 @@
 </script>
 
 <div
-  class="sui menu {className}"
   role="menu"
+  class="sui menu {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}

package/package/components/radio/radio-group.svelte

@@ -46,9 +46,9 @@
 </script>
 
 <div
+  role="radiogroup"
   class="sui radio-group {className} {orientation}"
   tabindex="-1"
-  role="radiogroup"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
@@ -60,7 +60,7 @@
   use:activateGroup
   on:change
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -72,16 +72,16 @@
   outline-width: 0 !important;
 }
 .radio-group.horizontal {
-  gap: 16px;
+  gap: 8px;
   align-items: center;
 }
 .radio-group.vertical {
-  gap: 8px;
+  gap: 4px;
   flex-direction: column;
 }
 @media (pointer: coarse) {
   .radio-group.vertical {
-    gap: 16px;
+    gap: 8px;
   }
 }
 

package/package/components/radio/radio.svelte

@@ -56,9 +56,9 @@
 </script>
 
 <span
+  role="none"
   class="sui radio {className}"
   class:disabled
-  role="none"
   hidden={hidden || undefined}
   {...$$restProps}
   on:click={(event) => {
@@ -68,8 +68,8 @@
   }}
 >
   <Button
-    {id}
     role="radio"
+    {id}
     {hidden}
     {disabled}
     {name}
@@ -82,6 +82,7 @@
       checked = true;
     }}
     on:select
+    on:change
   />
   {#if $$slots.default || label}
     <label id="{id}-label">
@@ -98,6 +99,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  margin: var(--sui-focus-ring-width);
   color: var(--sui-control-foreground-color);
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);
@@ -126,6 +128,7 @@
 .radio :global(button) {
   justify-content: center;
   overflow: hidden;
+  margin: 0 !important;
   border-width: 1.5px;
   border-color: var(--sui-checkbox-border-color);
   border-radius: var(--sui-checkbox-height);

package/package/components/radio/radio.svelte.d.ts

@@ -18,6 +18,7 @@ export default class Radio extends SvelteComponent<{
     hidden?: boolean;
 }, {
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -41,6 +42,7 @@ declare const __propDef: {
     };
     events: {
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/select/combobox.svelte

@@ -100,13 +100,13 @@
   }
 </script>
 
-<div class="sui combobox {className}" hidden={hidden || undefined} {...$$restProps}>
+<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}
@@ -117,7 +117,7 @@
       {...$$restProps}
       bind:this={comboboxElement}
     >
-      <div class="label">
+      <div role="none" class="label">
         {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
       </div>
     </div>
@@ -145,6 +145,7 @@
     {hidden}
     {disabled}
     tabindex={readonly || disabled ? -1 : 0}
+    aria-label={$isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
     on:click={(event) => {
@@ -156,11 +157,7 @@
       }
     }}
   >
-    <Icon
-      slot="start-icon"
-      name="expand_more"
-      label={$isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
-    />
+    <Icon slot="start-icon" name="expand_more" />
   </Button>
 </div>
 <Popup
@@ -168,7 +165,6 @@
   class="combobox"
   anchor={comboboxElement ?? inputComponent?.element}
   {position}
-  keepContent={true}
   touchOptimized={true}
   bind:open={isPopupOpen}
   bind:this={popupComponent}
@@ -185,6 +181,7 @@
 </Popup>
 
 <style>.combobox {
+  margin: var(--sui-focus-ring-width);
   display: flex;
   align-items: center;
   position: relative;
@@ -203,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;
 }
@@ -244,6 +242,10 @@
   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: 0;

package/package/components/slider/slider.svelte

@@ -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,21 +293,21 @@
 />
 
 <div
+  role="none"
   class="sui slider {className}"
   class:disabled
   class:readonly
-  role="none"
   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"
@@ -342,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}
@@ -356,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

@@ -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}
@@ -67,7 +67,7 @@
     }
   }}
 >
-  <span />
+  <span role="none" />
   {#if label}
     {label}
   {:else}
@@ -79,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>