@pine-ds/core 2.25.0-mercury.0 → 2.27.0-mercury.0

package/components/pds-loader.js

@@ -3,7 +3,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
 const PdsLoaderStyle0 = baseCss;
 
-const pdsLoaderCss = ":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-spacing-100)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--color-background-spinner:var(--pine-color-blue-300);--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;block-size:var(--sizing-spinner);color:var(--color-background-spinner);inline-size:var(--sizing-spinner)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--border-radius-typing:var(--pine-border-radius-200);--border-radius-typing-dot:var(--pine-border-radius-round);--box-shadow-typing:var(--pine-box-shadow-100);--color-background-typing-default:var(--pine-color-grey-200);--color-background-typing-dot-default:var(--pine-color-grey-500);--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;--sizing-typing-dot:calc(var(--pine-spacing-150) / 2);--spacing-typing-gap:var(--pine-spacing-050);--spacing-typing-margin-block:var(--pine-spacing-0);--spacing-typing-margin-inline:auto;--spacing-typing-padding-block:15px;--spacing-typing-padding-inline:var(--pine-spacing-250);-ms-flex-align:center;align-items:center;background-color:var(--color-background-typing-default);border-radius:var(--border-radius-typing);-webkit-box-shadow:var(--box-shadow-typing);box-shadow:var(--box-shadow-typing);display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-typing-gap);margin-block:var(--spacing-typing-margin-block);margin-inline:var(--spacing-typing-margin-inline);padding-block:var(--spacing-typing-padding-block);padding-inline:var(--spacing-typing-padding-inline);position:relative}.pds-loader--typing span{background-color:var(--color-background-typing-dot-default);block-size:var(--sizing-typing-dot);border-radius:var(--border-radius-typing-dot);inline-size:var(--sizing-typing-dot);opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);font:var(--typography-label-default)}";
+const 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-mercury-400);--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;block-size:var(--sizing-spinner);color:var(--color-background-spinner);inline-size:var(--sizing-spinner)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--border-radius-typing:var(--pine-border-radius-200);--border-radius-typing-dot:var(--pine-border-radius-round);--box-shadow-typing:var(--pine-box-shadow-100);--color-background-typing-default:var(--pine-color-grey-200);--color-background-typing-dot-default:var(--pine-color-grey-500);--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;--sizing-typing-dot:calc(var(--pine-spacing-150) / 2);--spacing-typing-gap:var(--pine-spacing-050);--spacing-typing-margin-block:var(--pine-spacing-0);--spacing-typing-margin-inline:auto;--spacing-typing-padding-block:15px;--spacing-typing-padding-inline:var(--pine-spacing-250);-ms-flex-align:center;align-items:center;background-color:var(--color-background-typing-default);border-radius:var(--border-radius-typing);-webkit-box-shadow:var(--box-shadow-typing);box-shadow:var(--box-shadow-typing);display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-typing-gap);margin-block:var(--spacing-typing-margin-block);margin-inline:var(--spacing-typing-margin-inline);padding-block:var(--spacing-typing-padding-block);padding-inline:var(--spacing-typing-padding-inline);position:relative}.pds-loader--typing span{background-color:var(--color-background-typing-dot-default);block-size:var(--sizing-typing-dot);border-radius:var(--border-radius-typing-dot);inline-size:var(--sizing-typing-dot);opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);font:var(--typography-label-default)}";
 const PdsLoaderStyle1 = pdsLoaderCss;
 
 const PdsLoader$1 = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLElement {

package/components/pds-loader.js.map

@@ -1 +1 @@
-{"file":"pds-loader.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,wBAAe,OAAO;;ACDtB,MAAM,YAAY,GAAG,uvGAAuvG,CAAC;AAC7wG,wBAAe,YAAY;;MCUdA,WAAS;;;;;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,QACE,EAAC,IAAI,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,KACzB,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IACzD,+DACE,uEAAgB,EAAE,EAAC,oBAAoB,IACrC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,EACjB,uEAAgB,EAAE,EAAC,mBAAmB,IACpC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ,EAEP,0DAAG,KAAK,EAAC,0BAA0B,IACjC,6DAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAC5E,6DAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAE3E,6DAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP,EAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DAAa,EACb,8DAAa,EACb,8DAAa,CACT,CACP,EAED,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,IAC3E,6DAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsLoader"],"sources":["src/global/styles/base.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n  \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-spacing-100);\n}\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0 ;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n  --color-background-spinner: var(--pine-color-blue-300);\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  block-size: var(--sizing-spinner);\n  color: var(--color-background-spinner);\n  inline-size: var(--sizing-spinner);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --border-radius-typing: var(--pine-border-radius-200);\n  --border-radius-typing-dot: var(--pine-border-radius-round);\n\n  --box-shadow-typing: var(--pine-box-shadow-100);\n\n  --color-background-typing-default: var(--pine-color-grey-200);\n  --color-background-typing-dot-default: var(--pine-color-grey-500);\n\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);\n\n  --spacing-typing-gap: var(--pine-spacing-050);\n  --spacing-typing-margin-block: var(--pine-spacing-0);\n  --spacing-typing-margin-inline: auto;\n  --spacing-typing-padding-block: 15px;\n  --spacing-typing-padding-inline: var(--pine-spacing-250);\n\n  align-items: center;\n  background-color: var(--color-background-typing-default);\n  border-radius: var(--border-radius-typing);\n  box-shadow: var(--box-shadow-typing);\n  display: inline-flex;\n  gap: var(--spacing-typing-gap);\n  margin-block: var(--spacing-typing-margin-block);\n  margin-inline: var(--spacing-typing-margin-inline);\n  padding-block: var(--spacing-typing-padding-block);\n  padding-inline: var(--spacing-typing-padding-inline);\n  position: relative;\n\n  span {\n    background-color: var(--color-background-typing-dot-default);\n    block-size: var(--sizing-typing-dot);\n    border-radius: var(--border-radius-typing-dot);\n    inline-size: var(--sizing-typing-dot);\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.2);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-loader.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,wBAAe,OAAO;;ACDtB,MAAM,YAAY,GAAG,0vGAA0vG,CAAC;AAChxG,wBAAe,YAAY;;MCUdA,WAAS;;;;;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,QACE,EAAC,IAAI,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,KACzB,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IACzD,+DACE,uEAAgB,EAAE,EAAC,oBAAoB,IACrC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,EACjB,uEAAgB,EAAE,EAAC,mBAAmB,IACpC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG,EAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ,EAEP,0DAAG,KAAK,EAAC,0BAA0B,IACjC,6DAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAC5E,6DAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG,EAE3E,6DAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP,EAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DAAa,EACb,8DAAa,EACb,8DAAa,CACT,CACP,EAED,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,oBAAoB,EAAE,IAC3E,6DAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsLoader"],"sources":["src/global/styles/base.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n  \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-spacing-100);\n}\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0 ;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n  --color-background-spinner: var(--pine-color-mercury-400);\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  block-size: var(--sizing-spinner);\n  color: var(--color-background-spinner);\n  inline-size: var(--sizing-spinner);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --border-radius-typing: var(--pine-border-radius-200);\n  --border-radius-typing-dot: var(--pine-border-radius-round);\n\n  --box-shadow-typing: var(--pine-box-shadow-100);\n\n  --color-background-typing-default: var(--pine-color-grey-200);\n  --color-background-typing-dot-default: var(--pine-color-grey-500);\n\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);\n\n  --spacing-typing-gap: var(--pine-spacing-050);\n  --spacing-typing-margin-block: var(--pine-spacing-0);\n  --spacing-typing-margin-inline: auto;\n  --spacing-typing-padding-block: 15px;\n  --spacing-typing-padding-inline: var(--pine-spacing-250);\n\n  align-items: center;\n  background-color: var(--color-background-typing-default);\n  border-radius: var(--border-radius-typing);\n  box-shadow: var(--box-shadow-typing);\n  display: inline-flex;\n  gap: var(--spacing-typing-gap);\n  margin-block: var(--spacing-typing-margin-block);\n  margin-inline: var(--spacing-typing-margin-inline);\n  padding-block: var(--spacing-typing-padding-block);\n  padding-inline: var(--spacing-typing-padding-inline);\n  position: relative;\n\n  span {\n    background-color: var(--color-background-typing-dot-default);\n    block-size: var(--sizing-typing-dot);\n    border-radius: var(--border-radius-typing-dot);\n    inline-size: var(--sizing-typing-dot);\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.2);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/{index-479f5bd8.js → index-7fabced6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-/* pds-icons v8.0.0, ES Modules */
+/* pds-icons v8.4.0, ES Modules */
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M.862 4.862c.26-.26.682-.26.943 0L8 11.057l6.195-6.195a.667.667 0 1 1 .943.943L8.471 12.47a.667.667 0 0 1-.942 0L.862 5.805a.667.667 0 0 1 0-.943'/></svg>";
 const checkCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><g clip-path='url(#a)'><path d='M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m4.473 5.807L7.14 11.14c-.26.26-.68.26-.94 0L3.533 8.473a.664.664 0 1 1 .94-.94l2.194 2.194 4.86-4.86c.26-.26.68-.26.94 0 .266.253.266.68.006.94'/></g><defs><clipPath id='a'><path d='M0 0h16v16H0z'/></clipPath></defs></svg>";
 const copy = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><g fill-rule='evenodd' clip-path='url(#a)'><path d='M10 5.333c0-.368.299-.666.667-.666h4c.368 0 .666.298.666.666v9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666v-4a.667.667 0 1 1 1.333 0V14h8V6h-3.333A.667.667 0 0 1 10 5.333'/><path d='M.667 1.333c0-.368.298-.666.666-.666h9.334c.368 0 .666.298.666.666v9.334a.667.667 0 0 1-.666.666H1.333a.667.667 0 0 1-.666-.666zM2 2v8h8V2z'/></g><defs><clipPath id='a'><path d='M0 0h16v16H0z'/></clipPath></defs></svg>";
@@ -21,4 +21,4 @@ exports.remove = remove;
 exports.upSmall = upSmall;
 exports.userFilled = userFilled;
 
-//# sourceMappingURL=index-479f5bd8.js.map
+//# sourceMappingURL=index-7fabced6.js.map