@pine-ds/core 4.0.0-mercury.0 → 4.0.0

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -0,0 +1,286 @@
+import { h } from "@stencil/core";
+/**
+ * Mock PdsModal component for testing purposes
+ * This component mimics the real PdsModal but without using the Popover API
+ */
+export class MockPdsModal {
+    constructor() {
+        /**
+         * The size of the modal
+         */
+        this.size = 'md';
+        /**
+         * Whether the modal content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
+        /**
+         * Whether the modal can be dismissed by clicking the backdrop or pressing Escape
+         */
+        this.backdropDismiss = true;
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+    }
+    /**
+     * Shows the modal
+     */
+    async showModal() {
+        this.open = true;
+        this.pdsModalOpen.emit();
+    }
+    /**
+     * Hides the modal
+     */
+    async hideModal() {
+        this.open = false;
+        this.pdsModalClose.emit();
+    }
+    /**
+     * Listen for click events on the backdrop
+     */
+    // Using direct method instead of @Listen to avoid ESLint warning
+    handleBackdropClick(event) {
+        const backdrop = this.el.querySelector('.pds-modal__backdrop');
+        // Check if the click was directly on the backdrop (not on a child element)
+        if (event.target === backdrop && this.backdropDismiss === true) {
+            this.pdsModalBackdropClick.emit();
+            this.hideModal();
+        }
+    }
+    /**
+     * Listen for keydown events to handle Escape key
+     * Should only close on Escape if backdropDismiss is enabled
+     */
+    // Using direct method instead of @Listen to avoid ESLint warning
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open === true) {
+            // Always prevent default to mirror native dialog behavior blocking
+            event.preventDefault();
+            // Only close if backdropDismiss is enabled
+            if (this.backdropDismiss === true) {
+                this.hideModal();
+            }
+        }
+    }
+    componentDidLoad() {
+        // No need to do anything in componentDidLoad for the mock
+    }
+    render() {
+        const modalClasses = {
+            'pds-modal': true,
+            [`pds-modal--${this.size}`]: true,
+            'pds-modal--scrollable': this.scrollable
+        };
+        const backdropClasses = {
+            'pds-modal__backdrop': true,
+            'open': this.open,
+        };
+        return (h("div", { key: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, h("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, h("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), h("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, h("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), h("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, h("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
+    }
+    static get is() { return "mock-pds-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../pds-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../pds-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the modal component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the modal content should be scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "true"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal can be dismissed by clicking the backdrop or pressing Escape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-dismiss",
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsModalOpen",
+                "name": "pdsModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the modal is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsModalClose",
+                "name": "pdsModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsModalBackdropClick",
+                "name": "pdsModalBackdropClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the backdrop is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the modal",
+                    "tags": []
+                }
+            },
+            "hideModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-multiselect/multiselect-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/pds-multiselect/pds-multiselect.css

@@ -0,0 +1,324 @@
+:host {
+  display: block;
+}
+
+:host([aria-disabled=true]) .pds-multiselect__trigger {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+:host([aria-disabled=true]) .pds-multiselect__icon {
+  color: var(--pine-color-text-disabled);
+}
+
+.pds-multiselect {
+  position: relative;
+}
+
+.pds-multiselect__label {
+  color: var(--pine-color-text-label);
+  display: block;
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-multiselect__wrapper {
+  position: relative;
+}
+
+.pds-multiselect__trigger {
+  align-items: center;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-125);
+  cursor: pointer;
+  display: flex;
+  font: var(--pine-typography-body-medium);
+  gap: var(--pine-dimension-xs);
+  justify-content: space-between;
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pine-dimension-450);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+  position: relative;
+  text-align: start;
+  transition: border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;
+  width: 100%;
+}
+.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled) {
+  border-color: var(--pine-color-border-hover);
+}
+.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled) {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-multiselect__trigger.pds-multiselect__trigger--open {
+  border-color: var(--pine-color-border-active);
+}
+.pds-multiselect__trigger.pds-multiselect__trigger--invalid {
+  background-color: var(--pine-color-red-050);
+  border-color: var(--pine-color-border-danger);
+}
+.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+.pds-multiselect__trigger.pds-multiselect__trigger--disabled {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.pds-multiselect__trigger-text {
+  color: var(--pine-color-text-strong);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text {
+  color: var(--pine-color-text-disabled);
+}
+
+.pds-multiselect__icon {
+  color: var(--pine-color-icon);
+  flex-shrink: var(--pine-dimension-none);
+}
+
+.pds-multiselect__pill-list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pine-dimension-2xs);
+}
+
+.pds-multiselect__pill-list--inline {
+  flex: 1;
+  min-width: 0;
+}
+
+.pds-multiselect__pill-list--below {
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-multiselect__pill-overflow {
+  color: var(--pine-color-text-muted);
+  font: var(--pine-typography-body-sm-medium);
+  white-space: nowrap;
+}
+
+.pds-multiselect__trigger--pill-inline {
+  align-items: center;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  gap: var(--pine-dimension-2xs);
+  min-height: var(--pine-dimension-450);
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-sm);
+}
+.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open {
+  border-color: var(--pine-color-border-active);
+}
+.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled) {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+
+.pds-multiselect__pill-toggle {
+  align-items: center;
+  appearance: none;
+  background: none;
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+}
+.pds-multiselect__pill-toggle:focus {
+  outline: 3px solid transparent;
+}
+.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.pds-multiselect__panel {
+  background: var(--pine-color-background-overlay);
+  border-radius: var(--pine-dimension-125);
+  box-shadow: var(--pine-box-shadow);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: var(--pine-z-index-raised);
+}
+
+.pds-multiselect__search {
+  align-items: center;
+  border-block-end: var(--pine-border);
+  border-block-end-color: var(--pine-color-border-subtle);
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+}
+.pds-multiselect__search pds-icon {
+  color: var(--pine-color-text-muted);
+  flex-shrink: var(--pine-dimension-none);
+}
+
+.pds-multiselect__search-input {
+  background: transparent;
+  border: var(--pine-dimension-none);
+  color: var(--pine-color-text-strong);
+  flex: 1;
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  min-width: var(--pine-dimension-none);
+  outline: none;
+}
+.pds-multiselect__search-input::placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+
+.pds-multiselect__selected-section {
+  border-block-end: var(--pine-border);
+  border-block-end-color: var(--pine-color-border-subtle);
+  padding: var(--pine-dimension-xs);
+}
+
+.pds-multiselect__selected-list {
+  list-style: none;
+  margin: var(--pine-dimension-none);
+  padding: var(--pine-dimension-none);
+}
+
+.pds-multiselect__selected-item {
+  color: var(--pine-color-text-strong);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  overflow: hidden;
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-multiselect__listbox {
+  background: transparent;
+  border: var(--pine-dimension-none);
+  box-sizing: border-box;
+  list-style: none;
+  margin: var(--pine-dimension-none);
+  overflow-y: auto;
+  padding: var(--pine-dimension-xs);
+}
+
+.pds-multiselect__group-header {
+  color: var(--pine-color-text-muted);
+  display: block;
+  font: var(--pine-typography-body-sm-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  padding: var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);
+  text-transform: uppercase;
+}
+
+.pds-multiselect__listbox > li:first-child > .pds-multiselect__group-header {
+  padding-block-start: var(--pine-dimension-xs);
+}
+
+.pds-multiselect__group-list {
+  list-style: none;
+  margin: var(--pine-dimension-none);
+  padding: var(--pine-dimension-none);
+}
+
+.pds-multiselect__option {
+  align-items: center;
+  background: transparent;
+  border-radius: var(--pine-dimension-xs);
+  cursor: pointer;
+  display: flex;
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: background 0.15s;
+}
+.pds-multiselect__option pds-checkbox {
+  pointer-events: none;
+  width: 100%;
+}
+.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled), .pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled) {
+  background: var(--pine-color-background-muted);
+}
+.pds-multiselect__option.pds-multiselect__option--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.pds-multiselect__option:focus-visible {
+  outline: var(--pine-dimension-none);
+}
+
+.pds-multiselect__create-option {
+  color: var(--pine-color-text-strong);
+  width: 100%;
+}
+.pds-multiselect__create-option pds-icon {
+  color: var(--pine-color-text-muted);
+  flex-shrink: var(--pine-dimension-none);
+}
+
+.pds-multiselect__empty,
+.pds-multiselect__loading {
+  align-items: center;
+  color: var(--pine-color-text-muted);
+  display: flex;
+  font: var(--pine-typography-body);
+  justify-content: center;
+  padding: var(--pine-dimension-sm);
+}
+
+.pds-multiselect__load-more {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-xs);
+}
+
+.pds-multiselect__helper {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-2xs);
+  margin-inline-start: var(--pine-dimension-none);
+}
+
+.pds-multiselect__error {
+  align-items: flex-start;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-2xs);
+  margin-inline-start: var(--pine-dimension-none);
+}
+.pds-multiselect__error pds-icon {
+  flex-shrink: var(--pine-dimension-none);
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.visually-hidden {
+  border: var(--pine-dimension-none);
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: var(--pine-dimension-none);
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}