npm - @umbraco-ui/uui - Versions diffs - 2.0.0-rc.1 → 2.0.0-rc.2 - Mend

@umbraco-ui/uui 2.0.0-rc.1 → 2.0.0-rc.2

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 (23) hide show

package/dist/components/tabs/tab-group.element.js CHANGED Viewed

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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;
+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, isElementHrefLike_fn;
 import { LitElement, html, css } from "lit";
 import { query, queryAssignedElements, property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -46,6 +46,19 @@ const _UUITabGroupElement = class _UUITabGroupElement extends LitElement {
     __privateSet(this, _breakPointCalculationInProgress, false);
     __privateSet(this, _onTabClicked, (e) => {
       const selectedElement = e.currentTarget;
+      const isCtrlClick = e.ctrlKey || e.metaKey;
+      if (__privateMethod(this, _UUITabGroupElement_instances, isElementHrefLike_fn).call(this, selectedElement) && isCtrlClick) {
+        return;
+      }
+      if (selectedElement.classList.contains("hidden-tab") && __privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, selectedElement)) {
+        const original = __privateGet(this, _hiddenTabElementsMap).get(selectedElement);
+        if (original) {
+          original.click();
+          this._moreButtonElement.classList.add("active-inside");
+          this._popoverContainerElement.hidePopover();
+        }
+        return;
+      }
       if (__privateMethod(this, _UUITabGroupElement_instances, isElementTabLike_fn).call(this, selectedElement)) {
         selectedElement.active = true;
         const linkedElement = __privateGet(this, _hiddenTabElementsMap).get(selectedElement);
@@ -225,6 +238,9 @@ updateCollapsibleTabs_fn = function(containerWidth) {
 isElementTabLike_fn = function(el) {
   return typeof el === "object" && "active" in el && typeof el.active === "boolean";
 };
+isElementHrefLike_fn = function(el) {
+  return typeof el === "object" && "href" in el && typeof el.href === "string" && el.href;
+};
 _UUITabGroupElement.styles = [
   css`
       :host {

package/dist/components/tabs/tab-group.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-group.element.js","sources":["../../../src/components/tabs/tab-group.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport type { UUITabElement } from './tab.element.js';\n\nimport '../button/button.js';\nimport '../symbol-more/symbol-more.js';\nimport '../popover-container/popover-container.js';\n\n/*\n @element uui-tab-group\n * @slot - Default slot for the tab group\n * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown\n * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown\n * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid\n /\nexport class UUITabGroupElement extends LitElement {\n @query('#more-button')\n private readonly _moreButtonElement!: UUIButtonElement;\n\n @query('#popover-container')\n private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n @query('#main') private readonly _mainElement!: HTMLElement;\n\n @queryAssignedElements({\n flatten: true,\n selector: 'uui-tab, [uui-tab], [role=tab]',\n })\n private readonly _slottedNodes?: HTMLElement[];\n\n /* Stores the current gap used in the breakpoints /\n #currentGap = 0;\n\n /\n Set the flex direction of the content of the dropdown.\n * @type {string}\n * @attr\n * @default vertical\n /\n @property({\n type: String,\n reflect: true,\n attribute: 'dropdown-content-direction',\n })\n dropdownContentDirection: 'vertical' \| 'horizontal' = 'vertical';\n\n #tabElements: HTMLElement[] = [];\n\n #hiddenTabElements: UUITabElement[] = [];\n readonly #hiddenTabElementsMap: Map<UUITabElement, UUITabElement> = new Map();\n\n #visibilityBreakpoints: number[] = [];\n\n readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n readonly #tabResizeObservers: ResizeObserver[] = [];\n\n #breakPointCalculationInProgress = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.#initialize();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.unobserve(this);\n this.#cleanupTabs();\n }\n\n async #initialize() {\n await this.updateComplete;\n this.#resizeObserver.observe(this._mainElement);\n }\n\n #onResize(entries: ResizeObserverEntry[]) {\n // Check if the gap css custom property has changed.\n const gapCSSVar = Number.parseFloat(\n this.style.getPropertyValue('--uui-tab-group-gap'),\n );\n const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n if (newGap === this.#currentGap) {\n this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize);\n } else {\n this.#calculateBreakPoints();\n }\n }\n\n #cleanupTabs() {\n this.#tabElements.forEach(el => {\n el.removeEventListener('click', this.#onTabClicked);\n this.#tabResizeObservers.forEach(observer => observer.disconnect());\n });\n this.#tabResizeObservers.length = 0;\n this.#visibilityBreakpoints.length = 0;\n }\n\n #onSlotChange() {\n this.#cleanupTabs();\n\n this.#setTabArray();\n\n this.#tabElements.forEach(el => {\n el.addEventListener('click', this.#onTabClicked);\n const observer = new ResizeObserver(\n this.#calculateBreakPoints.bind(this),\n );\n observer.observe(el);\n this.#tabResizeObservers.push(observer);\n });\n }\n\n readonly #onTabClicked = (e: MouseEvent) => {\n const selectedElement = e.currentTarget as HTMLElement;\n if (this.#isElementTabLike(selectedElement)) {\n selectedElement.active = true;\n const linkedElement = this.#hiddenTabElementsMap.get(selectedElement);\n\n if (linkedElement) {\n linkedElement.active = true;\n }\n\n // Reset all other tabs\n const filtered = [\n ...this.#tabElements,\n ...this.#hiddenTabElements,\n ].filter(el => el !== selectedElement && el !== linkedElement);\n\n filtered.forEach(el => {\n if (this.#isElementTabLike(el)) {\n el.active = false;\n }\n });\n\n // Check if there are any active tabs in the dropdown\n const hasActiveHidden = this.#hiddenTabElements.some(\n el => el.active && el !== linkedElement,\n );\n\n if (hasActiveHidden) {\n this._moreButtonElement.classList.add('active-inside');\n } else {\n this._moreButtonElement.classList.remove('active-inside');\n }\n }\n };\n\n async #calculateBreakPoints() {\n if (this.#breakPointCalculationInProgress) return;\n\n // Prevent multiple calculations from happening in the same frame\n this.#breakPointCalculationInProgress = true;\n requestAnimationFrame(() => {\n this.#breakPointCalculationInProgress = false;\n });\n\n // Whenever a tab is added or removed, we need to recalculate the breakpoints\n\n await this.updateComplete; // Wait for the tabs to be rendered\n\n const gapCSSVar = Number.parseFloat(\n this.style.getPropertyValue('--uui-tab-group-gap'),\n );\n const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n this.#currentGap = gap;\n let childrenWidth = 0;\n\n for (let i = 0; i < this.#tabElements.length; i++) {\n this.#tabElements[i].style.display = '';\n childrenWidth += this.#tabElements[i].offsetWidth;\n this.#visibilityBreakpoints[i] = childrenWidth;\n // Add the gap, which will then be included in the next breakpoint:\n childrenWidth += gap;\n }\n\n const tolerance = 2;\n this._mainElement.style.width = childrenWidth - gap + tolerance + 'px';\n\n this.#updateCollapsibleTabs(this._mainElement.offsetWidth);\n }\n\n #setTabArray() {\n this.#tabElements = this._slottedNodes ?? [];\n this.#calculateBreakPoints();\n }\n\n #updateCollapsibleTabs(containerWidth: number) {\n const moreButtonWidth = this._moreButtonElement.offsetWidth;\n\n const containerWithoutButtonWidth = containerWidth - (moreButtonWidth \|\| 0);\n\n // Do the update\n // Reset the hidden tabs\n this.#hiddenTabElements.forEach(el => {\n el.removeEventListener('click', this.#onTabClicked);\n });\n this.#hiddenTabElements = [];\n this.#hiddenTabElementsMap.clear();\n\n let hasActiveTabInDropdown = false;\n\n const len = this.#visibilityBreakpoints.length;\n for (let i = 0; i < len; i++) {\n const breakpoint = this.#visibilityBreakpoints[i];\n const tab = this.#tabElements[i] as UUITabElement;\n\n // If breakpoint is smaller than the container width, then show the tab.\n // If last breakpoint, then we will use the containerWidth, as we do not want to include the more-button in that calculation.\n if (\n breakpoint <=\n (i === len - 1 ? containerWidth : containerWithoutButtonWidth)\n ) {\n // Show this tab:\n tab.style.display = '';\n } else {\n // Make a proxy tab to put in the hidden tabs container and link it to the original tab\n const proxyTab = tab.cloneNode(true) as UUITabElement;\n proxyTab.addEventListener('click', this.#onTabClicked);\n proxyTab.classList.add('hidden-tab');\n proxyTab.style.display = '';\n proxyTab.orientation = this.dropdownContentDirection;\n\n // Link the proxy tab to the original tab\n this.#hiddenTabElementsMap.set(proxyTab, tab);\n this.#hiddenTabElementsMap.set(tab, proxyTab);\n\n this.#hiddenTabElements.push(proxyTab);\n\n tab.style.display = 'none';\n if (tab.active) {\n hasActiveTabInDropdown = true;\n }\n }\n }\n\n if (this.#hiddenTabElements.length === 0) {\n // Hide more button:\n this._moreButtonElement.style.display = 'none';\n // close the popover\n this._popoverContainerElement.hidePopover();\n } else {\n // Show more button:\n this._moreButtonElement.style.display = '';\n }\n\n if (hasActiveTabInDropdown) {\n this._moreButtonElement.classList.add('active-inside');\n } else {\n this._moreButtonElement.classList.remove('active-inside');\n }\n\n this.requestUpdate();\n }\n\n #isElementTabLike(el: any): el is UUITabElement {\n return (\n typeof el === 'object' && 'active' in el && typeof el.active === 'boolean'\n );\n }\n\n render() {\n return html`\n <div id=\"main\">\n <div id=\"grid\" role=\"tablist\">\n <slot @slotchange=${this.#onSlotChange}></slot>\n </div>\n <uui-button\n popovertarget=\"popover-container\"\n style=\"display: none\"\n id=\"more-button\"\n label=\"More\"\n compact>\n <uui-symbol-more></uui-symbol-more>\n </uui-button>\n </div>\n <uui-popover-container\n id=\"popover-container\"\n popover\n placement=\"bottom-end\">\n <div id=\"hidden-tabs-container\" role=\"tablist\">\n ${repeat(this.#hiddenTabElements, el => html`${el}`)}\n </div>\n </uui-popover-container>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n min-width: 0;\n display: flex;\n height: 100%;\n }\n\n #main {\n display: flex;\n justify-content: space-between;\n overflow: hidden;\n }\n\n #grid {\n width: 1fr;\n display: flex;\n height: 100%;\n min-height: 48px;\n overflow: hidden;\n text-wrap: nowrap;\n color: var(--uui-tab-text);\n gap: var(--uui-tab-group-gap, 0);\n }\n\n #popover-container {\n --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);\n --uui-tab-text-hover: var(\n --uui-tab-group-dropdown-tab-text-hover,\n unset\n );\n --uui-tab-text-active: var(\n --uui-tab-group-dropdown-tab-text-active,\n unset\n );\n }\n\n ::slotted(:not(:last-of-type)) {\n border-right: 1px solid var(--uui-tab-divider, none);\n }\n\n .hidden-tab {\n width: 100%;\n }\n\n #hidden-tabs-container {\n width: fit-content;\n display: flex;\n flex-direction: column;\n background-color: var(\n --uui-tab-group-dropdown-background,\n var(--uui-color-surface)\n );\n border-radius: var(--uui-border-radius);\n box-shadow: var(--uui-shadow-depth-3);\n overflow: hidden;\n }\n :host([dropdown-direction='horizontal']) #hidden-tabs-container {\n flex-direction: row;\n }\n\n #more-button {\n position: relative;\n\n --uui-button-contrast: var(--uui-tab-text);\n --uui-button-contrast-hover: var(--uui-tab-text-hover);\n --uui-button-background-color: transparent;\n --uui-button-background-color-hover: transparent;\n }\n #more-button::before {\n content: '';\n position: absolute;\n bottom: 0;\n width: 100%;\n background-color: var(--uui-color-current);\n height: 0px;\n border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n opacity: 0;\n transition:\n opacity ease-in 120ms,\n height ease-in 120ms;\n }\n #more-button.active-inside::before {\n opacity: 1;\n height: 4px;\n transition:\n opacity 120ms,\n height ease-out 120ms;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tab-group.element.js","sources":["../../../src/components/tabs/tab-group.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport type { UUITabElement } from './tab.element.js';\n\nimport '../button/button.js';\nimport '../symbol-more/symbol-more.js';\nimport '../popover-container/popover-container.js';\n\n/*\n @element uui-tab-group\n * @slot - Default slot for the tab group\n * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown\n * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown\n * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown\n * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid\n /\nexport class UUITabGroupElement extends LitElement {\n @query('#more-button')\n private readonly _moreButtonElement!: UUIButtonElement;\n\n @query('#popover-container')\n private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n @query('#main') private readonly _mainElement!: HTMLElement;\n\n @queryAssignedElements({\n flatten: true,\n selector: 'uui-tab, [uui-tab], [role=tab]',\n })\n private readonly _slottedNodes?: HTMLElement[];\n\n /* Stores the current gap used in the breakpoints /\n #currentGap = 0;\n\n /\n Set the flex direction of the content of the dropdown.\n * @type {string}\n * @attr\n * @default vertical\n /\n @property({\n type: String,\n reflect: true,\n attribute: 'dropdown-content-direction',\n })\n dropdownContentDirection: 'vertical' \| 'horizontal' = 'vertical';\n\n #tabElements: HTMLElement[] = [];\n\n #hiddenTabElements: UUITabElement[] = [];\n readonly #hiddenTabElementsMap: Map<UUITabElement, UUITabElement> = new Map();\n\n #visibilityBreakpoints: number[] = [];\n\n readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n readonly #tabResizeObservers: ResizeObserver[] = [];\n\n #breakPointCalculationInProgress = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.#initialize();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.unobserve(this);\n this.#cleanupTabs();\n }\n\n async #initialize() {\n await this.updateComplete;\n this.#resizeObserver.observe(this._mainElement);\n }\n\n #onResize(entries: ResizeObserverEntry[]) {\n // Check if the gap css custom property has changed.\n const gapCSSVar = Number.parseFloat(\n this.style.getPropertyValue('--uui-tab-group-gap'),\n );\n const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n if (newGap === this.#currentGap) {\n this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize);\n } else {\n this.#calculateBreakPoints();\n }\n }\n\n #cleanupTabs() {\n this.#tabElements.forEach(el => {\n el.removeEventListener('click', this.#onTabClicked);\n this.#tabResizeObservers.forEach(observer => observer.disconnect());\n });\n this.#tabResizeObservers.length = 0;\n this.#visibilityBreakpoints.length = 0;\n }\n\n #onSlotChange() {\n this.#cleanupTabs();\n\n this.#setTabArray();\n\n this.#tabElements.forEach(el => {\n el.addEventListener('click', this.#onTabClicked);\n const observer = new ResizeObserver(\n this.#calculateBreakPoints.bind(this),\n );\n observer.observe(el);\n this.#tabResizeObservers.push(observer);\n });\n }\n\n readonly #onTabClicked = (e: MouseEvent) => {\n const selectedElement = e.currentTarget as HTMLElement;\n\n // Don't switch active tabs when a href is being opened in a new browser tab\n const isCtrlClick = e.ctrlKey \|\| e.metaKey;\n if (this.#isElementHrefLike(selectedElement) && isCtrlClick) {\n return;\n }\n\n // If hidden, forward to the original — external listeners fire there\n if (\n selectedElement.classList.contains('hidden-tab') &&\n this.#isElementTabLike(selectedElement)\n ) {\n const original = this.#hiddenTabElementsMap.get(selectedElement);\n if (original) {\n original.click();\n this._moreButtonElement.classList.add('active-inside');\n this._popoverContainerElement.hidePopover();\n }\n return;\n }\n\n if (this.#isElementTabLike(selectedElement)) {\n selectedElement.active = true;\n const linkedElement = this.#hiddenTabElementsMap.get(selectedElement);\n\n if (linkedElement) {\n linkedElement.active = true;\n }\n\n // Reset all other tabs\n const filtered = [\n ...this.#tabElements,\n ...this.#hiddenTabElements,\n ].filter(el => el !== selectedElement && el !== linkedElement);\n\n filtered.forEach(el => {\n if (this.#isElementTabLike(el)) {\n el.active = false;\n }\n });\n\n // Check if there are any active tabs in the dropdown\n const hasActiveHidden = this.#hiddenTabElements.some(\n el => el.active && el !== linkedElement,\n );\n\n if (hasActiveHidden) {\n this._moreButtonElement.classList.add('active-inside');\n } else {\n this._moreButtonElement.classList.remove('active-inside');\n }\n }\n };\n\n async #calculateBreakPoints() {\n if (this.#breakPointCalculationInProgress) return;\n\n // Prevent multiple calculations from happening in the same frame\n this.#breakPointCalculationInProgress = true;\n requestAnimationFrame(() => {\n this.#breakPointCalculationInProgress = false;\n });\n\n // Whenever a tab is added or removed, we need to recalculate the breakpoints\n\n await this.updateComplete; // Wait for the tabs to be rendered\n\n const gapCSSVar = Number.parseFloat(\n this.style.getPropertyValue('--uui-tab-group-gap'),\n );\n const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;\n this.#currentGap = gap;\n let childrenWidth = 0;\n\n for (let i = 0; i < this.#tabElements.length; i++) {\n this.#tabElements[i].style.display = '';\n childrenWidth += this.#tabElements[i].offsetWidth;\n this.#visibilityBreakpoints[i] = childrenWidth;\n // Add the gap, which will then be included in the next breakpoint:\n childrenWidth += gap;\n }\n\n const tolerance = 2;\n this._mainElement.style.width = childrenWidth - gap + tolerance + 'px';\n\n this.#updateCollapsibleTabs(this._mainElement.offsetWidth);\n }\n\n #setTabArray() {\n this.#tabElements = this._slottedNodes ?? [];\n this.#calculateBreakPoints();\n }\n\n #updateCollapsibleTabs(containerWidth: number) {\n const moreButtonWidth = this._moreButtonElement.offsetWidth;\n\n const containerWithoutButtonWidth = containerWidth - (moreButtonWidth \|\| 0);\n\n // Do the update\n // Reset the hidden tabs\n this.#hiddenTabElements.forEach(el => {\n el.removeEventListener('click', this.#onTabClicked);\n });\n this.#hiddenTabElements = [];\n this.#hiddenTabElementsMap.clear();\n\n let hasActiveTabInDropdown = false;\n\n const len = this.#visibilityBreakpoints.length;\n for (let i = 0; i < len; i++) {\n const breakpoint = this.#visibilityBreakpoints[i];\n const tab = this.#tabElements[i] as UUITabElement;\n\n // If breakpoint is smaller than the container width, then show the tab.\n // If last breakpoint, then we will use the containerWidth, as we do not want to include the more-button in that calculation.\n if (\n breakpoint <=\n (i === len - 1 ? containerWidth : containerWithoutButtonWidth)\n ) {\n // Show this tab:\n tab.style.display = '';\n } else {\n // Make a proxy tab to put in the hidden tabs container and link it to the original tab\n const proxyTab = tab.cloneNode(true) as UUITabElement;\n proxyTab.addEventListener('click', this.#onTabClicked);\n proxyTab.classList.add('hidden-tab');\n proxyTab.style.display = '';\n proxyTab.orientation = this.dropdownContentDirection;\n\n // Link the proxy tab to the original tab\n this.#hiddenTabElementsMap.set(proxyTab, tab);\n this.#hiddenTabElementsMap.set(tab, proxyTab);\n\n this.#hiddenTabElements.push(proxyTab);\n\n tab.style.display = 'none';\n if (tab.active) {\n hasActiveTabInDropdown = true;\n }\n }\n }\n\n if (this.#hiddenTabElements.length === 0) {\n // Hide more button:\n this._moreButtonElement.style.display = 'none';\n // close the popover\n this._popoverContainerElement.hidePopover();\n } else {\n // Show more button:\n this._moreButtonElement.style.display = '';\n }\n\n if (hasActiveTabInDropdown) {\n this._moreButtonElement.classList.add('active-inside');\n } else {\n this._moreButtonElement.classList.remove('active-inside');\n }\n\n this.requestUpdate();\n }\n\n #isElementTabLike(el: any): el is UUITabElement {\n return (\n typeof el === 'object' && 'active' in el && typeof el.active === 'boolean'\n );\n }\n\n #isElementHrefLike(el: any): el is UUITabElement {\n return (\n typeof el === 'object' &&\n 'href' in el &&\n typeof el.href === 'string' &&\n el.href\n );\n }\n\n render() {\n return html`\n <div id=\"main\">\n <div id=\"grid\" role=\"tablist\">\n <slot @slotchange=${this.#onSlotChange}></slot>\n </div>\n <uui-button\n popovertarget=\"popover-container\"\n style=\"display: none\"\n id=\"more-button\"\n label=\"More\"\n compact>\n <uui-symbol-more></uui-symbol-more>\n </uui-button>\n </div>\n <uui-popover-container\n id=\"popover-container\"\n popover\n placement=\"bottom-end\">\n <div id=\"hidden-tabs-container\" role=\"tablist\">\n ${repeat(this.#hiddenTabElements, el => html`${el}`)}\n </div>\n </uui-popover-container>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n min-width: 0;\n display: flex;\n height: 100%;\n }\n\n #main {\n display: flex;\n justify-content: space-between;\n overflow: hidden;\n }\n\n #grid {\n width: 1fr;\n display: flex;\n height: 100%;\n min-height: 48px;\n overflow: hidden;\n text-wrap: nowrap;\n color: var(--uui-tab-text);\n gap: var(--uui-tab-group-gap, 0);\n }\n\n #popover-container {\n --uui-tab-text: var(--uui-tab-group-dropdown-tab-text, unset);\n --uui-tab-text-hover: var(\n --uui-tab-group-dropdown-tab-text-hover,\n unset\n );\n --uui-tab-text-active: var(\n --uui-tab-group-dropdown-tab-text-active,\n unset\n );\n }\n\n ::slotted(:not(:last-of-type)) {\n border-right: 1px solid var(--uui-tab-divider, none);\n }\n\n .hidden-tab {\n width: 100%;\n }\n\n #hidden-tabs-container {\n width: fit-content;\n display: flex;\n flex-direction: column;\n background-color: var(\n --uui-tab-group-dropdown-background,\n var(--uui-color-surface)\n );\n border-radius: var(--uui-border-radius);\n box-shadow: var(--uui-shadow-depth-3);\n overflow: hidden;\n }\n :host([dropdown-direction='horizontal']) #hidden-tabs-container {\n flex-direction: row;\n }\n\n #more-button {\n position: relative;\n\n --uui-button-contrast: var(--uui-tab-text);\n --uui-button-contrast-hover: var(--uui-tab-text-hover);\n --uui-button-background-color: transparent;\n --uui-button-background-color-hover: transparent;\n }\n #more-button::before {\n content: '';\n position: absolute;\n bottom: 0;\n width: 100%;\n background-color: var(--uui-color-current);\n height: 0px;\n border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n opacity: 0;\n transition:\n opacity ease-in 120ms,\n height ease-in 120ms;\n }\n #more-button.active-inside::before {\n opacity: 1;\n height: 4px;\n transition:\n opacity 120ms,\n height ease-out 120ms;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/tabs/tab.element.js CHANGED Viewed

@@ -179,13 +179,13 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUITabElement.prototype, "disabled");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], UUITabElement.prototype, "href");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], UUITabElement.prototype, "target");
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], UUITabElement.prototype, "rel");
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/components/tabs/tab.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.element.js","sources":["../../../src/components/tabs/tab.element.ts"],"sourcesContent":["import { ActiveMixin, LabelMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/*\n A single tab. Should be put into `<uui-tab-group>`,\n * @element uui-tabs\n * @slot - for label\n * @slot icon - for icon\n * @slot extra - for extra\n * @description - All-round tab-button\n * @cssprop --uui-tab-text - Define the tab text color\n * @cssprop --uui-tab-text-hover - Define the tab text hover color\n * @cssprop --uui-tab-text-active - Define the tab text active color\n * @cssprop --uui-tab-divider - Define the tab dividers color\n * @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding\n /\nexport class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {\n /\n Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /\n Set an href, this will turns the inner button into a anchor tag.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String })\n public href?: string;\n\n /\n Set an anchor tag target, only used when using href.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String })\n public target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /\n Set the rel attribute for an anchor tag, only used when using href.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String })\n public rel?: string;\n\n /\n Set the visual orientation of this tab, this changes the look and placement of the active indication.\n * @type {string}\n * @attr\n * @default horizontal\n /\n @property({ type: String, reflect: true })\n public orientation?: 'horizontal' \| 'vertical' = 'horizontal';\n\n constructor() {\n super();\n this.addEventListener('click', this.onHostClick);\n }\n\n private onHostClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n }\n\n render() {\n if (this.href) {\n const rel =\n this.rel \|\|\n (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n return html`\n <a\n id=\"button\"\n href=${ifDefined(this.disabled ? undefined : this.href)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(rel)}\n role=\"tab\">\n <slot name=\"icon\"></slot>\n ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </a>\n `;\n }\n return html`\n <button type=\"button\" id=\"button\" ?disabled=${this.disabled} role=\"tab\">\n <slot name=\"icon\"></slot>\n ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </button>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n color: var(--uui-tab-text, var(--uui-color-interactive));\n font-family: inherit;\n width: fit-content;\n }\n\n #button {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: var(--uui-size-12);\n min-width: 70px;\n padding: var(--uui-size-3)\n var(--uui-tab-padding-horizontal, var(--uui-size-5));\n border: none;\n font-size: inherit;\n background: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n\n / for anchor tag: /\n text-decoration: none;\n line-height: normal;\n }\n\n :host([orientation='vertical']) #button {\n min-height: var(--uui-size-14);\n padding: var(--uui-size-2)\n var(--uui-tab-padding-horizontal, var(--uui-size-5));\n }\n\n :host(:not([disabled])) #button:hover {\n color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis));\n }\n\n :host(:not([disabled])) #button:active {\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, 0.15),\n 0 1px 2px rgba(0, 0, 0, 0.05);\n }\n\n :host([active]) {\n color: var(--uui-tab-text-active, unset);\n }\n\n :host([disabled]) #button {\n color: var(--uui-color-disabled-contrast);\n cursor: default;\n }\n\n #button::before {\n content: '';\n position: absolute;\n background-color: var(--uui-color-current);\n opacity: 0;\n }\n :host([active]) #button::before {\n opacity: 1;\n }\n\n / HORIZONTAL /\n :host([orientation='horizontal']) #button::before {\n left: auto;\n right: auto;\n border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n height: 0px;\n width: calc(100% - 14px);\n bottom: 0;\n transition:\n opacity linear 120ms,\n height ease-in-out 120ms;\n }\n :host([active][orientation='horizontal']) #button::before {\n height: 4px;\n }\n\n / VERTICAL /\n :host([orientation='vertical']) #button::before {\n top: auto;\n bottom: auto;\n border-radius: 0 var(--uui-border-radius) var(--uui-border-radius) 0;\n height: calc(100% - 12px);\n width: 0px;\n left: 0;\n transition:\n opacity linear 120ms,\n width ease-in-out 120ms;\n }\n :host([active][orientation='vertical']) #button::before {\n width: 4px;\n }\n\n #button:hover::before {\n background-color: var(--uui-color-current-emphasis);\n }\n :host([disabled]) #button::before {\n background-color: var(--uui-color-disabled-standalone);\n }\n\n slot[name='icon']::slotted() {\n font-size: 20px;\n margin-bottom: var(--uui-size-2);\n }\n\n slot.label {\n text-align: center;\n display: flex;\n width: 100%;\n flex-direction: column;\n }\n\n :host([orientation='vertical']) slot.label {\n text-align: left;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,YAAY,WAAW,IAAI,UAAU,CAAC,EAAE;AAAA,EA8CzE,cAAc;AACZ,UAAA;AAvCF,SAAO,WAAW;AAoClB,SAAO,cAA0C;AAI/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF,QAAE,yBAAA;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM;AACb,YAAM,MACJ,KAAK,QACJ,KAAK,WAAW,WAAW,wBAAwB;AACtD,aAAO;AAAA;AAAA;AAAA,iBAGI,UAAU,KAAK,WAAW,SAAY,KAAK,IAAI,CAAC;AAAA,mBAC9C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,gBACtC,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA,YAGlB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,IAI1B;AACA,WAAO;AAAA,oDACyC,KAAK,QAAQ;AAAA;AAAA,UAEvD,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAI1B;AA8HF;AA5HE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtFG,IAAM,gBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,cAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,~~OAAA~~,~~CAAQ~~;AAAA,~~GAhBf~~,cAiBJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,~~OAAA~~,~~CAAQ~~;AAAA,~~GAzBf~~,cA0BJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,~~OAAA~~,~~CAAQ~~;AAAA,~~GAlCf~~,cAmCJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3C9B,cA4CJ,WAAA,aAAA;"}
1	+ {"version":3,"file":"tab.element.js","sources":["../../../src/components/tabs/tab.element.ts"],"sourcesContent":["import { ActiveMixin, LabelMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/*\n A single tab. Should be put into `<uui-tab-group>`,\n * @element uui-tabs\n * @slot - for label\n * @slot icon - for icon\n * @slot extra - for extra\n * @description - All-round tab-button\n * @cssprop --uui-tab-text - Define the tab text color\n * @cssprop --uui-tab-text-hover - Define the tab text hover color\n * @cssprop --uui-tab-text-active - Define the tab text active color\n * @cssprop --uui-tab-divider - Define the tab dividers color\n * @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding\n /\nexport class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {\n /\n Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /\n Set an href, this will turns the inner button into a anchor tag.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String, reflect: true })\n public href?: string;\n\n /\n Set an anchor tag target, only used when using href.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String, reflect: true })\n public target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /\n Set the rel attribute for an anchor tag, only used when using href.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String, reflect: true })\n public rel?: string;\n\n /\n Set the visual orientation of this tab, this changes the look and placement of the active indication.\n * @type {string}\n * @attr\n * @default horizontal\n /\n @property({ type: String, reflect: true })\n public orientation?: 'horizontal' \| 'vertical' = 'horizontal';\n\n constructor() {\n super();\n this.addEventListener('click', this.onHostClick);\n }\n\n private onHostClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n }\n\n render() {\n if (this.href) {\n const rel =\n this.rel \|\|\n (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n return html`\n <a\n id=\"button\"\n href=${ifDefined(this.disabled ? undefined : this.href)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(rel)}\n role=\"tab\">\n <slot name=\"icon\"></slot>\n ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </a>\n `;\n }\n return html`\n <button type=\"button\" id=\"button\" ?disabled=${this.disabled} role=\"tab\">\n <slot name=\"icon\"></slot>\n ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </button>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n color: var(--uui-tab-text, var(--uui-color-interactive));\n font-family: inherit;\n width: fit-content;\n }\n\n #button {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: var(--uui-size-12);\n min-width: 70px;\n padding: var(--uui-size-3)\n var(--uui-tab-padding-horizontal, var(--uui-size-5));\n border: none;\n font-size: inherit;\n background: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n\n / for anchor tag: /\n text-decoration: none;\n line-height: normal;\n }\n\n :host([orientation='vertical']) #button {\n min-height: var(--uui-size-14);\n padding: var(--uui-size-2)\n var(--uui-tab-padding-horizontal, var(--uui-size-5));\n }\n\n :host(:not([disabled])) #button:hover {\n color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis));\n }\n\n :host(:not([disabled])) #button:active {\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, 0.15),\n 0 1px 2px rgba(0, 0, 0, 0.05);\n }\n\n :host([active]) {\n color: var(--uui-tab-text-active, unset);\n }\n\n :host([disabled]) #button {\n color: var(--uui-color-disabled-contrast);\n cursor: default;\n }\n\n #button::before {\n content: '';\n position: absolute;\n background-color: var(--uui-color-current);\n opacity: 0;\n }\n :host([active]) #button::before {\n opacity: 1;\n }\n\n / HORIZONTAL /\n :host([orientation='horizontal']) #button::before {\n left: auto;\n right: auto;\n border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n height: 0px;\n width: calc(100% - 14px);\n bottom: 0;\n transition:\n opacity linear 120ms,\n height ease-in-out 120ms;\n }\n :host([active][orientation='horizontal']) #button::before {\n height: 4px;\n }\n\n / VERTICAL /\n :host([orientation='vertical']) #button::before {\n top: auto;\n bottom: auto;\n border-radius: 0 var(--uui-border-radius) var(--uui-border-radius) 0;\n height: calc(100% - 12px);\n width: 0px;\n left: 0;\n transition:\n opacity linear 120ms,\n width ease-in-out 120ms;\n }\n :host([active][orientation='vertical']) #button::before {\n width: 4px;\n }\n\n #button:hover::before {\n background-color: var(--uui-color-current-emphasis);\n }\n :host([disabled]) #button::before {\n background-color: var(--uui-color-disabled-standalone);\n }\n\n slot[name='icon']::slotted() {\n font-size: 20px;\n margin-bottom: var(--uui-size-2);\n }\n\n slot.label {\n text-align: center;\n display: flex;\n width: 100%;\n flex-direction: column;\n }\n\n :host([orientation='vertical']) slot.label {\n text-align: left;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,YAAY,WAAW,IAAI,UAAU,CAAC,EAAE;AAAA,EA8CzE,cAAc;AACZ,UAAA;AAvCF,SAAO,WAAW;AAoClB,SAAO,cAA0C;AAI/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF,QAAE,yBAAA;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM;AACb,YAAM,MACJ,KAAK,QACJ,KAAK,WAAW,WAAW,wBAAwB;AACtD,aAAO;AAAA;AAAA;AAAA,iBAGI,UAAU,KAAK,WAAW,SAAY,KAAK,IAAI,CAAC;AAAA,mBAC9C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,gBACtC,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA,YAGlB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,IAI1B;AACA,WAAO;AAAA,oDACyC,KAAK,QAAQ;AAAA;AAAA,UAEvD,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAI1B;AA8HF;AA5HE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtFG,IAAM,gBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,cAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhB9B,cAiBJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAzB9B,cA0BJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,cAmCJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3C9B,cA4CJ,WAAA,aAAA;"}

package/dist/package.json.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const version = "2.0.0-rc.1";
+const version = "2.0.0-rc.2";
 export {
   version
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "description": "The Umbraco UI Library - web components for the Umbraco backoffice.",
   "license": "MIT",
   "type": "module",
@@ -92,10 +92,10 @@
     "@lerna-lite/cli": "5.2.1",
     "@lerna-lite/publish": "5.2.1",
     "@lerna-lite/version": "5.2.1",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-links": "^10.3.6",
-    "@storybook/web-components-vite": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-links": "^10.4.0",
+    "@storybook/web-components-vite": "^10.4.0",
     "@testing-library/dom": "10.4.1",
     "@types/culori": "^4.0.1",
     "@types/react": "18.3.1",
@@ -103,14 +103,14 @@
     "@vitest/browser": "^4.1.6",
     "@vitest/browser-playwright": "^4.1.6",
     "axe-core": "^4.11.4",
-    "chromatic": "^16.9.0",
+    "chromatic": "^17.0.0",
     "eslint": "^10.3.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-lit": "^2.3.1",
     "eslint-plugin-local-rules": "3.0.2",
     "eslint-plugin-prettier": "5.5.5",
-    "eslint-plugin-storybook": "10.3.6",
+    "eslint-plugin-storybook": "10.4.0",
     "eslint-plugin-wc": "3.1.0",
     "github-markdown-css": "5.9.0",
     "globals": "^17.6.0",
@@ -126,9 +126,9 @@
     "react-syntax-highlighter": "16.1.1",
     "remark-gfm": "4.0.1",
     "rimraf": "6.1.3",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "tsc-files": "1.1.4",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "typescript-eslint": "8.56.1",
     "vite": "7.3.2",
     "vitest": "^4.1.6",
@@ -147,5 +147,5 @@
     "url": "https://uui.umbraco.com"
   },
   "packageManager": "npm@11.1.0",
-  "gitHead": "c43beb9fece206019f530824803797532ab78376"
+  "gitHead": "e7a55ef69ef9ffd7a99d7e2e0e20b23a2d516da8"
 }