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

@pine-ds/core 3.3.0 → 3.4.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 (683) hide show

package/dist/pine-core/pds-box.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-box.entry.esm.js","sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-100);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n\n// Align Self helpers\n.pds-align-self-start {\n align-self: start;\n}\n\n.pds-align-self-center {\n align-self: center;\n}\n\n.pds-align-self-end {\n align-self: end;\n}\n\n.pds-align-self-baseline {\n align-self: baseline;\n}\n\n.pds-align-self-stretch {\n align-self: stretch;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /\n Defines how items within the box are aligned.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue start\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink`;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-box.entry.esm.js","sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as ;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n\n// Align Self helpers\n.pds-align-self-start {\n align-self: start;\n}\n\n.pds-align-self-center {\n align-self: center;\n}\n\n.pds-align-self-end {\n align-self: end;\n}\n\n.pds-align-self-baseline {\n align-self: baseline;\n}\n\n.pds-align-self-stretch {\n align-self: stretch;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /*\n Defines how items within the box are aligned.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue start\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink`;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-button.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-button.entry.esm.js","sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: 40px;\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-radius: var(--pds-button-border-radius);\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/*\n @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines the button's disabled state.\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = false;\n\n /\n If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n /\n @Prop() href?: string;\n\n /\n Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n /\n @Prop() icon?: string = null;\n\n /\n When true, displays only the icon and visually hides the text (keeping it accessible).\n /\n @Prop() iconOnly? = false;\n\n /\n Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\n\n /\n Provides the button with a submittable name.\n /\n @Prop() name?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n /\n @Prop() target?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Provides button with a type.\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' \| 'secondary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' = 'primary';\n\n @Event() pdsClick: EventEmitter;\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading \|\| this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-button.entry.esm.js","sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: var(--pine-dimension-450);\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-radius: var(--pds-button-border-radius);\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n white-space: nowrap;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/*\n @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines the button's disabled state.\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = false;\n\n /\n If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n /\n @Prop() href?: string;\n\n /\n Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n /\n @Prop() icon?: string = null;\n\n /\n When true, displays only the icon and visually hides the text (keeping it accessible).\n /\n @Prop() iconOnly? = false;\n\n /\n Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\n\n /\n Provides the button with a submittable name.\n /\n @Prop() name?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n /\n @Prop() target?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Provides button with a type.\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Sets the style variant of the button.\n * @defaultValue primary\n */\n @Prop() variant: 'primary' \| 'secondary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' = 'primary';\n\n @Event() pdsClick: EventEmitter;\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading \|\| this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-checkbox.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-checkbox.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.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 align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\n border-block-end: var(--pine-border-width-none);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(90deg) translate3d(-103%, 32%, 0);\n width: 4px;\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-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\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 border: 1px solid var(--pine-color-secondary);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\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: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-grey-300);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-color-text-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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-checkbox__message {\n color: var(--pine-color-text-message);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-checkbox__message--error {\n display: flex;\n font-size: var(--pine-font-size-085);\n gap: var(--pine-dimension-050);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n private inheritedAttributes: Attributes = {};\n\n @Element() el: HTMLPdsCheckboxElement;\n\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = 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 It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__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 </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-checkbox.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.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 align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\n border-block-end: var(--pine-border-width-none);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(90deg) translate3d(-103%, 32%, 0);\n width: 4px;\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-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\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 border: 1px solid var(--pine-color-secondary);\n border-block-start: var(--pine-border-width-none);\n border-inline-start: var(--pine-border-width-none);\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\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: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-grey-300);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-color-text-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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-checkbox__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-checkbox__message--error {\n display: flex;\n font-size: var(--pine-font-size-085);\n gap: var(--pine-dimension-050);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n private inheritedAttributes: Attributes = {};\n\n @Element() el: HTMLPdsCheckboxElement;\n\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = 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 It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__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 </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-chip.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-chip.entry.esm.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",":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-150);\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$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-text-neutral),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\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-150);\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 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// large\n\n:host(.pds-chip--large) {\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--large.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 background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n color: var(--pine-color-text-neutral);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n position: relative;\n z-index: 1;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n color: var(--pine-color-text-neutral);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: 1;\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 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';\n\n/*\n @slot (default) - The chip's label text.\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.\n * @defaultValue false\n /\n @Prop() large = false;\n\n /\n Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n /\n @Prop() sentiment: 'accent' \| 'brand' \| 'danger' \| 'info' \| 'neutral' \| 'success' \| 'warning' = '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: 'text' \| 'tag' \| 'dropdown' = 'text';\n\n /\n Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\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 // Icon size based on large prop\n return this.large ? '14px' : '12px';\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\">\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 render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-chip.entry.esm.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-150);\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$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-text-neutral),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\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-150);\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 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// large\n\n:host(.pds-chip--large) {\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--large.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 background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n color: var(--pine-color-text-neutral);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n position: relative;\n z-index: 1;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n color: var(--pine-color-text-neutral);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: 1;\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 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';\n\n/*\n @slot (default) - The chip's label text.\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.\n * @defaultValue false\n /\n @Prop() large = false;\n\n /\n Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n /\n @Prop() sentiment: 'accent' \| 'brand' \| 'danger' \| 'info' \| 'neutral' \| 'success' \| 'warning' = '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: 'text' \| 'tag' \| 'dropdown' = 'text';\n\n /\n Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\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 // Icon size based on large prop\n return this.large ? '14px' : '12px';\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\">\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 render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}