npm - @pine-ds/core - Versions diffs - 3.1.0 → 3.3.0 - Mend

@pine-ds/core 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (705) hide show

package/dist/esm/pds-modal.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pds-modal.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/pds-popover.entry.js CHANGED Viewed

@@ -54,27 +54,59 @@ const PdsPopover = class {
         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 getElement(this); }
 };

package/dist/esm/pds-popover.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-popover.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,6/BAA6/B;;MCQtgC,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;AAGG;AACM,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEvB;;;AAGG;AACK,QAAA,IAAmB,CAAA,mBAAA,GAA+B,MAAM;AAEhE;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,MAAM;AAY/C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,GAAG;AAE/B;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAkB,OAAO;~~AAiF5D~~;IA/EC,mBAAmB,GAAA;QACjB,IAAI,CAAC,wBAAwB,EAAE;;IAMjC,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;;IAO5B,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,wBAAwB,EAAE;;;IAI3B,wBAAwB,GAAA;AAC9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAgB;AAC1F,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAgB;AAEjF,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE;AAE9B,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,qBAAqB,EAAE;AACrD,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,qBAAqB,EAAE;QAErD,IAAI,GAAG,GAAG,CAAC;QACX,IAAI,IAAI,GAAG,CAAC;QACZ,MAAM,MAAM,GAAG,CAAC;AAEhB,QAAA,QAAQ,IAAI,CAAC,SAAS;AACpB,YAAA,KAAK,KAAK;gBACR,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,MAAM;AACnD,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI;gBACvB;AACF,YAAA,KAAK,OAAO;AACV,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG;AACrB,gBAAA,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,MAAM;gBACjC;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,MAAM;AACjC,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI;gBACvB;AACF,YAAA,KAAK,MAAM;AACT,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG;gBACrB,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,MAAM;gBACpD;;QAGJ,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAG,EAAA,GAAG,IAAI;QAChC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,IAAI;;IAGpC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAC5B,aAAa,EAAE,IAAI,CAAC,WAAW,EAC/B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,IAAI,CACH,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,MAAM,GAAG,qBAAqB,GAAG,EAAE,CAAA,CAAE,EAChE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA,EAAE,EAAA,EAEzC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}
1	+ {"version":3,"file":"pds-popover.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/pds-progress.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const PdsProgress = class {
         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, "%")));
     }
 };
 PdsProgress.style = pdsProgressCss;

package/dist/esm/pds-radio.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-Uh5ntVcq.js';
 import { m as messageId, a as assignDescription } from './form-DTL_39D_.js';
-import { f as danger } from './index-_4gljHh-.js';
+import { f as danger } from './index-DpOSrebJ.js';
 const labelCss = ".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
@@ -50,9 +50,9 @@ const PdsRadio = class {
         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)));
     }
 };
 PdsRadio.style = labelCss + pdsRadioCss;

package/dist/esm/pds-row.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const PdsRow = class {
         })), (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 });
     }
 };
 PdsRow.style = pdsRowCss;

package/dist/esm/pds-select.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-Uh5ntVcq.js';
 import { m as messageId } from './form-DTL_39D_.js';
-import { f as danger, g as enlarge } from './index-_4gljHh-.js';
+import { f as danger, g as enlarge } from './index-DpOSrebJ.js';
 const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";
 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 = class {
     constructor(hostRef) {
@@ -122,8 +122,7 @@ const PdsSelect = class {
         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"]

package/dist/esm/pds-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-select.entry.js","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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-select.entry.js","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"],"names":[],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,wEAAwE;;ACAnG,MAAM,QAAQ,GAAG,oTAAoT;;ACArU,MAAM,YAAY,GAAG,4xHAA4xH;;MCSpyH,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoBE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA2BxB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAOxB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAoDxB;;AAEE;AACM,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAQ,KAAI;AACpC,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B;YAE5C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO;iBACnC,MAAM,CAAC,CAAC,MAAM,MAAO,MAAM,CAAC,QAAQ,CAAC;AACrC,iBAAA,GAAG,CAAC,CAAC,MAAM,MAAO,MAAM,CAAC,KAAK,CAAC,CAAC;YAErC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACvC,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;;iBACnB;AACH,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM;;AAGvB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC;AAC5C,SAAC;AAED;;;;;AAKG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,MAAM,CAAoB;AAExE,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,EAAE;AAC5B,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAgD;AAEhH,YAAA,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAChC,gBAAA,IAAK,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAClD,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAA4C;AAClF,oBAAA,IAAI,UAAU,CAAC,OAAO,KAAK,QAAQ,IAAK,UAAgC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;AAC5F,wBAAA,UAAgC,CAAC,QAAQ,GAAG,IAAI;;AAEnD,oBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC;;AAEzC,aAAC,CAAC;YAEF,IAAI,CAAC,oBAAoB,EAAE;AAC7B,SAAC;AAwEF;AAxJC;;;;AAIG;IACH,YAAY,GAAA;QACV,IAAI,CAAC,oBAAoB,EAAE;;IAG7B,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;;AAG7B;;;;;;;;;AASG;IACK,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO;;YAGrC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAyB,KAAI;gBACpD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC7B,oBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;;qBAC9C;oBACL,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;;AAEjD,aAAC,CAAC;;;IAgDE,gBAAgB,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,aAAa,KACvB,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,EAC5E,EAAA,IAAI,CAAC,aAAa,CACjB,CACL;;IAGK,eAAe,GAAA;QACrB,OAAO,IAAI,CAAC,YAAY,KACtB,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,WAAA,EAAY,WAAW,EAAA,EAClG,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,EAAY,CAAA,EAC/C,IAAI,CAAC,YAAY,CAChB,CACL;;IAGK,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,IAAI;QAE1D,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC7B,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,eAAe,EAAE,CACnB;;IAIF,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AACjD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAEnD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG9B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EAAgB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC1E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAC,IAAI,CAAC,SAAS,KACd,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EACjD,EAAA,IAAI,CAAC,KAAK,CACN,CACD,CACT,EACD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EACc,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EACnD,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS,EAC5C,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAuB,CAAC,EAC9C,CAAA,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAiB,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EAAA,EAC3E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,cAAc,EAAE,EACrB,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,OAAO,EAAA,CAAI,CAC1E,CACD;;;;;;;;;;"}

package/dist/esm/pds-sortable-item.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
-import { h as handle } from './index-_4gljHh-.js';
+import { h as handle } from './index-DpOSrebJ.js';
 const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";
@@ -26,7 +26,7 @@ const PdsSortableItem = class {
         }
     }
     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 getElement(this); }
 };

package/dist/esm/pds-sortable.entry.js CHANGED Viewed

@@ -2711,7 +2711,7 @@ const PdsSortable = class {
         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 getElement(this); }
 };

package/dist/esm/pds-switch.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
 import { m as messageId, a as assignDescription } from './form-DTL_39D_.js';
-import { f as danger } from './index-_4gljHh-.js';
+import { f as danger } from './index-DpOSrebJ.js';
 import { i as inheritAriaAttributes } from './attributes-C0M1gTKv.js';
 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)}";
@@ -50,9 +50,9 @@ const PdsSwitch = class {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '1ccbfafc2087558aae2fe82c9a97c640a9c3ab66', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '9cd218cace5c432f57f03514c91c27ba32eeb97f', htmlFor: this.componentId }, h("input", Object.assign({ key: 'ce995e0706a576dd36a4f1b31ca862ae614f7e2d', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'ea20d65944a429e24b8bd0ae58dafd7ece29e9a7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '45656b263c5169d0c6b60dd19e8537e0f12df342', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '53ca563b419ce20ff4f4c81c90eee8f687e355b8', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b8e38204aea3e9e1c542d5c945f57d389d800b66', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'c91cd6368fff2cbcc6b4974505d94139fa2722c5', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'e46f5f6a8073236ec0d55b2bcc8087dc32ad5a68', htmlFor: this.componentId }, h("input", Object.assign({ key: '9a2db3481c6c5e223819066df34bc220a139df03', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'c3b138eb7b6800d01e5676e94c17988c8a52d4b2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'fcaaa0ea30c8ad155a0b43004e77549abf888a57', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '045311e393d47bebd536d8fbe220260d112ceb3f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '035488794764ffaee3275edfa9a3e9fad2d11ddb', icon: danger, size: "small" }), this.errorMessage)));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-tab.entry.js CHANGED Viewed

@@ -16,9 +16,9 @@ const PdsTab = class {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: 'f03f2a822bc603cf61483202ae9a249b8586ed02', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ccf11be9b997f174b555021cd50e07a4128c7182', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '8643374d23c0e3329f4f39f4ee5c025f95a06b30', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '469df7696312659dd0af97561fb92aad22f054c0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: 'e759f2c4d52db51f0b92bf4424bcc42d6b266e37', class: "pds-tab__content" }, h("slot", { key: '88226acf10ef132470aeefad0459dd377609b325' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: 'cdf38229fcb4548cf188e401d8949f0fdddd8160', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ffd68b6f2c2a521560495411455185d426d41446', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: 'afc723cff632012e447cecf9e4a2d7258b846d48', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: 'f7f814b9ef9ac505a741ce74abd91934116f975f', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '12fea0cfdf4a1e9acee497ff3e60cb276f6ae649', class: "pds-tab__content" }, h("slot", { key: 'bf4455e277526a453111542ce7c80a0621135f18' })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-table-body.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const PdsTableBody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c01028ed3108a0404ef3da77f1cf7a3b97a40b52', role: "rowgroup" }, h("slot", { key: 'f8491f02e732d28b01bc9cf2436c6edca3cbfc0e' })));
+        return (h(Host, { key: 'ac8d361f2d78eb929c17523843d2ca0ac53f6789', role: "rowgroup" }, h("slot", { key: '132782ab9466a9dbd4350247aae762d731e7aa71' })));
     }
 };
 PdsTableBody.style = pdsTableBodyCss;

package/dist/esm/pds-table-cell.entry.js CHANGED Viewed

@@ -41,11 +41,11 @@ const PdsTableCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '4d7c288150875806711b91436c2673fb3cb55ee6', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: '801c1c1de26cb633280f308274861e8fd3629091', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '817efadaba22b60410fffc5a41bcacc2d9656939' })));
+                : {} }, h("slot", { key: '0000fae3c9f199e3e80328afa7dd4347f429980b' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table-head-cell.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
-import { e as upSmall, d as downSmall } from './index-_4gljHh-.js';
+import { e as upSmall, d as downSmall } from './index-DpOSrebJ.js';
 const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:12px;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}";
@@ -66,11 +66,11 @@ const PdsTableHeadCell = class {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '8b7b8472a8e7f05e8f5b3c7cc3de2cd45c7f3f57', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: '2e75e9b8d1254ec21c786fd7e8304aaf38b26377', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '86266623f850b38494eb9f2cbca9baf54e082d7e' }), this.sortable && (h("pds-icon", { key: 'e1e7f058ecab154e50ae3200b75de55244b31428', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: 'f9c7aae07eb7907a18dcf1a59813a2810341f2e9' }), this.sortable && (h("pds-icon", { key: 'd24a2f2c1db5bb15216ba64bc5a7299e18c23626', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table-head.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const PdsTableHead = class {
         }
     }
     render() {
-        return (h(Host, { key: '13fc9ae7847a0fcb938b335b8b3c3aa6d243e387', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '960af222613758a88bd140a1d0aaec51114834df', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '1b3bead263f15861010c2229b50dc8bcf9a08524', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected }))), h("slot", { key: '922d1b7aa67a44c91bbc70cc4d0e07abcada73aa' })));
+        return (h(Host, { key: '38eaecd17a328791e5993d020a490f63f67cd9d5', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '438086205f3e018f597c868e98f300d28c4f3384', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '835bbe3c1f3a0fcb217f62cf862b9ea80ddff38e', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected }))), h("slot", { key: 'aa5507016e20951eab86f62680720c54de5a5a86' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table-row.entry.js CHANGED Viewed

@@ -48,7 +48,7 @@ const PdsTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '8dfdc0200b16d9db1988eb655540eeae40baaffc', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '120ea20f06308f95ea77e5c2f0664b673b367f3b', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'eaf6e41d00b5f5664d7ed99a993202c871822d0a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected }))), h("slot", { key: 'e87e93a24e87b2a8faffd47fd4e4c1f22e63916c' })));
+        return (h(Host, { key: '651138280f94fd837a77e172c7e0ae5181ce8357', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '739cd15863b52d60f9a00bffcf0d900b1ce1f545', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '2b2000bc223fa72e2be0edea25e72e4d26a98fa1', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected }))), h("slot", { key: '9d3be777c57b1ba4be066cc4ffa5496289fbdc02' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table.entry.js CHANGED Viewed

@@ -89,7 +89,7 @@ const PdsTable = class {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: '7208900f692fa61b763567f14cc505a9c0a8fd88', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '03f938219c8e0efd224b69e41db95f9f1b8b91c5' })));
+        return (h(Host, { key: '8fbd30502d23962edf8977e9d23b8e990f043e23', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '5041e5f588db255c747406c47bcfb3524cd58450' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-tabpanel.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const PdsTabpanel = class {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: 'aef4969e26b1f6e98eebdba3bcfe7bebe2d75e52', slot: "tabpanels" }, h("div", { key: 'e90ebc7253b40a7c9d5e120584e8887855d3730c', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '79d03b545cf3fc73c54d660eb46661d5d1adbe64' }))));
+        return (h(Host, { key: '021d0c1f2fd740087bdd88069ac82455b8b5ede1', slot: "tabpanels" }, h("div", { key: '036aca9a0a29ba7cfc8aa0132eab027898a661f2', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'd6b61e7b8af79204dbb5d3e421028715236a7bb1' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-tabs.entry.js CHANGED Viewed

@@ -78,7 +78,7 @@ const PdsTabs = class {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '33e22ebb5d4ae476cef5c4c95cb455b1c54fd083', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '7219b9019640a50cfae5442b36ece10aff6a5e51', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '32e2c4f0a1feec88f3693c720019b548932687ff', name: "tabs" })), h("slot", { key: '6235cfb2ef48346a96239c4a619c3ae900f6101e', name: "tabpanels" })));
+        return (h(Host, { key: 'ed163de5068114e7c7dd8314c7ed036859d0d0af', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '4b0f2bce407b2ea5c7ceb1435f4f91531334557e', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'a61fb9bd35056f87233c1fec66dda175b201b265', name: "tabs" })), h("slot", { key: 'd78cc498b17ddd84015174802e4eb18fc5053ec2', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-text.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-Uh5ntVcq.js';
-import { s as setColor } from './utils-Dw9B1JDC.js';
+import { s as setColor } from './utils-DkabwBZT.js';
 const pdsTextCss = ":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-grey-600);text-decoration-color:var(--pine-color-grey-600);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}";
@@ -21,7 +21,7 @@ const PdsText = class {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '1c2ed722c094e0c6181fac5ea3ba2a2ef6751b33', style: this.color && setColor(this.color), class: typeClasses }, h("slot", { key: 'd1ba6f29df4f8b809a2a900c23c6c77480d3e3ca' })));
+        return (h(Tag, { key: '327e3b37535dd5eb28cf3ea0430e544261e570c0', style: this.color && setColor(this.color), class: typeClasses }, h("slot", { key: '97010a619baa6fd4a45e79ab9354097e99af0ae2' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-text.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-text.entry.js","sources":["src/components/pds-text/pds-text.scss?tag=pds-text&encapsulation=shadow","src/components/pds-text/pds-text.tsx"],"sourcesContent":[":host {\n display: inline;\n}\n\n:host([decoration=\"underline-dotted\"]) > * {\n text-decoration-color: var(--pine-color-grey-600);\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: 12%;\n text-underline-offset: 0.3rem;\n text-underline-position: under;\n}\n\n:host([decoration=\"strikethrough\"])>* {\n text-decoration: line-through;\n}\n\n/* stylelint-disable /\nh1 {\n font: var(--pine-typography-heading-1);\n letter-spacing: var(--pine-letter-spacing-heading-1);\n}\n\nh2 {\n font: var(--pine-typography-heading-2);\n letter-spacing: var(--pine-letter-spacing-heading-2);\n}\n\nh3 {\n font: var(--pine-typography-heading-3);\n letter-spacing: var(--pine-letter-spacing-heading-3);\n}\n\nh4 {\n font: var(--pine-typography-heading-4);\n letter-spacing: var(--pine-letter-spacing-heading-4);\n}\n\nh5 {\n font: var(--pine-typography-heading-5);\n letter-spacing: var(--pine-letter-spacing-heading-5);\n}\n\nh6 {\n font: var(--pine-typography-heading-6);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\ncode, em, p, pre, strong {\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n}\n/ stylelint-enable /\n\ncode, pre {\n font-family: monospace;\n letter-spacing: 0;\n line-height: 1;\n}\n\nem {\n font-style: normal;\n}\n\nstrong {\n font-weight: bolder;\n}\n\n:host([truncate]) > {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([italic]) > * {\n font-style: italic;\n}\n\n// Colors/Variants/Sentiment\n\n// Variable is set in TSX\n// If color prop value isn't valid, will default to body text color\n.pds-text {\n color: var(--color, var(--pine-color-text));\n margin: var(--pine-dimension-none);\n}\n\n// Font Sizes\n$type-sizes: (\n 2xl: var(--pine-font-size-body-2xl),\n xl: var(--pine-font-size-body-xl),\n lg: var(--pine-font-size-body-lg),\n md: var(--pine-font-size-body-md),\n sm: var(--pine-font-size-body-sm),\n xs: var(--pine-font-size-body-xs),\n 2xs: var(--pine-font-size-body-2xs),\n h1: var(--pine-font-size-heading-1),\n h2: var(--pine-font-size-heading-2),\n h3: var(--pine-font-size-heading-3),\n h4: var(--pine-font-size-heading-4),\n h5: var(--pine-font-size-heading-5),\n h6: var(--pine-font-size-heading-6),\n);\n\n@mixin generate-type-sizes($type-sizes) {\n @each $key, $value in $type-sizes {\n .pds-text--size-#{$key} {\n font-size: $value;\n }\n }\n}\n\n@include generate-type-sizes($type-sizes);\n\n// Font Weights\n$type-weights: (\n extra-light: var(--pine-font-weight-extra-light),\n light: var(--pine-font-weight-light),\n regular: var(--pine-font-weight-regular),\n medium: var(--pine-font-weight-medium),\n semibold: var(--pine-font-weight-semi-bold),\n bold: var(--pine-font-weight-bold),\n);\n\n@mixin generate-type-weights($type-weights) {\n @each $key, $value in $type-weights {\n .pds-text--weight-#{$key} {\n font-weight: $value;\n }\n }\n}\n\n@include generate-type-weights($type-weights);\n\n// Gutter Sizes\n$type-gutters: (\n 2xl: var(--pine-dimension-2xl),\n xl: var(--pine-dimension-xl),\n lg: var(--pine-dimension-lg),\n md: var(--pine-dimension-md),\n sm: var(--pine-dimension-sm),\n xs: var(--pine-dimension-xs),\n 2xs: var(--pine-dimension-2xs),\n);\n\n@mixin generate-type-gutters($type-gutters) {\n @each $key, $value in $type-gutters {\n .pds-text--gutter-#{$key} {\n margin-block-end: $value;\n }\n }\n}\n\n@include generate-type-gutters($type-gutters);\n\n// Text Alignment\n$type-alignments: (\n start: start,\n center: center,\n end: end,\n justify: justify,\n);\n\n@mixin generate-type-alignments($type-alignments) {\n @each $key, $value in $type-alignments {\n .pds-text--align-#{$key} {\n text-align: $value;\n }\n }\n}\n\n@include generate-type-alignments($type-alignments);\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\n@Component({\n tag: 'pds-text',\n styleUrl: 'pds-text.scss',\n shadow: true,\n})\nexport class PdsText {\n @Element() el: HTMLPdsTextElement;\n /*\n Sets the text alignment.\n /\n @Prop() align?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Sets the text color.\n /\n @Prop() color?: string;\n\n /\n Sets the text decoration.\n /\n @Prop() decoration?:\n \| 'strikethrough'\n \| 'underline-dotted';\n\n /\n Set the bottom margin for the text.\n /\n @Prop() gutter?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs';\n\n /\n If set or `true`, the text will be italic.\n /\n @Prop() italic?: boolean;\n\n /\n Sets the font size.\n /\n @Prop() size?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6';\n\n /\n Sets the font weight.\n /\n @Prop() weight?:\n \| 'extra-light'\n \| 'light'\n \| 'regular'\n \| 'medium'\n \| 'semibold'\n \| 'bold';\n\n /\n Determines what semantic text tag to render.\n /\n @Prop() tag:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| 'p'\n \| 'code'\n \| 'pre'\n \| 'strong'\n \| 'em' = \"p\";\n\n /\n If set or `true`, the text will be truncated. Must add a `width` to the element.\n */\n @Prop() truncate?: boolean;\n\n render() {\n const Tag = this.tag;\n\n const typeClasses = `\n pds-text\n ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n `;\n\n return (\n <Tag style={this.color && setColor(this.color)} class={typeClasses}>\n <slot />\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,m+GAAm+G;;MCQz+G,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAsEE;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAWF,GAAG;AAyBb;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG;AAEpB,QAAA,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;KAClH;AAED,QAAA,QACE,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAA,EAChE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}
1	+ {"version":3,"file":"pds-text.entry.js","sources":["src/components/pds-text/pds-text.scss?tag=pds-text&encapsulation=shadow","src/components/pds-text/pds-text.tsx"],"sourcesContent":[":host {\n display: inline;\n}\n\n:host([decoration=\"underline-dotted\"]) > * {\n text-decoration-color: var(--pine-color-grey-600);\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: 12%;\n text-underline-offset: 0.3rem;\n text-underline-position: under;\n}\n\n:host([decoration=\"strikethrough\"])>* {\n text-decoration: line-through;\n}\n\n/* stylelint-disable /\nh1 {\n font: var(--pine-typography-heading-1);\n letter-spacing: var(--pine-letter-spacing-heading-1);\n}\n\nh2 {\n font: var(--pine-typography-heading-2);\n letter-spacing: var(--pine-letter-spacing-heading-2);\n}\n\nh3 {\n font: var(--pine-typography-heading-3);\n letter-spacing: var(--pine-letter-spacing-heading-3);\n}\n\nh4 {\n font: var(--pine-typography-heading-4);\n letter-spacing: var(--pine-letter-spacing-heading-4);\n}\n\nh5 {\n font: var(--pine-typography-heading-5);\n letter-spacing: var(--pine-letter-spacing-heading-5);\n}\n\nh6 {\n font: var(--pine-typography-heading-6);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\ncode, em, p, pre, strong {\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n}\n/ stylelint-enable /\n\ncode, pre {\n font-family: monospace;\n letter-spacing: 0;\n line-height: 1;\n}\n\nem {\n font-style: normal;\n}\n\nstrong {\n font-weight: bolder;\n}\n\n:host([truncate]) > {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([italic]) > * {\n font-style: italic;\n}\n\n// Colors/Variants/Sentiment\n\n// Variable is set in TSX\n// If color prop value isn't valid, will default to body text color\n.pds-text {\n color: var(--color, var(--pine-color-text));\n margin: var(--pine-dimension-none);\n}\n\n// Font Sizes\n$type-sizes: (\n 2xl: var(--pine-font-size-body-2xl),\n xl: var(--pine-font-size-body-xl),\n lg: var(--pine-font-size-body-lg),\n md: var(--pine-font-size-body-md),\n sm: var(--pine-font-size-body-sm),\n xs: var(--pine-font-size-body-xs),\n 2xs: var(--pine-font-size-body-2xs),\n h1: var(--pine-font-size-heading-1),\n h2: var(--pine-font-size-heading-2),\n h3: var(--pine-font-size-heading-3),\n h4: var(--pine-font-size-heading-4),\n h5: var(--pine-font-size-heading-5),\n h6: var(--pine-font-size-heading-6),\n);\n\n@mixin generate-type-sizes($type-sizes) {\n @each $key, $value in $type-sizes {\n .pds-text--size-#{$key} {\n font-size: $value;\n }\n }\n}\n\n@include generate-type-sizes($type-sizes);\n\n// Font Weights\n$type-weights: (\n extra-light: var(--pine-font-weight-extra-light),\n light: var(--pine-font-weight-light),\n regular: var(--pine-font-weight-regular),\n medium: var(--pine-font-weight-medium),\n semibold: var(--pine-font-weight-semi-bold),\n bold: var(--pine-font-weight-bold),\n);\n\n@mixin generate-type-weights($type-weights) {\n @each $key, $value in $type-weights {\n .pds-text--weight-#{$key} {\n font-weight: $value;\n }\n }\n}\n\n@include generate-type-weights($type-weights);\n\n// Gutter Sizes\n$type-gutters: (\n 2xl: var(--pine-dimension-2xl),\n xl: var(--pine-dimension-xl),\n lg: var(--pine-dimension-lg),\n md: var(--pine-dimension-md),\n sm: var(--pine-dimension-sm),\n xs: var(--pine-dimension-xs),\n 2xs: var(--pine-dimension-2xs),\n);\n\n@mixin generate-type-gutters($type-gutters) {\n @each $key, $value in $type-gutters {\n .pds-text--gutter-#{$key} {\n margin-block-end: $value;\n }\n }\n}\n\n@include generate-type-gutters($type-gutters);\n\n// Text Alignment\n$type-alignments: (\n start: start,\n center: center,\n end: end,\n justify: justify,\n);\n\n@mixin generate-type-alignments($type-alignments) {\n @each $key, $value in $type-alignments {\n .pds-text--align-#{$key} {\n text-align: $value;\n }\n }\n}\n\n@include generate-type-alignments($type-alignments);\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\n@Component({\n tag: 'pds-text',\n styleUrl: 'pds-text.scss',\n shadow: true,\n})\nexport class PdsText {\n @Element() el: HTMLPdsTextElement;\n /*\n Sets the text alignment.\n /\n @Prop() align?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Sets the text color.\n /\n @Prop() color?: string;\n\n /\n Sets the text decoration.\n /\n @Prop() decoration?:\n \| 'strikethrough'\n \| 'underline-dotted';\n\n /\n Set the bottom margin for the text.\n /\n @Prop() gutter?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs';\n\n /\n If set or `true`, the text will be italic.\n /\n @Prop() italic?: boolean;\n\n /\n Sets the font size.\n /\n @Prop() size?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6';\n\n /\n Sets the font weight.\n /\n @Prop() weight?:\n \| 'extra-light'\n \| 'light'\n \| 'regular'\n \| 'medium'\n \| 'semibold'\n \| 'bold';\n\n /\n Determines what semantic text tag to render.\n /\n @Prop() tag:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| 'p'\n \| 'code'\n \| 'pre'\n \| 'strong'\n \| 'em' = \"p\";\n\n /\n If set or `true`, the text will be truncated. Must add a `width` to the element.\n */\n @Prop({ reflect: true }) truncate?: boolean;\n\n render() {\n const Tag = this.tag;\n\n const typeClasses = `\n pds-text\n ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n `;\n\n return (\n <Tag style={this.color && setColor(this.color)} class={typeClasses}>\n <slot />\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,m+GAAm+G;;MCQz+G,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAsEE;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAWF,GAAG;AAyBb;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG;AAEpB,QAAA,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;KAClH;AAED,QAAA,QACE,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAA,EAChE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}