@sveltia/ui 0.2.5 → 0.3.0

package/package/components/{core → text-field}/text-input.svelte

@@ -1,11 +1,13 @@
 <!--
   @component
+  A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
   @see https://w3c.github.io/aria/#textbox
 -->
 <svelte:options accessors={true} />
 
 <script>
-  import { getRandomId } from '../helpers/util';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.
@@ -84,7 +86,7 @@ input {
   display: inline-block;
   flex: auto;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   border-radius: var(--input--medium--border-radius);
   padding: 0 8px;
   min-width: 0;
@@ -101,7 +103,7 @@ input:focus {
 }
 input:read-only {
   color: var(--tertiary-foreground-color);
-  border-color: var(--secondary-control-border-color) !important;
+  border-color: var(--control-border-color) !important;
 }
 input:disabled {
   background-color: var(--disabled-background-color);
@@ -115,7 +117,7 @@ input ~ :global(button) {
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   height: var(--input--medium--height);
   aspect-ratio: 1/1;
 }

package/package/components/{core → text-field}/text-input.svelte.d.ts

@@ -1,15 +1,19 @@
 /** @typedef {typeof __propDef.props}  TextInputProps */
 /** @typedef {typeof __propDef.events}  TextInputEvents */
 /** @typedef {typeof __propDef.slots}  TextInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class TextInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
-    element?: HTMLInputElement;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     disabled?: boolean;
     name?: string;
     value?: string | number;
+    class?: string;
+    element?: HTMLInputElement;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     readOnly?: boolean;
 }, {
     input: Event;
@@ -49,12 +53,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        element?: HTMLInputElement | null;
-        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
         name?: string;
         value?: (string | number | undefined);
+        class?: string;
+        element?: HTMLInputElement | null;
+        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         readOnly?: boolean;
     };
     events: {

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

@@ -1,5 +1,6 @@
 <!--
   @component
+  A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
   @see https://w3c.github.io/aria/#toolbar
   @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
 -->

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

@@ -2,13 +2,14 @@
 /** @typedef {typeof __propDef.events}  ToolbarEvents */
 /** @typedef {typeof __propDef.slots}  ToolbarSlots */
 /**
+ * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
 export default class Toolbar extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/package/components/util/app-shell.svelte

@@ -52,14 +52,13 @@
   --foreground-color-2-hsl: var(--base-hue) 5% 20%;
   --foreground-color-3-hsl: var(--base-hue) 5% 40%;
   --foreground-color-4-hsl: var(--base-hue) 5% 60%;
-  --border-color-1-hsl: var(--base-hue) 5% 30%;
-  --border-color-2-hsl: var(--base-hue) 5% 50%;
-  --border-color-3-hsl: var(--base-hue) 5% 70%;
   --background-color-1-hsl: var(--base-hue) 5% 100%;
   --background-color-2-hsl: var(--base-hue) 5% 98%;
   --background-color-3-hsl: var(--base-hue) 5% 94%;
   --background-color-4-hsl: var(--base-hue) 5% 90%;
   --background-color-5-hsl: var(--base-hue) 5% 86%;
+  --border-color-1-hsl: var(--base-hue) 5% 78%;
+  --border-color-2-hsl: var(--base-hue) 5% 82%;
   --shadow-color: var(--base-hue) 10% 0%;
   --primary-accent-color: hsl(var(--base-hue) 80% 45%);
   --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
@@ -82,14 +81,13 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%;
   --foreground-color-3-hsl: var(--base-hue) 10% 60%;
   --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --border-color-1-hsl: var(--base-hue) 10% 70%;
-  --border-color-2-hsl: var(--base-hue) 10% 50%;
-  --border-color-3-hsl: var(--base-hue) 10% 30%;
   --background-color-1-hsl: var(--base-hue) 10% 10%;
   --background-color-2-hsl: var(--base-hue) 10% 12%;
   --background-color-3-hsl: var(--base-hue) 10% 16%;
   --background-color-4-hsl: var(--base-hue) 10% 20%;
   --background-color-5-hsl: var(--base-hue) 10% 24%;
+  --border-color-1-hsl: var(--base-hue) 10% 32%;
+  --border-color-2-hsl: var(--base-hue) 10% 28%;
   --shadow-color: var(--base-hue) 10% 0%;
   --primary-accent-color: hsl(var(--base-hue) 100% 45%);
   --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
@@ -158,8 +156,8 @@
   );
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --primary-control-border-color: hsl(var(--border-color-2-hsl));
-  --secondary-control-border-color: hsl(var(--border-color-3-hsl));
+  --control-border-color: hsl(var(--border-color-2-hsl));
+  --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
   --danger-border-color: hsl(
     var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );
@@ -227,6 +225,10 @@
 :global(*) {
   scroll-behavior: smooth;
   box-sizing: border-box;
+  outline-offset: 1px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: transparent;
   border-width: 0;
   border-style: solid;
 }
@@ -237,10 +239,7 @@
 }
 
 :global(:focus-visible) {
-  outline-offset: -2px;
-  outline-width: 2px !important;
-  outline-style: solid;
-  outline-color: hsl(var(--hue), 100%, 50%, 25%);
+  outline-color: var(--primary-accent-color-lighter);
 }
 
 :global(h1),
@@ -283,17 +282,6 @@
   line-height: 1.75;
 }
 
-:global([role=grid]) {
-  display: table;
-  width: 100%;
-}
-:global([role=grid]) :global(.colgroup) {
-  display: table-column-group;
-}
-:global([role=grid]) :global(.colgroup) :global(.col) {
-  display: table-column;
-}
-
 :global(code),
 :global(pre) {
   font-family: var(--font-family--monospace);
@@ -327,23 +315,6 @@
   background: transparent;
 }
 
-:global(.thead[role=rowgroup]) {
-  display: table-header-group;
-}
-
-:global(.tbody[role=rowgroup]) {
-  display: table-row-group;
-}
-
-:global([role=row]) {
-  display: table-row;
-}
-
-:global([role=columnheader]),
-:global([role=gridcell]) {
-  display: table-cell;
-}
-
 :global(.app-shell) {
   position: fixed;
   inset: 0;

package/package/components/util/group.js

@@ -0,0 +1,305 @@
+import { getRandomId, sleep } from './util';
+
+/**
+ * @type {{ [role: string]: {
+ *   orientation: string,
+ *   childRoles: string[],
+ *   childSelectedAttr: string,
+ *   focusChild: boolean
+ * } }}
+ */
+const config = {
+  grid: {
+    orientation: 'vertical',
+    childRoles: ['row'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: true,
+  },
+  listbox: {
+    orientation: 'vertical',
+    childRoles: ['option'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: false,
+  },
+  menu: {
+    orientation: 'vertical',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  menubar: {
+    orientation: 'horizontal',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  radiogroup: {
+    orientation: 'horizontal',
+    childRoles: ['radio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  tablist: {
+    orientation: 'horizontal',
+    childRoles: ['tab'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: true,
+  },
+};
+
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+class Group {
+  /**
+   * Initialize a new `Group` instance.
+   * @param {HTMLElement} parent Parent element.
+   * @todo Check for added elements probably with `MutationObserver`.
+   */
+  constructor(parent) {
+    this.parent = parent;
+    this.role = parent.getAttribute('role');
+    this.grid = this.role === 'listbox' && parent.matches('.grid');
+    this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
+    this.id = getRandomId(this.role);
+    this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
+
+    const { orientation, childRoles, childSelectedAttr, focusChild } = config[this.role];
+
+    this.orientation = this.grid
+      ? 'horizontal'
+      : this.parent.getAttribute('aria-orientation') || orientation;
+    this.childRoles = childRoles;
+    this.childSelectedAttr = childSelectedAttr;
+    this.focusChild = focusChild;
+
+    const { allMembers } = this;
+
+    const hasSelected = allMembers.some((element) =>
+      element.matches(`[${childSelectedAttr}="true"]`),
+    );
+
+    allMembers.forEach((element, index) => {
+      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
+      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
+
+      element.id ||= `${this.id}-item-${index}`;
+      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
+      element.setAttribute(this.childSelectedAttr, String(isSelected));
+      controls?.setAttribute('aria-labelledby', element.id);
+      controls?.setAttribute('aria-hidden', String(!isSelected));
+    });
+
+    parent.addEventListener('click', (event) => {
+      if (/** @type {HTMLElement} */ (event.target).matches(this.selector)) {
+        this.onClick(event);
+      }
+    });
+
+    parent.addEventListener('keydown', (event) => {
+      this.onKeyDown(event);
+    });
+  }
+
+  /** @type {string} */
+  get selector() {
+    return this.childRoles.map((role) => `[role="${role}"]`).join(',');
+  }
+
+  /** @type {HTMLElement[]} */
+  get allMembers() {
+    // @ts-ignore
+    return [...this.parent.querySelectorAll(this.selector)];
+  }
+
+  /** @type {HTMLElement[]} */
+  get activeMembers() {
+    return this.allMembers.filter((element) => !element.matches('[aria-disabled="true"]'));
+  }
+
+  /**
+   * Select (and move focus to) the given target.
+   * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
+   * @param {HTMLElement} newTarget Target element.
+   */
+  selectTarget(event, newTarget) {
+    const targetParentGroup = newTarget.closest(this.parentGroupSelector);
+
+    this.activeMembers.forEach((element) => {
+      const isTarget = element === newTarget;
+      const isSelected = element.matches('[aria-selected="true"]');
+      const controls = element.getAttribute('aria-controls');
+
+      if (this.multi && isTarget && event.type === 'click') {
+        element.setAttribute(this.childSelectedAttr, String(!isSelected));
+        element.dispatchEvent(new CustomEvent(isSelected ? 'unselect' : 'select'));
+      }
+
+      if (
+        (element.matches('[role="menuitemradio"]') &&
+          element.closest(this.parentGroupSelector) === targetParentGroup) ||
+        !this.multi
+      ) {
+        element.setAttribute(this.childSelectedAttr, String(isTarget));
+        element.dispatchEvent(new CustomEvent(isTarget ? 'select' : 'unselect'));
+      }
+
+      if (this.focusChild) {
+        element.tabIndex = isTarget ? 0 : -1;
+
+        if (isTarget) {
+          element.focus();
+        }
+      } else {
+        element.classList.toggle('focused', isTarget);
+      }
+
+      if (controls) {
+        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
+      }
+    });
+
+    this.parent.dispatchEvent(
+      new CustomEvent('select', {
+        detail: {
+          // @ts-ignore
+          value: newTarget.value,
+          // @ts-ignore
+          name: newTarget.name,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Handle the `click` event on the widget.
+   * @param {MouseEvent} event `click` event.
+   */
+  onClick(event) {
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const newTarget = target.matches(this.selector) ? target : undefined;
+
+    if (!newTarget || event.button !== 0) {
+      return;
+    }
+
+    this.selectTarget(event, newTarget);
+  }
+
+  /**
+   * Handle the `keydown` event on the widget.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  onKeyDown(event) {
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+    const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+
+    if (hasModifier) {
+      return;
+    }
+
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const { allMembers, activeMembers } = this;
+
+    const currentTarget = (() => {
+      if (!this.focusChild) {
+        return activeMembers.find((member) => member.matches('.focused')) || activeMembers[0];
+      }
+
+      if (target.matches(this.selector)) {
+        return target;
+      }
+
+      return undefined;
+    })();
+
+    if (!currentTarget) {
+      return;
+    }
+
+    if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (['Enter', ' '].includes(key)) {
+      currentTarget.click();
+
+      return;
+    }
+
+    let index;
+    let newTarget;
+
+    if (this.grid) {
+      const colCount = Math.floor(this.parent.clientWidth / currentTarget.clientWidth);
+
+      index = allMembers.indexOf(currentTarget);
+
+      if (key === 'ArrowUp' && index > 0) {
+        newTarget = allMembers[index - colCount];
+      }
+
+      if (key === 'ArrowDown' && index < allMembers.length - 1) {
+        newTarget = allMembers[index + colCount];
+      }
+
+      if (key === 'ArrowLeft' && index > 0) {
+        newTarget = allMembers[index - 1];
+      }
+
+      if (key === 'ArrowRight' && index < allMembers.length - 1) {
+        newTarget = allMembers[index + 1];
+      }
+
+      if (newTarget?.getAttribute('aria-disabled') === 'true') {
+        newTarget = undefined;
+      }
+    } else {
+      index = activeMembers.indexOf(currentTarget);
+
+      if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
+        if (index > 0) {
+          // Previous member
+          newTarget = activeMembers[index - 1];
+        }
+
+        if (index === 0) {
+          // Last member
+          newTarget = activeMembers[activeMembers.length - 1];
+        }
+      }
+
+      if (key === (this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown')) {
+        if (index < activeMembers.length - 1) {
+          // Next member
+          newTarget = activeMembers[index + 1];
+        }
+
+        if (index === activeMembers.length - 1) {
+          // First member
+          [newTarget] = activeMembers;
+        }
+      }
+    }
+
+    if (newTarget && newTarget !== currentTarget) {
+      this.selectTarget(event, newTarget);
+    }
+  }
+}
+
+/**
+ * Activate a new group.
+ * @param {...any} args Arguments.
+ */
+export const activateGroup = (...args) => {
+  (async () => {
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    await sleep(100);
+
+    // @ts-ignore
+    return new Group(...args);
+  })();
+};

package/package/components/{core → util}/group.svelte

@@ -1,6 +1,9 @@
+<!--
+  @component
+  A generic group layout.
+  @see https://w3c.github.io/aria/#group
+-->
 <script>
-  import { getRandomId } from '../helpers/util';
-
   /**
    * CSS class name on the button.
    * @type {string}
@@ -9,23 +12,14 @@
 
   export { className as class };
 
-  export let title = '';
-
   export let ariaLabel = '';
-
-  const id = getRandomId('group');
 </script>
 
 <div
   class="sui group {className}"
   role="group"
-  {id}
   aria-label={ariaLabel || undefined}
-  aria-labelledby={title ? '{id}-title' : undefined}
   {...$$restProps}
 >
-  {#if title}
-    <div class="title" id="{id}-title">{title}</div>
-  {/if}
   <slot />
 </div>

package/package/components/{core → util}/group.svelte.d.ts

@@ -1,9 +1,12 @@
 /** @typedef {typeof __propDef.props}  GroupProps */
 /** @typedef {typeof __propDef.events}  GroupEvents */
 /** @typedef {typeof __propDef.slots}  GroupSlots */
+/**
+ * A generic group layout.
+ * @see https://w3c.github.io/aria/#group
+ */
 export default class Group extends SvelteComponentTyped<{
     [x: string]: any;
-    title?: string;
     class?: string;
     ariaLabel?: string;
 }, {
@@ -19,7 +22,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        title?: string;
         class?: string;
         ariaLabel?: string;
     };

package/package/components/util/popup.d.ts

@@ -0,0 +1,30 @@
+export function activatePopup(...args: any[]): Popup;
+/**
+ * Implement the popup handler.
+ */
+declare class Popup {
+    /**
+     * Initialize a new `Popup` instance.
+     * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
+     * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
+     * @param {PopupPosition} position Where to show the popup content.
+     */
+    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition);
+    open: import("svelte/store").Writable<boolean>;
+    style: import("svelte/store").Writable<{
+        inset: any;
+        zIndex: any;
+        width: any;
+        height: any;
+    }>;
+    observer: IntersectionObserver;
+    anchorElement: HTMLButtonElement;
+    popupElement: HTMLDialogElement;
+    position: PopupPosition;
+    id: string;
+    /**
+     * Continue checking the position in case the window or parent element resizes.
+     */
+    checkPosition(): void;
+}
+export {};

package/package/components/{helpers → util}/popup.js

@@ -4,7 +4,7 @@ import { get, writable } from 'svelte/store';
 import { getRandomId } from './util';
 
 /**
- *
+ * Implement the popup handler.
  */
 class Popup {
   open = writable(false);
@@ -76,12 +76,14 @@ class Popup {
   });
 
   /**
-   *
-   * @param {HTMLElement} anchorElement
-   * @param {HTMLElement} popupElement
-   * @param {PopupPosition} position
+   * Initialize a new `Popup` instance.
+   * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
+   * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
+   * @param {PopupPosition} position Where to show the popup content.
    */
   constructor(anchorElement, popupElement, position) {
+    console.info({ anchorElement, popupElement, position });
+
     this.anchorElement = anchorElement;
     this.popupElement = popupElement; // = backdrop
     this.position = position;
@@ -97,13 +99,15 @@ class Popup {
     });
 
     this.anchorElement.addEventListener('keydown', (event) => {
+      console.info(event);
+
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (!ctrlKey && !metaKey && !shiftKey && !altKey) {
-        if (key === ' ' || key === 'Enter') {
-          event.stopPropagation();
-          this.open.set(!get(this.open));
-        }
+      if (['Enter', ' '].includes(key) && !hasModifier) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open.set(!get(this.open));
       }
     });
 
@@ -122,21 +126,17 @@ class Popup {
       }
     });
 
-    [this.anchorElement, this.popupElement].forEach((element) => {
-      element.addEventListener('keydown', (event) => {
-        const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
-
-        if (
-          get(this.open) &&
-          ['Escape'].includes(key) &&
-          !ctrlKey &&
-          !metaKey &&
-          !shiftKey &&
-          !altKey
-        ) {
-          this.open.set(false);
-        }
-      });
+    this.popupElement.addEventListener('keydown', (event) => {
+      console.info(event);
+
+      const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+
+      if (key === 'Escape' && !hasModifier) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open.set(false);
+      }
     });
 
     this.open.subscribe((open) => {
@@ -144,6 +144,7 @@ class Popup {
         this.checkPosition();
       } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
         this.anchorElement.focus();
+        this.anchorElement.removeAttribute('aria-controls');
       }
 
       this.anchorElement.setAttribute('aria-expanded', String(open));