@y14e/tabs 2.0.6 → 2.0.7

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 (8) hide show
  1. package/README.md +3 -3
  2. package/dist/index.bundle.cjs +16 -16
  3. package/dist/index.bundle.js +16 -16
  4. package/dist/index.cjs +16 -16
  5. package/dist/index.d.cts +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +16 -16
  8. package/package.json +1 -1
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.6';
16
+ import Tabs from 'https://esm.sh/@y14e/tabs@2.0.7';
17
17
  // or
18
- import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.6/+esm';
18
+ import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.7/+esm';
19
19
  // or
20
- import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.6';
20
+ import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.7';
21
21
  ```
22
22
 
23
23
  ## Usage
package/dist/index.bundle.cjs CHANGED
@@ -719,7 +719,6 @@ var Tabs = class _Tabs {
719
719
  this.#rootElement.setAttribute("data-tabs-animating", "");
720
720
  const { style } = this.#contentElement;
721
721
  style.setProperty("overflow", "clip");
722
- style.setProperty("position", "relative");
723
722
  const { crossFade, fade } = this.#settings.animation.content;
724
723
  const panel = this.#bindings.get(tab)?.panel;
725
724
  if (!panel) {
@@ -729,11 +728,8 @@ var Tabs = class _Tabs {
729
728
  const { style: style2 } = p;
730
729
  if (fade) {
731
730
  style2.setProperty("content-visibility", "visible");
732
- style2.setProperty("display", "block");
733
731
  style2.setProperty("opacity", p.hidden ? "0" : "1");
734
732
  }
735
- style2.setProperty("inline-size", "100%");
736
- style2.setProperty("position", "absolute");
737
733
  p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
738
734
  });
739
735
  this.#panelElements.forEach((p, i) => {
@@ -860,6 +856,7 @@ var Tabs = class _Tabs {
860
856
  ...this.#indicatorElements,
861
857
  ...this.#panelElements
862
858
  ]);
859
+ this.#contentElement && restoreAttributes([this.#contentElement]);
863
860
  this.#listElements.length = 0;
864
861
  this.#tabElements.length = 0;
865
862
  this.#contentElement = null;
@@ -881,11 +878,13 @@ var Tabs = class _Tabs {
881
878
  "tabindex"
882
879
  ]);
883
880
  saveAttributes(this.#indicatorElements, ["style"]);
881
+ this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
884
882
  saveAttributes(this.#panelElements, [
885
883
  "aria-controls",
886
884
  "aria-labelledby",
887
885
  "id",
888
886
  "role",
887
+ "style",
889
888
  "tabindex"
890
889
  ]);
891
890
  this.#eventController = new AbortController();
@@ -917,13 +916,20 @@ var Tabs = class _Tabs {
917
916
  });
918
917
  this.#indicatorElements.forEach((indicator) => {
919
918
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
920
- const { style } = indicator;
921
- style.setProperty("display", "block");
922
- style.setProperty("position", "absolute");
919
+ const { style: style2 } = indicator;
920
+ style2.setProperty("display", "block");
921
+ style2.setProperty("position", "absolute");
923
922
  this.#indicators.push(new TabsIndicator(indicator, this.#settings));
924
923
  });
924
+ if (!this.#contentElement) {
925
+ return;
926
+ }
927
+ const { style } = this.#contentElement;
928
+ style.setProperty("align-items", "start");
929
+ style.setProperty("display", "grid");
925
930
  this.#panelElements.forEach((panel) => {
926
931
  panel.setAttribute("role", "tabpanel");
932
+ panel.style.setProperty("grid-area", "1 / 1");
927
933
  !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
928
934
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
929
935
  signal
@@ -961,17 +967,11 @@ var Tabs = class _Tabs {
961
967
  this.#isAvoidedTab(tab) && tab.blur();
962
968
  };
963
969
  #onContentAnimationFinish() {
964
- ["block-size", "overflow", "position"].forEach((name) => {
970
+ ["block-size", "overflow"].forEach((name) => {
965
971
  this.#contentElement?.style.removeProperty(name);
966
972
  });
967
973
  this.#panelElements.forEach((panel) => {
968
- [
969
- "content-visibility",
970
- "display",
971
- "inline-size",
972
- "opacity",
973
- "position"
974
- ].forEach((name) => {
974
+ ["content-visibility", "opacity"].forEach((name) => {
975
975
  panel.style.removeProperty(name);
976
976
  });
977
977
  });
@@ -1098,7 +1098,7 @@ var TabsIndicator = class {
1098
1098
  * Tabs
1099
1099
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1100
1100
  *
1101
- * @version 2.0.6
1101
+ * @version 2.0.7
1102
1102
  * @author Yusuke Kamiyamane
1103
1103
  * @license MIT
1104
1104
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.bundle.js CHANGED
@@ -717,7 +717,6 @@ var Tabs = class _Tabs {
717
717
  this.#rootElement.setAttribute("data-tabs-animating", "");
718
718
  const { style } = this.#contentElement;
719
719
  style.setProperty("overflow", "clip");
720
- style.setProperty("position", "relative");
721
720
  const { crossFade, fade } = this.#settings.animation.content;
722
721
  const panel = this.#bindings.get(tab)?.panel;
723
722
  if (!panel) {
@@ -727,11 +726,8 @@ var Tabs = class _Tabs {
727
726
  const { style: style2 } = p;
728
727
  if (fade) {
729
728
  style2.setProperty("content-visibility", "visible");
730
- style2.setProperty("display", "block");
731
729
  style2.setProperty("opacity", p.hidden ? "0" : "1");
732
730
  }
733
- style2.setProperty("inline-size", "100%");
734
- style2.setProperty("position", "absolute");
735
731
  p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
736
732
  });
737
733
  this.#panelElements.forEach((p, i) => {
@@ -858,6 +854,7 @@ var Tabs = class _Tabs {
858
854
  ...this.#indicatorElements,
859
855
  ...this.#panelElements
860
856
  ]);
857
+ this.#contentElement && restoreAttributes([this.#contentElement]);
861
858
  this.#listElements.length = 0;
862
859
  this.#tabElements.length = 0;
863
860
  this.#contentElement = null;
@@ -879,11 +876,13 @@ var Tabs = class _Tabs {
879
876
  "tabindex"
880
877
  ]);
881
878
  saveAttributes(this.#indicatorElements, ["style"]);
879
+ this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
882
880
  saveAttributes(this.#panelElements, [
883
881
  "aria-controls",
884
882
  "aria-labelledby",
885
883
  "id",
886
884
  "role",
885
+ "style",
887
886
  "tabindex"
888
887
  ]);
889
888
  this.#eventController = new AbortController();
@@ -915,13 +914,20 @@ var Tabs = class _Tabs {
915
914
  });
916
915
  this.#indicatorElements.forEach((indicator) => {
917
916
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
918
- const { style } = indicator;
919
- style.setProperty("display", "block");
920
- style.setProperty("position", "absolute");
917
+ const { style: style2 } = indicator;
918
+ style2.setProperty("display", "block");
919
+ style2.setProperty("position", "absolute");
921
920
  this.#indicators.push(new TabsIndicator(indicator, this.#settings));
922
921
  });
922
+ if (!this.#contentElement) {
923
+ return;
924
+ }
925
+ const { style } = this.#contentElement;
926
+ style.setProperty("align-items", "start");
927
+ style.setProperty("display", "grid");
923
928
  this.#panelElements.forEach((panel) => {
924
929
  panel.setAttribute("role", "tabpanel");
930
+ panel.style.setProperty("grid-area", "1 / 1");
925
931
  !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
926
932
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
927
933
  signal
@@ -959,17 +965,11 @@ var Tabs = class _Tabs {
959
965
  this.#isAvoidedTab(tab) && tab.blur();
960
966
  };
961
967
  #onContentAnimationFinish() {
962
- ["block-size", "overflow", "position"].forEach((name) => {
968
+ ["block-size", "overflow"].forEach((name) => {
963
969
  this.#contentElement?.style.removeProperty(name);
964
970
  });
965
971
  this.#panelElements.forEach((panel) => {
966
- [
967
- "content-visibility",
968
- "display",
969
- "inline-size",
970
- "opacity",
971
- "position"
972
- ].forEach((name) => {
972
+ ["content-visibility", "opacity"].forEach((name) => {
973
973
  panel.style.removeProperty(name);
974
974
  });
975
975
  });
@@ -1096,7 +1096,7 @@ var TabsIndicator = class {
1096
1096
  * Tabs
1097
1097
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1098
1098
  *
1099
- * @version 2.0.6
1099
+ * @version 2.0.7
1100
1100
  * @author Yusuke Kamiyamane
1101
1101
  * @license MIT
1102
1102
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.cjs CHANGED
@@ -148,7 +148,6 @@ var Tabs = class _Tabs {
148
148
  this.#rootElement.setAttribute("data-tabs-animating", "");
149
149
  const { style } = this.#contentElement;
150
150
  style.setProperty("overflow", "clip");
151
- style.setProperty("position", "relative");
152
151
  const { crossFade, fade } = this.#settings.animation.content;
153
152
  const panel = this.#bindings.get(tab)?.panel;
154
153
  if (!panel) {
@@ -158,11 +157,8 @@ var Tabs = class _Tabs {
158
157
  const { style: style2 } = p;
159
158
  if (fade) {
160
159
  style2.setProperty("content-visibility", "visible");
161
- style2.setProperty("display", "block");
162
160
  style2.setProperty("opacity", p.hidden ? "0" : "1");
163
161
  }
164
- style2.setProperty("inline-size", "100%");
165
- style2.setProperty("position", "absolute");
166
162
  p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
167
163
  });
168
164
  this.#panelElements.forEach((p, i) => {
@@ -289,6 +285,7 @@ var Tabs = class _Tabs {
289
285
  ...this.#indicatorElements,
290
286
  ...this.#panelElements
291
287
  ]);
288
+ this.#contentElement && attributesUtils.restoreAttributes([this.#contentElement]);
292
289
  this.#listElements.length = 0;
293
290
  this.#tabElements.length = 0;
294
291
  this.#contentElement = null;
@@ -310,11 +307,13 @@ var Tabs = class _Tabs {
310
307
  "tabindex"
311
308
  ]);
312
309
  attributesUtils.saveAttributes(this.#indicatorElements, ["style"]);
310
+ this.#contentElement && attributesUtils.saveAttributes([this.#contentElement], ["style"]);
313
311
  attributesUtils.saveAttributes(this.#panelElements, [
314
312
  "aria-controls",
315
313
  "aria-labelledby",
316
314
  "id",
317
315
  "role",
316
+ "style",
318
317
  "tabindex"
319
318
  ]);
320
319
  this.#eventController = new AbortController();
@@ -346,13 +345,20 @@ var Tabs = class _Tabs {
346
345
  });
347
346
  this.#indicatorElements.forEach((indicator) => {
348
347
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
349
- const { style } = indicator;
350
- style.setProperty("display", "block");
351
- style.setProperty("position", "absolute");
348
+ const { style: style2 } = indicator;
349
+ style2.setProperty("display", "block");
350
+ style2.setProperty("position", "absolute");
352
351
  this.#indicators.push(new TabsIndicator(indicator, this.#settings));
353
352
  });
353
+ if (!this.#contentElement) {
354
+ return;
355
+ }
356
+ const { style } = this.#contentElement;
357
+ style.setProperty("align-items", "start");
358
+ style.setProperty("display", "grid");
354
359
  this.#panelElements.forEach((panel) => {
355
360
  panel.setAttribute("role", "tabpanel");
361
+ panel.style.setProperty("grid-area", "1 / 1");
356
362
  !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
357
363
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
358
364
  signal
@@ -390,17 +396,11 @@ var Tabs = class _Tabs {
390
396
  this.#isAvoidedTab(tab) && tab.blur();
391
397
  };
392
398
  #onContentAnimationFinish() {
393
- ["block-size", "overflow", "position"].forEach((name) => {
399
+ ["block-size", "overflow"].forEach((name) => {
394
400
  this.#contentElement?.style.removeProperty(name);
395
401
  });
396
402
  this.#panelElements.forEach((panel) => {
397
- [
398
- "content-visibility",
399
- "display",
400
- "inline-size",
401
- "opacity",
402
- "position"
403
- ].forEach((name) => {
403
+ ["content-visibility", "opacity"].forEach((name) => {
404
404
  panel.style.removeProperty(name);
405
405
  });
406
406
  });
@@ -527,7 +527,7 @@ var TabsIndicator = class {
527
527
  * Tabs
528
528
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
529
529
  *
530
- * @version 2.0.6
530
+ * @version 2.0.7
531
531
  * @author Yusuke Kamiyamane
532
532
  * @license MIT
533
533
  * @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 2.0.6
5
+ * @version 2.0.7
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 2.0.6
5
+ * @version 2.0.7
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.js CHANGED
@@ -142,7 +142,6 @@ var Tabs = class _Tabs {
142
142
  this.#rootElement.setAttribute("data-tabs-animating", "");
143
143
  const { style } = this.#contentElement;
144
144
  style.setProperty("overflow", "clip");
145
- style.setProperty("position", "relative");
146
145
  const { crossFade, fade } = this.#settings.animation.content;
147
146
  const panel = this.#bindings.get(tab)?.panel;
148
147
  if (!panel) {
@@ -152,11 +151,8 @@ var Tabs = class _Tabs {
152
151
  const { style: style2 } = p;
153
152
  if (fade) {
154
153
  style2.setProperty("content-visibility", "visible");
155
- style2.setProperty("display", "block");
156
154
  style2.setProperty("opacity", p.hidden ? "0" : "1");
157
155
  }
158
- style2.setProperty("inline-size", "100%");
159
- style2.setProperty("position", "absolute");
160
156
  p === panel && !this.#hasFocusable(p) ? p.setAttribute("tabindex", "0") : p.removeAttribute("tabindex");
161
157
  });
162
158
  this.#panelElements.forEach((p, i) => {
@@ -283,6 +279,7 @@ var Tabs = class _Tabs {
283
279
  ...this.#indicatorElements,
284
280
  ...this.#panelElements
285
281
  ]);
282
+ this.#contentElement && restoreAttributes([this.#contentElement]);
286
283
  this.#listElements.length = 0;
287
284
  this.#tabElements.length = 0;
288
285
  this.#contentElement = null;
@@ -304,11 +301,13 @@ var Tabs = class _Tabs {
304
301
  "tabindex"
305
302
  ]);
306
303
  saveAttributes(this.#indicatorElements, ["style"]);
304
+ this.#contentElement && saveAttributes([this.#contentElement], ["style"]);
307
305
  saveAttributes(this.#panelElements, [
308
306
  "aria-controls",
309
307
  "aria-labelledby",
310
308
  "id",
311
309
  "role",
310
+ "style",
312
311
  "tabindex"
313
312
  ]);
314
313
  this.#eventController = new AbortController();
@@ -340,13 +339,20 @@ var Tabs = class _Tabs {
340
339
  });
341
340
  this.#indicatorElements.forEach((indicator) => {
342
341
  indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
343
- const { style } = indicator;
344
- style.setProperty("display", "block");
345
- style.setProperty("position", "absolute");
342
+ const { style: style2 } = indicator;
343
+ style2.setProperty("display", "block");
344
+ style2.setProperty("position", "absolute");
346
345
  this.#indicators.push(new TabsIndicator(indicator, this.#settings));
347
346
  });
347
+ if (!this.#contentElement) {
348
+ return;
349
+ }
350
+ const { style } = this.#contentElement;
351
+ style.setProperty("align-items", "start");
352
+ style.setProperty("display", "grid");
348
353
  this.#panelElements.forEach((panel) => {
349
354
  panel.setAttribute("role", "tabpanel");
355
+ panel.style.setProperty("grid-area", "1 / 1");
350
356
  !panel.hasAttribute("hidden") && !this.#hasFocusable(panel) && panel.setAttribute("tabindex", "0");
351
357
  panel.addEventListener("beforematch", this.#onPanelBeforeMatch, {
352
358
  signal
@@ -384,17 +390,11 @@ var Tabs = class _Tabs {
384
390
  this.#isAvoidedTab(tab) && tab.blur();
385
391
  };
386
392
  #onContentAnimationFinish() {
387
- ["block-size", "overflow", "position"].forEach((name) => {
393
+ ["block-size", "overflow"].forEach((name) => {
388
394
  this.#contentElement?.style.removeProperty(name);
389
395
  });
390
396
  this.#panelElements.forEach((panel) => {
391
- [
392
- "content-visibility",
393
- "display",
394
- "inline-size",
395
- "opacity",
396
- "position"
397
- ].forEach((name) => {
397
+ ["content-visibility", "opacity"].forEach((name) => {
398
398
  panel.style.removeProperty(name);
399
399
  });
400
400
  });
@@ -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.6
524
+ * @version 2.0.7
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.6",
3
+ "version": "2.0.7",
4
4
  "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",