@umbraco-ui/uui-tabs 1.8.0-rc.2 → 1.9.0-rc.0

package/custom-elements.json

@@ -78,6 +78,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "orientation",
           "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
@@ -118,6 +124,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "orientation",
           "attribute": "orientation",
@@ -204,6 +217,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "orientation",
           "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
@@ -244,6 +263,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "orientation",
           "attribute": "orientation",

package/lib/index.js

@@ -14,8 +14,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$1(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 let UUITabElement = class extends ActiveMixin(LabelMixin("", LitElement)) {
@@ -38,7 +37,9 @@ let UUITabElement = class extends ActiveMixin(LabelMixin("", LitElement)) {
             href=${ifDefined(!this.disabled ? this.href : void 0)}
             target=${ifDefined(this.target || void 0)}
             rel=${ifDefined(
-      this.target === "_blank" ? "noopener noreferrer" : void 0
+      this.rel || ifDefined(
+        this.target === "_blank" ? "noopener noreferrer" : void 0
+      )
     )}
             role="tab">
             <slot name="icon"></slot>
@@ -97,11 +98,11 @@ UUITabElement.styles = [
           var(--uui-tab-padding-horizontal, var(--uui-size-5,15px));
       }
 
-      :host(:not([active]):not([disabled])) #button:hover {
+      :host(:not([disabled])) #button:hover {
         color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis,#3544b1));
       }
 
-      :host(:not([active]):not([disabled])) #button:active {
+      :host(:not([disabled])) #button:active {
         box-shadow:
           inset 0 2px 4px rgba(0, 0, 0, 0.15),
           0 1px 2px rgba(0, 0, 0, 0.05);
@@ -111,9 +112,6 @@ UUITabElement.styles = [
         color: var(--uui-tab-text-active, unset);
       }
 
-      :host([active]) #button {
-        cursor: default;
-      }
       :host([disabled]) #button {
         color: var(--uui-color-disabled-contrast,#c4c4c4);
         cursor: default;
@@ -124,9 +122,6 @@ UUITabElement.styles = [
         position: absolute;
         background-color: var(--uui-color-current,#f5c1bc);
         opacity: 0;
-        --transitionDuration: 120ms;
-        --barWidth: 4px;
-        --borderRadius: 3px;
       }
       :host([active]) #button::before {
         opacity: 1;
@@ -136,32 +131,32 @@ UUITabElement.styles = [
       :host([orientation='horizontal']) #button::before {
         left: auto;
         right: auto;
-        border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+        border-radius: var(--uui-border-radius,3px) var(--uui-border-radius,3px) 0 0;
         height: 0px;
         width: calc(100% - 15px);
         bottom: 0;
         transition:
-          opacity ease-in-out var(--transitionDuration),
-          height ease-in-out var(--transitionDuration);
+          opacity linear 120ms,
+          height ease-in-out 120ms;
       }
       :host([active][orientation='horizontal']) #button::before {
-        height: var(--barWidth);
+        height: 4px;
       }
 
       /* VERTICAL */
       :host([orientation='vertical']) #button::before {
         top: auto;
         bottom: auto;
-        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+        border-radius: 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px) 0;
         height: calc(100% - 12px);
         width: 0px;
         left: 0;
         transition:
-          opacity ease-in-out var(--transitionDuration),
-          width ease-in-out var(--transitionDuration);
+          opacity linear 120ms,
+          width ease-in-out 120ms;
       }
       :host([active][orientation='vertical']) #button::before {
-        width: var(--barWidth);
+        width: 4px;
       }
 
       #button:hover::before {
@@ -198,6 +193,9 @@ __decorateClass$1([
 __decorateClass$1([
   property({ type: String })
 ], UUITabElement.prototype, "target", 2);
+__decorateClass$1([
+  property({ type: String })
+], UUITabElement.prototype, "rel", 2);
 __decorateClass$1([
   property({ type: String, reflect: true })
 ], UUITabElement.prototype, "orientation", 2);
@@ -207,49 +205,27 @@ UUITabElement = __decorateClass$1([
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-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;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _UUITabGroupElement_instances, initialize_fn, onResize_fn, cleanupTabs_fn, onSlotChange_fn, _onTabClicked, calculateBreakPoints_fn, setTabArray_fn, updateCollapsibleTabs_fn, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _initialize);
-    __privateAdd(this, _onResize);
-    __privateAdd(this, _cleanupTabs);
-    __privateAdd(this, _onSlotChange);
-    __privateAdd(this, _calculateBreakPoints);
-    __privateAdd(this, _setTabArray);
-    __privateAdd(this, _updateCollapsibleTabs);
-    __privateAdd(this, _isElementTabLike);
+    __privateAdd(this, _UUITabGroupElement_instances);
     /** Stores the current gap used in the breakpoints */
     __privateAdd(this, _currentGap, 0);
     this.dropdownContentDirection = "vertical";
@@ -257,12 +233,12 @@ let UUITabGroupElement = class extends LitElement {
     __privateAdd(this, _hiddenTabElements, []);
     __privateAdd(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _visibilityBreakpoints, []);
-    __privateAdd(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _onResize, onResize_fn).bind(this)));
+    __privateAdd(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _UUITabGroupElement_instances, onResize_fn).bind(this)));
     __privateAdd(this, _tabResizeObservers, []);
     __privateAdd(this, _breakPointCalculationInProgress, false);
     __privateAdd(this, _onTabClicked, (e) => {
       const selectedElement = e.currentTarget;
-      if (__privateMethod(this, _isElementTabLike, isElementTabLike_fn).call(this, selectedElement)) {
+      if (__privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, selectedElement)) {
         selectedElement.active = true;
         const linkedElement = __privateGet(this, _hiddenTabElementsMap).get(selectedElement);
         if (linkedElement) {
@@ -273,7 +249,7 @@ let UUITabGroupElement = class extends LitElement {
           ...__privateGet(this, _hiddenTabElements)
         ].filter((el) => el !== selectedElement && el !== linkedElement);
         filtered.forEach((el) => {
-          if (__privateMethod(this, _isElementTabLike, isElementTabLike_fn).call(this, el)) {
+          if (__privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, el)) {
             el.active = false;
           }
         });
@@ -286,18 +262,18 @@ let UUITabGroupElement = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _initialize, initialize_fn).call(this);
+    __privateMethod(this, _UUITabGroupElement_instances, initialize_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver).unobserve(this);
-    __privateMethod(this, _cleanupTabs, cleanupTabs_fn).call(this);
+    __privateMethod(this, _UUITabGroupElement_instances, cleanupTabs_fn).call(this);
   }
   render() {
     return html`
       <div id="main">
         <div id="grid">
-          <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
+          <slot @slotchange=${__privateMethod(this, _UUITabGroupElement_instances, onSlotChange_fn)}></slot>
         </div>
         <uui-button
           popovertarget="popover-container"
@@ -327,29 +303,26 @@ _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
 _tabResizeObservers = new WeakMap();
 _breakPointCalculationInProgress = new WeakMap();
-_initialize = new WeakSet();
+_UUITabGroupElement_instances = 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");
+  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(
     this.style.getPropertyValue("--uui-tab-group-gap")
   );
   const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
   if (newGap !== __privateGet(this, _currentGap)) {
-    __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
+    __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).call(this);
   } else {
-    __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
+    __privateMethod(this, _UUITabGroupElement_instances, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
   }
 };
-_cleanupTabs = new WeakSet();
 cleanupTabs_fn = function() {
   __privateGet(this, _tabElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onTabClicked));
@@ -358,24 +331,21 @@ cleanupTabs_fn = function() {
   __privateGet(this, _tabResizeObservers).length = 0;
   __privateGet(this, _visibilityBreakpoints).length = 0;
 };
-_onSlotChange = new WeakSet();
 onSlotChange_fn = function() {
-  __privateMethod(this, _cleanupTabs, cleanupTabs_fn).call(this);
-  __privateMethod(this, _setTabArray, setTabArray_fn).call(this);
+  __privateMethod(this, _UUITabGroupElement_instances, cleanupTabs_fn).call(this);
+  __privateMethod(this, _UUITabGroupElement_instances, setTabArray_fn).call(this);
   __privateGet(this, _tabElements).forEach((el) => {
     el.addEventListener("click", __privateGet(this, _onTabClicked));
     const observer = new ResizeObserver(
-      __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).bind(this)
+      __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).bind(this)
     );
     observer.observe(el);
     __privateGet(this, _tabResizeObservers).push(observer);
   });
 };
 _onTabClicked = new WeakMap();
-_calculateBreakPoints = new WeakSet();
 calculateBreakPoints_fn = async function() {
-  if (__privateGet(this, _breakPointCalculationInProgress))
-    return;
+  if (__privateGet(this, _breakPointCalculationInProgress)) return;
   __privateSet(this, _breakPointCalculationInProgress, true);
   requestAnimationFrame(() => {
     __privateSet(this, _breakPointCalculationInProgress, false);
@@ -395,14 +365,12 @@ calculateBreakPoints_fn = async function() {
   }
   const tolerance = 2;
   this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
+  __privateMethod(this, _UUITabGroupElement_instances, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
 };
-_setTabArray = new WeakSet();
 setTabArray_fn = function() {
   __privateSet(this, _tabElements, this._slottedNodes ? this._slottedNodes : []);
-  __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
+  __privateMethod(this, _UUITabGroupElement_instances, calculateBreakPoints_fn).call(this);
 };
-_updateCollapsibleTabs = new WeakSet();
 updateCollapsibleTabs_fn = function(containerWidth) {
   const moreButtonWidth = this._moreButtonElement.offsetWidth;
   const containerWithoutButtonWidth = containerWidth - (moreButtonWidth ? moreButtonWidth : 0);
@@ -442,7 +410,6 @@ updateCollapsibleTabs_fn = function(containerWidth) {
   hasActiveTabInDropdown ? this._moreButtonElement.classList.add("active-inside") : this._moreButtonElement.classList.remove("active-inside");
   this.requestUpdate();
 };
-_isElementTabLike = new WeakSet();
 isElementTabLike_fn = function(el) {
   return typeof el === "object" && "active" in el && typeof el.active === "boolean";
 };

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

@@ -35,6 +35,13 @@ export declare class UUITabElement extends UUITabElement_base {
      * @default undefined
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Set the rel attribute for an anchor tag, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    rel?: string;
     /**
      * Set the visual orientation of this tab, this changes the look and placement of the active indication.
      * @type {string}

package/package.json

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