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

package/dist/cjs/post-popover-trigger.cjs.entry.js

@@ -1,14 +1,25 @@
 'use strict';
 
-var index$1 = require('./index-CCteMCnR.js');
-var _package = require('./package-CscM89A7.js');
-var focusable = require('./focusable-COT2uiEV.js');
-var index = require('./index-qCzRmwgB.js');
+var index = require('./index-CyeY2muT.js');
 require('./breakpoints-B0Olgvgc.js');
+var _package = require('./package-JSyXVavg.js');
+var focusable = require('./focusable-COT2uiEV.js');
+var type = require('./type-DXpEWY0w.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
+require('./create-validator-decorator-Bimhl6Ib.js');
 
 const postPopoverTriggerCss = () => `:host{cursor:pointer}`;
 
+var __decorate = (undefined && undefined.__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;
+};
 const PostPopoverTrigger = class {
     syncAriaExpanded(newValue) {
         this.ariaExpanded = newValue;
@@ -16,13 +27,6 @@ const PostPopoverTrigger = class {
             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() {
-        index.checkEmptyOrType(this, 'for', 'string');
-    }
     hasAriaControlsElements(el) {
         return 'ariaControlsElements' in el;
     }
@@ -80,7 +84,7 @@ const PostPopoverTrigger = class {
         }
     }
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
+        index.registerInstance(this, hostRef);
         /**
          * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
          */
@@ -103,7 +107,6 @@ const PostPopoverTrigger = class {
         };
     }
     componentDidLoad() {
-        this.validateFor();
         this.setupTrigger();
         this.popover?.addEventListener('postToggle', this.boundHandlePostToggle);
     }
@@ -113,18 +116,18 @@ const PostPopoverTrigger = class {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b439e93193ac8e1e7cdceb5b0dcd59de6659400c', "data-version": _package.version }, index$1.h("slot", { key: '3a4e192ec9656f2a4b4c69f8d9c8589d770f50b8', onSlotchange: () => this.setupTrigger() })));
+        return (index.h(index.Host, { key: '999ec824514eb6e340fd607ce03d82c76354e102', "data-version": _package.version }, index.h("slot", { key: '3429ab6e44441c2660c14c40436682b5ac49a1b6', onSlotchange: () => this.setupTrigger() })));
     }
-    get host() { return index$1.getElement(this); }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "popoverOpen": [{
                 "syncAriaExpanded": 0
-            }],
-        "for": [{
-                "validateFor": 0
             }]
     }; }
 };
+__decorate([
+    type.Type('string')
+], PostPopoverTrigger.prototype, "for", void 0);
 PostPopoverTrigger.style = postPopoverTriggerCss();
 
 exports.post_popover_trigger = PostPopoverTrigger;

package/dist/cjs/post-popover.cjs.entry.js

@@ -1,15 +1,28 @@
 'use strict';
 
-var index = require('./index-CCteMCnR.js');
+var index = require('./index-CyeY2muT.js');
 var placement = require('./placement-qEFR9hmI.js');
-var _package = require('./package-CscM89A7.js');
-var index$1 = require('./index-qCzRmwgB.js');
 require('./breakpoints-B0Olgvgc.js');
 var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
+var _package = require('./package-JSyXVavg.js');
+var oneOf = require('./one-of-BVQP1dR3.js');
+var required = require('./required-BsZuSJAl.js');
+var type = require('./type-DXpEWY0w.js');
 require('./get-root-B1FnQ50K.js');
+require('./create-validator-decorator-Bimhl6Ib.js');
 
 const postPopoverCss = () => `*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}`;
 
+var __decorate = (undefined && undefined.__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;
+};
 const PostPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -25,16 +38,6 @@ const PostPopover = class {
         // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
     }
-    validatePlacement() {
-        index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
-    }
-    validateTextClose() {
-        index$1.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
@@ -68,18 +71,17 @@ const PostPopover = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ebbd011aecf3ec0537ae6f27565ae89c4de23520', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'ed7fe6aa0355ca55e53aa4ae460ea1a40b3f7d82', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '10743a794d6aa31f0847f994800108ebab7c0f34', class: "popover-container" }, index.h("div", { key: 'dba753e2d2d45989b98ec91a79fe7425f9c9acb6', class: "popover-content" }, index.h("slot", { key: '2cce9dbfc1bdeda0bb64807dcf5d1cf95255b299' })), index.h("post-closebutton", { key: 'dd3303403d326eb2fe43f6d3f44b7c5684c8747e', onClick: () => this.hide() }, this.textClose)))));
+        return (index.h(index.Host, { key: 'f48f602235071a8621157c99aa86076e8268b5b4', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'f0be96900bd0e16f2ee8f7937cfa533f510dbd07', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '716b83cad71dbb09dde75c00aa4c8628d7903315', class: "popover-container" }, index.h("div", { key: '4a15c86977488ba68796ed16175c72ef9ea16a7b', class: "popover-content" }, index.h("slot", { key: 'afd56e2077ed319e1bfbdaabfc8e19395f4f3959' })), index.h("post-closebutton", { key: 'd62b6940c68872d8520e4a69c7411479b9698315', onClick: () => this.hide() }, this.textClose)))));
     }
     get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "placement": [{
-                "validatePlacement": 0
-            }],
-        "textClose": [{
-                "validateTextClose": 0
-            }]
-    }; }
 };
+__decorate([
+    oneOf.OneOf(placement.PLACEMENT_TYPES)
+], PostPopover.prototype, "placement", void 0);
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostPopover.prototype, "textClose", void 0);
 PostPopover.style = postPopoverCss();
 
 exports.post_popover = PostPopover;

package/dist/cjs/post-progressbar.cjs.entry.js

@@ -0,0 +1,147 @@
+'use strict';
+
+var index = require('./index-CyeY2muT.js');
+require('./breakpoints-B0Olgvgc.js');
+var createValidatorDecorator = require('./create-validator-decorator-Bimhl6Ib.js');
+var type = require('./type-DXpEWY0w.js');
+
+function resolveBound(component, bound) {
+    const resolvedValue = typeof bound === 'string' ? component[bound] : bound;
+    return typeof resolvedValue === 'number' ? resolvedValue : null;
+}
+function createBoundValidatorDecorator(bound, options, config) {
+    const decorator = createValidatorDecorator.createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = createValidatorDecorator.getValidationContext(component, property);
+            if (typeof value !== 'number') {
+                return true;
+            }
+            const resolvedBound = resolveBound(component, bound);
+            if (resolvedBound === null) {
+                if (typeof bound === 'string') {
+                    const boundVal = component[bound];
+                    const boundType = typeof boundVal;
+                    if (boundType !== 'number') {
+                        showError(`references property "${bound}" which must be a number but got ${boundType}`);
+                        return false;
+                    }
+                }
+                return true;
+            }
+            const include = options.include ?? config.includeDefault;
+            if (!config.compare(value, resolvedBound, include)) {
+                const displayBound = typeof bound === 'string' ? String(resolvedBound) : String(bound);
+                const expectation = config.formatExpectation(displayBound, include);
+                showError(`must be ${expectation}`);
+                return false;
+            }
+            return true;
+        },
+    });
+    return function (target, property) {
+        if (typeof bound === 'string') {
+            createValidatorDecorator.registerDependency(target, bound, property);
+        }
+        decorator(target, property);
+    };
+}
+/**
+ * Property decorator that validates the property value is greater than the specified minimum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param minimum - The minimum allowed value (exclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMin` flag (default: false for exclusive behavior).
+ */
+function GreaterThan(minimum, options = {}) {
+    return createBoundValidatorDecorator(minimum, { include: options.includeMin }, {
+        includeDefault: false,
+        compare: (value, bound, include) => (include ? value >= bound : value > bound),
+        formatExpectation: (display, include) => include ? `greater than or equal to "${display}"` : `greater than "${display}"`,
+    });
+}
+/**
+ * Property decorator that validates the property value is less than the specified maximum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param maximum - The maximum allowed value (inclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMax` flag (default: true for inclusive behavior).
+ */
+function LessThan(maximum, options = {}) {
+    return createBoundValidatorDecorator(maximum, { include: options.includeMax }, {
+        includeDefault: true,
+        compare: (value, bound, include) => (include ? value <= bound : value < bound),
+        formatExpectation: (display, include) => include ? `less than or equal to "${display}"` : `less than "${display}"`,
+    });
+}
+
+const postProgressbarCss = () => `: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}}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostProgressbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * 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 (index.h(index.Host, { key: '3d48615c3f08904f896eb5ebb7d8bfdff882a89b', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, index.h("div", { key: 'dd8c0d44ba1aeccb3102cb15556517df98b9cf63', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    type.Type('number')
+], PostProgressbar.prototype, "min", void 0);
+__decorate([
+    type.Type('number'),
+    GreaterThan('min')
+], PostProgressbar.prototype, "max", void 0);
+__decorate([
+    type.Type('number'),
+    GreaterThan('min'),
+    LessThan('max')
+], PostProgressbar.prototype, "value", void 0);
+PostProgressbar.style = postProgressbarCss();
+
+exports.post_progressbar = PostProgressbar;

package/dist/cjs/post-rating.cjs.entry.js

@@ -1,31 +1,29 @@
 'use strict';
 
-var index$1 = require('./index-CCteMCnR.js');
-var _package = require('./package-CscM89A7.js');
-var index = require('./index-qCzRmwgB.js');
+var index = require('./index-CyeY2muT.js');
 require('./breakpoints-B0Olgvgc.js');
+var _package = require('./package-JSyXVavg.js');
+var required = require('./required-BsZuSJAl.js');
+var type = require('./type-DXpEWY0w.js');
+require('./create-validator-decorator-Bimhl6Ib.js');
 
 const postRatingCss = () => `:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}`;
 
+var __decorate = (undefined && undefined.__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;
+};
 const PostRating = class {
-    validateLabel() {
-        index.checkRequiredAndType(this, 'label', 'string');
-    }
-    validateStars() {
-        index.checkRequiredAndType(this, 'stars', 'number');
-    }
-    validateCurrentRating() {
-        index.checkRequiredAndType(this, 'currentRating', 'number');
-    }
-    componentWillLoad() {
-        this.validateLabel();
-        this.validateStars();
-        this.validateCurrentRating();
-    }
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.postInput = index$1.createEvent(this, "postInput");
-        this.postChange = index$1.createEvent(this, "postChange");
+        index.registerInstance(this, hostRef);
+        this.postInput = index.createEvent(this, "postInput");
+        this.postChange = index.createEvent(this, "postChange");
         this.hasChanged = false;
         /**
          * Defines the total amount of stars rendered in the component.
@@ -96,27 +94,28 @@ const PostRating = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'bd452616dc47e25ae0f97eb77869e558eb0e199c', "data-version": _package.version }, index$1.h("div", { key: 'a2d59f6007b337d906af31f7ebc4cc57022b0e67', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (index$1.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: 'c037e21b074c9ebc433e325e49d17dbe06d8db43', "data-version": _package.version }, index.h("div", { key: 'f661eac91003680598c38d54dbc5fa3f482b7ad8', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
                 'hover': i === this.hoveredIndex,
                 'after-active': i > this.hoveredIndex && i < this.currentRating,
-            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, index$1.h("post-icon", { name: "favoritestar", class: "stroke" }), index$1.h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
+            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, index.h("post-icon", { name: "favoritestar", class: "stroke" }), index.h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
     }
-    get host() { return index$1.getElement(this); }
-    static get watchers() { return {
-        "label": [{
-                "validateLabel": 0
-            }],
-        "stars": [{
-                "validateStars": 0
-            }],
-        "currentRating": [{
-                "validateCurrentRating": 0
-            }]
-    }; }
+    get host() { return index.getElement(this); }
 };
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostRating.prototype, "label", void 0);
+__decorate([
+    required.Required(),
+    type.Type('number')
+], PostRating.prototype, "stars", void 0);
+__decorate([
+    required.Required(),
+    type.Type('number')
+], PostRating.prototype, "currentRating", void 0);
 PostRating.style = postRatingCss();
 
 exports.post_rating = PostRating;

package/dist/cjs/post-side-navigation-trigger.cjs.entry.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-CyeY2muT.js');
+var _package = require('./package-JSyXVavg.js');
+require('./breakpoints-B0Olgvgc.js');
+var eventFrom = require('./event-from-CwMw19f8.js');
+var getRoot = require('./get-root-B1FnQ50K.js');
+var required = require('./required-BsZuSJAl.js');
+var type = require('./type-DXpEWY0w.js');
+require('./create-validator-decorator-Bimhl6Ib.js');
+
+const postSideNavigationTriggerCss = () => `:host{display:inline-block;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}@media screen and (min-width: 1024px){:host{display:none}}:host(:focus-within){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-within):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){:host(:focus-within):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host(:focus-within):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){:host(:focus-within):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-within){outline-color:Highlight !important}}::slotted(button){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);outline:none}::slotted(button):not(:disabled):hover{text-decoration:none}::slotted(button):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}::slotted(button){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}::slotted(button):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){::slotted(button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){::slotted(button):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){::slotted(button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){::slotted(button):is(a){color:LinkText;border:unset}::slotted(button):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}::slotted(button):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}::slotted(button):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}::slotted(button):hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}::slotted(button):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}::slotted(button):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){::slotted(button){padding:.625rem}::slotted(button)>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}::slotted(button)>post-icon{font-size:1.5rem}}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostSideNavigationTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.toggleSideNavigation = this.toggleSideNavigation.bind(this);
+        this.handlePostToggle = this.handlePostToggle.bind(this);
+    }
+    connectedCallback() {
+        this.root = getRoot.getRoot(this.host);
+        this.root.addEventListener('postToggle', this.handlePostToggle);
+        this.observer.observe(this.host, { childList: true, subtree: true });
+    }
+    componentDidLoad() {
+        this.setTrigger();
+        if (!this.trigger)
+            console.warn('The post-side-navigation-trigger must contain a button.');
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.root.removeEventListener('postToggle', this.handlePostToggle);
+        this.trigger?.removeEventListener('click', this.toggleSideNavigation);
+    }
+    /**
+     * Retrieve the post-side-navigation controlled by the trigger.
+     */
+    get sideNavigation() {
+        const ref = this.root.getElementById(this.for);
+        if (ref && ref.localName === 'post-side-navigation') {
+            return ref;
+        }
+        return null;
+    }
+    /**
+     * Find the button, attach the click listener and the initial ARIA attributes.
+     */
+    setTrigger() {
+        const trigger = this.host.querySelector('button');
+        if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
+            return;
+        if (this.trigger) {
+            this.trigger.removeEventListener('click', this.toggleSideNavigation);
+        }
+        this.trigger = trigger;
+        this.trigger.addEventListener('click', this.toggleSideNavigation);
+        this.updateAriaAttributes();
+    }
+    updateAriaAttributes() {
+        if (!this.trigger)
+            return;
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        this.trigger.setAttribute('aria-expanded', 'false');
+    }
+    /**
+     * Keep the trigger's `aria-expanded` in sync with the navigation state.
+     */
+    handlePostToggle(e) {
+        this.trigger?.setAttribute('aria-expanded', `${e.detail}`);
+    }
+    /**
+     * Manually update the trigger's ARIA attributes.
+     */
+    async update() {
+        this.updateAriaAttributes();
+    }
+    async toggleSideNavigation() {
+        await this.sideNavigation?.toggle();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f6b6a9681e0894724cdf523cbd8104f3c3c1924d', "data-version": _package.version }, index.h("slot", { key: 'cbd61018657553b1aed33bddb3667145548fc653' })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostSideNavigationTrigger.prototype, "for", void 0);
+__decorate([
+    eventFrom.EventFrom('post-side-navigation', { ignoreNestedComponents: false })
+], PostSideNavigationTrigger.prototype, "handlePostToggle", null);
+PostSideNavigationTrigger.style = postSideNavigationTriggerCss();
+
+exports.post_side_navigation_trigger = PostSideNavigationTrigger;

package/dist/cjs/post-side-navigation.cjs.entry.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var index = require('./index-CyeY2muT.js');
+var _package = require('./package-JSyXVavg.js');
+var breakpoints = require('./breakpoints-B0Olgvgc.js');
+var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
+var required = require('./required-BsZuSJAl.js');
+var type = require('./type-DXpEWY0w.js');
+require('./get-root-B1FnQ50K.js');
+require('./create-validator-decorator-Bimhl6Ib.js');
+
+const postSideNavigationCss = () => `:host{display:flex;background-color:#f0efed}:host dialog{overflow-y:auto;bottom:auto;right:auto;border:none;padding-inline:0;padding-block:40px;height:100vh;background-color:#f0efed}@media screen and (min-width: 1024px){:host{max-width:35ch;width:35ch}}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostSideNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postToggle = index.createEvent(this, "postToggle");
+        this.device = breakpoints.breakpoint.get('device');
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+        };
+        /**
+         * Collapses the active disclosure on Escape; lets the native dialog handle it otherwise.
+         */
+        this.handleKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            const collapsible = this.collapsible;
+            if (!collapsible || collapsible.collapsed)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            collapsible.toggle(false);
+            this.collapsibleTrigger?.querySelector('button')?.focus();
+        };
+    }
+    connectedCallback() {
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
+        this.host.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+    }
+    get dialog() {
+        return this.host.shadowRoot?.querySelector('dialog');
+    }
+    get collapsibleTrigger() {
+        return document.activeElement?.closest('post-collapsible-trigger') ?? null;
+    }
+    get collapsible() {
+        return this.collapsibleTrigger?.querySelector(':scope > post-collapsible') ?? null;
+    }
+    /**
+     * Toggles the navigation programmatically.
+     * No-op on desktop.
+     */
+    async toggle() {
+        if (this.device === 'desktop')
+            return;
+        return this.dialog?.open ? this.hide() : this.show();
+    }
+    /**
+     * Opens the navigation programmatically.
+     * No-op on desktop.
+     */
+    async show() {
+        if (this.device === 'desktop')
+            return;
+        this.dialog.showModal();
+        this.postToggle.emit(true);
+        this.focusNav();
+    }
+    /**
+     * Closes the navigation programmatically.
+     * No-op on desktop.
+     */
+    async hide() {
+        if (this.device === 'desktop')
+            return;
+        this.dialog.close();
+    }
+    /**
+     * Move focus into the navigation when the dialog opens.
+     */
+    focusNav() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nav = slot?.assignedElements({ flatten: true })[0];
+        if (!nav)
+            return;
+        const [firstFocusable] = getFocusableChildren.getFocusableChildren(nav);
+        firstFocusable?.focus();
+    }
+    /**
+     * Render inline navigation (desktop).
+     */
+    renderNav() {
+        return index.h("slot", null);
+    }
+    /**
+     * Render modal navigation (mobile/tablet).
+     */
+    renderDialog() {
+        return (index.h("dialog", { onClose: () => {
+                this.postToggle.emit(false);
+            } }, index.h("slot", null), index.h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
+    }
+    render() {
+        return (index.h(index.Host, { key: '63da088aa63d8a0cf6565f3bf01ab287a599ae27', "data-version": _package.version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostSideNavigation.prototype, "textClose", void 0);
+PostSideNavigation.style = postSideNavigationCss();
+
+exports.post_side_navigation = PostSideNavigation;