@swisspost/design-system-components 10.0.0-next.71 → 10.0.0-next.75

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

@@ -1,6 +1,16 @@
-import { Host, h, } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { debounce, nanoid, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrType, checkRequiredAndType, debounce, nanoid } from "../../utils/index";
+import { h, Host, } from "@stencil/core";
 const ELLIPSIS = '...';
 const MEASUREMENT_DEBOUNCE_MS = 50;
 const RESIZE_DEBOUNCE_MS = 150;
@@ -11,54 +21,31 @@ const GAP_THRESHOLD_FOR_PAGE = 2; // Show page number instead of ellipsis when g
 const MIDDLE_RANGE_START = 2; // Middle range starts from page 2 (page 1 is always shown separately)
 export class PostPagination {
     constructor() {
+        this.maxVisiblePages = 3;
         this.items = [];
+        /**
+         * The current active page number.
+         *
+         * **If not specified, defaults to the first page.**
+         */
+        this.page = 1;
         this.lastWindowWidth = window.innerWidth;
         this.loaded = false;
         this.debouncedResize = debounce(this.handleResizeInternal.bind(this), RESIZE_DEBOUNCE_MS);
         this.measurementTimeoutId = null;
     }
-    validatePage() {
-        this.validateProp('page', 'number', false);
-    }
-    validatePageSize() {
-        this.validateProp('pageSize', 'number', true);
-    }
-    validateCollectionSize() {
-        this.validateProp('collectionSize', 'number', true);
-    }
-    validateLabel() {
-        this.validateProp('label', 'string', true);
-    }
-    validateTextPrevious() {
-        this.validateProp('textPrevious', 'string', true);
-    }
-    validateTextNext() {
-        this.validateProp('textNext', 'string', true);
-    }
-    validateTextPage() {
-        this.validateProp('textPage', 'string', true);
-    }
-    validateTextFirst() {
-        this.validateProp('textFirst', 'string', true);
-    }
-    validateTextLast() {
-        this.validateProp('textLast', 'string', true);
-    }
     handlePropsChange() {
         this.updatePagesWithValidation();
     }
     componentWillLoad() {
         this.paginationId = `pagination-${this.host.id || nanoid(6)}`;
-        if (this.page == null) {
-            this.page = 1;
-        }
+        this.updatePagesWithValidation();
     }
     connectedCallback() {
         window.addEventListener('resize', this.debouncedResize);
     }
     componentDidLoad() {
         this.loaded = true;
-        this.runAllValidations();
         this.scheduleMeasurement();
     }
     disconnectedCallback() {
@@ -69,31 +56,6 @@ export class PostPagination {
             this.measurementTimeoutId = null;
         }
     }
-    /**
-     * Validate a prop with the appropriate check function
-     */
-    validateProp(propName, type, required = true) {
-        if (required) {
-            checkRequiredAndType(this, propName, type);
-        }
-        else {
-            checkEmptyOrType(this, propName, type);
-        }
-    }
-    /**
-     * Run all prop validations
-     */
-    runAllValidations() {
-        this.validateProp('page', 'number', false);
-        this.validateProp('pageSize', 'number', true);
-        this.validateProp('collectionSize', 'number', true);
-        this.validateProp('label', 'string', true);
-        this.validateProp('textPrevious', 'string', true);
-        this.validateProp('textNext', 'string', true);
-        this.validateProp('textPage', 'string', true);
-        this.validateProp('textFirst', 'string', true);
-        this.validateProp('textLast', 'string', true);
-    }
     /**
      * Schedule measurement attempt with timeout
      */
@@ -434,7 +396,7 @@ export class PostPagination {
      */
     generatePages(totalPages) {
         const maxVisible = this.maxVisiblePages;
-        const currentPage = this.page || 1;
+        const currentPage = this.page;
         if (totalPages <= maxVisible) {
             this.items = this.buildAllPages(totalPages);
             return;
@@ -585,7 +547,8 @@ export class PostPagination {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "page"
+                "attribute": "page",
+                "defaultValue": "1"
             },
             "pageSize": {
                 "type": "number",
@@ -769,33 +732,6 @@ export class PostPagination {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "page",
-                "methodName": "validatePage"
-            }, {
-                "propName": "pageSize",
-                "methodName": "validatePageSize"
-            }, {
-                "propName": "collectionSize",
-                "methodName": "validateCollectionSize"
-            }, {
-                "propName": "label",
-                "methodName": "validateLabel"
-            }, {
-                "propName": "textPrevious",
-                "methodName": "validateTextPrevious"
-            }, {
-                "propName": "textNext",
-                "methodName": "validateTextNext"
-            }, {
-                "propName": "textPage",
-                "methodName": "validateTextPage"
-            }, {
-                "propName": "textFirst",
-                "methodName": "validateTextFirst"
-            }, {
-                "propName": "textLast",
-                "methodName": "validateTextLast"
-            }, {
                 "propName": "page",
                 "methodName": "handlePropsChange"
             }, {
@@ -807,3 +743,38 @@ export class PostPagination {
             }];
     }
 }
+__decorate([
+    Type('number')
+], PostPagination.prototype, "page", void 0);
+__decorate([
+    Required(),
+    Type('number')
+], PostPagination.prototype, "pageSize", void 0);
+__decorate([
+    Required(),
+    Type('number')
+], PostPagination.prototype, "collectionSize", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "label", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "textPrevious", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "textNext", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "textPage", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "textFirst", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPagination.prototype, "textLast", void 0);

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

@@ -1,7 +1,17 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { PLACEMENT_TYPES } from "../../types/index";
+import { getDeepFocusableChildren, OneOf, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, checkEmptyOrOneOf, getDeepFocusableChildren } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for placing content inside the popover.
  */
@@ -19,16 +29,6 @@ export class PostPopover {
         // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
     }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateTextClose() {
-        checkRequiredAndType(this, 'textClose', 'string');
-    }
-    componentDidLoad() {
-        this.validatePlacement();
-        this.validateTextClose();
-    }
     /**
      * Programmatically display the popover
      * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
@@ -62,7 +62,7 @@ export class PostPopover {
         }
     }
     render() {
-        return (h(Host, { key: 'ebbd011aecf3ec0537ae6f27565ae89c4de23520', "data-version": version }, h("post-popovercontainer", { key: 'ed7fe6aa0355ca55e53aa4ae460ea1a40b3f7d82', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '10743a794d6aa31f0847f994800108ebab7c0f34', class: "popover-container" }, h("div", { key: 'dba753e2d2d45989b98ec91a79fe7425f9c9acb6', class: "popover-content" }, h("slot", { key: '2cce9dbfc1bdeda0bb64807dcf5d1cf95255b299' })), h("post-closebutton", { key: 'dd3303403d326eb2fe43f6d3f44b7c5684c8747e', onClick: () => this.hide() }, this.textClose)))));
+        return (h(Host, { key: 'f48f602235071a8621157c99aa86076e8268b5b4', "data-version": version }, h("post-popovercontainer", { key: 'f0be96900bd0e16f2ee8f7937cfa533f510dbd07', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '716b83cad71dbb09dde75c00aa4c8628d7903315', class: "popover-container" }, h("div", { key: '4a15c86977488ba68796ed16175c72ef9ea16a7b', class: "popover-content" }, h("slot", { key: 'afd56e2077ed319e1bfbdaabfc8e19395f4f3959' })), h("post-closebutton", { key: 'd62b6940c68872d8520e4a69c7411479b9698315', onClick: () => this.hide() }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -231,13 +231,11 @@ export class PostPopover {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }, {
-                "propName": "textClose",
-                "methodName": "validateTextClose"
-            }];
-    }
 }
+__decorate([
+    OneOf(PLACEMENT_TYPES)
+], PostPopover.prototype, "placement", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostPopover.prototype, "textClose", void 0);

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

@@ -1,7 +1,17 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Type } from "../../utils/index";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 import isFocusable from "ally.js/is/focusable";
-import { checkEmptyOrType } from "../../utils/index";
 export class PostPopoverTrigger {
     syncAriaExpanded(newValue) {
         this.ariaExpanded = newValue;
@@ -9,13 +19,6 @@ export class PostPopoverTrigger {
             this.trigger.setAttribute('aria-expanded', String(newValue));
         }
     }
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
-     */
-    validateFor() {
-        checkEmptyOrType(this, 'for', 'string');
-    }
     hasAriaControlsElements(el) {
         return 'ariaControlsElements' in el;
     }
@@ -95,7 +98,6 @@ export class PostPopoverTrigger {
         };
     }
     componentDidLoad() {
-        this.validateFor();
         this.setupTrigger();
         this.popover?.addEventListener('postToggle', this.boundHandlePostToggle);
     }
@@ -105,7 +107,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: 'b439e93193ac8e1e7cdceb5b0dcd59de6659400c', "data-version": version }, h("slot", { key: '3a4e192ec9656f2a4b4c69f8d9c8589d770f50b8', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '999ec824514eb6e340fd607ce03d82c76354e102', "data-version": version }, h("slot", { key: '3429ab6e44441c2660c14c40436682b5ac49a1b6', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -153,9 +155,9 @@ export class PostPopoverTrigger {
         return [{
                 "propName": "popoverOpen",
                 "methodName": "syncAriaExpanded"
-            }, {
-                "propName": "for",
-                "methodName": "validateFor"
             }];
     }
 }
+__decorate([
+    Type('string')
+], PostPopoverTrigger.prototype, "for", void 0);

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

@@ -1 +1 @@
-@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host .popover-scroll{max-height:var(--post-popovercontainer-available-height, none);overflow-y:auto}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}
+@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}

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

@@ -1,11 +1,21 @@
-import { Host, h, Build, } from "@stencil/core";
-import { checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Build, h, Host, } from "@stencil/core";
+import { OneOf, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 import { PLACEMENT_TYPES } from "../../types/index";
+import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
-import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
 import { popIn } from "../../animations/pop-in";
+import { apply, isSupported } from "@oddbird/popover-polyfill/fn";
 const ANIMATIONS = {
     'pop-in': popIn,
 };
@@ -37,15 +47,6 @@ export class PostPopovercontainer {
         this.currentAnimation = null;
         this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
     }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateEdgeGap() {
-        checkEmptyOrType(this, 'edgeGap', 'number');
-    }
-    validateSafeSpace() {
-        checkEmptyOrOneOf(this, 'safeSpace', ['triangle', 'trapezoid']);
-    }
     /**
      * Updates cursor position for safe space feature when popover is open.
      * Sets CSS custom properties for dynamic styling of safe area.
@@ -61,9 +62,6 @@ export class PostPopovercontainer {
         }
     }
     componentDidLoad() {
-        this.validatePlacement();
-        this.validateEdgeGap();
-        this.validateSafeSpace();
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
@@ -269,9 +267,10 @@ export class PostPopovercontainer {
             // flip should come before shift. For non-aligned, shift before flip.
             ...(isAligned ? [flipMiddleware, shiftMiddleware] : [shiftMiddleware, flipMiddleware]),
             size({
-                apply({ availableWidth, availableHeight, elements }) {
-                    elements.floating.style.maxWidth = `${availableWidth - gap * 2}px`;
-                    elements.floating.style.setProperty('--post-popovercontainer-available-height', `${availableHeight - gap * 2}px`);
+                apply({ availableWidth, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth - gap * 2}px`,
+                    });
                 },
             }),
         ];
@@ -345,9 +344,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: 'f3d2037a35648aef9031ecb96db8f1755cb06fc9', "data-version": version, popover: "auto" }, h("div", { key: '19a5300eb1388eb51764eae39fc0911864336282', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: 'e7c67a359968faa9001c4be657db7d6930fe6075', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (h(Host, { key: '4fc0f306903c914a632d6ee72d9aaa69f9b60140', "data-version": version, popover: "auto" }, h("div", { key: 'd411b6f9dcb622cc1dfc829c19f69c73e9ad57d6', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: 'bf3e926a44c33b1aa7306be289f695e4b0007370', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("span", { key: 'b7477bc2e03c196c5983f6b933cedc20b2ed59f8', part: "post-popovercontainer-border-mask" }), h("div", { key: '7c1c50cbd766f6f901e9f3579c6e609da4cf3e37', class: "popover-scroll" }, h("slot", { key: '56c646c3bec1437e394ce0b76cea0f6bc4c6637f' })))));
+            } })), h("span", { key: '1c8256005b2fda27460c961ec6eea3f76075af20', part: "post-popovercontainer-border-mask" }), h("slot", { key: '0463879c1a444bcef8d6e6e48fe036ab764cef73' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }
@@ -638,18 +637,6 @@ export class PostPopovercontainer {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }, {
-                "propName": "edgeGap",
-                "methodName": "validateEdgeGap"
-            }, {
-                "propName": "safeSpace",
-                "methodName": "validateSafeSpace"
-            }];
-    }
 }
 PostPopovercontainer.STATIC_SIDES = {
     top: 'bottom',
@@ -671,3 +658,12 @@ PostPopovercontainer.PROPERTIES_TO_CLEAR = [
     '--post-safe-space-trigger-y-start',
     '--post-safe-space-trigger-y-end',
 ];
+__decorate([
+    OneOf(PLACEMENT_TYPES)
+], PostPopovercontainer.prototype, "placement", void 0);
+__decorate([
+    Type('number')
+], PostPopovercontainer.prototype, "edgeGap", void 0);
+__decorate([
+    OneOf(['triangle', 'trapezoid'])
+], PostPopovercontainer.prototype, "safeSpace", void 0);

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

@@ -0,0 +1 @@
+:host{display:block;position:relative;height:var(--post-device-sizing-interactive-progressbar-indicator);border-radius:var(--post-device-border-radius-round);box-shadow:0px 0px 0px var(--post-device-border-width-alternative1) var(--post-scheme-color-interactive-primary-enabled-stroke) inset;overflow:hidden}.progress-value{position:absolute;inset-block:0;inset-inline-start:0;width:var(--post-progressbar-value, 0);border-radius:var(--post-device-border-radius-round);background-color:var(--post-progressbar-status-color, var(--post-scheme-color-interactive-primary-enabled-bg2));transition:width 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border:1px solid Highlight}.progress-value{background-color:Highlight}}

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

@@ -0,0 +1,136 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { GreaterThan, LessThan, Type } from "../../utils/index";
+import { h, Host } from "@stencil/core";
+export class PostProgressbar {
+    constructor() {
+        /**
+         * The minimum value of the progress bar.
+         * Must be a valid floating point number less than max.
+         */
+        this.min = 0;
+        /**
+         * Describes how much work the task indicated by the progress element requires.
+         * Must be a valid floating point number greater than min.
+         */
+        this.max = 100;
+    }
+    getEffectiveMin() {
+        return Number.isFinite(this.min) ? this.min : 0;
+    }
+    getEffectiveMax() {
+        return Number.isFinite(this.max) && this.max > this.getEffectiveMin() ? this.max : 100;
+    }
+    getEffectiveValue(min, max) {
+        if (this.value === undefined ||
+            !Number.isFinite(this.value) ||
+            this.value < min ||
+            this.value > max) {
+            return min;
+        }
+        return this.value;
+    }
+    render() {
+        const min = this.getEffectiveMin();
+        const max = this.getEffectiveMax();
+        const value = this.getEffectiveValue(min, max);
+        const percentage = ((value - min) / (max - min)) * 100;
+        return (h(Host, { key: '3d48615c3f08904f896eb5ebb7d8bfdff882a89b', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'dd8c0d44ba1aeccb3102cb15556517df98b9cf63', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+    }
+    static get is() { return "post-progressbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-progressbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-progressbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value of the progress bar.\nMust be a valid floating point number less than max."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Describes how much work the task indicated by the progress element requires.\nMust be a valid floating point number greater than min."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies how much of the task has been completed.\nMust be a valid floating point number between min and max.\nIf there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+__decorate([
+    Type('number')
+], PostProgressbar.prototype, "min", void 0);
+__decorate([
+    Type('number'),
+    GreaterThan('min')
+], PostProgressbar.prototype, "max", void 0);
+__decorate([
+    Type('number'),
+    GreaterThan('min'),
+    LessThan('max')
+], PostProgressbar.prototype, "value", void 0);