@pine-ds/core 0.2.4 → 1.0.1

package/dist/pine-core/p-9f8a1aa6.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as i,H as a}from"./p-2f77dbd3.js";const d=":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) * -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";const e=d;const f=class{constructor(i){s(this,i);this.componentId=undefined;this.offset=undefined;this.vertical=false}classNames(){const s=["pds-divider"];if(this.vertical){s.push("pds-divider--vertical")}if(this.offset){const i="pds-divider--offset-"+this.offset;s.push(i)}return s.join(" ")}render(){return i(a,{key:"3f2301abdcc69f48039e92ad5308ea7a27b3573f",id:this.componentId},i("hr",{key:"763d4a15811b9298b77d0e6227e18dccdf61825e",class:this.classNames()}))}};f.style=e;export{f as pds_divider};
+//# sourceMappingURL=p-9f8a1aa6.entry.js.map

package/dist/pine-core/p-9f8a1aa6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsDividerCss","PdsDividerStyle0","PdsDivider","classNames","this","vertical","push","offset","offsetClassName","join","render","h","Host","key","id","componentId","class"],"sources":["src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-grey-400);\n  --spacing-offset-xxs: var(--pine-spacing-050);\n  --spacing-offset-xs: var(--pine-spacing-100);\n  --spacing-offset-sm: var(--pine-spacing-200);\n  --spacing-offset-md: var(--pine-spacing-300);\n  --spacing-offset-lg: var(--pine-spacing-450);\n  --spacing-offset-xxl: var(--pine-spacing-800);\n}\n\n$pds-divider-offsets: (\n  xxs: var(--spacing-offset-xxs),\n  xs: var(--spacing-offset-xs),\n  sm: var(--spacing-offset-sm),\n  md: var(--spacing-offset-md),\n  lg: var(--spacing-offset-lg),\n  xl: var(--spacing-offset-xl),\n  xxl: var(--spacing-offset-xxl),\n);\n\n.pds-divider {\n  background: var(--color-background-default);\n  border: 0;\n  display: flex;\n  height: 1px;\n  margin: 0;\n  width: 100%;\n}\n\n.pds-divider--vertical {\n  height: 100%;\n  width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n  .pds-divider--offset-#{$offset} {\n    margin: 0 calc($value * -1);\n    padding: 0 $value;\n\n    &.pds-divider--vertical {\n      margin: calc($value * -1) 0;\n      padding: $value 0;\n    }\n  }\n}\n\n@media (max-width: 767px) {\n  .pds-divider--vertical {\n    display: none;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,4oEACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wFAeF,K,CAEX,UAAAC,GACN,MAAMA,EAAa,CAAC,eAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,wB,CAGlB,GAAIF,KAAKG,OAAQ,CACf,MAAMC,EAAkB,uBAAyBJ,KAAKG,OACtDJ,EAAWG,KAAKE,E,CAGlB,OAAOL,EAAWM,KAAK,I,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,GAAIV,KAAKW,aACbJ,EAAA,MAAAE,IAAA,2CAAIG,MAAOZ,KAAKD,e"}

package/dist/pine-core/p-ad891586.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(r){"use strict";var a,o,e,n,i;return{setters:[function(r){a=r.r;o=r.h;e=r.H},function(r){n=r.c;i=r.u}],execute:function(){var t=":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var s=t;var d=r("pds_avatar",function(){function r(r){var e=this;a(this,r);this.renderAssetWrapper=function(){var r={height:e.avatarSize(),width:e.avatarSize()};return o("div",{style:r,part:"asset-wrapper"},e.renderIconOrImage(),e.renderBadge())};this.renderAvatar=function(){return e.dropdown?o("button",{class:"pds-avatar__button",type:"button"},e.renderAssetWrapper()):e.renderAssetWrapper()};this.renderBadge=function(){return e.badge&&o("pds-icon",{class:"pds-avatar__badge",icon:n,size:"33.53%"})};this.renderIconOrImage=function(){return e.image?o("img",{alt:e.alt,src:e.image}):o("pds-icon",{color:"var(--pine-color-primary-400)",icon:i,size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=e.image!==""&&e.image!==null,r["pds-avatar--".concat(e.variant)]=e.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return o(e,{key:"0e214f7cca56b36b49e27c8dc097acc7b34391cc",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}());d.style=s}}}));
+//# sourceMappingURL=p-ad891586.system.entry.js.map

package/dist/pine-core/p-ad891586.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","exports","this","renderAssetWrapper","style","height","_this","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","_a","concat","variant","class_1","prototype","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --color-background-container: var(--pine-color-blue-100);\n  --color-background-badge: var(--pine-color-white);\n  --color-border-badge: var(--pine-color-white);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-radius-round: var(--pine-border-radius-round);\n  --border-radius-none: var(--pine-border-radius-0);\n\n  --spacing-none: var(--pine-spacing-0);\n\n  align-items: center;\n  background-color: var(--color-background-container);\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --border-radius-admin-round: var(--pine-spacing-150);\n    border-radius: var(--border-radius-admin-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n  --border-radius-round: var(--pine-border-radius-round);\n\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--border-radius-none);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  display: flex;\n  padding: var(--spacing-none);\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.pds-avatar__badge {\n  background-color: var(--color-background-badge);\n  border: var(--border-default);\n  border-color: var(--color-border-badge);\n  border-radius: var(--border-radius-round);\n  bottom: var(--spacing-none);\n  position: absolute;\n  right: var(--spacing-none);\n}\n\nimg {\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-primary-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,IAAMA,EAAe,4zDACrB,IAAAC,EAAeD,E,ICUFE,EAASC,EAAA,wB,mCAiEZC,KAAAC,mBAAqB,WAC3B,IAAMC,EAAQ,CACZC,OAAQC,EAAKC,aACbC,MAAOF,EAAKC,cAGd,OACEE,EAAA,OAAKL,MAAOA,EAAOM,KAAK,iBACrBJ,EAAKK,oBACLL,EAAKM,c,EAKJV,KAAAW,aAAe,WACrB,OACEP,EAAKQ,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,UACrCV,EAAKH,sBAGRG,EAAKH,oB,EAIHD,KAAAU,YAAc,kBACpBN,EAAKW,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,EAAmBC,KAAK,UALnD,EAQdlB,KAAAS,kBAAoB,kBAC1BL,EAAKe,MACDZ,EAAA,OAAKa,IAAKhB,EAAKgB,IAAKC,IAAKjB,EAAKe,QAI9BZ,EAAA,YAAUe,MAAM,gCAAgCN,KAAMO,EAAYL,KAAK,UANjD,EASpBlB,KAAAwB,WAAa,W,MAAA,OAAAC,EAAA,CAEjB,aAAc,MACdA,EAAC,yBAA0BrB,EAAKe,QAAU,IAAMf,EAAKe,QAAU,KAC/DM,EAAC,eAAAC,OAAetB,EAAKuB,UAAYvB,EAAKuB,UAAY,Q,CAJjC,E,SAtGS,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElDC,EAAAC,UAAAxB,WAAA,WACN,IAAMyB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAM9B,KAAKkB,MAAO,CACpB,OAAOY,EAAM9B,KAAKkB,K,KACb,CACL,OAAOlB,KAAKkB,I,GAuDhBU,EAAAC,UAAAO,OAAA,WAEE,OACE7B,EAAC8B,EAAI,CAAAC,IAAA,2CACHC,GAAIvC,KAAKwC,YACT3B,MAAK4B,OAAAC,OAAA,GAAM1C,KAAKwB,eAEfxB,KAAKW,e,WA3HQ,I"}

package/dist/pine-core/p-b103a7a9.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as e,g as a}from"./p-2f77dbd3.js";import{b as c}from"./p-403a20e8.js";const d=r=>!!r.shadowRoot&&!!r.attachShadow;const n=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-charcoal-400);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-charcoal-500);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-charcoal-100);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-charcoal-400);--color-text-secondary-disabled:var(--pine-color-charcoal-100);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-blue-300);--color-background-accent-disabled:var(--pine-color-blue-100);--color-background-accent-hover:var(--pine-color-blue-400);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-blue-200);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const t=n;const i=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(d(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")}render(){return o(e,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),o("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&o("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:c,part:"caret"})))}get el(){return a(this)}};i.style=t;export{i as pds_button};
+//# sourceMappingURL=p-b103a7a9.entry.js.map

package/dist/pine-core/p-b103a7a9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-charcoal-400);\n  --color-background-primary-disabled: var(--pine-color-grey-300);\n  --color-background-primary-hover: var(--pine-color-charcoal-500);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-charcoal-400);\n  --color-text-secondary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-blue-300);\n  --color-background-accent-disabled: var(--pine-color-blue-100);\n  --color-background-accent-hover: var(--pine-color-blue-400);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-blue-200);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-300);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-400);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-200);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n    border-color: var(--color-border-focus);\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  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAIO,MAAMA,EAAgBC,KAClBA,EAAGC,cAAiBD,EAAWE,aCL1C,MAAMC,EAAe,m9KACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,yBAwCZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIV,EAAaO,KAAKN,IAAK,CACzB,MAAMU,EAAOJ,KAAKN,GAAGW,QAAQ,QAC7B,GAAID,EAAM,CACRF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1F,UAAAC,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAIf,KAAKgB,QAAS,CAChBD,EAAWE,KAAK,eAAiBjB,KAAKgB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,KACxCC,GAAIxB,KAAKyB,YACTC,QAAS1B,KAAKC,YACde,QAAShB,KAAKgB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO3B,KAAKe,aACZQ,SAAUvB,KAAKuB,SACfK,KAAM5B,KAAK4B,KACXC,KAAK,SACL1B,KAAMH,KAAKG,KACX2B,MAAO9B,KAAK8B,OAEX9B,KAAK+B,MAAQ/B,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM5B,KAAK+B,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCtB,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W"}

package/dist/pine-core/p-bbaaa246.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(i){"use strict";var n,s,e;return{setters:[function(i){n=i.r;s=i.h},function(i){e=i.l}],execute:function(){var t=":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}";var o=t;var a=i("pds_link",function(){function i(i){n(this,i);this.componentId=undefined;this.external=false;this.variant="inline";this.fontSize="lg";this.href=undefined}i.prototype.classNames=function(){var i=["pds-link"];if(this.fontSize){i.push("pds-link--"+this.fontSize)}if(this.variant){i.push("pds-link--"+this.variant)}return i.join(" ")};i.prototype.render=function(){return s("a",{key:"de51c27a4c7e3ab6f105f40b683f7c8d1561049c",class:this.classNames(),href:this.href,id:this.componentId,target:this.external?"_blank":undefined,part:"link"},s("slot",{key:"3c4fbcff6544a604d81dd4388a504a902d6ee130"},this.href),this.external&&s("pds-icon",{key:"fd1acc513efd16134c062ad3845d44be20a911cf",icon:e,size:this.fontSize}))};return i}());a.style=o}}}));
+//# sourceMappingURL=p-bbaaa246.system.entry.js.map

package/dist/pine-core/p-bbaaa246.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsLinkCss","PdsLinkStyle0","PdsLink","exports","class_1","prototype","classNames","this","fontSize","push","variant","join","render","h","key","class","href","id","componentId","target","external","undefined","part","icon","launch","size"],"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"],"mappings":"wLAAA,IAAMA,EAAa,m8CACnB,IAAAC,EAAeD,E,ICYFE,EAAOC,EAAA,sB,iEAUC,M,aAMmB,S,cAUC,K,oBAO/BC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,aAAeF,KAAKC,S,CAGtC,GAAID,KAAKG,QAAS,CAChBJ,EAAWG,KAAK,aAAeF,KAAKG,Q,CAGtC,OAAOJ,EAAWK,KAAK,I,EAGzBP,EAAAC,UAAAO,OAAA,WAEE,OACEC,EAAA,KAAAC,IAAA,2CACEC,MAAOR,KAAKD,aACZU,KAAMT,KAAKS,KACXC,GAAIV,KAAKW,YACTC,OAAQZ,KAAKa,SAAW,SAAWC,UACnCC,KAAK,QAELT,EAAA,QAAAC,IAAA,4CAAOP,KAAKS,MACXT,KAAKa,UACJP,EAAA,YAAAC,IAAA,2CAAUS,KAAMC,EAAQC,KAAMlB,KAAKC,W,WA3DzB,I"}

package/dist/pine-core/p-bc1cb8e2.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as a,H as t,g as i}from"./p-2f77dbd3.js";const e=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";const n=e;const p=class{constructor(a){s(this,a);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}tabClickHandler(s){if(this.componentId===s.detail[1]){this.activeTabIndex=s.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(s){const a=["ArrowLeft","ArrowRight","Home","End"];if(a.includes(s.key)){s.preventDefault();this.moveActiveTab(s.key)}}moveActiveTab(s){const a=0;const t=this.tabs.length-1;let i=null;switch(s){case"ArrowLeft":i=this.activeTabIndex===a?t:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===t?a:this.activeTabIndex+1;break;case"Home":i=a;break;case"End":i=t;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i}findAllChildren(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")}propGeneration(s,a=0){s.parentComponentId=this.componentId.toString();s.variant=this.variant.toString();s.selected=this.activeTabName===s.name?true:false;s["index"]=a}passPropsToChildren(){this.tabs.forEach(((s,a)=>{if(this.activeTabName===s.name)this.activeTabIndex=a;this.propGeneration(s,a)}));this.tabPanels.forEach((s=>{this.propGeneration(s)}))}classNames(){let s=`pds-tabs`;if(this.variant&&this.variant!="primary"){const a=`pds-tabs--${this.variant}`;s+=" "+a}return s}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return a(t,{key:"92748fc6123067ba04f9cc81ea949366fb1c2a8f","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},a("div",{key:"809cbe1ed4e973db39ea69be9e30ac54881564af",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},a("slot",{key:"b23af8a48dee0528cc9f7d2b84a42411e2b14e6d",name:"tabs"})),a("slot",{key:"fdb46b7125f735531b13c1ac82a08f27998e7511",name:"tabpanels"}))}get el(){return i(this)}};p.style=n;export{p as pds_tabs};
+//# sourceMappingURL=p-bc1cb8e2.entry.js.map

package/dist/pine-core/{p-de8abfde.system.entry.js.map → p-bc1cb8e2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","exports","class_1","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --panel-margin-top: Optional margin-top for panels\n   */\n  --panel-margin-top: 0;\n\n  /**\n   * @prop --panel-padding: Optional padding for panels\n   */\n  --panel-padding: 0;\n\n  --gap-md: var(--pine-spacing-md);\n  --gap-xs: var(--pine-spacing-xs);\n  --gap-sm: 16px var(--pine-spacing-sm);\n  --outline: 2px solid var(--pine-color-primary-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--gap-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--gap-sm);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"0JAAA,IAAMA,EAAa,+bACnB,IAAAC,EAAeD,E,ICUFE,EAAOC,EAAA,sB,iKAmClBC,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,EAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,uHA9HC,I"}
+{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,giBACnB,MAAAC,EAAeD,E,MCUFE,EAAO,M,kKAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,CAGhB,eAAAG,GACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,CAGpC,cAAAE,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,CAGX,mBAAAK,GACN/B,KAAKK,KAAK2B,SAAQ,CAACP,EAAOC,KACxB,GAAI1B,KAAKI,gBAAkBqB,EAAMnB,KAAMN,KAAKG,eAAiBuB,EAC7D1B,KAAKwB,eAAeC,EAAOC,EAAM,IAGnC1B,KAAKuB,UAAUS,SAASP,IACtBzB,KAAKwB,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAIlC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAanC,KAAK6B,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACEpC,KAAKoB,iB,CAGP,mBAAAiB,GACErC,KAAK+B,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAA7B,IAAA,6DAAkBX,KAAKI,cAAeqC,MAAOzC,KAAKiC,aAAcS,GAAI1C,KAAKC,aAC5EsC,EAAA,OAAA5B,IAAA,2CAAK8B,MAAM,oBAAoBE,KAAK,UAAS,aAAa3C,KAAK4C,cAC7DL,EAAA,QAAA5B,IAAA,2CAAML,KAAK,UAEbiC,EAAA,QAAA5B,IAAA,2CAAML,KAAK,c"}

package/dist/pine-core/p-bc4bbda0.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as o,h as r,H as n}from"./p-2f77dbd3.js";import{d as i,r as c}from"./p-403a20e8.js";const s=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-300);--color-background-accent-interactive:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-300);--color-background-danger-interactive:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-300);--color-background-info-interactive:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-300);--color-background-neutral-dot:var(--pine-color-charcoal-100);--color-background-neutral-interactive:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-300);--color-background-success-interactive:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-300);--color-background-warning-interactive:var(--pine-color-yellow-200);--font-size-sm:var(--pine-font-size-087);--font-size-body:var(--pine-font-size-100);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-100);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-interactive)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-interactive)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-interactive)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-interactive)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-interactive)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-body);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-body);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";const e=s;const d=class{constructor(r){a(this,r);this.pdsTagCloseClick=o(this,"pdsTagCloseClick",7);this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}classNames(){const a=["pds-chip"];if(this.large){a.push("pds-chip--large")}if(this.variant){a.push("pds-chip--"+this.variant)}if(this.sentiment){a.push("pds-chip--"+this.sentiment)}return a.join("  ")}setChipContent(){const a=this.variant==="dropdown";const o=a?r("button",{class:"pds-chip__button",type:"button"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,r("pds-icon",{icon:i,size:"12px","aria-hidden":"true"})):r("span",{class:"pds-chip__label"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return o}render(){return r(n,{key:"a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&r("button",{key:"83d2273a0785c4516a57ed618645d937ba33f9f5",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},r("pds-icon",{key:"6ca04621d1acd134ce3352a034ea69ea7f794fbd",icon:c,size:"12px"})))}};d.style=e;export{d as pds_chip};
+//# sourceMappingURL=p-bc4bbda0.entry.js.map

package/dist/pine-core/p-bc4bbda0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsChipCss","PdsChipStyle0","PdsChip","this","handleCloseClick","pdsTagCloseClick","emit","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --border-radius: var(--pine-border-radius-200);\n\n  --color-background-accent: var(--pine-color-purple-100);\n  --color-background-accent-dot: var(--pine-color-purple-300);\n  --color-background-accent-interactive: var(--pine-color-purple-200);\n  --color-background-danger: var(--pine-color-red-100);\n  --color-background-danger-dot: var(--pine-color-red-300);\n  --color-background-danger-interactive: var(--pine-color-red-200);\n  --color-background-info: var(--pine-color-blue-100);\n  --color-background-info-dot: var(--pine-color-blue-300);\n  --color-background-info-interactive: var(--pine-color-blue-200);\n  --color-background-neutral: var(--pine-color-grey-300);\n  --color-background-neutral-dot: var(--pine-color-charcoal-100);\n  --color-background-neutral-interactive: var(--pine-color-grey-400);\n  --color-background-success: var(--pine-color-green-100);\n  --color-background-success-dot: var(--pine-color-green-300);\n  --color-background-success-interactive: var(--pine-color-green-200);\n  --color-background-warning: var(--pine-color-yellow-100);\n  --color-background-warning-dot: var(--pine-color-yellow-300);\n  --color-background-warning-interactive: var(--pine-color-yellow-200);\n\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-body: var(--pine-font-size-100);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-100);\n\n  --spacing-xxs: calc(var(--pine-spacing-050) / 2);\n  --spacing-xs: var(--pine-spacing-050);\n  --spacing-sm: calc(var(--pine-spacing-150) / 2);\n  --spacing-md: var(--pine-spacing-100);\n  --spacing-lg: calc(var(--pine-spacing-250) / 2);\n  --spacing-xl: var(--pine-spacing-150);\n  --spacing-xxl: calc(var(--pine-spacing-350) / 2);\n\n  --sizing-close: 10px;\n  --sizing-close-lg: 24px;\n  --sizing-dot: 4px;\n\n  align-items: center;\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--color-background-accent),\n  danger: var(--color-background-danger),\n  info: var(--color-background-info),\n  neutral: var(--color-background-neutral),\n  success: var(--color-background-success),\n  warning: var(--color-background-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--color-background-accent-dot),\n  danger: var(--color-background-danger-dot),\n  info: var(--color-background-info-dot),\n  neutral: var(--color-background-neutral-dot),\n  success: var(--color-background-success-dot),\n  warning: var(--color-background-warning-dot),\n);\n\n$pds-chip-sentiment-interactive: (\n  accent: var(--color-background-accent-interactive),\n  danger: var(--color-background-danger-interactive),\n  info: var(--color-background-info-interactive),\n  neutral: var(--color-background-neutral-interactive),\n  success: var(--color-background-success-interactive),\n  warning: var(--color-background-warning-interactive),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-interactive, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map-get($pds-chip-sentiment-interactive, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: inline-block;\n  height: var(--sizing-dot);\n  margin-block-end: var(--spacing-xxs);\n  margin-inline-end: var(--spacing-xs);\n  width: var(--sizing-dot);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: 0;\n\n  .pds-chip__dot {\n    margin-block-end: calc(var(--spacing-xxs) / 4);\n    margin-block-start: var(--spacing-xxs);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--border-radius);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--spacing-xxs) * -1);\n    margin-inline-start: var(--spacing-xs);\n  }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n  padding-block: var(--spacing-xxs);\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--spacing-md) * -1);\n  margin-inline-start: var(--spacing-xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  font-size: var(--font-size-body);\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-xxl);\n\n  &:host(.pds-chip--dropdown) {\n    padding-block: var(--spacing-xs);\n    padding-inline: var(--spacing-xxs);\n\n    .pds-chip__dot {\n      margin-block-end: 0;\n    }\n  }\n\n  .pds-chip__button {\n    font-size: var(--font-size-body);\n    padding-inline: var(--spacing-xl)\n  }\n\n  .pds-chip__close {\n    height: var(--sizing-close-lg);\n    margin-inline-end: calc(var(--spacing-xl) * -1);\n    width: var(--sizing-close-lg);\n  }\n\n  &:host(.pds-chip--tag) {\n    padding-block: var(--spacing-xs);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: 'pds-chip.scss',\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAa,2rNACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,4EAwCVC,KAAAC,iBAAmB,KACzBD,KAAKE,iBAAiBC,MAAM,E,0CA/BwD,U,SAMxE,M,gCAWE,M,aAM+B,M,CAWvC,UAAAC,GACN,MAAMA,EAAa,CAAC,YAEpB,GAAIJ,KAAKK,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIN,KAAKO,QAAS,CAChBH,EAAWE,KAAK,aAAeN,KAAKO,Q,CAEtC,GAAIP,KAAKQ,UAAW,CAClBJ,EAAWE,KAAK,aAAeN,KAAKQ,U,CAGtC,OAAOJ,EAAWK,KAAK,K,CAGjB,cAAAC,GACN,MAAMC,EAAaX,KAAKO,UAAY,WACpC,MAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnCf,KAAKgB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDd,KAAKiB,MACNJ,EAAA,YAAUK,KAAMC,EAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACTd,KAAKgB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDd,KAAKiB,OAIV,OAAOL,C,CAGT,MAAAS,GACE,OACER,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAOd,KAAKI,aAAcoB,GAAIxB,KAAKyB,aACtCzB,KAAKU,iBACLV,KAAKO,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS1B,KAAKC,iBAAgB,aAAa,UACvFY,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U"}

package/dist/pine-core/p-bd5135c3.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as s,H as t}from"./p-2f77dbd3.js";const e=":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);height:auto;width:100%}";const d=e;const n=class{constructor(s){i(this,s);this.alt="";this.componentId=undefined;this.height=undefined;this.loading="eager";this.sizes=undefined;this.src=undefined;this.srcset=undefined;this.width=undefined}render(){return s(t,{key:"8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea",class:{"pds-image":true},id:this.componentId},s("img",{key:"3cc2d1c185244c8e8de2f7258b85194b37a4ff38",alt:this.alt,height:this.height,loading:this.loading,sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))}};n.style=d;export{n as pds_image};
+//# sourceMappingURL=p-bd5135c3.entry.js.map

package/dist/pine-core/p-bd5135c3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsImageCss","PdsImageStyle0","PdsImage","render","h","Host","key","class","id","this","componentId","alt","height","loading","sizes","src","srcset","width"],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --image-aspect-ratio: The image's aspect ratio.\n  */\n\n  --dimension-aspect-ratio: auto;\n  display: inline-block;\n}\n\nimg {\n  aspect-ratio: var(--dimension-aspect-ratio);\n  height: auto;\n  width: 100%;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrl: 'pds-image.scss',\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string.\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certian breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,kIACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,M,kCAKJ,G,8DAiBsB,Q,mFA0BrC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,YAAa,MAEfC,GAAIC,KAAKC,aAETN,EAAA,OAAAE,IAAA,2CACEK,IAAKF,KAAKE,IACVC,OAAQH,KAAKG,OACbC,QAASJ,KAAKI,QACdC,MAAOL,KAAKK,MACZC,IAAKN,KAAKM,IACVC,OAAQP,KAAKO,OACbC,MAAOR,KAAKQ,Q"}

package/dist/pine-core/p-c3de3fb3.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function d(e){try{s(r.next(e))}catch(e){o(e)}}function a(e){try{s(r["throw"](e))}catch(e){o(e)}}function s(e){e.done?n(e.value):i(e.value).then(d,a)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,d;return d={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(d[Symbol.iterator]=function(){return this}),d;function a(e){return function(t){return s([e,t])}}function s(a){if(r)throw new TypeError("Generator is already executing.");while(d&&(d=0,a[0]&&(n=0)),n)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(e){"use strict";var t,n,r,i,o;return{setters:[function(e){t=e.r;n=e.c;r=e.h;i=e.H},function(e){o=e.a}],execute:function(){var d=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-charcoal-400);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var a=d;var s=e("pds_copytext",function(){function e(e){var r=this;t(this,e);this.pdsCopyTextClick=n(this,"pdsCopyTextClick",7);this.copyToClipboard=function(e){return __awaiter(r,void 0,void 0,(function(){var t;return __generator(this,(function(n){switch(n.label){case 0:n.trys.push([0,3,,4]);if(!(typeof navigator.clipboard!=="undefined"))return[3,2];return[4,navigator.clipboard.writeText(e)];case 1:n.sent();this.pdsCopyTextClick.emit("Copied to clipboard");n.label=2;case 2:return[3,4];case 3:t=n.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(t));return[3,4];case 4:return[2]}}))}))};this.handleClick=function(){r.copyToClipboard(r.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}e.prototype.classNames=function(){var e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join("  ")};e.prototype.render=function(){return r(i,{key:"9960146a3ac3810bc14834a976f2e50627569dad",class:this.classNames(),id:this.componentId},r("pds-button",{key:"9d8c6dc9824be2483982d4362a5c8d8c4c232432",type:"button",variant:"unstyled",onClick:this.handleClick},r("span",{key:"7c093ec0ae96afdbad02adda3901be87989c9ce4"},this.value),r("pds-icon",{key:"466f5c685e32be0067938869afee751db522d3d3",icon:o,size:"16px"})))};return e}());s.style=a}}}));
+//# sourceMappingURL=p-c3de3fb3.system.entry.js.map

package/dist/pine-core/p-c3de3fb3.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsCopytextCss","PdsCopytextStyle0","PdsCopytext","exports","this","copyToClipboard","value","__awaiter","_this","navigator","clipboard","writeText","_a","sent","pdsCopyTextClick","emit","concat","err_1","handleClick","class_1","prototype","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-radius-default: var(--pine-border-radius-125);\n  --border-radius-hover: var(--pine-border-radius-0);\n\n  --border-width-default: var(--pine-border-width-none);\n\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-background-default: var(--pine-color-white);\n  --color-border-interactive-hover: var(--pine-color-grey-400);\n  --color-text-hover: var(--pine-color-charcoal-400);\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n  --font-size-default: var(--pine-font-size-100);\n  --font-weight-default: var(--pine-font-weight-semi-bold);\n\n  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n  --spacing-bordered-padding-block: var(--pine-spacing-100);\n  --spacing-bordered-padding-inline: var(--pine-spacing-200);\n  --spacing-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-050);\n  --spacing-padding-inline: var(--pine-spacing-100);\n  --spacing-padding-none: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  pds-button {\n    align-items: center;\n    background: var(--color-background-default);\n    border: var(--border-width-default);\n    border-radius: var(--border-radius-default);\n    display: inline-flex;\n    font: var(--typography-default);\n    max-width: 100%;\n    padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      border-radius: var(--border-radius-hover);\n      color: var(--color-text-hover);\n    }\n\n    span {\n      margin-inline-end: var(--spacing-margin-inline-end);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border: var(--border-width-default);\n    padding: var(--spacing-padding-none);\n\n    pds-button {\n      padding: var(--spacing-padding-none);\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--border-interactive-default);\n      border-radius: var(--border-radius-default);\n      margin-inline-end: var(--spacing-bordered-margin-inline-end);\n      padding-block: var(--spacing-bordered-padding-block);\n      padding-inline: var(--spacing-bordered-padding-inline);\n    }\n\n    :hover {\n      span {\n        border: var(--border-interactive-hover);\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"spDAAA,IAAMA,EAAiB,+zGACvB,IAAAC,EAAeD,E,ICQFE,EAAWC,EAAA,0B,sFAkCdC,KAAAC,gBAAkB,SAAOC,GAAa,OAAAC,UAAAC,OAAA,qB,oGAE/BC,UAAUC,YAAc,aAA/B,YACF,SAAMD,UAAUC,UAAUC,UAAUL,I,OAApCM,EAAAC,OACAT,KAAKU,iBAAiBC,KAAK,uB,+CAG7BX,KAAKU,iBAAiBC,KAAK,oCAAAC,OAAoCC,I,qCAI3Db,KAAAc,YAAc,WACpBV,EAAKH,gBAAgBG,EAAKF,M,cAzCM,K,0CAWd,M,cAMD,M,qBA2BXa,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,gBAEpB,GAAIjB,KAAKkB,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAInB,KAAKoB,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAInB,KAAKqB,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,EAGzBP,EAAAC,UAAAO,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO3B,KAAKiB,aAAcW,GAAI5B,KAAK6B,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAShC,KAAKc,aACzDU,EAAA,QAAAE,IAAA,4CAAO1B,KAAKE,OACZsB,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,EAAUC,KAAK,U,WAxEjB,I"}

package/dist/pine-core/p-c721d912.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-0ec12306.system.js"],(function(i){"use strict";var e,r,t,o,a,s,n,c;return{setters:[function(i){e=i.r;r=i.c;t=i.h;o=i.H;a=i.g},function(i){s=i.m;n=i.P;c=i.a}],execute:function(){var l=':host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 2px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 2px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-charcoal-400);--color-background-checked-hover:var(--pine-color-charcoal-400);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-charcoal-200);--color-outline-focus:var(--pine-color-blue-200);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-400);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--spacing-label-gap-size:var(--pine-spacing-150);--spacing-input-toggle-offset:calc(var(--pine-spacing-050) / 2);--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--spacing-label-gap-size));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--line-height-label);-webkit-margin-start:var(--spacing-label-gap-size);margin-inline-start:var(--spacing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}';var d=l;var h=i("pds_switch",function(){function i(i){var t=this;e(this,i);this.pdsSwitchChange=r(this,"pdsSwitchChange",7);this.onSwitchUpdate=function(i){if(t.disabled)return;t.pdsSwitchChange.emit(i)};this.switchClassNames=function(){var i="pds-switch";if(t.invalid===true){i+=" pds-switch--error"}if(t.helperMessage!==undefined){i+=" pds-switch--message"}return i};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.type="checkbox";this.value=undefined}i.prototype.render=function(){return t(o,{key:"f00007b5d1bde6895cb7f410b82e5c3669d75327",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},t("input",{key:"c6c0ae9576a198c9f0038ebd22b78df0c5a41794","aria-describedby":c(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,checked:this.checked,class:"pds-switch__input",disabled:this.disabled,id:this.componentId,name:this.name?this.name:this.componentId,onChange:this.onSwitchUpdate,required:this.required,type:this.type,value:this.value}),t(n,{key:"d6c3b0c584d2c4fd6cc99507794a3e961fbf99a5",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&t("div",{key:"4f9f581e9a01e67d076bafaf1d28fe52b87081fc",class:"pds-switch__message",id:s(this.componentId,"helper")},this.helperMessage),this.errorMessage&&t("div",{key:"aeca71b92664b2e7ef4c7fb0d103996a05c5318f",class:"pds-switch__message pds-switch__message--error",id:s(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};Object.defineProperty(i.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return i}());h.style=d}}}));
+//# sourceMappingURL=p-c721d912.system.entry.js.map

package/dist/pine-core/p-c721d912.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsSwitchCss","PdsSwitchStyle0","PdsSwitch","exports","this","onSwitchUpdate","e","_this","disabled","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","class_1","prototype","render","h","Host","key","class","assignDescription","componentId","checked","id","name","onChange","required","type","value","PdsLabel","classNames","htmlFor","text","label","messageId","errorMessage"],"sources":["src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n  --border-radius-input: var(--pine-border-radius-200);\n\n  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);\n  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);\n\n  --color-background-checked: var(--pine-color-charcoal-400);\n  --color-background-checked-hover: var(--pine-color-charcoal-400);\n  --color-background-disabled: var(--pine-color-grey-300);\n  --color-background-hover: var(--pine-color-grey-500);\n  --color-background-input-default: var(--pine-color-grey-400);\n  --color-input-toggle: var(--pine-color-white);\n  --color-message-text: var(--pine-color-charcoal-200);\n  --color-outline-focus: var(--pine-color-blue-200);\n  --color-outline-focus-error: var(--pine-color-red-200);\n  --color-text-default: var(--pine-color-charcoal-400);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-error: var(--pine-color-red-300);\n\n  --dimension-input-height: 20px;\n  --dimension-input-width: 36px;\n\n  --line-height-label: var(--pine-line-height-150);\n\n  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));\n\n  --spacing-label-gap-size: var(--pine-spacing-150);\n  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);\n  --spacing-message-block: var(--pine-spacing-050);\n  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));\n\n  --number-transition-timing: 0.15s ease-out;\n\n\n  align-items: flex-start;\n  color: var(--color-text-default);\n  display: inline-flex;\n  flex-flow: row wrap;\n  margin-block-end: var(--pine-spacing-md);\n  position: relative;\n}\n\n:host(.pds-switch--error) {\n  color: var(--color-text-error);\n\n  input,\n  input:checked,\n  input:hover:not(:disabled):not(:checked) {\n    background-color: var(--color-text-error);\n  }\n\n  input:focus-visible:not(:disabled):not(:checked) {\n    box-shadow: var(--box-shadow-focus-error);\n  }\n}\n\n// switch container\ninput {\n  appearance: none;\n  background: var(--color-background-input-default);\n  border: 0;\n  border-radius: var(--border-radius-input);\n  cursor: pointer;\n  display: inline-block;\n  height: var(--dimension-input-height);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transform: translateY(2px);\n  transition: var(--number-transition-timing);\n  transition-property: background, border, color;\n  width: var(--dimension-input-width);\n\n  // switch toggle\n  &::after {\n    background: var(--color-input-toggle);\n    border-radius: 50%;\n    box-shadow: var(--box-shadow-input-toggle);\n    content: \"\";\n    display: block;\n    height: var(--sizing-input-toggle-size);\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    position: absolute;\n    transform: translate3d(-100%, -50%, 0);\n    transition: transform var(--number-transition-timing);\n    width: var(--sizing-input-toggle-size);\n  }\n}\n\nlabel {\n  cursor: pointer;\n  display: inline-flex;\n  flex-grow: 1;\n  line-height: var(--line-height-label);\n  margin-inline-start: var(--spacing-label-gap-size);\n\n  .pds-switch--error & {\n    color: inherit;\n  }\n}\n\n// Help and error messages\n.pds-switch__message {\n  color: var(--color-message-text);\n  flex: 1 0 100%;\n  font-size: var(--pine-font-size-body-sm);\n  line-height: var(--pine-line-height-sm);\n  margin-inline-start: var(--spacing-message-inline);\n\n  + .pds-switch__message {\n    margin-block-start: var(--spacing-message-block);\n  }\n}\n\n.pds-switch__message--error {\n  color: inherit;\n}\n\n// Disabled state\ninput:disabled {\n  background-color: var(--color-background-disabled);\n  cursor: not-allowed;\n\n  ~ label {\n    color: var(--color-text-disabled);\n    cursor: initial;\n  }\n\n  .pds-switch__message {\n    color: initial;\n  }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n  background-color: var(--color-background-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n  box-shadow: var(--box-shadow-focus);\n  outline: none;\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n  transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n  background-color: currentColor;\n  color: var(--color-background-checked);\n\n  &:hover {\n    border-color: currentColor;\n    color: var(--color-background-checked-hover);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrl: 'pds-switch.scss',\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\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   * Determines the input 'checked' state\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input\n   */\n  @Prop() required? = false;\n\n  /**\n   * Specifies the underlying input element type\n   * @defaultValue 'checkbox'\n   */\n  @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n  /**\n   * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change\n  */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Generate switch classes\n   */\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type={this.type}\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"gOAAA,IAAMA,EAAe,qqJACrB,IAAAC,EAAeD,E,ICQFE,EAASC,EAAA,wB,oFAgEZC,KAAAC,eAAiB,SAACC,GACxB,GAAIC,EAAKC,SAAU,OACnBD,EAAKE,gBAAgBC,KAAKJ,E,EAMpBF,KAAAO,iBAAmB,WACzB,IAAIC,EAAgB,aAEpB,GAAIL,EAAKM,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIL,EAAKO,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,C,0CAtES,M,cAKE,M,sEAeD,M,uDAeC,M,UAMiB,W,qBAgCrCI,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOlB,KAAKO,mBAAkB,gBAAiBP,KAAKI,SAAW,OAAS,MAC5EW,EAAA,SAAAE,IAAA,8DACoBE,EAAkBnB,KAAKoB,YAAapB,KAAKS,QAAST,KAAKU,eAAc,eACzEV,KAAKS,QAAU,OAASE,UACtCU,QAASrB,KAAKqB,QACdH,MAAM,oBACNd,SAAUJ,KAAKI,SACfkB,GAAItB,KAAKoB,YACTG,KAAMvB,KAAKuB,KAAOvB,KAAKuB,KAAOvB,KAAKoB,YACnCI,SAAUxB,KAAKC,eACfwB,SAAUzB,KAAKyB,SACfC,KAAM1B,KAAK0B,KACXC,MAAO3B,KAAK2B,QAEdZ,EAACa,EAAQ,CAAAX,IAAA,2CAACY,WAAW,oBAAoBC,QAAS9B,KAAKoB,YAAaW,KAAM/B,KAAKgC,QAC9EhC,KAAKU,eACJK,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPI,GAAIW,EAAUjC,KAAKoB,YAAa,WAE/BpB,KAAKU,eAGTV,KAAKkC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPI,GAAIW,EAAUjC,KAAKoB,YAAa,SAAQ,YAC9B,aAETpB,KAAKkC,c,uHAnHI,I"}

package/dist/pine-core/p-cfb22651.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,r,o,i){function a(t){return t instanceof o?t:new o((function(r){r(t)}))}return new(o||(o=Promise))((function(o,e){function n(t){try{l(i.next(t))}catch(t){e(t)}}function d(t){try{l(i["throw"](t))}catch(t){e(t)}}function l(t){t.done?o(t.value):a(t.value).then(n,d)}l((i=i.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var o={label:0,sent:function(){if(e[0]&1)throw e[1];return e[1]},trys:[],ops:[]},i,a,e,n;return n={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function d(t){return function(r){return l([t,r])}}function l(d){if(i)throw new TypeError("Generator is already executing.");while(n&&(n=0,d[0]&&(o=0)),o)try{if(i=1,a&&(e=d[0]&2?a["return"]:d[0]?a["throw"]||((e=a["return"])&&e.call(a),0):a.next)&&!(e=e.call(a,d[1])).done)return e;if(a=0,e)d=[d[0]&2,e.value];switch(d[0]){case 0:case 1:e=d;break;case 4:o.label++;return{value:d[1],done:false};case 5:o.label++;a=d[1];d=[0];continue;case 7:d=o.ops.pop();o.trys.pop();continue;default:if(!(e=o.trys,e=e.length>0&&e[e.length-1])&&(d[0]===6||d[0]===2)){o=0;continue}if(d[0]===3&&(!e||d[1]>e[0]&&d[1]<e[3])){o.label=d[1];break}if(d[0]===6&&o.label<e[1]){o.label=e[1];e=d;break}if(e&&o.label<e[2]){o.label=e[2];o.ops.push(d);break}if(e[2])o.ops.pop();o.trys.pop();continue}d=r.call(t,o)}catch(t){d=[6,t];a=0}finally{i=e=0}if(d[0]&5)throw d[1];return{value:d[0]?d[1]:void 0,done:true}}};System.register(["./p-64b4cb70.system.js"],(function(t){"use strict";var r,o,i,a,e;return{setters:[function(t){r=t.r;o=t.c;i=t.h;a=t.H;e=t.g}],execute:function(){var n=function(t){var r=t.elem,o=t.elemPlacement,i=t.overlay,a=t.offset,e=a===void 0?8:a;if(r==undefined)return;var n=r.getBoundingClientRect();var d=i.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):i.style.top="50%";i.style.left="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("left"):i.style.top="50%";i.style.right="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("bottom"):i.style.top="calc(".concat(n.height,"px + ").concat(e,"px)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break;case o.includes("top"):i.style.top="calc((".concat(d.height,"px + ").concat(e,"px) * -1)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break}};var d=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var l=d;var s=t("pds_tooltip",function(){function t(t){var i=this;r(this,t);this.pdsTooltipHide=o(this,"pdsTooltipHide",7);this.pdsTooltipShow=o(this,"pdsTooltipShow",7);this.handleHide=function(){i.hideTooltip();i.pdsTooltipHide.emit()};this.handleShow=function(){i.showTooltip();i.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){n({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return i(a,{key:"088766be31b8716e158cbffd4afc4ada0f14dc3d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},i("div",{key:"c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},i("span",{key:"25a69f567a33df83ff784d36de5bce86874d6d1d","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},i("slot",{key:"eab3bbca9b913b04ef4dfe7a8e472c43d57c4979"})),i("div",{key:"bdaa9f26f848b440a8432a44481f8a1059ae0689",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},i("slot",{key:"0e62fe237e9a39208aa2146e2dc1d6df6b25b41d",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}());s.style=l}}}));
+//# sourceMappingURL=p-cfb22651.system.entry.js.map

package/dist/pine-core/p-cfb22651.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","exports","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted([slot=\"content\"]) {\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gnDAOO,IAAMA,EAAkB,SAACC,G,IAACC,EAAID,EAAAC,KAAEC,EAAaF,EAAAE,cAAEC,EAAOH,EAAAG,QAAEC,EAAAJ,EAAAK,SAAMD,SAAA,EAAG,EAACA,EACvE,GAAIH,GAAQK,UAAW,OAEvB,IAAMC,EAAON,EAAKO,wBAClB,IAAMC,EAAcN,EAAQK,wBAG5B,IAAKN,GAAiBA,GAAiB,GAAI,OAE3C,OAAQ,MACN,KAAKA,EAAcQ,SAAS,SAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAME,KAAO,QAAAC,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACrDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,QAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAMO,MAAQ,QAAAJ,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACtDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,UAC1BP,EAAQQ,MAAMC,IAAM,QAAAE,OAAQP,EAAKY,OAAM,SAAAL,OAAQT,EAAM,OACrDF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,OAC1BP,EAAQQ,MAAMC,IAAM,SAAAE,OAASL,EAAYU,OAAM,SAAAL,OAAQT,EAAM,aAC7DF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAE5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEN,ECxFA,IAAMI,EAAgB,sxJACtB,IAAAC,EAAeD,E,ICcFE,EAAUC,EAAA,yB,iIAkHbC,KAAAC,WAAa,WACnBC,EAAKC,cACLD,EAAKE,eAAeC,M,EAGdL,KAAAM,WAAa,WACnBJ,EAAKK,cACLL,EAAKM,eAAeH,M,cA7GJ,M,gEAgBE,K,iBAME,M,eAkBL,Q,YAM8B,K,CAG/CI,EAAAC,UAAAC,iBAAA,WACE,GAAIX,KAAKY,OAAQ,CACfZ,KAAKM,Y,KACA,CACLN,KAAKC,Y,GAcTQ,EAAAC,UAAAG,kBAAA,WACE,GAAIb,KAAKY,OAAQ,CACfZ,KAAKO,a,CAGPP,KAAKc,GAAGC,iBAAiB,OAAQf,KAAKC,WAAY,MAClDD,KAAKc,GAAGC,iBAAiB,QAASf,KAAKM,WAAY,K,EAGrDG,EAAAC,UAAAM,mBAAA,WACE,GAAIhB,KAAKY,OAAQ,CACfZ,KAAKO,a,GAITE,EAAAC,UAAAO,mBAAA,WACE1C,EAAgB,CAACE,KAAMuB,KAAKc,GAAIpC,cAAesB,KAAKkB,UAAWvC,QAASqB,KAAKmB,W,EAOzEV,EAAAC,UAAAH,YAAN,W,qFACEP,KAAKY,OAAS,K,iBAOVH,EAAAC,UAAAP,YAAN,W,qFACEH,KAAKY,OAAS,M,iBAahBH,EAAAC,UAAAU,OAAA,eAAAlB,EAAAF,KACE,OACEqB,EAACC,EAAI,CAAAC,IAAA,2CACHC,aAAcxB,KAAKM,WACnBmB,aAAczB,KAAKC,WACnByB,UAAW1B,KAAKM,WAChBqB,WAAY3B,KAAKC,YAEjBoB,EAAA,OAAAE,IAAA,2CACEK,MAAO,uDAAAtC,OAEUU,KAAKkB,UAAS,kBAAA5B,OAC3BU,KAAK6B,YAAc,gCAAkC,GAAE,kBAAAvC,OACvDU,KAAKY,OAAS,uBAAyB,GAAE,kBAAAtB,OACzCU,KAAK8B,SAAW,GAAK,wBAAuB,iBAGhDT,EAAA,QAAAE,IAAA,8DACoBvB,KAAK+B,YACvBH,MAAM,wBAENP,EAAA,QAAAE,IAAA,8CAGFF,EAAA,OAAAE,IAAA,2CAAKK,MAAM,uBAAsB,cAClB5B,KAAKY,OAAS,QAAU,OAAM,YAChCZ,KAAKY,OAAS,SAAW,MACpCoB,GAAIhC,KAAK+B,YACTE,IAAK,SAACnB,GAAE,OAAMZ,EAAKiB,UAAYL,CAAvB,EACRoB,KAAK,WAELb,EAAA,QAAAE,IAAA,2CACEY,KAAK,YAENnC,KAAKoC,U,oPA9JK,I"}

package/dist/pine-core/p-d0828f12.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as n,H as r}from"./p-2f77dbd3.js";import{d as i}from"./p-403a20e8.js";const t=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open] .pds-accordion__body{display:none;}details[open] .pds-accordion__body.open{display:block}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";const o=t;const e=class{constructor(n){a(this,n);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a;if(a===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return n(r,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},n("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),n("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},n("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),n("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:i})),n("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:`pds-accordion__body ${this.isOpen?"open":""}`,ref:a=>this.containerEl=a},n("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};e.style=o;export{e as pds_accordion};
+//# sourceMappingURL=p-d0828f12.entry.js.map

package/dist/pine-core/p-d0828f12.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --border-radius-default: var(--pine-border-radius-100);\n\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-content-background-default: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-300);\n  --color-text-default: var(--pine-color-charcoal-200);\n  --color-text-active: var(--pine-color-charcoal-500);\n  --color-text-hover: var(--pine-color-charcoal-300);\n\n  --number-animation-transform-timing: 200ms;\n\n  --spacing-details-padding-inline: var(--pine-spacing-150);\n  --spacing-summary-padding-block: var(--pine-spacing-050);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  border-radius: var(--border-radius-default);\n  padding-inline: var(--spacing-details-padding-inline);\n\n  pds-icon {\n    transform: scaleY(1);\n    transition: transform var(--number-animation-transform-timing);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n  transition: transform var(--number-animation-transform-timing);\n\n  summary {\n    color: var(--color-text-active);\n    font: var(--typography-default);\n\n    pds-icon {\n      transform: scaleY(-1);\n      transition: transform var(--number-animation-transform-timing);\n    }\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  .pds-accordion__body {\n    display: none;\n\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    &.open {\n      display: block;\n    }\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius-default);\n  color: var(--color-text-default);\n  font: var(--typography-default);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\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  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n  private containerEl: HTMLDivElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n\n    if ( newValue === true ) {\n      this.containerEl.classList.add('open');\n    } else {\n      this.containerEl.classList.remove('open');\n    }\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={ downSmall } />\n          </summary>\n          <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,okGACxB,MAAAC,EAAeD,E,MCWFE,EAAY,M,yBA+BfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCArBU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,EAEd,GAAKA,IAAa,KAAO,CACvBP,KAAKQ,YAAYC,UAAUC,IAAI,O,KAC1B,CACLV,KAAKQ,YAAYC,UAAUE,OAAO,O,EAetC,gBAAAC,GACEZ,KAAKG,UAAUU,iBAAiB,SAAUb,KAAKC,a,CAGjD,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAInB,KAAKoB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAajB,KAAKK,mBAAkB,CAAEkB,IAAMC,GAAOxB,KAAKG,UAAYqB,IAClET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAuBlB,KAAKE,OAAS,OAAS,KAAMqB,IAAMC,GAAOxB,KAAKQ,YAAcgB,GAC9FT,EAAA,QAAAE,IAAA,+C"}

package/dist/pine-core/p-dacd68cf.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js"],(function(r){"use strict";var e,s,i;return{setters:[function(r){e=r.r;s=r.h;i=r.H}],execute:function(){var a=":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)}";var o=a;var t=r("pds_progress",function(){function r(r){e(this,r);this.animated=false;this.componentId=undefined;this.fillColor=undefined;this.label=undefined;this.percent=0;this.showPercent=false}r.prototype.render=function(){return s(i,{key:"5ee3e8b3a4182384a2f70632f1b6420acd27e278",class:this.animated?{"is-animated":this.animated}:""},s("div",{key:"d81206158817db4f806e3c804177614791f4d121",class:"pds-progress"},s("label",{key:"a308666ace23b903e256a71d6f3b65d53fbc6ed6",class:"pds-progress__label",htmlFor:this.componentId},this.label),s("progress",{key:"ded042f6761fe83c12e26f9bcbf191ff2ee66689",id:this.componentId,max:"100",style:this.fillColor?{"--color-progress-fill":this.fillColor}:{},value:this.percent})),this.showPercent&&s("div",{key:"bab83ee8ac34b7caea9ab7b906a1a16b72ee29fc",class:"pds-progress__percentage"},this.percent,"%"))};return r}());t.style=o}}}));
+//# sourceMappingURL=p-dacd68cf.system.entry.js.map

package/dist/pine-core/p-dacd68cf.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsProgressCss","PdsProgressStyle0","PdsProgress","exports","class_1","prototype","render","h","Host","key","class","this","animated","htmlFor","componentId","label","id","max","style","fillColor","value","percent","showPercent"],"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"],"mappings":"kJAAA,IAAMA,EAAiB,imEACvB,IAAAC,EAAeD,E,ICMFE,EAAWC,EAAA,0B,sCAKH,M,sFAsBD,E,iBAMI,K,CAEtBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOC,KAAKC,SAAW,CAAE,cAAeD,KAAKC,UAAa,IAC9DL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,sBAAsBG,QAASF,KAAKG,aAC9CH,KAAKI,OAERR,EAAA,YAAAE,IAAA,2CACEO,GAAIL,KAAKG,YACTG,IAAI,MACJC,MAAOP,KAAKQ,UAAY,CAAE,wBAAyBR,KAAKQ,WAAc,GACtEC,MAAOT,KAAKU,WAIfV,KAAKW,aAAef,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BAA4BC,KAAKU,QAAO,K,WAlDxD,I"}

package/dist/pine-core/p-de79befb.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(n){"use strict";var a,r,i,t;return{setters:[function(n){a=n.r;r=n.h;i=n.H},function(n){t=n.d}],execute:function(){var e=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open] .pds-accordion__body{display:none;}details[open] .pds-accordion__body.open{display:block}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";var o=e;var s=n("pds_accordion",function(){function n(n){var r=this;a(this,n);this.handleToggle=function(){r.isOpen=r.detailsEl.open};this.getOpenAttribute=function(){if(r.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}n.prototype.handleOpenState=function(n){this.isOpen=n;if(n===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};n.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};n.prototype.render=function(){var n=this;return r(i,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},r("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(a){return n.detailsEl=a}}),r("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},r("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),r("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:t})),r("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(a){return n.containerEl=a}},r("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(n,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return n}());s.style=o}}}));
+//# sourceMappingURL=p-de79befb.system.entry.js.map

package/dist/pine-core/p-de79befb.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --border-radius-default: var(--pine-border-radius-100);\n\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-content-background-default: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-300);\n  --color-text-default: var(--pine-color-charcoal-200);\n  --color-text-active: var(--pine-color-charcoal-500);\n  --color-text-hover: var(--pine-color-charcoal-300);\n\n  --number-animation-transform-timing: 200ms;\n\n  --spacing-details-padding-inline: var(--pine-spacing-150);\n  --spacing-summary-padding-block: var(--pine-spacing-050);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  border-radius: var(--border-radius-default);\n  padding-inline: var(--spacing-details-padding-inline);\n\n  pds-icon {\n    transform: scaleY(1);\n    transition: transform var(--number-animation-transform-timing);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n  transition: transform var(--number-animation-transform-timing);\n\n  summary {\n    color: var(--color-text-active);\n    font: var(--typography-default);\n\n    pds-icon {\n      transform: scaleY(-1);\n      transition: transform var(--number-animation-transform-timing);\n    }\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  .pds-accordion__body {\n    display: none;\n\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    &.open {\n      display: block;\n    }\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius-default);\n  color: var(--color-text-default);\n  font: var(--typography-default);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\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  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n  private containerEl: HTMLDivElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n\n    if ( newValue === true ) {\n      this.containerEl.classList.add('open');\n    } else {\n      this.containerEl.classList.remove('open');\n    }\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={ downSmall } />\n          </summary>\n          <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,okGACxB,IAAAC,EAAeD,E,ICWFE,EAAYC,EAAA,2B,mCA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,EAEd,GAAKA,IAAa,KAAO,CACvBV,KAAKW,YAAYC,UAAUC,IAAI,O,KAC1B,CACLb,KAAKW,YAAYC,UAAUE,OAAO,O,GAetCP,EAAAC,UAAAO,iBAAA,WACEf,KAAKI,UAAUY,iBAAiB,SAAUhB,KAAKC,a,EAGjDM,EAAAC,UAAAS,OAAA,eAAAf,EAAAF,KACE,OACEkB,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAItB,KAAKuB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAapB,KAAKM,mBAAkB,CAAEoB,IAAK,SAACC,GAAO,OAAAzB,EAAKE,UAAYuB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB/B,KAAKG,OAAS,OAAS,IAAMuB,IAAK,SAACC,GAAO,OAAAzB,EAAKS,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,I"}

package/dist/pine-core/p-e3455d30.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(i){"use strict";var t,e,a,s,o,n,r;return{setters:[function(i){t=i.r;e=i.c;a=i.h;s=i.H;o=i.g},function(i){n=i.e;r=i.d}],execute:function(){var l=":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-text-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-text-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var c=l;var d=i("pds_table_head_cell",function(){function i(i){var a=this;t(this,i);this.pdsTableSort=e(this,"pdsTableSort",7);this.handleScroll=function(){if(a.tableRef.scrollLeft>0){a.tableScrolling=true}else{a.tableScrolling=false}};this.toggleSort=function(){if(a.sortable){var i=a.hostElement.innerText.trim();a.sortingDirection=a.sortingDirection==="asc"?"desc":"asc";a.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(i){i.classList.remove("is-active")}));a.hostElement.classList.toggle("is-active");a.pdsTableSort.emit({column:i,direction:a.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false}i.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};i.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};i.prototype.classNames=function(){var i=[];if(this.tableRef&&this.tableRef.compact){i.push("is-compact")}if(this.sortable){i.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){i.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){i.push("has-scrolled")}return i.join("  ")};i.prototype.render=function(){return a(s,{key:"b8b24eb690d19c1d6476fd44c69a3231b540d476",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},a("slot",{key:"831ea922b3fb2166852208f2a9520414c93f6954"}),this.sortable&&a("pds-icon",{key:"0afb8d56992327112c64e79d6bfc7c1d192d9732",icon:this.sortingDirection==="asc"?n:r}))};Object.defineProperty(i.prototype,"hostElement",{get:function(){return o(this)},enumerable:false,configurable:true});return i}());d.style=c}}}));
+//# sourceMappingURL=p-e3455d30.system.entry.js.map

package/dist/pine-core/p-e3455d30.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsTableHeadCellCss","PdsTableHeadCellStyle0","PdsTableHeadCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","class_1","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-sorting: var(--pine-color-charcoal-500);\n  --color-text-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n\n  --font-size-head-cell: var(--pine-font-size-087);\n  --font-weight-cell-default: var(--pine-font-weight-normal);\n\n  --line-height-cell-default: var(--pine-line-height-125);\n\n  --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n  --spacing-padding-block-compact: var(--pine-spacing-050);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--color-text-default);\n  display: table-cell;\n  font-size: var(--font-size-head-cell);\n  font-style: normal;\n  font-weight: var(--font-weight-cell-default);\n  line-height: var(--line-height-cell-default);\n  padding: var(--padding-cell-default);\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-margin-inline-start-arrow);\n    padding-block-start: var(--spacing-padding-arrow);\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--color-sorting);\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrl: 'pds-table-head-cell.scss',\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n  @State() private tableScrolling: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wNAAA,IAAMA,EAAsB,mxDAC5B,IAAAC,EAAeD,E,ICQFE,EAAgBC,EAAA,iC,8EA2BnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDA/BD,M,oBACT,K,CAE3CU,EAAAC,UAAAC,oBAAA,WACExB,KAAKG,SAAWH,KAAKS,YAAYgB,QAAQ,Y,EAG3CH,EAAAC,UAAAG,iBAAA,WACE,GAAI1B,KAAKG,UAAYH,KAAKG,SAASwB,YAAc3B,KAAKG,SAASyB,YAAa,CAC1E5B,KAAKG,SAAS0B,iBAAiB,SAAU7B,KAAKC,a,GA0B1CqB,EAAAC,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI9B,KAAKG,UAAYH,KAAKG,SAAS4B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhC,KAAKO,SAAU,CACjBuB,EAAWE,KAAK,c,CAGlB,GAAIhC,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDkB,EAAWE,KAAK,QAAUhC,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASyB,aAAe5B,KAAKK,eAAgB,CACrEyB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBX,EAAAC,UAAAW,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOtC,KAAK8B,aACZS,KAAK,eACLC,QAASxC,KAAKM,WACdmC,MACEzC,KAAKG,UACLH,KAAKG,SAASyB,aACd5B,KAAKG,SAASuC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCrC,KAAKO,UACJ4B,EAAA,YAAAE,IAAA,2CAAUM,KAAM3C,KAAKY,mBAAqB,MAAQgC,EAAUC,I,gIAvFzC,I"}

package/dist/pine-core/p-ec56491f.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js"],(function(i){"use strict";var s,a,d;return{setters:[function(i){s=i.r;a=i.h;d=i.H}],execute:function(){var e=":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) * -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";var f=e;var r=i("pds_divider",function(){function i(i){s(this,i);this.componentId=undefined;this.offset=undefined;this.vertical=false}i.prototype.classNames=function(){var i=["pds-divider"];if(this.vertical){i.push("pds-divider--vertical")}if(this.offset){var s="pds-divider--offset-"+this.offset;i.push(s)}return i.join(" ")};i.prototype.render=function(){return a(d,{key:"3f2301abdcc69f48039e92ad5308ea7a27b3573f",id:this.componentId},a("hr",{key:"763d4a15811b9298b77d0e6227e18dccdf61825e",class:this.classNames()}))};return i}());r.style=f}}}));
+//# sourceMappingURL=p-ec56491f.system.entry.js.map

package/dist/pine-core/p-ec56491f.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsDividerCss","PdsDividerStyle0","PdsDivider","exports","class_1","prototype","classNames","this","vertical","push","offset","offsetClassName","join","render","h","Host","key","id","componentId","class"],"sources":["src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-grey-400);\n  --spacing-offset-xxs: var(--pine-spacing-050);\n  --spacing-offset-xs: var(--pine-spacing-100);\n  --spacing-offset-sm: var(--pine-spacing-200);\n  --spacing-offset-md: var(--pine-spacing-300);\n  --spacing-offset-lg: var(--pine-spacing-450);\n  --spacing-offset-xxl: var(--pine-spacing-800);\n}\n\n$pds-divider-offsets: (\n  xxs: var(--spacing-offset-xxs),\n  xs: var(--spacing-offset-xs),\n  sm: var(--spacing-offset-sm),\n  md: var(--spacing-offset-md),\n  lg: var(--spacing-offset-lg),\n  xl: var(--spacing-offset-xl),\n  xxl: var(--spacing-offset-xxl),\n);\n\n.pds-divider {\n  background: var(--color-background-default);\n  border: 0;\n  display: flex;\n  height: 1px;\n  margin: 0;\n  width: 100%;\n}\n\n.pds-divider--vertical {\n  height: 100%;\n  width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n  .pds-divider--offset-#{$offset} {\n    margin: 0 calc($value * -1);\n    padding: 0 $value;\n\n    &.pds-divider--vertical {\n      margin: calc($value * -1) 0;\n      padding: $value 0;\n    }\n  }\n}\n\n@media (max-width: 767px) {\n  .pds-divider--vertical {\n    display: none;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kJAAA,IAAMA,EAAgB,4oEACtB,IAAAC,EAAeD,E,ICMFE,EAAUC,EAAA,yB,uFAeF,K,CAEXC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,eAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,wB,CAGlB,GAAIF,KAAKG,OAAQ,CACf,IAAMC,EAAkB,uBAAyBJ,KAAKG,OACtDJ,EAAWG,KAAKE,E,CAGlB,OAAOL,EAAWM,KAAK,I,EAGzBR,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,GAAIV,KAAKW,aACbJ,EAAA,MAAAE,IAAA,2CAAIG,MAAOZ,KAAKD,e,WAnCD,I"}