@sveltia/ui 0.9.0 → 0.10.1

package/package/services/group.js

@@ -2,10 +2,10 @@ import { getRandomId, sleep } from './util';
 
 /**
  * @type {{ [role: string]: {
- *   orientation: 'vertical' | 'horizontal',
- *   childRoles: string[],
- *   childSelectedAttr: 'aria-selected' | 'aria-checked',
- *   focusChild: boolean
+ * orientation: 'vertical' | 'horizontal',
+ * childRoles: string[],
+ * childSelectedAttr: 'aria-selected' | 'aria-checked',
+ * focusChild: boolean
  * } }}
  */
 const config = {
@@ -53,12 +53,14 @@ const config = {
 class Group {
   /**
    * Initialize a new `Group` instance.
-   * @param {HTMLElement} parent Parent element.
+   * @param {HTMLElement} parent - Parent element.
    * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent) {
+    parent.dispatchEvent(new CustomEvent('initializing'));
+
     this.parent = parent;
-    this.role = parent.getAttribute('role');
+    this.role = /** @type {string} */ (parent.getAttribute('role'));
     this.grid = this.role === 'listbox' && parent.matches('.grid');
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
     this.id = getRandomId(this.role);
@@ -74,21 +76,39 @@ class Group {
     this.childSelectedProp = childSelectedAttr.replace('aria-', '');
     this.focusChild = focusChild;
 
-    const { allMembers } = this;
-
-    const hasSelected = allMembers.some((element) =>
-      element.matches(`[${childSelectedAttr}="true"]`),
-    );
+    const { allMembers, selected: defaultSelected } = this;
 
     allMembers.forEach((element, index) => {
-      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
-      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
+      // Select the first one if no member has the `selected` attribute
+      const isSelected = defaultSelected ? element === defaultSelected : index === 0;
+
+      const controlTarget = /** @type {HTMLElement | null} */ (
+        document.querySelector(`#${element.getAttribute('aria-controls')}`)
+      );
 
       element.id ||= `${this.id}-item-${index + 1}`;
-      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
+      element.tabIndex ||= isSelected ? 0 : -1;
       element.setAttribute(this.childSelectedAttr, String(isSelected));
-      controls?.setAttribute('aria-labelledby', element.id);
-      controls?.setAttribute('aria-hidden', String(!isSelected));
+
+      if (controlTarget) {
+        controlTarget.inert = !isSelected;
+        controlTarget.setAttribute('aria-labelledby', element.id);
+        controlTarget.setAttribute('aria-hidden', String(!isSelected));
+
+        if (isSelected) {
+          window.setTimeout(() => {
+            try {
+              controlTarget.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+                behavior: 'auto',
+              });
+            } catch {
+              controlTarget.scrollIntoView(true);
+            }
+          }, 300);
+        }
+      }
     });
 
     parent.addEventListener('click', (event) => {
@@ -100,39 +120,66 @@ class Group {
     parent.addEventListener('keydown', (event) => {
       this.onKeyDown(event);
     });
+
+    parent.dispatchEvent(new CustomEvent('initialized'));
   }
 
-  /** @type {string} */
+  /**
+   * CSS selector to retrieve the members.
+   * @type {string}
+   */
   get selector() {
     return this.childRoles.map((role) => `[role="${role}"]`).join(',');
   }
 
-  /** @type {HTMLElement[]} */
+  /**
+   * List of all the members.
+   * @type {HTMLElement[]}
+   */
   get allMembers() {
     return /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
   }
 
-  /** @type {HTMLElement[]} */
+  /**
+   * List of the enabled and visible members.
+   * @type {HTMLElement[]}
+   */
   get activeMembers() {
     return this.allMembers.filter(
       (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
     );
   }
 
-  /** @type {boolean} */
+  /**
+   * Get the currently selected member.
+   * @type {HTMLElement | undefined}
+   */
+  get selected() {
+    return this.activeMembers.find((element) =>
+      element.matches(`[${this.childSelectedAttr}="true"]`),
+    );
+  }
+
+  /**
+   * Whether the parent is disabled.
+   * @type {boolean}
+   */
   get isDisabled() {
     return this.parent.matches('[aria-disabled="true"]');
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the parent is read-only.
+   * @type {boolean}
+   */
   get isReadOnly() {
     return this.parent.matches('[aria-readonly="true"]');
   }
 
   /**
    * Select (and move focus to) the given target.
-   * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
-   * @param {HTMLElement} newTarget Target element.
+   * @param {(MouseEvent | KeyboardEvent)} event - Triggered event.
+   * @param {HTMLElement} newTarget - Target element.
    */
   selectTarget(event, newTarget) {
     if (this.isDisabled || this.isReadOnly) {
@@ -164,7 +211,8 @@ class Group {
       const singleSelect = isMenuItemRadio || !multiSelect;
       const isTarget = element === newTarget;
       const isSelected = element.matches(`[${this.childSelectedAttr}="true"]`);
-      const controls = element.getAttribute('aria-controls');
+      const controlTargetId = element.getAttribute('aria-controls');
+      const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
       if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
@@ -202,13 +250,35 @@ class Group {
         element.classList.toggle('focused', isTarget);
       }
 
-      if (controls) {
-        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
+      if (controlTarget) {
+        controlTarget.inert = !isTarget;
+        controlTarget.setAttribute('aria-hidden', String(!isTarget));
+
+        if (isTarget) {
+          window.setTimeout(() => {
+            try {
+              controlTarget.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+                behavior: 'auto',
+              });
+            } catch {
+              controlTarget.scrollIntoView(true);
+            }
+          }, 300);
+        }
       }
 
       if (isTarget) {
         this.parent.setAttribute('aria-activedescendant', element.id);
-        element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+
+        window.setTimeout(() => {
+          try {
+            element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+          } catch {
+            element.scrollIntoView(true);
+          }
+        }, 300);
       }
     });
 
@@ -224,7 +294,7 @@ class Group {
 
   /**
    * Handle the `click` event on the widget.
-   * @param {MouseEvent} event `click` event.
+   * @param {MouseEvent} event - `click` event.
    */
   onClick(event) {
     // eslint-disable-next-line prefer-destructuring
@@ -240,7 +310,7 @@ class Group {
 
   /**
    * Handle the `keydown` event on the widget.
-   * @param {KeyboardEvent} event `keydown` event.
+   * @param {KeyboardEvent} event - `keydown` event.
    */
   onKeyDown(event) {
     const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
@@ -349,7 +419,7 @@ class Group {
 
 /**
  * Activate a new group.
- * @param {HTMLElement} parent Parent element.
+ * @param {HTMLElement} parent - Parent element.
  */
 export const activateGroup = (parent) => {
   (async () => {

package/package/services/popup.d.ts

@@ -6,19 +6,27 @@ export function activatePopup(...args: any[]): Popup;
 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.
-     * @param {HTMLElement} [positionBaseElement] The base element of the `position`. If omitted, this
-     * will be the `anchorElement`.
+     * @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.
+     * @param {HTMLElement} [positionBaseElement] - The base element of the `position`. If omitted,
+     * this will be the `anchorElement`.
      */
-    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition, positionBaseElement?: HTMLElement);
+    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition, positionBaseElement?: HTMLElement | undefined);
     open: import("svelte/store").Writable<boolean>;
-    style: import("svelte/store").Writable<{
-        inset: any;
-        zIndex: any;
-        width: any;
-        height: any;
+    /**
+     * @type {import('svelte/store').Writable<{
+     * inset: string | undefined,
+     * zIndex: number | undefined,
+     * width: string | undefined,
+     * height: string | undefined,
+     * }>}
+     */
+    style: import('svelte/store').Writable<{
+        inset: string | undefined;
+        zIndex: number | undefined;
+        width: string | undefined;
+        height: string | undefined;
     }>;
     observer: IntersectionObserver;
     anchorElement: HTMLButtonElement;
@@ -26,9 +34,15 @@ declare class Popup {
     position: PopupPosition;
     positionBaseElement: HTMLElement;
     id: string;
-    /** @type {boolean} */
+    /**
+     * Whether the anchor element is disabled.
+     * @type {boolean}
+     */
     get isDisabled(): boolean;
-    /** @type {boolean} */
+    /**
+     * Whether the anchor element is read-only.
+     * @type {boolean}
+     */
     get isReadOnly(): boolean;
     /**
      * Check the position of the anchor element.

package/package/services/popup.js

@@ -9,6 +9,14 @@ import { getRandomId } from './util';
 class Popup {
   open = writable(false);
 
+  /**
+   * @type {import('svelte/store').Writable<{
+   * inset: string | undefined,
+   * zIndex: number | undefined,
+   * width: string | undefined,
+   * height: string | undefined,
+   * }>}
+   */
   style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
 
   observer = new IntersectionObserver((entries) => {
@@ -18,7 +26,7 @@ class Popup {
       }
 
       const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
-        this.popupElement.querySelector('.content');
+        /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
 
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
@@ -86,11 +94,11 @@ 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.
-   * @param {HTMLElement} [positionBaseElement] The base element of the `position`. If omitted, this
-   * will be the `anchorElement`.
+   * @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.
+   * @param {HTMLElement} [positionBaseElement] - The base element of the `position`. If omitted,
+   * this will be the `anchorElement`.
    */
   constructor(anchorElement, popupElement, position, positionBaseElement) {
     this.anchorElement = anchorElement;
@@ -157,12 +165,18 @@ class Popup {
     });
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the anchor element is disabled.
+   * @type {boolean}
+   */
   get isDisabled() {
     return this.anchorElement.matches('[aria-disabled="true"]');
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the anchor element is read-only.
+   * @type {boolean}
+   */
   get isReadOnly() {
     return this.anchorElement.matches('[aria-readonly="true"]');
   }
@@ -178,7 +192,7 @@ class Popup {
 
 /**
  * Activate a new popup.
- * @param {...any} args Arguments.
+ * @param {...any} args - Arguments.
  * @returns {Popup} New popup.
  */
 // @ts-ignore

package/package/services/util.d.ts

@@ -1,3 +1,3 @@
-export function getRandomId(prefix?: string, length?: number): string;
+export function getRandomId(prefix?: string | undefined, length?: number | undefined): string;
 export function isObject(input: any): boolean;
-export function sleep(ms?: number): Promise<void>;
+export function sleep(ms?: number | undefined): Promise<void>;

package/package/services/util.js

@@ -1,21 +1,21 @@
 /**
  * Get a random ID that can be used for elements.
- * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
- * @param {number} [length] Number of characters to be used in the ID.
+ * @param {string} [prefix] - Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] - Number of characters to be used in the ID.
  * @returns {string} Generated ID.
  */
 export const getRandomId = (prefix = 'e', length = 7) =>
   [
     prefix,
     new Array(length)
-      .fill()
+      .fill(0)
       .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
       .join(''),
   ].join('-');
 
 /**
  * Check if the given input is a simple object.
- * @param {*} input Input, probably an object.
+ * @param {*} input - Input, probably an object.
  * @returns {boolean} Result.
  */
 export const isObject = (input) =>
@@ -24,7 +24,7 @@ export const isObject = (input) =>
 /**
  * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
  * code, particularly while making sequential HTTP requests.
- * @param {number} [ms] Milliseconds to wait.
+ * @param {number} [ms] - Milliseconds to wait.
  * @returns {Promise<void>} Nothing.
  */
 export const sleep = (ms = 1000) =>

package/package/styles/core.scss

@@ -29,6 +29,7 @@
   vertical-align: top;
 
   @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
     // Disable transition but make sure the `transitionend` event works
     transition-duration: 1ms !important;
   }

package/package/styles/variables.scss

@@ -222,6 +222,7 @@
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
   // Tab
+  --sui-tab-height: var(--sui-control-medium-height);
   --sui-tab-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
   --sui-tab-large-height: var(--sui-control-large-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,36 +23,36 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.7"
+    "svelte": "^4.2.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@sveltejs/adapter-auto": "2.1.1",
-    "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/package": "^2.2.3",
-    "cspell": "^8.0.0",
-    "eslint": "^8.54.0",
+    "@playwright/test": "^1.40.1",
+    "@sveltejs/adapter-auto": "^3.1.0",
+    "@sveltejs/kit": "^2.3.2",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "cspell": "^8.3.2",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^48.0.2",
     "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-html": "^1.5.0",
-    "prettier": "^3.1.0",
+    "postcss": "^8.4.33",
+    "postcss-html": "^1.6.0",
+    "prettier": "^3.2.2",
     "prettier-plugin-svelte": "^3.1.2",
-    "sass": "^1.69.5",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-scss": "^5.3.1",
-    "svelte-check": "^3.6.2",
+    "sass": "^1.69.7",
+    "stylelint": "^16.1.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.0.0",
+    "svelte-check": "^3.6.3",
     "svelte-i18n": "^4.0.0",
-    "svelte-migrate": "^1.2.7",
-    "svelte-preprocess": "^5.1.1",
+    "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -296,6 +296,11 @@
       "svelte": "./package/components/table/table.svelte",
       "default": "./package/components/table/table.svelte"
     },
+    "./components/tabs/tab-box.svelte": {
+      "types": "./package/components/tabs/tab-box.svelte.d.ts",
+      "svelte": "./package/components/tabs/tab-box.svelte",
+      "default": "./package/components/tabs/tab-box.svelte"
+    },
     "./components/tabs/tab-list.svelte": {
       "types": "./package/components/tabs/tab-list.svelte.d.ts",
       "svelte": "./package/components/tabs/tab-list.svelte",
@@ -306,6 +311,11 @@
       "svelte": "./package/components/tabs/tab-panel.svelte",
       "default": "./package/components/tabs/tab-panel.svelte"
     },
+    "./components/tabs/tab-panels.svelte": {
+      "types": "./package/components/tabs/tab-panels.svelte.d.ts",
+      "svelte": "./package/components/tabs/tab-panels.svelte",
+      "default": "./package/components/tabs/tab-panels.svelte"
+    },
     "./components/tabs/tab.svelte": {
       "types": "./package/components/tabs/tab.svelte.d.ts",
       "svelte": "./package/components/tabs/tab.svelte",
@@ -562,12 +572,18 @@
       "components/table/table.svelte": [
         "./package/components/table/table.svelte.d.ts"
       ],
+      "components/tabs/tab-box.svelte": [
+        "./package/components/tabs/tab-box.svelte.d.ts"
+      ],
       "components/tabs/tab-list.svelte": [
         "./package/components/tabs/tab-list.svelte.d.ts"
       ],
       "components/tabs/tab-panel.svelte": [
         "./package/components/tabs/tab-panel.svelte.d.ts"
       ],
+      "components/tabs/tab-panels.svelte": [
+        "./package/components/tabs/tab-panels.svelte.d.ts"
+      ],
       "components/tabs/tab.svelte": [
         "./package/components/tabs/tab.svelte.d.ts"
       ],