@swisspost/design-system-components 9.0.0-next.9 → 9.0.0

package/dist/collection/components/post-header/post-header.js

@@ -1,160 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { throttle } from "throttle-debounce";
-import { version } from "../../../../package";
-import { slideDown, slideUp } from "../../animations/slide";
-export class PostHeader {
-    constructor() {
-        this.scrollParent = null;
-        this.throttledScroll = () => this.handleScrollEvent();
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.device = null;
-        this.mobileMenuExtended = false;
-    }
-    componentWillRender() {
-        this.scrollParent = this.getScrollParent(this.host);
-        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
-        window.addEventListener('resize', this.throttledResize, { passive: true });
-        this.handleResize();
-        this.handleScrollEvent();
-    }
-    frozeBody(isMobileMenuExtended) {
-        document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
-    }
-    /**
-     * Toggles the mobile navigation.
-     */
-    async toggleMobileMenu() {
-        if (this.device === 'desktop')
-            return;
-        this.mobileMenuAnimation = this.mobileMenuExtended
-            ? slideUp(this.mobileMenu)
-            : slideDown(this.mobileMenu);
-        // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = !this.mobileMenuExtended;
-        // Toggle menu visibility before it slides down and after it slides back up
-        if (this.mobileMenuExtended)
-            await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = !this.mobileMenuExtended;
-        if (!this.mobileMenuExtended)
-            await this.mobileMenuAnimation.finished;
-    }
-    handleScrollEvent() {
-        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-        const st = Math.max(0, this.scrollParent instanceof Document
-            ? this.scrollParent.documentElement.scrollTop
-            : this.scrollParent.scrollTop);
-        this.host.style.setProperty('--header-scroll-top', `${st}px`);
-    }
-    getScrollParent(node) {
-        let currentParent = node.parentElement;
-        while (currentParent) {
-            if (currentParent.nodeName === 'BODY') {
-                return document;
-            }
-            if (this.isScrollable(currentParent)) {
-                return currentParent;
-            }
-            currentParent = currentParent.parentElement;
-        }
-        return document;
-    }
-    isScrollable(node) {
-        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-            return false;
-        }
-        const style = getComputedStyle(node);
-        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
-            const value = style.getPropertyValue(propertyName);
-            return value === 'auto' || value === 'scroll';
-        });
-    }
-    handleResize() {
-        const previousDevice = this.device;
-        let newDevice;
-        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
-        if (width >= 1024) {
-            newDevice = 'desktop';
-        }
-        else if (width >= 600) {
-            newDevice = 'tablet';
-        }
-        else {
-            newDevice = 'mobile';
-        }
-        // Close any open mobile menu
-        if (newDevice === 'desktop' && this.mobileMenuExtended) {
-            this.toggleMobileMenu();
-            this.mobileMenuAnimation.finish(); // no animation
-        }
-        // Apply only on change for doing work only when necessary
-        if (newDevice !== previousDevice) {
-            this.device = newDevice;
-            window.requestAnimationFrame(() => {
-                this.switchLanguageSwitchMode();
-            });
-        }
-    }
-    switchLanguageSwitchMode() {
-        var _a;
-        const variant = this.device === 'desktop' ? 'dropdown' : 'list';
-        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
-    }
-    render() {
-        const navigationClasses = ['navigation'];
-        if (this.mobileMenuExtended) {
-            navigationClasses.push('extended');
-        }
-        return (h(Host, { key: 'd96b46b64946ef425059463d127fa1188c99ea58', version: version }, h("div", { key: '831ebc53d0f598a99e72d46a1530c2c34c196948', class: "global-header" }, h("div", { key: '69f3b3bc47a61810eea3ae60d7b2423af1750416', class: "global-sub" }, h("div", { key: 'ad6d36c7e7f029edfdee223ab1df664a1b7002f8', class: "logo" }, h("slot", { key: '95adfc2ad9e63fde9eef3cc71b63247e140fba3d', name: "post-logo" }))), h("div", { key: '741e62693a4df8558213c85d7a837efb8b0cfa6d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '992844b617955cb77079a175fcaaf54943a6eef2', name: "meta-navigation" }), h("slot", { key: '4384ae4c04d239bf1b1947ba6d1457ae6879a5cf', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c5b33b6bfb8c00d44710ec997a80d56720aab760', name: "post-language-switch" }), h("div", { key: '25a629a419c94fc4789eb374b87cf7c159b746c6', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3f3078832237abc5a6df79b4a57fe20fae926aa3', name: "post-togglebutton" })))), h("div", { key: 'e11ca83bc108d4677e849b7386ad7bd09d8c9331', class: "title-header d-flex space-between align-center" }, h("slot", { key: '87430ad15ab09f800b714be45be00a50e5b7dc0a', name: "title" }), h("div", { key: '494a198d3ee8185a26b16fce97a85bed01d6b3f7', class: "global-sub" }, h("slot", { key: '8a54e3d1366d39c11d64c0de90f35a4330836428', name: "local-controls" }), h("slot", { key: '63f841457e0f7b7722a3f8b1ea83ff0d78d9c08e' }))), h("div", { key: '90cf667c412d90f8e466e7e7925fa4a2f8223ad8', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: 'a046286cb6cc770bfb8fb4439cdacac7c351001b', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '6e0ad5841ef53daf0c0885b75efdf12d69f4a72d', class: "navigation-footer" }, h("slot", { key: '1eaebace0d5e37794867ae2a317a104726bb873a', name: "meta-navigation" }), h("slot", { key: '79217cd6fd16d4c6ef3e8aaa656e6dc0a8842b23', name: "post-language-switch" }))))));
-    }
-    static get is() { return "post-header"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./post-header.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-header.css"]
-        };
-    }
-    static get states() {
-        return {
-            "device": {},
-            "mobileMenuExtended": {}
-        };
-    }
-    static get methods() {
-        return {
-            "toggleMobileMenu": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLPostTogglebuttonElement": {
-                            "location": "global",
-                            "id": "global::HTMLPostTogglebuttonElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggles the mobile navigation.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "mobileMenuExtended",
-                "methodName": "frozeBody"
-            }];
-    }
-}

package/dist/collection/components/post-language-option/post-language-option.css

@@ -1,3 +0,0 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}.post-language-option-list{border-radius:2px;width:40px;height:40px}.post-language-option-list{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}.post-language-option-list:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-option-list:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-option-list:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-option-list:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-option-list[aria-current=true],.post-language-option-list[aria-current=page]{background-color:#050400;color:#fff}.post-language-option-dropdown{padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative}.post-language-option-dropdown[aria-current=true]::after,.post-language-option-dropdown[aria-current=page]::after{content:"";left:-2px;height:3px;background-color:#504f4b;width:calc(100% + 4px);display:block;position:absolute;bottom:3px}.post-language-option-dropdown[aria-current=true]:focus::after,.post-language-option-dropdown[aria-current=page]:focus::after{width:calc(100% - 5px);left:2px}

package/dist/collection/components/post-language-option/post-language-option.js

@@ -1,215 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import { checkEmptyOrType, checkType } from "../../utils/index";
-import { version } from "../../../../package";
-/**
- * @slot default - Slot for placing the content inside the anchor or button.
- */
-export class PostLanguageOption {
-    constructor() {
-        this.code = undefined;
-        this.active = undefined;
-        this.variant = undefined;
-        this.name = undefined;
-        this.url = undefined;
-    }
-    validateCode(value = this.code) {
-        checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
-    }
-    validateActiveProp(value = this.active) {
-        checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
-    }
-    validateName(value = this.name) {
-        checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
-    }
-    validateUrl(value = this.url) {
-        checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
-    }
-    componentDidLoad() {
-        this.validateCode();
-        this.validateActiveProp();
-        this.validateName();
-        this.validateUrl();
-        if (!this.name && this.isNameRequired()) {
-            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
-        }
-    }
-    /**
-     * Selects the language option programmatically.
-     */
-    async select() {
-        this.active = true;
-        this.emitChange();
-    }
-    emitChange() {
-        this.postChange.emit(this.code);
-    }
-    isNameRequired() {
-        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
-    }
-    render() {
-        const lang = this.code.toLowerCase();
-        return (h(Host, { key: '9a3f49ee993b69393ea8f81b671cd5482049ff1c', "data-version": version, role: "listitem" }, this.url ? (h("a", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
-    }
-    static get is() { return "post-language-option"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-language-option.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-language-option.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "code": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\"."
-                },
-                "attribute": "code",
-                "reflect": false
-            },
-            "active": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If set to `true`, the language option is considered the current language for the page."
-                },
-                "attribute": "active",
-                "reflect": true
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SwitchVariant | null",
-                    "resolved": "\"dropdown\" | \"list\"",
-                    "references": {
-                        "SwitchVariant": {
-                            "location": "import",
-                            "path": "../post-language-switch/switch-variants",
-                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The variant of the post-language-switch parent (dynamically set by the parent)"
-                },
-                "attribute": "variant",
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The full name of the language. For example, \"Deutsch\"."
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "url": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The URL used for the href attribute of the internal anchor.\nThis field is optional; if not provided, a button will be used internally instead of an anchor."
-                },
-                "attribute": "url",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "postChange",
-                "name": "postChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "An event emitted when the language option is clicked. The payload is the ISO 639 code of the language."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "select": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Selects the language option programmatically.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "code",
-                "methodName": "validateCode"
-            }, {
-                "propName": "active",
-                "methodName": "validateActiveProp"
-            }, {
-                "propName": "name",
-                "methodName": "validateName"
-            }, {
-                "propName": "url",
-                "methodName": "validateUrl"
-            }];
-    }
-}

package/dist/collection/components/post-language-switch/post-language-switch.css

@@ -1 +0,0 @@
-:host{display:block}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-trigger{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}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}

package/dist/collection/components/post-language-switch/post-language-switch.js

@@ -1,163 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { checkEmptyOrOneOf, checkType } from "../../utils/index";
-import { version } from "../../../../package";
-import { SWITCH_VARIANTS } from "./switch-variants";
-import { nanoid } from "nanoid";
-export class PostLanguageSwitch {
-    constructor() {
-        this.menuId = `p${nanoid(11)}`;
-        this.caption = undefined;
-        this.description = undefined;
-        this.variant = 'list';
-        this.activeLang = undefined;
-    }
-    validateCaption(value = this.caption) {
-        checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
-    }
-    validateDescription(value = this.description) {
-        checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
-    }
-    validateVariant(value = this.variant) {
-        checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
-    }
-    connectedCallback() {
-        this.updateChildrenVariant();
-        // Get the active language based on children's active state
-        this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
-            .find(el => el.getAttribute('active') == 'true')
-            .getAttribute('code');
-    }
-    // Update post-language-option variant to have the correct style
-    updateChildrenVariant() {
-        this.host.querySelectorAll('post-language-option').forEach(el => {
-            el.setAttribute('variant', this.variant);
-        });
-    }
-    componentShouldUpdate() {
-        this.updateChildrenVariant();
-    }
-    componentDidLoad() {
-        this.validateCaption();
-        this.validateDescription();
-        this.validateVariant();
-        // Detects a change in the active language
-        this.host.addEventListener('postChange', (el) => {
-            this.activeLang = el.detail;
-            // Update the active state in the children post-language-option components
-            this.host.querySelectorAll('post-language-option').forEach(lang => {
-                if (lang.code && lang.code === this.activeLang) {
-                    lang.setAttribute('active', 'true');
-                }
-                else {
-                    lang.setAttribute('active', 'false');
-                }
-            });
-            // Hides the dropdown when an option has been clicked
-            if (this.variant === 'dropdown') {
-                const menu = this.host.shadowRoot.querySelector('post-menu');
-                menu.toggle(menu);
-            }
-        });
-    }
-    renderList() {
-        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
-    }
-    renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId }, h("div", { class: "post-language-switch-dropdown-container" }, h("slot", null)))));
-    }
-    render() {
-        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
-    }
-    static get is() { return "post-language-switch"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-language-switch.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-language-switch.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "caption": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A title for the list of language options"
-                },
-                "attribute": "caption",
-                "reflect": false
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A descriptive text for the list of language options"
-                },
-                "attribute": "description",
-                "reflect": false
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SwitchVariant",
-                    "resolved": "\"dropdown\" | \"list\"",
-                    "references": {
-                        "SwitchVariant": {
-                            "location": "import",
-                            "path": "./switch-variants",
-                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)"
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "'list'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "activeLang": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "caption",
-                "methodName": "validateCaption"
-            }, {
-                "propName": "description",
-                "methodName": "validateDescription"
-            }, {
-                "propName": "variant",
-                "methodName": "validateVariant"
-            }];
-    }
-}

package/dist/collection/components/post-language-switch/switch-variants.js

@@ -1 +0,0 @@
-export const SWITCH_VARIANTS = ['list', 'dropdown'];

package/dist/collection/components/post-list/post-list.css

@@ -1,3 +0,0 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}

package/dist/collection/components/post-list/post-list.js

@@ -1,87 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { version } from "../../../../package";
-/**
- * @slot default - Slot for placing the list title.
- * @slot post-list-item - Slot for placing post-list-item components.
- */
-export class PostList {
-    constructor() {
-        this.titleId = undefined;
-        this.titleHidden = false;
-        this.horizontal = false;
-    }
-    componentWillLoad() {
-        /**
-         * Get the id set on the host element or use a random id by default
-         */
-        this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
-    }
-    componentDidLoad() {
-        this.checkTitle();
-    }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
-        }
-    }
-    render() {
-        return (h(Host, { key: '4f982e717530514589c5528553b70463d678b676', "data-version": version }, h("div", { key: 'cc65ed208f48e7a22482af96fd069d05363f2617', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0f8bbeade50b59e53767ce2169dd57bb79644705' })), h("div", { key: '7fa5de37a169e6f76928c2088c46ee747427887e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '86b4d71b83671babb61dd12e842710d67350a09e', name: "post-list-item" }))));
-    }
-    static get is() { return "post-list"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-list.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "titleHidden": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`"
-                },
-                "attribute": "title-hidden",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "horizontal": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
-                },
-                "attribute": "horizontal",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "titleId": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-}

package/dist/collection/components/post-list-item/post-list-item.css

@@ -1 +0,0 @@
-:host{display:flex}