@y14e/tabs 2.0.13 → 2.0.14
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 +3 -3
- package/dist/index.bundle.cjs +8 -8
- package/dist/index.bundle.js +8 -8
- package/dist/index.cjs +12 -12
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +11 -11
- package/package.json +3 -3
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.14";
|
|
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.14/+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.14";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
// node_modules/@y14e/attribute-
|
|
3
|
+
// node_modules/@y14e/attribute-utils/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 = {}) {
|
|
@@ -1155,7 +1155,7 @@ var TabsIndicator = class {
|
|
|
1155
1155
|
* Tabs
|
|
1156
1156
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1157
1157
|
*
|
|
1158
|
-
* @version 2.0.
|
|
1158
|
+
* @version 2.0.14
|
|
1159
1159
|
* @author Yusuke Kamiyamane
|
|
1160
1160
|
* @license MIT
|
|
1161
1161
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1163,15 +1163,15 @@ var TabsIndicator = class {
|
|
|
1163
1163
|
*/
|
|
1164
1164
|
/*! Bundled license information:
|
|
1165
1165
|
|
|
1166
|
-
@y14e/attribute-
|
|
1166
|
+
@y14e/attribute-utils/dist/index.js:
|
|
1167
1167
|
(**
|
|
1168
|
-
* Attribute
|
|
1168
|
+
* Attribute Utils
|
|
1169
1169
|
*
|
|
1170
|
-
* @version 2.0.
|
|
1170
|
+
* @version 2.0.5
|
|
1171
1171
|
* @author Yusuke Kamiyamane
|
|
1172
1172
|
* @license MIT
|
|
1173
1173
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1174
|
-
* @see {@link https://github.com/y14e/attribute-
|
|
1174
|
+
* @see {@link https://github.com/y14e/attribute-utils}
|
|
1175
1175
|
*)
|
|
1176
1176
|
|
|
1177
1177
|
power-focusable/dist/index.js:
|
|
@@ -1180,7 +1180,7 @@ power-focusable/dist/index.js:
|
|
|
1180
1180
|
* High-precision focus management utility with full composed tree support.
|
|
1181
1181
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1182
1182
|
*
|
|
1183
|
-
* @version 4.3.
|
|
1183
|
+
* @version 4.3.26
|
|
1184
1184
|
* @author Yusuke Kamiyamane
|
|
1185
1185
|
* @license MIT
|
|
1186
1186
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1204,7 +1204,7 @@ power-focusable/dist/index.js:
|
|
|
1204
1204
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1205
1205
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1206
1206
|
*
|
|
1207
|
-
* @version 3.1.
|
|
1207
|
+
* @version 3.1.23
|
|
1208
1208
|
* @author Yusuke Kamiyamane
|
|
1209
1209
|
* @license MIT
|
|
1210
1210
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// node_modules/@y14e/attribute-
|
|
1
|
+
// node_modules/@y14e/attribute-utils/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 = {}) {
|
|
@@ -1153,7 +1153,7 @@ var TabsIndicator = class {
|
|
|
1153
1153
|
* Tabs
|
|
1154
1154
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1155
1155
|
*
|
|
1156
|
-
* @version 2.0.
|
|
1156
|
+
* @version 2.0.14
|
|
1157
1157
|
* @author Yusuke Kamiyamane
|
|
1158
1158
|
* @license MIT
|
|
1159
1159
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1161,15 +1161,15 @@ var TabsIndicator = class {
|
|
|
1161
1161
|
*/
|
|
1162
1162
|
/*! Bundled license information:
|
|
1163
1163
|
|
|
1164
|
-
@y14e/attribute-
|
|
1164
|
+
@y14e/attribute-utils/dist/index.js:
|
|
1165
1165
|
(**
|
|
1166
|
-
* Attribute
|
|
1166
|
+
* Attribute Utils
|
|
1167
1167
|
*
|
|
1168
|
-
* @version 2.0.
|
|
1168
|
+
* @version 2.0.5
|
|
1169
1169
|
* @author Yusuke Kamiyamane
|
|
1170
1170
|
* @license MIT
|
|
1171
1171
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1172
|
-
* @see {@link https://github.com/y14e/attribute-
|
|
1172
|
+
* @see {@link https://github.com/y14e/attribute-utils}
|
|
1173
1173
|
*)
|
|
1174
1174
|
|
|
1175
1175
|
power-focusable/dist/index.js:
|
|
@@ -1178,7 +1178,7 @@ power-focusable/dist/index.js:
|
|
|
1178
1178
|
* High-precision focus management utility with full composed tree support.
|
|
1179
1179
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1180
1180
|
*
|
|
1181
|
-
* @version 4.3.
|
|
1181
|
+
* @version 4.3.26
|
|
1182
1182
|
* @author Yusuke Kamiyamane
|
|
1183
1183
|
* @license MIT
|
|
1184
1184
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1202,7 +1202,7 @@ power-focusable/dist/index.js:
|
|
|
1202
1202
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1203
1203
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1204
1204
|
*
|
|
1205
|
-
* @version 3.1.
|
|
1205
|
+
* @version 3.1.23
|
|
1206
1206
|
* @author Yusuke Kamiyamane
|
|
1207
1207
|
* @license MIT
|
|
1208
1208
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var utils = require('@y14e/attribute-utils');
|
|
4
4
|
var button = require('@y14e/button');
|
|
5
5
|
var rovingTabindex = require('@y14e/roving-tabindex');
|
|
6
6
|
|
|
@@ -22,7 +22,7 @@ function _interopNamespace(e) {
|
|
|
22
22
|
return Object.freeze(n);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var utils__namespace = /*#__PURE__*/_interopNamespace(utils);
|
|
26
26
|
|
|
27
27
|
// src/index.ts
|
|
28
28
|
var Tabs = class _Tabs {
|
|
@@ -295,13 +295,13 @@ var Tabs = class _Tabs {
|
|
|
295
295
|
this.#onContentAnimationFinish();
|
|
296
296
|
this.#animationController?.abort();
|
|
297
297
|
this.#animationController = null;
|
|
298
|
-
|
|
298
|
+
utils__namespace.restoreAttributes([
|
|
299
299
|
...this.#listElements,
|
|
300
300
|
...this.#tabElements,
|
|
301
301
|
...this.#indicatorElements,
|
|
302
302
|
...this.#panelElements
|
|
303
303
|
]);
|
|
304
|
-
this.#contentElement &&
|
|
304
|
+
this.#contentElement && utils__namespace.restoreAttributes(this.#contentElement);
|
|
305
305
|
this.#listElements.length = 0;
|
|
306
306
|
this.#tabElements.length = 0;
|
|
307
307
|
this.#contentElement = null;
|
|
@@ -309,22 +309,22 @@ var Tabs = class _Tabs {
|
|
|
309
309
|
this.#rootElement.removeAttribute("data-tabs-initialized");
|
|
310
310
|
}
|
|
311
311
|
#initialize() {
|
|
312
|
-
|
|
312
|
+
utils__namespace.saveAttributes(this.#listElements, [
|
|
313
313
|
"aria-hidden",
|
|
314
314
|
"aria-orientation",
|
|
315
315
|
"role",
|
|
316
316
|
"style"
|
|
317
317
|
]);
|
|
318
|
-
|
|
318
|
+
utils__namespace.saveAttributes(this.#tabElements, [
|
|
319
319
|
"aria-controls",
|
|
320
320
|
"id",
|
|
321
321
|
"role",
|
|
322
322
|
"style",
|
|
323
323
|
"tabindex"
|
|
324
324
|
]);
|
|
325
|
-
|
|
326
|
-
this.#contentElement &&
|
|
327
|
-
|
|
325
|
+
utils__namespace.saveAttributes(this.#indicatorElements, "style");
|
|
326
|
+
this.#contentElement && utils__namespace.saveAttributes(this.#contentElement, "style");
|
|
327
|
+
utils__namespace.saveAttributes(this.#panelElements, [
|
|
328
328
|
"aria-controls",
|
|
329
329
|
"aria-labelledby",
|
|
330
330
|
"id",
|
|
@@ -346,7 +346,7 @@ var Tabs = class _Tabs {
|
|
|
346
346
|
return;
|
|
347
347
|
}
|
|
348
348
|
panel.id ||= `tabs-panel-${id}`;
|
|
349
|
-
|
|
349
|
+
utils__namespace.addAttributeToken(tab, "aria-controls", panel.id);
|
|
350
350
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
351
351
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
352
352
|
if (!isAvoided) {
|
|
@@ -354,7 +354,7 @@ var Tabs = class _Tabs {
|
|
|
354
354
|
}
|
|
355
355
|
tab.setAttribute("role", "tab");
|
|
356
356
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
357
|
-
|
|
357
|
+
utils__namespace.addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
358
358
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
359
359
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
360
360
|
this.#buttons.push(new button.Button(tab));
|
|
@@ -543,7 +543,7 @@ var TabsIndicator = class {
|
|
|
543
543
|
* Tabs
|
|
544
544
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
545
545
|
*
|
|
546
|
-
* @version 2.0.
|
|
546
|
+
* @version 2.0.14
|
|
547
547
|
* @author Yusuke Kamiyamane
|
|
548
548
|
* @license MIT
|
|
549
549
|
* @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 * as
|
|
1
|
+
import * as utils from '@y14e/attribute-utils';
|
|
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
|
-
|
|
276
|
+
utils.restoreAttributes([
|
|
277
277
|
...this.#listElements,
|
|
278
278
|
...this.#tabElements,
|
|
279
279
|
...this.#indicatorElements,
|
|
280
280
|
...this.#panelElements
|
|
281
281
|
]);
|
|
282
|
-
this.#contentElement &&
|
|
282
|
+
this.#contentElement && utils.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
|
-
|
|
290
|
+
utils.saveAttributes(this.#listElements, [
|
|
291
291
|
"aria-hidden",
|
|
292
292
|
"aria-orientation",
|
|
293
293
|
"role",
|
|
294
294
|
"style"
|
|
295
295
|
]);
|
|
296
|
-
|
|
296
|
+
utils.saveAttributes(this.#tabElements, [
|
|
297
297
|
"aria-controls",
|
|
298
298
|
"id",
|
|
299
299
|
"role",
|
|
300
300
|
"style",
|
|
301
301
|
"tabindex"
|
|
302
302
|
]);
|
|
303
|
-
|
|
304
|
-
this.#contentElement &&
|
|
305
|
-
|
|
303
|
+
utils.saveAttributes(this.#indicatorElements, "style");
|
|
304
|
+
this.#contentElement && utils.saveAttributes(this.#contentElement, "style");
|
|
305
|
+
utils.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
|
+
utils.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
|
+
utils.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.14
|
|
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.14",
|
|
4
4
|
"description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"esbuild": true
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@y14e/attribute-
|
|
56
|
+
"@y14e/attribute-utils": "^2.0.5",
|
|
57
57
|
"@y14e/button": "^1.0.8",
|
|
58
|
-
"@y14e/roving-tabindex": "^3.1.
|
|
58
|
+
"@y14e/roving-tabindex": "^3.1.23"
|
|
59
59
|
}
|
|
60
60
|
}
|