@umbraco-ui/uui-tabs 1.6.0-rc.1 → 1.6.0-rc.3

package/custom-elements.json

@@ -31,6 +31,24 @@
           "name": "",
           "description": "Default slot for the tab group"
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-tab-group-dropdown-tab-text",
+          "description": "Define the tab text color in the dropdown"
+        },
+        {
+          "name": "--uui-tab-group-dropdown-tab-text-hover",
+          "description": "Define the tab text hover color in the dropdown"
+        },
+        {
+          "name": "--uui-tab-group-dropdown-tab-text-active",
+          "description": "Define the tab text active color in the dropdown"
+        },
+        {
+          "name": "--uui-tab-group-dropdown-background",
+          "description": "Define the background color of the dropdown"
+        }
       ]
     },
     {
@@ -149,10 +167,6 @@
           "name": "--uui-tab-text-active",
           "description": "Define the tab text active color"
         },
-        {
-          "name": "--uui-tab-background",
-          "description": "Define the tab group background color"
-        },
         {
           "name": "--uui-tab-divider",
           "description": "Define the tab dividers color"
@@ -279,10 +293,6 @@
           "name": "--uui-tab-text-active",
           "description": "Define the tab text active color"
         },
-        {
-          "name": "--uui-tab-background",
-          "description": "Define the tab group background color"
-        },
         {
           "name": "--uui-tab-divider",
           "description": "Define the tab dividers color"

package/lib/index.js

@@ -108,6 +108,10 @@ UUITabElement.styles = [
           0 1px 2px rgba(0, 0, 0, 0.05);
       }
 
+      :host([active]) {
+        color: var(--uui-tab-text-active, unset);
+      }
+
       :host([active]) #button {
         cursor: default;
       }
@@ -233,7 +237,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _oldBreakpoint, _resizeObserver, _onResize, onResize_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _isElementTabLike, isElementTabLike_fn;
+var _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _onResize, onResize_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _isElementTabLike, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -248,7 +252,6 @@ let UUITabGroupElement = class extends LitElement {
     __privateAdd(this, _hiddenTabElements, []);
     __privateAdd(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _visibilityBreakpoints, []);
-    __privateAdd(this, _oldBreakpoint, 0);
     __privateAdd(this, _resizeObserver, new ResizeObserver(
       __privateMethod(this, _onResize, onResize_fn).bind(this)
     ));
@@ -300,7 +303,6 @@ let UUITabGroupElement = class extends LitElement {
       <uui-popover-container
         id="popover-container"
         popover
-        margin="10"
         placement="bottom-end">
         <div id="hidden-tabs-container">
           ${repeat(__privateGet(this, _hiddenTabElements), (el) => html`${el}`)}
@@ -313,7 +315,6 @@ _tabElements = new WeakMap();
 _hiddenTabElements = new WeakMap();
 _hiddenTabElementsMap = new WeakMap();
 _visibilityBreakpoints = new WeakMap();
-_oldBreakpoint = new WeakMap();
 _resizeObserver = new WeakMap();
 _onResize = new WeakSet();
 onResize_fn = function(entries) {
@@ -333,20 +334,9 @@ _onTabClicked = new WeakMap();
 _updateCollapsibleTabs = new WeakSet();
 updateCollapsibleTabs_fn = function(containerWidth) {
   const buttonWidth = this._moreButtonElement.offsetWidth;
-  if (__privateGet(this, _visibilityBreakpoints).slice(-1)[0] < containerWidth && __privateGet(this, _hiddenTabElements).length === 0)
+  const lastBreakpoint = __privateGet(this, _visibilityBreakpoints).slice(-1)[0];
+  if (lastBreakpoint < containerWidth && __privateGet(this, _hiddenTabElements).length === 0)
     return;
-  let newBreakpoint = Number.MAX_VALUE;
-  for (let i = __privateGet(this, _visibilityBreakpoints).length - 1; i > -1; i--) {
-    const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
-    const containerWidthButtonWidth = containerWidth - (i !== __privateGet(this, _visibilityBreakpoints).length - 1 ? buttonWidth : 0);
-    if (breakpoint < containerWidthButtonWidth) {
-      newBreakpoint = i;
-      break;
-    }
-  }
-  if (newBreakpoint === __privateGet(this, _oldBreakpoint))
-    return;
-  __privateSet(this, _oldBreakpoint, newBreakpoint);
   __privateGet(this, _hiddenTabElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onTabClicked));
   });
@@ -376,16 +366,23 @@ updateCollapsibleTabs_fn = function(containerWidth) {
       }
     }
   }
+  if (__privateGet(this, _hiddenTabElements).length === 0) {
+    this._popoverContainerElement.hidePopover();
+  }
   hasActiveTabInDropdown ? this._moreButtonElement.classList.add("active-inside") : this._moreButtonElement.classList.remove("active-inside");
   this.requestUpdate();
 };
 _calculateBreakPoints = new WeakSet();
-calculateBreakPoints_fn = function() {
+calculateBreakPoints_fn = async function() {
+  await this.updateComplete;
   let childrenWidth = 0;
   for (let i = 0; i < __privateGet(this, _tabElements).length; i++) {
+    __privateGet(this, _tabElements)[i].style.display = "";
     childrenWidth += __privateGet(this, _tabElements)[i].offsetWidth;
     __privateGet(this, _visibilityBreakpoints)[i] = childrenWidth;
   }
+  const tolerance = 2;
+  this.style.width = childrenWidth + tolerance + "px";
   __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
 };
 _setTabArray = new WeakSet();
@@ -401,11 +398,24 @@ UUITabGroupElement.styles = [
   css`
       :host {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         color: var(--uui-tab-text);
-        background: var(--uui-tab-background, none);
         height: 100%;
         min-height: 48px;
+        overflow: hidden;
+        text-wrap: nowrap;
+      }
+
+      #popover-container {
+        --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);
+        --uui-tab-text-hover: var(
+          --uui-tab-group-dropdown-tab-text-hover,
+          unset
+        );
+        --uui-tab-text-active: var(
+          --uui-tab-group-dropdown-tab-text-active,
+          unset
+        );
       }
 
       ::slotted(*:not(:last-of-type)) {
@@ -420,7 +430,10 @@ UUITabGroupElement.styles = [
         width: fit-content;
         display: flex;
         flex-direction: column;
-        background: var(--uui-color-surface,#fff);
+        background-color: var(
+          --uui-tab-group-dropdown-background,
+          var(--uui-color-surface,#fff)
+        );
         border-radius: var(--uui-border-radius,3px);
         box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));
         overflow: hidden;
@@ -430,8 +443,12 @@ UUITabGroupElement.styles = [
       }
 
       #more-button {
-        margin-left: auto;
         position: relative;
+
+        --uui-button-contrast: var(--uui-tab-text);
+        --uui-button-contrast-hover: var(--uui-tab-text-hover);
+        --uui-button-background-color: transparent;
+        --uui-button-background-color-hover: transparent;
       }
       #more-button::before {
         content: '';
@@ -454,6 +471,9 @@ UUITabGroupElement.styles = [
 __decorateClass([
   query("#more-button")
 ], UUITabGroupElement.prototype, "_moreButtonElement", 2);
+__decorateClass([
+  query("#popover-container")
+], UUITabGroupElement.prototype, "_popoverContainerElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,

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

@@ -5,10 +5,15 @@ import '@umbraco-ui/uui-symbol-more/lib';
 /**
  *  @element uui-tab-group
  *  @slot - Default slot for the tab group
+ * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown
+ * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown
+ * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown
+ * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown
  */
 export declare class UUITabGroupElement extends LitElement {
     #private;
     private _moreButtonElement;
+    private _popoverContainerElement;
     private _slottedNodes?;
     /**
      * Set the flex direction of the content of the dropdown.

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

@@ -10,7 +10,6 @@ declare const UUITabElement_base: (new (...args: any[]) => import("@umbraco-ui/u
  * @cssprop --uui-tab-text - Define the tab text color
  * @cssprop --uui-tab-text-hover - Define the tab text hover color
  * @cssprop --uui-tab-text-active - Define the tab text active color
- * @cssprop --uui-tab-background - Define the tab group background color
  * @cssprop --uui-tab-divider - Define the tab dividers color
  * @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0-rc.1",
+  "version": "1.6.0-rc.3",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,10 +30,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.1",
-    "@umbraco-ui/uui-button": "1.6.0-rc.1",
-    "@umbraco-ui/uui-popover-container": "1.6.0-rc.1",
-    "@umbraco-ui/uui-symbol-more": "1.6.0-rc.1"
+    "@umbraco-ui/uui-base": "1.6.0-rc.3",
+    "@umbraco-ui/uui-button": "1.6.0-rc.3",
+    "@umbraco-ui/uui-popover-container": "1.6.0-rc.3",
+    "@umbraco-ui/uui-symbol-more": "1.6.0-rc.3"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "9708ccbac569560b716431080c782c5531c66ea5"
+  "gitHead": "27c5350ac041811e4d24b656030e7dca544caff1"
 }