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

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

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

package/dist/components/pagination/pagination.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.element.js","sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/*\n @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n /\nexport class UUIPaginationElement extends LitElement {\n private readonly _observer = new ResizeObserver(\n this._calculateRange.bind(this),\n );\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n disconnectedCallback() {\n this._observer.disconnect();\n }\n\n firstUpdated() {\n this._observer.observe(this._pagesGroup);\n\n this.updateLabel();\n this._calculateRange();\n }\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('current') \|\| changedProperties.has('label')) {\n this.updateLabel();\n }\n }\n\n protected updateLabel() {\n this.ariaLabel = `${this.label \|\| 'Pagination navigation'}. Current page: ${\n this.current\n }.`;\n }\n\n private _calculateRange() {\n const containerWidth = this.offsetWidth;\n\n // get all the buttons with .nav-button class and sum up their widths\n const navButtonsWidth = Array.from(this._navButtons).reduce(\n (totalWidth, button) => {\n return totalWidth + button.getBoundingClientRect().width;\n },\n 0,\n );\n\n // subtract width of nav-buttons from the pagination container\n const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n this._range = Math.max(1, Math.floor(range));\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n private _generateVisiblePages(current: number) {\n let start: number;\n if (current < this._range) {\n start = 1;\n } else if (current < this.total - this._range) {\n start = current - this._range;\n } else {\n start = this.total - this._range 2;\n }\n\n let stop: number;\n if (current <= this._range) {\n stop = this._range * 2 + 1;\n } else if (current < this.total - this._range) {\n stop = current + this._range;\n } else {\n stop = this.total;\n }\n\n const pages = arrayOfNumbers(\n limit(start, 1, this.total),\n limit(stop, 1, this.total),\n );\n\n return pages;\n }\n\n @queryAll('uui-button.nav')\n private readonly _navButtons!: Array<UUIButtonElement>;\n\n @query('#pages')\n private readonly _pagesGroup!: any;\n\n /*\n This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n * @type {string}\n * @attr\n /\n @property()\n label = '';\n\n /\n With this property you can overwrite aria-label.\n * @type {string}\n * @attr\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n This property is used to generate the name of the first button\n * @type {string}\n * @attr\n /\n @property()\n firstLabel: string = 'First';\n\n /\n This property is used to generate the name of the previous button\n * @type {string}\n * @attr\n /\n @property()\n previousLabel: string = 'Previous';\n\n /\n This property is used to generate the name of the next button\n * @type {string}\n * @attr\n /\n @property()\n nextLabel: string = 'Next';\n /\n This property is used to generate the name of the last button\n * @type {string}\n * @attr\n /\n @property()\n lastLabel: string = 'Last';\n\n private _total = 100;\n\n /\n Set the amount of pages to navigate.\n * @type {number}\n * @attr\n * @default: 1\n /\n @property({ type: Number })\n get total() {\n return this._total;\n }\n set total(newValue: number) {\n this._total = newValue;\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('total', newValue);\n }\n\n @state()\n private _range = 0;\n\n @state()\n private _visiblePages: number[] = [];\n\n private _current = 1;\n\n /\n Define the current active page.\n * @type {number}\n * @attr\n /\n @property({ type: Number })\n get current() {\n return this._current;\n }\n set current(newValue: number) {\n const oldValue = this._current;\n this._current = limit(newValue, 1, this.total);\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('current', oldValue);\n }\n\n /\n This method will change the page to a next one.\n * @memberof UUIPaginationElement\n /\n goToNextPage() {\n this.current++;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to a previous one.\n * @memberof UUIPaginationElement\n /\n goToPreviousPage() {\n this.current--;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to the one passed as an argument to this method.\n * @param {number} page\n * @memberof UUIPaginationElement\n /\n goToPage(page: number) {\n this.current = page;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /* When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n protected focusActivePage() {\n requestAnimationFrame(() => {\n // for none range changing clicks we need to ensure a rendering before querying.\n const activeButtonElement =\n this.renderRoot.querySelector<HTMLElement>('.active');\n if (activeButtonElement) {\n activeButtonElement.focus();\n }\n });\n }\n\n protected renderFirst() {\n return html`<uui-button\n compact\n look=\"outline\"\n class=\"nav\"\n role=\"listitem\"\n label=${this.firstLabel}\n ?disabled=${this._current === 1}\n @click=${() => this.goToPage(1)}></uui-button>`;\n }\n\n protected renderPrevious() {\n return html`<uui-button\n compact\n look=\"outline\"\n class=\"nav\"\n role=\"listitem\"\n label=${this.previousLabel}\n ?disabled=${this._current === 1}\n @click=${this.goToPreviousPage}></uui-button>`;\n }\n\n protected renderNext() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n class=\"nav\"\n label=${this.nextLabel}\n ?disabled=${this._current === this.total}\n @click=${this.goToNextPage}></uui-button>`;\n }\n\n protected renderLast() {\n return html`\n <uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n class=\"nav\"\n label=${this.lastLabel}\n ?disabled=${this.total === this._current}\n @click=${() => this.goToPage(this.total)}></uui-button>\n `;\n }\n\n protected renderDots() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n tabindex=\"-1\"\n class=\"dots\"\n label=\"More pages\"\n >...</uui-button\n > `;\n }\n\n protected renderPage(page: number) {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n label=\"Go to page ${page}\"\n class=${'page' + (page === this._current ? ' active' : '')}\n tabindex=${page === this._current ? '-1' : ''}\n @click=${() => {\n if (page === this._current) return;\n this.goToPage(page);\n this.focusActivePage();\n }}>\n ${page}\n </uui-button>`;\n }\n\n protected renderNavigationLeft() {\n return html` ${this.renderFirst()} ${this.renderPrevious()}\n ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n }\n\n protected renderNavigationRight() {\n return html`${this._visiblePages.includes(this.total)\n ? ''\n : this.renderDots()}\n ${this.renderNext()} ${this.renderLast()}`;\n }\n\n render() {\n // prettier-ignore\n return html`<uui-button-group role=\"list\" id=\"pages\">\n ${this.renderNavigationLeft()}\n ${this._visiblePages.map(\n page =>\n this.renderPage(page)\n )}\n ${this.renderNavigationRight()}\n </uui-button-group>\n `;\n }\n\n static override readonly styles = [\n css`\n uui-button-group {\n width: 100%;\n }\n\n uui-button {\n --uui-button-border-color: var(--uui-color-border-standalone);\n --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n }\n\n uui-button:hover {\n z-index: 1;\n }\n\n .page {\n min-width: 36px;\n max-width: 72px;\n }\n .page.active {\n z-index: 1;\n }\n\n .nav {\n min-width: 72px;\n }\n\n .dots {\n pointer-events: none;\n }\n\n .active {\n pointer-events: none;\n --uui-button-font-weight: 700;\n --uui-button-contrast: var(--uui-color-selected);\n --uui-button-border-color: var(--uui-color-selected);\n --uui-button-border-width: 2px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pagination.element.js","sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/*\n @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n /\nexport class UUIPaginationElement extends LitElement {\n private readonly _observer = new ResizeObserver(\n this._calculateRange.bind(this),\n );\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n disconnectedCallback() {\n this._observer.disconnect();\n }\n\n firstUpdated() {\n this._observer.observe(this._pagesGroup);\n\n this.updateLabel();\n this._calculateRange();\n }\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('current') \|\| changedProperties.has('label')) {\n this.updateLabel();\n }\n }\n\n protected updateLabel() {\n this.ariaLabel = `${this.label \|\| 'Pagination navigation'}. Current page: ${\n this.current\n }.`;\n }\n\n private _calculateRange() {\n const containerWidth = this.offsetWidth;\n\n // get all the buttons with .nav-button class and sum up their widths\n const navButtonsWidth = Array.from(this._navButtons).reduce(\n (totalWidth, button) => {\n return totalWidth + button.getBoundingClientRect().width;\n },\n 0,\n );\n\n // subtract width of nav-buttons from the pagination container\n const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n this._range = Math.max(0, Math.floor(range));\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n private _generateVisiblePages(current: number) {\n let start: number;\n if (current < this._range) {\n start = 1;\n } else if (current < this.total - this._range) {\n start = current - this._range;\n } else {\n start = this.total - this._range 2;\n }\n\n let stop: number;\n if (current <= this._range) {\n stop = this._range * 2 + 1;\n } else if (current < this.total - this._range) {\n stop = current + this._range;\n } else {\n stop = this.total;\n }\n\n const pages = arrayOfNumbers(\n limit(start, 1, this.total),\n limit(stop, 1, this.total),\n );\n\n return pages;\n }\n\n @queryAll('uui-button.nav')\n private readonly _navButtons!: Array<UUIButtonElement>;\n\n @query('#pages')\n private readonly _pagesGroup!: any;\n\n /*\n This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n * @type {string}\n * @attr\n /\n @property()\n label = '';\n\n /\n With this property you can overwrite aria-label.\n * @type {string}\n * @attr\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n This property is used to generate the name of the first button\n * @type {string}\n * @attr\n /\n @property()\n firstLabel: string = 'First';\n\n /\n This property is used to generate the name of the previous button\n * @type {string}\n * @attr\n /\n @property()\n previousLabel: string = 'Previous';\n\n /\n This property is used to generate the name of the next button\n * @type {string}\n * @attr\n /\n @property()\n nextLabel: string = 'Next';\n /\n This property is used to generate the name of the last button\n * @type {string}\n * @attr\n /\n @property()\n lastLabel: string = 'Last';\n\n private _total = 100;\n\n /\n Set the amount of pages to navigate.\n * @type {number}\n * @attr\n * @default: 1\n /\n @property({ type: Number })\n get total() {\n return this._total;\n }\n set total(newValue: number) {\n this._total = newValue;\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('total', newValue);\n }\n\n @state()\n private _range = 0;\n\n @state()\n private _visiblePages: number[] = [];\n\n private _current = 1;\n\n /\n Define the current active page.\n * @type {number}\n * @attr\n /\n @property({ type: Number })\n get current() {\n return this._current;\n }\n set current(newValue: number) {\n const oldValue = this._current;\n this._current = limit(newValue, 1, this.total);\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('current', oldValue);\n }\n\n /\n This method will change the page to a next one.\n * @memberof UUIPaginationElement\n /\n goToNextPage() {\n this.current++;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to a previous one.\n * @memberof UUIPaginationElement\n /\n goToPreviousPage() {\n this.current--;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to the one passed as an argument to this method.\n * @param {number} page\n * @memberof UUIPaginationElement\n /\n goToPage(page: number) {\n this.current = page;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /* When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n protected focusActivePage() {\n requestAnimationFrame(() => {\n // for none range changing clicks we need to ensure a rendering before querying.\n const activeButtonElement =\n this.renderRoot.querySelector<HTMLElement>('.active');\n if (activeButtonElement) {\n activeButtonElement.focus();\n }\n });\n }\n\n protected renderFirst() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.firstLabel}\n ?disabled=${this._current === 1}\n @click=${() => this.goToPage(1)}></uui-button>`;\n }\n\n protected renderPrevious() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.previousLabel}\n ?disabled=${this._current === 1}\n @click=${this.goToPreviousPage}></uui-button>`;\n }\n\n protected renderNext() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.nextLabel}\n ?disabled=${this._current === this.total}\n @click=${this.goToNextPage}></uui-button>`;\n }\n\n protected renderLast() {\n return html`\n <uui-button\n compact\n class=\"nav\"\n label=${this.lastLabel}\n ?disabled=${this.total === this._current}\n @click=${() => this.goToPage(this.total)}></uui-button>\n `;\n }\n\n protected renderDots() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n tabindex=\"-1\"\n class=\"dots\"\n label=\"More pages\"\n >...</uui-button\n >`;\n }\n\n protected renderPage(page: number) {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n label=\"Go to page ${page}\"\n class=${'page' + (page === this._current ? ' active' : '')}\n tabindex=${page === this._current ? '-1' : ''}\n @click=${() => {\n if (page === this._current) return;\n this.goToPage(page);\n this.focusActivePage();\n }}>\n ${page}\n </uui-button>`;\n }\n\n protected renderLeftDots() {\n return html` ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n }\n protected renderRightDots() {\n return html`${this._visiblePages.includes(this.total)\n ? ''\n : this.renderDots()}`;\n }\n\n protected renderNavigationLeft() {\n return html` ${this.renderFirst()} ${this.renderPrevious()}`;\n }\n protected renderNavigationRight() {\n return html` ${this.renderNext()} ${this.renderLast()}`;\n }\n\n render() {\n // prettier-ignore\n return html`\n ${this.renderNavigationLeft()}\n <uui-button-group role=\"list\" id=\"pages\">\n ${this.renderLeftDots()}\n ${this._visiblePages.map(\n page =>\n this.renderPage(page)\n )}\n ${this.renderRightDots()}\n </uui-button-group>\n ${this.renderNavigationRight()}\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n width: 100%;\n gap: 1px;\n }\n uui-button-group {\n flex-grow: 1;\n }\n\n uui-button-group uui-button {\n --uui-button-border-color: var(--uui-color-border-standalone);\n --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n }\n\n uui-button-group uui-button:hover {\n z-index: 1;\n }\n\n .page {\n min-width: 36px;\n max-width: 72px;\n }\n .page.active {\n z-index: 1;\n }\n\n .nav {\n min-width: 72px;\n }\n\n .dots {\n pointer-events: none;\n min-width: 36px;\n max-width: 72px;\n }\n\n .active {\n pointer-events: none;\n --uui-button-font-weight: 700;\n --uui-button-contrast: var(--uui-color-selected);\n --uui-button-border-color: var(--uui-color-selected);\n --uui-button-border-width: 2px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/progress-bar/progress-bar.element.js CHANGED Viewed

@@ -37,19 +37,20 @@ const _UUIProgressBarElement = class _UUIProgressBarElement extends LitElement {
 _UUIProgressBarElement.styles = [
   css`
       :host {
-        width: 100%;
-        height: 4px;
         position: relative;
-        overflow: hidden;
-        background: var(--uui-color-surface-alt);
-        border-radius: 100px;
         display: inline-block;
+        width: 100%;
+        height: 3px;
+        overflow: clip;
+        background: var(--uui-color-surface-alt);
+        border-radius: 2px;
       }
       #bar {
         transition: width 250ms ease;
         background: var(--uui-color-positive);
         height: 100%;
+        border-radius: 2px;
         width: 0%;
       }
     `

package/dist/components/progress-bar/progress-bar.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.element.js","sources":["../../../src/components/progress-bar/progress-bar.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst clamp = (num: number, min: number, max: number) =>\n Math.min(Math.max(num, min), max);\n\n/*\n @element uui-progress-bar\n /\nexport class UUIProgressBarElement extends LitElement {\n private _progress = 0;\n /\n Set this to a number between 0 and 100 to reflect the progress of some operation.\n * @type {number}\n * @attr\n * @default 0\n */\n @property({ type: Number })\n get progress() {\n return this._progress;\n }\n\n set progress(newVal) {\n const oldVal = this._progress;\n this._progress = clamp(newVal, 0, 100);\n this.requestUpdate('progress', oldVal);\n }\n\n private _getProgressStyle() {\n return { width: `${this._progress}%` };\n }\n\n render() {\n return html`\n <div id=\"bar\" style=${styleMap(this._getProgressStyle())}></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n ~~width~~: ~~100%;\~~n ~~height~~: ~~4px~~;\n ~~position~~: ~~relative~~;\n overflow: ~~hidden~~;\n background: var(--uui-color-surface-alt);\n border-radius: ~~100px~~;\n ~~display: inline-block;\n~~ }\n\n #bar {\n transition: width 250ms ease;\n background: var(--uui-color-positive);\n height: 100%;\n width: 0%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,MAAM,QAAQ,CAAC,KAAa,KAAa,QACvC,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAK3B,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAAA,EAAA;AAAA,EAQpB,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAEQ,oBAAoB;AAC1B,WAAO,EAAE,OAAO,GAAG,KAAK,SAAS,IAAA;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,4BACiB,SAAS,KAAK,kBAAA,CAAmB,CAAC;AAAA;AAAA,EAE5D;~~AAsBF~~;~~AApBE~~,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9BG,IAAM,wBAAN;AASD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,sBASP,WAAA,UAAA;"}
1	+ {"version":3,"file":"progress-bar.element.js","sources":["../../../src/components/progress-bar/progress-bar.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst clamp = (num: number, min: number, max: number) =>\n Math.min(Math.max(num, min), max);\n\n/*\n @element uui-progress-bar\n /\nexport class UUIProgressBarElement extends LitElement {\n private _progress = 0;\n /\n Set this to a number between 0 and 100 to reflect the progress of some operation.\n * @type {number}\n * @attr\n * @default 0\n */\n @property({ type: Number })\n get progress() {\n return this._progress;\n }\n\n set progress(newVal) {\n const oldVal = this._progress;\n this._progress = clamp(newVal, 0, 100);\n this.requestUpdate('progress', oldVal);\n }\n\n private _getProgressStyle() {\n return { width: `${this._progress}%` };\n }\n\n render() {\n return html`\n <div id=\"bar\" style=${styleMap(this._getProgressStyle())}></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 3px;\n overflow: clip;\n background: var(--uui-color-surface-alt);\n border-radius: 2px;\n }\n\n #bar {\n transition: width 250ms ease;\n background: var(--uui-color-positive);\n height: 100%;\n border-radius: 2px;\n width: 0%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,MAAM,QAAQ,CAAC,KAAa,KAAa,QACvC,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAK3B,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAAA,EAAA;AAAA,EAQpB,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAEQ,oBAAoB;AAC1B,WAAO,EAAE,OAAO,GAAG,KAAK,SAAS,IAAA;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,4BACiB,SAAS,KAAK,kBAAA,CAAmB,CAAC;AAAA;AAAA,EAE5D;AAuBF;AArBE,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9BG,IAAM,wBAAN;AASD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,sBASP,WAAA,UAAA;"}

package/dist/components/responsive-container/responsive-container.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 _childElements, _hiddenElements, _hiddenElementsMap, _visibilityBreakpoints, _resizeObserver, _childResizeObservers, _breakPointCalculationInProgress, _isConnected, _UUIResponsiveContainerElement_instances, initialize_fn, onResize_fn, onSlotChange_fn, cleanup_fn, calculateBreakPoints_fn, updateCollapsibleItems_fn, hideElement_fn, collapseFromEnd_fn, collapseFromStart_fn, _onItemClicked;
+var _childElements, _hiddenElements, _clonedElements, _hiddenElementsMap, _visibilityBreakpoints, _resizeObserver, _childResizeObservers, _breakPointCalculationInProgress, _isConnected, _UUIResponsiveContainerElement_instances, initialize_fn, onResize_fn, onSlotChange_fn, cleanup_fn, calculateBreakPoints_fn, updateCollapsibleItems_fn, hideElement_fn, collapseFromEnd_fn, collapseFromStart_fn, _onItemClicked, onPopoverToggle_fn, buildDropdownItems_fn;
 import { LitElement, html, css } from "lit";
 import { query, property, queryAssignedElements } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -28,6 +28,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
     __privateAdd(this, _UUIResponsiveContainerElement_instances);
     __privateAdd(this, _childElements);
     __privateAdd(this, _hiddenElements);
+    __privateAdd(this, _clonedElements);
     __privateAdd(this, _hiddenElementsMap);
     __privateAdd(this, _visibilityBreakpoints);
     __privateAdd(this, _resizeObserver);
@@ -38,6 +39,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
     this.collapse = "end";
     __privateSet(this, _childElements, []);
     __privateSet(this, _hiddenElements, []);
+    __privateSet(this, _clonedElements, []);
     __privateSet(this, _hiddenElementsMap, /* @__PURE__ */ new Map());
     __privateSet(this, _visibilityBreakpoints, []);
     __privateSet(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _UUIResponsiveContainerElement_instances, onResize_fn).bind(this)));
@@ -88,9 +90,10 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
       <uui-popover-container
         id="popover-container"
         popover
+        @beforetoggle=${__privateMethod(this, _UUIResponsiveContainerElement_instances, onPopoverToggle_fn)}
         placement=${this.collapse === "start" ? "bottom-start" : "bottom-end"}>
         <div id="dropdown-container">
-          ${repeat(__privateGet(this, _hiddenElements), (el) => html`${el}`)}
+          ${repeat(__privateGet(this, _clonedElements), (el) => html`${el}`)}
         </div>
       </uui-popover-container>
     `;
@@ -98,6 +101,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
 };
 _childElements = new WeakMap();
 _hiddenElements = new WeakMap();
+_clonedElements = new WeakMap();
 _hiddenElementsMap = new WeakMap();
 _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
@@ -108,7 +112,7 @@ _UUIResponsiveContainerElement_instances = new WeakSet();
 initialize_fn = async function() {
   await this.updateComplete;
   if (!__privateGet(this, _isConnected)) return;
-  __privateGet(this, _resizeObserver).observe(this._mainElement);
+  __privateGet(this, _resizeObserver).observe(this);
   requestAnimationFrame(() => {
     if (!__privateGet(this, _isConnected)) return;
     __privateMethod(this, _UUIResponsiveContainerElement_instances, onSlotChange_fn).call(this);
@@ -138,9 +142,10 @@ cleanup_fn = function() {
   __privateGet(this, _childResizeObservers).forEach((observer) => observer.disconnect());
   __privateSet(this, _childResizeObservers, []);
   __privateSet(this, _visibilityBreakpoints, []);
-  __privateGet(this, _hiddenElements).forEach((el) => {
+  __privateGet(this, _clonedElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onItemClicked));
   });
+  __privateSet(this, _clonedElements, []);
   __privateSet(this, _hiddenElements, []);
   __privateGet(this, _hiddenElementsMap).clear();
 };
@@ -162,17 +167,19 @@ calculateBreakPoints_fn = async function() {
   }
   const tolerance = 2;
   this._mainElement.style.width = totalWidth - gap + tolerance + "px";
-  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, this._mainElement.offsetWidth);
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, this.offsetWidth);
   __privateSet(this, _breakPointCalculationInProgress, false);
 };
 // The main logic that shows/hides items
 updateCollapsibleItems_fn = function(containerWidth) {
   const moreButtonWidth = this._moreButtonElement?.offsetWidth || 40;
   const availableWidth = containerWidth - moreButtonWidth;
-  __privateGet(this, _hiddenElements).forEach((el) => {
-    el.removeEventListener("click", __privateGet(this, _onItemClicked));
-  });
   __privateSet(this, _hiddenElements, []);
+  __privateGet(this, _clonedElements).forEach(
+    (el) => el.removeEventListener("click", __privateGet(this, _onItemClicked))
+  );
+  __privateSet(this, _clonedElements, []);
+  this._popoverContainerElement?.hidePopover();
   __privateGet(this, _hiddenElementsMap).clear();
   if (this.collapse === "end") {
     __privateMethod(this, _UUIResponsiveContainerElement_instances, collapseFromEnd_fn).call(this, containerWidth, availableWidth);
@@ -189,12 +196,7 @@ updateCollapsibleItems_fn = function(containerWidth) {
 };
 hideElement_fn = function(element) {
   element.style.display = "none";
-  const clone = element.cloneNode(true);
-  clone.style.display = "";
-  clone.addEventListener("click", __privateGet(this, _onItemClicked));
-  __privateGet(this, _hiddenElementsMap).set(clone, element);
-  __privateGet(this, _hiddenElementsMap).set(element, clone);
-  __privateGet(this, _hiddenElements).push(clone);
+  __privateGet(this, _hiddenElements).push(element);
 };
 collapseFromEnd_fn = function(containerWidth, availableWidth) {
   const len = __privateGet(this, _visibilityBreakpoints).length;
@@ -225,6 +227,26 @@ collapseFromStart_fn = function(containerWidth, availableWidth) {
   }
 };
 _onItemClicked = new WeakMap();
+onPopoverToggle_fn = function(e) {
+  if (e.newState === "open") {
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, buildDropdownItems_fn).call(this);
+  }
+};
+buildDropdownItems_fn = function() {
+  __privateGet(this, _clonedElements).forEach(
+    (el) => el.removeEventListener("click", __privateGet(this, _onItemClicked))
+  );
+  __privateSet(this, _clonedElements, []);
+  __privateGet(this, _hiddenElementsMap).clear();
+  for (const original of __privateGet(this, _hiddenElements)) {
+    const clone = original.cloneNode(true);
+    clone.style.display = "";
+    clone.addEventListener("click", __privateGet(this, _onItemClicked));
+    __privateGet(this, _hiddenElementsMap).set(clone, original);
+    __privateGet(this, _clonedElements).push(clone);
+  }
+  this.requestUpdate();
+};
 _UUIResponsiveContainerElement.styles = [
   css`
       :host {

package/dist/components/responsive-container/responsive-container.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"responsive-container.element.js","sources":["../../../src/components/responsive-container/responsive-container.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 '../button/button.js';\nimport '../popover-container/popover-container.js';\nimport '../symbol-more/symbol-more.js';\n\n/*\n A responsive container that collapses overflowing children into a dropdown.\n \n @element uui-responsive-container\n * @slot - Default slot for child elements (buttons, etc.)\n * @cssprop --uui-responsive-container-gap - Gap between items (default: 8px)\n /\nexport class UUIResponsiveContainerElement extends LitElement {\n // These help us find elements inside the component\n @query('#more-button')\n private readonly _moreButtonElement!: UUIButtonElement;\n\n @query('#popover-container')\n private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n @query('#main')\n private readonly _mainElement!: HTMLElement;\n\n /\n Controls which side items collapse from.\n * - \"end\": Items collapse from the right, more button appears on right (default)\n * - \"start\": Items collapse from the left, more button appears on left\n * @attr collapse\n * @default \"end\"\n */\n @property({ type: String, reflect: true })\n collapse: 'start' \| 'end' = 'end';\n\n // This gets all elements put inside the slot\n @queryAssignedElements({ flatten: true })\n private readonly _slottedNodes?: HTMLElement[];\n\n // These store the component's internal state\n #childElements: HTMLElement[] = []; // All child elements\n #hiddenElements: HTMLElement[] = []; // Elements in the dropdown\n readonly #hiddenElementsMap: Map<HTMLElement, HTMLElement> = new Map();\n #visibilityBreakpoints: number[] = []; // Width thresholds for each item\n\n // ResizeObserver watches for size changes\n readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n #childResizeObservers: ResizeObserver[] = [];\n #breakPointCalculationInProgress = false;\n\n #isConnected = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.#isConnected = true;\n this.#initialize();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#isConnected = false;\n this.#resizeObserver.disconnect();\n this.#cleanup();\n }\n\n async #initialize() {\n await this.updateComplete;\n if (!this.#isConnected) return;\n this.#resizeObserver.observe(this._mainElement);\n\n requestAnimationFrame(() => {\n if (!this.#isConnected) return;\n this.#onSlotChange();\n });\n }\n\n // This runs when the container size changes\n #onResize(entries: ResizeObserverEntry[]) {\n if (!this.#isConnected) return;\n const newWidth = entries[0].contentBoxSize[0].inlineSize;\n this.#updateCollapsibleItems(newWidth);\n }\n\n // This runs when children are added/removed\n #onSlotChange() {\n if (!this.#isConnected) return;\n\n this.#cleanup();\n this.#childElements = this._slottedNodes ? [...this._slottedNodes] : [];\n\n this.#childElements.forEach(el => {\n const observer = new ResizeObserver(\n this.#calculateBreakPoints.bind(this),\n );\n observer.observe(el);\n this.#childResizeObservers.push(observer);\n });\n\n this.#calculateBreakPoints();\n }\n\n #cleanup() {\n this.#childResizeObservers.forEach(observer => observer.disconnect());\n this.#childResizeObservers = [];\n this.#visibilityBreakpoints = [];\n\n // Clean up hidden elements\n this.#hiddenElements.forEach(el => {\n el.removeEventListener('click', this.#onItemClicked);\n });\n this.#hiddenElements = [];\n this.#hiddenElementsMap.clear();\n }\n\n // Calculate at what widths items should hide\n async #calculateBreakPoints() {\n if (!this.#isConnected) return;\n if (this.#breakPointCalculationInProgress) return;\n\n this.#breakPointCalculationInProgress = true;\n\n await this.updateComplete;\n\n // Get the gap from CSS or use default\n const gapCSSVar = Number.parseFloat(\n getComputedStyle(this).getPropertyValue('--uui-responsive-container-gap'),\n );\n const gap = Number.isNaN(gapCSSVar) ? 8 : gapCSSVar;\n\n let totalWidth = 0;\n\n // Calculate cumulative width for each item\n for (let i = 0; i < this.#childElements.length; i++) {\n this.#childElements[i].style.display = '';\n totalWidth += this.#childElements[i].offsetWidth;\n this.#visibilityBreakpoints[i] = totalWidth;\n totalWidth += gap;\n }\n\n // Set the container width\n const tolerance = 2;\n this._mainElement.style.width = totalWidth - gap + tolerance + 'px';\n\n this.#updateCollapsibleItems(this._mainElement.offsetWidth);\n this.#breakPointCalculationInProgress = false;\n }\n\n // The main logic that shows/hides items\n #updateCollapsibleItems(containerWidth: number) {\n const moreButtonWidth = this._moreButtonElement?.offsetWidth \|\| 40;\n const availableWidth = containerWidth - moreButtonWidth;\n\n // Clear previous hidden items\n this.#hiddenElements.forEach(el => {\n el.removeEventListener('click', this.#onItemClicked);\n });\n this.#hiddenElements = [];\n this.#hiddenElementsMap.clear();\n\n if (this.collapse === 'end') {\n this.#collapseFromEnd(containerWidth, availableWidth);\n } else {\n this.#collapseFromStart(containerWidth, availableWidth);\n }\n\n // Show/hide the \"more\" button\n if (this.#hiddenElements.length === 0) {\n this._moreButtonElement.style.display = 'none';\n this._popoverContainerElement?.hidePopover();\n } else {\n this._moreButtonElement.style.display = '';\n }\n\n this.requestUpdate();\n }\n\n #hideElement(element: HTMLElement) {\n element.style.display = 'none';\n const clone = element.cloneNode(true) as HTMLElement;\n clone.style.display = '';\n clone.addEventListener('click', this.#onItemClicked);\n\n // Link clone ↔ original (bidirectional)\n this.#hiddenElementsMap.set(clone, element);\n this.#hiddenElementsMap.set(element, clone);\n this.#hiddenElements.push(clone);\n }\n\n #collapseFromEnd(containerWidth: number, availableWidth: number) {\n const len = this.#visibilityBreakpoints.length;\n\n for (let i = 0; i < len; i++) {\n const breakpoint = this.#visibilityBreakpoints[i];\n const element = this.#childElements[i];\n\n // Last item: use full width (no more button needed if all fit)\n const widthToCheck = i === len - 1 ? containerWidth : availableWidth;\n\n if (breakpoint <= widthToCheck) {\n element.style.display = '';\n } else {\n this.#hideElement(element);\n }\n }\n }\n\n #collapseFromStart(containerWidth: number, availableWidth: number) {\n const len = this.#visibilityBreakpoints.length;\n const totalWidth = this.#visibilityBreakpoints[len - 1] \|\| 0;\n\n for (let i = 0; i < len; i++) {\n const element = this.#childElements[i];\n // Width from this item to the end\n const widthFromEnd =\n totalWidth - (i > 0 ? this.#visibilityBreakpoints[i - 1] : 0);\n\n // First visible item: use full width (no more button needed if all fit)\n const isFirstPotentiallyVisible =\n i === 0 \|\| this.#childElements[i - 1].style.display === 'none';\n const widthToCheck =\n isFirstPotentiallyVisible && this.#hiddenElements.length === 0\n ? containerWidth\n : availableWidth;\n\n if (widthFromEnd <= widthToCheck) {\n element.style.display = '';\n } else {\n this.#hideElement(element);\n }\n }\n }\n\n readonly #onItemClicked = (e: MouseEvent) => {\n const clickedElement = e.currentTarget as HTMLElement;\n\n // Find the original element linked to this clone\n const originalElement = this.#hiddenElementsMap.get(clickedElement);\n\n if (originalElement) {\n // Close the dropdown\n this._popoverContainerElement?.hidePopover();\n\n // Trigger click on the ORIGINAL element so its event handlers fire\n originalElement.click();\n }\n };\n\n render() {\n const moreButton = html`\n <uui-button\n popovertarget=\"popover-container\"\n style=\"display: none\"\n id=\"more-button\"\n label=\"More\"\n compact>\n <slot name=\"trigger-content\">\n <uui-symbol-more></uui-symbol-more>\n </slot>\n </uui-button>\n `;\n\n return html`\n <div id=\"main\">\n ${this.collapse === 'start' ? moreButton : ''}\n <div id=\"items-container\">\n <slot @slotchange=${this.#onSlotChange}></slot>\n </div>\n ${this.collapse === 'end' ? moreButton : ''}\n </div>\n <uui-popover-container\n id=\"popover-container\"\n popover\n placement=${this.collapse === 'start' ? 'bottom-start' : 'bottom-end'}>\n <div id=\"dropdown-container\">\n ${repeat(this.#hiddenElements, el => html`${el}`)}\n </div>\n </uui-popover-container>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: flex;\n min-width: 0;\n }\n\n #main {\n display: flex;\n overflow: hidden;\n align-items: center;\n }\n\n #items-container {\n display: flex;\n gap: var(--uui-responsive-container-gap, var(--uui-size-3));\n overflow: hidden;\n align-items: center;\n }\n\n #more-button {\n --uui-button-background-color: transparent;\n --uui-button-background-color-hover: var(--uui-color-surface-alt);\n flex-shrink: 0;\n }\n\n :host([collapse='end']) #more-button,\n :host(:not([collapse])) #more-button {\n margin-left: var(--uui-responsive-container-gap, var(--uui-size-3));\n }\n\n :host([collapse='start']) #more-button {\n margin-right: var(--uui-responsive-container-gap, var(--uui-size-3));\n }\n\n #dropdown-container {\n display: flex;\n flex-direction: column;\n background-color: var(--uui-color-surface);\n border-radius: var(--uui-border-radius);\n box-shadow: var(--uui-shadow-depth-3);\n overflow: hidden;\n padding: var(--uui-size-space-2);\n gap: var(--uui-size-space-1);\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"responsive-container.element.js","sources":["../../../src/components/responsive-container/responsive-container.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 '../button/button.js';\nimport '../popover-container/popover-container.js';\nimport '../symbol-more/symbol-more.js';\n\n/*\n A responsive container that collapses overflowing children into a dropdown.\n \n @element uui-responsive-container\n * @slot - Default slot for child elements (buttons, etc.)\n * @cssprop --uui-responsive-container-gap - Gap between items (default: 8px)\n /\nexport class UUIResponsiveContainerElement extends LitElement {\n // These help us find elements inside the component\n @query('#more-button')\n private readonly _moreButtonElement!: UUIButtonElement;\n\n @query('#popover-container')\n private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n @query('#main')\n private readonly _mainElement!: HTMLElement;\n\n /\n Controls which side items collapse from.\n * - \"end\": Items collapse from the right, more button appears on right (default)\n * - \"start\": Items collapse from the left, more button appears on left\n * @attr collapse\n * @default \"end\"\n */\n @property({ type: String, reflect: true })\n collapse: 'start' \| 'end' = 'end';\n\n // This gets all elements put inside the slot\n @queryAssignedElements({ flatten: true })\n private readonly _slottedNodes?: HTMLElement[];\n\n // These store the component's internal state\n #childElements: HTMLElement[] = []; // All child elements\n #hiddenElements: HTMLElement[] = []; // Elements in the dropdown\n #clonedElements: HTMLElement[] = []; // Clones of hidden elements for the dropdown\n readonly #hiddenElementsMap: Map<HTMLElement, HTMLElement> = new Map();\n #visibilityBreakpoints: number[] = []; // Width thresholds for each item\n\n // ResizeObserver watches for size changes\n readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n #childResizeObservers: ResizeObserver[] = [];\n #breakPointCalculationInProgress = false;\n\n #isConnected = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.#isConnected = true;\n this.#initialize();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#isConnected = false;\n this.#resizeObserver.disconnect();\n this.#cleanup();\n }\n\n async #initialize() {\n await this.updateComplete;\n if (!this.#isConnected) return;\n this.#resizeObserver.observe(this);\n\n requestAnimationFrame(() => {\n if (!this.#isConnected) return;\n this.#onSlotChange();\n });\n }\n\n // This runs when the container size changes\n #onResize(entries: ResizeObserverEntry[]) {\n if (!this.#isConnected) return;\n const newWidth = entries[0].contentBoxSize[0].inlineSize;\n this.#updateCollapsibleItems(newWidth);\n }\n\n // This runs when children are added/removed\n #onSlotChange() {\n if (!this.#isConnected) return;\n\n this.#cleanup();\n this.#childElements = this._slottedNodes ? [...this._slottedNodes] : [];\n\n this.#childElements.forEach(el => {\n const observer = new ResizeObserver(\n this.#calculateBreakPoints.bind(this),\n );\n observer.observe(el);\n this.#childResizeObservers.push(observer);\n });\n\n this.#calculateBreakPoints();\n }\n\n #cleanup() {\n this.#childResizeObservers.forEach(observer => observer.disconnect());\n this.#childResizeObservers = [];\n this.#visibilityBreakpoints = [];\n\n // Clean up hidden elements\n this.#clonedElements.forEach(el => {\n el.removeEventListener('click', this.#onItemClicked);\n });\n this.#clonedElements = [];\n this.#hiddenElements = [];\n this.#hiddenElementsMap.clear();\n }\n\n // Calculate at what widths items should hide\n async #calculateBreakPoints() {\n if (!this.#isConnected) return;\n if (this.#breakPointCalculationInProgress) return;\n\n this.#breakPointCalculationInProgress = true;\n\n await this.updateComplete;\n\n // Get the gap from CSS or use default\n const gapCSSVar = Number.parseFloat(\n getComputedStyle(this).getPropertyValue('--uui-responsive-container-gap'),\n );\n const gap = Number.isNaN(gapCSSVar) ? 8 : gapCSSVar;\n\n let totalWidth = 0;\n\n // Calculate cumulative width for each item\n for (let i = 0; i < this.#childElements.length; i++) {\n this.#childElements[i].style.display = '';\n totalWidth += this.#childElements[i].offsetWidth;\n this.#visibilityBreakpoints[i] = totalWidth;\n totalWidth += gap;\n }\n\n // Set the container width\n const tolerance = 2;\n this._mainElement.style.width = totalWidth - gap + tolerance + 'px';\n\n this.#updateCollapsibleItems(this.offsetWidth);\n this.#breakPointCalculationInProgress = false;\n }\n\n // The main logic that shows/hides items\n #updateCollapsibleItems(containerWidth: number) {\n const moreButtonWidth = this._moreButtonElement?.offsetWidth \|\| 40;\n const availableWidth = containerWidth - moreButtonWidth;\n\n // Clear previous hidden items\n this.#hiddenElements = [];\n this.#clonedElements.forEach(el =>\n el.removeEventListener('click', this.#onItemClicked),\n );\n this.#clonedElements = [];\n this._popoverContainerElement?.hidePopover();\n this.#hiddenElementsMap.clear();\n\n if (this.collapse === 'end') {\n this.#collapseFromEnd(containerWidth, availableWidth);\n } else {\n this.#collapseFromStart(containerWidth, availableWidth);\n }\n\n // Show/hide the \"more\" button\n if (this.#hiddenElements.length === 0) {\n this._moreButtonElement.style.display = 'none';\n this._popoverContainerElement?.hidePopover();\n } else {\n this._moreButtonElement.style.display = '';\n }\n\n this.requestUpdate();\n }\n\n #hideElement(element: HTMLElement) {\n element.style.display = 'none';\n this.#hiddenElements.push(element);\n }\n\n #collapseFromEnd(containerWidth: number, availableWidth: number) {\n const len = this.#visibilityBreakpoints.length;\n\n for (let i = 0; i < len; i++) {\n const breakpoint = this.#visibilityBreakpoints[i];\n const element = this.#childElements[i];\n\n // Last item: use full width (no more button needed if all fit)\n const widthToCheck = i === len - 1 ? containerWidth : availableWidth;\n\n if (breakpoint <= widthToCheck) {\n element.style.display = '';\n } else {\n this.#hideElement(element);\n }\n }\n }\n\n #collapseFromStart(containerWidth: number, availableWidth: number) {\n const len = this.#visibilityBreakpoints.length;\n const totalWidth = this.#visibilityBreakpoints[len - 1] \|\| 0;\n\n for (let i = 0; i < len; i++) {\n const element = this.#childElements[i];\n // Width from this item to the end\n const widthFromEnd =\n totalWidth - (i > 0 ? this.#visibilityBreakpoints[i - 1] : 0);\n\n // First visible item: use full width (no more button needed if all fit)\n const isFirstPotentiallyVisible =\n i === 0 \|\| this.#childElements[i - 1].style.display === 'none';\n const widthToCheck =\n isFirstPotentiallyVisible && this.#hiddenElements.length === 0\n ? containerWidth\n : availableWidth;\n\n if (widthFromEnd <= widthToCheck) {\n element.style.display = '';\n } else {\n this.#hideElement(element);\n }\n }\n }\n\n readonly #onItemClicked = (e: MouseEvent) => {\n const clickedElement = e.currentTarget as HTMLElement;\n\n // Find the original element linked to this clone\n const originalElement = this.#hiddenElementsMap.get(clickedElement);\n\n if (originalElement) {\n // Close the dropdown\n this._popoverContainerElement?.hidePopover();\n\n // Trigger click on the ORIGINAL element so its event handlers fire\n originalElement.click();\n }\n };\n\n #onPopoverToggle(e: ToggleEvent) {\n if (e.newState === 'open') {\n this.#buildDropdownItems();\n }\n }\n\n #buildDropdownItems() {\n // Clear old clones\n this.#clonedElements.forEach(el =>\n el.removeEventListener('click', this.#onItemClicked),\n );\n this.#clonedElements = [];\n this.#hiddenElementsMap.clear();\n\n for (const original of this.#hiddenElements) {\n const clone = original.cloneNode(true) as HTMLElement;\n clone.style.display = '';\n clone.addEventListener('click', this.#onItemClicked);\n this.#hiddenElementsMap.set(clone, original);\n this.#clonedElements.push(clone);\n }\n this.requestUpdate();\n }\n\n render() {\n const moreButton = html`\n <uui-button\n popovertarget=\"popover-container\"\n style=\"display: none\"\n id=\"more-button\"\n label=\"More\"\n compact>\n <slot name=\"trigger-content\">\n <uui-symbol-more></uui-symbol-more>\n </slot>\n </uui-button>\n `;\n\n return html`\n <div id=\"main\">\n ${this.collapse === 'start' ? moreButton : ''}\n <div id=\"items-container\">\n <slot @slotchange=${this.#onSlotChange}></slot>\n </div>\n ${this.collapse === 'end' ? moreButton : ''}\n </div>\n <uui-popover-container\n id=\"popover-container\"\n popover\n @beforetoggle=${this.#onPopoverToggle}\n placement=${this.collapse === 'start' ? 'bottom-start' : 'bottom-end'}>\n <div id=\"dropdown-container\">\n ${repeat(this.#clonedElements, el => html`${el}`)}\n </div>\n </uui-popover-container>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: flex;\n min-width: 0;\n }\n\n #main {\n display: flex;\n overflow: hidden;\n align-items: center;\n }\n\n #items-container {\n display: flex;\n gap: var(--uui-responsive-container-gap, var(--uui-size-3));\n overflow: hidden;\n align-items: center;\n }\n\n #more-button {\n --uui-button-background-color: transparent;\n --uui-button-background-color-hover: var(--uui-color-surface-alt);\n flex-shrink: 0;\n }\n\n :host([collapse='end']) #more-button,\n :host(:not([collapse])) #more-button {\n margin-left: var(--uui-responsive-container-gap, var(--uui-size-3));\n }\n\n :host([collapse='start']) #more-button {\n margin-right: var(--uui-responsive-container-gap, var(--uui-size-3));\n }\n\n #dropdown-container {\n display: flex;\n flex-direction: column;\n background-color: var(--uui-color-surface);\n border-radius: var(--uui-border-radius);\n box-shadow: var(--uui-shadow-depth-3);\n overflow: hidden;\n padding: var(--uui-size-space-2);\n gap: var(--uui-size-space-1);\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/scroll-container/scroll-container.element.js CHANGED Viewed

@@ -32,7 +32,7 @@ _UUIScrollContainerElement.styles = [
         overflow-y: overlay;
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
-        transition: scrollbar-color 120ms 640ms;
+        transition: scrollbar-color 480ms 480ms ease-in;
       }
       :host([enforce-scroll]) {
@@ -42,8 +42,8 @@ _UUIScrollContainerElement.styles = [
       :host(:hover),
       :host(:focus),
       :host(:focus-within) {
-        scrollbar-color: var(--uui-color-disabled-contrast) transparent;
-        transition: scrollbar-color 60ms;
+        scrollbar-color: var(--uui-color-disabled-standalone) transparent;
+        transition: scrollbar-color 120ms ease-out;
       }
       :host::-webkit-scrollbar {
@@ -65,7 +65,7 @@ _UUIScrollContainerElement.styles = [
       :host(:hover)::-webkit-scrollbar-thumb,
       :host(:focus)::-webkit-scrollbar-thumb,
       :host(:focus-within)::-webkit-scrollbar-thumb {
-        background-color: var(--uui-color-disabled-contrast);
+        background-color: var(--uui-color-disabled-standalone);
       }
     `
 ];

package/dist/components/scroll-container/scroll-container.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-container.element.js","sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/*\n @element uui-scroll-container\n * @slot - for content\n * @attribute enforce-scroll - forces the scrollbar to appear\n * @description - Component for displaying a larger amount of .\n \n /\nexport class UUIScrollContainerElement extends LitElement {\n /*\n @type {boolean}\n * @attr forces the scrollbar to appear\n */\n @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n enforceScroll = false;\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: block;\n overflow-y: auto;\n overflow-y: overlay;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n transition: scrollbar-color ~~120ms~~ ~~640ms~~;\n }\n\n :host([enforce-scroll]) {\n overflow-y: scroll;\n }\n :host([enforce-scroll]),\n :host(:hover),\n :host(:focus),\n :host(:focus-within) {\n scrollbar-color: var(--uui-color-disabled-~~contrast~~) transparent;\n transition: scrollbar-color ~~60ms~~;\n }\n\n :host::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n :host::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 3px;\n }\n\n :host::-webkit-scrollbar-thumb {\n background-color: transparent;\n border-radius: 3px;\n }\n\n :host([enforce-scroll])::-webkit-scrollbar-thumb,\n :host(:hover)::-webkit-scrollbar-thumb,\n :host(:focus)::-webkit-scrollbar-thumb,\n :host(:focus-within)::-webkit-scrollbar-thumb {\n background-color: var(--uui-color-disabled-~~contrast~~);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,6BAAN,MAAM,mCAAkC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEhB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAClC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO;AAAA,EACT;AA+CF;AA7CE,2BAAyB,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;AAnBG,IAAM,4BAAN;AAML,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB;AAAA,GAL5D,0BAMX,WAAA,eAAA;"}
1	+ {"version":3,"file":"scroll-container.element.js","sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/*\n @element uui-scroll-container\n * @slot - for content\n * @attribute enforce-scroll - forces the scrollbar to appear\n * @description - Component for displaying a larger amount of .\n \n /\nexport class UUIScrollContainerElement extends LitElement {\n /*\n @type {boolean}\n * @attr forces the scrollbar to appear\n */\n @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n enforceScroll = false;\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: block;\n overflow-y: auto;\n overflow-y: overlay;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n transition: scrollbar-color 480ms 480ms ease-in;\n }\n\n :host([enforce-scroll]) {\n overflow-y: scroll;\n }\n :host([enforce-scroll]),\n :host(:hover),\n :host(:focus),\n :host(:focus-within) {\n scrollbar-color: var(--uui-color-disabled-standalone) transparent;\n transition: scrollbar-color 120ms ease-out;\n }\n\n :host::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n :host::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 3px;\n }\n\n :host::-webkit-scrollbar-thumb {\n background-color: transparent;\n border-radius: 3px;\n }\n\n :host([enforce-scroll])::-webkit-scrollbar-thumb,\n :host(:hover)::-webkit-scrollbar-thumb,\n :host(:focus)::-webkit-scrollbar-thumb,\n :host(:focus-within)::-webkit-scrollbar-thumb {\n background-color: var(--uui-color-disabled-standalone);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,6BAAN,MAAM,mCAAkC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEhB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAClC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO;AAAA,EACT;AA+CF;AA7CE,2BAAyB,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;AAnBG,IAAM,4BAAN;AAML,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB;AAAA,GAL5D,0BAMX,WAAA,eAAA;"}

package/dist/components/symbol-expand/symbol-expand.element.js CHANGED Viewed

@@ -38,7 +38,7 @@ _UUISymbolExpandElement.styles = [
       svg {
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
-        transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1);
+        transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
         width: 100%;
         height: 100%;
       }

package/dist/components/symbol-expand/symbol-expand.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"symbol-expand.element.js","sources":["../../../src/components/symbol-expand/symbol-expand.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/*\n A symbol indicating whether related composition is expanded or collapsed\n * @element uui-symbol-expand\n /\nexport class UUISymbolExpandElement extends LitElement {\n /\n Set this boolean to true for a open/expanded look.\n * @type {boolean}\n * @default false\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n render() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"m4 9 8 8 8-8\"></path>\n </svg>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n width: 12px;\n vertical-align: middle;\n }\n\n svg {\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: transform ~~100ms~~ cubic-bezier(0.1, 0, 0.9, 1);\n width: 100%;\n height: 100%;\n }\n\n :host([open]) svg {\n transform: rotate(0deg);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AAuBF;AArBE,wBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBG,IAAM,yBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,uBAQJ,WAAA,MAAA;"}
1	+ {"version":3,"file":"symbol-expand.element.js","sources":["../../../src/components/symbol-expand/symbol-expand.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/*\n A symbol indicating whether related composition is expanded or collapsed\n * @element uui-symbol-expand\n /\nexport class UUISymbolExpandElement extends LitElement {\n /\n Set this boolean to true for a open/expanded look.\n * @type {boolean}\n * @default false\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n render() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"m4 9 8 8 8-8\"></path>\n </svg>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n width: 12px;\n vertical-align: middle;\n }\n\n svg {\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n width: 100%;\n height: 100%;\n }\n\n :host([open]) svg {\n transform: rotate(0deg);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AAuBF;AArBE,wBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBG,IAAM,yBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,uBAQJ,WAAA,MAAA;"}

package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js CHANGED Viewed

@@ -8,8 +8,40 @@ var _UUISymbolFileThumbnailElement_instances, onImageError_fn;
 import { LitElement, html, css } from "lit";
 import { property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import "../icon/icon.js";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
 import { iconPicture } from "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
+import "../icon/icon.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -36,6 +68,7 @@ const _UUISymbolFileThumbnailElement = class _UUISymbolFileThumbnailElement exte
     return when(
       this.src && !this._imageError,
       () => html`<img
+          decoding="async"
           src=${this.src}
           alt=${this.alt}
           @error=${__privateMethod(this, _UUISymbolFileThumbnailElement_instances, onImageError_fn)} />`,

package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"symbol-file-thumbnail.element.js","sources":["../../../src/components/symbol-file-thumbnail/symbol-file-thumbnail.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { iconPicture } from '../icon-registry-essential/svgs/index.js';\n\nimport '../icon/icon.js';\n\n/*\n @element uui-symbol-file-thumbnail\n * @description - Symbol to display a thumbnail.\n /\nexport class UUISymbolFileThumbnailElement extends LitElement {\n /\n Source of the thumbnail.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n src: string = '';\n\n /\n Alt of the thumbnail.\n * @type {string}\n * @attr\n * @default ''\n */\n @property({ type: String })\n alt: string = '';\n\n @state()\n private _imageError = false;\n\n protected override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('src')) {\n this._imageError = false;\n }\n }\n\n render() {\n return when(\n this.src && !this._imageError,\n () =>\n html`<img\n src=${this.src}\n alt=${this.alt}\n @error=${this.#onImageError} />`,\n () =>\n html`<uui-icon\n name=\"picture\"\n .fallback=${iconPicture.strings[0]}></uui-icon>`,\n );\n }\n\n #onImageError() {\n this._imageError = true;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n\n uui-icon {\n width: 100%;\n height: 100%;\n max-width: 100%;\n display: flex;\n max-height: 100%;\n justify-content: center;\n color: var(--uui-color-surface);\n background: var(--uui-color-surface-alt);\n }\n `,\n ];\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;~~AAYO,MAAM,iCAAN,MAAM,uCAAsC,WAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,MAAc;AASd,SAAA,MAAc;AAGd,SAAQ,cAAc;AAAA,EAAA;AAAA,EAEH,WAAW,SAA+B;AAC3D,QAAI,QAAQ,IAAI,KAAK,GAAG;AACtB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,MACL,KAAK,OAAO,CAAC,KAAK;AAAA,MAClB,MACE;AAAA,~~gBACQ~~,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,mBACL,sBAAK,0DAAa;AAAA,MAC/B,MACE;AAAA;AAAA,sBAEc,YAAY,QAAQ,CAAC,CAAC;AAAA,IAAA;AAAA,EAE1C;AAgCF;~~AAzEO~~;~~AA2CL~~,kBAAA,WAAgB;AACd,OAAK,cAAc;AACrB;AAEA,+BAAyB,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;~~AAhDG~~,IAAM,gCAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,8BAQX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,8BAiBX,WAAA,KAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnBI,8BAoBH,WAAA,aAAA;"}
1	+ {"version":3,"file":"symbol-file-thumbnail.element.js","sources":["../../../src/components/symbol-file-thumbnail/symbol-file-thumbnail.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { iconPicture } from '../icon-registry-essential/svgs/index.js';\n\nimport '../icon/icon.js';\n\n/*\n @element uui-symbol-file-thumbnail\n * @description - Symbol to display a thumbnail.\n /\nexport class UUISymbolFileThumbnailElement extends LitElement {\n /\n Source of the thumbnail.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n src: string = '';\n\n /\n Alt of the thumbnail.\n * @type {string}\n * @attr\n * @default ''\n */\n @property({ type: String })\n alt: string = '';\n\n @state()\n private _imageError = false;\n\n protected override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('src')) {\n this._imageError = false;\n }\n }\n\n render() {\n return when(\n this.src && !this._imageError,\n () =>\n html`<img\n decoding=\"async\"\n src=${this.src}\n alt=${this.alt}\n @error=${this.#onImageError} />`,\n () =>\n html`<uui-icon\n name=\"picture\"\n .fallback=${iconPicture.strings[0]}></uui-icon>`,\n );\n }\n\n #onImageError() {\n this._imageError = true;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n\n uui-icon {\n width: 100%;\n height: 100%;\n max-width: 100%;\n display: flex;\n max-height: 100%;\n justify-content: center;\n color: var(--uui-color-surface);\n background: var(--uui-color-surface-alt);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,iCAAN,MAAM,uCAAsC,WAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,MAAc;AASd,SAAA,MAAc;AAGd,SAAQ,cAAc;AAAA,EAAA;AAAA,EAEH,WAAW,SAA+B;AAC3D,QAAI,QAAQ,IAAI,KAAK,GAAG;AACtB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,MACL,KAAK,OAAO,CAAC,KAAK;AAAA,MAClB,MACE;AAAA;AAAA,gBAEQ,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,mBACL,sBAAK,0DAAa;AAAA,MAC/B,MACE;AAAA;AAAA,sBAEc,YAAY,QAAQ,CAAC,CAAC;AAAA,IAAA;AAAA,EAE1C;AAgCF;AA1EO;AA4CL,kBAAA,WAAgB;AACd,OAAK,cAAc;AACrB;AAEA,+BAAyB,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;AAjDG,IAAM,gCAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,8BAQX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,8BAiBX,WAAA,KAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnBI,8BAoBH,WAAA,aAAA;"}

package/dist/components/table/table-head.element.js CHANGED Viewed

@@ -11,8 +11,12 @@ const _UUITableHeadElement = class _UUITableHeadElement extends LitElement {
 _UUITableHeadElement.styles = [
   css`
       :host {
+        position: sticky;
         display: table-header-group;
         font-weight: bold;
+        top: 0;
+        z-index: 1;
+        background-color: var(--uui-color-surface, #fff);
       }
     `
 ];

package/dist/components/table/table-head.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-head.element.js","sources":["../../../src/components/table/table-head.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n Table head element. Holds the styles for table head. Parent to uui-table-head-cell.\n * @element uui-table-head\n * @slot - slot for uui-table-head-cell elements.\n */\nexport class UUITableHeadElement extends LitElement {\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'row');\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: table-header-group;\n font-weight: bold;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAClD,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;~~AAUF~~;~~AARE~~,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,sBAAN;"}
1	+ {"version":3,"file":"table-head.element.js","sources":["../../../src/components/table/table-head.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n Table head element. Holds the styles for table head. Parent to uui-table-head-cell.\n * @element uui-table-head\n * @slot - slot for uui-table-head-cell elements.\n */\nexport class UUITableHeadElement extends LitElement {\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'row');\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: sticky;\n display: table-header-group;\n font-weight: bold;\n top: 0;\n z-index: 1;\n background-color: var(--uui-color-surface, #fff);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAClD,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAcF;AAZE,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,sBAAN;"}

package/dist/components/table/table.element.js CHANGED Viewed

@@ -14,9 +14,13 @@ _UUITableElement.styles = [
       :host {
         display: table;
         width: 100%;
-        border-radius: var(--uui-border-radius);
         background-color: var(--uui-color-surface);
         cursor: default;
+        border-radius: var(--uui-border-radius-3);
+        border-width: var(--uui-box-border-width, 1px);
+        border-style: solid;
+        border-color: var(--uui-color-divider-standalone);
       }
     `
 ];

package/dist/components/table/table.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.element.js","sources":["../../../src/components/table/table.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.\n * @element uui-table\n * @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.\n /\nexport class UUITableElement extends LitElement {\n / consider select-only attribute on this level? */\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: table;\n width: 100%;\n border-radius: var(--uui-border-radius);\n ~~background~~-~~color~~: var(--uui-~~color~~-~~surface~~);\n ~~cursor~~: ~~default~~;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA;AAAA,EAG9C,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;~~AAaF~~;~~AAXE~~,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAbG,IAAM,kBAAN;"}
1	+ {"version":3,"file":"table.element.js","sources":["../../../src/components/table/table.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.\n * @element uui-table\n * @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.\n /\nexport class UUITableElement extends LitElement {\n / consider select-only attribute on this level? */\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: table;\n width: 100%;\n background-color: var(--uui-color-surface);\n cursor: default;\n\n border-radius: var(--uui-border-radius-3);\n border-width: var(--uui-box-border-width, 1px);\n border-style: solid;\n border-color: var(--uui-color-divider-standalone);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA;AAAA,EAG9C,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAiBF;AAfE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAbG,IAAM,kBAAN;"}

package/dist/components/tag/tag.element.js CHANGED Viewed

@@ -70,17 +70,18 @@ _UUITagElement.styles = [
       :host {
         background-color: var(--uui-color-surface);
         color: var(--color-standalone);
-        border-color: transparent;
       }
       :host([look='primary']) {
         background-color: var(--color);
         color: var(--color-contrast);
-        border-color: transparent;
       }
       :host([look='secondary']) {
         background-color: var(--uui-color-surface-alt);
         color: var(--color-standalone);
-        border-color: transparent;
+        border-color: var(
+          --uui-tag-border-color,
+          var(--uui-color-divider-standalone)
+        );
       }
       :host([look='outline']) {
         background-color: transparent;

package/dist/components/tag/tag.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.element.js","sources":["../../../src/components/tag/tag.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n UUIInterfaceColor,\n UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/*\n \n * @element uui-tag\n * @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes\n * @slot - slot for tag contents\n * @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.\n * @cssprop --uui-tag-padding - overwrite the default padding size for the tag.\n * @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.\n * @cssprop --uui-tag-border-color - overwrite the default border color for the tag.\n /\n\nexport class UUITagElement extends LitElement {\n /\n Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n * @type {\"default\" \| \"positive\" \| \"warning\" \| \"danger\"}\n * @attr\n * @default \"default\"\n /\n @property({ reflect: true })\n color: UUIInterfaceColor = 'default';\n\n /\n Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n * @type {\"default\" \| \"primary\" \| \"secondary\" \| \"outline\" \| \"placeholder\"}\n * @attr\n * @default \"default\"\n */\n @property({ reflect: true })\n look: UUIInterfaceLook = 'primary';\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-block;\n font-size: var(--uui-tag-font-size, var(--uui-type-small-size));\n font-weight: 700;\n line-height: 1;\n padding: var(\n --uui-tag-padding,\n var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)\n );\n user-select: none;\n border-radius: var(--uui-tag-border-radius, var(--uui-size-4));\n border: 1px solid var(--uui-tag-border-color, transparent);\n }\n\n slot {\n display: block;\n align-content: center;\n margin: 2px;\n }\n\n :host {\n --color: var(--uui-color-default);\n --color-standalone: var(--uui-color-default-standalone);\n --color-contrast: var(--uui-color-default-contrast);\n }\n :host([color='positive']) {\n --color: var(--uui-color-positive);\n --color-standalone: var(--uui-color-positive-standalone);\n --color-contrast: var(--uui-color-positive-contrast);\n }\n :host([color='warning']) {\n --color: var(--uui-color-warning);\n --color-standalone: var(--uui-color-warning-standalone);\n --color-contrast: var(--uui-color-warning-contrast);\n }\n :host([color='danger']) {\n --color: var(--uui-color-danger);\n --color-standalone: var(--uui-color-danger-standalone);\n --color-contrast: var(--uui-color-danger-contrast);\n }\n :host([color='invalid']) {\n --color: var(--uui-color-invalid);\n --color-standalone: var(--uui-color-invalid-standalone);\n --color-contrast: var(--uui-color-invalid-contrast);\n }\n\n :host {\n background-color: var(--uui-color-surface);\n color: var(--color-standalone);\n ~~border-color: transparent;\n~~ }\n :host([look='primary']) {\n background-color: var(--color);\n color: var(--color-contrast);\n ~~border-color: transparent;\n~~ }\n :host([look='secondary']) {\n background-color: var(--uui-color-surface-alt);\n color: var(--color-standalone);\n border-color: ~~transparent~~;\n }\n :host([look='outline']) {\n background-color: transparent;\n color: var(--color-standalone);\n border-color: var(--color-standalone);\n }\n :host([look='placeholder']) {\n border-style: dashed;\n background-color: transparent;\n color: var(--color-standalone);\n border-color: var(--uui-color-border-standalone);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AAAA,EAAA;AAAA,EAEzB,SAAS;AACP,WAAO;AAAA,EACT;~~AA8EF~~;~~AA5EE~~,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;AAxBG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,cAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,cAiBX,WAAA,MAAA;"}
1	+ {"version":3,"file":"tag.element.js","sources":["../../../src/components/tag/tag.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n UUIInterfaceColor,\n UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/*\n \n * @element uui-tag\n * @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes\n * @slot - slot for tag contents\n * @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.\n * @cssprop --uui-tag-padding - overwrite the default padding size for the tag.\n * @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.\n * @cssprop --uui-tag-border-color - overwrite the default border color for the tag.\n /\n\nexport class UUITagElement extends LitElement {\n /\n Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n * @type {\"default\" \| \"positive\" \| \"warning\" \| \"danger\"}\n * @attr\n * @default \"default\"\n /\n @property({ reflect: true })\n color: UUIInterfaceColor = 'default';\n\n /\n Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n * @type {\"default\" \| \"primary\" \| \"secondary\" \| \"outline\" \| \"placeholder\"}\n * @attr\n * @default \"default\"\n */\n @property({ reflect: true })\n look: UUIInterfaceLook = 'primary';\n\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-block;\n font-size: var(--uui-tag-font-size, var(--uui-type-small-size));\n font-weight: 700;\n line-height: 1;\n padding: var(\n --uui-tag-padding,\n var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)\n );\n user-select: none;\n border-radius: var(--uui-tag-border-radius, var(--uui-size-4));\n border: 1px solid var(--uui-tag-border-color, transparent);\n }\n\n slot {\n display: block;\n align-content: center;\n margin: 2px;\n }\n\n :host {\n --color: var(--uui-color-default);\n --color-standalone: var(--uui-color-default-standalone);\n --color-contrast: var(--uui-color-default-contrast);\n }\n :host([color='positive']) {\n --color: var(--uui-color-positive);\n --color-standalone: var(--uui-color-positive-standalone);\n --color-contrast: var(--uui-color-positive-contrast);\n }\n :host([color='warning']) {\n --color: var(--uui-color-warning);\n --color-standalone: var(--uui-color-warning-standalone);\n --color-contrast: var(--uui-color-warning-contrast);\n }\n :host([color='danger']) {\n --color: var(--uui-color-danger);\n --color-standalone: var(--uui-color-danger-standalone);\n --color-contrast: var(--uui-color-danger-contrast);\n }\n :host([color='invalid']) {\n --color: var(--uui-color-invalid);\n --color-standalone: var(--uui-color-invalid-standalone);\n --color-contrast: var(--uui-color-invalid-contrast);\n }\n\n :host {\n background-color: var(--uui-color-surface);\n color: var(--color-standalone);\n }\n :host([look='primary']) {\n background-color: var(--color);\n color: var(--color-contrast);\n }\n :host([look='secondary']) {\n background-color: var(--uui-color-surface-alt);\n color: var(--color-standalone);\n border-color: var(\n --uui-tag-border-color,\n var(--uui-color-divider-standalone)\n );\n }\n :host([look='outline']) {\n background-color: transparent;\n color: var(--color-standalone);\n border-color: var(--color-standalone);\n }\n :host([look='placeholder']) {\n border-style: dashed;\n background-color: transparent;\n color: var(--color-standalone);\n border-color: var(--uui-color-border-standalone);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AAAA,EAAA;AAAA,EAEzB,SAAS;AACP,WAAO;AAAA,EACT;AA+EF;AA7EE,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;AAxBG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,cAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,cAiBX,WAAA,MAAA;"}