@y14e/tabs 2.0.12 → 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 +5 -5
- package/dist/index.bundle.cjs +10 -10
- package/dist/index.bundle.js +10 -10
- package/dist/index.cjs +15 -18
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +13 -13
- package/package.json +7 -4
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";
|
|
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
|
|
@@ -68,7 +68,7 @@ If `true`, only the first tab list remains interactive; subsequent duplicates ar
|
|
|
68
68
|
Override the global default settings applied to all accordion instances.
|
|
69
69
|
|
|
70
70
|
```ts
|
|
71
|
-
import Tabs from "@y14e/tabs";
|
|
71
|
+
import { Tabs } from "@y14e/tabs";
|
|
72
72
|
|
|
73
73
|
Tabs.defaults = {
|
|
74
74
|
animation: {
|
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
|
|
@@ -1191,7 +1191,7 @@ power-focusable/dist/index.js:
|
|
|
1191
1191
|
(**
|
|
1192
1192
|
* Button
|
|
1193
1193
|
*
|
|
1194
|
-
* @version 1.0.
|
|
1194
|
+
* @version 1.0.8
|
|
1195
1195
|
* @author Yusuke Kamiyamane
|
|
1196
1196
|
* @license MIT
|
|
1197
1197
|
* @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
|
|
@@ -1212,4 +1212,4 @@ power-focusable/dist/index.js:
|
|
|
1212
1212
|
*)
|
|
1213
1213
|
*/
|
|
1214
1214
|
|
|
1215
|
-
|
|
1215
|
+
exports.Tabs = Tabs;
|
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
|
|
@@ -1189,7 +1189,7 @@ power-focusable/dist/index.js:
|
|
|
1189
1189
|
(**
|
|
1190
1190
|
* Button
|
|
1191
1191
|
*
|
|
1192
|
-
* @version 1.0.
|
|
1192
|
+
* @version 1.0.8
|
|
1193
1193
|
* @author Yusuke Kamiyamane
|
|
1194
1194
|
* @license MIT
|
|
1195
1195
|
* @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
|
|
@@ -1210,4 +1210,4 @@ power-focusable/dist/index.js:
|
|
|
1210
1210
|
*)
|
|
1211
1211
|
*/
|
|
1212
1212
|
|
|
1213
|
-
export { Tabs
|
|
1213
|
+
export { Tabs };
|
package/dist/index.cjs
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var utils = require('@y14e/attribute-utils');
|
|
4
|
+
var button = require('@y14e/button');
|
|
5
5
|
var rovingTabindex = require('@y14e/roving-tabindex');
|
|
6
6
|
|
|
7
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
-
|
|
9
7
|
function _interopNamespace(e) {
|
|
10
8
|
if (e && e.__esModule) return e;
|
|
11
9
|
var n = Object.create(null);
|
|
@@ -24,8 +22,7 @@ function _interopNamespace(e) {
|
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
27
|
-
var
|
|
28
|
-
var Button__default = /*#__PURE__*/_interopDefault(Button);
|
|
25
|
+
var utils__namespace = /*#__PURE__*/_interopNamespace(utils);
|
|
29
26
|
|
|
30
27
|
// src/index.ts
|
|
31
28
|
var Tabs = class _Tabs {
|
|
@@ -298,13 +295,13 @@ var Tabs = class _Tabs {
|
|
|
298
295
|
this.#onContentAnimationFinish();
|
|
299
296
|
this.#animationController?.abort();
|
|
300
297
|
this.#animationController = null;
|
|
301
|
-
|
|
298
|
+
utils__namespace.restoreAttributes([
|
|
302
299
|
...this.#listElements,
|
|
303
300
|
...this.#tabElements,
|
|
304
301
|
...this.#indicatorElements,
|
|
305
302
|
...this.#panelElements
|
|
306
303
|
]);
|
|
307
|
-
this.#contentElement &&
|
|
304
|
+
this.#contentElement && utils__namespace.restoreAttributes(this.#contentElement);
|
|
308
305
|
this.#listElements.length = 0;
|
|
309
306
|
this.#tabElements.length = 0;
|
|
310
307
|
this.#contentElement = null;
|
|
@@ -312,22 +309,22 @@ var Tabs = class _Tabs {
|
|
|
312
309
|
this.#rootElement.removeAttribute("data-tabs-initialized");
|
|
313
310
|
}
|
|
314
311
|
#initialize() {
|
|
315
|
-
|
|
312
|
+
utils__namespace.saveAttributes(this.#listElements, [
|
|
316
313
|
"aria-hidden",
|
|
317
314
|
"aria-orientation",
|
|
318
315
|
"role",
|
|
319
316
|
"style"
|
|
320
317
|
]);
|
|
321
|
-
|
|
318
|
+
utils__namespace.saveAttributes(this.#tabElements, [
|
|
322
319
|
"aria-controls",
|
|
323
320
|
"id",
|
|
324
321
|
"role",
|
|
325
322
|
"style",
|
|
326
323
|
"tabindex"
|
|
327
324
|
]);
|
|
328
|
-
|
|
329
|
-
this.#contentElement &&
|
|
330
|
-
|
|
325
|
+
utils__namespace.saveAttributes(this.#indicatorElements, "style");
|
|
326
|
+
this.#contentElement && utils__namespace.saveAttributes(this.#contentElement, "style");
|
|
327
|
+
utils__namespace.saveAttributes(this.#panelElements, [
|
|
331
328
|
"aria-controls",
|
|
332
329
|
"aria-labelledby",
|
|
333
330
|
"id",
|
|
@@ -349,7 +346,7 @@ var Tabs = class _Tabs {
|
|
|
349
346
|
return;
|
|
350
347
|
}
|
|
351
348
|
panel.id ||= `tabs-panel-${id}`;
|
|
352
|
-
|
|
349
|
+
utils__namespace.addAttributeToken(tab, "aria-controls", panel.id);
|
|
353
350
|
!tab.hasAttribute("aria-selected") && tab.setAttribute("aria-selected", "false");
|
|
354
351
|
const isAvoided = this.#isAvoidedTab(tab);
|
|
355
352
|
if (!isAvoided) {
|
|
@@ -357,10 +354,10 @@ var Tabs = class _Tabs {
|
|
|
357
354
|
}
|
|
358
355
|
tab.setAttribute("role", "tab");
|
|
359
356
|
!this.#isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
|
|
360
|
-
|
|
357
|
+
utils__namespace.addAttributeToken(panel, "aria-labelledby", tab.id);
|
|
361
358
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
362
359
|
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
363
|
-
this.#buttons.push(new
|
|
360
|
+
this.#buttons.push(new button.Button(tab));
|
|
364
361
|
});
|
|
365
362
|
this.#indicatorElements.forEach((indicator) => {
|
|
366
363
|
indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
|
|
@@ -546,11 +543,11 @@ var TabsIndicator = class {
|
|
|
546
543
|
* Tabs
|
|
547
544
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
548
545
|
*
|
|
549
|
-
* @version 2.0.
|
|
546
|
+
* @version 2.0.14
|
|
550
547
|
* @author Yusuke Kamiyamane
|
|
551
548
|
* @license MIT
|
|
552
549
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
553
550
|
* @see {@link https://github.com/y14e/tabs}
|
|
554
551
|
*/
|
|
555
552
|
|
|
556
|
-
|
|
553
|
+
exports.Tabs = Tabs;
|
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 2.0.
|
|
5
|
+
* @version 2.0.14
|
|
6
6
|
* @author Yusuke Kamiyamane
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -40,4 +40,4 @@ declare class Tabs {
|
|
|
40
40
|
destroy(force?: boolean): Promise<void>;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
export { type TabsOptions
|
|
43
|
+
export { Tabs, type TabsOptions };
|
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 2.0.
|
|
5
|
+
* @version 2.0.14
|
|
6
6
|
* @author Yusuke Kamiyamane
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -40,4 +40,4 @@ declare class Tabs {
|
|
|
40
40
|
destroy(force?: boolean): Promise<void>;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
export { type TabsOptions
|
|
43
|
+
export { Tabs, type TabsOptions };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import Button from '@y14e/button';
|
|
1
|
+
import * as utils from '@y14e/attribute-utils';
|
|
2
|
+
import { Button } from '@y14e/button';
|
|
3
3
|
import { createRovingTabIndex } from '@y14e/roving-tabindex';
|
|
4
4
|
|
|
5
5
|
// src/index.ts
|
|
@@ -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,11 +521,11 @@ 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
|
|
528
528
|
* @see {@link https://github.com/y14e/tabs}
|
|
529
529
|
*/
|
|
530
530
|
|
|
531
|
-
export { Tabs
|
|
531
|
+
export { Tabs };
|
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",
|
|
@@ -49,9 +49,12 @@
|
|
|
49
49
|
"engines": {
|
|
50
50
|
"node": ">=18"
|
|
51
51
|
},
|
|
52
|
+
"allowScripts": {
|
|
53
|
+
"esbuild": true
|
|
54
|
+
},
|
|
52
55
|
"dependencies": {
|
|
53
|
-
"@y14e/attribute-
|
|
54
|
-
"@y14e/button": "^1.0.
|
|
55
|
-
"@y14e/roving-tabindex": "^3.1.
|
|
56
|
+
"@y14e/attribute-utils": "^2.0.5",
|
|
57
|
+
"@y14e/button": "^1.0.8",
|
|
58
|
+
"@y14e/roving-tabindex": "^3.1.23"
|
|
56
59
|
}
|
|
57
60
|
}
|