@umbraco-ui/uui-tabs 1.6.0 → 1.6.1

package/lib/index.js

@@ -235,10 +235,11 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _onResize, onResize_fn, _cleanupTabs, cleanupTabs_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
+var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _initialize, initialize_fn, _onResize, onResize_fn, _cleanupTabs, cleanupTabs_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _initialize);
     __privateAdd(this, _onResize);
     __privateAdd(this, _cleanupTabs);
     __privateAdd(this, _onSlotChange);
@@ -282,12 +283,7 @@ let UUITabGroupElement = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    demandCustomElement(this, "uui-button");
-    demandCustomElement(this, "uui-popover-container");
-    demandCustomElement(this, "uui-symbol-more");
-    __privateGet(this, _resizeObserver).observe(this);
-    if (!this.hasAttribute("role"))
-      this.setAttribute("role", "tablist");
+    __privateMethod(this, _initialize, initialize_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -328,6 +324,16 @@ _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
 _tabResizeObservers = new WeakMap();
 _breakPointCalculationInProgress = new WeakMap();
+_initialize = new WeakSet();
+initialize_fn = async function() {
+  demandCustomElement(this, "uui-button");
+  demandCustomElement(this, "uui-popover-container");
+  demandCustomElement(this, "uui-symbol-more");
+  if (!this.hasAttribute("role"))
+    this.setAttribute("role", "tablist");
+  await this.updateComplete;
+  __privateGet(this, _resizeObserver).observe(this._mainElement);
+};
 _onResize = new WeakSet();
 onResize_fn = function(entries) {
   const gapCSSVar = Number.parseFloat(
@@ -384,8 +390,8 @@ calculateBreakPoints_fn = async function() {
     childrenWidth += gap;
   }
   const tolerance = 2;
-  this.style.maxWidth = childrenWidth - gap + tolerance + "px";
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
+  this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
 };
 _setTabArray = new WeakSet();
 setTabArray_fn = function() {
@@ -439,12 +445,15 @@ isElementTabLike_fn = function(el) {
 UUITabGroupElement.styles = [
   css`
       :host {
-        width: 100%;
+        min-width: 0;
+        display: flex;
+        height: 100%;
       }
 
       #main {
         display: flex;
         justify-content: space-between;
+        overflow: hidden;
       }
 
       #grid {
@@ -526,6 +535,9 @@ __decorateClass([
 __decorateClass([
   query("#popover-container")
 ], UUITabGroupElement.prototype, "_popoverContainerElement", 2);
+__decorateClass([
+  query("#main")
+], UUITabGroupElement.prototype, "_mainElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,

package/lib/uui-tab-group.element.d.ts

@@ -12,6 +12,7 @@ export declare class UUITabGroupElement extends LitElement {
     #private;
     private _moreButtonElement;
     private _popoverContainerElement;
+    private _mainElement;
     private _slottedNodes?;
     /**
      * Set the flex direction of the content of the dropdown.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "b06aebbb67ff67c9611a19927ec3ef484edcb1cc"
+  "gitHead": "a4ae7535264c89cf346311d3d5ec5c888577e256"
 }