@pine-ds/core 2.16.1 → 2.16.2

package/dist/pine-core/p-7c6320e4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","type","hasShadowDom","el","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","pdsClick","emit","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\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(--pine-border);\n  border-color: var(--color-border-default);\n  border-radius: var(--pine-border-radius-full);\n  color: var(--color-text-default); // Set in the variant classes below\n  cursor: pointer;\n  display: flex;\n  font-family: var(--pine-font-family-greet);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  line-height: var(--pine-line-height-body);\n  min-height: 40px;\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  pds-icon {\n    color: currentColor;\n    fill: currentColor;\n    margin-inline-end: var(--pine-dimension-xs);\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 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\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    pointer-events: none;\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--pine-color-primary);\n  --color-background-hover: var(--pine-color-primary-hover);\n  --color-background-disabled: var(--pine-color-primary-disabled);\n  --color-border-default: var(--pine-color-primary);\n  --color-border-hover: var(--pine-color-primary-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-primary-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--pine-color-accent);\n  --color-background-hover: var(--pine-color-accent-hover);\n  --color-background-disabled: var(--pine-color-accent-disabled);\n  --color-border-default: var(--pine-color-accent);\n  --color-border-hover: var(--pine-color-accent-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-accent-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--pine-color-danger);\n  --color-background-hover: var(--pine-color-danger-hover);\n  --color-background-disabled: var(--pine-color-danger-disabled);\n  --color-border-default: var(--pine-color-danger);\n  --color-border-hover: var(--pine-color-danger-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-danger-disabled);\n  --color-outline: var(--pine-color-focus-ring-danger);\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\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(--pine-color-border-disabled);\n  --color-border-focus: var(--pine-color-border);\n  --color-border-hover: var(--pine-color-border-hover);\n  --color-border-default: var(--pine-color-border);\n  --color-text-default: var(--pine-color-text-secondary);\n  --color-text-disabled: var(--pine-color-text-secondary-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n\n  &:hover {\n    background-color: var(--pine-color-secondary-hover);\n  }\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--pine-dimension-none);\n    margin-inline-start: var(--pine-dimension-xs);\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-width: var(--pine-dimension-none);\n  margin: var(--pine-dimension-none);\n  min-height: auto;\n  padding: var(--pine-dimension-none);\n  width: inherit;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['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   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides the 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 the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\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    this.pdsClick.emit(ev);\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":"wIAAA,MAAMA,EAAe,4hIACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,4DA6CZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIC,EAAaJ,KAAKK,IAAK,CACzB,MAAMC,EAAON,KAAKK,GAAGE,QAAQ,QAC7B,GAAID,EAAM,CACRJ,EAAGM,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWN,KAAOH,KAAKG,KACvBM,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,GAIjBhB,KAAKiB,SAASC,KAAKhB,EAAG,E,yCAlDJ,M,UAOI,K,mDAgBuB,S,aAMmD,S,CAwB1F,UAAAiB,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAInB,KAAKoB,QAAS,CAChBD,EAAWE,KAAK,eAAiBrB,KAAKoB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACY1B,KAAK2B,SAAW,OAAS,KACxCC,GAAI5B,KAAK6B,YACTC,QAAS9B,KAAKC,YACdmB,QAASpB,KAAKoB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO/B,KAAKmB,aACZQ,SAAU3B,KAAK2B,SACfK,KAAMhC,KAAKgC,KACXC,KAAK,SACL9B,KAAMH,KAAKG,KACX+B,MAAOlC,KAAKkC,OAEXlC,KAAKmC,MAAQnC,KAAKoB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAMhC,KAAKmC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACC1B,KAAKoB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-017e1978.system.js","./p-5480346a.system.js"],(function(o){"use strict";var r,e,n,i,a,t,d;return{setters:[function(o){r=o.r;e=o.c;n=o.h;i=o.H;a=o.g},function(o){t=o.h},function(o){d=o.f}],execute:function(){var c=":host{--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;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(--pine-border);border-color:var(--color-border-default);border-radius:var(--pine-border-radius-full);color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font-family:var(--pine-font-family-greet);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);line-height:var(--pine-line-height-body);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.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 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);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);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--pine-dimension-none);margin-inline-end:var(--pine-dimension-none);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}";var l=c;var s=o("pds_button",function(){function o(o){var n=this;r(this,o);this.pdsClick=e(this,"pdsClick",7);this.handleClick=function(o){if(n.type!="button"){if(t(n.el)){var r=n.el.closest("form");if(r){o.preventDefault();var e=document.createElement("button");e.type=n.type;e.style.display="none";r.appendChild(e);e.click();e.remove()}}}n.pdsClick.emit(o)};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}o.prototype.classNames=function(){var o=["pds-button"];if(this.variant){o.push("pds-button--"+this.variant)}return o.join("  ")};o.prototype.render=function(){return n(i,{key:"09f73346a0de854613bb43e81a9099c2e3783ec0","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},n("button",{key:"e02d07f103692dfdf0f40c4ef0659674d92b701a",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&n("pds-icon",{key:"642e6890c4d6cdbbe129af1ef3532fcd5c4a7925",name:this.icon,part:"icon"}),n("slot",{key:"58e95d868055a2723657a757a3c49cbb7989d912"}),this.variant==="disclosure"&&n("pds-icon",{key:"81d4456cb62d77056f93e60091215347ac743134",icon:d,part:"caret"})))};Object.defineProperty(o.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return o}());s.style=l}}}));
-//# sourceMappingURL=p-bacb5789.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsButtonCss","PdsButtonStyle0","PdsButton","exports","this","handleClick","ev","_this","type","hasShadowDom","el","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","pdsClick","emit","class_1","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\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(--pine-border);\n  border-color: var(--color-border-default);\n  border-radius: var(--pine-border-radius-full);\n  color: var(--color-text-default); // Set in the variant classes below\n  cursor: pointer;\n  display: flex;\n  font-family: var(--pine-font-family-greet);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  line-height: var(--pine-line-height-body);\n  min-height: 40px;\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  pds-icon {\n    color: currentColor;\n    fill: currentColor;\n    margin-inline-end: var(--pine-dimension-xs);\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 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\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    pointer-events: none;\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--pine-color-primary);\n  --color-background-hover: var(--pine-color-primary-hover);\n  --color-background-disabled: var(--pine-color-primary-disabled);\n  --color-border-default: var(--pine-color-primary);\n  --color-border-hover: var(--pine-color-primary-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-primary-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--pine-color-accent);\n  --color-background-hover: var(--pine-color-accent-hover);\n  --color-background-disabled: var(--pine-color-accent-disabled);\n  --color-border-default: var(--pine-color-accent);\n  --color-border-hover: var(--pine-color-accent-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-accent-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--pine-color-danger);\n  --color-background-hover: var(--pine-color-danger-hover);\n  --color-background-disabled: var(--pine-color-danger-disabled);\n  --color-border-default: var(--pine-color-danger);\n  --color-border-hover: var(--pine-color-danger-hover);\n  --color-text-default: var(--pine-color-text-primary);\n  --color-text-disabled: var(--pine-color-text-danger-disabled);\n  --color-outline: var(--pine-color-focus-ring-danger);\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\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(--pine-color-border-disabled);\n  --color-border-focus: var(--pine-color-border);\n  --color-border-hover: var(--pine-color-border-hover);\n  --color-border-default: var(--pine-color-border);\n  --color-text-default: var(--pine-color-text-secondary);\n  --color-text-disabled: var(--pine-color-text-secondary-disabled);\n  --color-outline: var(--pine-color-focus-ring);\n\n  &:hover {\n    background-color: var(--pine-color-secondary-hover);\n  }\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--pine-dimension-none);\n    margin-inline-start: var(--pine-dimension-xs);\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-width: var(--pine-dimension-none);\n  margin: var(--pine-dimension-none);\n  min-height: auto;\n  padding: var(--pine-dimension-none);\n  width: inherit;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['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   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides the 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 the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\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    this.pdsClick.emit(ev);\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":"8PAAA,IAAMA,EAAe,4hIACrB,IAAAC,EAAeD,E,ICeFE,EAASC,EAAA,wB,sEA6CZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIC,EAAaF,EAAKG,IAAK,CACzB,IAAMC,EAAOJ,EAAKG,GAAGE,QAAQ,QAC7B,GAAID,EAAM,CACRL,EAAGO,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWN,KAAOD,EAAKC,KACvBM,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,GAIjBd,EAAKe,SAASC,KAAKjB,E,2CAlDD,M,UAOI,K,mDAgBuB,S,aAMmD,S,CAwB1FkB,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAItB,KAAKuB,QAAS,CAChBD,EAAWE,KAAK,eAAiBxB,KAAKuB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACY7B,KAAK8B,SAAW,OAAS,KACxCC,GAAI/B,KAAKgC,YACTC,QAASjC,KAAKC,YACdsB,QAASvB,KAAKuB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAOlC,KAAKsB,aACZQ,SAAU9B,KAAK8B,SACfK,KAAMnC,KAAKmC,KACXC,KAAK,SACLhC,KAAMJ,KAAKI,KACXiC,MAAOrC,KAAKqC,OAEXrC,KAAKsC,MAAQtC,KAAKuB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAMnC,KAAKsC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACC7B,KAAKuB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W,uHA7FtD,I","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as s,H as a,g as t}from"./p-87fe352f.js";import{i as o,a as r,m as d}from"./p-47291f05.js";import{d as n}from"./p-46fb585d.js";import{i as l,a as c}from"./p-7905b8b8.js";import{b as h}from"./p-d561168e.js";const p=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font-weight:var(--pine-font-weight-medium)}";const f=p;const b=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";const u=b;const x=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--pine-font-weight-medium);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";const v=x;const m=class{constructor(s){e(this,s);this.pdsBlur=i(this,"pdsBlur",7);this.pdsFocus=i(this,"pdsFocus",7);this.pdsInput=i(this,"pdsInput",7);this.pdsTextareaChange=i(this,"pdsTextareaChange",7);this.inheritedAttributes={};this.onBlur=e=>{this.hasFocus=false;if(this.focusedValue!==this.value){this.emitValueChange(e)}this.pdsBlur.emit(e)};this.onFocus=e=>{this.hasFocus=true;this.focusedValue=this.value;this.pdsFocus.emit(e)};this.onInput=e=>{const i=e.target;if(i){this.value=i.value||""}this.emitInputChange(e)};this.onTextareaChange=e=>{this.emitValueChange(e)};this.autocomplete=undefined;this.componentId=undefined;this.disabled=false;this.debounce=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value="";this.hasFocus=false}async setFocus(){if(this.nativeTextarea){this.nativeTextarea.focus()}}debounceChanged(){const{pdsInput:e,debounce:i,originalPdsInput:s}=this;this.pdsInput=i===undefined?s!==null&&s!==void 0?s:e:n(e,i)}valueChanged(){const e=this.nativeTextarea;const i=this.getValue();if(e&&e.value!==i){e.value=i}}emitInputChange(e){const{value:i}=this;this.pdsInput.emit({value:i,event:e})}emitValueChange(e){const i=e.target;o(i,this);const{value:s}=i;const a=s==null?s:s.toString();this.focusedValue=a;this.pdsTextareaChange.emit({value:a,event:e})}getValue(){return this.value||""}textareaClassNames(){const e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")}connectedCallback(){this.debounceChanged()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},l(this.el)),c(this.el))}componentDidLoad(){this.originalPdsInput=this.pdsInput}render(){const e=this.getValue();return s(a,{key:"aa960b2a67c927c296040e835fadcd8f8bcbbc18","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},s("div",{key:"b95804e8ddbd92f4d7177c90d342d0ff2022ad44",class:"pds-textarea"},this.label&&s("label",{key:"ef508b6af03cf871b419b2dd4d79ded182b59da5",htmlFor:this.componentId},this.label),s("textarea",Object.assign({key:"2d2f195e8a715332eab0bba4f869db67b0f249c9",ref:e=>this.nativeTextarea=e,"aria-describedby":r(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput},this.inheritedAttributes),e),this.helperMessage&&s("p",{key:"84ad453017c378553eeda5198267564661b9bc8f",class:"pds-textarea__helper-message",id:d(this.componentId,"helper")},this.helperMessage),this.invalid&&s("p",{key:"d1fbcbe5af314a25bdec647d560f9e964a9c8b90","aria-live":"assertive",class:"pds-textarea__error-message",id:d(this.componentId,"error")},s("pds-icon",{key:"525edfdafeabd31a41e62c0c0e454752123c7c8a",icon:h,size:"small"}),this.errorMessage)))}get el(){return t(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};m.style=f+(u+v);export{m as pds_textarea};
-//# sourceMappingURL=p-cb3ddff3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["labelCss","PdsTextareaStyle0","pdsInputTokensCss","PdsTextareaStyle1","pdsTextareaCss","PdsTextareaStyle2","PdsTextarea","this","inheritedAttributes","onBlur","ev","hasFocus","focusedValue","value","emitValueChange","pdsBlur","emit","onFocus","pdsFocus","onInput","input","target","emitInputChange","onTextareaChange","componentId","setFocus","nativeTextarea","focus","debounceChanged","pdsInput","debounce","originalPdsInput","undefined","debounceEvent","valueChanged","getValue","event","textarea","isRequired","newValue","toString","pdsTextareaChange","textareaClassNames","classNames","invalid","push","join","connectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","render","h","Host","key","disabled","readonly","class","label","htmlFor","ref","assignDescription","helperMessage","autocomplete","id","name","placeholder","readOnly","required","rows","onChange","messageId","icon","danger","size","errorMessage"],"sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font-weight: var(--pine-font-weight-medium);\n\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-input-color-background-danger: var(--pine-color-red-050);\n}\n",":host {\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  display: inline;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-weight: var(--pine-font-weight-medium);\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\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  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n})\nexport class PdsTextarea {\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: 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 textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\n          <textarea\n            ref={(el) => this.nativeTextarea = el }\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onBlur={this.onBlur}\n            onChange={this.onTextareaChange}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            {...this.inheritedAttributes}\n          >\n            {value}\n          </textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,i,t,r){function a(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,n){function o(e){try{d(r.next(e))}catch(e){n(e)}}function s(e){try{d(r["throw"](e))}catch(e){n(e)}}function d(e){e.done?t(e.value):a(e.value).then(o,s)}d((r=r.apply(e,i||[])).next())}))};var __generator=this&&this.__generator||function(e,i){var t={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},r,a,n,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(i){return d([e,i])}}function d(s){if(r)throw new TypeError("Generator is already executing.");while(o&&(o=0,s[0]&&(t=0)),t)try{if(r=1,a&&(n=s[0]&2?a["return"]:s[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,s[1])).done)return n;if(a=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:t.label++;return{value:s[1],done:false};case 5:t.label++;a=s[1];s=[0];continue;case 7:s=t.ops.pop();t.trys.pop();continue;default:if(!(n=t.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){t=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){t.label=s[1];break}if(s[0]===6&&t.label<n[1]){t.label=n[1];n=s;break}if(n&&t.label<n[2]){t.label=n[2];t.ops.push(s);break}if(n[2])t.ops.pop();t.trys.pop();continue}s=i.call(e,t)}catch(e){s=[6,e];a=0}finally{r=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-017e1978.system.js","./p-a7d75615.system.js","./p-5480346a.system.js"],(function(e){"use strict";var i,t,r,a,n,o,s,d,l,c,f,u;return{setters:[function(e){i=e.r;t=e.c;r=e.h;a=e.H;n=e.g},function(e){o=e.i;s=e.a;d=e.m},function(e){l=e.d},function(e){c=e.i;f=e.a},function(e){u=e.b}],execute:function(){var h=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font-weight:var(--pine-font-weight-medium)}";var p=h;var b=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var v=b;var x=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--pine-font-weight-medium);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";var m=x;var g=e("pds_textarea",function(){function e(e){var r=this;i(this,e);this.pdsBlur=t(this,"pdsBlur",7);this.pdsFocus=t(this,"pdsFocus",7);this.pdsInput=t(this,"pdsInput",7);this.pdsTextareaChange=t(this,"pdsTextareaChange",7);this.inheritedAttributes={};this.onBlur=function(e){r.hasFocus=false;if(r.focusedValue!==r.value){r.emitValueChange(e)}r.pdsBlur.emit(e)};this.onFocus=function(e){r.hasFocus=true;r.focusedValue=r.value;r.pdsFocus.emit(e)};this.onInput=function(e){var i=e.target;if(i){r.value=i.value||""}r.emitInputChange(e)};this.onTextareaChange=function(e){r.emitValueChange(e)};this.autocomplete=undefined;this.componentId=undefined;this.disabled=false;this.debounce=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value="";this.hasFocus=false}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeTextarea){this.nativeTextarea.focus()}return[2]}))}))};e.prototype.debounceChanged=function(){var e=this,i=e.pdsInput,t=e.debounce,r=e.originalPdsInput;this.pdsInput=t===undefined?r!==null&&r!==void 0?r:i:l(i,t)};e.prototype.valueChanged=function(){var e=this.nativeTextarea;var i=this.getValue();if(e&&e.value!==i){e.value=i}};e.prototype.emitInputChange=function(e){var i=this.value;this.pdsInput.emit({value:i,event:e})};e.prototype.emitValueChange=function(e){var i=e.target;o(i,this);var t=i.value;var r=t==null?t:t.toString();this.focusedValue=r;this.pdsTextareaChange.emit({value:r,event:e})};e.prototype.getValue=function(){return this.value||""};e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.connectedCallback=function(){this.debounceChanged()};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),f(this.el))};e.prototype.componentDidLoad=function(){this.originalPdsInput=this.pdsInput};e.prototype.render=function(){var e=this;var i=this.getValue();return r(a,{key:"aa960b2a67c927c296040e835fadcd8f8bcbbc18","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},r("div",{key:"b95804e8ddbd92f4d7177c90d342d0ff2022ad44",class:"pds-textarea"},this.label&&r("label",{key:"ef508b6af03cf871b419b2dd4d79ded182b59da5",htmlFor:this.componentId},this.label),r("textarea",Object.assign({key:"2d2f195e8a715332eab0bba4f869db67b0f249c9",ref:function(i){return e.nativeTextarea=i},"aria-describedby":s(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput},this.inheritedAttributes),i),this.helperMessage&&r("p",{key:"84ad453017c378553eeda5198267564661b9bc8f",class:"pds-textarea__helper-message",id:d(this.componentId,"helper")},this.helperMessage),this.invalid&&r("p",{key:"d1fbcbe5af314a25bdec647d560f9e964a9c8b90","aria-live":"assertive",class:"pds-textarea__error-message",id:d(this.componentId,"error")},r("pds-icon",{key:"525edfdafeabd31a41e62c0c0e454752123c7c8a",icon:u,size:"small"}),this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}());g.style=p+(v+m)}}}));
-//# sourceMappingURL=p-cd14918d.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["labelCss","PdsTextareaStyle0","pdsInputTokensCss","PdsTextareaStyle1","pdsTextareaCss","PdsTextareaStyle2","PdsTextarea","exports","this","inheritedAttributes","onBlur","ev","_this","hasFocus","focusedValue","value","emitValueChange","pdsBlur","emit","onFocus","pdsFocus","onInput","input","target","emitInputChange","onTextareaChange","componentId","class_1","prototype","setFocus","nativeTextarea","focus","debounceChanged","_a","pdsInput","debounce","originalPdsInput","undefined","debounceEvent","valueChanged","getValue","event","textarea","isRequired","newValue","toString","pdsTextareaChange","textareaClassNames","classNames","invalid","push","join","connectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","render","h","Host","key","disabled","readonly","class","label","htmlFor","ref","assignDescription","helperMessage","autocomplete","id","name","placeholder","readOnly","required","rows","onChange","messageId","icon","danger","size","errorMessage"],"sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font-weight: var(--pine-font-weight-medium);\n\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-input-color-background-danger: var(--pine-color-red-050);\n}\n",":host {\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  display: inline;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-weight: var(--pine-font-weight-medium);\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\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  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n})\nexport class PdsTextarea {\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: 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 textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\n          <textarea\n            ref={(el) => this.nativeTextarea = el }\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onBlur={this.onBlur}\n            onChange={this.onTextareaChange}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            {...this.inheritedAttributes}\n          >\n            {value}\n          </textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-5480346a.system.js"],(function(e){"use strict";var n,i,a,o;return{setters:[function(e){n=e.r;i=e.h;a=e.H},function(e){o=e.d}],execute:function(){var r=":host{display:block}details{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--color-text-hover:var(--pine-color-text-secondary);--number-animation-transform-timing:200ms;border-radius:var(--pine-dimension-xs)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--pine-color-background-container)}details[open] summary{color:var(--pine-color-text-active);font-weight:var(--pine-font-weight-semi-bold)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);font-family:var(--pine-font-family-body);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding-block:calc(var(--pine-dimension-2xs) * 1.5);-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs);-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--pine-color-background-container-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;position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:calc(var(--pine-dimension-sm) + 2);padding-block-end:calc(var(--pine-dimension-sm) + 2);padding-inline:calc(var(--pine-dimension-2xs) * 1.5)}";var t=r;var s=e("pds_accordion",function(){function e(e){var i=this;n(this,e);this.handleToggle=function(){i.isOpen=i.detailsEl.open};this.getOpenAttribute=function(){if(i.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}e.prototype.handleOpenState=function(e){this.isOpen=e};e.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};e.prototype.render=function(){var e=this;return i(a,{key:"92a6e19b0376d9cc14a86c9dda2fbfeef11297e3",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"0bb94526cebdcefcec62976c1623ef208aaa3119"},this.getOpenAttribute(),{ref:function(n){return e.detailsEl=n}}),i("summary",{key:"b599fe5da538efde146be5ff8db8a04faf5c6c1b",part:"accordion-button"},i("slot",{key:"8bdfa4448b41da6fd46232fe854f7c475fc633bf",name:"label"},"Details"),i("pds-icon",{key:"ca51ab8291047c08cef21ef55c85a8a47f8cb3e0",icon:o})),i("div",{key:"628dc7ce9263bbd983fc2353181e31b6fca0176a",part:"accordion-body",class:"pds-accordion__body"},i("slot",{key:"314d59312a3fbb2cc8a1c4d8a7f55634d16b079d"}))))};Object.defineProperty(e,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return e}());s.style=t}}}));
-//# sourceMappingURL=p-d477224e.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","part","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\n  // TODO: Needs discussion\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --color-text-hover: var(--pine-color-text-secondary);\n  --number-animation-transform-timing: 200ms;\n\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\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(--pine-color-background-container-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    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\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\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 part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,ytDACxB,IAAAC,EAAeD,E,ICaFE,EAAYC,EAAA,2B,mCAwBfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCAfY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,C,EAchBH,EAAAC,UAAAG,iBAAA,WACEX,KAAKI,UAAUQ,iBAAiB,SAAUZ,KAAKC,a,EAGjDM,EAAAC,UAAAK,OAAA,eAAAX,EAAAF,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIlB,KAAKmB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAahB,KAAKM,mBAAkB,CAAEgB,IAAK,SAACC,GAAE,OAAMrB,EAAKE,UAAYmB,CAAvB,IAC5CT,EAAA,WAAAE,IAAA,2CAASQ,KAAK,oBACZV,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SAAO,WAClBX,EAAA,YAAAE,IAAA,2CAAUU,KAAMC,KAElBb,EAAA,OAAAE,IAAA,2CAAKQ,KAAK,iBAAiBP,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C,uIAhDa,I","ignoreList":[]}