@sveltia/ui 0.7.4 → 0.8.0

package/package/components/listbox/listbox.svelte

@@ -25,17 +25,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;
@@ -48,9 +48,9 @@
 </script>
 
 <div
+  role="listbox"
   class="sui listbox {className}"
   tabindex={disabled ? -1 : 0}
-  role="listbox"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
@@ -63,7 +63,7 @@
   on:click
   on:change
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -71,7 +71,7 @@
 <style>[role=listbox] {
   display: flex;
   flex-direction: column;
-  margin: 0;
+  margin: var(--sui-focus-ring-width);
   border-width: 1px;
   border-color: var(--sui-listbox-border-color);
   border-radius: var(--sui-listbox-border-radius);

package/package/components/listbox/option-group.svelte

@@ -34,22 +34,23 @@
 </script>
 
 <div
-  {id}
-  class="sui optgroup {className}"
   role="group"
+  {id}
+  class="sui option-group {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-label"
+  aria-roledescription="option group"
   {...$$restProps}
 >
-  <div id="{id}-label" class="label" role="none">{label}</div>
-  <div class="inner" inert={disabled}>
+  <div role="none" id="{id}-label" class="label">{label}</div>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
 
-<style>.optgroup:not(:first-child) {
+<style>.option-group:not(:first-child) {
   margin: 12px 0 0;
 }
 

package/package/components/listbox/option.svelte

@@ -5,7 +5,6 @@
   @see https://w3c.github.io/aria/#option
 -->
 <script>
-  import { onMount } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -40,37 +39,12 @@
    * @type {string | undefined}
    */
   export let value = undefined;
-
-  /**
-   * Reference to the `Button` component.
-   * @type {Button | undefined}
-   */
-  let buttonComponent;
-
-  /**
-   * Event listener for the `select` event fired in `group.js`.
-   * @param {CustomEvent} event `select` event.
-   */
-  const listener = ({ type }) => {
-    selected = type === 'select';
-  };
-
-  onMount(() => {
-    buttonComponent.element.addEventListener('select', listener);
-    buttonComponent.element.addEventListener('unselect', listener);
-
-    return () => {
-      buttonComponent.element.removeEventListener('select', listener);
-      buttonComponent.element.removeEventListener('unselect', listener);
-    };
-  });
 </script>
 
-<div class="sui option {className}" hidden={hidden || undefined}>
+<div role="none" class="sui option {className}" hidden={hidden || undefined}>
   <Button
-    bind:this={buttonComponent}
-    tabindex="-1"
     role="option"
+    tabindex="-1"
     aria-selected={selected}
     {label}
     {value}
@@ -84,6 +58,10 @@
     on:dragend
     on:drop
     on:select
+    on:change
+    on:change={(event) => {
+      selected = /** @type {CustomEvent} */ (event).detail.selected;
+    }}
   >
     {#if selected}
       <Icon class="check" name="check" />
@@ -105,6 +83,7 @@
   display: flex;
   justify-content: space-between;
   gap: 4px;
+  margin: 0 !important;
   border-radius: var(--sui-option-border-radius);
   padding: var(--sui-option-padding);
   width: 100%;

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

@@ -21,6 +21,7 @@ export default class Option extends SvelteComponent<{
     dragend: DragEvent;
     drop: DragEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -54,6 +55,7 @@ declare const __propDef: {
         dragend: DragEvent;
         drop: DragEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -24,17 +24,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;
@@ -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-group.svelte.d.ts

@@ -13,8 +13,8 @@ export default class RadioGroup extends SvelteComponent<{
     disabled?: boolean;
     required?: boolean;
     hidden?: boolean;
-    orientation?: "vertical" | "horizontal";
     readonly?: boolean;
+    orientation?: "vertical" | "horizontal";
 }, {
     change: Event;
 } & {
@@ -35,8 +35,8 @@ declare const __propDef: {
         disabled?: boolean;
         required?: boolean;
         hidden?: boolean | undefined;
-        orientation?: 'horizontal' | 'vertical';
         readonly?: boolean;
+        orientation?: 'horizontal' | 'vertical';
     };
     events: {
         change: Event;

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>;
     };