@pine-ds/core 3.1.0 → 3.3.0

package/components/pds-modal.js

@@ -0,0 +1,278 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:calc(100vh - (6vh + 96px));width:100%}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}";
+
+const PdsModal$1 = /*@__PURE__*/ proxyCustomElement(class PdsModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.pdsModalOpen = createEvent(this, "pdsModalOpen", 7);
+        this.pdsModalClose = createEvent(this, "pdsModalClose", 7);
+        this.focusableElements = [];
+        /**
+         * Whether the modal can be dismissed by clicking the backdrop
+         * @default true
+         */
+        this.backdropDismiss = true;
+        /**
+         * Whether the modal is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * The size of the modal
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Stores the list of focusable elements in the modal
+         */
+        this.focusableElementsArray = [];
+        this.handleBackdropClick = (e) => {
+            if (!this.backdropDismiss || !this.open)
+                return;
+            if (e.target.classList.contains('pds-modal__backdrop')) {
+                e.stopPropagation();
+                // Only close if this is the innermost modal
+                if (this.isInnermostModal()) {
+                    this.hideModal();
+                }
+            }
+        };
+        this.handleKeyDown = (e) => {
+            // If the modal is not open, don't handle any keyboard events
+            if (!this.open)
+                return;
+            // Handle Escape key to close the modal
+            if (e.key === 'Escape') {
+                // Only close if this is the innermost modal
+                if (this.isInnermostModal()) {
+                    e.preventDefault();
+                    this.hideModal();
+                }
+                return;
+            }
+            // Handle Tab key for focus trapping
+            if (e.key === 'Tab') {
+                // If there are no focusable elements, do nothing
+                if (this.focusableElements.length === 0)
+                    return;
+                // Get the first and last focusable elements
+                const firstFocusableElement = this.focusableElements[0];
+                const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
+                // Get the current active element
+                const activeElement = document.activeElement;
+                // Check if we need to wrap focus
+                const isFirstElement = activeElement === firstFocusableElement ||
+                    firstFocusableElement.contains(activeElement);
+                const isLastElement = activeElement === lastFocusableElement ||
+                    lastFocusableElement.contains(activeElement);
+                // If shift + tab is pressed and focus is on the first element, move to the last element
+                if (e.shiftKey && isFirstElement) {
+                    e.preventDefault();
+                    this.focusElement(lastFocusableElement);
+                }
+                // If tab is pressed and focus is on the last element, move to the first element
+                else if (!e.shiftKey && isLastElement) {
+                    e.preventDefault();
+                    this.focusElement(firstFocusableElement);
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        this.modalRef = this.el.querySelector('.pds-modal__backdrop');
+        // Add keyboard event listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        // Clean up event listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
+    }
+    /**
+     * Updates the list of focusable elements in the modal
+     */
+    updateFocusableElements() {
+        if (!this.modalRef)
+            return;
+        // Get all focusable elements within the modal
+        const selector = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+            'pds-button:not([disabled])',
+            'pds-link:not([disabled])',
+            'pds-input:not([disabled])',
+            'pds-checkbox:not([disabled])',
+            'pds-radio:not([disabled])',
+            'pds-switch:not([disabled])',
+            'pds-select:not([disabled])',
+        ].join(',');
+        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
+        // Filter out elements with display: none or visibility: hidden
+        this.focusableElements = this.focusableElements.filter(el => {
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        });
+    }
+    /**
+     * Sets focus to the first focusable element in the modal
+     */
+    setInitialFocus() {
+        if (this.focusableElements.length === 0)
+            return;
+        // Focus the first focusable element
+        const firstElement = this.focusableElements[0];
+        // For web components, we need to ensure they're properly focused
+        this.focusElement(firstElement);
+    }
+    /**
+     * Helper method to focus an element, with special handling for web components
+     */
+    focusElement(element) {
+        if (!element)
+            return;
+        try {
+            // Try standard focus first
+            element.focus();
+            // Check if focus worked
+            setTimeout(() => {
+                if (document.activeElement !== element) {
+                    // For web components, try to find a focusable element inside
+                    if (element.shadowRoot) {
+                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
+                        if (focusableInShadow) {
+                            focusableInShadow.focus();
+                        }
+                    }
+                }
+            }, 0);
+        }
+        catch (error) {
+            console.error('Error focusing element:', error);
+        }
+    }
+    /**
+     * Opens the modal
+     */
+    async showModal() {
+        if (this.modalRef) {
+            try {
+                // Store the currently focused element to restore focus when modal closes
+                this.previousActiveElement = document.activeElement;
+                // Use native dialog showModal method which makes the rest of the page inert
+                this.modalRef.showModal();
+                this.open = true;
+                // Update focusable elements and set initial focus
+                // Using a longer timeout to ensure all components are fully rendered
+                setTimeout(() => {
+                    this.updateFocusableElements();
+                    this.setInitialFocus();
+                    this.pdsModalOpen.emit();
+                }, 100);
+            }
+            catch (error) {
+                console.error('Failed to show modal:', error);
+            }
+        }
+    }
+    /**
+     * Closes the modal
+     */
+    async hideModal() {
+        if (this.modalRef) {
+            try {
+                this.modalRef.close();
+                this.open = false;
+                // Restore focus to the element that was focused before the modal was opened
+                if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+                    this.previousActiveElement.focus();
+                }
+                this.pdsModalClose.emit();
+            }
+            catch (error) {
+                console.error('Failed to hide modal:', error);
+            }
+        }
+    }
+    /**
+     * Gets the z-index of a modal's backdrop element
+     */
+    getBackdropZIndex(modal) {
+        const backdrop = modal.querySelector('.pds-modal__backdrop');
+        return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+    }
+    /**
+     * Checks if this modal is the innermost (highest z-index) modal
+     */
+    isInnermostModal() {
+        // Find all open modals
+        const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(modal => modal.open);
+        if (openModals.length === 0)
+            return false;
+        // Get this modal's backdrop element
+        const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');
+        if (!thisBackdrop)
+            return false;
+        // Get computed z-index of all open modal backdrops
+        const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));
+        // Get the highest z-index
+        const maxZIndex = Math.max(...modalZIndexes);
+        // Check if this modal's backdrop has the highest z-index
+        const thisZIndex = this.getBackdropZIndex(this.el);
+        return thisZIndex === maxZIndex;
+    }
+    render() {
+        return (h("dialog", { key: '6ec691cfcf4865baeeba14f097d5e647a3201dba', class: {
+                'pds-modal__backdrop': true,
+                'open': this.open
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'b7c4681717bfc0d095653c7dcf1a0e42cf069e8b', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, h("slot", { key: '9ca7f711579587c2f49fd19f81a488192d62ce72' }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return pdsModalCss; }
+}, [4, "pds-modal", {
+        "backdropDismiss": [4, "backdrop-dismiss"],
+        "componentId": [1, "component-id"],
+        "open": [1028],
+        "size": [1],
+        "focusableElementsArray": [32],
+        "showModal": [64],
+        "hideModal": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsModal$1);
+            }
+            break;
+    } });
+}
+
+const PdsModal = PdsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsModal, defineCustomElement };
+//# sourceMappingURL=pds-modal.js.map
+
+//# sourceMappingURL=pds-modal.js.map

package/components/pds-modal.js.map

@@ -0,0 +1 @@
+{"file":"pds-modal.js","mappings":"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","names":["PdsModal","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal.scss?tag=pds-modal","src/components/pds-modal/pds-modal.tsx"],"sourcesContent":[".pds-modal__backdrop {\n  align-items: flex-start;\n  background-color: rgba(0, 0, 0, 0.4);\n  border: 0;\n  display: flex;\n  height: 100%;\n  inset: 0;\n  justify-content: center;\n  margin: 0;\n  max-height: 100%;\n  max-width: 100%;\n  opacity: 0;\n  padding: 0;\n  position: fixed;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  visibility: hidden;\n  width: 100%;\n  z-index: 1000;\n\n  @supports (backdrop-filter: blur(3px)) {\n    backdrop-filter: blur(3px);\n  }\n\n  // Increase z-index for nested modals\n  pds-modal & {\n    z-index: 1001;\n  }\n\n  &::backdrop {\n    background: transparent;\n  }\n\n  &.open {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n.pds-modal {\n  background: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow-400);\n  display: flex;\n  flex-direction: column;\n  margin: var(--pine-dimension-md);\n  max-height: calc(100vh - (calc(6vh + 96px)));\n  width: 100%;\n\n  @media (min-width: 992px) {\n    margin-block-start: 6vh;\n  }\n\n  @media (min-width: 1200px) {\n    margin-block-start: 8vh;\n  }\n}\n\n.pds-modal--sm {\n  max-width: 520px;\n}\n\n.pds-modal--md {\n  max-width: 700px;\n}\n\n.pds-modal--lg {\n  max-width: 900px;\n}\n\n.pds-modal--fullscreen {\n  border-radius: 0;\n  height: 100%;\n  margin: 0;\n  max-height: 100vh;\n  max-width: 100%;\n}\n\n.pds-modal-content {\n  .pds-modal--fullscreen & {\n    flex: 1;\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal',\n  styleUrl: 'pds-modal.scss',\n  shadow: false\n})\nexport class PdsModal {\n  private modalRef: HTMLDialogElement;\n  private previousActiveElement: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n\n  @Element() el: HTMLPdsModalElement;\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   * @default true\n   */\n  @Prop() backdropDismiss = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Whether the modal is open\n   * @default false\n   */\n  @Prop({ mutable: true }) open = false;\n\n  /**\n   * The size of the modal\n   * @default 'md'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  // Modal content is always scrollable by default\n\n  /**\n   * Emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter<void>;\n\n  /**\n   * Stores the list of focusable elements in the modal\n   */\n  @State() focusableElementsArray: HTMLElement[] = [];\n\n  componentDidLoad() {\n    this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n    // Add keyboard event listener\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    // Clean up event listener\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.showModal();\n    } else {\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Updates the list of focusable elements in the modal\n   */\n  private updateFocusableElements() {\n    if (!this.modalRef) return;\n\n    // Get all focusable elements within the modal\n    const selector = [\n      'a[href]',\n      'button:not([disabled])',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'pds-button:not([disabled])',\n      'pds-link:not([disabled])',\n      'pds-input:not([disabled])',\n      'pds-checkbox:not([disabled])',\n      'pds-radio:not([disabled])',\n      'pds-switch:not([disabled])',\n      'pds-select:not([disabled])',\n    ].join(',');\n\n    this.focusableElements = Array.from(\n      this.modalRef.querySelectorAll(selector)\n    ) as HTMLElement[];\n\n    // Filter out elements with display: none or visibility: hidden\n    this.focusableElements = this.focusableElements.filter(el => {\n      const style = window.getComputedStyle(el);\n      return style.display !== 'none' && style.visibility !== 'hidden';\n    });\n  }\n\n  /**\n   * Sets focus to the first focusable element in the modal\n   */\n  private setInitialFocus() {\n    if (this.focusableElements.length === 0) return;\n\n    // Focus the first focusable element\n    const firstElement = this.focusableElements[0];\n\n    // For web components, we need to ensure they're properly focused\n    this.focusElement(firstElement);\n  }\n\n  /**\n   * Helper method to focus an element, with special handling for web components\n   */\n  private focusElement(element: HTMLElement) {\n    if (!element) return;\n\n    try {\n      // Try standard focus first\n      element.focus();\n\n      // Check if focus worked\n      setTimeout(() => {\n        if (document.activeElement !== element) {\n          // For web components, try to find a focusable element inside\n          if (element.shadowRoot) {\n            const focusableInShadow = element.shadowRoot.querySelector(\n              'button, [tabindex], input, a[href]'\n            ) as HTMLElement;\n\n            if (focusableInShadow) {\n              focusableInShadow.focus();\n            }\n          }\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error focusing element:', error);\n    }\n  }\n\n  /**\n   * Opens the modal\n   */\n  @Method()\n  async showModal() {\n    if (this.modalRef) {\n      try {\n        // Store the currently focused element to restore focus when modal closes\n        this.previousActiveElement = document.activeElement as HTMLElement;\n\n        // Use native dialog showModal method which makes the rest of the page inert\n        this.modalRef.showModal();\n        this.open = true;\n\n        // Update focusable elements and set initial focus\n        // Using a longer timeout to ensure all components are fully rendered\n        setTimeout(() => {\n          this.updateFocusableElements();\n          this.setInitialFocus();\n          this.pdsModalOpen.emit();\n        }, 100);\n      } catch (error) {\n        console.error('Failed to show modal:', error);\n      }\n    }\n  }\n\n  /**\n   * Closes the modal\n   */\n  @Method()\n  async hideModal() {\n    if (this.modalRef) {\n      try {\n        this.modalRef.close();\n        this.open = false;\n\n        // Restore focus to the element that was focused before the modal was opened\n        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n          this.previousActiveElement.focus();\n        }\n\n        this.pdsModalClose.emit();\n      } catch (error) {\n        console.error('Failed to hide modal:', error);\n      }\n    }\n  }\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    if (!this.backdropDismiss || !this.open) return;\n\n    if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n      e.stopPropagation();\n\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        this.hideModal();\n      }\n    }\n  };\n\n  /**\n   * Gets the z-index of a modal's backdrop element\n   */\n  private getBackdropZIndex(modal: Element): number {\n    const backdrop = modal.querySelector('.pds-modal__backdrop');\n    return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n  }\n\n  /**\n   * Checks if this modal is the innermost (highest z-index) modal\n   */\n  private isInnermostModal(): boolean {\n    // Find all open modals\n    const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n      modal => modal.open\n    );\n\n    if (openModals.length === 0) return false;\n\n    // Get this modal's backdrop element\n    const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n    if (!thisBackdrop) return false;\n\n    // Get computed z-index of all open modal backdrops\n    const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n    // Get the highest z-index\n    const maxZIndex = Math.max(...modalZIndexes);\n\n    // Check if this modal's backdrop has the highest z-index\n    const thisZIndex = this.getBackdropZIndex(this.el);\n    return thisZIndex === maxZIndex;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // If the modal is not open, don't handle any keyboard events\n    if (!this.open) return;\n\n    // Handle Escape key to close the modal\n    if (e.key === 'Escape') {\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        e.preventDefault();\n        this.hideModal();\n      }\n      return;\n    }\n\n    // Handle Tab key for focus trapping\n    if (e.key === 'Tab') {\n      // If there are no focusable elements, do nothing\n      if (this.focusableElements.length === 0) return;\n\n      // Get the first and last focusable elements\n      const firstFocusableElement = this.focusableElements[0];\n      const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n      // Get the current active element\n      const activeElement = document.activeElement;\n\n      // Check if we need to wrap focus\n      const isFirstElement = activeElement === firstFocusableElement ||\n                            firstFocusableElement.contains(activeElement as Node);\n\n      const isLastElement = activeElement === lastFocusableElement ||\n                           lastFocusableElement.contains(activeElement as Node);\n\n      // If shift + tab is pressed and focus is on the first element, move to the last element\n      if (e.shiftKey && isFirstElement) {\n        e.preventDefault();\n        this.focusElement(lastFocusableElement);\n      }\n      // If tab is pressed and focus is on the last element, move to the first element\n      else if (!e.shiftKey && isLastElement) {\n        e.preventDefault();\n        this.focusElement(firstFocusableElement);\n      }\n    }\n  };\n\n  render() {\n    return (\n      <dialog\n        class={{\n          'pds-modal__backdrop': true,\n          'open': this.open\n        }}\n        aria-modal=\"true\"\n        aria-labelledby={`${this.componentId}-heading`}\n        onClick={this.handleBackdropClick}\n      >\n        <div\n          class={`pds-modal pds-modal--${this.size} pds-modal--scrollable`}\n        >\n          <slot></slot>\n        </div>\n      </dialog>\n    );\n  }\n}\n"],"version":3}

package/components/pds-popover.js

@@ -56,27 +56,59 @@ const PdsPopover$1 = /*@__PURE__*/ proxyCustomElement(class PdsPopover extends H
         const offset = 8;
         switch (this.placement) {
             case 'top':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+                break;
+            case 'top-start':
                 top = triggerRect.top - popoverRect.height - offset;
                 left = triggerRect.left;
                 break;
+            case 'top-end':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.right - popoverRect.width;
+                break;
             case 'right':
+                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+                left = triggerRect.right + offset;
+                break;
+            case 'right-start':
                 top = triggerRect.top;
                 left = triggerRect.right + offset;
                 break;
+            case 'right-end':
+                top = triggerRect.bottom - popoverRect.height;
+                left = triggerRect.right + offset;
+                break;
             case 'bottom':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+                break;
+            case 'bottom-start':
                 top = triggerRect.bottom + offset;
                 left = triggerRect.left;
                 break;
+            case 'bottom-end':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.right - popoverRect.width;
+                break;
             case 'left':
+                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
+            case 'left-start':
                 top = triggerRect.top;
                 left = triggerRect.left - popoverRect.width - offset;
                 break;
+            case 'left-end':
+                top = triggerRect.bottom - popoverRect.height;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
         }
         popoverEl.style.top = `${top}px`;
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '3bed0c38e97500efb2bffcef8321a6b38215c434' }, h("button", { key: '0db59e1815568cb980ce0bbe5ef3502177015a1d', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'd8c70cd36614cb3fc83669a843b00af0d18b03d4', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: 'e7408b199525e88c0e975f9cc3e96200f82ea23e' }))));
+        return (h(Host, { key: '35e5f4c21884f02b17dcb920e5c7ba73b8bed849' }, h("button", { key: '586880a84a4ad659a00500206e5b3c6c5e7e1a37', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'fcb97e9b4033eef58bdca4915572b986dabde43c', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '1ffb626c69e06f17379ebf4ff4d5498f030909e8' }))));
     }
     get el() { return this; }
     static get style() { return pdsPopoverCss; }

package/components/pds-popover.js.map

@@ -1 +1 @@
-{"file":"pds-popover.js","mappings":"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","names":["PdsPopover","__stencil_proxyCustomElement"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-popover.js","mappings":"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","names":["PdsPopover","__stencil_proxyCustomElement"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case 'top-start':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'top-end':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.right - popoverRect.width;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.right + offset;\n        break;\n      case 'right-start':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'right-end':\n        top = triggerRect.bottom - popoverRect.height;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case 'bottom-start':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'bottom-end':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.right - popoverRect.width;\n        break;\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n      case 'left-start':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n      case 'left-end':\n        top = triggerRect.bottom - popoverRect.height;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-progress.js

@@ -24,7 +24,7 @@ const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'a0a7cde165c1acc884366dfe7a368db5d7c4150e', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'c2a8f262e0a6393448a0bc8a05dc49f30c451754', class: "pds-progress" }, h("label", { key: '422c51d5b06ef6d99e23cb2721b861ba9611b1df', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '57081cc95c8bb44d6fa26cd7d1f7933108982165', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '37b88967a8584b43407314b0ba70faf4e43a9e5a', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '2a7768cc769f62579bfee6d8f9e6109d10df0aaf', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '1eef3758e8c6e470f8cdd170e8d6c49e25bf9aa3', class: "pds-progress" }, h("label", { key: '5b75150a747a15379fdf0ee23b1be561e6d990e7', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e20ad7d705d97ac11173ae515332fc1620a96328', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '8bafb39b5976149b80e720952e625f60f1e3c73c', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get style() { return pdsProgressCss; }
 }, [1, "pds-progress", {

package/components/pds-radio.js

@@ -52,9 +52,9 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '7366c979970c03d9c6b26d355ba2f14c2e040907', class: this.classNames() }, h("label", { key: 'c48405dc725f4d7b0a027e66c3b0b04e72843445', htmlFor: this.componentId }, h("input", { key: 'cd38a200a73572d2f07ada9bc1ec08cae0863044', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h("span", { key: 'a21fb68b4326afb2bf25b08cf6022cd26f3c83ba', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'b4c201465e085096ac5fac05e43b01cee045310e', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '2c0475efbe1ebedd762de9d432864f5dab8f0448', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '40ece3a429d9475c17f262d772cdb7332a7089b2', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8c215fa4193cf8bd246cd83edf97b8316685714e', class: this.classNames() }, h("label", { key: '578530f26dd25f73ccbbb39c773290cd275920cf', htmlFor: this.componentId }, h("input", { key: '9ab61a2683246fae862feb5e432a0872288b7a87', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h("span", { key: 'f48c47ddb347bf0d7388359665dbbf3abf1b4859', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'b8dbb34af90eed82f69621ceaadd8da668f0b3de', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e777e4f2397ba833aefb7e8cd4ab9a32ea93685a', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '13bd73d91bb3d676757ac9f4dcfcef7d2a5fcc55', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get style() { return labelCss + pdsRadioCss; }
 }, [2, "pds-radio", {

package/components/pds-row.js

@@ -38,7 +38,7 @@ const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLEleme
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'e898a1a24bbb1177b024d2c87d9388b136c8bde9', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '7641ed5798525661b1a100bfbce60ed271e76887', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get style() { return pdsRowCss; }
 }, [0, "pds-row", {

package/components/pds-select.js

@@ -7,7 +7,7 @@ const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pi
 
 const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 
-const pdsSelectCss = ":host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}label{grid-area:label;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:2.5rem;pointer-events:none;position:relative;z-index:1}";
+const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}label{grid-area:label;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:1}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
 
 const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTMLElement {
     constructor() {
@@ -125,8 +125,7 @@ const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTM
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '6eea9a5492e4b7e415922bce0aa8f2295792a9e4', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '3180e1eff494f846f395d9db6730926d86d1e54a', class: "pds-select" }, this.label &&
-            h("label", { key: '90dc521ef10b81a9f58a0f0a2cfa4bc685312119', htmlFor: this.componentId }, this.label), h("select", { key: 'd6576d25601de6c41893568927b64e530bf9f266', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '87c53bb7bf315e170f60e5b58afcbf623d1aa65c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '8cafbc8cc8e23de0ab69b9d6b7d23c896df530b6', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '48758d321edbd38ff6bd31ddd1902627202e196e', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'c0a0b391e6b5c35d5d3d7fce9d1f92583c582aa5', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '4f91cfcfcc570cf79d8e6a2f86d741f471489591', class: "pds-select" }, !this.hideLabel && (h("label", { key: '21fa83cfdad6a46be1efa22ebc4df696ca49b7b1', htmlFor: this.componentId }, h("span", { key: '760e46f98327c3b8e9ceb48ee158202ce42b8bb6', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), h("select", { key: '78d92779624d84df9ae73515bbda74d9d44a8919', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '9a75bf791747df08018d59de49855410c6dc2312', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1a974b4e171971e922aa04e9a56d6e6f26635724', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '9cbc569418617092229d660b34b2c17a2826c878', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -137,6 +136,7 @@ const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTM
         "componentId": [1, "component-id"],
         "disabled": [4],
         "errorMessage": [1, "error-message"],
+        "hideLabel": [4, "hide-label"],
         "helperMessage": [1, "helper-message"],
         "invalid": [4],
         "label": [1],

package/components/pds-select.js.map

@@ -1 +1 @@
-{"file":"pds-select.js","mappings":"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","names":["PdsSelect","__stencil_proxyCustomElement"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\nlabel {\n  grid-area: label;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\nselect {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: 2.5rem;\n  pointer-events: none;\n  position: relative;\n  z-index: 1;\n}\n","import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\n          <select\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-select.js","mappings":"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","names":["PdsSelect","__stencil_proxyCustomElement"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n  --pds-select-background: var(--pine-color-background-container);\n  --pds-select-border: var(--pine-border);\n  --pds-select-border-radius: var(--pine-dimension-125);\n  --pds-select-border-radius-start-end: var(--pine-dimension-125);\n  --pds-select-border-radius-start-start: var(--pine-dimension-125);\n  --pds-select-border-radius-end-end: var(--pine-dimension-125);\n  --pds-select-border-radius-end-start: var(--pine-dimension-125);\n  --pds-select-min-height: 36px;\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\nlabel {\n  grid-area: label;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\nselect {\n  appearance: none;\n  background-color: var(--pds-select-background);\n  border: var(--pds-select-border);\n  border-radius: var(--pds-select-border-radius);\n  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-select-min-height);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: var(--pds-select-min-height);\n  pointer-events: none;\n  position: relative;\n  z-index: 1;\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n","import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <label htmlFor={this.componentId}>\n              <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                {this.label}\n              </span>\n            </label>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-sortable-item.js

@@ -28,7 +28,7 @@ const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem
         }
     }
     render() {
-        return (h(Host, { key: '1a5e7d46d027bf6aa95b9d688e390ab42a40cc8d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a6653d963a7a8f39937507dd94042943b4627686', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'a5c340eaf2f3f4d3fb4a0cc66371444d8844b078', icon: handle }))), h("slot", { key: '647f24778a2450c040596c6bea279236b0148e0f' }), this.enableActions && (h("div", { key: '7b8c76b0519c21fe0bd29cb5ef3f213296f30ef4', class: "pds-sortable-item__actions" }, h("slot", { key: '636480cd939b04ed739a2e6a7dbc489680a18a57', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'b7817592ed6329f84e09ff5c5e200bc4305275bc', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'c31df5f0c81bd684ac60690044e2409d0cbc7831', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ff764a5ef70560c073474a7a51f45dd89df53190', icon: handle }))), h("slot", { key: 'e1f33a5e56b37405b7e46bff24dc91e4ece71870' }), this.enableActions && (h("div", { key: '569563f7c7d5b069888a8c3ee8e50fd3d626b1b2', class: "pds-sortable-item__actions" }, h("slot", { key: '9ca544725723703ddac0de3f0bb9a4b0884d1571', name: "sortable-item-actions" })))));
     }
     get el() { return this; }
     static get style() { return pdsSortableItemCss; }

package/components/pds-sortable.js

@@ -2712,7 +2712,7 @@ const PdsSortable$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortable extends
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'd120089730b34d5e787a34439f5d308e0c476c7a', class: this.classNames(), id: this.componentId }, h("slot", { key: 'b796c6aca1acde55085163049ecb869952cf8fb6' })));
+        return (h(Host, { key: 'c5353036ad9b108f742e55b1a28ebb449cf556d0', class: this.classNames(), id: this.componentId }, h("slot", { key: 'cb71736fb3388f5829476c5b4802d5aa5f811ac7' })));
     }
     get el() { return this; }
     static get style() { return pdsSortableCss; }