@y14e/tabs 2.0.10 → 2.0.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.
- package/README.md +16 -16
- package/dist/index.bundle.cjs +16 -78
- package/dist/index.bundle.js +16 -78
- package/dist/index.cjs +30 -11
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +11 -11
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -13,11 +13,11 @@ npm i @y14e/tabs
|
|
|
13
13
|
import Tabs from "@y14e/tabs";
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import Tabs from "https://esm.sh/@y14e/tabs@2.0.
|
|
16
|
+
import Tabs from "https://esm.sh/@y14e/tabs@2.0.12";
|
|
17
17
|
// or
|
|
18
|
-
import Tabs from "https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.
|
|
18
|
+
import Tabs from "https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.12/+esm";
|
|
19
19
|
// or
|
|
20
|
-
import Tabs from "https://esm.unpkg.com/@y14e/tabs@2.0.
|
|
20
|
+
import Tabs from "https://esm.unpkg.com/@y14e/tabs@2.0.12";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
@@ -36,26 +36,26 @@ new Tabs(root, options);
|
|
|
36
36
|
interface TabsOptions {
|
|
37
37
|
animation: {
|
|
38
38
|
content: {
|
|
39
|
-
crossFade: boolean;
|
|
40
|
-
duration: number;
|
|
41
|
-
easing: string;
|
|
42
|
-
fade: boolean;
|
|
39
|
+
crossFade: boolean; // default: true
|
|
40
|
+
duration: number; // ms (default: 300)
|
|
41
|
+
easing: string; // <easing-function> (default: 'ease')
|
|
42
|
+
fade: boolean; // default: true
|
|
43
43
|
};
|
|
44
44
|
indicator: {
|
|
45
|
-
duration: number;
|
|
46
|
-
easing: string;
|
|
45
|
+
duration: number; // ms (default: 300)
|
|
46
|
+
easing: string; // <easing-function> (default: 'ease')
|
|
47
47
|
};
|
|
48
48
|
};
|
|
49
49
|
avoidDuplicates: boolean; // default: false
|
|
50
|
-
manual: boolean;
|
|
50
|
+
manual: boolean; // default: false
|
|
51
51
|
selector: {
|
|
52
|
-
content: string;
|
|
53
|
-
indicator: string;
|
|
54
|
-
list: string;
|
|
55
|
-
panel: string;
|
|
56
|
-
tab: string;
|
|
52
|
+
content: string; // default: '[role="tablist"] + *'
|
|
53
|
+
indicator: string; // default: '[data-tabs-indicator]'
|
|
54
|
+
list: string; // default: '[role="tablist"]'
|
|
55
|
+
panel: string; // default: '[role="tabpanel"]'
|
|
56
|
+
tab: string; // default: '[role="tab"]'
|
|
57
57
|
};
|
|
58
|
-
vertical: boolean;
|
|
58
|
+
vertical: boolean; // default: false
|
|
59
59
|
}
|
|
60
60
|
```
|
|
61
61
|
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
// node_modules/@y14e/
|
|
3
|
+
// node_modules/@y14e/attribute-util/dist/index.js
|
|
4
4
|
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
5
5
|
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
6
6
|
function addAttributeToken(element, name, token, options = {}) {
|
|
@@ -49,7 +49,6 @@ function saveAttributes(element_or_elements, name_or_names) {
|
|
|
49
49
|
});
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
|
-
var addTokenToAttribute = addAttributeToken;
|
|
53
52
|
|
|
54
53
|
// node_modules/power-focusable/dist/index.js
|
|
55
54
|
var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
|
|
@@ -369,56 +368,6 @@ var Button = class {
|
|
|
369
368
|
};
|
|
370
369
|
};
|
|
371
370
|
|
|
372
|
-
// node_modules/@y14e/roving-tabindex/node_modules/@y14e/attributes-utils/dist/index.js
|
|
373
|
-
var DEFAULT_PARSER2 = (value) => value.split(/\s+/);
|
|
374
|
-
var DEFAULT_SERIALIZER2 = (tokens) => tokens.join(" ");
|
|
375
|
-
function addTokenToAttribute2(element, name, token, options = {}) {
|
|
376
|
-
const value = element.getAttribute(name)?.trim();
|
|
377
|
-
const {
|
|
378
|
-
caseInsensitive = false,
|
|
379
|
-
parse = DEFAULT_PARSER2,
|
|
380
|
-
serialize = DEFAULT_SERIALIZER2
|
|
381
|
-
} = options;
|
|
382
|
-
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
383
|
-
if (caseInsensitive) {
|
|
384
|
-
const lower = token.toLowerCase();
|
|
385
|
-
if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
|
|
386
|
-
tokens.push(token);
|
|
387
|
-
element.setAttribute(name, serialize(tokens));
|
|
388
|
-
}
|
|
389
|
-
} else {
|
|
390
|
-
const set = new Set(tokens);
|
|
391
|
-
set.add(token);
|
|
392
|
-
element.setAttribute(name, serialize([...set]));
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
var snapshots2 = /* @__PURE__ */ new WeakMap();
|
|
396
|
-
function restoreAttributes2(element_or_elements) {
|
|
397
|
-
for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
|
|
398
|
-
const snapshot = snapshots2.get(element);
|
|
399
|
-
if (!snapshot) {
|
|
400
|
-
continue;
|
|
401
|
-
}
|
|
402
|
-
for (const [name, value] of snapshot.entries()) {
|
|
403
|
-
value === null ? element.removeAttribute(name) : element.setAttribute(name, value);
|
|
404
|
-
}
|
|
405
|
-
snapshots2.delete(element);
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
function saveAttributes2(element_or_elements, name_or_names) {
|
|
409
|
-
const names = Array.isArray(name_or_names) ? name_or_names : [name_or_names];
|
|
410
|
-
(Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
|
|
411
|
-
let snapshot = snapshots2.get(element);
|
|
412
|
-
if (!snapshot) {
|
|
413
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
414
|
-
snapshots2.set(element, snapshot);
|
|
415
|
-
}
|
|
416
|
-
names.forEach((name) => {
|
|
417
|
-
snapshot.set(name, element.getAttribute(name));
|
|
418
|
-
});
|
|
419
|
-
});
|
|
420
|
-
}
|
|
421
|
-
|
|
422
371
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
423
372
|
function createRovingTabIndex(container, options = {}) {
|
|
424
373
|
if (!(container instanceof Element)) {
|
|
@@ -510,7 +459,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
510
459
|
this.#controller = null;
|
|
511
460
|
this.#focusables.forEach((focusable) => {
|
|
512
461
|
_RovingTabIndex.#initialized.delete(focusable);
|
|
513
|
-
|
|
462
|
+
restoreAttributes(focusable);
|
|
514
463
|
});
|
|
515
464
|
this.#focusables.clear();
|
|
516
465
|
this.#focusablesByFirstChar.clear();
|
|
@@ -615,7 +564,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
615
564
|
for (const focusable of this.#focusables) {
|
|
616
565
|
if (!current.has(focusable)) {
|
|
617
566
|
_RovingTabIndex.#initialized.delete(focusable);
|
|
618
|
-
|
|
567
|
+
restoreAttributes(focusable);
|
|
619
568
|
this.#focusables.delete(focusable);
|
|
620
569
|
for (const [key, focusables] of this.#focusablesByFirstChar) {
|
|
621
570
|
const index = focusables.indexOf(focusable);
|
|
@@ -637,7 +586,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
637
586
|
this.#focusables.add(focusable);
|
|
638
587
|
_RovingTabIndex.#initialized.add(focusable);
|
|
639
588
|
if (!navigationOnly) {
|
|
640
|
-
|
|
589
|
+
saveAttributes(focusable, "tabindex");
|
|
641
590
|
focusable.setAttribute("tabindex", "-1");
|
|
642
591
|
}
|
|
643
592
|
if (!typeahead) {
|
|
@@ -650,8 +599,8 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
650
599
|
);
|
|
651
600
|
if (char) {
|
|
652
601
|
keys.add(char);
|
|
653
|
-
|
|
654
|
-
|
|
602
|
+
saveAttributes(focusable, "aria-keyshortcuts");
|
|
603
|
+
addAttributeToken(focusable, "aria-keyshortcuts", char, {
|
|
655
604
|
caseInsensitive: true
|
|
656
605
|
});
|
|
657
606
|
}
|
|
@@ -1009,7 +958,7 @@ var Tabs = class _Tabs {
|
|
|
1009
958
|
return;
|
|
1010
959
|
}
|
|
1011
960
|
panel.id ||= `tabs-panel-${id}`;
|
|
1012
|
-
|
|
961
|
+
addAttributeToken(tab, "aria-controls", panel.id);
|
|
1013
962
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
1014
963
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
1015
964
|
if (!isAvoided) {
|
|
@@ -1017,7 +966,7 @@ var Tabs = class _Tabs {
|
|
|
1017
966
|
}
|
|
1018
967
|
tab.setAttribute("role", "tab");
|
|
1019
968
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
1020
|
-
|
|
969
|
+
addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
1021
970
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
1022
971
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
1023
972
|
this.#buttons.push(new Button(tab));
|
|
@@ -1206,7 +1155,7 @@ var TabsIndicator = class {
|
|
|
1206
1155
|
* Tabs
|
|
1207
1156
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1208
1157
|
*
|
|
1209
|
-
* @version 2.0.
|
|
1158
|
+
* @version 2.0.12
|
|
1210
1159
|
* @author Yusuke Kamiyamane
|
|
1211
1160
|
* @license MIT
|
|
1212
1161
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1214,15 +1163,15 @@ var TabsIndicator = class {
|
|
|
1214
1163
|
*/
|
|
1215
1164
|
/*! Bundled license information:
|
|
1216
1165
|
|
|
1217
|
-
@y14e/
|
|
1166
|
+
@y14e/attribute-util/dist/index.js:
|
|
1218
1167
|
(**
|
|
1219
|
-
*
|
|
1168
|
+
* Attribute Util
|
|
1220
1169
|
*
|
|
1221
|
-
* @version 2.0.
|
|
1170
|
+
* @version 2.0.1
|
|
1222
1171
|
* @author Yusuke Kamiyamane
|
|
1223
1172
|
* @license MIT
|
|
1224
1173
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1225
|
-
* @see {@link https://github.com/y14e/
|
|
1174
|
+
* @see {@link https://github.com/y14e/attribute-util}
|
|
1226
1175
|
*)
|
|
1227
1176
|
|
|
1228
1177
|
power-focusable/dist/index.js:
|
|
@@ -1231,7 +1180,7 @@ power-focusable/dist/index.js:
|
|
|
1231
1180
|
* High-precision focus management utility with full composed tree support.
|
|
1232
1181
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1233
1182
|
*
|
|
1234
|
-
* @version 4.3.
|
|
1183
|
+
* @version 4.3.25
|
|
1235
1184
|
* @author Yusuke Kamiyamane
|
|
1236
1185
|
* @license MIT
|
|
1237
1186
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1242,31 +1191,20 @@ power-focusable/dist/index.js:
|
|
|
1242
1191
|
(**
|
|
1243
1192
|
* Button
|
|
1244
1193
|
*
|
|
1245
|
-
* @version 1.0.
|
|
1194
|
+
* @version 1.0.7
|
|
1246
1195
|
* @author Yusuke Kamiyamane
|
|
1247
1196
|
* @license MIT
|
|
1248
1197
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1249
1198
|
* @see {@link https://github.com/y14e/button}
|
|
1250
1199
|
*)
|
|
1251
1200
|
|
|
1252
|
-
@y14e/attributes-utils/dist/index.js:
|
|
1253
|
-
(**
|
|
1254
|
-
* Attributes Utils
|
|
1255
|
-
*
|
|
1256
|
-
* @version 1.1.7
|
|
1257
|
-
* @author Yusuke Kamiyamane
|
|
1258
|
-
* @license MIT
|
|
1259
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1260
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
1261
|
-
*)
|
|
1262
|
-
|
|
1263
1201
|
@y14e/roving-tabindex/dist/index.js:
|
|
1264
1202
|
(**
|
|
1265
1203
|
* Roving Tabindex
|
|
1266
1204
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1267
1205
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1268
1206
|
*
|
|
1269
|
-
* @version 3.1.
|
|
1207
|
+
* @version 3.1.22
|
|
1270
1208
|
* @author Yusuke Kamiyamane
|
|
1271
1209
|
* @license MIT
|
|
1272
1210
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// node_modules/@y14e/
|
|
1
|
+
// node_modules/@y14e/attribute-util/dist/index.js
|
|
2
2
|
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
3
3
|
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
4
4
|
function addAttributeToken(element, name, token, options = {}) {
|
|
@@ -47,7 +47,6 @@ function saveAttributes(element_or_elements, name_or_names) {
|
|
|
47
47
|
});
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
var addTokenToAttribute = addAttributeToken;
|
|
51
50
|
|
|
52
51
|
// node_modules/power-focusable/dist/index.js
|
|
53
52
|
var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
|
|
@@ -367,56 +366,6 @@ var Button = class {
|
|
|
367
366
|
};
|
|
368
367
|
};
|
|
369
368
|
|
|
370
|
-
// node_modules/@y14e/roving-tabindex/node_modules/@y14e/attributes-utils/dist/index.js
|
|
371
|
-
var DEFAULT_PARSER2 = (value) => value.split(/\s+/);
|
|
372
|
-
var DEFAULT_SERIALIZER2 = (tokens) => tokens.join(" ");
|
|
373
|
-
function addTokenToAttribute2(element, name, token, options = {}) {
|
|
374
|
-
const value = element.getAttribute(name)?.trim();
|
|
375
|
-
const {
|
|
376
|
-
caseInsensitive = false,
|
|
377
|
-
parse = DEFAULT_PARSER2,
|
|
378
|
-
serialize = DEFAULT_SERIALIZER2
|
|
379
|
-
} = options;
|
|
380
|
-
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
381
|
-
if (caseInsensitive) {
|
|
382
|
-
const lower = token.toLowerCase();
|
|
383
|
-
if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
|
|
384
|
-
tokens.push(token);
|
|
385
|
-
element.setAttribute(name, serialize(tokens));
|
|
386
|
-
}
|
|
387
|
-
} else {
|
|
388
|
-
const set = new Set(tokens);
|
|
389
|
-
set.add(token);
|
|
390
|
-
element.setAttribute(name, serialize([...set]));
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
var snapshots2 = /* @__PURE__ */ new WeakMap();
|
|
394
|
-
function restoreAttributes2(element_or_elements) {
|
|
395
|
-
for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
|
|
396
|
-
const snapshot = snapshots2.get(element);
|
|
397
|
-
if (!snapshot) {
|
|
398
|
-
continue;
|
|
399
|
-
}
|
|
400
|
-
for (const [name, value] of snapshot.entries()) {
|
|
401
|
-
value === null ? element.removeAttribute(name) : element.setAttribute(name, value);
|
|
402
|
-
}
|
|
403
|
-
snapshots2.delete(element);
|
|
404
|
-
}
|
|
405
|
-
}
|
|
406
|
-
function saveAttributes2(element_or_elements, name_or_names) {
|
|
407
|
-
const names = Array.isArray(name_or_names) ? name_or_names : [name_or_names];
|
|
408
|
-
(Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
|
|
409
|
-
let snapshot = snapshots2.get(element);
|
|
410
|
-
if (!snapshot) {
|
|
411
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
412
|
-
snapshots2.set(element, snapshot);
|
|
413
|
-
}
|
|
414
|
-
names.forEach((name) => {
|
|
415
|
-
snapshot.set(name, element.getAttribute(name));
|
|
416
|
-
});
|
|
417
|
-
});
|
|
418
|
-
}
|
|
419
|
-
|
|
420
369
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
421
370
|
function createRovingTabIndex(container, options = {}) {
|
|
422
371
|
if (!(container instanceof Element)) {
|
|
@@ -508,7 +457,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
508
457
|
this.#controller = null;
|
|
509
458
|
this.#focusables.forEach((focusable) => {
|
|
510
459
|
_RovingTabIndex.#initialized.delete(focusable);
|
|
511
|
-
|
|
460
|
+
restoreAttributes(focusable);
|
|
512
461
|
});
|
|
513
462
|
this.#focusables.clear();
|
|
514
463
|
this.#focusablesByFirstChar.clear();
|
|
@@ -613,7 +562,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
613
562
|
for (const focusable of this.#focusables) {
|
|
614
563
|
if (!current.has(focusable)) {
|
|
615
564
|
_RovingTabIndex.#initialized.delete(focusable);
|
|
616
|
-
|
|
565
|
+
restoreAttributes(focusable);
|
|
617
566
|
this.#focusables.delete(focusable);
|
|
618
567
|
for (const [key, focusables] of this.#focusablesByFirstChar) {
|
|
619
568
|
const index = focusables.indexOf(focusable);
|
|
@@ -635,7 +584,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
635
584
|
this.#focusables.add(focusable);
|
|
636
585
|
_RovingTabIndex.#initialized.add(focusable);
|
|
637
586
|
if (!navigationOnly) {
|
|
638
|
-
|
|
587
|
+
saveAttributes(focusable, "tabindex");
|
|
639
588
|
focusable.setAttribute("tabindex", "-1");
|
|
640
589
|
}
|
|
641
590
|
if (!typeahead) {
|
|
@@ -648,8 +597,8 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
648
597
|
);
|
|
649
598
|
if (char) {
|
|
650
599
|
keys.add(char);
|
|
651
|
-
|
|
652
|
-
|
|
600
|
+
saveAttributes(focusable, "aria-keyshortcuts");
|
|
601
|
+
addAttributeToken(focusable, "aria-keyshortcuts", char, {
|
|
653
602
|
caseInsensitive: true
|
|
654
603
|
});
|
|
655
604
|
}
|
|
@@ -1007,7 +956,7 @@ var Tabs = class _Tabs {
|
|
|
1007
956
|
return;
|
|
1008
957
|
}
|
|
1009
958
|
panel.id ||= `tabs-panel-${id}`;
|
|
1010
|
-
|
|
959
|
+
addAttributeToken(tab, "aria-controls", panel.id);
|
|
1011
960
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
1012
961
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
1013
962
|
if (!isAvoided) {
|
|
@@ -1015,7 +964,7 @@ var Tabs = class _Tabs {
|
|
|
1015
964
|
}
|
|
1016
965
|
tab.setAttribute("role", "tab");
|
|
1017
966
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
1018
|
-
|
|
967
|
+
addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
1019
968
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
1020
969
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
1021
970
|
this.#buttons.push(new Button(tab));
|
|
@@ -1204,7 +1153,7 @@ var TabsIndicator = class {
|
|
|
1204
1153
|
* Tabs
|
|
1205
1154
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1206
1155
|
*
|
|
1207
|
-
* @version 2.0.
|
|
1156
|
+
* @version 2.0.12
|
|
1208
1157
|
* @author Yusuke Kamiyamane
|
|
1209
1158
|
* @license MIT
|
|
1210
1159
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1212,15 +1161,15 @@ var TabsIndicator = class {
|
|
|
1212
1161
|
*/
|
|
1213
1162
|
/*! Bundled license information:
|
|
1214
1163
|
|
|
1215
|
-
@y14e/
|
|
1164
|
+
@y14e/attribute-util/dist/index.js:
|
|
1216
1165
|
(**
|
|
1217
|
-
*
|
|
1166
|
+
* Attribute Util
|
|
1218
1167
|
*
|
|
1219
|
-
* @version 2.0.
|
|
1168
|
+
* @version 2.0.1
|
|
1220
1169
|
* @author Yusuke Kamiyamane
|
|
1221
1170
|
* @license MIT
|
|
1222
1171
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1223
|
-
* @see {@link https://github.com/y14e/
|
|
1172
|
+
* @see {@link https://github.com/y14e/attribute-util}
|
|
1224
1173
|
*)
|
|
1225
1174
|
|
|
1226
1175
|
power-focusable/dist/index.js:
|
|
@@ -1229,7 +1178,7 @@ power-focusable/dist/index.js:
|
|
|
1229
1178
|
* High-precision focus management utility with full composed tree support.
|
|
1230
1179
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1231
1180
|
*
|
|
1232
|
-
* @version 4.3.
|
|
1181
|
+
* @version 4.3.25
|
|
1233
1182
|
* @author Yusuke Kamiyamane
|
|
1234
1183
|
* @license MIT
|
|
1235
1184
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1240,31 +1189,20 @@ power-focusable/dist/index.js:
|
|
|
1240
1189
|
(**
|
|
1241
1190
|
* Button
|
|
1242
1191
|
*
|
|
1243
|
-
* @version 1.0.
|
|
1192
|
+
* @version 1.0.7
|
|
1244
1193
|
* @author Yusuke Kamiyamane
|
|
1245
1194
|
* @license MIT
|
|
1246
1195
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1247
1196
|
* @see {@link https://github.com/y14e/button}
|
|
1248
1197
|
*)
|
|
1249
1198
|
|
|
1250
|
-
@y14e/attributes-utils/dist/index.js:
|
|
1251
|
-
(**
|
|
1252
|
-
* Attributes Utils
|
|
1253
|
-
*
|
|
1254
|
-
* @version 1.1.7
|
|
1255
|
-
* @author Yusuke Kamiyamane
|
|
1256
|
-
* @license MIT
|
|
1257
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1258
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
1259
|
-
*)
|
|
1260
|
-
|
|
1261
1199
|
@y14e/roving-tabindex/dist/index.js:
|
|
1262
1200
|
(**
|
|
1263
1201
|
* Roving Tabindex
|
|
1264
1202
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1265
1203
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1266
1204
|
*
|
|
1267
|
-
* @version 3.1.
|
|
1205
|
+
* @version 3.1.22
|
|
1268
1206
|
* @author Yusuke Kamiyamane
|
|
1269
1207
|
* @license MIT
|
|
1270
1208
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var util = require('@y14e/attribute-util');
|
|
4
4
|
var Button = require('@y14e/button');
|
|
5
5
|
var rovingTabindex = require('@y14e/roving-tabindex');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
|
+
function _interopNamespace(e) {
|
|
10
|
+
if (e && e.__esModule) return e;
|
|
11
|
+
var n = Object.create(null);
|
|
12
|
+
if (e) {
|
|
13
|
+
Object.keys(e).forEach(function (k) {
|
|
14
|
+
if (k !== 'default') {
|
|
15
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () { return e[k]; }
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
n.default = e;
|
|
24
|
+
return Object.freeze(n);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
var util__namespace = /*#__PURE__*/_interopNamespace(util);
|
|
9
28
|
var Button__default = /*#__PURE__*/_interopDefault(Button);
|
|
10
29
|
|
|
11
30
|
// src/index.ts
|
|
@@ -279,13 +298,13 @@ var Tabs = class _Tabs {
|
|
|
279
298
|
this.#onContentAnimationFinish();
|
|
280
299
|
this.#animationController?.abort();
|
|
281
300
|
this.#animationController = null;
|
|
282
|
-
|
|
301
|
+
util__namespace.restoreAttributes([
|
|
283
302
|
...this.#listElements,
|
|
284
303
|
...this.#tabElements,
|
|
285
304
|
...this.#indicatorElements,
|
|
286
305
|
...this.#panelElements
|
|
287
306
|
]);
|
|
288
|
-
this.#contentElement &&
|
|
307
|
+
this.#contentElement && util__namespace.restoreAttributes(this.#contentElement);
|
|
289
308
|
this.#listElements.length = 0;
|
|
290
309
|
this.#tabElements.length = 0;
|
|
291
310
|
this.#contentElement = null;
|
|
@@ -293,22 +312,22 @@ var Tabs = class _Tabs {
|
|
|
293
312
|
this.#rootElement.removeAttribute("data-tabs-initialized");
|
|
294
313
|
}
|
|
295
314
|
#initialize() {
|
|
296
|
-
|
|
315
|
+
util__namespace.saveAttributes(this.#listElements, [
|
|
297
316
|
"aria-hidden",
|
|
298
317
|
"aria-orientation",
|
|
299
318
|
"role",
|
|
300
319
|
"style"
|
|
301
320
|
]);
|
|
302
|
-
|
|
321
|
+
util__namespace.saveAttributes(this.#tabElements, [
|
|
303
322
|
"aria-controls",
|
|
304
323
|
"id",
|
|
305
324
|
"role",
|
|
306
325
|
"style",
|
|
307
326
|
"tabindex"
|
|
308
327
|
]);
|
|
309
|
-
|
|
310
|
-
this.#contentElement &&
|
|
311
|
-
|
|
328
|
+
util__namespace.saveAttributes(this.#indicatorElements, "style");
|
|
329
|
+
this.#contentElement && util__namespace.saveAttributes(this.#contentElement, "style");
|
|
330
|
+
util__namespace.saveAttributes(this.#panelElements, [
|
|
312
331
|
"aria-controls",
|
|
313
332
|
"aria-labelledby",
|
|
314
333
|
"id",
|
|
@@ -330,7 +349,7 @@ var Tabs = class _Tabs {
|
|
|
330
349
|
return;
|
|
331
350
|
}
|
|
332
351
|
panel.id ||= `tabs-panel-${id}`;
|
|
333
|
-
|
|
352
|
+
util__namespace.addAttributeToken(tab, "aria-controls", panel.id);
|
|
334
353
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
335
354
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
336
355
|
if (!isAvoided) {
|
|
@@ -338,7 +357,7 @@ var Tabs = class _Tabs {
|
|
|
338
357
|
}
|
|
339
358
|
tab.setAttribute("role", "tab");
|
|
340
359
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
341
|
-
|
|
360
|
+
util__namespace.addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
342
361
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
343
362
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
344
363
|
this.#buttons.push(new Button__default.default(tab));
|
|
@@ -527,7 +546,7 @@ var TabsIndicator = class {
|
|
|
527
546
|
* Tabs
|
|
528
547
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
529
548
|
*
|
|
530
|
-
* @version 2.0.
|
|
549
|
+
* @version 2.0.12
|
|
531
550
|
* @author Yusuke Kamiyamane
|
|
532
551
|
* @license MIT
|
|
533
552
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as util from '@y14e/attribute-util';
|
|
2
2
|
import Button from '@y14e/button';
|
|
3
3
|
import { createRovingTabIndex } from '@y14e/roving-tabindex';
|
|
4
4
|
|
|
@@ -273,13 +273,13 @@ var Tabs = class _Tabs {
|
|
|
273
273
|
this.#onContentAnimationFinish();
|
|
274
274
|
this.#animationController?.abort();
|
|
275
275
|
this.#animationController = null;
|
|
276
|
-
restoreAttributes([
|
|
276
|
+
util.restoreAttributes([
|
|
277
277
|
...this.#listElements,
|
|
278
278
|
...this.#tabElements,
|
|
279
279
|
...this.#indicatorElements,
|
|
280
280
|
...this.#panelElements
|
|
281
281
|
]);
|
|
282
|
-
this.#contentElement && restoreAttributes(this.#contentElement);
|
|
282
|
+
this.#contentElement && util.restoreAttributes(this.#contentElement);
|
|
283
283
|
this.#listElements.length = 0;
|
|
284
284
|
this.#tabElements.length = 0;
|
|
285
285
|
this.#contentElement = null;
|
|
@@ -287,22 +287,22 @@ var Tabs = class _Tabs {
|
|
|
287
287
|
this.#rootElement.removeAttribute("data-tabs-initialized");
|
|
288
288
|
}
|
|
289
289
|
#initialize() {
|
|
290
|
-
saveAttributes(this.#listElements, [
|
|
290
|
+
util.saveAttributes(this.#listElements, [
|
|
291
291
|
"aria-hidden",
|
|
292
292
|
"aria-orientation",
|
|
293
293
|
"role",
|
|
294
294
|
"style"
|
|
295
295
|
]);
|
|
296
|
-
saveAttributes(this.#tabElements, [
|
|
296
|
+
util.saveAttributes(this.#tabElements, [
|
|
297
297
|
"aria-controls",
|
|
298
298
|
"id",
|
|
299
299
|
"role",
|
|
300
300
|
"style",
|
|
301
301
|
"tabindex"
|
|
302
302
|
]);
|
|
303
|
-
saveAttributes(this.#indicatorElements, "style");
|
|
304
|
-
this.#contentElement && saveAttributes(this.#contentElement, "style");
|
|
305
|
-
saveAttributes(this.#panelElements, [
|
|
303
|
+
util.saveAttributes(this.#indicatorElements, "style");
|
|
304
|
+
this.#contentElement && util.saveAttributes(this.#contentElement, "style");
|
|
305
|
+
util.saveAttributes(this.#panelElements, [
|
|
306
306
|
"aria-controls",
|
|
307
307
|
"aria-labelledby",
|
|
308
308
|
"id",
|
|
@@ -324,7 +324,7 @@ var Tabs = class _Tabs {
|
|
|
324
324
|
return;
|
|
325
325
|
}
|
|
326
326
|
panel.id ||= `tabs-panel-${id}`;
|
|
327
|
-
|
|
327
|
+
util.addAttributeToken(tab, "aria-controls", panel.id);
|
|
328
328
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
329
329
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
330
330
|
if (!isAvoided) {
|
|
@@ -332,7 +332,7 @@ var Tabs = class _Tabs {
|
|
|
332
332
|
}
|
|
333
333
|
tab.setAttribute("role", "tab");
|
|
334
334
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
335
|
-
|
|
335
|
+
util.addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
336
336
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
337
337
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
338
338
|
this.#buttons.push(new Button(tab));
|
|
@@ -521,7 +521,7 @@ var TabsIndicator = class {
|
|
|
521
521
|
* Tabs
|
|
522
522
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
523
523
|
*
|
|
524
|
-
* @version 2.0.
|
|
524
|
+
* @version 2.0.12
|
|
525
525
|
* @author Yusuke Kamiyamane
|
|
526
526
|
* @license MIT
|
|
527
527
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/tabs",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.12",
|
|
4
4
|
"description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"node": ">=18"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@y14e/
|
|
54
|
-
"@y14e/button": "^1.0.
|
|
55
|
-
"@y14e/roving-tabindex": "^3.1.
|
|
53
|
+
"@y14e/attribute-util": "^2.0.1",
|
|
54
|
+
"@y14e/button": "^1.0.7",
|
|
55
|
+
"@y14e/roving-tabindex": "^3.1.22"
|
|
56
56
|
}
|
|
57
57
|
}
|