npm - @pine-ds/core - Versions diffs - 2.20.0-mercury.0 → 2.22.0-mercury.0 - Mend

@pine-ds/core 2.20.0-mercury.0 → 2.22.0-mercury.0

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

Files changed (442) hide show

package/dist/cjs/pds-link.cjs.entry.js CHANGED Viewed

@@ -5,8 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d4ec6246.js');
 const index$1 = require('./index-479f5bd8.js');
+const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
+const PdsLinkStyle0 = baseCss;
 const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-text-default:var(--pine-color-grey-900);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-085);--font-size-xs:var(--pine-font-size-085);--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;position:relative}.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 PdsLinkStyle1 = pdsLinkCss;
 const PdsLink = class {
     constructor(hostRef) {
@@ -28,11 +31,11 @@ const PdsLink = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, index.h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
-            index.h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: index$1.launch, size: this.fontSize })));
+        return (index.h("a", { key: '48d18c76dabdf7848cb28406ca41bcb319046f15', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, index.h("slot", { key: 'd1300abecf3a94cbeb0dd0203e0938496499750b' }, this.href), this.external &&
+            index.h("pds-icon", { key: '353ee581e0060669910e0e9220f3e85d2c46e41b', icon: index$1.launch, size: this.fontSize })));
     }
 };
-PdsLink.style = PdsLinkStyle0;
+PdsLink.style = PdsLinkStyle0 + PdsLinkStyle1;
 exports.pds_link = PdsLink;

package/dist/cjs/pds-link.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-link.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,+9CAA+9C,CAAC;AACn/C,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,QACEA,gEACE,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,IAEXA,qEAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZA,uEAAU,IAAI,EAAEC,cAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;","names":["h","launch"],"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: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-text-default: var(--pine-color-grey-900);\n\n --font-size: var(--pine-font-size-100);\n --font-size-sm: var(--pine-font-size-085);\n --font-size-xs: var(--pine-font-size-085);\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 position: relative;\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}
1	+ {"file":"pds-link.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,sBAAe,OAAO;;ACDtB,MAAM,UAAU,GAAG,+9CAA+9C,CAAC;AACn/C,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,QACEA,gEACE,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,IAEXA,qEAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZA,uEAAU,IAAI,EAAEC,cAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;","names":["h","launch"],"sources":["src/global/styles/base.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n\n --border-outline: 4px solid var(--pine-color-blue-200);\n --border-radius: var(--pine-border-radius-075);\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-text-default: var(--pine-color-grey-900);\n\n --font-size: var(--pine-font-size-100);\n --font-size-sm: var(--pine-font-size-085);\n --font-size-xs: var(--pine-font-size-085);\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 position: relative;\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 styleUrls: ['../../global/styles/base.scss', '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/cjs/pds-loader.cjs.entry.js CHANGED Viewed

@@ -4,8 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d4ec6246.js');
+const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
+const PdsLoaderStyle0 = baseCss;
 const pdsLoaderCss = ":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-spacing-100)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--color-background-spinner:var(--pine-color-blue-300);--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;block-size:var(--sizing-spinner);color:var(--color-background-spinner);inline-size:var(--sizing-spinner)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--border-radius-typing:var(--pine-border-radius-200);--border-radius-typing-dot:var(--pine-border-radius-round);--box-shadow-typing:var(--pine-box-shadow-100);--color-background-typing-default:var(--pine-color-grey-200);--color-background-typing-dot-default:var(--pine-color-grey-500);--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;--sizing-typing-dot:calc(var(--pine-spacing-150) / 2);--spacing-typing-gap:var(--pine-spacing-050);--spacing-typing-margin-block:var(--pine-spacing-0);--spacing-typing-margin-inline:auto;--spacing-typing-padding-block:15px;--spacing-typing-padding-inline:var(--pine-spacing-250);-ms-flex-align:center;align-items:center;background-color:var(--color-background-typing-default);border-radius:var(--border-radius-typing);-webkit-box-shadow:var(--box-shadow-typing);box-shadow:var(--box-shadow-typing);display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-typing-gap);margin-block:var(--spacing-typing-margin-block);margin-inline:var(--spacing-typing-margin-inline);padding-block:var(--spacing-typing-padding-block);padding-inline:var(--spacing-typing-padding-inline);position:relative}.pds-loader--typing span{background-color:var(--color-background-typing-dot-default);block-size:var(--sizing-typing-dot);border-radius:var(--border-radius-typing-dot);inline-size:var(--sizing-typing-dot);opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);font:var(--typography-label-default)}";
-const PdsLoaderStyle0 = pdsLoaderCss;
+const PdsLoaderStyle1 = pdsLoaderCss;
 const PdsLoader = class {
     constructor(hostRef) {
@@ -39,10 +42,10 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '325b4512d1455cb90d4897e91453c4ec2370ddcb', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, index.h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, index.h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, index.h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, index.h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, index.h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, index.h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, index.h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), index.h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), index.h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), index.h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '423a30358e6f662a0b80cef445c4a20db3dd36f9', name: "label" }, "Loading..."))));
+        return (index.h(index.Host, { key: 'd86c3a84f772eedb15662d0d2e22e53ec7064245', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: 'ec7cda5951617f46427729e5497c7d1b46562ae0', class: "pds-loader--spinner" }, index.h("svg", { key: '5a7bc867400981ba2190dd00836af63cd2492e80', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, index.h("defs", { key: 'ee88cb4c138868b286f017f84925d3cf8226eeb8' }, index.h("linearGradient", { key: '435c54ff00cf11654e01d3d6932e77e74fdef8ae', id: "spinner-secondHalf" }, index.h("stop", { key: '4b9b65cde42833c14285f97c7f4b4acb681db89c', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '207b3963322e1f7f54f2b7b42b328e868a9b8e78', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: 'fc877ee5738a8184227fe022534e9cdfd8e27bd1', id: "spinner-firstHalf" }, index.h("stop", { key: '3d210b400691e364e9d1214531c86003a7588d2c', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: 'e99b0c940dc876637d90c3d86ce87f35e2f82687', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'f2acd79941647de3a5c5aae6383d021d1fad7493', class: "pds-loader__spinner-path" }, index.h("path", { key: '9f1d64d00c633dc7ff0a0f2173c7f0e0c04198d6', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'd5ff2bd47100be8eee961b00102e77b3456e8236', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: 'd7cc6e2da92238c023d322f023e7e437a5d41404', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '3c893dc1ae4f39f2b5873ba46d4ae30f873d1158', class: "pds-loader--typing" }, index.h("span", { key: '8b38041018e2039fcc19ad3dbce6de3924725cc3' }), index.h("span", { key: 'b3e827a9fded83368404e8bb5c83306ff6a35979' }), index.h("span", { key: '41fedabc2db044862892ae68476756c6400a58fa' }))), index.h("div", { key: 'b4cf5add3094c4824612216b8ca7291a4e40ff08', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: 'c7b10e65a5a5350e7973a49c540907edf44c71fa', name: "label" }, "Loading..."))));
     }
 };
-PdsLoader.style = PdsLoaderStyle0;
+PdsLoader.style = PdsLoaderStyle0 + PdsLoaderStyle1;
 exports.pds_loader = PdsLoader;

package/dist/cjs/pds-loader.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-loader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,uvGAAuvG,CAAC;AAC7wG,wBAAe,YAAY;;MCUd,SAAS;;;QA2CZ,UAAK,GAAG;YACd,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC3B,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;oBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;iBACzB,CAAC;aACH;SACF,CAAC;yBA9C2B,IAAI;yBAKH,KAAK;oBAWxB,IAAI;uBAKyB,SAAS;;IAEzC,UAAU;QAChB,MAAM,KAAK,GAA8B;YACvC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;KACF;IAWD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,iBAAe,CAAC,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,SAAS,eAAY,QAAQ,IACjJ,IAAI,CAAC,OAAO,KAAK,SAAS,KACzBD,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IACzDA,qEACEA,6EAAgB,EAAE,EAAC,oBAAoB,IACrCA,mEAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/DA,mEAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,EACjBA,6EAAgB,EAAE,EAAC,mBAAmB,IACpCA,mEAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/DA,mEAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ,EAEPA,gEAAG,KAAK,EAAC,0BAA0B,IACjCA,mEAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAC5EA,mEAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAE3EA,mEAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP,EAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxBA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,oEAAa,EACbA,oEAAa,EACbA,oEAAa,CACT,CACP,EAEDA,kEAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,IAC3EA,mEAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: var(--pine-spacing-100);\n}\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n border-width: 0 ;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n --color-background-spinner: var(--pine-color-blue-300);\n --number-spinner-timing: 2s;\n --number-spinner-path-timing: 1.5s;\n\n animation: rotate var(--number-spinner-timing) linear infinite;\n block-size: var(--sizing-spinner);\n color: var(--color-background-spinner);\n inline-size: var(--sizing-spinner);\n}\n\n.pds-loader__spinner-path {\n stroke-width: 8px;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n// Typing Loader\n.pds-loader--typing {\n --border-radius-typing: var(--pine-border-radius-200);\n --border-radius-typing-dot: var(--pine-border-radius-round);\n\n --box-shadow-typing: var(--pine-box-shadow-100);\n\n --color-background-typing-default: var(--pine-color-grey-200);\n --color-background-typing-dot-default: var(--pine-color-grey-500);\n\n --number-typing-timing: 1s;\n\n --opacity-typing-dot-default: 0.4;\n --opacity-typing-dot-active: 1;\n\n --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);\n\n --spacing-typing-gap: var(--pine-spacing-050);\n --spacing-typing-margin-block: var(--pine-spacing-0);\n --spacing-typing-margin-inline: auto;\n --spacing-typing-padding-block: 15px;\n --spacing-typing-padding-inline: var(--pine-spacing-250);\n\n align-items: center;\n background-color: var(--color-background-typing-default);\n border-radius: var(--border-radius-typing);\n box-shadow: var(--box-shadow-typing);\n display: inline-flex;\n gap: var(--spacing-typing-gap);\n margin-block: var(--spacing-typing-margin-block);\n margin-inline: var(--spacing-typing-margin-inline);\n padding-block: var(--spacing-typing-padding-block);\n padding-inline: var(--spacing-typing-padding-inline);\n position: relative;\n\n span {\n background-color: var(--color-background-typing-dot-default);\n block-size: var(--sizing-typing-dot);\n border-radius: var(--border-radius-typing-dot);\n inline-size: var(--sizing-typing-dot);\n opacity: var(--opacity-typing-dot-default);\n\n @for $i from 1 through 3 {\n &:nth-of-type(#{$i}) {\n animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n }\n }\n }\n}\n\n@keyframes typing {\n 50% {\n opacity: var(--opacity-typing-dot-active);\n transform: scale(1.2);\n }\n}\n\n.pds-loader__label {\n --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/*\n @slot label - Default slot for Loader label text.\n /\n\n@Component({\n tag: 'pds-loader',\n styleUrl: 'pds-loader.scss',\n shadow: true,\n})\nexport class PdsLoader {\n /\n If false, the loader will be hidden.\n /\n @Prop() isLoading: boolean = true;\n\n /\n Determines whether the loader should display a label.\n /\n @Prop() showLabel?: boolean = false;\n\n /\n Sets the size of the spinner loader. Value can be preset or custom.\n /\n @Prop({ reflect: true }) size?:\n \| 'xs' // 24px\n \| 'sm' // 32px\n \| 'md' // 48px\n \| 'lg' // 64px\n \| 'xl' // 80px\n \| string = 'md';\n\n /\n Determines the type of loader.\n */\n @Prop() variant: 'spinner' \| 'typing' = 'spinner';\n\n private loaderSize() {\n const sizes: { [key: string]: string } = {\n xs: '24px',\n sm: '32px',\n md: '48px',\n lg: '64px',\n xl: '80px',\n };\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size;\n }\n }\n\n private style = () => {\n if (this.size !== undefined) {\n return {\n height: this.loaderSize(),\n width: this.loaderSize(),\n };\n }\n };\n\n render() {\n return (\n <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n {this.variant === 'spinner' && (\n <div class=\"pds-loader--spinner\">\n <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n <defs>\n <linearGradient id=\"spinner-secondHalf\">\n <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n <linearGradient id=\"spinner-firstHalf\">\n <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n </defs>\n\n <g class=\"pds-loader__spinner-path\">\n <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n </g>\n </svg>\n </div>\n )}\n\n {this.variant === 'typing' && (\n <div class=\"pds-loader--typing\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n )}\n\n <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n <slot name=\"label\">Loading...</slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-loader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,wBAAe,OAAO;;ACDtB,MAAM,YAAY,GAAG,uvGAAuvG,CAAC;AAC7wG,wBAAe,YAAY;;MCUd,SAAS;;;QA2CZ,UAAK,GAAG;YACd,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC3B,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;oBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;iBACzB,CAAC;aACH;SACF,CAAC;yBA9C2B,IAAI;yBAKH,KAAK;oBAWxB,IAAI;uBAKyB,SAAS;;IAEzC,UAAU;QAChB,MAAM,KAAK,GAA8B;YACvC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;KACF;IAWD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,iBAAe,CAAC,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,SAAS,eAAY,QAAQ,IACjJ,IAAI,CAAC,OAAO,KAAK,SAAS,KACzBD,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IACzDA,qEACEA,6EAAgB,EAAE,EAAC,oBAAoB,IACrCA,mEAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/DA,mEAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,EACjBA,6EAAgB,EAAE,EAAC,mBAAmB,IACpCA,mEAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/DA,mEAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ,EAEPA,gEAAG,KAAK,EAAC,0BAA0B,IACjCA,mEAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAC5EA,mEAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAE3EA,mEAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP,EAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxBA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,oEAAa,EACbA,oEAAa,EACbA,oEAAa,CACT,CACP,EAEDA,kEAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,IAC3EA,mEAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/styles/base.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: var(--pine-spacing-100);\n}\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n border-width: 0 ;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n --color-background-spinner: var(--pine-color-blue-300);\n --number-spinner-timing: 2s;\n --number-spinner-path-timing: 1.5s;\n\n animation: rotate var(--number-spinner-timing) linear infinite;\n block-size: var(--sizing-spinner);\n color: var(--color-background-spinner);\n inline-size: var(--sizing-spinner);\n}\n\n.pds-loader__spinner-path {\n stroke-width: 8px;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n// Typing Loader\n.pds-loader--typing {\n --border-radius-typing: var(--pine-border-radius-200);\n --border-radius-typing-dot: var(--pine-border-radius-round);\n\n --box-shadow-typing: var(--pine-box-shadow-100);\n\n --color-background-typing-default: var(--pine-color-grey-200);\n --color-background-typing-dot-default: var(--pine-color-grey-500);\n\n --number-typing-timing: 1s;\n\n --opacity-typing-dot-default: 0.4;\n --opacity-typing-dot-active: 1;\n\n --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);\n\n --spacing-typing-gap: var(--pine-spacing-050);\n --spacing-typing-margin-block: var(--pine-spacing-0);\n --spacing-typing-margin-inline: auto;\n --spacing-typing-padding-block: 15px;\n --spacing-typing-padding-inline: var(--pine-spacing-250);\n\n align-items: center;\n background-color: var(--color-background-typing-default);\n border-radius: var(--border-radius-typing);\n box-shadow: var(--box-shadow-typing);\n display: inline-flex;\n gap: var(--spacing-typing-gap);\n margin-block: var(--spacing-typing-margin-block);\n margin-inline: var(--spacing-typing-margin-inline);\n padding-block: var(--spacing-typing-padding-block);\n padding-inline: var(--spacing-typing-padding-inline);\n position: relative;\n\n span {\n background-color: var(--color-background-typing-dot-default);\n block-size: var(--sizing-typing-dot);\n border-radius: var(--border-radius-typing-dot);\n inline-size: var(--sizing-typing-dot);\n opacity: var(--opacity-typing-dot-default);\n\n @for $i from 1 through 3 {\n &:nth-of-type(#{$i}) {\n animation: var(--number-typing-timing) typing infinite ($i 0.3333s);\n }\n }\n }\n}\n\n@keyframes typing {\n 50% {\n opacity: var(--opacity-typing-dot-active);\n transform: scale(1.2);\n }\n}\n\n.pds-loader__label {\n --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/*\n @slot label - Default slot for Loader label text.\n /\n\n@Component({\n tag: 'pds-loader',\n styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'],\n shadow: true,\n})\nexport class PdsLoader {\n /\n If false, the loader will be hidden.\n /\n @Prop() isLoading: boolean = true;\n\n /\n Determines whether the loader should display a label.\n /\n @Prop() showLabel?: boolean = false;\n\n /\n Sets the size of the spinner loader. Value can be preset or custom.\n /\n @Prop({ reflect: true }) size?:\n \| 'xs' // 24px\n \| 'sm' // 32px\n \| 'md' // 48px\n \| 'lg' // 64px\n \| 'xl' // 80px\n \| string = 'md';\n\n /\n Determines the type of loader.\n */\n @Prop() variant: 'spinner' \| 'typing' = 'spinner';\n\n private loaderSize() {\n const sizes: { [key: string]: string } = {\n xs: '24px',\n sm: '32px',\n md: '48px',\n lg: '64px',\n xl: '80px',\n };\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size;\n }\n }\n\n private style = () => {\n if (this.size !== undefined) {\n return {\n height: this.loaderSize(),\n width: this.loaderSize(),\n };\n }\n };\n\n render() {\n return (\n <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n {this.variant === 'spinner' && (\n <div class=\"pds-loader--spinner\">\n <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n <defs>\n <linearGradient id=\"spinner-secondHalf\">\n <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n <linearGradient id=\"spinner-firstHalf\">\n <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n </defs>\n\n <g class=\"pds-loader__spinner-path\">\n <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n </g>\n </svg>\n </div>\n )}\n\n {this.variant === 'typing' && (\n <div class=\"pds-loader--typing\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n )}\n\n <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n <slot name=\"label\">Loading...</slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -4,8 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d4ec6246.js');
+const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
+const PdsProgressStyle0 = baseCss;
 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-085);--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 PdsProgressStyle1 = pdsProgressCss;
 const PdsProgress = class {
     constructor(hostRef) {
@@ -18,10 +21,10 @@ const PdsProgress = class {
         this.showPercent = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a11c3d67af0621981d2f13ad673e11999926b3c1', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: 'bb480c5ce1fc9c56fce1022a26783d5729eb30dc', class: "pds-progress" }, index.h("label", { key: '02fec27f268262889b514aef4d8344bbb9a9484c', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '122d2639d7630f28fd98adf9bc003eeed6c9ebef', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'ba7262e0627a2848b3da03a9a32882510bf2628c', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (index.h(index.Host, { key: 'abd4f8e7972ff974b671831e38ae821a01bbc519', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: 'b6afe1b42ccf8f346c88648276d1e991fe41fd91', class: "pds-progress" }, index.h("label", { key: '676f91cdc74a861005cc7a25f811d51212641ee1', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '5f0154648ba27c6d83bd9fd3d7c3b59597665b1c', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'a538abd09affcb043a215c2ca504a9cbbe500332', class: "pds-progress__percentage" }, this.percent, "%")));
     }
 };
-PdsProgress.style = PdsProgressStyle0;
+PdsProgress.style = PdsProgressStyle0 + PdsProgressStyle1;
 exports.pds_progress = PdsProgress;

package/dist/cjs/pds-progress.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-progress.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gmEAAgmE,CAAC;AACxnE,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChED,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACRA,uEACE,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,IAAIA,kEAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":["h","Host"],"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\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-085);\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}
1	+ {"file":"pds-progress.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,0BAAe,OAAO;;ACDtB,MAAM,cAAc,GAAG,gmEAAgmE,CAAC;AACxnE,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChED,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACRA,uEACE,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,IAAIA,kEAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/styles/base.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --color-progress-fill: var(--pine-color-blue-300);\n\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-085);\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 styleUrls: ['../../global/styles/base.scss', '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}

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

@@ -5,8 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d4ec6246.js');
 const pdsLabel = require('./pds-label-73bb5bd3.js');
+const baseCss = ".sc-pds-radio:where(*:not(slot),*.sc-pds-radio:not(slot)::before,*.sc-pds-radio:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}.sc-pds-radio:where(*:not(slot)){margin:0}.sc-pds-radio:where(img,picture.sc-pds-radio,video.sc-pds-radio,canvas.sc-pds-radio,svg).sc-pds-radio{display:block;max-width:100%}.sc-pds-radio:where(input,button.sc-pds-radio,textarea.sc-pds-radio,select).sc-pds-radio{font:inherit}.sc-pds-radio:where(p,h1.sc-pds-radio,h2.sc-pds-radio,h3.sc-pds-radio,h4.sc-pds-radio,h5.sc-pds-radio,h6).sc-pds-radio{overflow-wrap:break-word}.sc-pds-radio:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}.sc-pds-radio:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}.sc-pds-radio:where(ul[role=list],ol[role=list]).sc-pds-radio{list-style:none}.sc-pds-radio:where(table){border-collapse:collapse;border-spacing:0}.sc-pds-radio:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}.sc-pds-radio:where(h1,h2.sc-pds-radio,h3.sc-pds-radio,h4.sc-pds-radio,h5.sc-pds-radio,h6).sc-pds-radio{font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}.sc-pds-radio:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}.sc-pds-radio:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}.sc-pds-radio:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}.sc-pds-radio:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}.sc-pds-radio:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}.sc-pds-radio:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}.sc-pds-radio:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}.sc-pds-radio:where(code,kbd.sc-pds-radio,pre.sc-pds-radio,samp).sc-pds-radio{font-family:monospace}.sc-pds-radio:where([role=button]){cursor:pointer}.sc-pds-radio:where(:focus){outline:0}.sc-pds-radio:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}.sc-pds-radio:where([hidden]){display:none !important}";
+const PdsRadioStyle0 = baseCss;
 const pdsRadioCss = ".sc-pds-radio-h{--border-interactive-default:var(--pine-border-width-thin) solid var( --pine-color-grey-400);--border-radius:50%;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-invalid-focus);--color:var(--pine-color-grey-700);--color-background:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-grey-200);--color-border-hover:var(--pine-color-grey-500);--color-border-disabled:var(--pine-color-grey-300);--color-checked:var(--pine-color-grey-950);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-purple-300);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-085);--sizing-check-size:6px;--sizing-input-size:16px;--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-interactive-default);border-radius:var(--border-radius);height:var(--sizing-input-size);margin:0;position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--color-background);border-radius:50%;content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--color-border-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
-const PdsRadioStyle0 = pdsRadioCss;
+const PdsRadioStyle1 = pdsRadioCss;
 const PdsRadio = class {
     constructor(hostRef) {
@@ -42,12 +45,12 @@ const PdsRadio = class {
         return classNames.join('  ');
     }
     render() {
-        return (index.h(index.Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, index.h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h(pdsLabel.PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            index.h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (index.h(index.Host, { key: '9cb0d602497eac8edaf17715182e27ed4b0bc0ab', class: this.classNames() }, index.h("input", { key: '20f794bb58ab815d6e73b1d9bb01c0b5a01186c7', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h(pdsLabel.PdsLabel, { key: 'f968ebc75adae7365c7334e916b4370006937132', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            index.h("div", { key: '96fdd82a8e89a40b73687ce609caa4671007e882', class: 'pds-radio__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '7133583828149eb3c1c958f0fb6821a773c12951', class: `pds-radio__message pds-radio__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }
 };
-PdsRadio.style = PdsRadioStyle0;
+PdsRadio.style = PdsRadioStyle0 + PdsRadioStyle1;
 exports.pds_radio = PdsRadio;

package/dist/cjs/pds-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,smGAAsmG,CAAC;AAC3nG,uBAAe,WAAW;;MCQb,QAAQ;;;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5BD,wFACoBE,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,EACFF,QAACG,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjBH,kEACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBJ,kEACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);\n --border-radius: 50%;\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-invalid-focus);\n\n --color: var(--pine-color-grey-700);\n --color-background: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-100);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-hover: var(--pine-color-grey-500);\n --color-border-disabled: var(--pine-color-grey-300);\n --color-checked: var(--pine-color-grey-950);\n --color-disabled: var(---pine-color-grey-500);\n --color-focus: var(--pine-color-purple-300);\n --color-invalid: var(--pine-color-red-300);\n --color-invalid-focus: var(--pine-color-red-200);\n\n --font-size: var(--pine-font-size-085);\n\n --sizing-check-size: 6px;\n --sizing-input-size: 16px;\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n outline: none;\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--color-invalid);\n }\n}\n\ninput {\n appearance: none;\n border: var(--border-interactive-default);\n border-radius: var(--border-radius);\n height: var(--sizing-input-size);\n margin: 0;\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n background: var(--color-background);\n border-radius: 50%;\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-border-disabled);\n\n &::after {\n border-color: var(--color-border-disabled);\n }\n }\n\n + label {\n color: var(--color-border-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n color: var(--color);\n font-size: var(--font-size);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-radio',\n styleUrl: 'pds-radio.scss',\n scoped: true,\n})\nexport class PdsRadio {\n /*\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = 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 String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n String used for helper message below radio.\n /\n @Prop() helperMessage: string;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,s8EAAs8E,CAAC;AACv9E,uBAAe,OAAO;;ACDtB,MAAM,WAAW,GAAG,smGAAsmG,CAAC;AAC3nG,uBAAe,WAAW;;MCQb,QAAQ;;;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5BD,wFACoBE,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,EACFF,QAACG,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjBH,kEACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBJ,kEACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/global/styles/base.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);\n --border-radius: 50%;\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-invalid-focus);\n\n --color: var(--pine-color-grey-700);\n --color-background: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-100);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-hover: var(--pine-color-grey-500);\n --color-border-disabled: var(--pine-color-grey-300);\n --color-checked: var(--pine-color-grey-950);\n --color-disabled: var(---pine-color-grey-500);\n --color-focus: var(--pine-color-purple-300);\n --color-invalid: var(--pine-color-red-300);\n --color-invalid-focus: var(--pine-color-red-200);\n\n --font-size: var(--pine-font-size-085);\n\n --sizing-check-size: 6px;\n --sizing-input-size: 16px;\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n outline: none;\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--color-invalid);\n }\n}\n\ninput {\n appearance: none;\n border: var(--border-interactive-default);\n border-radius: var(--border-radius);\n height: var(--sizing-input-size);\n margin: 0;\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n background: var(--color-background);\n border-radius: 50%;\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-border-disabled);\n\n &::after {\n border-color: var(--color-border-disabled);\n }\n }\n\n + label {\n color: var(--color-border-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n color: var(--color);\n font-size: var(--font-size);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/base.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = 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 String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n String used for helper message below radio.\n /\n @Prop() helperMessage: string;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2654,8 +2654,11 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
+const baseCss = ".sc-pds-sortable:where(*:not(slot),*.sc-pds-sortable:not(slot)::before,*.sc-pds-sortable:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}.sc-pds-sortable:where(*:not(slot)){margin:0}.sc-pds-sortable:where(img,picture.sc-pds-sortable,video.sc-pds-sortable,canvas.sc-pds-sortable,svg).sc-pds-sortable{display:block;max-width:100%}.sc-pds-sortable:where(input,button.sc-pds-sortable,textarea.sc-pds-sortable,select).sc-pds-sortable{font:inherit}.sc-pds-sortable:where(p,h1.sc-pds-sortable,h2.sc-pds-sortable,h3.sc-pds-sortable,h4.sc-pds-sortable,h5.sc-pds-sortable,h6).sc-pds-sortable{overflow-wrap:break-word}.sc-pds-sortable:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}.sc-pds-sortable:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}.sc-pds-sortable:where(ul[role=list],ol[role=list]).sc-pds-sortable{list-style:none}.sc-pds-sortable:where(table){border-collapse:collapse;border-spacing:0}.sc-pds-sortable:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}.sc-pds-sortable:where(h1,h2.sc-pds-sortable,h3.sc-pds-sortable,h4.sc-pds-sortable,h5.sc-pds-sortable,h6).sc-pds-sortable{font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}.sc-pds-sortable:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}.sc-pds-sortable:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}.sc-pds-sortable:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}.sc-pds-sortable:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}.sc-pds-sortable:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}.sc-pds-sortable:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}.sc-pds-sortable:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}.sc-pds-sortable:where(code,kbd.sc-pds-sortable,pre.sc-pds-sortable,samp).sc-pds-sortable{font-family:monospace}.sc-pds-sortable:where([role=button]){cursor:pointer}.sc-pds-sortable:where(:focus){outline:0}.sc-pds-sortable:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}.sc-pds-sortable:where([hidden]){display:none !important}";
+const PdsSortableStyle0 = baseCss;
 const pdsSortableCss = ".pds-sortable.sc-pds-sortable-h{--border-radius:var(--pine-border-radius-050);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-sortable.pds-sortable--bordered.sc-pds-sortable-h{border:var(--border-default);border-radius:var(--border-radius)}";
-const PdsSortableStyle0 = pdsSortableCss;
+const PdsSortableStyle1 = pdsSortableCss;
 const PdsSortable = class {
     constructor(hostRef) {
@@ -2694,11 +2697,11 @@ const PdsSortable = class {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, index$1.h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+        return (index$1.h(index$1.Host, { key: 'bd922d1fff144b11b407aeb0e389c05fcfa22504', class: this.classNames(), id: this.componentId }, index$1.h("slot", { key: 'f25cd77d7735d971903ba9cdeb98f652d45dae41' })));
     }
     get el() { return index$1.getElement(this); }
 };
-PdsSortable.style = PdsSortableStyle0;
+PdsSortable.style = PdsSortableStyle0 + PdsSortableStyle1;
 exports.pds_sortable = PdsSortable;