@y14e/tabs 1.5.3 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +4 -4
  2. package/dist/index.cjs +20 -17
  3. package/dist/index.d.cts +1 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +20 -17
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -10,14 +10,14 @@ npm i @y14e/tabs
10
10
 
11
11
  ```ts
12
12
  // npm
13
- import Tabs from '@y14e/tabs@1.5.3';
13
+ import Tabs from '@y14e/tabs@1.5.4';
14
14
 
15
15
  // CDNs
16
- import Tabs from 'https://esm.sh/@y14e/tabs@1.5.3';
16
+ import Tabs from 'https://esm.sh/@y14e/tabs@1.5.4';
17
17
  // or
18
- import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@1.5.3/+esm';
18
+ import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@1.5.4/+esm';
19
19
  // or
20
- import Tabs from 'https://esm.unpkg.com/@y14e/tabs@1.5.3';
20
+ import Tabs from 'https://esm.unpkg.com/@y14e/tabs@1.5.4';
21
21
  ```
22
22
 
23
23
  ## Usage
package/dist/index.cjs CHANGED
@@ -414,7 +414,7 @@ function createRovingTabIndex(container, options = {}) {
414
414
  console.warn("Invalid navigationOnly option. Fallback: false.");
415
415
  navigationOnly = false;
416
416
  }
417
- if (typeof selector !== "undefined" && typeof selector !== "string") {
417
+ if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
418
418
  console.warn(
419
419
  "Invalid selector. Fallback: all focusable elements (undefined)."
420
420
  );
@@ -429,10 +429,10 @@ function createRovingTabIndex(container, options = {}) {
429
429
  wrap = false;
430
430
  }
431
431
  const settings = { navigationOnly, typeahead, wrap };
432
- if (direction !== void 0) {
432
+ if (direction) {
433
433
  Object.assign(settings, { direction });
434
434
  }
435
- if (selector !== void 0) {
435
+ if (selector) {
436
436
  Object.assign(settings, { selector });
437
437
  }
438
438
  const roving = new RovingTabIndex(container, settings);
@@ -909,19 +909,12 @@ var Tabs = class _Tabs {
909
909
  this.#rootElement.removeAttribute("data-tabs-initialized");
910
910
  }
911
911
  #initialize() {
912
- this.#eventController = new AbortController();
913
- const { signal } = this.#eventController;
914
912
  saveAttributes(this.#listElements, [
915
913
  "aria-hidden",
916
914
  "aria-orientation",
917
915
  "role",
918
916
  "style"
919
917
  ]);
920
- this.#listElements.forEach((list, i) => {
921
- this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
922
- this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
923
- list.setAttribute("role", "tablist");
924
- });
925
918
  saveAttributes(this.#tabElements, [
926
919
  "aria-controls",
927
920
  "id",
@@ -929,16 +922,27 @@ var Tabs = class _Tabs {
929
922
  "style",
930
923
  "tabindex"
931
924
  ]);
925
+ saveAttributes(this.#indicatorElements, ["style"]);
926
+ saveAttributes(this.#panelElements, [
927
+ "aria-controls",
928
+ "aria-labelledby",
929
+ "id",
930
+ "role",
931
+ "tabindex"
932
+ ]);
933
+ this.#eventController = new AbortController();
934
+ const { signal } = this.#eventController;
935
+ this.#listElements.forEach((list, i) => {
936
+ this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
937
+ this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
938
+ list.setAttribute("role", "tablist");
939
+ });
932
940
  this.#tabElements.forEach((tab, i) => {
933
941
  const id = Math.random().toString(36).slice(-8);
934
942
  const panel = this.#panelElements[i % this.#panelElements.length];
935
943
  if (!panel) {
936
944
  return;
937
945
  }
938
- i < this.#panelElements.length && saveAttributes(
939
- [panel],
940
- ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
941
- );
942
946
  panel.id ||= `tabs-panel-${id}`;
943
947
  addTokenToAttribute(tab, "aria-controls", panel.id);
944
948
  !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
@@ -953,7 +957,6 @@ var Tabs = class _Tabs {
953
957
  tab.addEventListener("focus", this.#onTabFocus, { signal });
954
958
  this.#buttons.push(new Button(tab));
955
959
  });
956
- saveAttributes(this.#indicatorElements, ["style"]);
957
960
  this.#indicatorElements.forEach((indicator) => {
958
961
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
959
962
  const { style } = indicator;
@@ -1143,7 +1146,7 @@ function isFocusable2(element) {
1143
1146
  * Tabs
1144
1147
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1145
1148
  *
1146
- * @version 1.5.3
1149
+ * @version 1.5.4
1147
1150
  * @author Yusuke Kamiyamane
1148
1151
  * @license MIT
1149
1152
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1179,7 +1182,7 @@ function isFocusable2(element) {
1179
1182
  * Lightweight roving tabindex utility with fully focus management.
1180
1183
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
1181
1184
  *
1182
- * @version 2.0.3
1185
+ * @version 2.0.4
1183
1186
  * @author Yusuke Kamiyamane
1184
1187
  * @license MIT
1185
1188
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.cts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Tabs
3
3
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
4
4
  *
5
- * @version 1.5.3
5
+ * @version 1.5.4
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Tabs
3
3
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
4
4
  *
5
- * @version 1.5.3
5
+ * @version 1.5.4
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.js CHANGED
@@ -412,7 +412,7 @@ function createRovingTabIndex(container, options = {}) {
412
412
  console.warn("Invalid navigationOnly option. Fallback: false.");
413
413
  navigationOnly = false;
414
414
  }
415
- if (typeof selector !== "undefined" && typeof selector !== "string") {
415
+ if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
416
416
  console.warn(
417
417
  "Invalid selector. Fallback: all focusable elements (undefined)."
418
418
  );
@@ -427,10 +427,10 @@ function createRovingTabIndex(container, options = {}) {
427
427
  wrap = false;
428
428
  }
429
429
  const settings = { navigationOnly, typeahead, wrap };
430
- if (direction !== void 0) {
430
+ if (direction) {
431
431
  Object.assign(settings, { direction });
432
432
  }
433
- if (selector !== void 0) {
433
+ if (selector) {
434
434
  Object.assign(settings, { selector });
435
435
  }
436
436
  const roving = new RovingTabIndex(container, settings);
@@ -907,19 +907,12 @@ var Tabs = class _Tabs {
907
907
  this.#rootElement.removeAttribute("data-tabs-initialized");
908
908
  }
909
909
  #initialize() {
910
- this.#eventController = new AbortController();
911
- const { signal } = this.#eventController;
912
910
  saveAttributes(this.#listElements, [
913
911
  "aria-hidden",
914
912
  "aria-orientation",
915
913
  "role",
916
914
  "style"
917
915
  ]);
918
- this.#listElements.forEach((list, i) => {
919
- this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
920
- this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
921
- list.setAttribute("role", "tablist");
922
- });
923
916
  saveAttributes(this.#tabElements, [
924
917
  "aria-controls",
925
918
  "id",
@@ -927,16 +920,27 @@ var Tabs = class _Tabs {
927
920
  "style",
928
921
  "tabindex"
929
922
  ]);
923
+ saveAttributes(this.#indicatorElements, ["style"]);
924
+ saveAttributes(this.#panelElements, [
925
+ "aria-controls",
926
+ "aria-labelledby",
927
+ "id",
928
+ "role",
929
+ "tabindex"
930
+ ]);
931
+ this.#eventController = new AbortController();
932
+ const { signal } = this.#eventController;
933
+ this.#listElements.forEach((list, i) => {
934
+ this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
935
+ this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
936
+ list.setAttribute("role", "tablist");
937
+ });
930
938
  this.#tabElements.forEach((tab, i) => {
931
939
  const id = Math.random().toString(36).slice(-8);
932
940
  const panel = this.#panelElements[i % this.#panelElements.length];
933
941
  if (!panel) {
934
942
  return;
935
943
  }
936
- i < this.#panelElements.length && saveAttributes(
937
- [panel],
938
- ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
939
- );
940
944
  panel.id ||= `tabs-panel-${id}`;
941
945
  addTokenToAttribute(tab, "aria-controls", panel.id);
942
946
  !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
@@ -951,7 +955,6 @@ var Tabs = class _Tabs {
951
955
  tab.addEventListener("focus", this.#onTabFocus, { signal });
952
956
  this.#buttons.push(new Button(tab));
953
957
  });
954
- saveAttributes(this.#indicatorElements, ["style"]);
955
958
  this.#indicatorElements.forEach((indicator) => {
956
959
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
957
960
  const { style } = indicator;
@@ -1141,7 +1144,7 @@ function isFocusable2(element) {
1141
1144
  * Tabs
1142
1145
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1143
1146
  *
1144
- * @version 1.5.3
1147
+ * @version 1.5.4
1145
1148
  * @author Yusuke Kamiyamane
1146
1149
  * @license MIT
1147
1150
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1177,7 +1180,7 @@ function isFocusable2(element) {
1177
1180
  * Lightweight roving tabindex utility with fully focus management.
1178
1181
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
1179
1182
  *
1180
- * @version 2.0.3
1183
+ * @version 2.0.4
1181
1184
  * @author Yusuke Kamiyamane
1182
1185
  * @license MIT
1183
1186
  * @copyright Copyright (c) Yusuke Kamiyamane
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@y14e/tabs",
3
- "version": "1.5.3",
3
+ "version": "1.5.4",
4
4
  "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -44,7 +44,7 @@
44
44
  "devDependencies": {
45
45
  "@y14e/attributes-utils": "^1.1.0",
46
46
  "@y14e/button": "^1.0.0",
47
- "@y14e/roving-tabindex": "^2.0.3",
47
+ "@y14e/roving-tabindex": "^2.0.4",
48
48
  "bun-types": "latest",
49
49
  "tsup": "^8.0.0",
50
50
  "typescript": "^5.6.0",