@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/cjs/ix-breadcrumb-item.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-be499a74.js');
+const anime_es = require('./anime.es-8822f296.js');
+const baseButton = require('./base-button-c158438e.js');
+const a11y = require('./a11y-4fdcefb4.js');
+
+const breadcrumbItemCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;color:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";
+
+const BreadcrumbItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemClick = index.createEvent(this, "itemClick", 7);
+    this.label = undefined;
+    this.icon = undefined;
+    this.ghost = true;
+    this.visible = true;
+    this.showChevron = true;
+    this.isDropdownTrigger = false;
+  }
+  componentDidLoad() {
+    this.animationFadeIn();
+  }
+  animationFadeIn() {
+    anime_es.anime({
+      targets: this.hostElement,
+      duration: 150,
+      opacity: [0, 1],
+      translateX: ['-100%', '0%'],
+      easing: 'linear',
+    });
+  }
+  render() {
+    const a11y$1 = a11y.a11yHostAttributes(this.hostElement);
+    const props = {
+      variant: this.ghost ? 'primary' : 'secondary',
+      outline: false,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      disabled: false,
+      icon: this.icon,
+      iconSize: '16',
+      loading: false,
+      selected: false,
+      type: 'button',
+      tabIndex: this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,
+      extraClasses: {
+        'dropdown-trigger': this.isDropdownTrigger,
+      },
+      ariaAttributes: a11y$1,
+    };
+    if (!this.visible) {
+      return index.h(index.Host, { class: 'invisible' });
+    }
+    return (index.h(index.Host, { class: {
+        'hide-chevron': !this.showChevron,
+      }, onClick: () => this.itemClick.emit(this.label) }, index.h("li", null, index.h(baseButton.BaseButton, Object.assign({}, props, { afterContent: index.h(index.Fragment, null, this.showChevron ? (index.h("ix-icon", { name: 'chevron-right-small', size: "16", class: 'chevron' })) : null) }), this.label, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+BreadcrumbItem.style = breadcrumbItemCss;
+
+exports.ix_breadcrumb_item = BreadcrumbItem;
+
+//# sourceMappingURL=ix-breadcrumb-item.cjs.entry.js.map

package/dist/cjs/ix-breadcrumb-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-breadcrumb-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,qy9BAAqy9B;;MCmClz9B,cAAc;;;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;EAKjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,eAAe;IACbA,cAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAMC,MAAI,GAAGC,uBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAED,MAAI;KACrB,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAOE,QAACC,UAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,QACED,QAACC,UAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAE9CD,oBACEA,QAACE,qBAAU,oBACL,KAAK,IACT,YAAY,EACVF,QAACG,cAAQ,QACN,IAAI,CAAC,WAAW,IACfH,qBACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,KAGZ,IAAI,CAAC,KAAK,EACXA,qBAAa,CACF,CACV,CACA,EACP;GACH;;;;;;;","names":["animejs","a11y","a11yHostAttributes","h","Host","BaseButton","Fragment"],"sources":["./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-breadcrumb.cjs.entry.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-be499a74.js');
+const a11y = require('./a11y-4fdcefb4.js');
+const mutationObserver = require('./mutation-observer-eaaa5399.js');
+
+const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
+
+let sequenceId = 0;
+const createId = (prefix = 'breadcrumb-') => {
+  return `${prefix}-${sequenceId++}`;
+};
+const Breadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemClick = index.createEvent(this, "itemClick", 7);
+    this.nextClick = index.createEvent(this, "nextClick", 7);
+    this.previousButtonId = createId();
+    this.previousDropdownId = createId();
+    this.visibleItemCount = 9;
+    this.nextItems = [];
+    this.ghost = true;
+    this.ariaLabelPreviousButton = 'previous';
+    this.previousButtonRef = undefined;
+    this.nextButtonRef = undefined;
+    this.items = [];
+    this.isPreviousDropdownExpanded = false;
+  }
+  onNextItemsChange() {
+    this.onChildMutation();
+  }
+  onItemClick(item) {
+    this.itemClick.emit(item);
+  }
+  componentDidLoad() {
+    this.mutationObserver = mutationObserver.createMutationObserver(() => this.onChildMutation());
+    this.mutationObserver.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+    });
+  }
+  componentWillLoad() {
+    this.onChildMutation();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  async onChildMutation() {
+    const updatedItems = this.getItems();
+    updatedItems.forEach((bc, index) => {
+      const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
+      bc.ghost = this.ghost;
+      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
+      bc.isDropdownTrigger = shouldShowDropdown;
+      if (shouldShowDropdown) {
+        this.nextButtonRef = bc;
+      }
+      if (updatedItems.length < this.visibleItemCount) {
+        return;
+      }
+      bc.visible = index >= updatedItems.length - this.visibleItemCount;
+    });
+    this.items = updatedItems;
+  }
+  getItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const a11y$1 = a11y.a11yHostAttributes(this.hostElement);
+    return (index.h(index.Host, null, index.h("ix-dropdown", { id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        ? this.previousButtonRef
+        : null, onShowChanged: ({ detail }) => {
+        this.isPreviousDropdownExpanded = detail;
+        // Need to force update previous button to change `aria-expanded`
+        index.forceUpdate(this.hostElement.shadowRoot.getElementById(this.previousButtonId));
+      } }, this.items
+      .slice(0, this.items.length - this.visibleItemCount)
+      .map((item) => {
+      var _a;
+      const label = (_a = item.label) !== null && _a !== void 0 ? _a : item.innerText;
+      return (index.h("ix-dropdown-item", { label: label, onClick: () => {
+          this.onItemClick(label);
+        }, onItemClick: (event) => event.stopPropagation() }));
+    })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (index.h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11y.a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, index.h("nav", { class: "crumb-items", "aria-label": (_c = a11y$1['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, index.h("ol", null, index.h("slot", null))), index.h("ix-dropdown", { trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (index.h("ix-dropdown-item", { label: item, onClick: (e) => {
+        this.nextClick.emit({
+          event: e,
+          item,
+        });
+      }, onItemClick: (event) => event.stopPropagation() }))))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "nextItems": ["onNextItemsChange"]
+  }; }
+};
+Breadcrumb.style = breadcrumbCss;
+
+exports.ix_breadcrumb = Breadcrumb;
+
+//# sourceMappingURL=ix-breadcrumb.cjs.entry.js.map

package/dist/cjs/ix-breadcrumb.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-breadcrumb.entry.cjs.js","mappings":"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","names":["createMutationObserver","a11y","a11yHostAttributes","h","Host","forceUpdate","a11yBoolean"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n  @State() nextButtonRef: HTMLElement;\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef = bc;\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            // Need to force update previous button to change `aria-expanded`\n            forceUpdate(\n              this.hostElement.shadowRoot.getElementById(this.previousButtonId)\n            );\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={(ref) => (this.previousButtonRef = ref)}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-burger-menu.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-be499a74.js');
 const baseButton = require('./base-button-c158438e.js');
-const a11y = require('./a11y-fa9abd92.js');
+const a11y = require('./a11y-4fdcefb4.js');
 
 const burgerMenuCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--hover)}.burger-menu-button{width:40px;padding:0}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}:host(.expanded) ix-icon-button{transform:rotate(180deg)}";
 
@@ -18,7 +18,7 @@ const BurgerMenu = class {
   render() {
     return (index.h(index.Host, { class: {
         expanded: this.expanded,
-      } }, this.pinned ? (index.h("ix-icon-button", { icon: "double-chevron-right", ghost: true })) : (index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11y.a11yBoolean(this.expanded) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
+      } }, this.pinned ? (index.h("ix-icon-button", { icon: 'double-chevron-right', ghost: true })) : (index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11y.a11yBoolean(this.expanded) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
   }
 };
 BurgerMenu.style = burgerMenuCss;

package/dist/cjs/ix-burger-menu.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-burger-menu.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,6lcAA6lc;;MC8Btmc,UAAU;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACVD,4BAAgB,IAAI,EAAC,sBAAsB,EAAC,KAAK,SAAkB,KAEnEA,oBACE,KAAK,kCACAE,2BAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxCC,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExCH,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEXA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;","names":["h","Host","getButtonClasses","a11yBoolean"],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 2rem;\n  width: 2.5rem;\n  border-radius: var(--theme-btn--border-radius);\n  pointer-events: all;\n\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .line {\n    fill: var(--theme-menu-btn--color);\n    opacity: 1;\n    x: 2px;\n    transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n      y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n    transform-origin: center;\n  }\n}\n\n@include host-hover {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--hover);\n  }\n}\n\n.burger-menu-button {\n  width: 40px;\n  padding: 0;\n}\n\n@include host-active {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--active);\n  }\n}\n\n:host(.expanded) {\n  svg .line-1 {\n    opacity: 1;\n    transform: rotate(-45deg);\n    y: 11px;\n  }\n\n  svg .line-2 {\n    opacity: 0;\n    x: 9;\n  }\n\n  svg .line-3 {\n    opacity: 1;\n    transform: rotate(45deg);\n    y: 11px;\n  }\n\n  ix-icon-button {\n    transform: rotate(180deg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-burger-menu',\n  styleUrl: './burger-menu.scss',\n  shadow: true,\n})\nexport class BurgerMenu {\n  /**\n   * Accessibility label for the burger menu button (MANDATORY)\n   */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /**\n   * Does burger menu button display the expanded or the not expanded state\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  /**\n   * Display as pinned\n   */\n  @Prop() pinned = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.pinned ? (\n          <ix-icon-button icon=\"double-chevron-right\" ghost></ix-icon-button>\n        ) : (\n          <button\n            class={{\n              ...getButtonClasses(\n                'secondary',\n                false,\n                true,\n                true,\n                false,\n                false,\n                false\n              ),\n              'burger-menu-button': true,\n            }}\n            type=\"button\"\n            aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n            aria-pressed={a11yBoolean(this.expanded)}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              height=\"24\"\n            >\n              <rect\n                class=\"line line-1\"\n                x=\"2\"\n                y=\"5\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-2\"\n                x=\"2\"\n                y=\"11\"\n                width=\"13\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-3\"\n                x=\"2\"\n                y=\"17\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n            </svg>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-burger-menu.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,6lcAA6lc;;MC8Btmc,UAAU;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACVD,4BAAgB,IAAI,EAAE,sBAAsB,EAAE,KAAK,SAAkB,KAErEA,oBACE,KAAK,kCACAE,2BAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxCC,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExCH,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEXA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;","names":["h","Host","getButtonClasses","a11yBoolean"],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 2rem;\n  width: 2.5rem;\n  border-radius: var(--theme-btn--border-radius);\n  pointer-events: all;\n\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .line {\n    fill: var(--theme-menu-btn--color);\n    opacity: 1;\n    x: 2px;\n    transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n      y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n    transform-origin: center;\n  }\n}\n\n@include host-hover {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--hover);\n  }\n}\n\n.burger-menu-button {\n  width: 40px;\n  padding: 0;\n}\n\n@include host-active {\n  .burger-menu-button {\n    background-color: var(--theme-menu-btn--background--active);\n  }\n}\n\n:host(.expanded) {\n  svg .line-1 {\n    opacity: 1;\n    transform: rotate(-45deg);\n    y: 11px;\n  }\n\n  svg .line-2 {\n    opacity: 0;\n    x: 9;\n  }\n\n  svg .line-3 {\n    opacity: 1;\n    transform: rotate(45deg);\n    y: 11px;\n  }\n\n  ix-icon-button {\n    transform: rotate(180deg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-burger-menu',\n  styleUrl: './burger-menu.scss',\n  shadow: true,\n})\nexport class BurgerMenu {\n  /**\n   * Accessibility label for the burger menu button (MANDATORY)\n   */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /**\n   * Does burger menu button display the expanded or the not expanded state\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  /**\n   * Display as pinned\n   */\n  @Prop() pinned = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.pinned ? (\n          <ix-icon-button icon={'double-chevron-right'} ghost></ix-icon-button>\n        ) : (\n          <button\n            class={{\n              ...getButtonClasses(\n                'secondary',\n                false,\n                true,\n                true,\n                false,\n                false,\n                false\n              ),\n              'burger-menu-button': true,\n            }}\n            type=\"button\"\n            aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n            aria-pressed={a11yBoolean(this.expanded)}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              height=\"24\"\n            >\n              <rect\n                class=\"line line-1\"\n                x=\"2\"\n                y=\"5\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-2\"\n                x=\"2\"\n                y=\"11\"\n                width=\"13\"\n                height=\"2\"\n              ></rect>\n              <rect\n                class=\"line line-3\"\n                x=\"2\"\n                y=\"17\"\n                width=\"20\"\n                height=\"2\"\n              ></rect>\n            </svg>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-card-accordion_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-be499a74.js');
 
-const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;height:2.5rem;max-height:2.5rem;transition:var(--theme-default-time) ease-in-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:flex;flex-direction:column;opacity:0;position:absolute;top:2.5rem;transition:var(--theme-default-time) ease-in-out;width:100%;height:0;max-height:20rem;background-color:var(--theme-color-component-1)}:host .expand-content.show{height:15rem;opacity:1}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host(.show){height:calc(15rem + 2.5rem);max-height:calc(15rem + 2.5rem)}";
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}";
 
 let accordionControlId = 0;
 const getAriaControlsId = (prefix = 'expand-content') => {
@@ -42,21 +42,19 @@ const CardAccordion = class {
     }, 150);
   }
   render() {
-    return (index.h(index.Host, { slot: "card-accordion", class: {
-        show: this.expandContent,
-      } }, index.h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, index.h("ix-icon", { name: "chevron-right-small", class: {
+    return (index.h(index.Host, { slot: "card-accordion" }, index.h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, index.h("ix-icon", { name: 'chevron-right-small', class: {
         'expand-icon': true,
         show: this.expandContent,
       } })), index.h("div", { class: {
         'expand-content': true,
         show: this.expandContent,
-      } }, index.h("div", { class: 'expand-content-body' }, index.h("slot", null)), index.h("div", { class: 'expand-content-footer' }))));
+      } }, index.h("div", { class: "expand-content-inner" }, index.h("div", { class: "expand-content-body" }, index.h("slot", null)), index.h("div", { class: "expand-content-footer" })))));
   }
   get hostElement() { return index.getElement(this); }
 };
 CardAccordion.style = cardAccordionCss;
 
-const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;padding:0px;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";
+const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;margin-top:0.25rem;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";
 
 const CardHeader = class {
   constructor(hostRef) {

package/dist/cjs/ix-card-accordion_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-card-accordion.ix-card-title.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,mwFAAmwF;;ACU5xF,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;EAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GACrE;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;GACF;EAEO,6BAA6B;IACnC,UAAU,CAAC;MACT,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;KACF,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAEDD,oBACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElCA,qBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,GACQ,CACJ,EACTA,iBACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAEDA,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,qBAAa,CACT,EACNA,iBAAK,KAAK,EAAE,uBAAuB,GAAQ,CACvC,CACD,EACP;GACH;;;;;ACzGH,MAAM,YAAY,GAAG,uPAAuP;;MCY/P,UAAU;;;;EACrB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAa,EACbA,iBAAK,KAAK,EAAC,eAAe,IACxBA,kBAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx","./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$action-height: 2.5rem;\n$expand-content-height: 15rem;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  height: $action-height;\n  max-height: $action-height;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: $action-height;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    position: absolute;\n    top: $action-height;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    height: 0;\n    max-height: 20rem;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    height: $expand-content-height;\n    opacity: 1;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n\n:host(.show) {\n  height: calc(#{$expand-content-height} + #{$action-height});\n  max-height: calc(#{$expand-content-height} + #{$action-height});\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name=\"chevron-right-small\"\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class={'expand-content-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-card-accordion.ix-card-title.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,4vFAA4vF;;ACUrxF,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;EAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GACrE;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;GACF;EAEO,6BAA6B;IACnC,UAAU,CAAC;MACT,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;KACF,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,IAAI,EAAC,gBAAgB,IACzBD,oBACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElCA,qBACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,GACQ,CACJ,EACTA,iBACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAEDA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,qBAAa,CACT,EACNA,iBAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,EACP;GACH;;;;;ACtGH,MAAM,YAAY,GAAG,8PAA8P;;MCYtQ,UAAU;;;;EACrB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAa,EACbA,iBAAK,KAAK,EAAC,eAAe,IACxBA,kBAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx","./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: 2.5rem;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: grid;\n    position: relative;\n    grid-template-rows: 0fr;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    max-height: 14.75rem;\n    opacity: 0;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    grid-template-rows: 14.75rem;\n    opacity: 1;\n  }\n\n  .expand-content-inner {\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n    height: calc(100% - 1rem);\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name={'chevron-right-small'}\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class=\"expand-content-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 0.25rem;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-card-list.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-be499a74.js');
 const mutationObserver = require('./mutation-observer-eaaa5399.js');
 
-const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center;transform:scale(2)}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
 
 function CardListTitle(props) {
   if (props.label === '') {
     return null;
   }
-  return (index.h("div", { class: "CardList_Title" }, index.h("ix-icon-button", { ghost: true, icon: "chevron-down", onClick: props.onClick, color: "color-primary", class: {
+  return (index.h("div", { class: "CardList_Title" }, index.h("ix-icon-button", { ghost: true, icon: 'chevron-down', onClick: props.onClick, color: "color-primary", class: {
       CardList__Title__Button: true,
       CardList__Title__Button__Collapsed: props.isCollapsed,
     } }), index.h("ix-typography", { variant: "large-single" }, props.label), index.h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, index.h("span", null, props.showAllLabel), index.h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null))));
@@ -153,7 +153,7 @@ const CardList = class {
         Show__All__Card: true,
       }, onClick: (event) => this.showMoreCardClick.emit({
         nativeEvent: event,
-      }) }, index.h("ix-card-content", { class: "Show__All__Card__Content" }, index.h("ix-icon", { name: "more-menu", size: '32', class: 'Show__All__Card__Icon' }), index.h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")")))) : null))));
+      }) }, index.h("ix-card-content", { class: "Show__All__Card__Content" }, index.h("ix-icon", { name: 'more-menu', size: '32', class: 'Show__All__Card__Icon' }), index.h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")")))) : null))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-card-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-card-list.entry.cjs.js","mappings":"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","names":["h","createMutationObserver","Host"],"sources":["./src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","./src/components/card-list/card-list.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n    transform: scale(2);\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon=\"chevron-down\"\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      <ix-button\n        class=\"CardList__Title__Show__All\"\n        ghost\n        onClick={props.onShowAllClick}\n      >\n        <span>{props.showAllLabel}</span>\n        <span>\n          {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n        </span>\n      </ix-button>\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name=\"more-menu\"\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-card-list.entry.cjs.js","mappings":"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","names":["h","createMutationObserver","Host"],"sources":["./src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","./src/components/card-list/card-list.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      <ix-button\n        class=\"CardList__Title__Show__All\"\n        ghost\n        onClick={props.onShowAllClick}\n      >\n        <span>{props.showAllLabel}</span>\n        <span>\n          {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n        </span>\n      </ix-button>\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}