@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/post-tab-header2.js

@@ -1,52 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { n as nanoid } from './index.browser.js';
-
-const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
-const PostTabHeaderStyle0 = postTabHeaderCss;
-
-const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tabId = undefined;
-        this.panel = undefined;
-    }
-    validateFor() {
-        checkRequiredAndType(this, 'panel', 'string');
-    }
-    componentWillLoad() {
-        this.tabId = `tab-${this.host.id || nanoid(6)}`;
-    }
-    render() {
-        return (h(Host, { key: '5046c46fa27fd6586c694420abf197b227b56520', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78c2f660e4f2307ca95a63f4cfd90d08cc6942df' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "panel": ["validateFor"]
-    }; }
-    static get style() { return PostTabHeaderStyle0; }
-}, [1, "post-tab-header", {
-        "panel": [513],
-        "tabId": [32]
-    }, undefined, {
-        "panel": ["validateFor"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tab-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tab-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabHeader);
-            }
-            break;
-    } });
-}
-
-export { PostTabHeader as P, defineCustomElement as d };

package/dist/components/post-tab-panel2.js

@@ -1,54 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-
-const postTabPanelCss = ":host{display:none}";
-const PostTabPanelStyle0 = postTabPanelCss;
-
-const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.panelId = undefined;
-        this.name = undefined;
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    componentWillLoad() {
-        this.validateName();
-        // get the id set on the host element or use a random id by default
-        this.panelId = `panel-${this.host.id || nanoid(6)}`;
-    }
-    render() {
-        return (h(Host, { key: 'aef9d8692392f57745c0d0a0af13fedb6f67f231', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '1e51f8680f4e7bdcb37994db3e70e828dde61dc0' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "name": ["validateName"]
-    }; }
-    static get style() { return PostTabPanelStyle0; }
-}, [1, "post-tab-panel", {
-        "name": [513],
-        "panelId": [32]
-    }, undefined, {
-        "name": ["validateName"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tab-panel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tab-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabPanel);
-            }
-            break;
-    } });
-}
-
-export { PostTabPanel as P, defineCustomElement as d };

package/dist/components/post-tabs2.js

@@ -1,189 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { f as fadeOut, a as fadeIn } from './fade.js';
-import './breakpoints.js';
-
-/**
- * Invoke the `componentOnReady` method if it is available, simulate it otherwise
- * @see https://stenciljs.com/docs/api#componentonready
- */
-function componentOnReady(el) {
-    if (typeof el.componentOnReady === 'function') {
-        return el.componentOnReady();
-    }
-    else {
-        return new Promise(resolve => customOnReady(() => {
-            resolve(el);
-        }));
-    }
-}
-function customOnReady(callback) {
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(callback);
-    }
-    return setTimeout(callback);
-}
-
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
-const PostTabsStyle0 = postTabsCss;
-
-const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
-        this.activePanel = undefined;
-    }
-    get tabs() {
-        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
-    }
-    componentDidLoad() {
-        this.moveMisplacedTabs();
-        this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
-        void this.show(initiallyActivePanel);
-        this.isLoaded = true;
-    }
-    /**
-     * Shows the panel with the given name and selects its associated tab.
-     * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
-     */
-    async show(panelName) {
-        // do nothing if the tab is already active
-        if (panelName === this.activeTab?.panel) {
-            return;
-        }
-        const previousTab = this.activeTab;
-        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
-        this.activateTab(newTab);
-        // if a panel is currently being displayed, remove it from the view and complete the associated animation
-        if (this.showing) {
-            this.showing.effect['target'].style.display = 'none';
-            this.showing.finish();
-        }
-        // hide the currently visible panel only if no other animation is running
-        if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.panel);
-        // wait for any hiding animation to complete before showing the selected tab
-        if (this.hiding)
-            await this.hiding.finished;
-        this.showSelectedPanel();
-        // wait for any display animation to complete for the returned promise to fully resolve
-        if (this.showing)
-            await this.showing.finished;
-        if (this.isLoaded)
-            this.postChange.emit(this.activeTab.panel);
-    }
-    moveMisplacedTabs() {
-        if (!this.tabs)
-            return;
-        this.tabs.forEach(tab => {
-            if (tab.getAttribute('slot') === 'tabs')
-                return;
-            tab.setAttribute('slot', 'tabs');
-        });
-    }
-    enableTabs() {
-        if (!this.tabs)
-            return;
-        this.tabs.forEach(async (tab) => {
-            await componentOnReady(tab);
-            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
-            if (tab.getAttribute('aria-controls'))
-                return;
-            const tabPanel = this.getPanel(tab.panel);
-            tab.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tab.id);
-            tab.addEventListener('click', () => {
-                void this.show(tab.panel);
-            });
-            tab.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    void this.show(tab.panel);
-                }
-            });
-            tab.addEventListener('keydown', (e) => {
-                if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
-                    this.navigateTabs(tab, e.key);
-            });
-        });
-        // if the currently active tab was removed from the DOM then select the first one
-        if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs[0]?.panel);
-        }
-    }
-    activateTab(tab) {
-        if (this.activeTab) {
-            this.activeTab.setAttribute('aria-selected', 'false');
-            this.activeTab.setAttribute('tabindex', '-1');
-            this.activeTab.classList.remove('active');
-        }
-        tab.setAttribute('aria-selected', 'true');
-        tab.setAttribute('tabindex', '0');
-        tab.classList.add('active');
-        this.activeTab = tab;
-    }
-    hidePanel(panelName) {
-        const previousPanel = this.getPanel(panelName);
-        if (!previousPanel)
-            return;
-        this.hiding = fadeOut(previousPanel);
-        this.hiding.onfinish = () => {
-            previousPanel.style.display = 'none';
-            this.hiding = null;
-        };
-    }
-    showSelectedPanel() {
-        const panel = this.getPanel(this.activeTab.panel);
-        panel.style.display = 'block';
-        // prevent the initially selected panel from fading in
-        if (!this.isLoaded)
-            return;
-        this.showing = fadeIn(panel);
-        this.showing.onfinish = () => {
-            this.showing = null;
-        };
-    }
-    getPanel(name) {
-        return this.host.querySelector(`post-tab-panel[name=${name}]`);
-    }
-    navigateTabs(tab, key) {
-        const activeTabIndex = Array.from(this.tabs).indexOf(tab);
-        let nextTab;
-        if (key === 'ArrowRight') {
-            nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
-        }
-        else {
-            nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
-        }
-        if (!nextTab)
-            return;
-        nextTab.focus();
-    }
-    render() {
-        return (h(Host, { key: 'b38b216caa48cb36b73f36669a650bc88b56c860', "data-version": version }, h("div", { key: '751f88c9f0241e42b6c8d996b3645c26113f0ce2', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'd194ce33913a2ed6abbdd939ad5dcdc74e6f6798', class: "tabs", role: "tablist" }, h("slot", { key: '46fb9cf2d52fadf9418dff7050b78274457c3b0a', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'db2bfba595dab2730b9189a935dcd99504d7bad6', class: "tab-content", part: "content" }, h("slot", { key: '35795441e71901727fad9d759da483f55a865e97', onSlotchange: () => this.moveMisplacedTabs() }))));
-    }
-    get host() { return this; }
-    static get style() { return PostTabsStyle0; }
-}, [1, "post-tabs", {
-        "activePanel": [1, "active-panel"],
-        "show": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tabs"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabs);
-            }
-            break;
-    } });
-}
-
-export { PostTabs as P, defineCustomElement as d };

package/dist/components/post-tag2.js

@@ -1,88 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
-import './breakpoints.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
-
-const postTagCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
-const PostTagStyle0 = postTagCss;
-
-const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = undefined;
-        this.icon = undefined;
-        this.setClasses = this.setClasses.bind(this);
-    }
-    variantChanged() {
-        checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
-        this.setClasses();
-    }
-    sizeChanged() {
-        checkEmptyOrOneOf(this, 'size', ['sm']);
-        this.setClasses();
-    }
-    validateName() {
-        checkEmptyOrType(this, 'icon', 'string');
-    }
-    setClasses() {
-        this.classes = [
-            'tag',
-            this.size ? `tag-${this.size}` : null,
-            this.variant ? `tag-${this.variant}` : null,
-        ]
-            .filter(c => c !== null)
-            .join(' ');
-    }
-    componentWillLoad() {
-        this.validateName();
-        this.variantChanged();
-        this.sizeChanged();
-    }
-    connectedCallback() {
-        this.setClasses();
-    }
-    render() {
-        return (h(Host, { key: 'ecc396b297434d07c2fbca896ad7dbb817c5e52c', "data-version": version }, h("div", { key: 'cf43facc3b6d7caa329fb2b62a67931e53aaeb98', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '60232a82d9c231da41d22dd5e50744378dab54aa', class: "tag-text" }, h("slot", { key: '6b95fe941aac88e3ce6103187d5d831d53f8c315' })))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "variant": ["variantChanged"],
-        "size": ["sizeChanged"],
-        "icon": ["validateName"]
-    }; }
-    static get style() { return PostTagStyle0; }
-}, [1, "post-tag", {
-        "variant": [1],
-        "size": [1],
-        "icon": [1],
-        "classes": [32]
-    }, undefined, {
-        "variant": ["variantChanged"],
-        "size": ["sizeChanged"],
-        "icon": ["validateName"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tag", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTag);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostTag as P, defineCustomElement as d };

package/dist/components/post-togglebutton2.js

@@ -1,51 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-
-const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
-const PostTogglebuttonStyle0 = postTogglebuttonCss;
-
-const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
-            }
-        };
-        this.toggled = false;
-    }
-    componentWillLoad() {
-        // add event listener to not override listener that might be set on the host
-        this.host.addEventListener('click', () => this.handleClick());
-        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
-    }
-    render() {
-        return (h(Host, { key: 'd79b9952861afa27d8d1c5afb492e585bdc8a722', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'aad4cc86756d0688d10f1b28dc14d6b464ab8830' })));
-    }
-    get host() { return this; }
-    static get style() { return PostTogglebuttonStyle0; }
-}, [1, "post-togglebutton", {
-        "toggled": [1028]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-togglebutton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-togglebutton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTogglebutton);
-            }
-            break;
-    } });
-}
-
-export { PostTogglebutton as P, defineCustomElement as d };