@y14e/tabs 1.3.11 → 1.3.12

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 (5) hide show
  1. package/dist/index.cjs +17 -39
  2. package/dist/index.d.cts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +17 -39
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -101,12 +101,10 @@ var Tabs = class _Tabs {
101
101
  this.#rootElement = root;
102
102
  this.#defaults = this.#mergeOptions(this.#defaults, _Tabs.defaults);
103
103
  this.#settings = this.#mergeOptions(this.#defaults, options);
104
- if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
105
- Object.assign(this.#settings.animation, {
106
- content: { duration: 0 },
107
- indicator: { duration: 0 }
108
- });
109
- }
104
+ matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, {
105
+ content: { duration: 0 },
106
+ indicator: { duration: 0 }
107
+ });
110
108
  const NOT_NESTED = `:not(:scope ${this.#settings.selector.panel} *)`;
111
109
  this.#listElements = [
112
110
  ...this.#rootElement.querySelectorAll(
@@ -160,9 +158,7 @@ var Tabs = class _Tabs {
160
158
  }
161
159
  const binding = createBinding(tabsByIndex, panel);
162
160
  this.#bindings.set(tab, binding);
163
- if (i < length) {
164
- this.#bindings.set(panel, binding);
165
- }
161
+ i < length && this.#bindings.set(panel, binding);
166
162
  });
167
163
  this.#initialize();
168
164
  }
@@ -207,11 +203,7 @@ var Tabs = class _Tabs {
207
203
  }
208
204
  style2.setProperty("inline-size", "100%");
209
205
  style2.setProperty("position", "absolute");
210
- if (p === panel && !hasFocusable(p)) {
211
- p.setAttribute("tabindex", "0");
212
- } else {
213
- p.removeAttribute("tabindex");
214
- }
206
+ p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
215
207
  });
216
208
  this.#panelElements.forEach((p, i) => {
217
209
  if (p === panel) {
@@ -346,12 +338,8 @@ var Tabs = class _Tabs {
346
338
  "style"
347
339
  ]);
348
340
  this.#listElements.forEach((list, i) => {
349
- if (this.#settings.avoidDuplicates && i) {
350
- list.setAttribute("aria-hidden", "true");
351
- }
352
- if (this.#settings.vertical) {
353
- list.setAttribute("aria-orientation", "vertical");
354
- }
341
+ this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
342
+ this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
355
343
  list.setAttribute("role", "tablist");
356
344
  });
357
345
  saveAttributes(this.#tabElements, [
@@ -367,17 +355,13 @@ var Tabs = class _Tabs {
367
355
  if (!panel) {
368
356
  return;
369
357
  }
370
- if (i < this.#panelElements.length) {
371
- saveAttributes(
372
- [panel],
373
- ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
374
- );
375
- }
358
+ i < this.#panelElements.length && saveAttributes(
359
+ [panel],
360
+ ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
361
+ );
376
362
  panel.id ||= `tabs-panel-${id}`;
377
363
  addTokenToAttribute(tab, "aria-controls", panel.id);
378
- if (!tab.hasAttribute("aria-selected")) {
379
- tab.setAttribute("aria-selected", "false");
380
- }
364
+ !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
381
365
  const isAvoided = this.#isAvoidedTab(tab);
382
366
  if (!isAvoided) {
383
367
  tab.id ||= `tabs-tab-${id}`;
@@ -387,9 +371,7 @@ var Tabs = class _Tabs {
387
371
  "tabindex",
388
372
  tab.ariaSelected === "true" && !isAvoided ? "0" : "-1"
389
373
  );
390
- if (!isFocusable(tab)) {
391
- tab.style.setProperty("pointer-events", "none");
392
- }
374
+ !isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
393
375
  addTokenToAttribute(panel, "aria-labelledby", tab.id);
394
376
  tab.addEventListener("click", this.#onTabClick, { signal });
395
377
  tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -405,9 +387,7 @@ var Tabs = class _Tabs {
405
387
  });
406
388
  this.#panelElements.forEach((panel) => {
407
389
  panel.setAttribute("role", "tabpanel");
408
- if (!panel.hasAttribute("hidden") && !hasFocusable(panel)) {
409
- panel.setAttribute("tabindex", "0");
410
- }
390
+ !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
411
391
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
412
392
  signal
413
393
  });
@@ -489,9 +469,7 @@ var Tabs = class _Tabs {
489
469
  return;
490
470
  }
491
471
  newTab.focus();
492
- if (!this.#settings.manual) {
493
- newTab.click();
494
- }
472
+ !this.#settings.manual && newTab.click();
495
473
  };
496
474
  #onPanelBeforeMatch = (event) => {
497
475
  const panel = event.currentTarget;
@@ -642,7 +620,7 @@ function isFocusable(element) {
642
620
  * Tabs
643
621
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
644
622
  *
645
- * @version 1.3.11
623
+ * @version 1.3.12
646
624
  * @author Yusuke Kamiyamane
647
625
  * @license MIT
648
626
  * @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.3.11
5
+ * @version 1.3.12
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.3.11
5
+ * @version 1.3.12
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.js CHANGED
@@ -99,12 +99,10 @@ var Tabs = class _Tabs {
99
99
  this.#rootElement = root;
100
100
  this.#defaults = this.#mergeOptions(this.#defaults, _Tabs.defaults);
101
101
  this.#settings = this.#mergeOptions(this.#defaults, options);
102
- if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
103
- Object.assign(this.#settings.animation, {
104
- content: { duration: 0 },
105
- indicator: { duration: 0 }
106
- });
107
- }
102
+ matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, {
103
+ content: { duration: 0 },
104
+ indicator: { duration: 0 }
105
+ });
108
106
  const NOT_NESTED = `:not(:scope ${this.#settings.selector.panel} *)`;
109
107
  this.#listElements = [
110
108
  ...this.#rootElement.querySelectorAll(
@@ -158,9 +156,7 @@ var Tabs = class _Tabs {
158
156
  }
159
157
  const binding = createBinding(tabsByIndex, panel);
160
158
  this.#bindings.set(tab, binding);
161
- if (i < length) {
162
- this.#bindings.set(panel, binding);
163
- }
159
+ i < length && this.#bindings.set(panel, binding);
164
160
  });
165
161
  this.#initialize();
166
162
  }
@@ -205,11 +201,7 @@ var Tabs = class _Tabs {
205
201
  }
206
202
  style2.setProperty("inline-size", "100%");
207
203
  style2.setProperty("position", "absolute");
208
- if (p === panel && !hasFocusable(p)) {
209
- p.setAttribute("tabindex", "0");
210
- } else {
211
- p.removeAttribute("tabindex");
212
- }
204
+ p === panel && !hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
213
205
  });
214
206
  this.#panelElements.forEach((p, i) => {
215
207
  if (p === panel) {
@@ -344,12 +336,8 @@ var Tabs = class _Tabs {
344
336
  "style"
345
337
  ]);
346
338
  this.#listElements.forEach((list, i) => {
347
- if (this.#settings.avoidDuplicates && i) {
348
- list.setAttribute("aria-hidden", "true");
349
- }
350
- if (this.#settings.vertical) {
351
- list.setAttribute("aria-orientation", "vertical");
352
- }
339
+ this.#settings.avoidDuplicates && i && list.setAttribute("aria-hidden", "true");
340
+ this.#settings.vertical && list.setAttribute("aria-orientation", "vertical");
353
341
  list.setAttribute("role", "tablist");
354
342
  });
355
343
  saveAttributes(this.#tabElements, [
@@ -365,17 +353,13 @@ var Tabs = class _Tabs {
365
353
  if (!panel) {
366
354
  return;
367
355
  }
368
- if (i < this.#panelElements.length) {
369
- saveAttributes(
370
- [panel],
371
- ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
372
- );
373
- }
356
+ i < this.#panelElements.length && saveAttributes(
357
+ [panel],
358
+ ["aria-controls", "aria-labelledby", "id", "role", "tabindex"]
359
+ );
374
360
  panel.id ||= `tabs-panel-${id}`;
375
361
  addTokenToAttribute(tab, "aria-controls", panel.id);
376
- if (!tab.hasAttribute("aria-selected")) {
377
- tab.setAttribute("aria-selected", "false");
378
- }
362
+ !tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
379
363
  const isAvoided = this.#isAvoidedTab(tab);
380
364
  if (!isAvoided) {
381
365
  tab.id ||= `tabs-tab-${id}`;
@@ -385,9 +369,7 @@ var Tabs = class _Tabs {
385
369
  "tabindex",
386
370
  tab.ariaSelected === "true" && !isAvoided ? "0" : "-1"
387
371
  );
388
- if (!isFocusable(tab)) {
389
- tab.style.setProperty("pointer-events", "none");
390
- }
372
+ !isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
391
373
  addTokenToAttribute(panel, "aria-labelledby", tab.id);
392
374
  tab.addEventListener("click", this.#onTabClick, { signal });
393
375
  tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -403,9 +385,7 @@ var Tabs = class _Tabs {
403
385
  });
404
386
  this.#panelElements.forEach((panel) => {
405
387
  panel.setAttribute("role", "tabpanel");
406
- if (!panel.hasAttribute("hidden") && !hasFocusable(panel)) {
407
- panel.setAttribute("tabindex", "0");
408
- }
388
+ !panel.hasAttribute("hidden") && !hasFocusable(panel) && panel.setAttribute("tabindex", "0");
409
389
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
410
390
  signal
411
391
  });
@@ -487,9 +467,7 @@ var Tabs = class _Tabs {
487
467
  return;
488
468
  }
489
469
  newTab.focus();
490
- if (!this.#settings.manual) {
491
- newTab.click();
492
- }
470
+ !this.#settings.manual && newTab.click();
493
471
  };
494
472
  #onPanelBeforeMatch = (event) => {
495
473
  const panel = event.currentTarget;
@@ -640,7 +618,7 @@ function isFocusable(element) {
640
618
  * Tabs
641
619
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
642
620
  *
643
- * @version 1.3.11
621
+ * @version 1.3.12
644
622
  * @author Yusuke Kamiyamane
645
623
  * @license MIT
646
624
  * @copyright Copyright (c) Yusuke Kamiyamane
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@y14e/tabs",
3
- "version": "1.3.11",
3
+ "version": "1.3.12",
4
4
  "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",