@sveltia/ui 0.2.5 → 0.3.0

package/package/components/{core → listbox}/option.svelte

@@ -1,10 +1,13 @@
 <!--
   @component
+  An option within the `<Listbox>` widget. The equivalent of the HTML `<option>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
   @see https://w3c.github.io/aria/#option
 -->
 <script>
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import { onMount } from 'svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
 
   /**
    * CSS class name on the button.
@@ -17,10 +20,35 @@
   export let label = '';
   export let value = undefined;
   export let selected = false;
+
+  /**
+   * @type {Button}
+   */
+  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}">
   <Button
+    bind:this={buttonComponent}
+    tabindex="-1"
     role="option"
     aria-selected={selected}
     {label}
@@ -45,6 +73,9 @@
 <style>.option {
   display: contents;
 }
+.option:focus-visible {
+  outline-width: 0 !important;
+}
 .option :global([role="option"]) {
   flex: none;
   display: flex;
@@ -56,6 +87,7 @@
   height: var(--option--medium--height);
   white-space: nowrap;
 }
+.option :global(.focused),
 .option :global([role="option"]:hover) {
   color: var(--highlight-foreground-color);
   background-color: var(--highlight-background-color);

package/package/components/{core → listbox}/option.svelte.d.ts

@@ -1,12 +1,16 @@
 /** @typedef {typeof __propDef.props}  OptionProps */
 /** @typedef {typeof __propDef.events}  OptionEvents */
 /** @typedef {typeof __propDef.slots}  OptionSlots */
-/** @see https://w3c.github.io/aria/#option */
+/**
+ * An option within the `<Listbox>` widget. The equivalent of the HTML `<option>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+ * @see https://w3c.github.io/aria/#option
+ */
 export default class Option extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
-    class?: string;
     value?: any;
+    class?: string;
     selected?: boolean;
 }, {
     click: MouseEvent;
@@ -34,8 +38,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        class?: string;
         value?: any;
+        class?: string;
         selected?: boolean;
     };
     events: {

package/package/components/{core → menu}/menu-button.svelte

@@ -1,10 +1,11 @@
 <!--
   @component
+  A button to open a `<Menu>` widget.
   @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 -->
 <script>
+  import Button from '../button/button.svelte';
   import Popup from '../util/popup.svelte';
-  import Button from './button.svelte';
 
   /**
    * CSS class name on the button.
@@ -31,21 +32,6 @@
   aria-haspopup="menu"
   {...$$restProps}
   bind:this={buttonComponent}
-  on:keydown={(event) => {
-    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
-
-    if (['ArrowUp', 'ArrowDown'].includes(key) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
-      event.preventDefault();
-
-      const members = [
-        ...popupComponent.dialog.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
-      ];
-
-      if (members.length) {
-        /** @type {HTMLElement} */ (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
-      }
-    }
-  }}
 >
   <slot name="start-icon" slot="start-icon" />
   <slot />

package/package/components/{core → menu}/menu-button.svelte.d.ts

@@ -1,7 +1,10 @@
 /** @typedef {typeof __propDef.props}  MenuButtonProps */
 /** @typedef {typeof __propDef.events}  MenuButtonEvents */
 /** @typedef {typeof __propDef.slots}  MenuButtonSlots */
-/** @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */
+/**
+ * A button to open a `<Menu>` widget.
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+ */
 export default class MenuButton extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;

package/package/components/{core → menu}/menu-item-checkbox.svelte

@@ -1,5 +1,6 @@
 <!--
   @component
+  A menu item widget with a checkbox.
   @see https://w3c.github.io/aria/#menuitemcheckbox
 -->
 <script>

package/package/components/{core → menu}/menu-item-checkbox.svelte.d.ts

@@ -1,7 +1,10 @@
 /** @typedef {typeof __propDef.props}  MenuItemCheckboxProps */
 /** @typedef {typeof __propDef.events}  MenuItemCheckboxEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemCheckboxSlots */
-/** @see https://w3c.github.io/aria/#menuitemcheckbox */
+/**
+ * A menu item widget with a checkbox.
+ * @see https://w3c.github.io/aria/#menuitemcheckbox
+ */
 export default class MenuItemCheckbox extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;

package/package/components/{composite → menu}/menu-item-group.svelte

@@ -1,5 +1,9 @@
+<!--
+  @component
+  A menu item group.
+-->
 <script>
-  import { getRandomId } from '../helpers/util';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.

package/package/components/{composite → menu}/menu-item-group.svelte.d.ts

@@ -1,6 +1,7 @@
 /** @typedef {typeof __propDef.props}  MenuItemGroupProps */
 /** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
+/** A menu item group. */
 export default class MenuItemGroup extends SvelteComponentTyped<{
     [x: string]: any;
     title?: string;

package/package/components/{core → menu}/menu-item-radio.svelte

@@ -1,5 +1,7 @@
 <!--
   @component
+  A menu item widget with a radio. Only one item can be selected within the parent `<Menu>` or
+  `<MenuItemGroup>` component.
   @see https://w3c.github.io/aria/#menuitemradio
 -->
 <script>

package/package/components/{core → menu}/menu-item-radio.svelte.d.ts

@@ -1,7 +1,11 @@
 /** @typedef {typeof __propDef.props}  MenuItemRadioProps */
 /** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
-/** @see https://w3c.github.io/aria/#menuitemradio */
+/**
+ * A menu item widget with a radio. Only one item can be selected within the parent `<Menu>` or
+ * `<MenuItemGroup>` component.
+ * @see https://w3c.github.io/aria/#menuitemradio
+ */
 export default class MenuItemRadio extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;

package/package/components/{core → menu}/menu-item.svelte

@@ -1,13 +1,14 @@
 <!--
   @component
+  A menu item widget.
   @see https://w3c.github.io/aria/#menuitem
 -->
 <script>
   import { writable } from 'svelte/store';
-  import Menu from '../composite/menu.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Menu from './menu.svelte';
 
   let className = '';
 
@@ -36,7 +37,7 @@
     {role}
     aria-checked={checked}
     aria-haspopup={hasChildren ? 'menu' : undefined}
-    aria-expanded={$isPopupOpen ? true : undefined}
+    aria-expanded={hasChildren && $isPopupOpen ? true : undefined}
     {...$$restProps}
     bind:this={buttonComponent}
     on:click
@@ -90,8 +91,7 @@
 .menuitem :global(button[aria-checked="true"]) :global(.icon) {
   color: var(--primary-accent-color-lighter);
 }
-.menuitem :global(button:hover),
-.menuitem :global(button:focus) {
+.menuitem :global(button:hover) {
   color: var(--highlight-foreground-color);
   background-color: var(--highlight-background-color);
 }

package/package/components/{core → menu}/menu-item.svelte.d.ts

@@ -1,7 +1,10 @@
 /** @typedef {typeof __propDef.props}  MenuItemProps */
 /** @typedef {typeof __propDef.events}  MenuItemEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemSlots */
-/** @see https://w3c.github.io/aria/#menuitem */
+/**
+ * A menu item widget.
+ * @see https://w3c.github.io/aria/#menuitem
+ */
 export default class MenuItem extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;

package/package/components/{composite → menu}/menu.svelte

@@ -1,12 +1,13 @@
 <!--
   @component
+  A menu widget.
   @see https://w3c.github.io/aria/#menu
   @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 -->
 <svelte:options accessors={true} />
 
 <script>
-  import { activateGroup } from '../helpers/group';
+  import { activateGroup } from '../util/group';
 
   /**
    * CSS class name on the button.

package/package/components/{composite → menu}/menu.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  MenuEvents */
 /** @typedef {typeof __propDef.slots}  MenuSlots */
 /**
+ * A menu widget.
  * @see https://w3c.github.io/aria/#menu
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */

package/package/components/{composite → radio}/radio-group.svelte

@@ -5,7 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { activateGroup } from '../helpers/group';
+  import { activateGroup } from '../util/group';
 
   /**
    * CSS class name on the button.
@@ -24,8 +24,9 @@
 
 <div
   class="sui radio-group {className} {orientation}"
+  tabindex="-1"
   role="radiogroup"
-  tabindex="0"
+  aria-orientation={orientation}
   bind:this={element}
   on:select
   use:activateGroup
@@ -36,6 +37,9 @@
 <style>.radio-group {
   display: inline-flex;
 }
+.radio-group:focus-visible {
+  outline-width: 0 !important;
+}
 .radio-group.horizontal {
   gap: 16px;
   align-items: center;

package/package/components/{composite → radio}/radio-group.svelte.d.ts

@@ -9,7 +9,7 @@
 export default class RadioGroup extends SvelteComponentTyped<{
     class?: string;
     element?: HTMLElement;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
 }, {
     select: Event;
 } & {

package/package/components/{core → radio}/radio.svelte

@@ -1,12 +1,14 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="radio">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
   @see https://w3c.github.io/aria/#radio
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { getRandomId } from '../helpers/util';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.
@@ -95,7 +97,7 @@
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--primary-control-border-color);
+  border-color: var(--checkbox-border-color);
   border-radius: 24px;
   width: 20px;
   height: 20px;

package/package/components/{core → radio}/radio.svelte.d.ts

@@ -2,15 +2,17 @@
 /** @typedef {typeof __propDef.events}  RadioEvents */
 /** @typedef {typeof __propDef.slots}  RadioSlots */
 /**
+ * The equivalent of the HTML `<input type="radio">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class Radio extends SvelteComponentTyped<{
     label?: string;
-    class?: string;
     disabled?: boolean;
     name?: string;
     value?: string;
+    class?: string;
     selected?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -25,10 +27,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | null;
-        class?: string;
         disabled?: boolean;
         name?: string;
         value?: string | null;
+        class?: string;
         selected?: boolean;
     };
     events: {

package/package/components/{composite → select}/combobox.svelte

@@ -1,5 +1,6 @@
 <!--
   @component
+  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/
 -->
@@ -7,12 +8,12 @@
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import TextInput from '../core/text-input.svelte';
-  import { getRandomId } from '../helpers/util';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import Listbox from '../listbox/listbox.svelte';
+  import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
-  import Listbox from './listbox.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.
@@ -162,7 +163,7 @@
   display: flex;
   align-items: center;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   border-radius: 4px;
   padding: 0 32px 0 8px;
   width: 100%;

package/package/components/{composite → select}/combobox.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ComboboxEvents */
 /** @typedef {typeof __propDef.slots}  ComboboxSlots */
 /**
+ * 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/
  */
@@ -9,9 +10,9 @@ export default class Combobox extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
     position?: PopupPosition;
-    class?: string;
     disabled?: boolean;
     value?: string | number;
+    class?: string;
     readOnly?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -30,9 +31,9 @@ declare const __propDef: {
         [x: string]: any;
         label?: string;
         position?: PopupPosition;
-        class?: string;
         disabled?: boolean;
         value?: (string | number | undefined);
+        class?: string;
         readOnly?: boolean;
     };
     events: {

package/package/components/{composite → select}/select.svelte

@@ -1,6 +1,8 @@
 <!--
   @component
-  A read-only variant of `<Combobox>`.
+  A read-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
 -->
 <script>
   import Combobox from './combobox.svelte';

package/package/components/{composite → select}/select.svelte.d.ts

@@ -1,12 +1,16 @@
 /** @typedef {typeof __propDef.props}  SelectProps */
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
-/** A read-only variant of `<Combobox>`. */
+/**
+ * A read-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
+ */
 export default class Select extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -23,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        class?: string;
         value?: string | null;
+        class?: string;
     };
     events: {
         change: CustomEvent<any>;