@pine-ds/core 0.2.3 → 1.0.0

package/dist/esm/pds-chip.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5e54ea50.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6f0bb1b9.js';
+import { d as downSmall, r as remove } from './index-c6934caf.js';
 
-const pdsChipCss = ":host{--background-danger:var(--pine-color-red-100);--background-danger-dot:var(--pine-color-red-300);--background-danger-interactive:var(--pine-color-red-200);--background-neutral:var(--pine-color-neutral-grey-300);--background-neutral-dot:var(--pine-color-neutral-charcoal-100);--background-neutral-interactive:var(--pine-color-neutral-grey-400);--background-info:var(--pine-color-primary-100);--background-info-dot:var(--pine-color-primary-300);--background-info-interactive:var(--pine-color-primary-200);--background-accent:var(--pine-color-purple-100);--background-accent-dot:var(--pine-color-purple-300);--background-accent-interactive:var(--pine-color-purple-200);--background-success:var(--pine-color-green-100);--background-success-dot:var(--pine-color-green-300);--background-success-interactive:var(--pine-color-green-200);--background-warning:var(--pine-color-yellow-100);--background-warning-dot:var(--pine-color-yellow-300);--background-warning-interactive:var(--pine-color-yellow-200);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--border-radius:var(--pine-border-radius-lg);--font-size:var(--pine-font-size-body-sm);--font-size-lg:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-sm);--padding-block-sm:calc(var(--pine-spacing-xxs) / 2);--padding-block:var(--pine-spacing-xxs);--padding-block-lg:6px;--padding-inline-sm:calc(var(--pine-spacing-xxs) / 2);--padding-inline:10px;--padding-inline-lg:calc(var(--pine-spacing-md) / 2);--padding-inline-xl:14px;--margin-block-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline-sm:calc(var(--pine-spacing-xs) / 2);--margin-inline-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline:4px;--margin-inline-lg:var(--pine-spacing-xs);--margin-inline-xl:calc(var(--pine-spacing-md) / 2);--dot-size:4px;--close-size:10px;--close-size-lg:24px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}:host(.pds-chip--accent){background:var(--background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--background-accent-interactive)}:host(.pds-chip--danger){background:var(--background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--background-danger-interactive)}:host(.pds-chip--info){background:var(--background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--background-info-interactive)}:host(.pds-chip--neutral){background:var(--background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--background-neutral-interactive)}:host(.pds-chip--success){background:var(--background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--background-success-interactive)}:host(.pds-chip--warning){background:var(--background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--dot-size);-webkit-margin-after:var(--margin-block-xs);margin-block-end:var(--margin-block-xs);-webkit-margin-end:var(--margin-inline-sm);margin-inline-end:var(--margin-inline-sm);width:var(--dot-size)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:1px;margin-block-end:1px;-webkit-margin-before:var(--margin-block-xs);margin-block-start:var(--margin-block-xs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--margin-inline-xs) * -1);margin-inline-end:calc(var(--margin-inline-xs) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline)}:host(.pds-chip--tag){padding-block:var(--padding-block-sm)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--close-size);-webkit-margin-end:calc(var(--margin-inline-lg) * -1);margin-inline-end:calc(var(--margin-inline-lg) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline);padding:var(--close-size);position:relative;width:var(--close-size)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-lg);padding-block:var(--padding-block-lg);padding-inline:var(--padding-inline-xl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--padding-block);padding-inline:var(--padding-inline-sm)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-lg);padding-inline:var(--padding-inline-lg)}:host(.pds-chip--large) .pds-chip__close{height:var(--close-size-lg);-webkit-margin-end:calc(var(--margin-inline-xl) * -1);margin-inline-end:calc(var(--margin-inline-xl) * -1);width:var(--close-size-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--padding-block)}";
+const pdsChipCss = ":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-300);--color-background-accent-interactive:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-300);--color-background-danger-interactive:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-300);--color-background-info-interactive:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-300);--color-background-neutral-dot:var(--pine-color-charcoal-100);--color-background-neutral-interactive:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-300);--color-background-success-interactive:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-300);--color-background-warning-interactive:var(--pine-color-yellow-200);--font-size-sm:var(--pine-font-size-087);--font-size-body:var(--pine-font-size-100);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-100);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-interactive)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-interactive)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-interactive)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-interactive)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-interactive)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-body);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-body);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";
 const PdsChipStyle0 = pdsChipCss;
 
 const PdsChip = class {
@@ -32,11 +33,11 @@ const PdsChip = class {
     }
     setChipContent() {
         const isDropdown = this.variant === 'dropdown';
-        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label, h("pds-icon", { name: "down-small", size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label));
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label, h("pds-icon", { icon: downSmall, size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label));
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '224fcbae613eb1a7a8ab5661582e06612aa3c491', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { name: "remove", size: "12px" })))));
+        return (h(Host, { key: 'a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '83d2273a0785c4516a57ed618645d937ba33f9f5', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '6ca04621d1acd134ce3352a034ea69ea7f794fbd', icon: remove, size: "12px" })))));
     }
 };
 PdsChip.style = PdsChipStyle0;

package/dist/esm/pds-chip.entry.js.map

@@ -1 +1 @@
-{"file":"pds-chip.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,kwNAAkwN,CAAC;AACtxN,sBAAe,UAAU;;MCMZ,OAAO;;;;QAwCV,qBAAgB,GAAG;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B,CAAA;;yBAhCqF,SAAS;mBAMjF,KAAK;;qBAWH,KAAK;uBAM0B,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,IAC5B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK,EAC5D,IAAI,CAAC,KAAK,EACX,gBAAU,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC/D,KAET,YAAM,KAAK,EAAC,iBAAiB,IAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK,EAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;KACpB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrB,cAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ,IAC/F,gBAAU,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":[":host {\n  --background-danger: var(--pine-color-red-100);\n  --background-danger-dot: var(--pine-color-red-300);\n  --background-danger-interactive: var(--pine-color-red-200);\n  --background-neutral: var(--pine-color-neutral-grey-300);\n  --background-neutral-dot: var(--pine-color-neutral-charcoal-100);\n  --background-neutral-interactive: var(--pine-color-neutral-grey-400);\n  --background-info: var(--pine-color-primary-100);\n  --background-info-dot: var(--pine-color-primary-300);\n  --background-info-interactive: var(--pine-color-primary-200);\n  --background-accent: var(--pine-color-purple-100);\n  --background-accent-dot: var(--pine-color-purple-300);\n  --background-accent-interactive: var(--pine-color-purple-200);\n  --background-success: var(--pine-color-green-100);\n  --background-success-dot: var(--pine-color-green-300);\n  --background-success-interactive: var(--pine-color-green-200);\n  --background-warning: var(--pine-color-yellow-100);\n  --background-warning-dot: var(--pine-color-yellow-300);\n  --background-warning-interactive: var(--pine-color-yellow-200);\n  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n  --border-radius: var(--pine-border-radius-lg);\n  --font-size: var(--pine-font-size-body-sm);\n  --font-size-lg: var(--pine-font-size-body);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-sm);\n  --padding-block-sm: calc(var(--pine-spacing-xxs) / 2);\n  --padding-block: var(--pine-spacing-xxs);\n  --padding-block-lg: 6px;\n  --padding-inline-sm: calc(var(--pine-spacing-xxs) / 2);\n  --padding-inline: 10px;\n  --padding-inline-lg: calc(var(--pine-spacing-md) / 2);\n  --padding-inline-xl: 14px;\n  --margin-block-xs: calc(var(--pine-spacing-xxs) / 2);\n  --margin-inline-sm: calc(var(--pine-spacing-xs) / 2);\n  --margin-inline-xs: calc(var(--pine-spacing-xxs) / 2);\n  --margin-inline: 4px;\n  --margin-inline-lg: var(--pine-spacing-xs);\n  --margin-inline-xl: calc(var(--pine-spacing-md) / 2);\n\n  --dot-size: 4px;\n  --close-size: 10px;\n  --close-size-lg: 24px;\n\n  align-items: center;\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--padding-block-sm);\n  padding-inline: var(--padding-inline);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--background-accent),\n  danger: var(--background-danger),\n  info: var(--background-info),\n  neutral: var(--background-neutral),\n  success: var(--background-success),\n  warning: var(--background-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--background-accent-dot),\n  danger: var(--background-danger-dot),\n  info: var(--background-info-dot),\n  neutral: var(--background-neutral-dot),\n  success: var(--background-success-dot),\n  warning: var(--background-warning-dot),\n);\n\n$pds-chip-sentiment-interactive: (\n  accent: var(--background-accent-interactive),\n  danger: var(--background-danger-interactive),\n  info: var(--background-info-interactive),\n  neutral: var(--background-neutral-interactive),\n  success: var(--background-success-interactive),\n  warning: var(--background-warning-interactive),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\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    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-interactive, $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-interactive, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: inline-block;\n  height: var(--dot-size);\n  margin-block-end:  var(--margin-block-xs);\n  margin-inline-end: var(--margin-inline-sm);\n  width: var(--dot-size);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: 0;\n\n  .pds-chip__dot {\n    margin-block-end: 1px;\n    margin-block-start: var(--margin-block-xs);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--border-radius);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--padding-block-sm);\n  padding-inline: var(--padding-inline);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--margin-inline-xs) * -1);\n    margin-inline-start: var(--margin-inline);\n  }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n  padding-block: var(--padding-block-sm);\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  height: var(--close-size);\n  margin-inline-end: calc(var(--margin-inline-lg) * -1);\n  margin-inline-start: var(--margin-inline);\n  padding: var(--close-size);\n  position: relative;\n  width: var(--close-size);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  font-size: var(--font-size-lg);\n  padding-block: var(--padding-block-lg);\n  padding-inline: var(--padding-inline-xl);\n\n  &:host(.pds-chip--dropdown) {\n    padding-block: var(--padding-block);\n    padding-inline: var(--padding-inline-sm);\n\n    .pds-chip__dot {\n      margin-block-end: 0;\n    }\n  }\n\n  .pds-chip__button {\n    font-size: var(--font-size-lg);\n    padding-inline: var(--padding-inline-lg)\n  }\n\n  .pds-chip__close {\n    height: var(--close-size-lg);\n    margin-inline-end: calc(var(--margin-inline-xl) * -1);\n    width: var(--close-size-lg);\n  }\n\n  &:host(.pds-chip--tag) {\n    padding-block: var(--padding-block);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: '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   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\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    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon name=\"down-small\" size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\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.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon name=\"remove\" size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-chip.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,0rNAA0rN,CAAC;AAC9sN,sBAAe,UAAU;;MCOZ,OAAO;;;;QAwCV,qBAAgB,GAAG;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B,CAAA;;yBAhCqF,SAAS;mBAMjF,KAAK;;qBAWH,KAAK;uBAM0B,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,IAC5B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,IAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK,EAC5D,IAAI,CAAC,KAAK,EACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,KAET,YAAM,KAAK,EAAC,iBAAiB,IAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK,EAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;KACpB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ,IAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --border-radius: var(--pine-border-radius-200);\n\n  --color-background-accent: var(--pine-color-purple-100);\n  --color-background-accent-dot: var(--pine-color-purple-300);\n  --color-background-accent-interactive: var(--pine-color-purple-200);\n  --color-background-danger: var(--pine-color-red-100);\n  --color-background-danger-dot: var(--pine-color-red-300);\n  --color-background-danger-interactive: var(--pine-color-red-200);\n  --color-background-info: var(--pine-color-blue-100);\n  --color-background-info-dot: var(--pine-color-blue-300);\n  --color-background-info-interactive: var(--pine-color-blue-200);\n  --color-background-neutral: var(--pine-color-grey-300);\n  --color-background-neutral-dot: var(--pine-color-charcoal-100);\n  --color-background-neutral-interactive: var(--pine-color-grey-400);\n  --color-background-success: var(--pine-color-green-100);\n  --color-background-success-dot: var(--pine-color-green-300);\n  --color-background-success-interactive: var(--pine-color-green-200);\n  --color-background-warning: var(--pine-color-yellow-100);\n  --color-background-warning-dot: var(--pine-color-yellow-300);\n  --color-background-warning-interactive: var(--pine-color-yellow-200);\n\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-body: var(--pine-font-size-100);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-100);\n\n  --spacing-xxs: calc(var(--pine-spacing-050) / 2);\n  --spacing-xs: var(--pine-spacing-050);\n  --spacing-sm: calc(var(--pine-spacing-150) / 2);\n  --spacing-md: var(--pine-spacing-100);\n  --spacing-lg: calc(var(--pine-spacing-250) / 2);\n  --spacing-xl: var(--pine-spacing-150);\n  --spacing-xxl: calc(var(--pine-spacing-350) / 2);\n\n  --sizing-close: 10px;\n  --sizing-close-lg: 24px;\n  --sizing-dot: 4px;\n\n  align-items: center;\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--color-background-accent),\n  danger: var(--color-background-danger),\n  info: var(--color-background-info),\n  neutral: var(--color-background-neutral),\n  success: var(--color-background-success),\n  warning: var(--color-background-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--color-background-accent-dot),\n  danger: var(--color-background-danger-dot),\n  info: var(--color-background-info-dot),\n  neutral: var(--color-background-neutral-dot),\n  success: var(--color-background-success-dot),\n  warning: var(--color-background-warning-dot),\n);\n\n$pds-chip-sentiment-interactive: (\n  accent: var(--color-background-accent-interactive),\n  danger: var(--color-background-danger-interactive),\n  info: var(--color-background-info-interactive),\n  neutral: var(--color-background-neutral-interactive),\n  success: var(--color-background-success-interactive),\n  warning: var(--color-background-warning-interactive),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\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    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-interactive, $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-interactive, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: inline-block;\n  height: var(--sizing-dot);\n  margin-block-end: var(--spacing-xxs);\n  margin-inline-end: var(--spacing-xs);\n  width: var(--sizing-dot);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: 0;\n\n  .pds-chip__dot {\n    margin-block-end: calc(var(--spacing-xxs) / 4);\n    margin-block-start: var(--spacing-xxs);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--border-radius);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--spacing-xxs) * -1);\n    margin-inline-start: var(--spacing-xs);\n  }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n  padding-block: var(--spacing-xxs);\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--spacing-md) * -1);\n  margin-inline-start: var(--spacing-xs);\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    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  font-size: var(--font-size-body);\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-xxl);\n\n  &:host(.pds-chip--dropdown) {\n    padding-block: var(--spacing-xs);\n    padding-inline: var(--spacing-xxs);\n\n    .pds-chip__dot {\n      margin-block-end: 0;\n    }\n  }\n\n  .pds-chip__button {\n    font-size: var(--font-size-body);\n    padding-inline: var(--spacing-xl)\n  }\n\n  .pds-chip__close {\n    height: var(--sizing-close-lg);\n    margin-inline-end: calc(var(--spacing-xl) * -1);\n    width: var(--sizing-close-lg);\n  }\n\n  &:host(.pds-chip--tag) {\n    padding-block: var(--spacing-xs);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: '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   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\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    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\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.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-copytext.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5e54ea50.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6f0bb1b9.js';
+import { a as copy } from './index-c6934caf.js';
 
-const pdsCopytextCss = ":host(.pds-copytext){--background:var(--pine-color-base-white);--background-hover:var(--pine-color-neutral-grey-200);--border:var(--pine-border-interactive);--border-hover:var(--pine-border-interactive-hover-color);--border-radius:var(--pine-border-radius-md);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-hover:var(--pine-color-neutral-charcoal-400);--font-size:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-semibold);--line-height:var(--pine-line-height-md);--spacing-sm:var(--pine-spacing-sm);--spacing-xs:var(--pine-spacing-xs);--spacing-xxs:var(--pine-spacing-xxs)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--background);border:0;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);max-width:100%;padding:var(--spacing-xxs) var(--spacing-xs)}:host(.pds-copytext) pds-button:hover{background-color:var(--background-hover);color:var(--color-hover)}:host(.pds-copytext) pds-button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-copytext) pds-button span{line-height:var(--line-height);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:0;padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border);border-radius:var(--border-radius);-webkit-margin-end:var(--spacing-sm);margin-inline-end:var(--spacing-sm);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border-color:var(--border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";
+const pdsCopytextCss = ":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-charcoal-400);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";
 const PdsCopytextStyle0 = pdsCopytextCss;
 
 const PdsCopytext = class {
@@ -9,24 +10,10 @@ const PdsCopytext = class {
         this.pdsCopyTextClick = createEvent(this, "pdsCopyTextClick", 7);
         this.copyToClipboard = async (value) => {
             try {
-                if (navigator.clipboard) {
+                if (typeof navigator.clipboard !== 'undefined') {
                     await navigator.clipboard.writeText(value);
                     this.pdsCopyTextClick.emit('Copied to clipboard');
                 }
-                else {
-                    // falback for safari
-                    const el = document.createElement('textarea');
-                    el.value = value;
-                    el.setAttribute('readonly', '');
-                    el.style.position = 'absolute';
-                    el.style.left = '-9999px';
-                    document.body.appendChild(el);
-                    el.focus();
-                    el.setSelectionRange(0, el.value.length);
-                    document.execCommand('copy');
-                    document.body.removeChild(el);
-                    this.pdsCopyTextClick.emit('Copied to clipboard');
-                }
             }
             catch (err) {
                 this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);
@@ -55,7 +42,7 @@ const PdsCopytext = class {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '650ef9a2f68e604211c98721ef61e68a44a619b2', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '3c4e3d7779e794c65115431ea93e6c321c5e8f83', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'e755703bd191e440d1b10250027c1dfcf1340cbe' }, this.value), h("pds-icon", { key: '6fc35fd7fef1a98b9f248054a2927a1b006561d0', name: "copy", size: "16px" }))));
+        return (h(Host, { key: '9960146a3ac3810bc14834a976f2e50627569dad', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '9d8c6dc9824be2483982d4362a5c8d8c4c232432', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7c093ec0ae96afdbad02adda3901be87989c9ce4' }, this.value), h("pds-icon", { key: '466f5c685e32be0067938869afee751db522d3d3', icon: copy, size: "16px" }))));
     }
 };
 PdsCopytext.style = PdsCopytextStyle0;

package/dist/esm/pds-copytext.entry.js.map

@@ -1 +1 @@
-{"file":"pds-copytext.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ygFAAygF,CAAC;AACjiF,0BAAe,cAAc;;MCMhB,WAAW;;;;QAkCd,oBAAe,GAAG,OAAO,KAAa;YAC5C,IAAI;gBACF,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;qBAAM;;oBAEL,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;oBAC9C,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;oBACjB,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;oBAChC,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;oBAC/B,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;oBAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC9B,EAAE,CAAC,KAAK,EAAE,CAAC;oBACX,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBACzC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;oBAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;aACvE;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC,CAAC;sBAvDgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IAwChB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;SAC5C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iEAAU,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAY,CAClC,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n  --background: var(--pine-color-base-white);\n  --background-hover: var(--pine-color-neutral-grey-200);\n  --border: var(--pine-border-interactive);\n  --border-hover: var(--pine-border-interactive-hover-color);\n  --border-radius: var(--pine-border-radius-md);\n  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n  --color-hover: var(--pine-color-neutral-charcoal-400);\n  --font-size: var(--pine-font-size-body);\n  --font-weight: var(--pine-font-weight-semibold);\n  --line-height: var(--pine-line-height-md);\n  --spacing-sm: var(--pine-spacing-sm);\n  --spacing-xs: var(--pine-spacing-xs);\n  --spacing-xxs: var(--pine-spacing-xxs);\n\n  pds-button {\n    align-items: center;\n    background: var(--background);\n    border: 0;\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-size: var(--font-size);\n    font-weight: var(--font-weight);\n    max-width: 100%;\n    padding: var(--spacing-xxs) var(--spacing-xs);\n\n    &:hover {\n      background-color: var(--background-hover);\n      color: var(--color-hover);\n    }\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus);\n      outline: none;\n    }\n\n    span {\n      line-height: var(--line-height);\n      margin-inline-end: var(--spacing-xs);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border: 0;\n    padding: 0;\n\n    pds-button {\n      padding: 0;\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--border);\n      border-radius: var(--border-radius);\n      margin-inline-end: var(--spacing-sm);\n      padding-block: var(--spacing-xs);\n      padding-inline: var(--spacing-sm);\n    }\n\n    :hover {\n      span {\n        border-color: var(--border-hover)\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (navigator.clipboard) {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      } else {\n        // falback for safari\n        const el = document.createElement('textarea');\n        el.value = value;\n        el.setAttribute('readonly', '');\n        el.style.position = 'absolute';\n        el.style.left = '-9999px';\n        document.body.appendChild(el);\n        el.focus();\n        el.setSelectionRange(0, el.value.length);\n        document.execCommand('copy');\n        document.body.removeChild(el);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon name=\"copy\" size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-copytext.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,8zGAA8zG,CAAC;AACt1G,0BAAe,cAAc;;MCQhB,WAAW;;;;QAkCd,oBAAe,GAAG,OAAO,KAAa;YAC5C,IAAI;gBACF,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE;oBAC9C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;aACvE;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;SAC5C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iEAAU,IAAI,EAAEA,IAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,EACP;KACH;;;;;;","names":["copyIcon"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-radius-default: var(--pine-border-radius-125);\n  --border-radius-hover: var(--pine-border-radius-0);\n\n  --border-width-default: var(--pine-border-width-none);\n\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-background-default: var(--pine-color-white);\n  --color-border-interactive-hover: var(--pine-color-grey-400);\n  --color-text-hover: var(--pine-color-charcoal-400);\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n  --font-size-default: var(--pine-font-size-100);\n  --font-weight-default: var(--pine-font-weight-semi-bold);\n\n  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n  --spacing-bordered-padding-block: var(--pine-spacing-100);\n  --spacing-bordered-padding-inline: var(--pine-spacing-200);\n  --spacing-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-050);\n  --spacing-padding-inline: var(--pine-spacing-100);\n  --spacing-padding-none: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  pds-button {\n    align-items: center;\n    background: var(--color-background-default);\n    border: var(--border-width-default);\n    border-radius: var(--border-radius-default);\n    display: inline-flex;\n    font: var(--typography-default);\n    max-width: 100%;\n    padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      border-radius: var(--border-radius-hover);\n      color: var(--color-text-hover);\n    }\n\n    span {\n      margin-inline-end: var(--spacing-margin-inline-end);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border: var(--border-width-default);\n    padding: var(--spacing-padding-none);\n\n    pds-button {\n      padding: var(--spacing-padding-none);\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--border-interactive-default);\n      border-radius: var(--border-radius-default);\n      margin-inline-end: var(--spacing-bordered-margin-inline-end);\n      padding-block: var(--spacing-bordered-padding-block);\n      padding-inline: var(--spacing-bordered-padding-inline);\n    }\n\n    :hover {\n      span {\n        border: var(--border-interactive-hover);\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-divider.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
+import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
 
-const pdsDividerCss = ":host{--background-color:var(--pine-color-neutral-grey-400);--offset-xxs:var(--pine-spacing-xxs);--offset-xs:var(--pine-spacing-xs);--offset-sm:var(--pine-spacing-sm);--offset-md:var(--pine-spacing-md);--offset-lg:var(--pine-spacing-lg);--offset-xxl:var(--pine-spacing-2xl)}.pds-divider{background:var(--background-color);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--offset-xxs) * -1);padding:0 var(--offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--offset-xxs) * -1) 0;padding:var(--offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--offset-xs) * -1);padding:0 var(--offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--offset-xs) * -1) 0;padding:var(--offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--offset-sm) * -1);padding:0 var(--offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--offset-sm) * -1) 0;padding:var(--offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--offset-md) * -1);padding:0 var(--offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--offset-md) * -1) 0;padding:var(--offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--offset-lg) * -1);padding:0 var(--offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--offset-lg) * -1) 0;padding:var(--offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--offset-xl) * -1);padding:0 var(--offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--offset-xl) * -1) 0;padding:var(--offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--offset-xxl) * -1);padding:0 var(--offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--offset-xxl) * -1) 0;padding:var(--offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";
+const pdsDividerCss = ":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) * -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";
 const PdsDividerStyle0 = pdsDividerCss;
 
 const PdsDivider = class {
@@ -22,7 +22,7 @@ const PdsDivider = class {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'd5d42d70c2417e0fc801f87f8460557bb1756443', id: this.componentId }, h("hr", { key: '49554a46b6949d09adc4794b22441a1f76eb1d13', class: this.classNames() })));
+        return (h(Host, { key: '3f2301abdcc69f48039e92ad5308ea7a27b3573f', id: this.componentId }, h("hr", { key: '763d4a15811b9298b77d0e6227e18dccdf61825e', class: this.classNames() })));
     }
 };
 PdsDivider.style = PdsDividerStyle0;

package/dist/esm/pds-divider.entry.js.map

@@ -1 +1 @@
-{"file":"pds-divider.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+2DAA+2D,CAAC;AACt4D,yBAAe,aAAa;;MCMf,UAAU;;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC1C;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAClC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":[":host {\n  --background-color: var(--pine-color-neutral-grey-400);\n  --offset-xxs: var(--pine-spacing-xxs);\n  --offset-xs: var(--pine-spacing-xs);\n  --offset-sm: var(--pine-spacing-sm);\n  --offset-md: var(--pine-spacing-md);\n  --offset-lg: var(--pine-spacing-lg);\n  --offset-xxl: var(--pine-spacing-2xl);\n}\n\n$pds-divider-offsets: (\n  xxs: var(--offset-xxs),\n  xs: var(--offset-xs),\n  sm: var(--offset-sm),\n  md: var(--offset-md),\n  lg: var(--offset-lg),\n  xl: var(--offset-xl),\n  xxl: var(--offset-xxl),\n);\n\n.pds-divider {\n  background: var(--background-color);\n  border: 0;\n  display: flex;\n  height: 1px;\n  margin: 0;\n  width: 100%;\n}\n\n.pds-divider--vertical {\n  height: 100%;\n  width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n  .pds-divider--offset-#{$offset} {\n    margin: 0 calc($value * -1);\n    padding: 0 $value;\n\n    &.pds-divider--vertical {\n      margin: calc($value * -1) 0;\n      padding: $value 0;\n    }\n  }\n}\n\n@media (max-width: 767px) {\n  .pds-divider--vertical {\n    display: none;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-divider.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,2oEAA2oE,CAAC;AAClqE,yBAAe,aAAa;;MCMf,UAAU;;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC1C;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAClC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-grey-400);\n  --spacing-offset-xxs: var(--pine-spacing-050);\n  --spacing-offset-xs: var(--pine-spacing-100);\n  --spacing-offset-sm: var(--pine-spacing-200);\n  --spacing-offset-md: var(--pine-spacing-300);\n  --spacing-offset-lg: var(--pine-spacing-450);\n  --spacing-offset-xxl: var(--pine-spacing-800);\n}\n\n$pds-divider-offsets: (\n  xxs: var(--spacing-offset-xxs),\n  xs: var(--spacing-offset-xs),\n  sm: var(--spacing-offset-sm),\n  md: var(--spacing-offset-md),\n  lg: var(--spacing-offset-lg),\n  xl: var(--spacing-offset-xl),\n  xxl: var(--spacing-offset-xxl),\n);\n\n.pds-divider {\n  background: var(--color-background-default);\n  border: 0;\n  display: flex;\n  height: 1px;\n  margin: 0;\n  width: 100%;\n}\n\n.pds-divider--vertical {\n  height: 100%;\n  width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n  .pds-divider--offset-#{$offset} {\n    margin: 0 calc($value * -1);\n    padding: 0 $value;\n\n    &.pds-divider--vertical {\n      margin: calc($value * -1) 0;\n      padding: $value 0;\n    }\n  }\n}\n\n@media (max-width: 767px) {\n  .pds-divider--vertical {\n    display: none;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5e54ea50.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
 
 let missingAssetPathWarning = false;
 /**

package/dist/esm/pds-image.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
+import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
 
-const pdsImageCss = ":host{--image-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--image-aspect-ratio);height:auto;width:100%}";
+const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);height:auto;width:100%}";
 const PdsImageStyle0 = pdsImageCss;
 
 const PdsImage = class {
@@ -16,9 +16,9 @@ const PdsImage = class {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '835f04e58f7a7f831575512bb4582fc22a563652', class: {
+        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'd002c0ae968a6a4a8d965c9bbae905da31629d7f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
 };
 PdsImage.style = PdsImageStyle0;

package/dist/esm/pds-image.entry.js.map

@@ -1 +1 @@
-{"file":"pds-image.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,yHAAyH,CAAC;AAC9I,uBAAe,WAAW;;MCMb,QAAQ;;;mBAKJ,EAAE;;;uBAiBoB,OAAO;;;;;;IA0B5C,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,IAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --image-aspect-ratio: The image's aspect ratio.\n  */\n\n  --image-aspect-ratio: auto;\n  display: inline-block;\n}\n\nimg {\n  aspect-ratio: var(--image-aspect-ratio);\n  height: auto;\n  width: 100%;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrl: 'pds-image.scss',\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string.\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certian breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-image.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,iIAAiI,CAAC;AACtJ,uBAAe,WAAW;;MCMb,QAAQ;;;mBAKJ,EAAE;;;uBAiBoB,OAAO;;;;;;IA0B5C,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,IAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --image-aspect-ratio: The image's aspect ratio.\n  */\n\n  --dimension-aspect-ratio: auto;\n  display: inline-block;\n}\n\nimg {\n  aspect-ratio: var(--dimension-aspect-ratio);\n  height: auto;\n  width: 100%;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrl: 'pds-image.scss',\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string.\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certian breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-input.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5e54ea50.js';
-import { P as PdsLabel, a as assignDescription, m as messageId } from './pds-label-39814469.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6f0bb1b9.js';
+import { P as PdsLabel, a as assignDescription, m as messageId } from './pds-label-d7e11551.js';
 
-const pdsInputCss = ":host{--background:var(--pine-color-base-white);--background-disabled:var(--pine-color-neutral-grey-100);--color:var(--pine-color-neutral-charcoal-500);--color-error:var(--pine-color-red-300);--color-placeholder:var(--pine-color-neutral-charcoal-200);--color-disabled:var(--pine-color-neutral-grey-500);--border-color-default:var(--pine-color-neutral-grey-400);--border-color-hover:var(--pine-color-neutral-grey-500);--focus-box-shadow:0 0 0 4px var(--pine-color-primary-200);--label-font-size:var(--pine-font-size-body);--label-font-weight:var(--pine-font-weight-medium);--label-line-height:var(--pine-line-height-md);--label-margin-block-end:var(--pine-spacing-xs);--field-font-size:var(--pine-font-size-body);--field-font-weight:var(--pine-font-weight-regular);--field-line-height:var(--pine-line-height-md);--field-padding-block:var(--pine-spacing-xs);--field-padding-inline:var(--pine-spacing-sm);--helper-message-font-size:var(--pine-font-size-body);--helper-message-font-weight:var(--pine-font-weight-regular);--helper-message-line-height:var(--pine-line-height-sm);--helper-message-margin-top:var(--pine-spacing-xs);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);-webkit-margin-after:var(--label-margin-block-end);margin-block-end:var(--label-margin-block-end)}input{border:1px solid var(--border-color-default);border-radius:10px;font-size:var(--field-font-size);font-weight:var(--field-font-weight);line-height:var(--field-line-height);padding:var(--field-padding-block) var(--field-padding-inline);}input:disabled{background-color:var(--background-disabled);color:var(--color-disabled);cursor:not-allowed}input:hover{border-color:var(--border-color-hover)}input:focus{-webkit-box-shadow:var(--focus-box-shadow);box-shadow:var(--focus-box-shadow);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder)}input::-moz-placeholder{color:var(--color-placeholder)}input::-moz-placeholder{color:var(--color-placeholder)}input:-ms-input-placeholder{color:var(--color-placeholder)}input:has(~.pds-input__error-message){border-color:var(--color-error)}.pds-input__error-message,.pds-input__helper-message{font-size:var(--helper-message-font-size);font-weight:var(--helper-message-font-weight);line-height:var(--helper-message-line-height);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--helper-message-margin-top);margin-block-start:var(--helper-message-margin-top)}.pds-input__error-message{color:var(--color-error)}";
+const pdsInputCss = ":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-error:0 0 0 2px var(--pine-color-red-200);--color-text-default:var(-pine-color-charcoal-500);--color-background-disabled:var(--pine-color-grey-100);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-text:var(--pine-color-grey-500);--color-placeholder-text:var(--pine-color-charcoal-200);--font-size-helper-message:var(--pine-font-size-100);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-text);cursor:not-allowed}input:hover{border-color:var(--color-border-hover)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input:-ms-input-placeholder{color:var(--color-placeholder-text)}input:has(~.pds-input__error-message){border-color:var(--color-border-error)}input:has(~.pds-input__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-input__error-message,.pds-input__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{color:var(--color-error)}";
 const PdsInputStyle0 = pdsInputCss;
 
 const PdsInput = class {
@@ -29,9 +29,9 @@ const PdsInput = class {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'bb6e9f4cb7515c3b8fbbc583ba1c9ade05d8ae90', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '960462be7a176c6b62412ce4b44af79f9b137a0c', class: "pds-input" }, h(PdsLabel, { key: 'beb8f1c8e8a1b4b692d2838abc99e427cc13c392', htmlFor: this.componentId, text: this.label }), h("input", { key: 'c69ceb5d687fb37b843e71e8aa9bad8b9f7bcaa8', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
-            h("p", { class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
+        return (h(Host, { key: 'd11ef85231a61d59752e289cb0832eb971115a84', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '722e05d546051d094ee4d870eaaefea24d241032', class: "pds-input" }, h(PdsLabel, { key: 'a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7', htmlFor: this.componentId, text: this.label }), h("input", { key: '89d5b9cfa436ca98c58da38455c6e08abce6937c', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
+            h("p", { key: '4fe86e4f98f16c25009b9011cf02e7a71c9050ef', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '50c1d4b6603868f5494c599298b23814df26782b', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
     }
 };
 PdsInput.style = PdsInputStyle0;

package/dist/esm/pds-input.entry.js.map

@@ -1 +1 @@
-{"file":"pds-input.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,2kFAA2kF,CAAC;AAChmF,uBAAe,WAAW;;MCQb,QAAQ;;;;QAoEX,iBAAY,GAAG,CAAC,EAAS;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;SACtC,CAAC;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5C,4DAAK,KAAK,EAAC,WAAW,IACpB,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACzD,8DAAO,KAAK,EAAC,kBAAkB,sBACX,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B,EACD,IAAI,CAAC,aAAa;YACjB,SACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,YAAY;YAChB,SACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n  --background: var(--pine-color-base-white);\n  --background-disabled: var(--pine-color-neutral-grey-100);\n\n  --color: var(--pine-color-neutral-charcoal-500);\n  --color-error: var(--pine-color-red-300);\n  --color-placeholder: var(--pine-color-neutral-charcoal-200);\n  --color-disabled: var(--pine-color-neutral-grey-500);\n\n  --border-color-default: var(--pine-color-neutral-grey-400);\n  --border-color-hover: var(--pine-color-neutral-grey-500);\n\n  --focus-box-shadow: 0 0 0 4px var(--pine-color-primary-200);\n\n  --label-font-size: var(--pine-font-size-body);\n  --label-font-weight: var(--pine-font-weight-medium);\n  --label-line-height: var(--pine-line-height-md);\n  --label-margin-block-end: var(--pine-spacing-xs);\n\n  --field-font-size: var(--pine-font-size-body);\n  --field-font-weight: var(--pine-font-weight-regular);\n  --field-line-height: var(--pine-line-height-md);\n  --field-padding-block: var(--pine-spacing-xs);\n  --field-padding-inline: var(--pine-spacing-sm);\n\n  --helper-message-font-size: var(--pine-font-size-body);\n  --helper-message-font-weight: var(--pine-font-weight-regular);\n  --helper-message-line-height: var(--pine-line-height-sm);\n  --helper-message-margin-top: var(--pine-spacing-xs);\n\n  display: inline;\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  font-size: var(--label-font-size);\n  font-weight: var(--label-font-weight);\n  line-height: var(--label-line-height);\n  margin-block-end: var(--label-margin-block-end);\n}\n\ninput {\n  border: 1px solid var(--border-color-default);\n  border-radius: 10px;\n  font-size: var(--field-font-size);\n  font-weight: var(--field-font-weight);\n  line-height: var(--field-line-height);\n  padding: var(--field-padding-block) var(--field-padding-inline);\n\n  &:disabled {\n    background-color: var(--background-disabled);\n    color: var(--color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    border-color: var(--border-color-hover);\n  }\n\n  &:focus {\n    box-shadow: var(--focus-box-shadow);\n    outline: none;\n  }\n\n  /* stylelint-disable */\n  &::-webkit-input-placeholder {\n    color: var(--color-placeholder);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder);\n  }\n\n  &:-ms-input-placeholder {\n    color: var(--color-placeholder);\n  }\n\n  &:has(~.pds-input__error-message) {\n    border-color: var(--color-error);\n  }\n  /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  font-size: var(--helper-message-font-size);\n  font-weight: var(--helper-message-font-weight);\n  line-height: var(--helper-message-line-height);\n  margin-block-end: 0;\n  margin-block-start: var(--helper-message-margin-top);\n}\n\n.pds-input__error-message {\n  color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrl: 'pds-input.scss',\n  shadow: true,\n})\nexport class PdsInput {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-input.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,y5FAAy5F,CAAC;AAC96F,uBAAe,WAAW;;MCQb,QAAQ;;;;QAoEX,iBAAY,GAAG,CAAC,EAAS;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;SACtC,CAAC;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5C,4DAAK,KAAK,EAAC,WAAW,IACpB,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACzD,8DAAO,KAAK,EAAC,kBAAkB,sBACX,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B,EACD,IAAI,CAAC,aAAa;YACjB,0DACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,YAAY;YAChB,0DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);\n\n  --color-text-default: var(-pine-color-charcoal-500);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-text: var(--pine-color-grey-500);\n  --color-placeholder-text: var(--pine-color-charcoal-200);\n\n  --font-size-helper-message: var(--pine-font-size-100);\n  --font-size-input-field: var(--pine-font-size-100);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-input-field: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-label: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-input-field: var(--pine-line-height-150);\n\n  --spacing-field-padding-block: var(--pine-spacing-100);\n  --spacing-input-field-padding-inline: var(--pine-spacing-200);\n  --spacing-label-margin-block-end: var(--pine-spacing-100);\n  --spacing-margin-top-helper-message: var(--pine-spacing-100);\n\n  display: inline;\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-label-margin-block-end);\n}\n\ninput {\n  border: 1px solid var(--color-border-default);\n  border-radius: 10px;\n  font-size: var(--font-size-input-field);\n  font-weight: var(--font-weight-input-field);\n  line-height: var(--line-height-input-field);\n  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-text);\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  /* stylelint-disable */\n  &::-webkit-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:-ms-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:has(~.pds-input__error-message) {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n  /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-end: 0;\n  margin-block-start: var(--spacing-margin-top-helper-message);\n}\n\n.pds-input__error-message {\n  color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrl: 'pds-input.scss',\n  shadow: true,\n})\nexport class PdsInput {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{pds-label-39814469.js → pds-label-d7e11551.js}

@@ -1,4 +1,4 @@
-import { h } from './index-5e54ea50.js';
+import { h } from './index-6f0bb1b9.js';
 
 /**
  * Create id for messaging
@@ -36,4 +36,4 @@ const PdsLabel = ({ classNames, htmlFor, text }) => (h("label", { class: classNa
 
 export { PdsLabel as P, assignDescription as a, isRequired as i, messageId as m };
 
-//# sourceMappingURL=pds-label-39814469.js.map
+//# sourceMappingURL=pds-label-d7e11551.js.map

package/dist/esm/{pds-label-39814469.js.map → pds-label-d7e11551.js.map}

@@ -1 +1 @@
-{"file":"pds-label-39814469.js","mappings":";;AAAA;;;MAGa,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB;IACvD,OAAO,GAAG,EAAE,KAAK,WAAW,UAAU,CAAC;AACzC,EAAE;AAEF;;;MAGa,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB;IACnF,IAAI,CAAC,aAAa;QAAE,OAAM;IAE1B,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;IAEvC,IAAI,OAAO;QAAE,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC;AACnB,EAAE;AAEF;;;MAGa,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS;IAC1C,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG,OAAO;IACpC,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;KAC3F;AACH;;ACVA;;;;MAIa,QAAQ,GAAoC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,MACrF,aAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAG,IAAI,CAAS;;;;","names":[],"sources":["src/utils/form.ts","src/components/_internal/pds-label/pds-label.tsx"],"sourcesContent":["/**\n * Create id for messaging\n */\nexport const messageId = (id: string, messageType: string) => {\n  return `${id}__${messageType}-message`;\n};\n\n/**\n * Assign aria-description id to relate messages with form element\n */\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n  if (!helperMessage) return\n\n  let relatedId = messageId(id, 'helper')\n\n  if (invalid) relatedId = messageId(id, 'error');\n\n  return relatedId;\n};\n\n/**\n * Updates the `invalid` prop of a form element based on it's values validity\n */\nexport const isRequired = (target, component) => {\n  if ( !target || !component ) return;\n  if (component.required === true) {\n    (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n  }\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"],"version":3}
+{"file":"pds-label-d7e11551.js","mappings":";;AAAA;;;MAGa,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB;IACvD,OAAO,GAAG,EAAE,KAAK,WAAW,UAAU,CAAC;AACzC,EAAE;AAEF;;;MAGa,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB;IACnF,IAAI,CAAC,aAAa;QAAE,OAAM;IAE1B,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;IAEvC,IAAI,OAAO;QAAE,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC;AACnB,EAAE;AAEF;;;MAGa,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS;IAC1C,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG,OAAO;IACpC,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;KAC3F;AACH;;ACVA;;;;MAIa,QAAQ,GAAoC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,MACrF,aAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAG,IAAI,CAAS;;;;","names":[],"sources":["src/utils/form.ts","src/components/_internal/pds-label/pds-label.tsx"],"sourcesContent":["/**\n * Create id for messaging\n */\nexport const messageId = (id: string, messageType: string) => {\n  return `${id}__${messageType}-message`;\n};\n\n/**\n * Assign aria-description id to relate messages with form element\n */\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n  if (!helperMessage) return\n\n  let relatedId = messageId(id, 'helper')\n\n  if (invalid) relatedId = messageId(id, 'error');\n\n  return relatedId;\n};\n\n/**\n * Updates the `invalid` prop of a form element based on it's values validity\n */\nexport const isRequired = (target, component) => {\n  if ( !target || !component ) return;\n  if (component.required === true) {\n    (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n  }\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"],"version":3}

package/dist/esm/pds-link.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-5e54ea50.js';
-import { l as launch } from './index-9835dc94.js';
+import { r as registerInstance, h } from './index-6f0bb1b9.js';
+import { l as launch } from './index-c6934caf.js';
 
-const pdsLinkCss = ":host{--border-radius:var(--pine-border-radius-sm);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-primary-200);--color:var(--pine-color-neutral-charcoal-400);--font-size:var(--pine-font-size-body);--font-size-sm:var(--pine-font-size-body-sm);--font-size-xs:var(--pine-font-size-body-xs);--font-weight:var(--pine-font-weight-medium);--margin-inline-start:var(--pine-spacing-xxs);--outline:4px solid var(--pine-color-primary-200);--svg-lg:15px;--svg-md:13px;--svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--margin-inline-start);margin-inline-start:var(--margin-inline-start)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--svg-sm);width:var(--svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--svg-md);width:var(--svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--svg-lg);width:var(--svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
+const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-charcoal-400);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-087);--font-size-xs:var(--pine-font-size-075);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
 const PdsLinkStyle0 = pdsLinkCss;
 
 const PdsLink = class {
@@ -24,8 +24,8 @@ const PdsLink = class {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: '72e9712a881a175bab71e2d9beb2d0307582bde3', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '13f8e29adcfc55e7aeb62bd5e67105ce4d21eca7' }, this.href), this.external &&
-            h("pds-icon", { icon: launch, size: this.fontSize })));
+        return (h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
+            h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: launch, size: this.fontSize })));
     }
 };
 PdsLink.style = PdsLinkStyle0;

package/dist/esm/pds-link.entry.js.map

@@ -1 +1 @@
-{"file":"pds-link.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,w2CAAw2C,CAAC;AAC53C,sBAAe,UAAU;;MCYZ,OAAO;;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QAEJ,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,IAAI,EAAC,MAAM,IAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,gBAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;","names":[],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n\n  --border-radius: var(--pine-border-radius-sm);\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-primary-200);\n  --color: var(--pine-color-neutral-charcoal-400);\n  --font-size: var(--pine-font-size-body);\n  --font-size-sm: var(--pine-font-size-body-sm);\n  --font-size-xs: var(--pine-font-size-body-xs);\n  --font-weight: var(--pine-font-weight-medium);\n  --margin-inline-start: var(--pine-spacing-xxs);\n  --outline: 4px solid var(--pine-color-primary-200);\n  --svg-lg: 15px;\n  --svg-md: 13px;\n  --svg-sm: 11px;\n\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--margin-inline-start);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--color);\n  display: inline-flex;\n  font-weight: inherit;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--font-size-xs);\n\n  pds-icon {\n    height: var(--svg-sm);\n    width: var(--svg-sm);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--font-size-sm);\n\n  pds-icon {\n    height: var(--svg-md);\n    width: var(--svg-md);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--font-size);\n\n  pds-icon {\n    height: var(--svg-lg);\n    width: var(--svg-lg);\n  }\n}\n\n.pds-link--plain {\n  font-weight: var(--font-weight);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-link.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,k8CAAk8C,CAAC;AACt9C,sBAAe,UAAU;;MCYZ,OAAO;;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QAEJ,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,IAAI,EAAC,MAAM,IAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;","names":[],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n\n  --border-outline: 4px solid var(--pine-color-blue-200);\n  --border-radius: var(--pine-border-radius-075);\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-text-default: var(--pine-color-charcoal-400);\n\n  --font-size: var(--pine-font-size-100);\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-xs: var(--pine-font-size-075);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-inline-start-margin: var(--pine-spacing-050);\n  --sizing-svg-lg: 15px;\n  --sizing-svg-md: 13px;\n  --sizing-svg-sm: 11px;\n\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-inline-start-margin);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--color-text);\n  display: inline-flex;\n  font-weight: inherit;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--font-size-xs);\n\n  pds-icon {\n    height: var(--sizing-svg-sm);\n    width: var(--sizing-svg-sm);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--font-size-sm);\n\n  pds-icon {\n    height: var(--sizing-svg-md);\n    width: var(--sizing-svg-md);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--font-size);\n\n  pds-icon {\n    height: var(--sizing-svg-lg);\n    width: var(--sizing-svg-lg);\n  }\n}\n\n.pds-link--plain {\n  font-weight: var(--font-weight);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
+import { r as registerInstance, h, H as Host } from './index-6f0bb1b9.js';
 
-const pdsProgressCss = ":host{--progress-fill-color:var(--pine-color-primary-300);--height-progress-bar:8px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}@-webkit-keyframes progressBar{0%{width:0}100%{width:100%}}@keyframes progressBar{0%{width:0}100%{width:100%}}.pds-progress{--background-progress-bar:var(--pine-color-neutral-grey-300);--border-radius:var(--pine-border-radius-xs);-ms-flex-align:center;align-items:center;background-color:var(--background-progress-bar);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--height-progress-bar);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--height-progress-bar);width:100%}progress::-webkit-progress-value{--background-color:var(--pine-color-primary-300);--border-radius:var(--pine-border-radius-xs);background-color:var(--progress-fill-color, var(--background-color));border-radius:var(--border-radius)}progress::-moz-progress-bar{--background-color:var(--pine-color-primary-300);--border-radius:var(--pine-border-radius-xs);background-color:var(--progress-fill-color, var(--background-color));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-body-sm);--line-height:var(--pine-line-height-sm);--font-weight:var(--pine-font-weight-medium);--margin-inline-start:var(--pine-spacing-md);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--margin-inline-start) / 2);margin-inline-start:calc(var(--margin-inline-start) / 2)}";
+const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-blue-300);--sizing-progress-bar-height:8px;--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{--border-radius:var(--pine-border-radius-050);--color-progress-bar-background:var(--pine-color-grey-300);-ms-flex-align:center;align-items:center;background-color:var(--color-progress-bar-background);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--sizing-progress-bar-height);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--sizing-progress-bar-height);width:100%}progress::-webkit-progress-value{--border-radius:var(--pine-border-radius-050);--color-background:var(--pine-color-blue-300);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}progress::-moz-progress-bar{--color-background:var(--pine-color-blue-300);--border-radius:var(--pine-border-radius-050);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-087);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-150);--spacing-inline-start-margin:var(--pine-spacing-300);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--spacing-inline-start-margin) / 2);margin-inline-start:calc(var(--spacing-inline-start-margin) / 2)}";
 const PdsProgressStyle0 = pdsProgressCss;
 
 const PdsProgress = class {
@@ -14,7 +14,7 @@ const PdsProgress = class {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '68d38c1c9c0b21d20df22d9c9e21102f78143df7', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2342ec7043319f3c9d6ee40b3d516523c40f8881', class: "pds-progress" }, h("label", { key: '56740d2f23e1cf0039751eac229b6c81234c45a8', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'b11e4117dae38cc8828623fbd1e25d666a5ec63c', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '5ee3e8b3a4182384a2f70632f1b6420acd27e278', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'd81206158817db4f806e3c804177614791f4d121', class: "pds-progress" }, h("label", { key: 'a308666ace23b903e256a71d6f3b65d53fbc6ed6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ded042f6761fe83c12e26f9bcbf191ff2ee66689', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'bab83ee8ac34b7caea9ab7b906a1a16b72ee29fc', class: "pds-progress__percentage" }, this.percent, "%")));
     }
 };
 PdsProgress.style = PdsProgressStyle0;

package/dist/esm/pds-progress.entry.js.map

@@ -1 +1 @@
-{"file":"pds-progress.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,u7DAAu7D,CAAC;AAC/8D,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChE,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n  --progress-fill-color: var(--pine-color-primary-300);\n  --height-progress-bar: 8px;\n\n  align-items: center;\n  display: flex;\n}\n\n@keyframes progressBar {\n  0% {\n    width: 0\n  }\n\n  100% {\n    width: 100%\n  }\n}\n\n.pds-progress {\n  --background-progress-bar: var(--pine-color-neutral-grey-300);\n  --border-radius: var(--pine-border-radius-xs);\n\n  align-items: center;\n  background-color: var(--background-progress-bar);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: row;\n  height: var(--height-progress-bar);\n  position: relative;\n  width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n  animation: progressBar 3s ease;\n  animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n  background-color: transparent;\n  border: 0;\n  height: var(--height-progress-bar);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  --background-color: var(--pine-color-primary-300);\n  --border-radius: var(--pine-border-radius-xs);\n\n  background-color: var(--progress-fill-color, var(--background-color));\n  border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n  --background-color: var(--pine-color-primary-300);\n  --border-radius: var(--pine-border-radius-xs);\n\n  background-color: var(--progress-fill-color, var(--background-color));\n  border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pds-progress__percentage {\n  --font-size: var(--pine-font-size-body-sm);\n  --line-height: var(--pine-line-height-sm);\n  --font-weight: var(--pine-font-weight-medium);\n  --margin-inline-start: var(--pine-spacing-md);\n\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  margin-inline-start: calc(var(--margin-inline-start) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = 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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pds-color-primary)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--progress-fill-color': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-progress.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,gmEAAgmE,CAAC;AACxnE,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChE,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":[],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n  --color-progress-fill: var(--pine-color-blue-300);\n  --sizing-progress-bar-height: 8px;\n  --sizing-progress-bar-width: 100%;\n\n  align-items: center;\n  display: flex;\n  width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n  0% {\n    width: 0\n  }\n\n  100% {\n    width: var(--sizing-progress-bar-width);\n  }\n}\n\n.pds-progress {\n  --border-radius: var(--pine-border-radius-050);\n  --color-progress-bar-background: var(--pine-color-grey-300);\n\n  align-items: center;\n  background-color: var(--color-progress-bar-background);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: row;\n  height: var(--sizing-progress-bar-height);\n  position: relative;\n  width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n  animation: progressBar 3s ease;\n  animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n  background-color: transparent;\n  border: 0;\n  height: var(--sizing-progress-bar-height);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  --border-radius: var(--pine-border-radius-050);\n  --color-background: var(--pine-color-blue-300);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n  --color-background: var(--pine-color-blue-300);\n  --border-radius: var(--pine-border-radius-050);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pds-progress__percentage {\n  --font-size: var(--pine-font-size-087);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-150);\n  --spacing-inline-start-margin: var(--pine-spacing-300);\n\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = 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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}