npm - @quartzds/core - Versions diffs - 1.0.0-beta.121 → 1.0.0-beta.123 - Mend

@quartzds/core 1.0.0-beta.121 → 1.0.0-beta.123

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

package/CHANGELOG.md +66 -0
package/components/index.js +1 -1
package/components/{p-CkyaV9az.js → p-B7s906mS.js} +9 -9
package/components/p-B7s906mS.js.map +1 -0
package/components/p-BZlKeCFb.js +200 -0
package/components/p-BZlKeCFb.js.map +1 -0
package/components/{p-CURs27Ur.js → p-BalM52S_.js} +3 -3
package/components/{p-CURs27Ur.js.map → p-BalM52S_.js.map} +1 -1
package/components/{p-C1c4JVlg.js → p-BoSYRCNp.js} +47 -28
package/components/p-BoSYRCNp.js.map +1 -0
package/components/p-BvRd7jA2.js +102 -0
package/components/p-BvRd7jA2.js.map +1 -0
package/components/{p-B2ZVUvk9.js → p-C93kOEAe.js} +7 -9
package/components/p-C93kOEAe.js.map +1 -0
package/components/{p-DtxwXYGb.js → p-C9R8N06B.js} +5 -31
package/components/p-C9R8N06B.js.map +1 -0
package/components/{p-DR79BVX5.js → p-CKp062X8.js} +6 -6
package/components/p-CKp062X8.js.map +1 -0
package/components/{p-CjVnGhSO.js → p-CVuTVnQo.js} +3 -3
package/components/{p-CjVnGhSO.js.map → p-CVuTVnQo.js.map} +1 -1
package/components/{p-D82sb4oJ.js → p-CbY4T0d2.js} +5 -5
package/components/p-CbY4T0d2.js.map +1 -0
package/components/{p-DNHI4C-W.js → p-CowZ-pDD.js} +58 -22
package/components/p-CowZ-pDD.js.map +1 -0
package/components/{p-CDRwHAIT.js → p-XP2CY_fo.js} +3 -3
package/components/p-XP2CY_fo.js.map +1 -0
package/components/{p-5dwtV5iH.js → p-yb0Kv4Y6.js} +24 -6
package/components/p-yb0Kv4Y6.js.map +1 -0
package/components/qds-action-item.js +4 -4
package/components/qds-action-item.js.map +1 -1
package/components/qds-avatar-media.js +1 -1
package/components/qds-badge-counter.js +1 -1
package/components/qds-breadcrumb-item.js +5 -5
package/components/qds-breadcrumb-item.js.map +1 -1
package/components/qds-button.js +5 -5
package/components/qds-button.js.map +1 -1
package/components/qds-checkbox.js +1 -1
package/components/qds-chip.js +10 -10
package/components/qds-chip.js.map +1 -1
package/components/qds-dialog.js +6 -6
package/components/qds-divider.js +1 -1
package/components/qds-dropdown.js +1 -1
package/components/qds-form-message.js +4 -4
package/components/qds-form-message.js.map +1 -1
package/components/qds-icon-button.js +1 -1
package/components/qds-icon-tab.js +8 -8
package/components/qds-icon.js +1 -1
package/components/qds-inline-link.js +4 -4
package/components/qds-inline-link.js.map +1 -1
package/components/qds-input.js +17 -13
package/components/qds-input.js.map +1 -1
package/components/qds-label.js +153 -1
package/components/qds-label.js.map +1 -1
package/components/qds-list-item.js +25 -29
package/components/qds-list-item.js.map +1 -1
package/components/qds-loader.js +3 -3
package/components/qds-loader.js.map +1 -1
package/components/qds-menu-item.js +6 -6
package/components/qds-mini-button.js +1 -1
package/components/qds-progress-bar.js +2 -2
package/components/qds-radio.js +1 -1
package/components/qds-select.js +6 -6
package/components/qds-select.js.map +1 -1
package/components/qds-standalone-link.js +5 -5
package/components/qds-standalone-link.js.map +1 -1
package/components/qds-switch.js +6 -6
package/components/qds-switch.js.map +1 -1
package/components/qds-tab.js +20 -15
package/components/qds-tab.js.map +1 -1
package/components/qds-tabbar.js +95 -34
package/components/qds-tabbar.js.map +1 -1
package/components/qds-table-cell.js +32 -4
package/components/qds-table-cell.js.map +1 -1
package/components/qds-table-head-cell.js +32 -4
package/components/qds-table-head-cell.js.map +1 -1
package/components/qds-table-row.js +2 -2
package/components/qds-table-row.js.map +1 -1
package/components/qds-table.js +1 -1
package/components/qds-tag.js +1 -1
package/components/qds-textarea.js +4 -4
package/components/qds-textarea.js.map +1 -1
package/components/qds-title.js +1 -1
package/components/qds-tooltip.js +1 -1
package/dist/cjs/loader.cjs.js +1 -1
package/dist/cjs/qds-action-item.cjs.entry.js +1 -1
package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
package/dist/cjs/qds-avatar-media_3.cjs.entry.js +144 -41
package/dist/cjs/qds-badge-counter.qds-badge-indicator.entry.cjs.js.map +1 -1
package/dist/cjs/qds-badge-counter_2.cjs.entry.js +1 -1
package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +2 -2
package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
package/dist/cjs/qds-button.cjs.entry.js +1 -1
package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
package/dist/cjs/qds-chip.cjs.entry.js +6 -6
package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
package/dist/cjs/qds-dialog.cjs.entry.js +1 -1
package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
package/dist/cjs/qds-divider_2.cjs.entry.js +4 -4
package/dist/cjs/qds-dropdown.cjs.entry.js +21 -3
package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
package/dist/cjs/qds-icon-tab.cjs.entry.js +3 -3
package/dist/cjs/qds-icon.cjs.entry.js +9 -29
package/dist/cjs/qds-icon.entry.cjs.js.map +1 -1
package/dist/cjs/qds-inline-link.cjs.entry.js +2 -2
package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
package/dist/cjs/qds-input.cjs.entry.js +14 -10
package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
package/dist/cjs/qds-label.cjs.entry.js +2 -2
package/dist/cjs/qds-list-item.cjs.entry.js +6 -4
package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
package/dist/cjs/qds-loader.cjs.entry.js +2 -2
package/dist/cjs/qds-loader.entry.cjs.js.map +1 -1
package/dist/cjs/qds-menu-item.cjs.entry.js +2 -2
package/dist/cjs/qds-mini-button.cjs.entry.js +3 -5
package/dist/cjs/qds-mini-button.entry.cjs.js.map +1 -1
package/dist/cjs/qds-progress-bar.cjs.entry.js +2 -2
package/dist/cjs/qds-select.cjs.entry.js +4 -4
package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
package/dist/cjs/qds-standalone-link.cjs.entry.js +3 -3
package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -1
package/dist/cjs/qds-switch.cjs.entry.js +4 -4
package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
package/dist/cjs/qds-tab.cjs.entry.js +15 -10
package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
package/dist/cjs/qds-tabbar.cjs.entry.js +83 -27
package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -1
package/dist/cjs/qds-table-cell.cjs.entry.js +30 -3
package/dist/cjs/qds-table-cell.entry.cjs.js.map +1 -1
package/dist/cjs/qds-table-head-cell.cjs.entry.js +30 -3
package/dist/cjs/qds-table-head-cell.entry.cjs.js.map +1 -1
package/dist/cjs/qds-table-row.cjs.entry.js +2 -2
package/dist/cjs/qds-table-row.entry.cjs.js.map +1 -1
package/dist/cjs/qds-table.cjs.entry.js +1 -1
package/dist/cjs/qds-tag.cjs.entry.js +2 -2
package/dist/cjs/qds-tag.entry.cjs.js.map +1 -1
package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
package/dist/cjs/qds-title.cjs.entry.js +3 -3
package/dist/cjs/qds-title.entry.cjs.js.map +1 -1
package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -1
package/dist/cjs/qds.cjs.js +1 -1
package/dist/custom-elements.json +365 -30
package/dist/docs.json +320 -64
package/dist/esm/{helpers-eFD8hV6J.js → helpers-Fe2AA6uo.js} +3 -3
package/dist/esm/{helpers-eFD8hV6J.js.map → helpers-Fe2AA6uo.js.map} +1 -1
package/dist/esm/loader.js +1 -1
package/dist/esm/qds-action-item.entry.js +2 -2
package/dist/esm/qds-action-item.entry.js.map +1 -1
package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
package/dist/esm/qds-avatar-media_3.entry.js +146 -43
package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -1
package/dist/esm/qds-badge-counter_2.entry.js +1 -1
package/dist/esm/qds-breadcrumb-item.entry.js +3 -3
package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
package/dist/esm/qds-button.entry.js +2 -2
package/dist/esm/qds-button.entry.js.map +1 -1
package/dist/esm/qds-chip.entry.js +7 -7
package/dist/esm/qds-chip.entry.js.map +1 -1
package/dist/esm/qds-dialog.entry.js +2 -2
package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
package/dist/esm/qds-divider_2.entry.js +5 -5
package/dist/esm/qds-dropdown.entry.js +22 -4
package/dist/esm/qds-dropdown.entry.js.map +1 -1
package/dist/esm/qds-form-message.entry.js +3 -3
package/dist/esm/qds-form-message.entry.js.map +1 -1
package/dist/esm/qds-icon-tab.entry.js +4 -4
package/dist/esm/qds-icon.entry.js +10 -30
package/dist/esm/qds-icon.entry.js.map +1 -1
package/dist/esm/qds-inline-link.entry.js +3 -3
package/dist/esm/qds-inline-link.entry.js.map +1 -1
package/dist/esm/qds-input.entry.js +15 -11
package/dist/esm/qds-input.entry.js.map +1 -1
package/dist/esm/qds-label.entry.js +3 -3
package/dist/esm/qds-list-item.entry.js +7 -5
package/dist/esm/qds-list-item.entry.js.map +1 -1
package/dist/esm/qds-loader.entry.js +2 -2
package/dist/esm/qds-loader.entry.js.map +1 -1
package/dist/esm/qds-menu-item.entry.js +3 -3
package/dist/esm/qds-mini-button.entry.js +4 -6
package/dist/esm/qds-mini-button.entry.js.map +1 -1
package/dist/esm/qds-progress-bar.entry.js +2 -2
package/dist/esm/qds-select.entry.js +5 -5
package/dist/esm/qds-select.entry.js.map +1 -1
package/dist/esm/qds-standalone-link.entry.js +4 -4
package/dist/esm/qds-standalone-link.entry.js.map +1 -1
package/dist/esm/qds-switch.entry.js +5 -5
package/dist/esm/qds-switch.entry.js.map +1 -1
package/dist/esm/qds-tab.entry.js +16 -11
package/dist/esm/qds-tab.entry.js.map +1 -1
package/dist/esm/qds-tabbar.entry.js +84 -28
package/dist/esm/qds-tabbar.entry.js.map +1 -1
package/dist/esm/qds-table-cell.entry.js +30 -3
package/dist/esm/qds-table-cell.entry.js.map +1 -1
package/dist/esm/qds-table-head-cell.entry.js +30 -3
package/dist/esm/qds-table-head-cell.entry.js.map +1 -1
package/dist/esm/qds-table-row.entry.js +2 -2
package/dist/esm/qds-table-row.entry.js.map +1 -1
package/dist/esm/qds-table.entry.js +1 -1
package/dist/esm/qds-tag.entry.js +3 -3
package/dist/esm/qds-tag.entry.js.map +1 -1
package/dist/esm/qds-textarea.entry.js +4 -4
package/dist/esm/qds-textarea.entry.js.map +1 -1
package/dist/esm/qds-title.entry.js +3 -3
package/dist/esm/qds-title.entry.js.map +1 -1
package/dist/esm/qds-tooltip.entry.js +3 -3
package/dist/esm/qds-tooltip.entry.js.map +1 -1
package/dist/esm/qds.js +1 -1
package/dist/types/components/avatar-media/avatar-media.d.ts +14 -5
package/dist/types/components/checkbox/checkbox.d.ts +4 -0
package/dist/types/components/icon/icon.d.ts +1 -2
package/dist/types/components/radio/radio.d.ts +4 -0
package/dist/types/components/tab/tab.d.ts +1 -1
package/dist/types/components/tabbar/tabbar.d.ts +27 -1
package/dist/types/components/table-cell/table-cell.d.ts +6 -0
package/dist/types/components/table-head-cell/table-head-cell.d.ts +6 -0
package/dist/types/components.d.ts +72 -15
package/dist/vscode.html-custom-data.json +79 -4
package/hydrate/index.js +969 -741
package/hydrate/index.mjs +969 -741
package/package.json +1 -2
package/styles/core.css +24 -22
package/components/p-5dwtV5iH.js.map +0 -1
package/components/p-B2ZVUvk9.js.map +0 -1
package/components/p-C1c4JVlg.js.map +0 -1
package/components/p-CDRwHAIT.js.map +0 -1
package/components/p-CkUTS1aU.js +0 -102
package/components/p-CkUTS1aU.js.map +0 -1
package/components/p-CkyaV9az.js.map +0 -1
package/components/p-D82sb4oJ.js.map +0 -1
package/components/p-D9pW936J.js +0 -164
package/components/p-D9pW936J.js.map +0 -1
package/components/p-DNHI4C-W.js.map +0 -1
package/components/p-DR79BVX5.js.map +0 -1
package/components/p-DtxwXYGb.js.map +0 -1
package/components/p-laE-pGH7.js +0 -163
package/components/p-laE-pGH7.js.map +0 -1

package/dist/esm/qds-tab.entry.js CHANGED Viewed

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
-import { p as pickFocusEventAttributes, r as resolveTarget } from './helpers-eFD8hV6J.js';
+import { p as pickFocusEventAttributes, r as resolveTarget } from './helpers-Fe2AA6uo.js';
-const tabCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-target-icon{color:var(--qds-theme-control-text-standard)}.qds-icon,.qds-target-icon{flex-shrink:0}.qds-chevron{transform:rotate(180deg)}.qds-selected:hover{background-color:var(--qds-theme-interactive-background-selected-hover)}.qds-selected:active{background-color:var(--qds-theme-interactive-background-selected-pressed)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab,.qds-texts{display:flex}.qds-texts{flex:1 0;flex-direction:column}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle);font:var(--qds-nav-element-standard-subtitle)}.qds-closable-wrapper[data-size=small],.qds-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal);min-height:var(--qds-nav-element-small-height);padding-inline:var(--qds-nav-element-small-padding-horizontal)}.qds-closable-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal)}[data-size=small]>.qds-icon{height:var(--qds-nav-element-small-icon-size);width:var(--qds-nav-element-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-nav-element-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-nav-element-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-nav-element-small-subtitle)}.qds-target-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-closable-wrapper[data-size=standard],.qds-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal);min-height:var(--qds-nav-element-standard-height);padding-inline:var(--qds-nav-element-standard-padding-horizontal)}.qds-closable-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal)}[data-size=standard]>.qds-icon{height:var(--qds-nav-element-standard-icon-size);width:var(--qds-nav-element-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-nav-element-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-nav-element-standard-subtitle)}.qds-target-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-closable-wrapper[data-size=large],.qds-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal);min-height:var(--qds-nav-element-large-height);padding-inline:var(--qds-nav-element-large-padding-horizontal)}.qds-closable-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal)}[data-size=large]>.qds-icon{height:var(--qds-nav-element-large-icon-size);width:var(--qds-nav-element-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-nav-element-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-nav-element-large-title)}[data-size=large] .qds-subtext{font:var(--qds-nav-element-large-subtitle)}.qds-target-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";display:block;position:absolute}.qds-indicator-inline-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after,.qds-indicator-inline-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{height:100%;width:var(--qds-signature-line-connection-width)}.qds-indicator-inline-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{inset-inline-end:0}.qds-indicator-inline-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{inset-inline-start:0}.qds-indicator-block-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after,.qds-indicator-block-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{height:var(--qds-signature-line-connection-width);width:100%}.qds-indicator-block-end:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{bottom:0}.qds-indicator-block-start:is(.qds-selected[data-importance=subdued],.qds-selected[data-importance=standard],.qds-closable-wrapper[data-importance=subdued],.qds-closable-wrapper[data-importance=standard],[data-importance=subdued] .qds-tab:hover,[data-importance=standard] .qds-tab:hover):after{top:0}.qds-selected[data-importance=standard][data-size=standard] .qds-text,.qds-selected[data-importance=subdued][data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title-emphasized)}.qds-selected[data-importance=standard][data-size=small] .qds-text,.qds-selected[data-importance=subdued][data-size=small] .qds-text{font:var(--qds-nav-element-small-title-emphasized)}.qds-selected[data-importance=standard][data-size=large] .qds-text,.qds-selected[data-importance=subdued][data-size=large] .qds-text{font:var(--qds-nav-element-large-title-emphasized)}[data-importance=standard] .qds-selected .qds-icon{color:var(--qds-theme-title)}[data-importance=standard]:hover:after{background-color:var(--qds-theme-signature-color-hover)}[data-importance=standard]:active:after{background-color:var(--qds-theme-signature-color-pressed)}.qds-selected[data-importance=standard]:after{background-color:var(--qds-theme-signature-color-default)}.qds-selected[data-importance=subdued]:after,[data-importance=subdued] :active:after{background-color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:hover:after{background-color:var(--qds-theme-link-subdued-hover)}.qds-selected[data-importance=subdued]:after{background-color:var(\n      --qds-theme-nav-element-selection-indicator-background-subdued\n    )}.qds-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-closable-tab{width:100%}.qds-closable-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab{align-items:center;justify-content:center}.qds-closable-tab,.qds-tab{background-color:initial;border:none;cursor:pointer;text-align:initial}.qds-closable-tab:any-link,.qds-tab:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-closable-wrapper,.qds-tab{position:relative}.qds-closable-wrapper:not(.qds-selected):hover,.qds-tab:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-closable-wrapper:not(.qds-selected):active,.qds-tab:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}";
+const tabCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-target-icon{color:var(--qds-theme-control-text-standard)}.qds-icon,.qds-target-icon{flex-shrink:0}.qds-chevron{transform:rotate(180deg)}.qds-selected:hover{background-color:var(--qds-theme-interactive-background-selected-hover)}.qds-selected:active{background-color:var(--qds-theme-interactive-background-selected-pressed)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab,.qds-texts{display:flex}.qds-texts{flex:1 0;flex-direction:column}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle);font:var(--qds-nav-element-standard-subtitle)}.qds-closable-wrapper[data-size=small],.qds-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal);min-height:var(--qds-nav-element-small-height);padding-inline:var(--qds-nav-element-small-padding-horizontal)}.qds-closable-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal)}[data-size=small]>.qds-icon{height:var(--qds-nav-element-small-icon-size);width:var(--qds-nav-element-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-nav-element-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-nav-element-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-nav-element-small-subtitle)}.qds-target-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-closable-wrapper[data-size=standard],.qds-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal);min-height:var(--qds-nav-element-standard-height);padding-inline:var(--qds-nav-element-standard-padding-horizontal)}.qds-closable-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal)}[data-size=standard]>.qds-icon{height:var(--qds-nav-element-standard-icon-size);width:var(--qds-nav-element-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-nav-element-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-nav-element-standard-subtitle)}.qds-target-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-closable-wrapper[data-size=large],.qds-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal);min-height:var(--qds-nav-element-large-height);padding-inline:var(--qds-nav-element-large-padding-horizontal)}.qds-closable-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal)}[data-size=large]>.qds-icon{height:var(--qds-nav-element-large-icon-size);width:var(--qds-nav-element-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-nav-element-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-nav-element-large-title)}[data-size=large] .qds-subtext{font:var(--qds-nav-element-large-subtitle)}.qds-target-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-importance=standard] .qds-selected .qds-icon{color:var(--qds-theme-title)}.qds-selected[data-importance=standard]:after{background-color:var(--qds-theme-signature-color-default)}.qds-selected[data-importance=subdued]:after{background-color:var(\n        --qds-theme-nav-element-selection-indicator-background-subdued\n      )}.qds-selected[data-importance=standard]:after,.qds-selected[data-importance=subdued]:after{border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";display:block;position:absolute}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after,.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{height:100%;width:var(--qds-signature-line-connection-width)}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after{inset-inline-end:0}.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{inset-inline-start:0}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after,.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{height:var(--qds-signature-line-connection-width);width:100%}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after{bottom:0}.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{top:0}.qds-selected[data-importance=standard][data-size=standard] .qds-text,.qds-selected[data-importance=subdued][data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title-emphasized)}.qds-selected[data-importance=standard][data-size=small] .qds-text,.qds-selected[data-importance=subdued][data-size=small] .qds-text{font:var(--qds-nav-element-small-title-emphasized)}.qds-selected[data-importance=standard][data-size=large] .qds-text,.qds-selected[data-importance=subdued][data-size=large] .qds-text{font:var(--qds-nav-element-large-title-emphasized)}.qds-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-closable-tab{width:100%}.qds-closable-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab{align-items:center;justify-content:center}.qds-closable-tab,.qds-tab{background-color:initial;border:none;cursor:pointer;text-align:initial}.qds-closable-tab:any-link,.qds-tab:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-closable-wrapper,.qds-tab{position:relative}.qds-closable-wrapper:not(.qds-selected):hover,.qds-tab:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-closable-wrapper:not(.qds-selected):active,.qds-tab:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}";
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
@@ -27,7 +27,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Tab_instances, _Tab_panel, _Tab_tab, _Tab_computedAction_get, _Tab_computedSize_get, _Tab_computedImportance_get, _Tab_parentLayer_get, _Tab_parentLevel_get, _Tab_ariaLabel_get, _Tab_computedDisabled_get, _Tab_computeCloseButtonTabIndex_get, _Tab_renderText, _Tab_tabRef, _Tab_close, _Tab_onIconClick, _Tab_onBlur, _Tab_onFocus, _Tab_defineTab, _Tab_defineGetter;
+var _Tab_instances, _Tab_panel, _Tab_tab, _Tab_computedAction_get, _Tab_computedSize_get, _Tab_computedImportance_get, _Tab_parentImportance_get, _Tab_parentSize_get, _Tab_parentLayer_get, _Tab_parentLevel_get, _Tab_ariaLabel_get, _Tab_computedDisabled_get, _Tab_computeCloseButtonTabIndex_get, _Tab_renderText, _Tab_tabRef, _Tab_close, _Tab_onIconClick, _Tab_onBlur, _Tab_onFocus, _Tab_defineTab, _Tab_defineGetter;
 const isCounter = (value) => typeof value === 'string'
     ? !Number.isNaN(Number.parseFloat(value))
     : typeof value === 'number';
@@ -66,7 +66,7 @@ const Tab = class {
         /**
          * The tab's indicator position.
          */
-        this.indicatorPosition = 'block-end';
+        this.indicatorPosition = 'block-start';
         /**
          * The name of a registered icon library.
          */
@@ -177,19 +177,16 @@ const Tab = class {
     }
     render() {
         const isLink = this.href !== undefined && __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === undefined;
-        const indicatorPosition = this.isIndicatorOnTop
-            ? 'block-start'
-            : this.indicatorPosition;
         const Tag = isLink
             ? 'a'
             : __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable'
                 ? 'button'
                 : 'div';
-        return (h("div", { key: 'a7e5f460e6bbcc0b16addb8390bd017d7f55c072', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, class: {
+        return (h("div", { key: '5315497861332b523d44189a04238cee49ccff3a', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, class: {
                 'qds-closable-wrapper': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
                 'qds-selected': this.selected,
-                [`qds-indicator-${indicatorPosition}`]: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
-            }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, h(Tag, { key: '8f8acf408e6343208a8140bc67084898e14d3479', ref: __classPrivateFieldGet(this, _Tab_tabRef, "f"), "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
+                [`qds-indicator-${this.indicatorPosition}`]: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
+            }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, h(Tag, { key: '02722d2d5e2460ccdc98371f35d8461ad8e31e4c', ref: __classPrivateFieldGet(this, _Tab_tabRef, "f"), disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
                 'qds-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) !== 'closable',
                 'qds-closable-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
                 'qds-selected': this.selected,
@@ -199,7 +196,7 @@ const Tab = class {
                     ? 'true'
                     : 'false'
                 : undefined, "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get), "data-action": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), href: isLink ? this.href : undefined }, ((this.tagText !== undefined && this.tagText !== '') ||
-            (this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: 'a69e2c407bedc1f3d710f3cbd2789eba292cc9c9', text: this.tagText, status: this.tagStatus, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), importance: this.tagImportance, "icon-library": this.tagIconLibrary, "icon-name": this.tagIconName, "icon-description": this.tagIconDescription })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '12d6f3003c346f26c908b5b6f48ab1308593409f', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), this.text && __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this), isIndicator(this.badge) && (h("qds-badge-indicator", { key: 'bf8b256c2b13ff5db116946084c783ed90ba3bb5', status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: 'a4c44307105e6112e5d4329e7079a6fdd697d19c', description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable' && (h("qds-icon", { key: 'db78b4abbe81932fe0f1cca08b8fd78cb40504dc', "aria-hidden": "true", class: { 'qds-target-icon': true, 'qds-chevron': this.selected }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "dropdown" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable' && (h("qds-mini-button", { key: 'ee5b8a295493a839274523c736a438a299e8b02a', name: "close", library: "core", text: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_ariaLabel_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), disabled: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Tab_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computeCloseButtonTabIndex_get) }))));
+            (this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: 'a09730df3cc6497e88a6d17de8535eaf74bcd6f8', text: this.tagText, status: this.tagStatus, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), importance: this.tagImportance, "icon-library": this.tagIconLibrary, "icon-name": this.tagIconName, "icon-description": this.tagIconDescription })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '9e6ae551c8cdda86e5422ffdad736a7f5176809a', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), this.text && __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this), isIndicator(this.badge) && (h("qds-badge-indicator", { key: '46110fa313decfaaf6231917c77ffca56ec980a8', status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: '3a709e7b62089ff8a3fa2287d1e22caa1e42c900', description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable' && (h("qds-icon", { key: 'e63e61abefbd804a2e78dfd59615521b2d97031c', class: { 'qds-target-icon': true, 'qds-chevron': this.selected }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "dropdown" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable' && (h("qds-mini-button", { key: '9cd5449bdb62322945325bb9ba698b4e0f1decdd', name: "close", library: "core", text: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_ariaLabel_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), disabled: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Tab_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computeCloseButtonTabIndex_get) }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -219,6 +216,8 @@ _Tab_panel = new WeakMap(), _Tab_tab = new WeakMap(), _Tab_tabRef = new WeakMap(
         }
     }
 }, _Tab_computedSize_get = function _Tab_computedSize_get() {
+    if (__classPrivateFieldGet(this, _Tab_instances, "a", _Tab_parentSize_get) !== undefined)
+        return __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_parentSize_get);
     switch (this.size) {
         case 'standard':
         case 'small':
@@ -230,6 +229,8 @@ _Tab_panel = new WeakMap(), _Tab_tab = new WeakMap(), _Tab_tabRef = new WeakMap(
         }
     }
 }, _Tab_computedImportance_get = function _Tab_computedImportance_get() {
+    if (__classPrivateFieldGet(this, _Tab_instances, "a", _Tab_parentImportance_get) !== undefined)
+        return __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_parentImportance_get);
     switch (this.importance) {
         case 'subdued':
         case 'standard': {
@@ -239,6 +240,10 @@ _Tab_panel = new WeakMap(), _Tab_tab = new WeakMap(), _Tab_tabRef = new WeakMap(
             return 'standard';
         }
     }
+}, _Tab_parentImportance_get = function _Tab_parentImportance_get() {
+    return this.host.closest('qds-tabbar')?.importance ?? undefined;
+}, _Tab_parentSize_get = function _Tab_parentSize_get() {
+    return this.host.closest('qds-tabbar')?.size ?? undefined;
 }, _Tab_parentLayer_get = function _Tab_parentLayer_get() {
     return this.host.closest('qds-tabbar')?.layer ?? 'main';
 }, _Tab_parentLevel_get = function _Tab_parentLevel_get() {

package/dist/esm/qds-tab.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"qds-tab.entry.js","sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n}\n\n.qds-target-icon {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n flex-shrink: 0;\n}\n\n.qds-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-small-icon-size);\n width: var(--qds-nav-element-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-standard-icon-size);\n width: var(--qds-nav-element-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-large-icon-size);\n width: var(--qds-nav-element-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n &.qds-selected,\n &.qds-closable-wrapper,\n .qds-tab:hover {\n &::after {\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n display: block;\n position: absolute;\n }\n\n &.qds-indicator-inline-end::after,\n &.qds-indicator-inline-start::after {\n width: var(--qds-signature-line-connection-width);\n height: 100%;\n }\n\n &.qds-indicator-inline-end::after {\n inset-inline-end: 0;\n }\n\n &.qds-indicator-inline-start::after {\n inset-inline-start: 0;\n }\n\n &.qds-indicator-block-end::after,\n &.qds-indicator-block-start::after {\n width: 100%;\n height: var(--qds-signature-line-connection-width);\n }\n\n &.qds-indicator-block-end::after {\n bottom: 0;\n }\n\n &.qds-indicator-block-start::after {\n top: 0;\n }\n }\n\n &.qds-selected {\n &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &:hover {\n &::after {\n background-color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n &::after {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected,\n :active {\n &::after {\n background-color: var(--qds-theme-link-subdued-pressed);\n }\n }\n\n &:hover {\n &::after {\n background-color: var(--qds-theme-link-subdued-hover);\n }\n }\n\n &.qds-selected::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\n }\n}\n\n.qds-tab {\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n }\n}\n\n.qds-closable-tab {\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n text-align: initial;\n\n &:any-link {\n text-decoration: none;\n }\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes, resolveTarget } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type Action = 'closable' \| 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'>\n\nexport type TagStatus = Status \| 'neutral'\n\nexport type IndicatorPosition =\n \| 'block-end'\n \| 'block-start'\n \| 'inline-end'\n \| 'inline-start'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' \| true =>\n value === '' \|\| value === true\n\nlet autoIncrementingId = 1\n\n/*\n <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n \n @see https://quartz.se.com/build/components/tab\n /\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n /\n @Prop() public readonly badge?: number \| string \| true\n\n /\n The tab's counter importance.\n /\n @Prop()\n public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n 'standard'\n\n /\n The indicator or counter badge's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly badgeDescription?: string\n\n /\n The indicator's status.\n /\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /\n Prevents the tab from being interacted with: it cannot be\n * selected or focused.\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The tab's importance.\n /\n @Prop() public readonly importance?: TabImportance = 'standard'\n\n /\n The tab's indicator position.\n /\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-end'\n\n /\n The tab panel element associated with this tab. The `panel` specified\n * can be any of the following:\n \n - A CSS selector string\n * - A reference to an [`Element`][]\n * - A function returning a reference to an [`Element`][] or a CSS selector\n * string\n \n [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n /\n @Prop() public readonly panel!: Element \| string \| (() => Element \| string)\n\n /\n The tag icon's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly tagIconDescription?: string\n\n /\n The name of the tab's tag icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly tagIconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /\n The tab's tag importance.\n /\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /\n The tab's tag size.\n /\n @Prop() public readonly tagSize?: Size = 'small'\n\n /\n The tab's tag status.\n /\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /\n The tab's tag text.\n /\n @Prop() public readonly tagText?: string\n\n /\n Whether or not the tab is selected.\n /\n @Prop() public selected = false\n\n /\n The tab's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n When set, the underlying tab will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n This property has no effect if the tab has an `action`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n Emitted when the tab is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when the tab loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the tab gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private isIndicatorOnTop = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action \| undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): TabImportance {\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentLayer(): string {\n return this.host.closest('qds-tabbar')?.layer ?? 'main'\n }\n\n get #parentLevel(): string {\n return this.host.closest('qds-tabbar')?.level ?? 'root'\n }\n\n get #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number \| undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : this.tabIndex\n }\n return -1\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel)\n if (!(panel instanceof globalThis.Element)) return\n this.#panel = panel\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n if (this.#panel.getAttribute('aria-labelledby') === null)\n this.#panel.setAttribute('aria-labelledby', this.host.id)\n this.#panel.setAttribute(\n 'tabindex',\n this.#panel.getAttribute('tabindex') ?? '0',\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id \|\|= `qds-tab-${autoIncrementingId}`\n autoIncrementingId += 1\n\n this.#defineTab()\n }\n\n public componentWillRender(): void {\n const isPanelRoot =\n this.#parentLayer === 'panel' && this.#parentLevel === 'root'\n const isMainSubsection =\n this.#parentLayer === 'main' && this.#parentLevel === 'subsection'\n\n this.isIndicatorOnTop = isPanelRoot \|\| isMainSubsection\n }\n\n public componentDidLoad(): void {\n this.panelChanged()\n }\n\n public disconnectedCallback(): void {\n if (!this.#panel) return\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.removeAttribute('aria-controls')\n\n if (this.#panel.role === 'tabpanel')\n // eslint-disable-next-line unicorn/no-null\n this.#panel.role = null\n if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n this.#panel.removeAttribute('aria-labelledby')\n this.#panel.removeAttribute('tabindex')\n }\n\n public render() {\n const isLink = this.href !== undefined && this.#computedAction === undefined\n const indicatorPosition = this.isIndicatorOnTop\n ? 'block-start'\n : this.indicatorPosition\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={\n !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n }\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') \|\|\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n aria-hidden=\"true\"\n class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabIndex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #defineTab = (): void => {\n if (this.#computedAction === 'closable') {\n this.#defineGetter('tab', () => this.#tab)\n } else {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.host)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"qds-tab.entry.js","sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n}\n\n.qds-target-icon {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n flex-shrink: 0;\n}\n\n.qds-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-small-icon-size);\n width: var(--qds-nav-element-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-standard-icon-size);\n width: var(--qds-nav-element-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-large-icon-size);\n width: var(--qds-nav-element-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected {\n &::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\n }\n }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n &.qds-selected {\n &::after {\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n display: block;\n position: absolute;\n }\n\n &.qds-indicator-inline-end::after,\n &.qds-indicator-inline-start::after {\n width: var(--qds-signature-line-connection-width);\n height: 100%;\n }\n\n &.qds-indicator-inline-end::after {\n inset-inline-end: 0;\n }\n\n &.qds-indicator-inline-start::after {\n inset-inline-start: 0;\n }\n\n &.qds-indicator-block-end::after,\n &.qds-indicator-block-start::after {\n width: 100%;\n height: var(--qds-signature-line-connection-width);\n }\n\n &.qds-indicator-block-end::after {\n bottom: 0;\n }\n\n &.qds-indicator-block-start::after {\n top: 0;\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n.qds-tab {\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n }\n}\n\n.qds-closable-tab {\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n text-align: initial;\n\n &:any-link {\n text-decoration: none;\n }\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes, resolveTarget } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\nimport type { TabbarImportance, TabbarSize } from '../tabbar/tabbar'\n\nexport type Action = 'closable' \| 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'> \| undefined\n\nexport type TagStatus = Status \| 'neutral'\n\nexport type IndicatorPosition =\n \| 'block-end'\n \| 'block-start'\n \| 'inline-end'\n \| 'inline-start'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' \| true =>\n value === '' \|\| value === true\n\nlet autoIncrementingId = 1\n\n/*\n <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n \n @see https://quartz.se.com/build/components/tab\n /\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n /\n @Prop() public readonly badge?: number \| string \| true\n\n /\n The tab's counter importance.\n /\n @Prop()\n public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n 'standard'\n\n /\n The indicator or counter badge's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly badgeDescription?: string\n\n /\n The indicator's status.\n /\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /\n Prevents the tab from being interacted with: it cannot be\n * selected or focused.\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The tab's importance.\n /\n @Prop() public readonly importance?: TabImportance = 'standard'\n\n /\n The tab's indicator position.\n /\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-start'\n\n /\n The tab panel element associated with this tab. The `panel` specified\n * can be any of the following:\n \n - A CSS selector string\n * - A reference to an [`Element`][]\n * - A function returning a reference to an [`Element`][] or a CSS selector\n * string\n \n [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n /\n @Prop() public readonly panel!: Element \| string \| (() => Element \| string)\n\n /\n The tag icon's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly tagIconDescription?: string\n\n /\n The name of the tab's tag icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly tagIconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /\n The tab's tag importance.\n /\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /\n The tab's tag size.\n /\n @Prop() public readonly tagSize?: Size = 'small'\n\n /\n The tab's tag status.\n /\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /\n The tab's tag text.\n /\n @Prop() public readonly tagText?: string\n\n /\n Whether or not the tab is selected.\n /\n @Prop() public selected = false\n\n /\n The tab's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n When set, the underlying tab will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n This property has no effect if the tab has an `action`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n Emitted when the tab is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when the tab loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the tab gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private isIndicatorOnTop = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action \| undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n if (this.#parentSize !== undefined) return this.#parentSize\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): TabImportance {\n if (this.#parentImportance !== undefined) return this.#parentImportance\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentImportance(): TabbarImportance {\n return this.host.closest('qds-tabbar')?.importance ?? undefined\n }\n\n get #parentSize(): TabbarSize {\n return this.host.closest('qds-tabbar')?.size ?? undefined\n }\n\n get #parentLayer(): string {\n return this.host.closest('qds-tabbar')?.layer ?? 'main'\n }\n\n get #parentLevel(): string {\n return this.host.closest('qds-tabbar')?.level ?? 'root'\n }\n\n get #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number \| undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : this.tabIndex\n }\n return -1\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel)\n if (!(panel instanceof globalThis.Element)) return\n this.#panel = panel\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n if (this.#panel.getAttribute('aria-labelledby') === null)\n this.#panel.setAttribute('aria-labelledby', this.host.id)\n this.#panel.setAttribute(\n 'tabindex',\n this.#panel.getAttribute('tabindex') ?? '0',\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id \|\|= `qds-tab-${autoIncrementingId}`\n autoIncrementingId += 1\n\n this.#defineTab()\n }\n\n public componentWillRender(): void {\n const isPanelRoot =\n this.#parentLayer === 'panel' && this.#parentLevel === 'root'\n const isMainSubsection =\n this.#parentLayer === 'main' && this.#parentLevel === 'subsection'\n\n this.isIndicatorOnTop = isPanelRoot \|\| isMainSubsection\n }\n\n public componentDidLoad(): void {\n this.panelChanged()\n }\n\n public disconnectedCallback(): void {\n if (!this.#panel) return\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.removeAttribute('aria-controls')\n\n if (this.#panel.role === 'tabpanel')\n // eslint-disable-next-line unicorn/no-null\n this.#panel.role = null\n if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n this.#panel.removeAttribute('aria-labelledby')\n this.#panel.removeAttribute('tabindex')\n }\n\n public render() {\n const isLink = this.href !== undefined && this.#computedAction === undefined\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={\n !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n }\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') \|\|\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabIndex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #defineTab = (): void => {\n if (this.#computedAction === 'closable') {\n this.#defineGetter('tab', () => this.#tab)\n } else {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.host)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/qds-tabbar.entry.js CHANGED Viewed

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
-import { i as invariant, V as VERTICAL_MOVE_KEYS, H as HORIZONTAL_MOVE_KEYS, c as inheritAriaAttributes, f as resolvePanelElement, g as componentOnReady } from './helpers-eFD8hV6J.js';
+import { i as invariant, V as VERTICAL_MOVE_KEYS, H as HORIZONTAL_MOVE_KEYS, c as inheritAriaAttributes, f as resolvePanelElement, g as componentOnReady } from './helpers-Fe2AA6uo.js';
-const tabbarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-tabbar,.qds-tabs,.qds-vertical,.qds-vertical-divider{display:flex}.qds-tabbar,.qds-vertical-divider{width:inherit}.qds-arrow-start{transform:scaleX(var(--qds-direction-factor,1)) rotate(180deg)}.qds-align-center{align-content:center}.qds-hidden{display:none}.qds-centered{justify-content:center}.qds-tabs{flex:1;margin-block:0;overflow:auto;padding-inline-start:0;scroll-behavior:smooth}.qds-vertical{flex-direction:column}.qds-vertical-divider{flex-direction:row}[data-layer=main][data-level=root] .qds-tabs{gap:var(--qds-control-large-gap-siblings-related)}[data-layer=main][data-level=section] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=subsection] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}[data-layer=popup][data-level=root] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=popup][data-level=section] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}:is([data-layer=panel],[data-layer=accessory])[data-level=root] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}";
+const tabbarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-tabbar,.qds-tabs,.qds-vertical,.qds-vertical-divider{display:flex}.qds-tabbar,.qds-vertical-divider{width:inherit}.qds-arrow-start{transform:scaleX(var(--qds-direction-factor,1)) rotate(180deg)}.qds-align-center{align-content:center}.qds-hidden{display:none}.qds-centered{justify-content:center}.qds-tabs{flex:1;margin-block:0;overflow:auto;padding-inline-start:0;scroll-behavior:smooth}.qds-vertical{flex-direction:column}.qds-vertical-divider{flex-direction:row}[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=root] .qds-tabs,[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}[data-layer=main][data-level=section] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=subsection] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}[data-layer=popup][data-level=root] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=popup][data-level=section] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}:is([data-layer=panel],[data-layer=accessory])[data-level=root] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}";
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
@@ -27,7 +27,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Tabbar_instances, _Tabbar_tabs, _Tabbar_ro, _Tabbar_tabbar, _Tabbar_inheritedAttributes, _Tabbar_computeDividerVisible_get, _Tabbar_scrollToStart, _Tabbar_scrollToEnd, _Tabbar_setActiveTab, _Tabbar_switchTabPanel, _Tabbar_handleTabActivation, _Tabbar_getCurrentTab, _Tabbar_setCurrentTab, _Tabbar_onClick, _Tabbar_onKeyDown, _Tabbar_onMouseDown, _Tabbar_onScroll, _Tabbar_onViewportCrop, _Tabbar_updateTabsCache, _Tabbar_onSlotchange;
+var _Tabbar_instances, _Tabbar_tabs, _Tabbar_ro, _Tabbar_tabbar, _Tabbar_inheritedAttributes, _Tabbar_computedImportance_get, _Tabbar_computedSize_get, _Tabbar_computedPlacement_get, _Tabbar_computeDividerVisible_get, _Tabbar_scrollToStart, _Tabbar_scrollToEnd, _Tabbar_setActiveTab, _Tabbar_switchTabPanel, _Tabbar_handleTabActivation, _Tabbar_getCurrentTab, _Tabbar_setCurrentTab, _Tabbar_isVerticalPlacement, _Tabbar_isHorizontalPlacement, _Tabbar_onClick, _Tabbar_onKeyDown, _Tabbar_onMouseDown, _Tabbar_onScroll, _Tabbar_onViewportCrop, _Tabbar_updateTabsCache, _Tabbar_setTabSettings, _Tabbar_onSlotchange;
 const TAB_SETTINGS = {
     'main-root': {
         importance: 'standard',
@@ -80,16 +80,33 @@ const Tabbar = class {
         _Tabbar_instances.add(this);
         /**
          * The tabbar's layer.
+         *
+         * @deprecated The property layer is deprecated. Please use `size` property instead.
+         * Please do not use `layer` and `size` at the same time.
          */
         this.layer = 'main';
         /**
          * The tabbar's level.
+         *
+         * @deprecated The property level is deprecated. Please use `size` property instead.
+         * Please do not use `level` and `size` at the same time.
          */
         this.level = 'root';
+        /**
+         * The tabbar's size. This controls the size of the tabs within the tabbar.
+         */
+        this.size = 'standard';
         /**
          * The tabbar's orientation.
+         *
+         * @deprecated Please use the `placement` property instead. Do not use
+         * `orientation` and `placement` at the same time.
          */
         this.orientation = 'horizontal';
+        /**
+         * The tabbar's placement.
+         */
+        this.placement = 'top';
         /**
          * Displays a divider line.
          */
@@ -97,7 +114,7 @@ const Tabbar = class {
         /**
          * The alignment of tabs. Only applicable for horizontal orientation.
          */
-        this.alignment = 'left';
+        this.alignment = 'start';
         this.disableEndArrow = false;
         this.disableStartArrow = false;
         _Tabbar_tabs.set(this, []);
@@ -122,6 +139,8 @@ const Tabbar = class {
                     : __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft + __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth,
             });
         });
+        _Tabbar_isVerticalPlacement.set(this, () => this.placement === 'start' || this.placement === 'end');
+        _Tabbar_isHorizontalPlacement.set(this, () => this.placement === 'top' || this.placement === 'bottom');
         _Tabbar_onClick.set(this, (event) => {
             const { target } = event;
             if (!(target instanceof HTMLElement))
@@ -133,7 +152,7 @@ const Tabbar = class {
             __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, tab);
         });
         _Tabbar_onKeyDown.set(this, (event) => {
-            const isVertical = this.orientation === 'vertical';
+            const isVertical = this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this);
             const MOVE_SELECTION_KEYS = isVertical
                 ? VERTICAL_MOVE_KEYS
                 : HORIZONTAL_MOVE_KEYS;
@@ -216,10 +235,14 @@ const Tabbar = class {
                 __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, __classPrivateFieldGet(this, _Tabbar_tabs, "f")[0]);
         });
     }
+    settingChanged() {
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setTabSettings).call(this);
+    }
     windowResize() {
         __classPrivateFieldGet(this, _Tabbar_onViewportCrop, "f").call(this);
     }
     componentWillLoad() {
+        this.settingChanged();
         __classPrivateFieldSet(this, _Tabbar_inheritedAttributes, inheritAriaAttributes(this.host), "f");
         const tabs = [
             ...this.host.querySelectorAll('qds-tab'),
@@ -233,18 +256,7 @@ const Tabbar = class {
     componentDidRender() {
         if (this.activeTab)
             __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, this.activeTab);
-        const settings = TAB_SETTINGS[`${this.layer}-${this.level}`];
-        if (!settings)
-            return;
-        for (const tab of this.host.querySelectorAll('qds-tab')) {
-            /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-            tab.importance = settings.importance;
-            tab.size = settings.size;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            tab.indicatorPosition =
-                this.orientation === 'vertical' ? 'inline-end' : tab.indicatorPosition;
-            /* eslint-enable @typescript-eslint/no-unsafe-member-access */
-        }
+        this.settingChanged();
     }
     componentDidLoad() {
         invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
@@ -256,34 +268,64 @@ const Tabbar = class {
             __classPrivateFieldGet(this, _Tabbar_ro, "f").disconnect();
     }
     render() {
-        return (h("div", { key: '08a0002721156b63a913af400939ecdd5e643cef', class: { 'qds-vertical-divider': this.orientation === 'vertical' }, "data-layer": this.layer, "data-level": this.level }, h("div", { key: 'ca559923b24ca9cecaf4622955249a330adaeba7', class: "qds-tabbar" }, h("div", { key: '987181efde486ffa9dde605d5ba10cd3b3aadbfb', class: {
+        return (h("div", { key: '47ac9cd0bc096758c6c2797393010c0a9693fa88', class: {
+                'qds-vertical-divider': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            }, "data-layer": this.layer, "data-level": this.level, "data-importance": __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) }, h("div", { key: '2421469125db014dfa6be6012daaf06a354e1466', class: "qds-tabbar" }, h("div", { key: '1def1f43dc9ecc8680634fa2d5f330c803c82054', class: {
                 'qds-align-center': true,
                 'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
-                    this.orientation === 'vertical',
-            } }, h("qds-icon-button", { key: '37088e335fe0feb772dedd1886f16f191d7fcdc3', text: "show previous tab", importance: "subdued", iconName: "next", iconLibrary: "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow })), h("ul", { key: '5ad39c11264831dd50cbca718cb824a0e5097ffc', class: {
+                    this.orientation === 'vertical' ||
+                    __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            } }, h("qds-icon-button", { key: '539fe2ec4cd5a91cf1a35ead239eebd2eda981e4', text: "show previous tab", importance: "subdued", iconName: "next", iconLibrary: "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow })), h("ul", { key: '05ff03b99f92f9e85f4703dcc6eca96220d6e1ee', class: {
                 'qds-tabs': true,
-                'qds-vertical': this.orientation === 'vertical',
-                'qds-centered': this.alignment === 'centered' &&
-                    this.orientation === 'horizontal' &&
+                'qds-vertical': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+                'qds-centered': this.alignment === 'center' &&
+                    (this.orientation === 'horizontal' ||
+                        __classPrivateFieldGet(this, _Tabbar_isHorizontalPlacement, "f").call(this)) &&
                     this.disableEndArrow &&
                     this.disableStartArrow,
             }, role: "tablist", "aria-label": this.tablistDescription, ref: (element) => {
                 __classPrivateFieldSet(this, _Tabbar_tabbar, element, "f");
-            }, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f"), ...__classPrivateFieldGet(this, _Tabbar_inheritedAttributes, "f") }, h("slot", { key: 'db30b064f6e9949c86bcc049bf6d5383f5d659e8', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: '6e61da5a09d938972b7629ac3449831d8fa630f2', class: {
+            }, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f"), ...__classPrivateFieldGet(this, _Tabbar_inheritedAttributes, "f") }, h("slot", { key: '4ccd64f11587556c7af2b0d4c571ee8162dbba70', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: 'c5b64348ca4c65bb4894ec0dec6b6b89c411f958', class: {
                 'qds-align-center': true,
                 'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
-                    this.orientation === 'vertical',
-            } }, h("qds-icon-button", { key: '74557af7eb1ab5ac2cd2dffe5751dd9b7083bb74', text: "show next tab", iconName: "next", iconLibrary: "core", importance: "subdued", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow }))), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && (h("qds-divider", { key: '6e178e1b7e5c1ed80f9b447248ec5df896cea055', vertical: this.orientation === 'vertical' }))));
+                    this.orientation === 'vertical' ||
+                    __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            } }, h("qds-icon-button", { key: 'edcb7e2054454edb2f949332ad62998a2e34a368', text: "show next tab", iconName: "next", iconLibrary: "core", importance: "subdued", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow }))), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && (h("qds-divider", { key: 'bfafcfbcaaa50341778498e9887b71a548209178', vertical: this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this) }))));
     }
     static get delegatesFocus() { return true; }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "importance": ["settingChanged"]
+    }; }
 };
-_Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new WeakMap(), _Tabbar_inheritedAttributes = new WeakMap(), _Tabbar_scrollToStart = new WeakMap(), _Tabbar_scrollToEnd = new WeakMap(), _Tabbar_onClick = new WeakMap(), _Tabbar_onKeyDown = new WeakMap(), _Tabbar_onMouseDown = new WeakMap(), _Tabbar_onScroll = new WeakMap(), _Tabbar_onViewportCrop = new WeakMap(), _Tabbar_onSlotchange = new WeakMap(), _Tabbar_instances = new WeakSet(), _Tabbar_computeDividerVisible_get = function _Tabbar_computeDividerVisible_get() {
+_Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new WeakMap(), _Tabbar_inheritedAttributes = new WeakMap(), _Tabbar_scrollToStart = new WeakMap(), _Tabbar_scrollToEnd = new WeakMap(), _Tabbar_isVerticalPlacement = new WeakMap(), _Tabbar_isHorizontalPlacement = new WeakMap(), _Tabbar_onClick = new WeakMap(), _Tabbar_onKeyDown = new WeakMap(), _Tabbar_onMouseDown = new WeakMap(), _Tabbar_onScroll = new WeakMap(), _Tabbar_onViewportCrop = new WeakMap(), _Tabbar_onSlotchange = new WeakMap(), _Tabbar_instances = new WeakSet(), _Tabbar_computedImportance_get = function _Tabbar_computedImportance_get() {
+    return this.importance;
+}, _Tabbar_computedSize_get = function _Tabbar_computedSize_get() {
+    return this.size ?? undefined;
+}, _Tabbar_computedPlacement_get = function _Tabbar_computedPlacement_get() {
+    switch (this.placement) {
+        case 'top': {
+            return 'block-end';
+        }
+        case 'end': {
+            return 'inline-start';
+        }
+        case 'bottom': {
+            return 'block-start';
+        }
+        case 'start': {
+            return 'inline-end';
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Tabbar_computeDividerVisible_get = function _Tabbar_computeDividerVisible_get() {
     if (this.layer === 'panel')
         return false;
     if (this.layer === 'main' &&
         this.level === 'subsection' &&
-        this.orientation === 'horizontal')
+        (this.orientation === 'horizontal' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this)))
         return false;
     return this.showDivider === true;
 }, _Tabbar_setActiveTab = function _Tabbar_setActiveTab(tab) {
@@ -335,6 +377,20 @@ _Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new W
     __classPrivateFieldSet(this, _Tabbar_tabs, slot
         ? [...slot.assignedElements({ flatten: true })].filter((element) => isEnabledTabItem(element))
         : [], "f");
+}, _Tabbar_setTabSettings = function _Tabbar_setTabSettings() {
+    const settings = TAB_SETTINGS[`${this.layer}-${this.level}`];
+    if (!settings)
+        return;
+    for (const tab of this.host.querySelectorAll('qds-tab')) {
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+        tab.importance = __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) ?? settings.importance;
+        tab.size = __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedSize_get) ?? settings.size;
+        tab.indicatorPosition =
+            this.orientation === 'vertical'
+                ? 'inline-end'
+                : (__classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedPlacement_get) ?? settings.indicatorPosition);
+        /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+    }
 };
 Tabbar.style = tabbarCss;