@u-elements/u-tabs 0.0.10 → 0.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.
Files changed (6) hide show
  1. package/dist/u-tabs.cjs +23 -9
  2. package/dist/u-tabs.d.cts +9 -1
  3. package/dist/u-tabs.d.ts +9 -1
  4. package/dist/u-tabs.js +16 -10
  5. package/dist/u-tabs.manifest.json +103 -0
  6. package/package.json +1 -1
package/dist/u-tabs.cjs CHANGED
@@ -24,7 +24,7 @@ var events = (action, element, rest) => {
24
24
  };
25
25
  var on = (element, ...rest) => events("add", element, rest);
26
26
  var off = (element, ...rest) => events("remove", element, rest);
27
- var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).append(
27
+ var attachStyle = (element, css) => element.shadowRoot || element.attachShadow({ mode: "open" }).append(
28
28
  createElement("slot"),
29
29
  // Unnamed slot does automatically render all top element nodes
30
30
  createElement("style", css)
@@ -70,14 +70,23 @@ var createElement = (tagName, text, attrs) => {
70
70
  var customElements = {
71
71
  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
72
72
  };
73
+ var declarativeShadowRoot = (style, slot = "<slot></slot>") => `<template shadowrootmode="open">${slot}<style>${style}</style></template>`;
73
74
 
74
75
  // u-tabs.ts
76
+ var UHTMLTabsStyle = DISPLAY_BLOCK;
77
+ var UHTMLTabListStyle = DISPLAY_BLOCK;
78
+ var UHTMLTabPanelStyle = DISPLAY_BLOCK;
79
+ var UHTMLTabStyle = ':host(:not([hidden])) { display: inline-block; cursor: pointer }:host([aria-disabled="true"]) { cursor: default }';
80
+ var UHTMLTabsShadowRoot = declarativeShadowRoot(UHTMLTabsStyle);
81
+ var UHTMLTabListShadowRoot = declarativeShadowRoot(UHTMLTabListStyle);
82
+ var UHTMLTabShadowRoot = declarativeShadowRoot(UHTMLTabStyle);
83
+ var UHTMLTabPanelShadowRoot = declarativeShadowRoot(UHTMLTabPanelStyle);
75
84
  var ARIA_CONTROLS = "aria-controls";
76
85
  var ARIA_SELECTED = "aria-selected";
77
86
  var UHTMLTabsElement = class extends UHTMLElement {
78
87
  constructor() {
79
88
  super();
80
- attachStyle(this, DISPLAY_BLOCK);
89
+ attachStyle(this, UHTMLTabsStyle);
81
90
  }
82
91
  get tabList() {
83
92
  return queryWithoutNested("u-tablist", this)[0] || null;
@@ -98,7 +107,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
98
107
  var UHTMLTabListElement = class extends UHTMLElement {
99
108
  constructor() {
100
109
  super();
101
- attachStyle(this, DISPLAY_BLOCK);
110
+ attachStyle(this, UHTMLTabListStyle);
102
111
  }
103
112
  connectedCallback() {
104
113
  attr(this, "role", "tablist");
@@ -161,10 +170,7 @@ var UHTMLTabElement = class extends UHTMLElement {
161
170
  }
162
171
  constructor() {
163
172
  super();
164
- attachStyle(
165
- this,
166
- ":host(:not([hidden])) { cursor: pointer; display: inline-block }"
167
- );
173
+ attachStyle(this, UHTMLTabStyle);
168
174
  }
169
175
  connectedCallback() {
170
176
  attr(this, "role", "tab");
@@ -216,7 +222,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
216
222
  }
217
223
  constructor() {
218
224
  super();
219
- attachStyle(this, DISPLAY_BLOCK);
225
+ attachStyle(this, UHTMLTabPanelStyle);
220
226
  }
221
227
  connectedCallback() {
222
228
  attr(this, "role", "tabpanel");
@@ -243,7 +249,7 @@ var getPanel = (tab, panel) => {
243
249
  return (el == null ? void 0 : el.nodeName) === "U-TABPANEL" ? el : null;
244
250
  };
245
251
  var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
246
- var setSelected = (tab) => tab && attr(tab, "aria-selected", "true");
252
+ var setSelected = (tab) => tab && attr(tab, "aria-disabled") !== "true" && attr(tab, "aria-selected", "true");
247
253
  var isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^="-"]') && el.matches(
248
254
  `[contenteditable],[controls],[href],[tabindex],input:not([type="hidden"]),select,textarea,button,summary,iframe`
249
255
  );
@@ -254,5 +260,13 @@ customElements.define("u-tabpanel", UHTMLTabPanelElement);
254
260
 
255
261
  exports.UHTMLTabElement = UHTMLTabElement;
256
262
  exports.UHTMLTabListElement = UHTMLTabListElement;
263
+ exports.UHTMLTabListShadowRoot = UHTMLTabListShadowRoot;
264
+ exports.UHTMLTabListStyle = UHTMLTabListStyle;
257
265
  exports.UHTMLTabPanelElement = UHTMLTabPanelElement;
266
+ exports.UHTMLTabPanelShadowRoot = UHTMLTabPanelShadowRoot;
267
+ exports.UHTMLTabPanelStyle = UHTMLTabPanelStyle;
268
+ exports.UHTMLTabShadowRoot = UHTMLTabShadowRoot;
269
+ exports.UHTMLTabStyle = UHTMLTabStyle;
258
270
  exports.UHTMLTabsElement = UHTMLTabsElement;
271
+ exports.UHTMLTabsShadowRoot = UHTMLTabsShadowRoot;
272
+ exports.UHTMLTabsStyle = UHTMLTabsStyle;
package/dist/u-tabs.d.cts CHANGED
@@ -11,6 +11,14 @@ declare global {
11
11
  "u-tabpanel": UHTMLTabPanelElement;
12
12
  }
13
13
  }
14
+ declare const UHTMLTabsStyle = ":host(:not([hidden])) { display: block }";
15
+ declare const UHTMLTabListStyle = ":host(:not([hidden])) { display: block }";
16
+ declare const UHTMLTabPanelStyle = ":host(:not([hidden])) { display: block }";
17
+ declare const UHTMLTabStyle = ":host(:not([hidden])) { display: inline-block; cursor: pointer }:host([aria-disabled=\"true\"]) { cursor: default }";
18
+ declare const UHTMLTabsShadowRoot: string;
19
+ declare const UHTMLTabListShadowRoot: string;
20
+ declare const UHTMLTabShadowRoot: string;
21
+ declare const UHTMLTabPanelShadowRoot: string;
14
22
  /**
15
23
  * The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.
16
24
  * No MDN reference available.
@@ -63,7 +71,7 @@ declare class UHTMLTabPanelElement extends UHTMLElement {
63
71
  get tabs(): NodeListOf<UHTMLTabElement>;
64
72
  }
65
73
 
66
- export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
74
+ export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabListShadowRoot, UHTMLTabListStyle, UHTMLTabPanelElement, UHTMLTabPanelShadowRoot, UHTMLTabPanelStyle, UHTMLTabShadowRoot, UHTMLTabStyle, UHTMLTabsElement, UHTMLTabsShadowRoot, UHTMLTabsStyle };
67
75
  import type * as PreactTypes from 'preact'
68
76
  import type * as ReactTypes from 'react'
69
77
  import type * as SvelteTypes from 'svelte/elements'
package/dist/u-tabs.d.ts CHANGED
@@ -11,6 +11,14 @@ declare global {
11
11
  "u-tabpanel": UHTMLTabPanelElement;
12
12
  }
13
13
  }
14
+ declare const UHTMLTabsStyle = ":host(:not([hidden])) { display: block }";
15
+ declare const UHTMLTabListStyle = ":host(:not([hidden])) { display: block }";
16
+ declare const UHTMLTabPanelStyle = ":host(:not([hidden])) { display: block }";
17
+ declare const UHTMLTabStyle = ":host(:not([hidden])) { display: inline-block; cursor: pointer }:host([aria-disabled=\"true\"]) { cursor: default }";
18
+ declare const UHTMLTabsShadowRoot: string;
19
+ declare const UHTMLTabListShadowRoot: string;
20
+ declare const UHTMLTabShadowRoot: string;
21
+ declare const UHTMLTabPanelShadowRoot: string;
14
22
  /**
15
23
  * The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.
16
24
  * No MDN reference available.
@@ -63,7 +71,7 @@ declare class UHTMLTabPanelElement extends UHTMLElement {
63
71
  get tabs(): NodeListOf<UHTMLTabElement>;
64
72
  }
65
73
 
66
- export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
74
+ export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabListShadowRoot, UHTMLTabListStyle, UHTMLTabPanelElement, UHTMLTabPanelShadowRoot, UHTMLTabPanelStyle, UHTMLTabShadowRoot, UHTMLTabStyle, UHTMLTabsElement, UHTMLTabsShadowRoot, UHTMLTabsStyle };
67
75
  import type * as PreactTypes from 'preact'
68
76
  import type * as ReactTypes from 'react'
69
77
  import type * as SvelteTypes from 'svelte/elements'
package/dist/u-tabs.js CHANGED
@@ -22,7 +22,7 @@ var events = (action, element, rest) => {
22
22
  };
23
23
  var on = (element, ...rest) => events("add", element, rest);
24
24
  var off = (element, ...rest) => events("remove", element, rest);
25
- var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).append(
25
+ var attachStyle = (element, css) => element.shadowRoot || element.attachShadow({ mode: "open" }).append(
26
26
  createElement("slot"),
27
27
  // Unnamed slot does automatically render all top element nodes
28
28
  createElement("style", css)
@@ -68,14 +68,23 @@ var createElement = (tagName, text, attrs) => {
68
68
  var customElements = {
69
69
  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
70
70
  };
71
+ var declarativeShadowRoot = (style, slot = "<slot></slot>") => `<template shadowrootmode="open">${slot}<style>${style}</style></template>`;
71
72
 
72
73
  // u-tabs.ts
74
+ var UHTMLTabsStyle = DISPLAY_BLOCK;
75
+ var UHTMLTabListStyle = DISPLAY_BLOCK;
76
+ var UHTMLTabPanelStyle = DISPLAY_BLOCK;
77
+ var UHTMLTabStyle = ':host(:not([hidden])) { display: inline-block; cursor: pointer }:host([aria-disabled="true"]) { cursor: default }';
78
+ var UHTMLTabsShadowRoot = declarativeShadowRoot(UHTMLTabsStyle);
79
+ var UHTMLTabListShadowRoot = declarativeShadowRoot(UHTMLTabListStyle);
80
+ var UHTMLTabShadowRoot = declarativeShadowRoot(UHTMLTabStyle);
81
+ var UHTMLTabPanelShadowRoot = declarativeShadowRoot(UHTMLTabPanelStyle);
73
82
  var ARIA_CONTROLS = "aria-controls";
74
83
  var ARIA_SELECTED = "aria-selected";
75
84
  var UHTMLTabsElement = class extends UHTMLElement {
76
85
  constructor() {
77
86
  super();
78
- attachStyle(this, DISPLAY_BLOCK);
87
+ attachStyle(this, UHTMLTabsStyle);
79
88
  }
80
89
  get tabList() {
81
90
  return queryWithoutNested("u-tablist", this)[0] || null;
@@ -96,7 +105,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
96
105
  var UHTMLTabListElement = class extends UHTMLElement {
97
106
  constructor() {
98
107
  super();
99
- attachStyle(this, DISPLAY_BLOCK);
108
+ attachStyle(this, UHTMLTabListStyle);
100
109
  }
101
110
  connectedCallback() {
102
111
  attr(this, "role", "tablist");
@@ -159,10 +168,7 @@ var UHTMLTabElement = class extends UHTMLElement {
159
168
  }
160
169
  constructor() {
161
170
  super();
162
- attachStyle(
163
- this,
164
- ":host(:not([hidden])) { cursor: pointer; display: inline-block }"
165
- );
171
+ attachStyle(this, UHTMLTabStyle);
166
172
  }
167
173
  connectedCallback() {
168
174
  attr(this, "role", "tab");
@@ -214,7 +220,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
214
220
  }
215
221
  constructor() {
216
222
  super();
217
- attachStyle(this, DISPLAY_BLOCK);
223
+ attachStyle(this, UHTMLTabPanelStyle);
218
224
  }
219
225
  connectedCallback() {
220
226
  attr(this, "role", "tabpanel");
@@ -241,7 +247,7 @@ var getPanel = (tab, panel) => {
241
247
  return (el == null ? void 0 : el.nodeName) === "U-TABPANEL" ? el : null;
242
248
  };
243
249
  var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
244
- var setSelected = (tab) => tab && attr(tab, "aria-selected", "true");
250
+ var setSelected = (tab) => tab && attr(tab, "aria-disabled") !== "true" && attr(tab, "aria-selected", "true");
245
251
  var isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^="-"]') && el.matches(
246
252
  `[contenteditable],[controls],[href],[tabindex],input:not([type="hidden"]),select,textarea,button,summary,iframe`
247
253
  );
@@ -250,4 +256,4 @@ customElements.define("u-tablist", UHTMLTabListElement);
250
256
  customElements.define("u-tab", UHTMLTabElement);
251
257
  customElements.define("u-tabpanel", UHTMLTabPanelElement);
252
258
 
253
- export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
259
+ export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabListShadowRoot, UHTMLTabListStyle, UHTMLTabPanelElement, UHTMLTabPanelShadowRoot, UHTMLTabPanelStyle, UHTMLTabShadowRoot, UHTMLTabStyle, UHTMLTabsElement, UHTMLTabsShadowRoot, UHTMLTabsStyle };
package/dist/u-tabs.manifest.json CHANGED
@@ -6,6 +6,45 @@
6
6
  "kind": "javascript-module",
7
7
  "path": "u-tabs.ts",
8
8
  "declarations": [
9
+ {
10
+ "kind": "variable",
11
+ "name": "UHTMLTabsStyle",
12
+ "default": "DISPLAY_BLOCK"
13
+ },
14
+ {
15
+ "kind": "variable",
16
+ "name": "UHTMLTabListStyle",
17
+ "default": "DISPLAY_BLOCK"
18
+ },
19
+ {
20
+ "kind": "variable",
21
+ "name": "UHTMLTabPanelStyle",
22
+ "default": "DISPLAY_BLOCK"
23
+ },
24
+ {
25
+ "kind": "variable",
26
+ "name": "UHTMLTabStyle",
27
+ "type": {
28
+ "text": "string"
29
+ },
30
+ "default": "':host(:not([hidden])) { display: inline-block; cursor: pointer }:host([aria-disabled=\"true\"]) { cursor: default }'"
31
+ },
32
+ {
33
+ "kind": "variable",
34
+ "name": "UHTMLTabsShadowRoot"
35
+ },
36
+ {
37
+ "kind": "variable",
38
+ "name": "UHTMLTabListShadowRoot"
39
+ },
40
+ {
41
+ "kind": "variable",
42
+ "name": "UHTMLTabShadowRoot"
43
+ },
44
+ {
45
+ "kind": "variable",
46
+ "name": "UHTMLTabPanelShadowRoot"
47
+ },
9
48
  {
10
49
  "kind": "class",
11
50
  "description": "The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.\nNo MDN reference available.",
@@ -193,6 +232,70 @@
193
232
  }
194
233
  ],
195
234
  "exports": [
235
+ {
236
+ "kind": "js",
237
+ "name": "UHTMLTabsStyle",
238
+ "declaration": {
239
+ "name": "UHTMLTabsStyle",
240
+ "module": "u-tabs.ts"
241
+ }
242
+ },
243
+ {
244
+ "kind": "js",
245
+ "name": "UHTMLTabListStyle",
246
+ "declaration": {
247
+ "name": "UHTMLTabListStyle",
248
+ "module": "u-tabs.ts"
249
+ }
250
+ },
251
+ {
252
+ "kind": "js",
253
+ "name": "UHTMLTabPanelStyle",
254
+ "declaration": {
255
+ "name": "UHTMLTabPanelStyle",
256
+ "module": "u-tabs.ts"
257
+ }
258
+ },
259
+ {
260
+ "kind": "js",
261
+ "name": "UHTMLTabStyle",
262
+ "declaration": {
263
+ "name": "UHTMLTabStyle",
264
+ "module": "u-tabs.ts"
265
+ }
266
+ },
267
+ {
268
+ "kind": "js",
269
+ "name": "UHTMLTabsShadowRoot",
270
+ "declaration": {
271
+ "name": "UHTMLTabsShadowRoot",
272
+ "module": "u-tabs.ts"
273
+ }
274
+ },
275
+ {
276
+ "kind": "js",
277
+ "name": "UHTMLTabListShadowRoot",
278
+ "declaration": {
279
+ "name": "UHTMLTabListShadowRoot",
280
+ "module": "u-tabs.ts"
281
+ }
282
+ },
283
+ {
284
+ "kind": "js",
285
+ "name": "UHTMLTabShadowRoot",
286
+ "declaration": {
287
+ "name": "UHTMLTabShadowRoot",
288
+ "module": "u-tabs.ts"
289
+ }
290
+ },
291
+ {
292
+ "kind": "js",
293
+ "name": "UHTMLTabPanelShadowRoot",
294
+ "declaration": {
295
+ "name": "UHTMLTabPanelShadowRoot",
296
+ "module": "u-tabs.ts"
297
+ }
298
+ },
196
299
  {
197
300
  "kind": "js",
198
301
  "name": "UHTMLTabsElement",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@u-elements/u-tabs",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "license": "MIT",
5
5
  "description": "HTML tags, just truly accessible",
6
6
  "homepage": "https://u-elements.github.io/u-elements/",