@pine-ds/core 1.0.0 → 1.0.2

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

@@ -1 +0,0 @@
-{"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  --animation-transform-timing: 200ms;\n\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  --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(--animation-transform-timing);\n  }\n}\n\n@keyframes slide-down {\n  from {\n    opacity: 0;\n    transform: translateY(-100%)\n  }\n\n  65% {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0%);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n  transition: transform var(--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(--animation-transform-timing);\n    }\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  .pds-accordion__body {\n    transition: max-height 1s ease-in-out;\n\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    &.open {\n      max-height: 1000px;\n    }\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\n.pds-accordion__body {\n  animation: slide-down var(--animation-transform-timing);\n  max-height: 0;\n  overflow: hidden;\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,mkHACxB,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-d73e2a61.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-64b4cb70.system.js"],(function(t){"use strict";var i,a,s,e;return{setters:[function(t){i=t.r;a=t.h;s=t.H;e=t.g}],execute:function(){var n=":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:16px 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)}";var r=n;var c=t("pds_tabs",function(){function t(t){i(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}t.prototype.tabClickHandler=function(t){if(this.componentId===t.detail[1]){this.activeTabIndex=t.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};t.prototype.handleKeyDown=function(t){var i=["ArrowLeft","ArrowRight","Home","End"];if(i.includes(t.key)){t.preventDefault();this.moveActiveTab(t.key)}};t.prototype.moveActiveTab=function(t){var i=0;var a=this.tabs.length-1;var s=null;switch(t){case"ArrowLeft":s=this.activeTabIndex===i?a:this.activeTabIndex+-1;break;case"ArrowRight":s=this.activeTabIndex===a?i:this.activeTabIndex+1;break;case"Home":s=i;break;case"End":s=a;break}this.tabs[s].children[0].focus();this.activeTabName=this.tabs[s].name;this.activeTabIndex=s};t.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};t.prototype.propGeneration=function(t,i){if(i===void 0){i=0}t.parentComponentId=this.componentId.toString();t.variant=this.variant.toString();t.selected=this.activeTabName===t.name?true:false;t["index"]=i};t.prototype.passPropsToChildren=function(){var t=this;this.tabs.forEach((function(i,a){if(t.activeTabName===i.name)t.activeTabIndex=a;t.propGeneration(i,a)}));this.tabPanels.forEach((function(i){t.propGeneration(i)}))};t.prototype.classNames=function(){var t="pds-tabs";if(this.variant&&this.variant!="primary"){var i="pds-tabs--".concat(this.variant);t+=" "+i}return t};t.prototype.componentWillLoad=function(){this.findAllChildren()};t.prototype.componentWillRender=function(){this.passPropsToChildren()};t.prototype.render=function(){return a(s,{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"}))};Object.defineProperty(t.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});return t}());c.style=r}}}));
-//# sourceMappingURL=p-d73e2a61.system.entry.js.map

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

@@ -1 +0,0 @@
-{"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 --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: 16px 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":"0JAAA,IAAMA,EAAa,qiBACnB,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"}

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

@@ -1,2 +0,0 @@
-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-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-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-f71ff6cb.system.entry.js.map

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

@@ -1 +0,0 @@
-{"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  --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-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-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,ywDAC5B,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-fffaa868.entry.js

@@ -1,2 +0,0 @@
-import{r,h as o,H as e,g as a}from"./p-2f77dbd3.js";import{b as c}from"./p-403a20e8.js";const t=r=>!!r.shadowRoot&&!!r.attachShadow;const d=":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-background-action-primary-default);--color-background-primary-disabled:var(--pine-color-background-action-primary-disabled);--color-background-primary-hover:var(--pine-color-background-action-primary-hover);--color-text-primary-default:var(--pine-color-text-action-primary-default);--color-text-primary-disabled:var(--pine-color-text-action-primary-disabled);--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-text-body-default);--color-text-secondary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-background-action-accent-default);--color-background-accent-disabled:var(--pine-color-background-action-accent-disabled);--color-background-accent-hover:var(--pine-color-background-action-accent-hover);--color-text-accent-default:var(--pine-color-text-action-accent-default);--color-text-accent-disabled:var(--pine-color-text-action-accent-disabled);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-background-action-destructive-default);--color-background-destructive-disabled:var(--pine-color-background-action-destructive-disabled);--color-background-destructive-hover:var(--pine-color-background-action-destructive-hover);--color-text-destructive-default:var(--pine-color-text-action-destructive-default);--color-text-destructive-disabled:var(--pine-color-text-action-destructive-disabled);--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-body-med);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 n=d;const i=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(t(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=n;export{i as pds_button};
-//# sourceMappingURL=p-fffaa868.entry.js.map

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

@@ -1 +0,0 @@
-{"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-background-action-primary-default);\n  --color-background-primary-disabled: var(--pine-color-background-action-primary-disabled);\n  --color-background-primary-hover: var(--pine-color-background-action-primary-hover);\n  --color-text-primary-default: var(--pine-color-text-action-primary-default);\n  --color-text-primary-disabled: var(--pine-color-text-action-primary-disabled);\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-text-body-default);\n  --color-text-secondary-disabled: var(--pine-color-text-action-primary-disabled);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-background-action-accent-default);\n  --color-background-accent-disabled: var(--pine-color-background-action-accent-disabled);\n  --color-background-accent-hover: var(--pine-color-background-action-accent-hover);\n  --color-text-accent-default: var(--pine-color-text-action-accent-default);\n  --color-text-accent-disabled: var(--pine-color-text-action-accent-disabled);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-background-action-destructive-default);\n  --color-background-destructive-disabled: var(--pine-color-background-action-destructive-disabled);\n  --color-background-destructive-hover: var(--pine-color-background-action-destructive-hover);\n  --color-text-destructive-default: var(--pine-color-text-action-destructive-default);\n  --color-text-destructive-disabled: var(--pine-color-text-action-destructive-disabled);\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-body-med);\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,0uLACrB,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"}