npm - @pine-ds/core - Versions diffs - 3.24.0 → 3.24.1 - Mend

@pine-ds/core 3.24.0 → 3.24.1

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 (455) hide show

package/dist/pine-core/{p-CXhVuzyx.system.js.map → p-NOwphlXM.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-CXhVuzyx.system.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens /\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n/ stylelint-enable pine-design-system/prefer-semantic-tokens /\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n // dot colors\n .pds-chip__dot {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-dots, $sentiment);\n }\n\n .pds-chip__label, .pds-chip__button, .pds-chip__close {\n / stylelint-disable-next-line /\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n --sizing-close: var(--pine-dimension-100);\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n\n .pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-sm-medium);\n letter-spacing: var(--pine-letter-spacing);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n .pds-chip__label {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n / stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n / stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/\n @slot (default) - The chip's label text.\n * @part button\n /\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n shadow: true,\n})\nexport class PdsChip {\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n /\n @Prop() dot = false;\n\n /\n The name of the icon to display before the chip text.\n /\n @Prop() icon?: string;\n\n /\n Determines whether the chip should be displayed in a larger size. DEPRECATED.\n * @defaultValue false\n * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n /\n @Prop() large = false;\n\n /\n Sets the size of the chip.\n * @defaultValue 'md'\n /\n @Prop() size?: ChipSizeType;\n\n /\n Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n /\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /\n Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n /\n @Prop() variant: ChipVariantType = 'text';\n\n /\n URL to navigate to when the remove button is clicked.\n * When provided, renders the close button as a link instead of a button.\n * Only applies to tag variant.\n /\n @Prop() removeUrl?: string;\n\n /\n HTTP method to use for the remove action.\n * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n * Only applies when removeUrl is provided.\n /\n @Prop() removeHttpMethod?: 'get' \| 'post' \| 'put' \| 'patch' \| 'delete';\n\n /\n Specifies where to open the linked document when removeUrl is provided.\n * Only applies when removeUrl is set.\n /\n @Prop() removeTarget?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private get effectiveSize(): ChipSizeType {\n if (this.size != null) return this.size;\n if (this.large) return 'lg';\n return 'md';\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n const size = this.effectiveSize;\n if (size && size !== 'md') {\n classNames.push('pds-chip--' + size);\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n switch (this.effectiveSize) {\n case 'sm': return '10px';\n case 'lg': return '14px';\n default: return '12px';\n }\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\" part=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n private renderCloseButton() {\n const CloseElement = this.removeUrl ? 'a' : 'button';\n\n const closeAttributes = () => {\n if (this.removeUrl) {\n // Link attributes\n const linkAttrs: any = {\n class: 'pds-chip__close',\n href: this.removeUrl,\n 'aria-label': 'Remove',\n };\n\n // Add target if specified\n if (this.removeTarget) {\n linkAttrs.target = this.removeTarget;\n }\n\n // Add HTTP method attributes if specified\n if (this.removeHttpMethod) {\n linkAttrs['data-method'] = this.removeHttpMethod;\n linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n }\n\n // Build rel attribute by collecting all required values\n const relValues = [];\n\n // Add noopener noreferrer if target is _blank\n if (this.removeTarget === '_blank') {\n relValues.push('noopener', 'noreferrer');\n }\n\n // Add nofollow for non-GET methods (best practice)\n if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n relValues.push('nofollow');\n }\n\n // Set rel attribute if we have any values\n if (relValues.length > 0) {\n linkAttrs.rel = relValues.join(' ');\n }\n\n return linkAttrs;\n }\n\n // Button attributes\n return {\n class: 'pds-chip__close',\n type: 'button',\n 'aria-label': 'Remove',\n };\n };\n\n return (\n <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </CloseElement>\n );\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-NOwphlXM.system.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens /\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n/ stylelint-enable pine-design-system/prefer-semantic-tokens /\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n // dot colors\n .pds-chip__dot {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-dots, $sentiment);\n }\n\n .pds-chip__label, .pds-chip__button, .pds-chip__close {\n / stylelint-disable-next-line /\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n / stylelint-disable-next-line /\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n --sizing-close: var(--pine-dimension-100);\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n\n .pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-sm-medium);\n letter-spacing: var(--pine-letter-spacing);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n .pds-chip__label {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n / stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n / stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/\n @slot (default) - The chip's label text.\n * @part button\n /\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n shadow: true,\n})\nexport class PdsChip {\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n /\n @Prop() dot = false;\n\n /\n The name of the icon to display before the chip text.\n /\n @Prop() icon?: string;\n\n /\n Determines whether the chip should be displayed in a larger size. DEPRECATED.\n * @defaultValue false\n * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n /\n @Prop() large = false;\n\n /\n Sets the size of the chip.\n * @defaultValue 'md'\n /\n @Prop() size?: ChipSizeType;\n\n /\n Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n /\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /\n Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n /\n @Prop() variant: ChipVariantType = 'text';\n\n /\n URL to navigate to when the remove button is clicked.\n * When provided, renders the close button as a link instead of a button.\n * Only applies to tag variant.\n /\n @Prop() removeUrl?: string;\n\n /\n HTTP method to use for the remove action.\n * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n * Only applies when removeUrl is provided.\n /\n @Prop() removeHttpMethod?: 'get' \| 'post' \| 'put' \| 'patch' \| 'delete';\n\n /\n Specifies where to open the linked document when removeUrl is provided.\n * Only applies when removeUrl is set.\n /\n @Prop() removeTarget?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private get effectiveSize(): ChipSizeType {\n if (this.size != null) return this.size;\n if (this.large) return 'lg';\n return 'md';\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n const size = this.effectiveSize;\n if (size && size !== 'md') {\n classNames.push('pds-chip--' + size);\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n switch (this.effectiveSize) {\n case 'sm': return '10px';\n case 'lg': return '14px';\n default: return '12px';\n }\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\" part=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n private renderCloseButton() {\n const CloseElement = this.removeUrl ? 'a' : 'button';\n\n const closeAttributes = () => {\n if (this.removeUrl) {\n // Link attributes\n const linkAttrs: any = {\n class: 'pds-chip__close',\n href: this.removeUrl,\n 'aria-label': 'Remove',\n };\n\n // Add target if specified\n if (this.removeTarget) {\n linkAttrs.target = this.removeTarget;\n }\n\n // Add HTTP method attributes if specified\n if (this.removeHttpMethod) {\n linkAttrs['data-method'] = this.removeHttpMethod;\n linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n }\n\n // Build rel attribute by collecting all required values\n const relValues = [];\n\n // Add noopener noreferrer if target is _blank\n if (this.removeTarget === '_blank') {\n relValues.push('noopener', 'noreferrer');\n }\n\n // Add nofollow for non-GET methods (best practice)\n if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n relValues.push('nofollow');\n }\n\n // Set rel attribute if we have any values\n if (relValues.length > 0) {\n linkAttrs.rel = relValues.join(' ');\n }\n\n return linkAttrs;\n }\n\n // Button attributes\n return {\n class: 'pds-chip__close',\n type: 'button',\n 'aria-label': 'Remove',\n };\n };\n\n return (\n <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </CloseElement>\n );\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/{p--XSKe449.system.js.map → p-QCoEC6bt.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p~~--XSKe449~~.system.js","sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-background-container-hover);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n\n.pds-avatar__initials {\n color: var(--pine-color-brand);\n fill: var(--pine-color-brand);\n font-size: var(--pine-font-size-085);\n font-weight: var(--pine-font-weight-semi-bold);\n height: 100%;\n text-align: center;\n width: 100%;\n\n text {\n text-anchor: middle;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/*\n @part asset-wrapper\n * @part button\n * @part image - The main image element that represents the avatar component.\n/\n@Component({\n tag: 'pds-avatar',\n styleUrls: ['pds-avatar.scss'],\n shadow: true,\n})\nexport class PdsAvatar {\n\n /\n The alt for a custom user image.\n * @defaultValue null\n /\n @Prop() alt?: string \| null = null;\n\n /\n Determines whether the badge is visible or not.\n * @defaultValue false\n /\n @Prop() badge? = false;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n /\n @Prop() dropdown? = false;\n\n /\n The src for a custom user image.\n * @defaultValue null\n /\n @Prop() image?: string \| null = null;\n\n /\n The initials to display in the avatar when no image is provided.\n * @defaultValue null\n /\n @Prop() initials?: string \| null = null;\n\n /\n Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n /\n @Prop({ reflect: true }) size?:\n \| 'xl' // 64px\n \| 'lg' // 56px\n \| 'md' // 40px\n \| 'sm' // 32px\n \| 'xs' // 24px\n \| string = 'lg';\n\n /\n Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' \| 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" part=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => {\n if (this.image) {\n return <img alt={this.alt} src={this.image} />;\n }\n\n if (this.initials) {\n return (\n <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n <text x=\"16\" y=\"20\">{this.initials}</text>\n </svg>\n );\n }\n\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n return <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>;\n };\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-QCoEC6bt.system.js","sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-background-container-hover);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n\n.pds-avatar__initials {\n color: var(--pine-color-brand);\n fill: var(--pine-color-brand);\n font-size: var(--pine-font-size-085);\n font-weight: var(--pine-font-weight-semi-bold);\n height: 100%;\n text-align: center;\n width: 100%;\n\n text {\n text-anchor: middle;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/*\n @part asset-wrapper\n * @part button\n * @part image - The main image element that represents the avatar component.\n/\n@Component({\n tag: 'pds-avatar',\n styleUrls: ['pds-avatar.scss'],\n shadow: true,\n})\nexport class PdsAvatar {\n\n /\n The alt for a custom user image.\n * @defaultValue null\n /\n @Prop() alt?: string \| null = null;\n\n /\n Determines whether the badge is visible or not.\n * @defaultValue false\n /\n @Prop() badge? = false;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n /\n @Prop() dropdown? = false;\n\n /\n The src for a custom user image.\n * @defaultValue null\n /\n @Prop() image?: string \| null = null;\n\n /\n The initials to display in the avatar when no image is provided.\n * @defaultValue null\n /\n @Prop() initials?: string \| null = null;\n\n /\n Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n /\n @Prop({ reflect: true }) size?:\n \| 'xl' // 64px\n \| 'lg' // 56px\n \| 'md' // 40px\n \| 'sm' // 32px\n \| 'xs' // 24px\n \| string = 'lg';\n\n /\n Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' \| 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" part=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => {\n if (this.image) {\n return <img alt={this.alt} src={this.image} />;\n }\n\n if (this.initials) {\n return (\n <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n <text x=\"16\" y=\"20\">{this.initials}</text>\n </svg>\n );\n }\n\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n return <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>;\n };\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/{p-Co9FFVKs.system.js.map → p-QhNaWlKc.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-Co9FFVKs.system.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 /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\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: var(--pine-z-index-modal);\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: var(--pine-z-index-priority);\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: none;\n width: 100%;\n\n &.pds-modal--scrollable {\n max-height: calc(100vh - (calc(5vh + 96px)));\n\n @supports (height: 100dvh) {\n max-height: calc(100dvh - (calc(5dvh + 96px)));\n }\n }\n\n @media (min-width: 992px) {\n margin-block-start: 6vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 6dvh;\n }\n }\n\n @media (min-width: 1200px) {\n margin-block-start: 8vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 8dvh;\n }\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 @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n\n &.pds-modal--scrollable {\n max-height: 100vh;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n }\n}\n\n.pds-modal-content {\n .pds-modal--fullscreen & {\n flex: 1;\n }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n pds-modal-content {\n border-block-end: 1px solid transparent;\n border-block-start: 1px solid transparent;\n overflow-y: auto;\n }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n pds-modal-content {\n overflow-y: visible;\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 /\n Whether the modal content should be scrollable\n * @default true\n /\n @Prop() scrollable = true;\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 // Always prevent native dialog close behavior\n e.preventDefault();\n // Only close if backdropDismiss is enabled and this is the innermost modal\n if (this.backdropDismiss && this.isInnermostModal()) {\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={{\n 'pds-modal': true,\n [`pds-modal--${this.size}`]: true,\n 'pds-modal--scrollable': this.scrollable\n }}\n part=\"modal\"\n >\n <slot></slot>\n </div>\n </dialog>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-QhNaWlKc.system.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 /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors /\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: var(--pine-z-index-modal);\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: var(--pine-z-index-priority);\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: none;\n width: 100%;\n\n &.pds-modal--scrollable {\n max-height: calc(100vh - (calc(5vh + 96px)));\n\n @supports (height: 100dvh) {\n max-height: calc(100dvh - (calc(5dvh + 96px)));\n }\n }\n\n @media (min-width: 992px) {\n margin-block-start: 6vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 6dvh;\n }\n }\n\n @media (min-width: 1200px) {\n margin-block-start: 8vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 8dvh;\n }\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 @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n\n &.pds-modal--scrollable {\n max-height: 100vh;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n }\n}\n\n.pds-modal-content {\n .pds-modal--fullscreen & {\n flex: 1;\n }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n pds-modal-content {\n border-block-end: 1px solid transparent;\n border-block-start: 1px solid transparent;\n overflow-y: auto;\n }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n pds-modal-content {\n overflow-y: visible;\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 /\n Whether the modal content should be scrollable\n * @default true\n /\n @Prop() scrollable = true;\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 // Always prevent native dialog close behavior\n e.preventDefault();\n // Only close if backdropDismiss is enabled and this is the innermost modal\n if (this.backdropDismiss && this.isInnermostModal()) {\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={{\n 'pds-modal': true,\n [`pds-modal--${this.size}`]: true,\n 'pds-modal--scrollable': this.scrollable\n }}\n part=\"modal\"\n >\n <slot></slot>\n </div>\n </dialog>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/{p-CijIWK3K.system.js.map → p-Rc2xglVQ.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-~~CijIWK3K~~.system.js","sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n /*\n @prop --dimension-aspect-ratio: The image's aspect ratio.\n /\n\n --dimension-aspect-ratio: auto;\n display: inline-block;\n}\n\nimg {\n aspect-ratio: var(--dimension-aspect-ratio);\n display: block;\n height: auto;\n max-width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-image',\n styleUrls: ['pds-image.scss'],\n shadow: true,\n})\nexport class PdsImage {\n /\n The image's alt tag. If none is provided,\n * it will default to an empty string, which is desired for\n * decorative images.\n * @defaultValue ''\n /\n @Prop() alt? = '';\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n The height of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n /\n @Prop() height?: number;\n\n /\n Indicates how the browser should load the image.\n * @defaultValue eager\n /\n @Prop() loading?: 'eager' \| 'lazy' = 'eager';\n\n /\n Determines the intended display size of an image\n * within certain breakpoints. Has no effect if `srcset`\n * is not set or value has no width descriptor.\n /\n @Prop() sizes?: string;\n\n /\n The image's source.\n /\n @Prop() src: string;\n\n /\n A set of image sources for the browser to use\n * for responsiveness.\n /\n @Prop() srcset?: string\n\n /\n The width of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n */\n @Prop() width?: number;\n\n render() {\n return (\n <Host\n class={{\n 'pds-image': true,\n }}\n id={this.componentId}\n >\n <img\n alt={this.alt}\n height={this.height}\n loading={this.loading}\n sizes={this.sizes}\n src={this.src}\n srcset={this.srcset}\n width={this.width}\n />\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,WAAW,GAAG,mJAAmJ;;YCO1J,QAAQ,wBAAA,MAAA;MALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAME;;;;;MAKG;MACK,QAAA,IAAG,CAAA,GAAA,GAAI,EAAE;MAcjB;;;MAGG;MACK,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;MA+C7C;UApBC,MAAM,GAAA;cACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;MACL,gBAAA,WAAW,EAAE,IAAI;MAClB,aAAA,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAEpB,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,CAAA,CACG;;;;;;;;;;;"}
1	+ {"version":3,"file":"p-Rc2xglVQ.system.js","sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n /*\n @prop --dimension-aspect-ratio: The image's aspect ratio.\n /\n\n --dimension-aspect-ratio: auto;\n display: inline-block;\n}\n\nimg {\n aspect-ratio: var(--dimension-aspect-ratio);\n display: block;\n height: auto;\n max-width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-image',\n styleUrls: ['pds-image.scss'],\n shadow: true,\n})\nexport class PdsImage {\n /\n The image's alt tag. If none is provided,\n * it will default to an empty string, which is desired for\n * decorative images.\n * @defaultValue ''\n /\n @Prop() alt? = '';\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n The height of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n /\n @Prop() height?: number;\n\n /\n Indicates how the browser should load the image.\n * @defaultValue eager\n /\n @Prop() loading?: 'eager' \| 'lazy' = 'eager';\n\n /\n Determines the intended display size of an image\n * within certain breakpoints. Has no effect if `srcset`\n * is not set or value has no width descriptor.\n /\n @Prop() sizes?: string;\n\n /\n The image's source.\n /\n @Prop() src: string;\n\n /\n A set of image sources for the browser to use\n * for responsiveness.\n /\n @Prop() srcset?: string\n\n /\n The width of the image in pixels. Setting this will\n * devote space in the layout to prevent layout\n * shifts when the image is loaded.\n */\n @Prop() width?: number;\n\n render() {\n return (\n <Host\n class={{\n 'pds-image': true,\n }}\n id={this.componentId}\n >\n <img\n alt={this.alt}\n height={this.height}\n loading={this.loading}\n sizes={this.sizes}\n src={this.src}\n srcset={this.srcset}\n width={this.width}\n />\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,WAAW,GAAG,mJAAmJ;;YCO1J,QAAQ,wBAAA,MAAA;MALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAME;;;;;MAKG;MACK,QAAA,IAAG,CAAA,GAAA,GAAI,EAAE;MAcjB;;;MAGG;MACK,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;MA+C7C;UApBC,MAAM,GAAA;cACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;MACL,gBAAA,WAAW,EAAE,IAAI;MAClB,aAAA,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAEpB,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,CAAA,CACG;;;;;;;;;;;"}

package/dist/pine-core/{p-eUcBQ_fh.system.js.map → p-U11kcmQt.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-~~eUcBQ_fh~~.system.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.scss?tag=pds-dropdown-menu-separator&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.tsx"],"sourcesContent":[":host {\n hr {\n border: 0;\n border-top: var(--pine-border-width-thin) solid var(--pine-color-border);\n height: 0;\n margin-block: var(--pine-dimension-xs);\n margin-inline: calc(var(--pine-dimension-xs) * -1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n tag: 'pds-dropdown-menu-separator',\n styleUrl: 'pds-dropdown-menu-separator.scss',\n shadow: true,\n})\nexport class PdsDropdownMenuSeparator implements BasePdsProps {\n /*\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n It determines whether or not the dropdown-item is disabled.\n * @defaultValue false\n */\n @Prop() disabled: boolean = false;\n\n\n render() {\n return (\n <Host id={this.componentId}>\n <hr/>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,2BAA2B,GAAG,6LAA6L;;YCQpN,wBAAwB,0CAAA,MAAA;MALrC,IAAA,WAAA,CAAA,OAAA,EAAA;;MAWE;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;MAUlC;UAPC,MAAM,GAAA;MACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA;;;;;;;;;;;"}
1	+ {"version":3,"file":"p-U11kcmQt.system.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.scss?tag=pds-dropdown-menu-separator&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.tsx"],"sourcesContent":[":host {\n hr {\n border: 0;\n border-top: var(--pine-border-width-thin) solid var(--pine-color-border);\n height: 0;\n margin-block: var(--pine-dimension-xs);\n margin-inline: calc(var(--pine-dimension-xs) * -1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n tag: 'pds-dropdown-menu-separator',\n styleUrl: 'pds-dropdown-menu-separator.scss',\n shadow: true,\n})\nexport class PdsDropdownMenuSeparator implements BasePdsProps {\n /*\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n It determines whether or not the dropdown-item is disabled.\n * @defaultValue false\n */\n @Prop() disabled: boolean = false;\n\n\n render() {\n return (\n <Host id={this.componentId}>\n <hr/>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,2BAA2B,GAAG,6LAA6L;;YCQpN,wBAAwB,0CAAA,MAAA;MALrC,IAAA,WAAA,CAAA,OAAA,EAAA;;MAWE;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;MAUlC;UAPC,MAAM,GAAA;MACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA;;;;;;;;;;;"}

package/dist/pine-core/{p-D0GkJmlY.system.js.map → p-X-_QFsqW.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-D0GkJmlY.system.js","sources":["src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":[".pds-tooltip {\n --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-sizing-arrow: 6px;\n --tooltip-sizing-arrow-offset: 14px;\n --tooltip-dimension-max-width: 320px;\n}\n\n.pds-tooltip__content {\n background-color: var(--pine-color-primary);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-shadow: var(--pine-box-shadow);\n color: var(--pine-color-text-primary);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n max-width: var(--tooltip-dimension-max-width);\n opacity: 0;\n padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-tooltip.pds-tooltip--has-html-content & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--tooltip-border-width-arrow-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: 50%;\n top: calc(var(--tooltip-sizing-arrow) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\nimport {\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\n\n/*\n @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n /\n\n@Component({\n tag: 'pds-tooltip',\n styleUrls: ['pds-tooltip.scss'],\n shadow: false,\n})\n\nexport class PdsTooltip {\n private static instanceCounter = 0;\n\n /\n Internal state: true if the tooltip was opened by user interaction (hover/focus),\n * false if opened via the `opened` prop or currently closed.\n /\n @State() private _isInteractiveOpen = false;\n\n private portalEl: HTMLElement \| null = null;\n private resolvedPlacement: PlacementType = 'right';\n private triggerEl: HTMLElement \| null = null;\n private contentDiv: HTMLElement \| null = null;\n private slotMutationObserver: MutationObserver \| null = null;\n private currentPathname: string = '';\n private pathnameCheckInterval: ReturnType<typeof setInterval> \| null = null;\n private stopAutoUpdate: (() => void) \| null = null;\n\n /\n Reference to the Host element\n /\n @Element() el: HTMLPdsTooltipElement;\n\n /\n Content for the tooltip. If HTML is required, use the content slot\n /\n @Prop() content: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether or not the tooltip has an arrow\n * @defaultValue true\n /\n @Prop() hasArrow = true;\n\n /\n Enable this option when using the content slot\n * @defaultValue false\n /\n @Prop() htmlContent = false;\n\n /\n Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n /\n @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n /\n Sets the maximum width of the tooltip content\n * @defaultValue \"352px\"\n /\n @Prop() maxWidth: string = '352px';\n\n /\n Determines whether or not the tooltip is visible\n * @defaultValue false\n /\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n\n handleOpenToggle(newValue: boolean, oldValue: boolean) {\n if (newValue === false && oldValue === true) {\n this._isInteractiveOpen = false;\n }\n }\n\n componentWillLoad() {\n this._isInteractiveOpen = false;\n this.resolvedPlacement = this.placement;\n }\n\n componentDidLoad() {\n window.addEventListener('pageshow', this.handlePageShow);\n this.currentPathname = window.location.pathname;\n this.triggerEl = this.el.querySelector('.pds-tooltip__trigger') as HTMLElement;\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n\n if (contentSlotWrapper !== null) {\n this.slotMutationObserver = new MutationObserver(() => {\n if (this.opened && this.portalEl !== null) {\n this.removePortal();\n this.createPortal();\n }\n });\n this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });\n }\n\n // no return; Stencil ignores teardown functions here\n }\n\n disconnectedCallback() {\n window.removeEventListener('pageshow', this.handlePageShow);\n if (this.slotMutationObserver !== null) {\n this.slotMutationObserver.disconnect();\n this.slotMutationObserver = null;\n }\n // Ensure global listeners/intervals are removed if still present\n if (this.portalEl !== null) {\n this.removePortal();\n }\n if (this.pathnameCheckInterval !== null) {\n clearInterval(this.pathnameCheckInterval);\n this.pathnameCheckInterval = null;\n }\n // Ensure autoUpdate is stopped if still present\n if (this.stopAutoUpdate !== null) {\n this.stopAutoUpdate();\n this.stopAutoUpdate = null;\n }\n }\n\n componentDidRender() {\n if (this.opened && this.portalEl === null) {\n this.createPortal();\n } else if (!this.opened && this.portalEl !== null) {\n this.removePortal();\n }\n\n // Update portal class when opened state changes\n if (this.portalEl !== null) {\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n\n // Update ARIA attributes to stay in sync with visual open state\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n }\n }\n\n /\n Shows the tooltip by enabling the opened property\n /\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /\n Hides the tooltip by disabling the opened property\n /\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private handleShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this._isInteractiveOpen = true;\n this.showTooltip();\n };\n\n private handlePageShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.opened = false;\n this._isInteractiveOpen = false;\n };\n\n\n private handleSpaNavigation = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private checkPathnameChange = () => {\n if (window.location.pathname !== this.currentPathname) {\n this.currentPathname = window.location.pathname;\n this.handleSpaNavigation();\n }\n };\n\n /\n Determines the most accurate HTML element to use as the anchor for positioning the tooltip.\n * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.\n * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.\n * This helps with precise alignment.\n /\n private determinePositioningAnchor(): HTMLElement \| null {\n let positioningAnchor: HTMLElement \| null = this.triggerEl;\n\n if (this.triggerEl !== null) {\n const children = this.triggerEl.childNodes;\n\n for (let i = 0; i < children.length; i++) {\n const childNode = children[i];\n\n if (childNode.nodeType === Node.ELEMENT_NODE) {\n positioningAnchor = childNode as HTMLElement;\n break; // Found the first element, use it as the anchor\n }\n }\n }\n\n // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),\n // positioningAnchor will correctly remain this.triggerEl (the span).\n return positioningAnchor;\n }\n\n /\n Centralized method to calculate and apply the tooltip's position using floating UI.\n * Uses the determined anchor element and applies computePosition with flip, offset, and shift.\n /\n private async repositionPortal() {\n const anchor = this.determinePositioningAnchor();\n\n if (anchor !== null && this.portalEl !== null) {\n try {\n const { x, y, placement: computedPlacement } = await computePosition(anchor, this.portalEl, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [offset(8), flip(), shift({ padding: 5 })],\n });\n\n this.resolvedPlacement = computedPlacement as PlacementType;\n\n Object.assign(this.portalEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed',\n });\n\n // Update CSS classes to match the resolved placement\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n } catch (error) {\n console.warn('Failed to position tooltip:', error);\n this.resolvedPlacement = this.placement; // Fallback to requested placement\n // Fallback to basic positioning if floating UI fails\n const anchorRect = anchor.getBoundingClientRect();\n this.portalEl.style.left = `${anchorRect.right + 8}px`;\n this.portalEl.style.top = `${anchorRect.top}px`;\n this.portalEl.style.position = 'fixed';\n }\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';\n\n if (this.portalEl.id === '') {\n const suffix = PdsTooltip.instanceCounter++;\n const baseId = this.componentId \|\| this.el.id \|\| 'pds-tooltip';\n this.portalEl.id = `${baseId}-portal-${suffix}`;\n }\n\n if (this.portalEl.getAttribute('id') !== this.portalEl.id) {\n this.portalEl.setAttribute('id', this.portalEl.id);\n }\n\n this.portalEl.setAttribute('role', 'tooltip');\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.portalEl.style.maxWidth = this.maxWidth;\n\n this.contentDiv = document.createElement('div');\n this.contentDiv.className = 'pds-tooltip__content';\n this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n const slottedContentContainer = contentSlotWrapper?.querySelector('[slot=\"content\"]') as HTMLElement \| null;\n let hasSlottedContent = false;\n\n if (slottedContentContainer !== null) {\n const childrenToClone = Array.from(slottedContentContainer.childNodes);\n\n if (childrenToClone.length > 0) {\n const hasMeaningfulNode = childrenToClone.some(node =>\n node.nodeType === Node.ELEMENT_NODE \|\|\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasMeaningfulNode) {\n hasSlottedContent = true;\n childrenToClone.forEach((node /, index/) => {\n if (node.nodeType === Node.ELEMENT_NODE \|\| (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')) {\n this.contentDiv.appendChild(node.cloneNode(true));\n }\n });\n }\n }\n }\n\n if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {\n this.contentDiv.textContent = this.content;\n }\n\n this.portalEl.appendChild(this.contentDiv);\n document.body.appendChild(this.portalEl);\n\n this.repositionPortal().catch(error => {\n console.warn('Failed to position tooltip on creation:', error);\n });\n\n // Use Floating UI's autoUpdate to handle scroll/resize automatically\n if (this.triggerEl && this.portalEl) {\n this.stopAutoUpdate = autoUpdate(\n this.triggerEl,\n this.portalEl,\n () => {\n this.repositionPortal().catch(error => {\n console.warn('Failed to reposition tooltip on auto update:', error);\n });\n }\n );\n }\n\n // Keep only SPA navigation listeners (not handled by autoUpdate)\n window.addEventListener('popstate', this.handleSpaNavigation, true);\n window.addEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Start pathname change detection\n this.pathnameCheckInterval = setInterval(this.checkPathnameChange, 100);\n\n // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed\n if (this.triggerEl !== null && this.portalEl.id !== '') {\n this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);\n }\n }\n\n private removePortal() {\n // Stop Floating UI's autoUpdate\n if (this.stopAutoUpdate !== null) {\n this.stopAutoUpdate();\n this.stopAutoUpdate = null;\n }\n\n // Stop pathname change detection\n if (this.pathnameCheckInterval !== null) {\n clearInterval(this.pathnameCheckInterval);\n this.pathnameCheckInterval = null;\n }\n\n if (this.portalEl !== null) {\n // Remove only SPA navigation listeners (scroll/resize handled by autoUpdate)\n window.removeEventListener('popstate', this.handleSpaNavigation, true);\n window.removeEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Safely remove portal from DOM\n try {\n if (this.portalEl.parentNode) {\n this.portalEl.parentNode.removeChild(this.portalEl);\n }\n } catch (error) {\n // Portal might have already been removed by test cleanup\n console.warn('Portal element could not be removed from DOM:', error);\n }\n\n this.portalEl = null;\n }\n\n // Remove ARIA attribute from trigger\n if (this.triggerEl !== null) {\n this.triggerEl.removeAttribute('aria-describedby');\n }\n this.contentDiv = null;\n }\n\n render() {\n const hostId = this.componentId \|\| undefined;\n\n return (\n <Host id={hostId} class={{ 'pds-tooltip--is-open': this.opened }}>\n <span\n class=\"pds-tooltip__trigger\"\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n / focusin/out bubble; ensure keyboard users see tooltips */\n onFocusin={this.handleShow as any}\n onFocusout={this.handleHide as any}\n ref={el => this.triggerEl = el}\n >\n <slot />\n </span>\n <div class=\"pds-tooltip__content-slot-wrapper\" hidden>\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-X-_QFsqW.system.js","sources":["src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":[".pds-tooltip {\n --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;\n --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);\n --tooltip-sizing-arrow: 6px;\n --tooltip-sizing-arrow-offset: 14px;\n --tooltip-dimension-max-width: 320px;\n}\n\n.pds-tooltip__content {\n background-color: var(--pine-color-primary);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-shadow: var(--pine-box-shadow);\n color: var(--pine-color-text-primary);\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n max-width: var(--tooltip-dimension-max-width);\n opacity: 0;\n padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);\n visibility: hidden;\n width: max-content;\n\n .pds-tooltip--is-open & {\n // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n opacity: 1;\n visibility: visible;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-tooltip.pds-tooltip--has-html-content & {\n width: auto;\n }\n\n &::after {\n border-color: transparent;\n border-right-color: transparent;\n border-style: solid;\n border-width: var(--tooltip-border-width-arrow-left);\n content: '';\n height: 0;\n position: absolute;\n width: 0;\n\n .pds-tooltip--right & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--right-end & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--right-start & {\n border-inline-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-left);\n left: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--top & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: 50%;\n top: initial;\n transform: translateX(-50%);\n }\n\n .pds-tooltip--top-start & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--top-end & {\n border-block-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-down);\n bottom: calc(var(--tooltip-sizing-arrow) * -1);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: initial;\n }\n\n .pds-tooltip--left & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .pds-tooltip--left-end & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n bottom: var(--tooltip-sizing-arrow-offset);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: initial;\n }\n\n .pds-tooltip--left-start & {\n border-inline-start-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-right);\n left: initial;\n right: calc(var(--tooltip-sizing-arrow) * -1);\n top: var(--tooltip-sizing-arrow-offset);\n }\n\n .pds-tooltip--bottom & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: 50%;\n top: calc(var(--tooltip-sizing-arrow) * -1);\n transform: translateX(-50%);\n }\n\n .pds-tooltip--bottom-end & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: initial;\n right: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--bottom-start & {\n border-block-end-color: var(--pine-color-primary);\n border-width: var(--tooltip-border-width-arrow-up);\n left: var(--tooltip-sizing-arrow-offset);\n top: calc(var(--tooltip-sizing-arrow) * -1);\n }\n\n .pds-tooltip--no-arrow & {\n border-width: 0;\n }\n }\n}\n","import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\nimport {\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\n\n/*\n @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n /\n\n@Component({\n tag: 'pds-tooltip',\n styleUrls: ['pds-tooltip.scss'],\n shadow: false,\n})\n\nexport class PdsTooltip {\n private static instanceCounter = 0;\n\n /\n Internal state: true if the tooltip was opened by user interaction (hover/focus),\n * false if opened via the `opened` prop or currently closed.\n /\n @State() private _isInteractiveOpen = false;\n\n private portalEl: HTMLElement \| null = null;\n private resolvedPlacement: PlacementType = 'right';\n private triggerEl: HTMLElement \| null = null;\n private contentDiv: HTMLElement \| null = null;\n private slotMutationObserver: MutationObserver \| null = null;\n private currentPathname: string = '';\n private pathnameCheckInterval: ReturnType<typeof setInterval> \| null = null;\n private stopAutoUpdate: (() => void) \| null = null;\n\n /\n Reference to the Host element\n /\n @Element() el: HTMLPdsTooltipElement;\n\n /\n Content for the tooltip. If HTML is required, use the content slot\n /\n @Prop() content: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether or not the tooltip has an arrow\n * @defaultValue true\n /\n @Prop() hasArrow = true;\n\n /\n Enable this option when using the content slot\n * @defaultValue false\n /\n @Prop() htmlContent = false;\n\n /\n Determines the preferred position of the tooltip\n * @defaultValue \"right\"\n /\n @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n /\n Sets the maximum width of the tooltip content\n * @defaultValue \"352px\"\n /\n @Prop() maxWidth: string = '352px';\n\n /\n Determines whether or not the tooltip is visible\n * @defaultValue false\n /\n @Prop({mutable: true, reflect: true}) opened = false;\n\n @Watch('opened')\n\n handleOpenToggle(newValue: boolean, oldValue: boolean) {\n if (newValue === false && oldValue === true) {\n this._isInteractiveOpen = false;\n }\n }\n\n componentWillLoad() {\n this._isInteractiveOpen = false;\n this.resolvedPlacement = this.placement;\n }\n\n componentDidLoad() {\n window.addEventListener('pageshow', this.handlePageShow);\n this.currentPathname = window.location.pathname;\n this.triggerEl = this.el.querySelector('.pds-tooltip__trigger') as HTMLElement;\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n\n if (contentSlotWrapper !== null) {\n this.slotMutationObserver = new MutationObserver(() => {\n if (this.opened && this.portalEl !== null) {\n this.removePortal();\n this.createPortal();\n }\n });\n this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });\n }\n\n // no return; Stencil ignores teardown functions here\n }\n\n disconnectedCallback() {\n window.removeEventListener('pageshow', this.handlePageShow);\n if (this.slotMutationObserver !== null) {\n this.slotMutationObserver.disconnect();\n this.slotMutationObserver = null;\n }\n // Ensure global listeners/intervals are removed if still present\n if (this.portalEl !== null) {\n this.removePortal();\n }\n if (this.pathnameCheckInterval !== null) {\n clearInterval(this.pathnameCheckInterval);\n this.pathnameCheckInterval = null;\n }\n // Ensure autoUpdate is stopped if still present\n if (this.stopAutoUpdate !== null) {\n this.stopAutoUpdate();\n this.stopAutoUpdate = null;\n }\n }\n\n componentDidRender() {\n if (this.opened && this.portalEl === null) {\n this.createPortal();\n } else if (!this.opened && this.portalEl !== null) {\n this.removePortal();\n }\n\n // Update portal class when opened state changes\n if (this.portalEl !== null) {\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n\n // Update ARIA attributes to stay in sync with visual open state\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n }\n }\n\n /\n Shows the tooltip by enabling the opened property\n /\n @Method()\n async showTooltip() {\n this.opened = true;\n }\n\n /\n Hides the tooltip by disabling the opened property\n /\n @Method()\n async hideTooltip() {\n this.opened = false;\n }\n\n private handleHide = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private handleShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this._isInteractiveOpen = true;\n this.showTooltip();\n };\n\n private handlePageShow = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.opened = false;\n this._isInteractiveOpen = false;\n };\n\n\n private handleSpaNavigation = () => {\n if (this.opened && !this._isInteractiveOpen) {\n return;\n }\n\n this.hideTooltip();\n this._isInteractiveOpen = false;\n };\n\n private checkPathnameChange = () => {\n if (window.location.pathname !== this.currentPathname) {\n this.currentPathname = window.location.pathname;\n this.handleSpaNavigation();\n }\n };\n\n /\n Determines the most accurate HTML element to use as the anchor for positioning the tooltip.\n * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.\n * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.\n * This helps with precise alignment.\n /\n private determinePositioningAnchor(): HTMLElement \| null {\n let positioningAnchor: HTMLElement \| null = this.triggerEl;\n\n if (this.triggerEl !== null) {\n const children = this.triggerEl.childNodes;\n\n for (let i = 0; i < children.length; i++) {\n const childNode = children[i];\n\n if (childNode.nodeType === Node.ELEMENT_NODE) {\n positioningAnchor = childNode as HTMLElement;\n break; // Found the first element, use it as the anchor\n }\n }\n }\n\n // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),\n // positioningAnchor will correctly remain this.triggerEl (the span).\n return positioningAnchor;\n }\n\n /\n Centralized method to calculate and apply the tooltip's position using floating UI.\n * Uses the determined anchor element and applies computePosition with flip, offset, and shift.\n /\n private async repositionPortal() {\n const anchor = this.determinePositioningAnchor();\n\n if (anchor !== null && this.portalEl !== null) {\n try {\n const { x, y, placement: computedPlacement } = await computePosition(anchor, this.portalEl, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [offset(8), flip(), shift({ padding: 5 })],\n });\n\n this.resolvedPlacement = computedPlacement as PlacementType;\n\n Object.assign(this.portalEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed',\n });\n\n // Update CSS classes to match the resolved placement\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n } catch (error) {\n console.warn('Failed to position tooltip:', error);\n this.resolvedPlacement = this.placement; // Fallback to requested placement\n // Fallback to basic positioning if floating UI fails\n const anchorRect = anchor.getBoundingClientRect();\n this.portalEl.style.left = `${anchorRect.right + 8}px`;\n this.portalEl.style.top = `${anchorRect.top}px`;\n this.portalEl.style.position = 'fixed';\n }\n }\n }\n\n private createPortal() {\n if (this.portalEl !== null) return;\n\n this.portalEl = document.createElement('div');\n this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;\n this.portalEl.style.position = 'fixed';\n this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';\n\n if (this.portalEl.id === '') {\n const suffix = PdsTooltip.instanceCounter++;\n const baseId = this.componentId \|\| this.el.id \|\| 'pds-tooltip';\n this.portalEl.id = `${baseId}-portal-${suffix}`;\n }\n\n if (this.portalEl.getAttribute('id') !== this.portalEl.id) {\n this.portalEl.setAttribute('id', this.portalEl.id);\n }\n\n this.portalEl.setAttribute('role', 'tooltip');\n this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n this.portalEl.style.maxWidth = this.maxWidth;\n\n this.contentDiv = document.createElement('div');\n this.contentDiv.className = 'pds-tooltip__content';\n this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');\n this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');\n\n const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');\n const slottedContentContainer = contentSlotWrapper?.querySelector('[slot=\"content\"]') as HTMLElement \| null;\n let hasSlottedContent = false;\n\n if (slottedContentContainer !== null) {\n const childrenToClone = Array.from(slottedContentContainer.childNodes);\n\n if (childrenToClone.length > 0) {\n const hasMeaningfulNode = childrenToClone.some(node =>\n node.nodeType === Node.ELEMENT_NODE \|\|\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasMeaningfulNode) {\n hasSlottedContent = true;\n childrenToClone.forEach((node /, index/) => {\n if (node.nodeType === Node.ELEMENT_NODE \|\| (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')) {\n this.contentDiv.appendChild(node.cloneNode(true));\n }\n });\n }\n }\n }\n\n if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {\n this.contentDiv.textContent = this.content;\n }\n\n this.portalEl.appendChild(this.contentDiv);\n document.body.appendChild(this.portalEl);\n\n this.repositionPortal().catch(error => {\n console.warn('Failed to position tooltip on creation:', error);\n });\n\n // Use Floating UI's autoUpdate to handle scroll/resize automatically\n if (this.triggerEl && this.portalEl) {\n this.stopAutoUpdate = autoUpdate(\n this.triggerEl,\n this.portalEl,\n () => {\n this.repositionPortal().catch(error => {\n console.warn('Failed to reposition tooltip on auto update:', error);\n });\n }\n );\n }\n\n // Keep only SPA navigation listeners (not handled by autoUpdate)\n window.addEventListener('popstate', this.handleSpaNavigation, true);\n window.addEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Start pathname change detection\n this.pathnameCheckInterval = setInterval(this.checkPathnameChange, 100);\n\n // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed\n if (this.triggerEl !== null && this.portalEl.id !== '') {\n this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);\n }\n }\n\n private removePortal() {\n // Stop Floating UI's autoUpdate\n if (this.stopAutoUpdate !== null) {\n this.stopAutoUpdate();\n this.stopAutoUpdate = null;\n }\n\n // Stop pathname change detection\n if (this.pathnameCheckInterval !== null) {\n clearInterval(this.pathnameCheckInterval);\n this.pathnameCheckInterval = null;\n }\n\n if (this.portalEl !== null) {\n // Remove only SPA navigation listeners (scroll/resize handled by autoUpdate)\n window.removeEventListener('popstate', this.handleSpaNavigation, true);\n window.removeEventListener('hashchange', this.handleSpaNavigation, true);\n\n // Safely remove portal from DOM\n try {\n if (this.portalEl.parentNode) {\n this.portalEl.parentNode.removeChild(this.portalEl);\n }\n } catch (error) {\n // Portal might have already been removed by test cleanup\n console.warn('Portal element could not be removed from DOM:', error);\n }\n\n this.portalEl = null;\n }\n\n // Remove ARIA attribute from trigger\n if (this.triggerEl !== null) {\n this.triggerEl.removeAttribute('aria-describedby');\n }\n this.contentDiv = null;\n }\n\n render() {\n const hostId = this.componentId \|\| undefined;\n\n return (\n <Host id={hostId} class={{ 'pds-tooltip--is-open': this.opened }}>\n <span\n class=\"pds-tooltip__trigger\"\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n / focusin/out bubble; ensure keyboard users see tooltips */\n onFocusin={this.handleShow as any}\n onFocusout={this.handleHide as any}\n ref={el => this.triggerEl = el}\n >\n <slot />\n </span>\n <div class=\"pds-tooltip__content-slot-wrapper\" hidden>\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/{p-CYFz3obB.system.js.map → p-YQUlAibS.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-CYFz3obB.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n // Invalid state only affects error message styling, not the radio itself\n // This allows radio-group to handle error display without red radios\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n // On small screens, ensure full width when in a row layout\n @media (max-width: 767px) {\n box-sizing: border-box;\n flex: 1 1 100%;\n max-width: 100%;\n min-width: 0;\n }\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n // Disabled state for bordered radios\n &:has(input:disabled) {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n label {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n }\n }\n\n // Invalid state for bordered radios - no red styling, only error message\n &.is-invalid {\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type /\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 &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n background: var(--pine-color-white);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n// Disabled label styling\nlabel:has(input:disabled) {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n}\n\n// Disabled message styling\n:host:has(input:disabled) .pds-radio__message {\n color: var(--pine-color-text-label-disabled);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n flex-basis: 100%; // Ensure message wraps to new line in flex container\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n // On small screens, ensure full width when in a row layout\n @media (max-width: 767px) {\n box-sizing: border-box;\n flex: 1 1 100%;\n max-width: 100%;\n min-width: 0;\n }\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.5;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n }\n\n .pds-radio__message {\n color: var(--pine-color-text-label-disabled);\n }\n }\n\n // Invalid state - no red styling, only error message\n &.is-invalid {\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n // If this radio is inside a pds-radio-group, don't emit the individual event\n // The group will handle emitting its own event\n if (this.el.closest('pds-radio-group')) {\n return;\n }\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"p-YQUlAibS.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n // Invalid state only affects error message styling, not the radio itself\n // This allows radio-group to handle error display without red radios\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n // On small screens, ensure full width when in a row layout\n @media (max-width: 767px) {\n box-sizing: border-box;\n flex: 1 1 100%;\n max-width: 100%;\n min-width: 0;\n }\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n // Disabled state for bordered radios\n &:has(input:disabled) {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n label {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n }\n }\n\n // Invalid state for bordered radios - no red styling, only error message\n &.is-invalid {\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type /\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 &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n background: var(--pine-color-white);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n// Disabled label styling\nlabel:has(input:disabled) {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n}\n\n// Disabled message styling\n:host:has(input:disabled) .pds-radio__message {\n color: var(--pine-color-text-label-disabled);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n flex-basis: 100%; // Ensure message wraps to new line in flex container\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n // On small screens, ensure full width when in a row layout\n @media (max-width: 767px) {\n box-sizing: border-box;\n flex: 1 1 100%;\n max-width: 100%;\n min-width: 0;\n }\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.5;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n color: var(--pine-color-text-label-disabled);\n cursor: not-allowed;\n }\n\n .pds-radio__message {\n color: var(--pine-color-text-label-disabled);\n }\n }\n\n // Invalid state - no red styling, only error message\n &.is-invalid {\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n // If this radio is inside a pds-radio-group, don't emit the individual event\n // The group will handle emitting its own event\n if (this.el.closest('pds-radio-group')) {\n return;\n }\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/{p-ClY6yIBF.system.js.map → p-ZfPiYr6Z.system.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"p-~~ClY6yIBF~~.system.js","sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\" part=\"body\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,eAAe,GAAG,2EAA2E;;YCOtF,YAAY,6BAAA,MAAA;;;;UAEvB,MAAM,GAAA;MACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;"}
1	+ {"version":3,"file":"p-ZfPiYr6Z.system.js","sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\" part=\"body\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,eAAe,GAAG,2EAA2E;;YCOtF,YAAY,6BAAA,MAAA;;;;UAEvB,MAAM,GAAA;MACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;"}