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

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

@@ -18,10 +18,22 @@ export class PostRating {
     }
     constructor() {
         this.hasChanged = false;
-        this.hoveredIndex = undefined;
+        /**
+         * Defines a hidden label for the component.
+         */
         this.label = 'Rating';
+        /**
+         * Defines the total amount of stars rendered in the component.
+         */
         this.stars = 5;
+        /**
+         * Defines the rating that the component should show.
+         */
         this.currentRating = 0;
+        /**
+         * Defines if the component is readonly or not.
+         * This usually should be used together with the `currentRating` property.
+         */
         this.readonly = false;
         this.keydownHandler = this.keydownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
@@ -103,6 +115,7 @@ export class PostRating {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -115,12 +128,14 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines a hidden label for the component."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Rating'"
             },
             "stars": {
                 "type": "number",
+                "attribute": "stars",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -133,12 +148,14 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the total amount of stars rendered in the component."
                 },
-                "attribute": "stars",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "5"
             },
             "currentRating": {
                 "type": "number",
+                "attribute": "current-rating",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -151,12 +168,14 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the rating that the component should show."
                 },
-                "attribute": "current-rating",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -169,7 +188,8 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines if the component is readonly or not.\nThis usually should be used together with the `currentRating` property."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -6,10 +6,6 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for the content of the tab header.
  */
 export class PostTabHeader {
-    constructor() {
-        this.tabId = undefined;
-        this.panel = undefined;
-    }
     validateFor() {
         checkRequiredAndType(this, 'panel', 'string');
     }
@@ -17,7 +13,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '829043a1f87aef4e965e3f830cc29eca5ed13864', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'c1d6a7d9120b494e898a502eac31341d7fc8d87b' })));
+        return (h(Host, { key: 'd5f6cd0ceb819b475ec49f8ea66e6b4b25f04f8e', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8a87fef31572674981dab80e56e6b20163b448ae' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }
@@ -35,6 +31,7 @@ export class PostTabHeader {
         return {
             "panel": {
                 "type": "string",
+                "attribute": "panel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -47,7 +44,8 @@ export class PostTabHeader {
                     "tags": [],
                     "text": "The name of the panel controlled by the tab header."
                 },
-                "attribute": "panel",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -6,10 +6,6 @@ import { checkRequiredAndType } from "../../utils/index";
  * @slot default - Slot for placing the content of the tab panel.
  */
 export class PostTabPanel {
-    constructor() {
-        this.panelId = undefined;
-        this.name = undefined;
-    }
     validateName() {
         checkRequiredAndType(this, 'name', 'string');
     }
@@ -19,7 +15,7 @@ export class PostTabPanel {
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '366d1b6074bf4212e7fc56500680ed12d8d83599', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '940f8dcf9e1302dfdd1c859e356799a2f2c7fe54' })));
+        return (h(Host, { key: '609dd2b8bf26e58e92a1dbc827e4479ac416d95b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '121538878e0298f1f16f6e20eeb15d5da8a5ba9c' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -37,6 +33,7 @@ export class PostTabPanel {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -49,7 +46,8 @@ export class PostTabPanel {
                     "tags": [],
                     "text": "The name of the panel, used to associate it with a tab header."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

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

@@ -11,7 +11,6 @@ import { componentOnReady } from "../../utils/index";
 export class PostTabs {
     constructor() {
         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);
@@ -141,7 +140,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '621652f2abeb8162e2d67261c57000a9d6e7b4ca', "data-version": version }, h("div", { key: '9cf2693b826588d3f099d30157886f70c34aa8b7', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4d4a0f242a30ec484c4557880b4c184b47d74612', class: "tabs", role: "tablist" }, h("slot", { key: '44df627213090710a6171fae2b1b8698e1f68fa5', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ec23dfe409569899a3b95cf3e2cd6fe2deae8c9b', class: "tab-content", part: "content" }, h("slot", { key: '16374ab8fae907d5d2c7229069dd7511f118c3ac', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'd7beaed26b8f79f7a8641bf5524236b8722a56d4', "data-version": version }, h("div", { key: '75449ea13ad30ca5bb402354cdf2eee51a6c8096', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4eeafd45c7bac47ff16ceffd2643adaabdd01234', class: "tabs", role: "tablist" }, h("slot", { key: 'e3299d68dc943c2b0bf2ff1b48d54de65f00eb94', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '7bb1bf2984063cba9c7170e92cecbf4d4a4a21d9', class: "tab-content", part: "content" }, h("slot", { key: '8abb196b98d41eaa08c08598efed698533f215ec', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -159,6 +158,7 @@ export class PostTabs {
         return {
             "activePanel": {
                 "type": "string",
+                "attribute": "active-panel",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLPostTabPanelElement['name']",
@@ -176,7 +176,8 @@ export class PostTabs {
                     "tags": [],
                     "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
                 },
-                "attribute": "active-panel",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -6,10 +6,6 @@ import { checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
  */
 export class PostTag {
     constructor() {
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = undefined;
-        this.icon = undefined;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -41,7 +37,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '42743d0a7f87680223eef33ff9295827f3c80d4c', "data-version": version }, h("div", { key: '392ad72b23f638d7fdefe7acb20f45c9dcf2d630', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '71b7dc696dd392dc9b195b363cd79a1fc0e0a708', class: "tag-text" }, h("slot", { key: '91610aff7550df9891fb617d2d9e5bcbcffbe256' })))));
+        return (h(Host, { key: '9e30e11663e54fb6bc389cfe7b060cace37c304e', "data-version": version }, h("div", { key: '09b0ea2d6df0631f00d78a6978d4aad4b429f39e', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'a041daf35564806f3bff974d04536972b1564a35', class: "tag-text" }, h("slot", { key: '97fb0e540d631062268b9080db3eb5e4aacf0242' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +55,7 @@ export class PostTag {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow'",
@@ -71,11 +68,13 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the color variant of the component."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'sm'",
@@ -88,11 +87,13 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the size of the component."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -100,12 +101,13 @@ export class PostTag {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs\">icon library</a>."
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -5,6 +5,10 @@ import { version } from "../../../../package";
  */
 export class PostTogglebutton {
     constructor() {
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
         this.handleClick = () => {
             this.toggled = !this.toggled;
         };
@@ -15,7 +19,6 @@ export class PostTogglebutton {
                 this.host.click();
             }
         };
-        this.toggled = false;
     }
     componentWillLoad() {
         // add event listener to not override listener that might be set on the host
@@ -41,6 +44,7 @@ export class PostTogglebutton {
         return {
             "toggled": {
                 "type": "boolean",
+                "attribute": "toggled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -53,7 +57,8 @@ export class PostTogglebutton {
                     "tags": [],
                     "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
                 },
-                "attribute": "toggled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -4,9 +4,19 @@ import { checkEmptyOrOneOf } from "../../utils/index";
 import { PLACEMENT_TYPES } from "../../types/index";
 export class PostTooltip {
     constructor() {
+        /**
+         * Defines the position of the tooltip relative to its trigger.
+         * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+         */
         this.placement = 'top';
+        /**
+         * Whether or not to display a little pointer arrow
+         */
         this.arrow = false;
-        this.animation = undefined;
+        /**
+         * Indicates the open state of the tooltip
+         */
         this.open = false;
     }
     validatePlacement() {
@@ -72,6 +82,7 @@ export class PostTooltip {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -80,7 +91,7 @@ export class PostTooltip {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.2/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
                         }
                     }
                 },
@@ -90,12 +101,14 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Defines the position of the tooltip relative to its trigger.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'top'"
             },
             "arrow": {
                 "type": "boolean",
+                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -108,12 +121,14 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Whether or not to display a little pointer arrow"
                 },
-                "attribute": "arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "animation": {
                 "type": "string",
+                "attribute": "animation",
                 "mutable": false,
                 "complexType": {
                     "original": "'pop-in'",
@@ -126,11 +141,13 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Choose a tooltip animation"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -143,7 +160,8 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Indicates the open state of the tooltip"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -13,6 +13,10 @@ if (IS_BROWSER) {
  */
 export class PostTooltipTrigger {
     constructor() {
+        /**
+         * Delay (in milliseconds) before the tooltip is shown.
+         */
+        this.delay = 0;
         /**
          * Reference to the element inside the host that will act as the trigger.
          */
@@ -21,8 +25,6 @@ export class PostTooltipTrigger {
          * Timeout ID for the delay.
          */
         this.delayTimeout = null;
-        this.for = undefined;
-        this.delay = 0;
         this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
@@ -147,14 +149,16 @@ export class PostTooltipTrigger {
         this.interestLostHandler();
     }
     interestHandler() {
-        if (this.delay > 0) {
-            this.delayTimeout = window.setTimeout(() => {
+        if (this.trigger) {
+            if (this.delay > 0) {
+                this.delayTimeout = window.setTimeout(() => {
+                    this.tooltip?.show(this.trigger);
+                    this.delayTimeout = null;
+                }, this.delay);
+            }
+            else {
                 this.tooltip?.show(this.trigger);
-                this.delayTimeout = null;
-            }, this.delay);
-        }
-        else {
-            this.tooltip?.show(this.trigger);
+            }
         }
     }
     interestLostHandler() {
@@ -165,7 +169,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '26ac11df6c2961e3dd51722f6981185db17c6efb', "data-version": version }, h("slot", { key: 'd08036f40d0a6708b8614232134b0d5b4eba4b78', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '1eec8bfef7a7e94db041be21820c79853ef66ba9', "data-version": version }, h("slot", { key: 'e48f94bf8a7be8559d1270a25573d6fbde894944', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -183,6 +187,7 @@ export class PostTooltipTrigger {
         return {
             "for": {
                 "type": "string",
+                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -195,11 +200,13 @@ export class PostTooltipTrigger {
                     "tags": [],
                     "text": "ID of the tooltip element that this trigger is linked to."
                 },
-                "attribute": "for",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "delay": {
                 "type": "number",
+                "attribute": "delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -212,7 +219,8 @@ export class PostTooltipTrigger {
                     "tags": [],
                     "text": "Delay (in milliseconds) before the tooltip is shown."
                 },
-                "attribute": "delay",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             }

package/dist/collection/index.js

@@ -1,37 +1 @@
-// Export every single component so it gets included in the dist output
-export { PostAccordion } from './components/post-accordion/post-accordion';
-export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
-export { PostAvatar } from './components/post-avatar/post-avatar';
-export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
-export { PostBanner } from './components/post-banner/post-banner';
-export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
-export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
-export { PostCardControl } from './components/post-card-control/post-card-control';
-export { PostClosebutton } from './components/post-closebutton/post-closebutton';
-export { PostCollapsible } from './components/post-collapsible/post-collapsible';
-export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
-export { PostFooter } from './components/post-footer/post-footer';
-export { PostHeader } from './components/post-header/post-header';
-export { PostIcon } from './components/post-icon/post-icon';
-export { PostLanguageOption } from './components/post-language-option/post-language-option';
-export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
-export { PostLinkarea } from './components/post-linkarea/post-linkarea';
-export { PostList } from './components/post-list/post-list';
-export { PostListItem } from './components/post-list-item/post-list-item';
-export { PostLogo } from './components/post-logo/post-logo';
-export { PostMainnavigation } from './components/post-mainnavigation/post-mainnavigation';
-export { PostMegadropdown } from './components/post-megadropdown/post-megadropdown';
-export { PostMegadropdownTrigger } from './components/post-megadropdown-trigger/post-megadropdown-trigger';
-export { PostMenu } from './components/post-menu/post-menu';
-export { PostMenuItem } from './components/post-menu-item/post-menu-item';
-export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger';
-export { PostPopover } from './components/post-popover/post-popover';
-export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
-export { PostRating } from './components/post-rating/post-rating';
-export { PostTabs } from './components/post-tabs/post-tabs';
-export { PostTabHeader } from './components/post-tab-header/post-tab-header';
-export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
-export { PostTag } from './components/post-tag/post-tag';
-export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
-export { PostTooltip } from './components/post-tooltip/post-tooltip';
-export { PostTooltipTrigger } from './components/post-tooltip-trigger/post-tooltip-trigger';
+export {};

package/dist/collection/utils/breakpoints.js

@@ -1,52 +1,45 @@
-import { IS_BROWSER } from "./environment";
-export class Breakpoint {
+import { throttle } from "throttle-debounce";
+import { IS_SERVER } from "./environment";
+class Breakpoint {
     constructor() {
-        this.current = {
-            key: '',
-            name: '',
-        };
-        if (IS_BROWSER && !this.breakpointMap) {
-            const keys = this.getStyles('--post-breakpoint-keys');
-            const names = this.getStyles('--post-breakpoint-names');
-            const widths = this.getStyles('--post-breakpoint-widths');
-            this.breakpointMap = widths
-                .map((width, i) => ({
-                minWidth: Number(width),
-                key: keys[i],
-                name: names[i],
-            }))
-                .reverse();
-            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
-        }
+        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
+            const previousBreakpoint = this.currentBreakpoint;
+            this.currentBreakpoint = this.breakpoints.find(breakpoint => {
+                return breakpoint.minWidth <= innerWidth;
+            });
+            if (!this.currentBreakpoint || !options.emitEvents)
+                return;
+            Object.keys(this.currentBreakpoint)
+                .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
+                .forEach((key) => this.dispatchEvent(key));
+        });
+        if (IS_SERVER || !!this.breakpoints)
+            return;
+        const keys = this.getValues('--post-grid-breakpoint-keys');
+        const devices = this.getValues('--post-grid-breakpoint-devices');
+        const widths = this.getValues('--post-grid-breakpoint-widths');
+        this.breakpoints = widths
+            .map((width, i) => ({
+            key: keys[i],
+            device: devices[i],
+            minWidth: Number(width),
+        }))
+            .sort((a, b) => b.minWidth - a.minWidth);
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
     }
-    getStyles(propertyName) {
-        const styles = getComputedStyle(document.documentElement);
-        return (styles
-            .getPropertyValue(propertyName)
-            ?.split(',')
-            .map(w => w.trim()) ?? []);
+    getValues(cssCustomProperty) {
+        const values = getComputedStyle(document.documentElement).getPropertyValue(cssCustomProperty);
+        return values ? values.split(',').map(v => v.trim()) : [];
     }
-    updateHandler(emitEvents = true) {
-        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
-        if (this.current.key !== calculated.key) {
-            this.current.key = calculated.key;
-            if (emitEvents)
-                this.dispatchEvent('key');
-        }
-        if (this.current.name !== calculated.name) {
-            this.current.name = calculated.name;
-            if (emitEvents)
-                this.dispatchEvent('name');
-        }
+    dispatchEvent(property) {
+        if (IS_SERVER)
+            return;
+        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
     }
-    dispatchEvent(type) {
-        if (IS_BROWSER) {
-            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
-        }
-    }
-    get(type) {
-        this.updateHandler(false);
-        return this.current[type];
+    get(property) {
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        return this.currentBreakpoint[property];
     }
 }
 export const breakpoint = new Breakpoint();