xv-webcomponents 0.1.68-qa.0 → 0.1.77-qa.0

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.
@@ -122,13 +122,15 @@
122
122
  :host .modal_header {
123
123
  position: relative;
124
124
  padding-inline: var(--gap-md, 16px);
125
+ font-weight: normal;
125
126
  }
126
- :host .modal_header__title {
127
+ :host .modal_header::slotted([slot=header]), :host .modal_header__title {
127
128
  color: var(--text-text-primary, #333);
128
129
  font-family: var(--ff-heading, "Gill Sans");
129
130
  font-size: var(--fz-xl, 21px);
130
131
  line-height: 133.333%;
131
132
  margin: 0 20px 0 0;
133
+ font-weight: normal;
132
134
  }
133
135
  :host .modal_content {
134
136
  padding: var(--gap-md, 16px);
@@ -20,8 +20,9 @@ export class XvTabs {
20
20
  */
21
21
  this.showArrows = false;
22
22
  this.collectTabs = () => {
23
- if (!this.tabElements.length) {
24
- this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
23
+ const newTabs = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
24
+ if (!this.tabElements.length || newTabs.length !== this.tabElements.length) {
25
+ this.tabElements = newTabs;
25
26
  this.tabElements.forEach((tab) => {
26
27
  if (tab.hasAttribute('name') && !this.active) {
27
28
  this.active = tab.getAttribute('name');
@@ -1 +1 @@
1
- {"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,MAAM;IALnB;QAOE;;WAEG;QACqC,WAAM,GAAoB,CAAC,CAAC;QASpE;;WAEG;QACK,YAAO,GAAiB,YAAY,CAAC,OAAO,CAAC;QAKrD;;WAEG;QACM,gBAAW,GAAkB,EAAE,CAAC;QACzC;;WAEG;QACM,eAAU,GAAY,KAAK,CAAC;QAU7B,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;gBACtE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC/B,IAAI,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;wBAC7C,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAA;KAqGF;IAvHC,qBAAqB;;QACnB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAuB,CAAC;QACpG,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAClE,CAAC;IAeO,gBAAgB;QACtB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAClC,GAAG,CAAC,SAAS,CAAC,MAAM,CAClB,QAAQ,EACR,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAC1D,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,MAAuB;QAC5C,IAAI,MAAM,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAEnC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3D,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,mBAAmB;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,EAAE,CAAC,UAAU;iBACf,aAAa,CAAC,yBAAyB,CAAC;iBACxC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAChF,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,MAAM,CAAC,QAAgB,CAAC;QAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAC3C,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACT,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAC1D,CAAC;QACJ,MAAM,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;QAEnC,IAAI,OAAO,GAAG,CAAC,IAAI,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;YAAE,OAAO;QAE9D,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QAEzD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;gBACzC,oBAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAC9B,CACR,CAAA;QACH,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;YACzC,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS;gBACrC,cACE,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,CAAA,gBAC1C,UAAU,EACrB,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAC9B;gBACF,WAAK,KAAK,EAAC,uBAAuB,IAC/B,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,EAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/D,cACE,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,GAAW,aAAX,GAAG,uBAAH,GAAG,CAAU,QAAQ,CAAA,EACpE,KAAK,EAAE;wBACL,iBAAiB,EAAE,IAAI;wBACvB,MAAM,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;qBACtE,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,EAAE,CAAC,IAEzE,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC,EAAE,CACzC,CACV,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAG,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAK,CACtE;gBACN,4BACa,MAAM,EACjB,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,CAAA,EACrD,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAC7B,CACE;YAEN,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;gBAEZ,YAAM,YAAY,EAAE,IAAI,CAAC,WAAW,GAAI,CACpC,CACD,CACR,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n tag: 'xv-tabs-v2',\n styleUrl: 'xv-tabs.scss',\n shadow: true,\n})\nexport class XvTabs {\n @Element() el: HTMLElement;\n /**\n * Index of active tab\n */\n @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n /**\n * Emit event to outside\n */\n @Event() activeChange: EventEmitter<number | string>;\n /**\n * Show loader\n */\n @Prop({ reflect: true }) loading?: boolean;\n /**\n * Variant of tabs from TABS_VATIANT enum\n */\n @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n /**\n * Message when have no tabs\n */\n @Prop() emptyMessage?: string;\n /**\n * local variable for tab labels collection\n */\n @State() tabElements: HTMLElement[] = [];\n /**\n * Is show arrows for scroll\n */\n @State() showArrows: boolean = false;\n\n @Listen('resize', { target: 'window' })\n updateArrowVisibility() {\n const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\n if (!container) return;\n\n this.showArrows = container.scrollWidth > container.clientWidth;\n }\n\n private collectTabs = () => {\n if (!this.tabElements.length) {\n this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n this.tabElements.forEach((tab) => {\n if (tab.hasAttribute('name') && !this.active) {\n this.active = tab.getAttribute('name');\n }\n })\n\n setTimeout(() => this.updateArrowVisibility(), 100);\n }\n }\n\n private updateTabClasses() {\n this.tabElements.forEach((tab, i) => {\n tab.classList.toggle(\n 'active',\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n });\n }\n\n private handleTabClick(active: string | number) {\n if (active === this.active) return;\n\n this.active = active;\n this.activeChange.emit(Number(this.active) || this.active);\n this.scrollToActiveTab();\n }\n\n private scrollToActiveTab() {\n if (!this.showArrows) return;\n\n // wait next JS tik\n setTimeout(() => {\n this.el.shadowRoot\n .querySelector('.tab-headers_tab.active')\n .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n });\n }\n\n private setTab(count: number = 1) {\n const currentIdx = this.tabElements.findIndex(\n (tab, i) =>\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n const nextIdx = currentIdx + count;\n\n if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\n\n const nextTab = this.tabElements[nextIdx];\n\n if (!nextTab || nextTab.hasAttribute('disabled')) return;\n\n this.handleTabClick(nextTab.getAttribute('name') || nextIdx);\n }\n\n render() {\n if (this.loading) {\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <xv-loader-v2 size={SIZE_VAR.XL} />\n </Host>\n )\n }\n\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <div class=\"tab-headers\" role=\"tablist\">\n <button\n hidden={!this.showArrows || !this.tabElements?.length}\n aria-label=\"Previous\"\n class=\"tab-headers_btn prev\"\n onClick={() => this.setTab(-1)}\n />\n <div class=\"tab-headers_container\">\n {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n <button\n role=\"tab\"\n disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n class={{\n 'tab-headers_tab': true,\n active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n }}\n onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n >\n {tab.getAttribute('label') || `Tab ${index + 1}`}\n </button>\n )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n </div>\n <button\n aria-label=\"Next\"\n hidden={!this.showArrows || !this.tabElements?.length}\n class=\"tab-headers_btn next\"\n onClick={() => this.setTab(1)}\n />\n </div>\n\n <div\n class=\"tab-content-wrapper\"\n role=\"tabpanel\"\n tabindex={-1}\n >\n <slot onSlotchange={this.collectTabs} />\n </div>\n </Host>\n );\n }\n\n componentDidRender() {\n this.updateTabClasses();\n }\n}\n"]}
1
+ {"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n tag: 'xv-tabs-v2',\n styleUrl: 'xv-tabs.scss',\n shadow: true,\n})\nexport class XvTabs {\n @Element() el: HTMLElement;\n /**\n * Index of active tab\n */\n @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n /**\n * Emit event to outside\n */\n @Event() activeChange: EventEmitter<number | string>;\n /**\n * Show loader\n */\n @Prop({ reflect: true }) loading?: boolean;\n /**\n * Variant of tabs from TABS_VATIANT enum\n */\n @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n /**\n * Message when have no tabs\n */\n @Prop() emptyMessage?: string;\n /**\n * local variable for tab labels collection\n */\n @State() tabElements: HTMLElement[] = [];\n /**\n * Is show arrows for scroll\n */\n @State() showArrows: boolean = false;\n\n @Listen('resize', { target: 'window' })\n updateArrowVisibility() {\n const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\n if (!container) return;\n\n this.showArrows = container.scrollWidth > container.clientWidth;\n }\n\n private collectTabs = () => {\n const newTabs = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n if (!this.tabElements.length || newTabs.length !== this.tabElements.length) {\n this.tabElements = newTabs;\n this.tabElements.forEach((tab) => {\n if (tab.hasAttribute('name') && !this.active) {\n this.active = tab.getAttribute('name');\n }\n })\n\n setTimeout(() => this.updateArrowVisibility(), 100);\n }\n }\n\n private updateTabClasses() {\n this.tabElements.forEach((tab, i) => {\n tab.classList.toggle(\n 'active',\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n });\n }\n\n private handleTabClick(active: string | number) {\n if (active === this.active) return;\n\n this.active = active;\n this.activeChange.emit(Number(this.active) || this.active);\n this.scrollToActiveTab();\n }\n\n private scrollToActiveTab() {\n if (!this.showArrows) return;\n\n // wait next JS tik\n setTimeout(() => {\n this.el.shadowRoot\n .querySelector('.tab-headers_tab.active')\n .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n });\n }\n\n private setTab(count: number = 1) {\n const currentIdx = this.tabElements.findIndex(\n (tab, i) =>\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\n );\n const nextIdx = currentIdx + count;\n\n if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\n\n const nextTab = this.tabElements[nextIdx];\n\n if (!nextTab || nextTab.hasAttribute('disabled')) return;\n\n this.handleTabClick(nextTab.getAttribute('name') || nextIdx);\n }\n\n render() {\n if (this.loading) {\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <xv-loader-v2 size={SIZE_VAR.XL} />\n </Host>\n )\n }\n\n return (\n <Host class=\"xv-tabs\" variant={this.variant}>\n <div class=\"tab-headers\" role=\"tablist\">\n <button\n hidden={!this.showArrows || !this.tabElements?.length}\n aria-label=\"Previous\"\n class=\"tab-headers_btn prev\"\n onClick={() => this.setTab(-1)}\n />\n <div class=\"tab-headers_container\">\n {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n <button\n role=\"tab\"\n disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n class={{\n 'tab-headers_tab': true,\n active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n }}\n onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n >\n {tab.getAttribute('label') || `Tab ${index + 1}`}\n </button>\n )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n </div>\n <button\n aria-label=\"Next\"\n hidden={!this.showArrows || !this.tabElements?.length}\n class=\"tab-headers_btn next\"\n onClick={() => this.setTab(1)}\n />\n </div>\n\n <div\n class=\"tab-content-wrapper\"\n role=\"tabpanel\"\n tabindex={-1}\n >\n <slot onSlotchange={this.collectTabs} />\n </div>\n </Host>\n );\n }\n\n componentDidRender() {\n this.updateTabClasses();\n }\n}\n"]}
@@ -78221,7 +78221,7 @@ const XvLoginModal = class {
78221
78221
  };
78222
78222
  XvLoginModal.style = xvLoginModalCss;
78223
78223
 
78224
- const xvModalCss = ".xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:\"\";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:visible}:host .modal_content.overflow{overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host .modal .loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:100px;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
78224
+ const xvModalCss = ".xv-tooltip[role=tooltip]{position:absolute;background-color:var(--background-inverse, #333333);color:var(--text-on-color);padding:var(--spacing-03) var(--spacing-04);border-radius:3px;font-size:var(--fz-sm);z-index:999;min-width:min(150px, 90vw);max-width:min(400px, 90vw)}.xv-tooltip[role=tooltip]::after{content:\"\";position:absolute;width:0;height:0;border-style:solid}.xv-tooltip[role=tooltip][data-popper-placement=top]::after{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after{bottom:-5px;left:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after{bottom:-5px;right:12px;border-width:5px 5px 0 5px;border-color:var(--background-inverse, black) transparent transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after{top:-5px;left:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after{top:-5px;right:12px;border-width:0 5px 5px 5px;border-color:transparent transparent var(--background-inverse, black) transparent}.xv-tooltip[role=tooltip][data-popper-placement=left]::after{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after{top:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after{bottom:12px;right:-5px;border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--background-inverse, black)}.xv-tooltip[role=tooltip][data-popper-placement=right]::after{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after{top:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after{bottom:12px;left:-5px;border-width:5px 5px 5px 0;border-color:transparent var(--background-inverse, black) transparent transparent}:host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px);font-weight:normal}:host .modal_header::slotted([slot=header]),:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0;font-weight:normal}:host .modal_content{padding:var(--gap-md, 16px);overflow:visible}:host .modal_content.overflow{overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host .modal .loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:100px;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
78225
78225
 
78226
78226
  const XvModal = class {
78227
78227
  constructor(hostRef) {
@@ -78912,8 +78912,9 @@ const XvTabs = class {
78912
78912
  */
78913
78913
  this.showArrows = false;
78914
78914
  this.collectTabs = () => {
78915
- if (!this.tabElements.length) {
78916
- this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
78915
+ const newTabs = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
78916
+ if (!this.tabElements.length || newTabs.length !== this.tabElements.length) {
78917
+ this.tabElements = newTabs;
78917
78918
  this.tabElements.forEach((tab) => {
78918
78919
  if (tab.hasAttribute('name') && !this.active) {
78919
78920
  this.active = tab.getAttribute('name');