@u-elements/u-tabs 0.0.0 → 0.0.1

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 (5) hide show
  1. package/dist/u-tabs.cjs +22 -11
  2. package/dist/u-tabs.d.cts +4 -1
  3. package/dist/u-tabs.d.ts +4 -1
  4. package/dist/u-tabs.js +22 -11
  5. package/package.json +1 -1
package/dist/u-tabs.cjs CHANGED
@@ -15,11 +15,11 @@ var bind = (element, rest, action) => rest[0].split(",").forEach((type) => {
15
15
  });
16
16
  var on = (element, ...rest) => bind(element, rest, "add");
17
17
  var off = (element, ...rest) => bind(element, rest, "remove");
18
- var style = (element, css) => {
19
- const shadow = element.attachShadow({ mode: "open" });
20
- shadow.appendChild(document.createElement("style")).textContent = css;
21
- shadow.appendChild(document.createElement("slot"));
22
- };
18
+ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).append(
19
+ createElement("slot"),
20
+ // Unnamed slot does automatically render all top element nodes
21
+ createElement("style", { textContent: css })
22
+ );
23
23
  function attr(element, name, value) {
24
24
  if (element instanceof Element) {
25
25
  if (typeof name === "object")
@@ -41,16 +41,18 @@ var asButton = (event) => {
41
41
  return isClick;
42
42
  };
43
43
  var getRoot = (node) => node.getRootNode();
44
- var id = Date.now();
44
+ var id = 0;
45
45
  var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 0;
46
+ var createElement = (tagName, props) => Object.assign(document.createElement(tagName), props);
46
47
  var customElements = {
47
48
  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
48
49
  };
49
50
 
50
51
  // u-tabs.ts
51
52
  var UHTMLTabsElement = class extends UHTMLElement {
52
- connectedCallback() {
53
- style(this, DISPLAY_BLOCK);
53
+ constructor() {
54
+ super();
55
+ attachStyle(this, DISPLAY_BLOCK);
54
56
  }
55
57
  get tabList() {
56
58
  return queryWithoutNested("u-tablist", this)[0] || null;
@@ -69,8 +71,11 @@ var UHTMLTabsElement = class extends UHTMLElement {
69
71
  }
70
72
  };
71
73
  var UHTMLTabListElement = class extends UHTMLElement {
74
+ constructor() {
75
+ super();
76
+ attachStyle(this, DISPLAY_BLOCK);
77
+ }
72
78
  connectedCallback() {
73
- style(this, ":host(:not([hidden])) { display: flex; flex-wrap: wrap }");
74
79
  attr(this, "role", "tablist");
75
80
  on(this, "click,keydown", this);
76
81
  }
@@ -109,8 +114,11 @@ var UHTMLTabElement = class extends UHTMLElement {
109
114
  static get observedAttributes() {
110
115
  return ["id", ARIA_SELECTED, ARIA_CONTROLS];
111
116
  }
117
+ constructor() {
118
+ super();
119
+ attachStyle(this, `:host(:not([hidden])) { cursor: pointer; display: inline-block }`);
120
+ }
112
121
  connectedCallback() {
113
- style(this, `${DISPLAY_BLOCK}:host { cursor: pointer }`);
114
122
  this.selected = !!this.selected;
115
123
  }
116
124
  attributeChangedCallback(_name, prev, next) {
@@ -162,8 +170,11 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
162
170
  static get observedAttributes() {
163
171
  return ["id"];
164
172
  }
173
+ constructor() {
174
+ super();
175
+ attachStyle(this, DISPLAY_BLOCK);
176
+ }
165
177
  connectedCallback() {
166
- style(this, DISPLAY_BLOCK);
167
178
  attr(this, "role", "tabpanel");
168
179
  this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
169
180
  }
package/dist/u-tabs.d.cts CHANGED
@@ -16,7 +16,7 @@ declare global {
16
16
  * No MDN reference available.
17
17
  */
18
18
  declare class UHTMLTabsElement extends UHTMLElement {
19
- connectedCallback(): void;
19
+ constructor();
20
20
  get tabList(): UHTMLTabListElement | null;
21
21
  get selectedIndex(): number;
22
22
  set selectedIndex(index: number);
@@ -28,6 +28,7 @@ declare class UHTMLTabsElement extends UHTMLElement {
28
28
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
29
29
  */
30
30
  declare class UHTMLTabListElement extends UHTMLElement {
31
+ constructor();
31
32
  connectedCallback(): void;
32
33
  disconnectedCallback(): void;
33
34
  handleEvent(event: Event): void;
@@ -39,6 +40,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
39
40
  */
40
41
  declare class UHTMLTabElement extends UHTMLElement {
41
42
  static get observedAttributes(): string[];
43
+ constructor();
42
44
  connectedCallback(): void;
43
45
  attributeChangedCallback(_name: string, prev: string, next: string): void;
44
46
  get tabsElement(): UHTMLTabsElement | null;
@@ -55,6 +57,7 @@ declare class UHTMLTabElement extends UHTMLElement {
55
57
  */
56
58
  declare class UHTMLTabPanelElement extends UHTMLElement {
57
59
  static get observedAttributes(): string[];
60
+ constructor();
58
61
  connectedCallback(): void;
59
62
  attributeChangedCallback(_name: string, prev: string, next: string): void;
60
63
  get tabsElement(): UHTMLTabsElement | null;
package/dist/u-tabs.d.ts CHANGED
@@ -16,7 +16,7 @@ declare global {
16
16
  * No MDN reference available.
17
17
  */
18
18
  declare class UHTMLTabsElement extends UHTMLElement {
19
- connectedCallback(): void;
19
+ constructor();
20
20
  get tabList(): UHTMLTabListElement | null;
21
21
  get selectedIndex(): number;
22
22
  set selectedIndex(index: number);
@@ -28,6 +28,7 @@ declare class UHTMLTabsElement extends UHTMLElement {
28
28
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
29
29
  */
30
30
  declare class UHTMLTabListElement extends UHTMLElement {
31
+ constructor();
31
32
  connectedCallback(): void;
32
33
  disconnectedCallback(): void;
33
34
  handleEvent(event: Event): void;
@@ -39,6 +40,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
39
40
  */
40
41
  declare class UHTMLTabElement extends UHTMLElement {
41
42
  static get observedAttributes(): string[];
43
+ constructor();
42
44
  connectedCallback(): void;
43
45
  attributeChangedCallback(_name: string, prev: string, next: string): void;
44
46
  get tabsElement(): UHTMLTabsElement | null;
@@ -55,6 +57,7 @@ declare class UHTMLTabElement extends UHTMLElement {
55
57
  */
56
58
  declare class UHTMLTabPanelElement extends UHTMLElement {
57
59
  static get observedAttributes(): string[];
60
+ constructor();
58
61
  connectedCallback(): void;
59
62
  attributeChangedCallback(_name: string, prev: string, next: string): void;
60
63
  get tabsElement(): UHTMLTabsElement | null;
package/dist/u-tabs.js CHANGED
@@ -13,11 +13,11 @@ var bind = (element, rest, action) => rest[0].split(",").forEach((type) => {
13
13
  });
14
14
  var on = (element, ...rest) => bind(element, rest, "add");
15
15
  var off = (element, ...rest) => bind(element, rest, "remove");
16
- var style = (element, css) => {
17
- const shadow = element.attachShadow({ mode: "open" });
18
- shadow.appendChild(document.createElement("style")).textContent = css;
19
- shadow.appendChild(document.createElement("slot"));
20
- };
16
+ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).append(
17
+ createElement("slot"),
18
+ // Unnamed slot does automatically render all top element nodes
19
+ createElement("style", { textContent: css })
20
+ );
21
21
  function attr(element, name, value) {
22
22
  if (element instanceof Element) {
23
23
  if (typeof name === "object")
@@ -39,16 +39,18 @@ var asButton = (event) => {
39
39
  return isClick;
40
40
  };
41
41
  var getRoot = (node) => node.getRootNode();
42
- var id = Date.now();
42
+ var id = 0;
43
43
  var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 0;
44
+ var createElement = (tagName, props) => Object.assign(document.createElement(tagName), props);
44
45
  var customElements = {
45
46
  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
46
47
  };
47
48
 
48
49
  // u-tabs.ts
49
50
  var UHTMLTabsElement = class extends UHTMLElement {
50
- connectedCallback() {
51
- style(this, DISPLAY_BLOCK);
51
+ constructor() {
52
+ super();
53
+ attachStyle(this, DISPLAY_BLOCK);
52
54
  }
53
55
  get tabList() {
54
56
  return queryWithoutNested("u-tablist", this)[0] || null;
@@ -67,8 +69,11 @@ var UHTMLTabsElement = class extends UHTMLElement {
67
69
  }
68
70
  };
69
71
  var UHTMLTabListElement = class extends UHTMLElement {
72
+ constructor() {
73
+ super();
74
+ attachStyle(this, DISPLAY_BLOCK);
75
+ }
70
76
  connectedCallback() {
71
- style(this, ":host(:not([hidden])) { display: flex; flex-wrap: wrap }");
72
77
  attr(this, "role", "tablist");
73
78
  on(this, "click,keydown", this);
74
79
  }
@@ -107,8 +112,11 @@ var UHTMLTabElement = class extends UHTMLElement {
107
112
  static get observedAttributes() {
108
113
  return ["id", ARIA_SELECTED, ARIA_CONTROLS];
109
114
  }
115
+ constructor() {
116
+ super();
117
+ attachStyle(this, `:host(:not([hidden])) { cursor: pointer; display: inline-block }`);
118
+ }
110
119
  connectedCallback() {
111
- style(this, `${DISPLAY_BLOCK}:host { cursor: pointer }`);
112
120
  this.selected = !!this.selected;
113
121
  }
114
122
  attributeChangedCallback(_name, prev, next) {
@@ -160,8 +168,11 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
160
168
  static get observedAttributes() {
161
169
  return ["id"];
162
170
  }
171
+ constructor() {
172
+ super();
173
+ attachStyle(this, DISPLAY_BLOCK);
174
+ }
163
175
  connectedCallback() {
164
- style(this, DISPLAY_BLOCK);
165
176
  attr(this, "role", "tabpanel");
166
177
  this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
167
178
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@u-elements/u-tabs",
3
- "version": "0.0.0",
3
+ "version": "0.0.1",
4
4
  "license": "MIT",
5
5
  "description": "HTML tags, just truly accessible",
6
6
  "homepage": "https://u-elements.github.io/u-elements/",