@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/divider/divider.host.css

@@ -1 +1 @@
-:host{--_divider-position: var(--divider-position, var(--mod-divider-position, static));--_divider-top: var(--divider-top, var(--mod-divider-top));--_divider-right: var(--divider-right, var(--mod-divider-right));--_divider-bottom: var(--divider-bottom, var(--mod-divider-bottom));--_divider-left: var(--divider-left, var(--mod-divider-left));position:var(--_divider-position);top:var(--_divider-top);right:var(--_divider-right);bottom:var(--_divider-bottom);left:var(--_divider-left);--_divider-m: var(--divider-m, var(--mod-divider-m, 0));--_divider-my: var(--divider-my, var(--mod-divider-my));--_divider-mx: var(--divider-mx, var(--mod-divider-mx));--_divider-ml: var(--divider-ml, var(--mod-divider-ml));--_divider-mr: var(--divider-mr, var(--mod-divider-mr));--_divider-mt: var(--divider-mt, var(--mod-divider-mt));--_divider-mb: var(--divider-mb, var(--mod-divider-mb));margin:var(--_divider-m);margin-inline:var(--_divider-mx);margin-block:var(--_divider-my);margin-left:var(--_divider-ml);margin-right:var(--_divider-mr);margin-top:var(--_divider-mt);margin-bottom:var(--_divider-mb);--_divider-color: var(--divider-color, var(--mod-divider-color, var(--ds-divider-color-base)));--_divider-width: var(--divider-width, var(--mod-divider-width, var(--ds-divider-width)));--_divider-radius: var(--divider-radius, var(--mod-divider-radius, var(--ds-divider-radius)));--_divider-space: var(--divider-space, var(--mod-divider-space, 0))}#divider{display:block;padding:0;margin:0;border:none;border-radius:var(--_divider-radius);height:var(--_divider-width);background-color:var(--_divider-color)}#divider:not(.is-vertical),#divider.is-horizontal{flex:1 0 100%;width:100%;min-height:var(--_divider-width);height:var(--_divider-width);margin-top:var(--_divider-space);margin-bottom:var(--_divider-space)}#divider.is-vertical{height:auto;flex-shrink:0;align-self:stretch;width:var(--_divider-width);margin-left:var(--_divider-space);margin-right:var(--_divider-space)}#divider.is-primary{--mod-divider-color: var(--ds-divider-color-primary)}#divider.is-primary-light{--mod-divider-color: var(--ds-divider-color-primary-light)}#divider.is-primary-dark{--mod-divider-color: var(--ds-divider-color-primary-dark)}#divider.is-grey-light{--mod-divider-color: var(--ds-divider-color-grey-light)}#divider.is-grey{--mod-divider-color: var(--ds-divider-color-grey)}#divider.is-grey-dark{--mod-divider-color: var(--ds-divider-color-grey-dark)}#divider.is-warning{--mod-divider-color: var(--ds-divider-color-warning)}#divider.is-success{--mod-divider-color: var(--ds-divider-color-success)}#divider.is-danger{--mod-divider-color: var(--ds-divider-color-danger)}#divider.is-danger-dark{--mod-divider-color: var(--ds-divider-color-danger-dark)}#divider.is-danger-darker{--mod-divider-color: var(--ds-divider-color-danger-darker)}#divider.is-white{--mod-divider-color: var(--ds-divider-color-white)}#divider.is-light-blue{--mod-divider-color: var(--ds-divider-color-light-blue)}#divider.has-space-none{--mod-divider-space: var(--ds-alias-space-none-device)}#divider.has-space-2xs{--mod-divider-space: var(--ds-alias-space-2xs-device)}#divider.has-space-xs{--mod-divider-space: var(--ds-alias-space-xs-device)}#divider.has-space-sm{--mod-divider-space: var(--ds-alias-space-sm-device)}#divider.has-space-base{--mod-divider-space: var(--ds-alias-space-base-device)}#divider.has-space-md{--mod-divider-space: var(--ds-alias-space-md-device)}#divider.has-space-lg{--mod-divider-space: var(--ds-alias-space-lg-device)}#divider.has-space-xl{--mod-divider-space: var(--ds-alias-space-xl-device)}#divider.has-space-2xl{--mod-divider-space: var(--ds-alias-space-2xl-device)}#divider.has-space-3xl{--mod-divider-space: var(--ds-alias-space-3xl-device)}#divider.is-dashed:not(.is-vertical){background:repeating-linear-gradient(90deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}#divider.is-dashed.is-vertical{background:repeating-linear-gradient(180deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}:host{display:block}
+:host{--_divider-position: var(--divider-position, var(--mod-divider-position, static));--_divider-top: var(--divider-top, var(--mod-divider-top));--_divider-right: var(--divider-right, var(--mod-divider-right));--_divider-bottom: var(--divider-bottom, var(--mod-divider-bottom));--_divider-left: var(--divider-left, var(--mod-divider-left));position:var(--_divider-position);top:var(--_divider-top);right:var(--_divider-right);bottom:var(--_divider-bottom);left:var(--_divider-left);--_divider-m: var(--divider-m, var(--mod-divider-m, 0));--_divider-my: var(--divider-my, var(--mod-divider-my));--_divider-mx: var(--divider-mx, var(--mod-divider-mx));--_divider-ml: var(--divider-ml, var(--mod-divider-ml));--_divider-mr: var(--divider-mr, var(--mod-divider-mr));--_divider-mt: var(--divider-mt, var(--mod-divider-mt));--_divider-mb: var(--divider-mb, var(--mod-divider-mb));margin:var(--_divider-m);margin-inline:var(--_divider-mx);margin-block:var(--_divider-my);margin-left:var(--_divider-ml);margin-right:var(--_divider-mr);margin-top:var(--_divider-mt);margin-bottom:var(--_divider-mb);--_divider-color: var(--divider-color, var(--mod-divider-color, var(--ds-divider-color-base)));--_divider-width: var(--divider-width, var(--mod-divider-width, var(--ds-divider-width)));--_divider-radius: var(--divider-radius, var(--mod-divider-radius, var(--ds-divider-radius)));--_divider-space: var(--divider-space, var(--mod-divider-space, 0))}:host{display:block;padding:0;margin:0;border:none;border-radius:var(--_divider-radius);height:var(--_divider-width);background-color:var(--_divider-color)}:host(:not(.is-vertical)),:host(.is-horizontal){flex:1 0 100%;width:100%;min-height:var(--_divider-width);height:var(--_divider-width);margin-top:var(--_divider-space);margin-bottom:var(--_divider-space)}:host(.is-vertical){height:auto;flex-shrink:0;align-self:stretch;width:var(--_divider-width);margin-left:var(--_divider-space);margin-right:var(--_divider-space)}:host(.is-primary){--mod-divider-color: var(--ds-divider-color-primary)}:host(.is-primary-light){--mod-divider-color: var(--ds-divider-color-primary-light)}:host(.is-primary-dark){--mod-divider-color: var(--ds-divider-color-primary-dark)}:host(.is-grey-light){--mod-divider-color: var(--ds-divider-color-grey-light)}:host(.is-grey){--mod-divider-color: var(--ds-divider-color-grey)}:host(.is-grey-dark){--mod-divider-color: var(--ds-divider-color-grey-dark)}:host(.is-warning){--mod-divider-color: var(--ds-divider-color-warning)}:host(.is-success){--mod-divider-color: var(--ds-divider-color-success)}:host(.is-danger){--mod-divider-color: var(--ds-divider-color-danger)}:host(.is-danger-dark){--mod-divider-color: var(--ds-divider-color-danger-dark)}:host(.is-danger-darker){--mod-divider-color: var(--ds-divider-color-danger-darker)}:host(.is-white){--mod-divider-color: var(--ds-divider-color-white)}:host(.is-light-blue){--mod-divider-color: var(--ds-divider-color-light-blue)}:host(.has-space-none){--mod-divider-space: var(--ds-alias-space-none-device)}:host(.has-space-2xs){--mod-divider-space: var(--ds-alias-space-2xs-device)}:host(.has-space-xs){--mod-divider-space: var(--ds-alias-space-xs-device)}:host(.has-space-sm){--mod-divider-space: var(--ds-alias-space-sm-device)}:host(.has-space-base){--mod-divider-space: var(--ds-alias-space-base-device)}:host(.has-space-md){--mod-divider-space: var(--ds-alias-space-md-device)}:host(.has-space-lg){--mod-divider-space: var(--ds-alias-space-lg-device)}:host(.has-space-xl){--mod-divider-space: var(--ds-alias-space-xl-device)}:host(.has-space-2xl){--mod-divider-space: var(--ds-alias-space-2xl-device)}:host(.has-space-3xl){--mod-divider-space: var(--ds-alias-space-3xl-device)}:host.is-dashed:not(.is-vertical){background:repeating-linear-gradient(90deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}:host.is-dashed.is-vertical{background:repeating-linear-gradient(180deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px)}:host{display:block}

package/dist/collection/components/divider/divider.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, normalizeDeprecatedTShirtSize, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, normalizeDeprecatedTShirtSize, hasValue, OneOf, Type } from "../../utils/index";
 import { DIVIDER_LAYOUTS, DIVIDER_SPACES, DIVIDER_COLORS, } from "./divider.interfaces";
 /**
  * Divider renders a visual separator line for grouping or distinguishing content sections.
@@ -37,23 +37,16 @@ export class Divider {
     createLogger(log) {
         this.log = log;
     }
-    spaceChanged(newValue) {
-        this.space = normalizeDeprecatedTShirtSize(newValue) || 'none';
-    }
-    connectedCallback() {
-        setupValidation(this);
-        this.space = normalizeDeprecatedTShirtSize(this.space) || 'none';
-    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '009701e26c4848801eea3d8435398eedf8d95e51', role: "separator", class: {
-                divider: true,
-                [`is-${this.layout}`]: !!this.layout,
-                [`is-${this.color}`]: !!this.color,
-                [`has-space-${this.space}`]: !!this.space,
+        const space = normalizeDeprecatedTShirtSize(this.space) || '';
+        return (h(Host, { key: 'b8c46c8b8746484960d92be8e9005b5f5f2a9792', role: "separator", class: {
+                [`is-${this.layout}`]: hasValue(this.layout),
+                [`is-${this.color}`]: hasValue(this.color),
+                [`has-space-${space}`]: hasValue(this.space),
                 [`is-dashed`]: this.dashed,
             } }));
     }
@@ -100,7 +93,7 @@ export class Divider {
             },
             "space": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "DividerSpace",
                     "resolved": "\"\" | \"2xl\" | \"2xs\" | \"3xl\" | \"base\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"none\" | \"normal\" | \"sm\" | \"small\" | \"x-large\" | \"x-small\" | \"xl\" | \"xs\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"",
@@ -175,12 +168,6 @@ export class Divider {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "space",
-                "methodName": "spaceChanged"
-            }];
-    }
 }
 __decorate([
     Logger('divider'),
@@ -189,18 +176,18 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Divider.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...DIVIDER_LAYOUTS),
+    OneOf(DIVIDER_LAYOUTS),
     __metadata("design:type", String)
 ], Divider.prototype, "layout", void 0);
 __decorate([
-    ValidateOneOf(...DIVIDER_SPACES),
+    OneOf(DIVIDER_SPACES),
     __metadata("design:type", String)
 ], Divider.prototype, "space", void 0);
 __decorate([
-    ValidateOneOf(...DIVIDER_COLORS),
+    OneOf(DIVIDER_COLORS),
     __metadata("design:type", String)
 ], Divider.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Divider.prototype, "dashed", void 0);

package/dist/collection/components/drawer/drawer.host.css

@@ -0,0 +1 @@
+:host{--_drawer-background: var(--drawer-background, var(--mod-drawer-background, var(--ds-drawer-background)));--_drawer-radius: var(--drawer-radius, var(--mod-drawer-radius, var(--ds-drawer-radius)));--_drawer-max-height: var(--drawer-max-height, var(--mod-drawer-max-height, var(--ds-drawer-max-height)));--_drawer-padding: var(--drawer-padding, var(--mod-drawer-padding, var(--ds-drawer-padding)));--_drawer-backdrop-opacity: var(--drawer-backdrop-opacity, var(--mod-drawer-backdrop-opacity, var(--ds-backdrop-opacity)));display:contents}:host dialog{all:unset;box-sizing:border-box;position:fixed;bottom:0;left:0;right:0;width:100%;max-height:var(--_drawer-max-height);overflow-y:auto;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(100%);pointer-events:none}:host(.is-open) dialog{opacity:1;transform:translateY(0);pointer-events:auto}:host(.is-animated) dialog{transition:opacity 300ms ease,transform 300ms ease}:host dialog::backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);opacity:var(--_drawer-backdrop-opacity)}:host .container ds-close{position:absolute;top:1rem;right:1rem}:host .container{flex:1;width:100%;margin:0 auto;max-width:var(--ds-alias-container-width-base);background:var(--_drawer-background);border-radius:var(--_drawer-radius) var(--_drawer-radius) 0 0;padding:var(--_drawer-padding);position:relative}:host .container.is-fluid{max-width:var(--ds-alias-container-width-fluid)}:host .container.is-compact{max-width:var(--ds-alias-container-width-compact)}@media(prefers-reduced-motion: reduce){:host(.is-animated) dialog{transition:none !important}}

package/dist/collection/{utils/property-checkers/constants.js → components/drawer/drawer.interfaces.js}

@@ -1,4 +1,4 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-export const EMPTY_VALUES = [undefined, null, '', Number.NaN];
+export const DRAWER_CONTAINERS = ['default', 'fluid', 'compact'];

package/dist/collection/components/drawer/drawer.js

@@ -0,0 +1,492 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { ListenToConfig } from "../../global/index";
+import { Logger, ScrollHandler, wait, OneOf, Type } from "../../utils/index";
+import { DRAWER_CONTAINERS } from "./drawer.interfaces";
+/**
+ * Drawer displays a panel that slides up from the bottom of the screen.
+ * Uses the native dialog element for accessible top-layer rendering, built-in focus management,
+ * and Escape-key handling.
+ *
+ * @slot - The drawer content.
+ * @part dialog - The native dialog element.
+ * @part close  - The optional close button (visible when closable).
+ */
+export class Drawer {
+    constructor() {
+        this.scrollHandler = new ScrollHandler();
+        this.transitionQueue = Promise.resolve();
+        this.animated = true;
+        this.isOpen = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the drawer is open.
+         */
+        this.open = false;
+        /**
+         * If `true`, the drawer can be dismissed via the Escape key and shows a close button.
+         */
+        this.closable = true;
+        /**
+         * If `true`, clicking the backdrop (outside the panel) dismisses the drawer.
+         */
+        this.backdropDismiss = true;
+        /**
+         * Accessible label for the drawer dialog (sets aria-label on the dialog element).
+         */
+        this.label = '';
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = 'default';
+        this.handleCancel = (ev) => {
+            ev.preventDefault();
+            if (this.closable) {
+                this.open = false;
+            }
+        };
+        this.handleNativeClose = () => {
+            var _a;
+            // Re-enter the top layer if the browser closed the dialog unexpectedly.
+            if (this.open) {
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+            }
+        };
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.handleBackdropClick = (ev) => {
+            if (this.backdropDismiss && ev.target === this.dialogEl) {
+                this.open = false;
+            }
+        };
+        this.handleCloseClick = () => {
+            this.open = false;
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        newValue ? this.runOpen() : this.runClose();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.scrollHandler.connect();
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.addEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleNativeClose);
+        if (this.open) {
+            this.runOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleNativeClose);
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the drawer. */
+    async present() {
+        this.open = true;
+    }
+    /** Closes the drawer. */
+    async dismiss() {
+        this.open = false;
+    }
+    /**
+     * @internal
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    runOpen() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doOpen()).catch(() => undefined);
+    }
+    runClose() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doClose()).catch(() => undefined);
+    }
+    async doOpen() {
+        var _a, _b;
+        if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.dsWillPresent.emit();
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.showModal();
+        this.scrollHandler.disable();
+        this.isOpen = true;
+        if (this.animated)
+            await wait(300);
+        this.dsDidPresent.emit();
+    }
+    async doClose() {
+        var _a, _b;
+        if (!((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        this.dsWillDismiss.emit();
+        this.isOpen = false;
+        if (this.animated)
+            await wait(300);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
+        this.scrollHandler.enable();
+        this.dsDidDismiss.emit();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: 'bf8f75a23cda49f75931b8d2d61134268aa87024', class: { 'is-open': this.isOpen, 'is-animated': this.animated } }, h("dialog", { key: 'c84019c7626898f7d464422690654ff387840da3', part: "dialog", ref: el => (this.dialogEl = el), "aria-label": this.label || undefined, onClick: this.handleBackdropClick }, h("div", { key: '5a4f1b3d5415ba267e8f0fdd632b0be12a36b569', class: {
+                'container': true,
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            } }, this.closable && h("ds-close", { key: 'aaabb4ab6de152c3d21947a482aa0e0c3fccd82e', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'ef27b510ca776a39a56904b00661565101599dfe' })))));
+    }
+    static get is() { return "ds-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the drawer is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the drawer can be dismissed via the Escape key and shows a close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, clicking the backdrop (outside the panel) dismisses the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-dismiss",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the drawer dialog (sets aria-label on the dialog element)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "container": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DrawerContainer",
+                    "resolved": "\"compact\" | \"default\" | \"fluid\"",
+                    "references": {
+                        "DrawerContainer": {
+                            "location": "import",
+                            "path": "./drawer.interfaces",
+                            "id": "src/components/drawer/drawer.interfaces.ts::DrawerContainer",
+                            "referenceLocation": "DrawerContainer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "animated": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsWillPresent",
+                "name": "dsWillPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the drawer opens."
+                },
+                "complexType": {
+                    "original": "DrawerPresentDetail",
+                    "resolved": "void",
+                    "references": {
+                        "DrawerPresentDetail": {
+                            "location": "import",
+                            "path": "./drawer.interfaces",
+                            "id": "src/components/drawer/drawer.interfaces.ts::DrawerPresentDetail",
+                            "referenceLocation": "DrawerPresentDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidPresent",
+                "name": "dsDidPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the drawer is fully open."
+                },
+                "complexType": {
+                    "original": "DrawerPresentDetail",
+                    "resolved": "void",
+                    "references": {
+                        "DrawerPresentDetail": {
+                            "location": "import",
+                            "path": "./drawer.interfaces",
+                            "id": "src/components/drawer/drawer.interfaces.ts::DrawerPresentDetail",
+                            "referenceLocation": "DrawerPresentDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsWillDismiss",
+                "name": "dsWillDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the drawer closes."
+                },
+                "complexType": {
+                    "original": "DrawerDismissDetail",
+                    "resolved": "void",
+                    "references": {
+                        "DrawerDismissDetail": {
+                            "location": "import",
+                            "path": "./drawer.interfaces",
+                            "id": "src/components/drawer/drawer.interfaces.ts::DrawerDismissDetail",
+                            "referenceLocation": "DrawerDismissDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidDismiss",
+                "name": "dsDidDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the drawer is fully closed."
+                },
+                "complexType": {
+                    "original": "DrawerDismissDetail",
+                    "resolved": "void",
+                    "references": {
+                        "DrawerDismissDetail": {
+                            "location": "import",
+                            "path": "./drawer.interfaces",
+                            "id": "src/components/drawer/drawer.interfaces.ts::DrawerDismissDetail",
+                            "referenceLocation": "DrawerDismissDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the drawer.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the drawer.",
+                    "tags": []
+                }
+            },
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}
+__decorate([
+    Logger('drawer'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Drawer.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "open", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "closable", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "backdropDismiss", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Drawer.prototype, "label", void 0);
+__decorate([
+    OneOf(DRAWER_CONTAINERS),
+    __metadata("design:type", String)
+], Drawer.prototype, "container", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Drawer.prototype, "configChanged", null);

package/dist/collection/components/drawer/test/drawer.a11y.play.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('closed drawer', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-drawer id="drawer" label="Drawer">
+      <p>Drawer content.</p>
+    </ds-drawer>
+  `);
+    await a11y('ds-drawer');
+});
+test('open drawer', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-drawer id="drawer" label="Drawer">
+      <p>Drawer content.</p>
+    </ds-drawer>
+  `);
+    await page.evaluate(() => document.querySelector('ds-drawer').present());
+    await a11y('ds-drawer');
+});
+test('open drawer not closable', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-drawer id="drawer" label="Drawer" closable="false" backdrop-dismiss="false">
+      <p>Drawer content.</p>
+    </ds-drawer>
+  `);
+    await page.evaluate(() => document.querySelector('ds-drawer').present());
+    await a11y('ds-drawer');
+});
+test('open drawer with container fluid', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-drawer id="drawer" label="Drawer" container="fluid">
+      <p>Fluid container drawer.</p>
+    </ds-drawer>
+  `);
+    await page.evaluate(() => document.querySelector('ds-drawer').present());
+    await a11y('ds-drawer');
+});