@sveltia/ui 0.2.4 → 0.3.0

package/package/components/listbox/listbox.svelte

@@ -0,0 +1,74 @@
+<!--
+  @component
+  A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+  @see https://w3c.github.io/aria/#listbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { activateGroup } from '../util/group';
+
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {HTMLElement?} */
+  export let element = undefined;
+
+  export let multiple = false;
+</script>
+
+<div
+  class="sui listbox {className}"
+  tabindex="0"
+  role="listbox"
+  aria-multiselectable={multiple}
+  {...$$restProps}
+  bind:this={element}
+  on:click
+  on:select
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>[role=listbox] {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: 4px;
+  padding: 4px;
+  min-width: 160px;
+}
+[role=listbox] :global([role="separator"]) {
+  margin: 4px;
+}
+[role=listbox]:global(.tabs) {
+  padding: 0;
+  border-width: 0 1px 0 0;
+  border-color: var(--control-border-color);
+}
+[role=listbox]:global(.tabs) :global(.option button) {
+  justify-content: flex-start;
+  border-width: 0 2px 0 0;
+  border-color: transparent;
+  padding: 0 12px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: var(--tab--medium--height);
+}
+[role=listbox]:global(.tabs) :global(.option button) :global(.icon) {
+  display: none;
+}
+[role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
+  border-color: var(--primary-accent-color-lighter);
+}</style>

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

@@ -2,8 +2,10 @@
 /** @typedef {typeof __propDef.events}  ListboxEvents */
 /** @typedef {typeof __propDef.slots}  ListboxSlots */
 /**
+ * A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#listbox
- * @see https://w3c.github.io/aria-practices/#Listbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
 export default class Listbox extends SvelteComponentTyped<{
     [x: string]: any;

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

@@ -0,0 +1,47 @@
+<!--
+  @component
+  A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
+  or more `<Option>`s.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
+  @see https://w3c.github.io/aria/#listbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
+-->
+<script>
+  import { getRandomId } from '../util/util';
+
+  /**
+   * CSS class name on the group.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * The group’s label to be displayed above the child `<Option>`s.
+   */
+  export let label = '';
+
+  const id = getRandomId('optgroup');
+</script>
+
+<div
+  {id}
+  class="sui optgroup {className}"
+  role="group"
+  aria-labelledby="{id}-label"
+  {...$$restProps}
+>
+  <div id="{id}-label" class="label" role="none">{label}</div>
+  <slot />
+</div>
+
+<style>.optgroup:not(:first-child) {
+  margin: 12px 0 0;
+}
+
+.label {
+  margin: 8px;
+  color: var(--secondary-foreground-color);
+  font-size: var(--font-size--small);
+}</style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  OptionGroupProps */
+/** @typedef {typeof __propDef.events}  OptionGroupEvents */
+/** @typedef {typeof __propDef.slots}  OptionGroupSlots */
+/**
+ * A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
+ * or more `<Option>`s.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
+ * @see https://w3c.github.io/aria/#listbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
+ */
+export default class OptionGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type OptionGroupProps = typeof __propDef.props;
+export type OptionGroupEvents = typeof __propDef.events;
+export type OptionGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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
-  @see https://w3c.github.io/aria-practices/#menubutton
+  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://w3c.github.io/aria-practices/#menubutton */
+/**
+ * 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://w3c.github.io/aria-practices/#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,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  MenuEvents */
 /** @typedef {typeof __propDef.slots}  MenuSlots */
 /**
+ * A menu widget.
  * @see https://w3c.github.io/aria/#menu
- * @see https://w3c.github.io/aria-practices/#menu
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
 export default class Menu extends SvelteComponentTyped<{
     [x: string]: any;

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

@@ -1,11 +1,11 @@
 <!--
   @component
-  The container of `<RadioButton>`s.
+  The container of `<Radio>`s.
   @see https://w3c.github.io/aria/#radiogroup
-  @see https://w3c.github.io/aria-practices/#radiobutton
+  @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.
@@ -23,23 +23,28 @@
 </script>
 
 <div
-  class="sui radio-button-group {className} {orientation}"
+  class="sui radio-group {className} {orientation}"
+  tabindex="-1"
   role="radiogroup"
-  tabindex="0"
+  aria-orientation={orientation}
   bind:this={element}
+  on:select
   use:activateGroup
 >
   <slot />
 </div>
 
-<style>.radio-button-group {
+<style>.radio-group {
   display: inline-flex;
-  align-items: center;
-  gap: 16px;
 }
-.radio-button-group.horizontal {
+.radio-group:focus-visible {
+  outline-width: 0 !important;
+}
+.radio-group.horizontal {
+  gap: 16px;
   align-items: center;
 }
-.radio-button-group.vertical {
+.radio-group.vertical {
+  gap: 8px;
   flex-direction: column;
 }</style>

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

@@ -0,0 +1,40 @@
+/** @typedef {typeof __propDef.props}  RadioGroupProps */
+/** @typedef {typeof __propDef.events}  RadioGroupEvents */
+/** @typedef {typeof __propDef.slots}  RadioGroupSlots */
+/**
+ * The container of `<Radio>`s.
+ * @see https://w3c.github.io/aria/#radiogroup
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export default class RadioGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    orientation?: "vertical" | "horizontal";
+}, {
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioGroupProps = typeof __propDef.props;
+export type RadioGroupEvents = typeof __propDef.events;
+export type RadioGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        element?: HTMLElement | null;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};