@github/tab-container-element - npm Package Compare versions

Comparing version 4.7.0 to 4.8.0

dist/bundle.js

@@ -55,3 +55,13 @@ var __defProp = Object.defineProperty;
 var HTMLElement = globalThis.HTMLElement || null;
-var manualSlotsSupported = "assign" in (((_a = globalThis.HTMLSlotElement) === null || _a === void 0 ? void 0 : _a.prototype) || {});
+var assignSlotWithFallback = "assign" in (((_a = globalThis.HTMLSlotElement) === null || _a === void 0 ? void 0 : _a.prototype) || {}) ? (slot, ...elements) => {
+  slot.assign(...elements);
+} : (slot, ...elements) => {
+  const host = slot.getRootNode().host;
+  for (const element of host.querySelectorAll(`[slot="${slot.name}"]`)) {
+    element.removeAttribute("slot");
+  }
+  for (const element of elements) {
+    element.setAttribute("slot", slot.name);
+  }
+};
 var _TabContainerChangeEvent = class extends Event {
@@ -159,3 +169,3 @@ constructor(type, _a2) {
     tabListContainer.setAttribute("name", "tablist-wrapper");
-    const tabListTabWrapper = document.createElement("slot");
+    const tabListTabWrapper = document.createElement("div");
     tabListTabWrapper.setAttribute("part", "tablist-tab-wrapper");
@@ -170,3 +180,2 @@ tabListTabWrapper.setAttribute("name", "tablist-tab-wrapper");
     panelSlot.setAttribute("name", "panel");
-    panelSlot.setAttribute("role", "presentation");
     const beforeTabSlot = document.createElement("slot");
@@ -223,34 +232,11 @@ beforeTabSlot.setAttribute("part", "before-tabs");
       const tabListWrapper = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListWrapper_get);
-      const tabListTabWrapper = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListTabWrapper_get);
       const customTabList = this.querySelector("[role=tablist]");
       const customTabListWrapper = this.querySelector("[slot=tablist-wrapper]");
-      const customTabListTabWrapper = this.querySelector("[slot=tablist-tab-wrapper]");
       if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
-        if (manualSlotsSupported) {
-          tabListWrapper.assign(customTabListWrapper);
-        } else {
-          customTabListWrapper.setAttribute("slot", "tablist-wrapper");
-        }
-      } else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) {
-        if (manualSlotsSupported) {
-          tabListTabWrapper.assign(customTabListTabWrapper);
-        } else {
-          customTabListTabWrapper.setAttribute("slot", "tablist-tab-wrapper");
-        }
+        assignSlotWithFallback(tabListWrapper, customTabListWrapper);
       } else if (customTabList && customTabList.closest(this.tagName) === this) {
-        if (manualSlotsSupported) {
-          tabListSlot.assign(customTabList);
-        } else {
-          customTabList.setAttribute("slot", "tablist");
-        }
+        assignSlotWithFallback(tabListSlot, customTabList);
       } else {
         __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListTabWrapper_get).role = "tablist";
-        if (manualSlotsSupported) {
-          tabListSlot.assign(...[...this.children].filter((e) => e.matches("[role=tab]")));
-        } else {
-          for (const e of this.children) {
-            if (e.matches("[role=tab]"))
-              e.setAttribute("slot", "tablist");
-          }
-        }
+        assignSlotWithFallback(tabListSlot, ...[...this.children].filter((e) => e.matches("[role=tab]")));
       }
@@ -270,3 +256,3 @@ const tabList = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabList_get);
         for (const child of this.children) {
-          if (child.getAttribute("role") === "tab" || child.getAttribute("role") === "tablist" || child.getAttribute("slot") === "tablist-tab-wrapper") {
+          if (child.getAttribute("role") === "tab" || child.getAttribute("role") === "tablist") {
             autoSlotted = afterTabSlotted;
@@ -287,14 +273,5 @@ continue;
         }
-        if (manualSlotsSupported) {
-          __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_beforeTabsSlot_get).assign(...beforeSlotted);
-          __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterTabsSlot_get).assign(...afterTabSlotted);
-          __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterPanelsSlot_get).assign(...afterSlotted);
-        } else {
-          for (const el of beforeSlotted)
-            el.setAttribute("slot", "before-tabs");
-          for (const el of afterTabSlotted)
-            el.setAttribute("slot", "after-tabs");
-          for (const el of afterSlotted)
-            el.setAttribute("slot", "after-panels");
-        }
+        assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_beforeTabsSlot_get), ...beforeSlotted);
+        assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterTabsSlot_get), ...afterTabSlotted);
+        assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterPanelsSlot_get), ...afterSlotted);
       }
@@ -331,13 +308,6 @@ const defaultTab = this.defaultTabIndex;
       }
-      if (!manualSlotsSupported && panel.hasAttribute("slot")) {
-        panel.removeAttribute("slot");
-      }
     }
     selectedTab.setAttribute("aria-selected", "true");
     selectedTab.setAttribute("tabindex", "0");
-    if (manualSlotsSupported) {
-      __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_panelSlot_get).assign(selectedPanel);
-    } else {
-      selectedPanel.setAttribute("slot", "panel");
-    }
+    assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_panelSlot_get), selectedPanel);
     selectedPanel.hidden = false;
@@ -358,3 +328,3 @@ if (__classPrivateFieldGet(this, _TabContainerElement_setupComplete, "f")) {
 _TabContainerElement_onTabContainerChange = /* @__PURE__ */ new WeakMap(), _TabContainerElement_onTabContainerChanged = /* @__PURE__ */ new WeakMap(), _TabContainerElement_setupComplete = /* @__PURE__ */ new WeakMap(), _TabContainerElement_internals = /* @__PURE__ */ new WeakMap(), _TabContainerElement_instances = /* @__PURE__ */ new WeakSet(), _TabContainerElement_tabList_get = /* @__PURE__ */ __name(function _TabContainerElement_tabList_get2() {
-  const wrapper = this.querySelector("[slot=tablist-wrapper],[slot=tablist-tab-wrapper]");
+  const wrapper = this.querySelector("[slot=tablist-wrapper]");
   if ((wrapper === null || wrapper === void 0 ? void 0 : wrapper.closest(this.tagName)) === this) {
@@ -372,3 +342,3 @@ return wrapper.querySelector("[role=tablist]");
 }, "_TabContainerElement_tabListWrapper_get"), _TabContainerElement_tabListTabWrapper_get = /* @__PURE__ */ __name(function _TabContainerElement_tabListTabWrapper_get2() {
-  return this.shadowRoot.querySelector('slot[part="tablist-tab-wrapper"]');
+  return this.shadowRoot.querySelector('div[part="tablist-tab-wrapper"]');
 }, "_TabContainerElement_tabListTabWrapper_get"), _TabContainerElement_beforeTabsSlot_get = /* @__PURE__ */ __name(function _TabContainerElement_beforeTabsSlot_get2() {
@@ -375,0 +345,0 @@ return this.shadowRoot.querySelector('slot[part="before-tabs"]');

dist/tab-container-element.js

@@ -26,3 +26,15 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
 const HTMLElement = globalThis.HTMLElement || null;
-const manualSlotsSupported = 'assign' in (((_a = globalThis.HTMLSlotElement) === null || _a === void 0 ? void 0 : _a.prototype) || {});
+const assignSlotWithFallback = 'assign' in (((_a = globalThis.HTMLSlotElement) === null || _a === void 0 ? void 0 : _a.prototype) || {})
+    ? (slot, ...elements) => {
+        slot.assign(...elements);
+    }
+    : (slot, ...elements) => {
+        const host = slot.getRootNode().host;
+        for (const element of host.querySelectorAll(`[slot="${slot.name}"]`)) {
+            element.removeAttribute('slot');
+        }
+        for (const element of elements) {
+            element.setAttribute('slot', slot.name);
+        }
+    };
 export class TabContainerChangeEvent extends Event {
@@ -129,3 +141,3 @@ constructor(type, _a) {
         tabListContainer.setAttribute('name', 'tablist-wrapper');
-        const tabListTabWrapper = document.createElement('slot');
+        const tabListTabWrapper = document.createElement('div');
         tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper');
@@ -140,3 +152,2 @@ tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper');
         panelSlot.setAttribute('name', 'panel');
-        panelSlot.setAttribute('role', 'presentation');
         const beforeTabSlot = document.createElement('slot');
@@ -194,41 +205,13 @@ beforeTabSlot.setAttribute('part', 'before-tabs');
             const tabListWrapper = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListWrapper_get);
-            const tabListTabWrapper = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListTabWrapper_get);
             const customTabList = this.querySelector('[role=tablist]');
             const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]');
-            const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]');
             if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
-                if (manualSlotsSupported) {
-                    tabListWrapper.assign(customTabListWrapper);
-                }
-                else {
-                    customTabListWrapper.setAttribute('slot', 'tablist-wrapper');
-                }
+                assignSlotWithFallback(tabListWrapper, customTabListWrapper);
             }
-            else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) {
-                if (manualSlotsSupported) {
-                    tabListTabWrapper.assign(customTabListTabWrapper);
-                }
-                else {
-                    customTabListTabWrapper.setAttribute('slot', 'tablist-tab-wrapper');
-                }
-            }
             else if (customTabList && customTabList.closest(this.tagName) === this) {
-                if (manualSlotsSupported) {
-                    tabListSlot.assign(customTabList);
-                }
-                else {
-                    customTabList.setAttribute('slot', 'tablist');
-                }
+                assignSlotWithFallback(tabListSlot, customTabList);
             }
             else {
                 __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabListTabWrapper_get).role = 'tablist';
-                if (manualSlotsSupported) {
-                    tabListSlot.assign(...[...this.children].filter(e => e.matches('[role=tab]')));
-                }
-                else {
-                    for (const e of this.children) {
-                        if (e.matches('[role=tab]'))
-                            e.setAttribute('slot', 'tablist');
-                    }
-                }
+                assignSlotWithFallback(tabListSlot, ...[...this.children].filter(e => e.matches('[role=tab]')));
             }
@@ -248,5 +231,3 @@ const tabList = __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_tabList_get);
                 for (const child of this.children) {
-                    if (child.getAttribute('role') === 'tab' ||
-                        child.getAttribute('role') === 'tablist' ||
-                        child.getAttribute('slot') === 'tablist-tab-wrapper') {
+                    if (child.getAttribute('role') === 'tab' || child.getAttribute('role') === 'tablist') {
                         autoSlotted = afterTabSlotted;
@@ -269,15 +250,5 @@ continue;
                 }
-                if (manualSlotsSupported) {
-                    __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_beforeTabsSlot_get).assign(...beforeSlotted);
-                    __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterTabsSlot_get).assign(...afterTabSlotted);
-                    __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterPanelsSlot_get).assign(...afterSlotted);
-                }
-                else {
-                    for (const el of beforeSlotted)
-                        el.setAttribute('slot', 'before-tabs');
-                    for (const el of afterTabSlotted)
-                        el.setAttribute('slot', 'after-tabs');
-                    for (const el of afterSlotted)
-                        el.setAttribute('slot', 'after-panels');
-                }
+                assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_beforeTabsSlot_get), ...beforeSlotted);
+                assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterTabsSlot_get), ...afterTabSlotted);
+                assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_afterPanelsSlot_get), ...afterSlotted);
             }
@@ -314,14 +285,6 @@ const defaultTab = this.defaultTabIndex;
             }
-            if (!manualSlotsSupported && panel.hasAttribute('slot')) {
-                panel.removeAttribute('slot');
-            }
         }
         selectedTab.setAttribute('aria-selected', 'true');
         selectedTab.setAttribute('tabindex', '0');
-        if (manualSlotsSupported) {
-            __classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_panelSlot_get).assign(selectedPanel);
-        }
-        else {
-            selectedPanel.setAttribute('slot', 'panel');
-        }
+        assignSlotWithFallback(__classPrivateFieldGet(this, _TabContainerElement_instances, "a", _TabContainerElement_panelSlot_get), selectedPanel);
         selectedPanel.hidden = false;
@@ -340,3 +303,3 @@ if (__classPrivateFieldGet(this, _TabContainerElement_setupComplete, "f")) {
 _TabContainerElement_onTabContainerChange = new WeakMap(), _TabContainerElement_onTabContainerChanged = new WeakMap(), _TabContainerElement_setupComplete = new WeakMap(), _TabContainerElement_internals = new WeakMap(), _TabContainerElement_instances = new WeakSet(), _TabContainerElement_tabList_get = function _TabContainerElement_tabList_get() {
-    const wrapper = this.querySelector('[slot=tablist-wrapper],[slot=tablist-tab-wrapper]');
+    const wrapper = this.querySelector('[slot=tablist-wrapper]');
     if ((wrapper === null || wrapper === void 0 ? void 0 : wrapper.closest(this.tagName)) === this) {
@@ -355,3 +318,3 @@ return wrapper.querySelector('[role=tablist]');
 }, _TabContainerElement_tabListTabWrapper_get = function _TabContainerElement_tabListTabWrapper_get() {
-    return this.shadowRoot.querySelector('slot[part="tablist-tab-wrapper"]');
+    return this.shadowRoot.querySelector('div[part="tablist-tab-wrapper"]');
 }, _TabContainerElement_beforeTabsSlot_get = function _TabContainerElement_beforeTabsSlot_get() {
@@ -358,0 +321,0 @@ return this.shadowRoot.querySelector('slot[part="before-tabs"]');

package.json

 {
   "name": "@github/tab-container-element",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "Tab container element",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -44,2 +44,3 @@ # <tab-container> element
 </tab-container>
+```
 
@@ -113,2 +114,3 @@ ### Events
 `<tab-container>` aims to simplify complex markup away in the ShadowDOM, so that the HTML you end up writing is overall less. However sometimes it can be useful to have _full_ control over the markup. Each of the `::part` selectors are also `<slot>`s, this means you can take any part and slot it, overriding the built-in ShadowDOM.
+
 #### Unmanaged `tablist`
@@ -153,2 +155,3 @@
 ```
+
 #### Unmanaged `tablist-wrapper`
@@ -155,0 +158,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

199

increased by1.53%

Worsened metrics

Total package byte prevSize

58612

decreased by-4.79%

Lines of code

882

decreased by-7.06%

No dependency changes