@pine-ds/core 3.0.0-mercury.0 → 3.0.1

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

@@ -1,21 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CxX7ua5d.js');
+var index$1 = require('./index-xqJkQM0c.js');
 
-const index = require('./index-46fb0736.js');
-const index$1 = require('./index-de3f0730.js');
-
-const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-charcoal-400);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-087);--font-size-xs:var(--pine-font-size-075);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
-const PdsLinkStyle0 = pdsLinkCss;
+const pdsLinkCss = ":host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{color:var(--pine-color-text-hover);text-decoration:none}";
 
 const PdsLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.componentId = undefined;
+        /**
+         * Determines whether the link should open in a new tab.
+         * @defaultValue false
+         */
         this.external = false;
+        /**
+         * Sets the link variant styles.
+         * @defaultValue inline
+         */
         this.variant = 'inline';
+        /**
+         * The font size of the link's text.
+         * @defaultValue lg
+         */
         this.fontSize = 'lg';
-        this.href = undefined;
     }
     classNames() {
         const classNames = ['pds-link'];
@@ -28,12 +35,13 @@ 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: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, index.h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
+            index.h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', icon: index$1.launch, size: this.fontSize })));
     }
 };
-PdsLink.style = PdsLinkStyle0;
+PdsLink.style = pdsLinkCss;
 
 exports.pds_link = PdsLink;
+//# sourceMappingURL=pds-link.entry.cjs.js.map
 
 //# sourceMappingURL=pds-link.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"pds-link.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,k8CAAk8C,CAAC;AACt9C,sBAAe,UAAU;;MCYZ,OAAO;;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QAEJ,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: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-text-default: var(--pine-color-charcoal-400);\n\n  --font-size: var(--pine-font-size-100);\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-xs: var(--pine-font-size-075);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-inline-start-margin: var(--pine-spacing-050);\n  --sizing-svg-lg: 15px;\n  --sizing-svg-md: 13px;\n  --sizing-svg-sm: 11px;\n\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-inline-start-margin);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--color-text);\n  display: inline-flex;\n  font-weight: inherit;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--font-size-xs);\n\n  pds-icon {\n    height: var(--sizing-svg-sm);\n    width: var(--sizing-svg-sm);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--font-size-sm);\n\n  pds-icon {\n    height: var(--sizing-svg-md);\n    width: var(--sizing-svg-md);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--font-size);\n\n  pds-icon {\n    height: var(--sizing-svg-lg);\n    width: var(--sizing-svg-lg);\n  }\n}\n\n.pds-link--plain {\n  font-weight: var(--font-weight);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-link.entry.cjs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,2mCAA2mC;;MCajnC,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAsC5C;IA/BS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG7B,MAAM,GAAA;AAEJ,QAAA,QACEA,OACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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,EAAA,EAEXA,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAEC,cAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;","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  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--pine-color-text);\n  display: inline-flex;\n  font-weight: var(--pine-font-weight-medium);\n\n  &:focus-visible {\n    border-radius: var(--pine-dimension-2xs);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width-thick);\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(--pine-font-size-body-xs);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--pine-font-size-body-sm);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--pine-font-size-body-md);\n\n  pds-icon {\n    height: var(--pine-dimension-sm);\n    width: var(--pine-dimension-sm);\n  }\n}\n\n.pds-link--plain {\n  text-decoration: none;\n\n  &:hover {\n    color: var(--pine-color-text-hover);\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    color: var(--pine-color-text-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 - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['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   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\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-link.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-link.entry.cjs.js","sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--pine-color-text);\n  display: inline-flex;\n  font-weight: var(--pine-font-weight-medium);\n\n  &:focus-visible {\n    border-radius: var(--pine-dimension-2xs);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width-thick);\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(--pine-font-size-body-xs);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--pine-font-size-body-sm);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--pine-font-size-body-md);\n\n  pds-icon {\n    height: var(--pine-dimension-sm);\n    width: var(--pine-dimension-sm);\n  }\n}\n\n.pds-link--plain {\n  text-decoration: none;\n\n  &:hover {\n    color: var(--pine-color-text-hover);\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    color: var(--pine-color-text-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 - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['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   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\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"],"names":["h","launch"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,2mCAA2mC;;MCajnC,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAsC5C;IA/BS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG7B,MAAM,GAAA;AAEJ,QAAA,QACEA,OACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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,EAAA,EAEXA,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAEC,cAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;"}

package/dist/cjs/pds-loader.cjs.entry.js

@@ -1,15 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CxX7ua5d.js');
 
-const index = require('./index-46fb0736.js');
-
-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-sm);--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 pdsLoaderCss = ":host{--loader-color:var(--pine-color-brand);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}: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{--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;color:var(--loader-color)}.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{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;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.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}";
 
 const PdsLoader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * If false, the loader will be hidden.
+         */
+        this.isLoading = true;
+        /**
+         * Determines whether the loader should display a label.
+         */
+        this.showLabel = false;
+        /**
+         * Sets the size of the spinner loader. Value can be preset or custom.
+         */
+        this.size = 'md';
+        /**
+         * Determines the type of loader.
+         */
+        this.variant = 'spinner';
         this.style = () => {
             if (this.size !== undefined) {
                 return {
@@ -18,10 +31,6 @@ const PdsLoader = class {
                 };
             }
         };
-        this.isLoading = true;
-        this.showLabel = false;
-        this.size = 'md';
-        this.variant = 'spinner';
     }
     loaderSize() {
         const sizes = {
@@ -39,11 +48,12 @@ 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: 'c01b34ac171a5581e1456737f17043cf8b47af8e', 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: 'ffd9e050fef503f1614c06896b8d888202df8656', class: "pds-loader--spinner" }, index.h("svg", { key: '056b84ca6f89f6dc93f72d115c9cad3efa9f468d', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, index.h("defs", { key: '85bfeab6bc686de25e4156154273067fbcb3ba0b' }, index.h("linearGradient", { key: 'd32d0c03f7f851cd56365af16298c4da0db74ec8', id: "spinner-secondHalf" }, index.h("stop", { key: '1113756349854bc4ab581c0ce282dcd54def3891', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '0f649b9e828409cab1b67a26d9a35d35e9fe7b0a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '4aabb11799007ae40d7e112696809b35b652bb46', id: "spinner-firstHalf" }, index.h("stop", { key: '9624d9de9eaba0f29264d3b76bc27287bbc1b68b', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '37fd5de86c5db30731b4dc39b1cd2cb6afbe7393', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: '06ccf17d191612cd5566714e69299a9e749618da', class: "pds-loader__spinner-path" }, index.h("path", { key: '9b5556b7c20e3c0f7effaa6d09120baa0b07e614', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'aacb689fcace08aa9bee3c3eb2ee1b571ed1b9ee', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '875a3faf04e718f095d616db6a2cd1c7bcde2f14', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '515a530c8acd7807d45c3f54ff1d264002e3e627', class: "pds-loader--typing" }, index.h("span", { key: 'bbb55e71064ab200ca388360a8a0986eda5b2008' }), index.h("span", { key: '77f42ba8124be61565479f21ed9253d928da49b3' }), index.h("span", { key: 'f8ef81fc9a9bf1a24f0bb3501c49291fe5028c5a' }))), index.h("div", { key: 'fd73795dfb15359ff655ed6abf4b2e41faa079a7', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: 'cdfb46d54431a84b3ceaaaf94d48f69c42956c8d', name: "label" }, "Loading..."))));
     }
 };
-PdsLoader.style = PdsLoaderStyle0;
+PdsLoader.style = pdsLoaderCss;
 
 exports.pds_loader = PdsLoader;
+//# sourceMappingURL=pds-loader.entry.cjs.js.map
 
 //# sourceMappingURL=pds-loader.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"pds-loader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,svGAAsvG,CAAC;AAC5wG,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-sm);\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}
+{"file":"pds-loader.entry.cjs.js","mappings":"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","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  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\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  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\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  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\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.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\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: ['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-loader.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-loader.entry.cjs.js","sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\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  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\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  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\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.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\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: ['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"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/pds-popover.cjs.entry.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var index = require('./index-CxX7ua5d.js');
+
+const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";
+
+const PdsPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Determines when the popover is active
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
+         * @defaultValue "show"
+         */
+        this.popoverTargetAction = 'show';
+        /**
+         * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+         * Manual popovers require the consumer to handle the visibility of the popover.
+         */
+        this.popoverType = 'auto';
+        /**
+         * Sets the maximum width of the popover content
+         * @defaultValue 352
+         */
+        this.maxWidth = 352;
+        /**
+         * Determines the preferred position of the popover
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+    }
+    componentWillRender() {
+        this.handlePopoverPositioning();
+    }
+    handleClick() {
+        this.active = !this.active;
+    }
+    handleScroll() {
+        if (this.active) {
+            this.handlePopoverPositioning();
+        }
+    }
+    handlePopoverPositioning() {
+        const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
+        const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
+        if (!triggerEl || !popoverEl)
+            return;
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const popoverRect = popoverEl.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        const offset = 8;
+        switch (this.placement) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.left;
+                break;
+            case 'right':
+                top = triggerRect.top;
+                left = triggerRect.right + offset;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.left;
+                break;
+            case 'left':
+                top = triggerRect.top;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
+        }
+        popoverEl.style.top = `${top}px`;
+        popoverEl.style.left = `${left}px`;
+    }
+    render() {
+        return (index.h(index.Host, { key: '3bed0c38e97500efb2bffcef8321a6b38215c434' }, index.h("button", { key: '0db59e1815568cb980ce0bbe5ef3502177015a1d', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), index.h("div", { key: 'd8c70cd36614cb3fc83669a843b00af0d18b03d4', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, index.h("slot", { key: 'e7408b199525e88c0e975f9cc3e96200f82ea23e' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsPopover.style = pdsPopoverCss;
+
+exports.pds_popover = PdsPopover;
+//# sourceMappingURL=pds-popover.entry.cjs.js.map
+
+//# sourceMappingURL=pds-popover.cjs.entry.js.map

package/dist/cjs/pds-popover.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-popover.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-popover.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-popover.entry.cjs.js","sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -1,28 +1,35 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CxX7ua5d.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-blue-300);--sizing-progress-bar-height:8px;--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{--border-radius:var(--pine-border-radius-050);--color-progress-bar-background:var(--pine-color-grey-300);-ms-flex-align:center;align-items:center;background-color:var(--color-progress-bar-background);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--sizing-progress-bar-height);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--sizing-progress-bar-height);width:100%}progress::-webkit-progress-value{--border-radius:var(--pine-border-radius-050);--color-background:var(--pine-color-blue-300);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}progress::-moz-progress-bar{--color-background:var(--pine-color-blue-300);--border-radius:var(--pine-border-radius-050);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-087);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-150);--spacing-inline-start-margin:var(--pine-spacing-300);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--spacing-inline-start-margin) / 2);margin-inline-start:calc(var(--spacing-inline-start-margin) / 2)}";
-const PdsProgressStyle0 = pdsProgressCss;
+const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-brand);--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{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);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(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.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-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";
 
 const PdsProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+        * Determines whether or not progress is animated.
+        * @defaultValue false
+        */
         this.animated = false;
-        this.componentId = undefined;
-        this.fillColor = undefined;
-        this.label = undefined;
+        /**
+        * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+        * @defaultValue 0
+        */
         this.percent = 0;
+        /**
+        * Determines whether or not the percent value should be displayed as text.
+        * @defaultValue false
+        */
         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: 'a0a7cde165c1acc884366dfe7a368db5d7c4150e', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: 'c2a8f262e0a6393448a0bc8a05dc49f30c451754', class: "pds-progress" }, index.h("label", { key: '422c51d5b06ef6d99e23cb2721b861ba9611b1df', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '57081cc95c8bb44d6fa26cd7d1f7933108982165', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: '37b88967a8584b43407314b0ba70faf4e43a9e5a', class: "pds-progress__percentage" }, this.percent, "%")));
     }
 };
-PdsProgress.style = PdsProgressStyle0;
+PdsProgress.style = pdsProgressCss;
 
 exports.pds_progress = PdsProgress;
+//# sourceMappingURL=pds-progress.entry.cjs.js.map
 
 //# sourceMappingURL=pds-progress.cjs.entry.js.map

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

@@ -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-087);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-150);\n  --spacing-inline-start-margin: var(--pine-spacing-300);\n\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\n\n  /**\n  * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n  */\n  @Prop() componentId!: string;\n\n  /**\n  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-progress.entry.cjs.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,8iDAA8iD;;MCOxjD,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChED,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACRA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;","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-brand);\n\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  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-2xs);\n  display: flex;\n  flex-direction: row;\n  height: var(--pine-dimension-xs);\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(--pine-dimension-xs);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  background-color: var(--color-progress-fill, var(--pine-color-brand));\n  border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n  background-color: var(--color-progress-fill, var(--pine-color-brand));\n  border-radius: var(--pine-dimension-2xs);\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-weight: var(--pine-font-weight-medium);\n  margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrls: ['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-progress.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-progress.entry.cjs.js","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-brand);\n\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  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-2xs);\n  display: flex;\n  flex-direction: row;\n  height: var(--pine-dimension-xs);\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(--pine-dimension-xs);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  background-color: var(--color-progress-fill, var(--pine-color-brand));\n  border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n  background-color: var(--color-progress-fill, var(--pine-color-brand));\n  border-radius: var(--pine-dimension-2xs);\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-weight: var(--pine-font-weight-medium);\n  margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrls: ['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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,8iDAA8iD;;MCOxjD,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChED,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACRA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;"}

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

@@ -1,17 +1,37 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CxX7ua5d.js');
+var form = require('./form-Bx4nzJBo.js');
+var index$1 = require('./index-xqJkQM0c.js');
 
-const index = require('./index-46fb0736.js');
-const pdsLabel = require('./pds-label-7aabdc4e.js');
+const labelCss = ".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 
-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 2px var(--color-focus);--box-shadow-focus-error:0 0 0 2px var(--color-invalid-focus);--color:var(--pine-color-charcoal-200);--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-charcoal-500);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-blue-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-087);--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 pdsRadioCss = ".sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--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(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.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(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);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(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-body-sm);gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}";
 
 const PdsRadio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsRadioChange = index.createEvent(this, "pdsRadioChange", 7);
+        this.pdsRadioChange = index.createEvent(this, "pdsRadioChange");
+        /**
+         * Determines whether or not the radio is checked.
+         * @defaultValue false
+         */
+        this.checked = false;
+        /**
+         * Determines whether or not the radio is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+       * Determines whether or not the radio is invalid.
+       * @defaultValue false
+       */
+        this.invalid = false;
+        /**
+         * Determines whether or not the radio is required.
+         * @defaultValue false
+         */
+        this.required = false;
         this.handleRadioChange = (e) => {
             if (this.disabled) {
                 return;
@@ -20,16 +40,6 @@ const PdsRadio = class {
             const isChecked = target.checked;
             this.pdsRadioChange.emit(isChecked);
         };
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalid = false;
-        this.componentId = undefined;
-        this.label = undefined;
-        this.helperMessage = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.value = undefined;
     }
     classNames() {
         const classNames = [];
@@ -42,13 +52,14 @@ 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: '7366c979970c03d9c6b26d355ba2f14c2e040907', class: this.classNames() }, index.h("label", { key: 'c48405dc725f4d7b0a027e66c3b0b04e72843445', htmlFor: this.componentId }, index.h("input", { key: 'cd38a200a73572d2f07ada9bc1ec08cae0863044', "aria-describedby": form.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("span", { key: 'a21fb68b4326afb2bf25b08cf6022cd26f3c83ba', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            index.h("div", { key: 'b4c201465e085096ac5fac05e43b01cee045310e', class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '2c0475efbe1ebedd762de9d432864f5dab8f0448', class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '40ece3a429d9475c17f262d772cdb7332a7089b2', icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
 };
-PdsRadio.style = PdsRadioStyle0;
+PdsRadio.style = labelCss + pdsRadioCss;
 
 exports.pds_radio = PdsRadio;
+//# sourceMappingURL=pds-radio.entry.cjs.js.map
 
 //# sourceMappingURL=pds-radio.cjs.entry.js.map