@pine-ds/core 2.16.2 → 2.16.4

package/dist/esm-es5/pds-label-949a17b6.js

@@ -1,2 +0,0 @@
-import{h}from"./index-b1696fed.js";var PdsLabel=function(r){var a=r.classNames,e=r.htmlFor,l=r.text;return h("label",{class:a,htmlFor:e},l)};export{PdsLabel as P};
-//# sourceMappingURL=pds-label-949a17b6.js.map

package/dist/esm-es5/pds-label-949a17b6.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PdsLabel","_a","classNames","htmlFor","text","h","class"],"sources":["src/components/_internal/pds-label/pds-label.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"],"mappings":"uCAsBaA,SAA4C,SAACC,G,IAAEC,EAAUD,EAAAC,WAAEC,EAAOF,EAAAE,QAAEC,EAAIH,EAAAG,KAAE,OACrFC,EAAA,SAAOC,MAAOJ,EAAYC,QAASA,GAAUC,EADwC,S","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,c as t,h as e,H as i,g as o}from"./p-87fe352f.js";const s='pds-tab{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--outline:4px solid var(--pine-color-focus-ring);-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-dimension-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--pine-color-text)}.pds-tab:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-secondary-hover)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab__content{padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--pine-color-background-container)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-background-container-hover)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--color-text-default);height:34px}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:90px;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-white);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);z-index:1;}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}';const n=s;const d=class{constructor(e){a(this,e);this.pdsTabClick=t(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}onTabClick(a,t){this.pdsTabClick.emit([a,t])}render(){const a=e("span",{key:"d98a922aaa1b9a6023830badc391c3d1d615ec6a",class:"pds-tab-edge",role:"presentation"});const t=e("span",{key:"390da28bb3fd9ab1fa2fddda45569e92d4547fa3",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return e(i,{key:"5996673486d4bd95f98a691b155529a60655e92f",variant:this.variant,slot:"tabs",index:this.index},e("button",{key:"6eded79f9d5aa9093080933aa9aaa2ad88440759",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,e("div",{key:"9f8927d976b6964c22414e9fbb8680b9132370fa",class:"pds-tab__content"},e("slot",{key:"691c6cf5e42bc42c6492276fd5905733c424921c"}))))}get el(){return o(this)}};d.style=n;export{d as pds_tab};
-//# sourceMappingURL=p-03440844.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","onTabClick","index","parentComponentId","this","pdsTabClick","emit","render","availabilityTabEdgeInlineStart","h","key","class","role","availabilityTabEdgeInlineEnd","Host","variant","slot","id","name","tabindex","selected","onClick","bind"],"sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n\n  --outline: 4px solid var(--pine-color-focus-ring);\n\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n  appearance: none;\n  background-color: transparent;\n  border: var(--pine-dimension-none);\n  box-shadow: none;\n  color: inherit;\n  cursor: pointer;\n  font-family: inherit;\n  padding: var(--pine-dimension-none);\n}\n\n.pds-tab {\n  @include pds-button-style-reset();\n\n  align-items: center;\n  color: var(--pine-color-text-secondary);\n  display: inline-flex;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n\n  &.is-active,\n  &[aria-selected='true'] {\n    color: var(--pine-color-text);\n\n    .pds-tab__content::after {\n      opacity: 1;\n    }\n  }\n\n  &:hover {\n    color: var(--pine-color-text);\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-tab__content {\n    font-family: var(--pine-font-family-body);\n    font-size: var(--pine-font-size);\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-end: 11px;\n    position: relative;\n\n    &::after {\n      background-color: var(--pine-color-brand);\n      bottom: 0;\n      content: '';\n      height: 3px;\n      left: 0;\n      opacity: 0;\n      position: absolute;\n      right: 0;\n    }\n  }\n\n  .pds-tab-edge {\n    display: none;\n  }\n}\n\n.pds-tabs--availability {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);\n    padding: 8px 16px 13px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-secondary);\n\n      .pds-tab__content::after {\n        opacity: 1;\n      }\n\n      .pds-tab-edge {\n        z-index: 1;\n      }\n    }\n\n    &:hover:not(.is-active, [aria-selected='true']) {\n      --color-background-tab: var(--pine-color-secondary-hover);\n    }\n\n    &:focus-visible {\n      color: var(--pine-color-text-secondary);\n    }\n  }\n\n  .pds-tab__content {\n    padding-bottom: 7px;\n  }\n\n  .pds-tab-edge {\n    bottom: 0;\n    display: block;\n    height: 8px;\n    inset-inline-end: 100%;\n    overflow: hidden;\n    position: absolute;\n    width: 8px;\n\n    &::before {\n      border-radius: 50%;\n      bottom: 0;\n      box-shadow: 4px 4px 0 0 var(--color-background-tab);\n      content: '';\n      display: block;\n      height: 200%;\n      inset-inline-end: 0;\n      position: absolute;\n      width: 200%;\n    }\n  }\n\n  .pds-tab-edge--end {\n    inset-inline-end: unset;\n    inset-inline-start: 100%;\n\n    &::before {\n      box-shadow: -4px 4px 0 0 var(--color-background-tab);\n      inset-inline-end: unset;\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.pds-tabs--filter {\n  --color-background-tab: var(--pine-color-background-container);\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border-radius: 50px;\n    color: var(--pine-color-text);\n    padding: 6px 15px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-primary);\n      color: var(--pine-color-text-primary);\n    }\n\n    &:hover:not(.is-active, [aria-selected='true']) {\n      --color-background-tab: var(--pine-color-background-container-hover);\n    }\n  }\n\n  .pds-tab__content {\n    padding-block-end: var(--pine-dimension-none);\n\n    &::after {\n      content: unset;\n    }\n  }\n}\n\n.pds-tabs--pill {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border: var(--pine-border-width-thin) solid transparent;\n    border-radius: var(--pine-dimension-xs);\n    color: var(--color-text-default);\n    height: 34px;\n\n    .pds-tab__content {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n      min-width: 90px;\n      padding-block-end: 0;\n    }\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-white);\n      border-color: var(--pine-color-border);\n      box-shadow: var(--pine-box-shadow-100);\n      z-index: 1;\n\n      &:focus-visible {\n        --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\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      /* stylelint-disable max-nesting-depth */\n      .pds-tab__content {\n        &::after {\n          opacity: 0;\n        }\n      }\n      /* stylelint-enable max-nesting-depth */\n    }\n  }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.selected ? \"0\" : \"-1\"}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,ghKAClB,MAAAC,EAAeD,E,MCMFE,EAAM,M,iLA8BE,K,CAOX,UAAAC,CAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,CAGhC,MAAAI,GACE,MAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,MAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,EAAI,CAAAJ,IAAA,2CAACK,QAASX,KAAKW,QAASC,KAAK,OAAOd,MAAOE,KAAKF,OACnDO,EAAA,UAAAC,IAAA,2CACEE,KAAK,MACLK,GAAIb,KAAKD,kBAAoB,KAAOC,KAAKc,KAAI,gBAC9Bd,KAAKD,kBAAoB,KAAOC,KAAKc,KAAO,SAC3DC,SAAUf,KAAKgB,SAAW,IAAM,KAAI,gBACrBhB,KAAKgB,SAAW,OAAS,QACxCT,MAAOP,KAAKgB,SAAW,oBAAsB,UAC7CC,QAASjB,KAAKH,WAAWqB,KAAKlB,KAAMA,KAAKF,MAAOE,KAAKD,oBAEpDC,KAAKW,UAAY,gBAAkBP,EACnCJ,KAAKW,UAAY,gBAAkBF,EACpCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAmBF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}

package/dist/pine-core/p-0c09ce7a.js

@@ -1,2 +0,0 @@
-import{h as s}from"./p-87fe352f.js";const t=({classNames:t,htmlFor:l,text:o})=>s("label",{class:t,htmlFor:l},o);export{t as P};
-//# sourceMappingURL=p-0c09ce7a.js.map

package/dist/pine-core/p-0c09ce7a.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["PdsLabel","classNames","htmlFor","text","h","class"],"sources":["src/components/_internal/pds-label/pds-label.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"],"mappings":"0CAsBaA,EAA4C,EAAGC,aAAYC,UAASC,UAC/EC,EAAA,SAAOC,MAAOJ,EAAYC,QAASA,GAAUC,U","ignoreList":[]}

package/dist/pine-core/p-27e12bd2.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,a,i,t,d;return{setters:[function(o){r=o.r;e=o.c;n=o.h;a=o.H;i=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:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);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(a,{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 i(this)},enumerable:false,configurable:true});return o}());s.style=l}}}));
-//# sourceMappingURL=p-27e12bd2.system.entry.js.map

package/dist/pine-core/p-27e12bd2.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: var(--pine-typography-body-brand-label);\n  letter-spacing: var(--pine-letter-spacing);\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,68HACrB,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-2d52d5f7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,H as i,g as r}from"./p-87fe352f.js";const t=":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:10px;-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";const s=t;const n=class{constructor(o){e(this,o);this.active=false;this.popoverTargetAction="show";this.popoverType="auto";this.componentId=undefined;this.text=undefined;this.maxWidth=352;this.placement="right"}componentWillRender(){this.handlePopoverPositioning()}handleClick(){this.active=!this.active}handleScroll(){if(this.active){this.handlePopoverPositioning()}}handlePopoverPositioning(){const e=this.el.shadowRoot.querySelector(".pds-popover__trigger");const o=this.el.shadowRoot.querySelector("div[popover]");if(!e||!o)return;const i=e.getBoundingClientRect();const r=o.getBoundingClientRect();let t=0;let s=0;const n=8;switch(this.placement){case"top":t=i.top-r.height-n;s=i.left;break;case"right":t=i.top;s=i.right+n;break;case"bottom":t=i.bottom+n;s=i.left;break;case"left":t=i.top;s=i.left-r.width-n;break}o.style.top=`${t}px`;o.style.left=`${s}px`}render(){return o(i,{key:"7a21719bb6f13f435cae77f6b2c7c2eefb36c977"},o("button",{key:"707c94e2462fe230a777d61899b902c84feaa09c",class:"pds-popover__trigger",popoverTarget:this.componentId,popoverTargetAction:this.popoverTargetAction,onClick:this.handleClick},this.text),o("div",{key:"703d21dd5f3caadb8c0d097849f691d2d4407358",class:`pds-popover ${this.active?"pds-popover--active":""}`,id:this.componentId,popover:this.popoverType,style:{maxWidth:`${this.maxWidth}px`}},o("slot",{key:"42ef680b5850d62f50f1e6cfb1587c3d5b6db0d4"})))}get el(){return r(this)}};n.style=s;export{n as pds_popover};
-//# sourceMappingURL=p-2d52d5f7.entry.js.map

package/dist/pine-core/p-2d52d5f7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsPopoverCss","PdsPopoverStyle0","PdsPopover","componentWillRender","this","handlePopoverPositioning","handleClick","active","handleScroll","triggerEl","el","shadowRoot","querySelector","popoverEl","triggerRect","getBoundingClientRect","popoverRect","top","left","offset","placement","height","right","bottom","width","style","render","h","Host","key","class","popoverTarget","componentId","popoverTargetAction","onClick","text","id","popover","popoverType","maxWidth"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: 10px;\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,o4BACtB,MAAAC,EAAeD,E,MCOFE,EAAU,M,qCAUH,M,yBAMwC,O,iBAMjB,O,6DAgBb,I,eAMwB,O,CAEpD,mBAAAC,GACEC,KAAKC,0B,CAMP,WAAAC,GACEF,KAAKG,QAAUH,KAAKG,M,CAOtB,YAAAC,GACE,GAAIJ,KAAKG,OAAQ,CACfH,KAAKC,0B,EAID,wBAAAA,GACN,MAAMI,EAAYL,KAAKM,GAAGC,WAAWC,cAAc,yBACnD,MAAMC,EAAYT,KAAKM,GAAGC,WAAWC,cAAc,gBAEnD,IAAKH,IAAcI,EAAW,OAE9B,MAAMC,EAAcL,EAAUM,wBAC9B,MAAMC,EAAcH,EAAUE,wBAE9B,IAAIE,EAAM,EACV,IAAIC,EAAO,EACX,MAAMC,EAAS,EAEf,OAAQf,KAAKgB,WACX,IAAK,MACHH,EAAMH,EAAYG,IAAMD,EAAYK,OAASF,EAC7CD,EAAOJ,EAAYI,KACnB,MACF,IAAK,QACHD,EAAMH,EAAYG,IAClBC,EAAOJ,EAAYQ,MAAQH,EAC3B,MACF,IAAK,SACHF,EAAMH,EAAYS,OAASJ,EAC3BD,EAAOJ,EAAYI,KACnB,MACF,IAAK,OACHD,EAAMH,EAAYG,IAClBC,EAAOJ,EAAYI,KAAOF,EAAYQ,MAAQL,EAC9C,MAGJN,EAAUY,MAAMR,IAAM,GAAGA,MACzBJ,EAAUY,MAAMP,KAAO,GAAGA,K,CAG5B,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,MAAM,uBACNC,cAAe3B,KAAK4B,YACpBC,oBAAqB7B,KAAK6B,oBAC1BC,QAAS9B,KAAKE,aAEbF,KAAK+B,MAERR,EAAA,OAAAE,IAAA,2CACEC,MAAO,eAAe1B,KAAKG,OAAS,sBAAwB,KAC5D6B,GAAIhC,KAAK4B,YACTK,QAASjC,KAAKkC,YACdb,MAAO,CAAEc,SAAU,GAAGnC,KAAKmC,eAE3BZ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/pine-core/p-30cd9f18.entry.js

@@ -1,2 +0,0 @@
-import{r as i,h as s,H as t}from"./p-87fe352f.js";const e=":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio)}";const a=e;const n=class{constructor(s){i(this,s);this.alt="";this.componentId=undefined;this.height=undefined;this.loading="eager";this.sizes=undefined;this.src=undefined;this.srcset=undefined;this.width=undefined}render(){return s(t,{key:"784f2478acc28f043613c4c8fa67b5bef85820b1",class:{"pds-image":true},id:this.componentId},s("img",{key:"766a8230a6ea0ae45746fae832206785f963d215",alt:this.alt,height:this.height,loading:this.loading,sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))}};n.style=a;export{n as pds_image};
-//# sourceMappingURL=p-30cd9f18.entry.js.map

package/dist/pine-core/p-372a04fa.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-5480346a.system.js"],(function(i){"use strict";var o,e,n,r,p,c;return{setters:[function(i){o=i.r;e=i.c;n=i.h;r=i.H},function(i){p=i.d;c=i.r}],execute:function(){var s=":host{--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent:var(--pine-color-purple-100)}";var a=s;var d=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--sizing-close:10px;-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-after:var(--pine-dimension-025);margin-block-end:var(--pine-dimension-025);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--pine-dimension-025) / 4);margin-block-end:calc(var(--pine-dimension-025) / 4);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--large) .pds-chip__label,:host(.pds-chip--large) .pds-chip__button{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}";var h=d;var t=i("pds_chip",function(){function i(i){var n=this;o(this,i);this.pdsTagCloseClick=e(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){n.pdsTagCloseClick.emit()};this.componentId=undefined;this.dot=false;this.label=undefined;this.large=false;this.sentiment="neutral";this.variant="text"}i.prototype.classNames=function(){var i=["pds-chip"];if(this.large){i.push("pds-chip--large")}if(this.variant){i.push("pds-chip--"+this.variant)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")};i.prototype.setChipContent=function(){var i=this.variant==="dropdown";var o=i?n("button",{class:"pds-chip__button",type:"button"},this.dot&&n("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,n("pds-icon",{icon:p,size:"12px","aria-hidden":"true"})):n("span",{class:"pds-chip__label"},this.dot&&n("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return o};i.prototype.render=function(){return n(r,{key:"256ee05959d6561b0a2f208bad11ccc6b3b7b8ef",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&n("button",{key:"eb0593d00e34e0530af49bef45b211658c3d1842",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},n("pds-icon",{key:"ace8b0a28a1b2f731051fb645cb99f7f468ce9b8",icon:c,size:"12px"})))};return i}());t.style=a+h}}}));
-//# sourceMappingURL=p-372a04fa.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsChipTokensCss","PdsChipStyle0","pdsChipCss","PdsChipStyle1","PdsChip","exports","this","handleCloseClick","_this","pdsTagCloseClick","emit","class_1","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);\n  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);\n  --pine-chip-color-warning: var(--pine-color-yellow-100);\n  --pine-chip-color-success-dot: var(--pine-color-green-600);\n  --pine-chip-color-success-hover: var(--pine-color-green-300);\n  --pine-chip-color-success: var(--pine-color-green-100);\n  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);\n  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);\n  --pine-chip-color-neutral: var(--pine-color-grey-100);\n  --pine-chip-color-info-dot: var(--pine-color-blue-600);\n  --pine-chip-color-info-hover: var(--pine-color-blue-300);\n  --pine-chip-color-info: var(--pine-color-blue-100);\n  --pine-chip-color-danger-dot: var(--pine-color-red-600);\n  --pine-chip-color-danger-hover: var(--pine-color-red-300);\n  --pine-chip-color-danger: var(--pine-color-red-100);\n  --pine-chip-color-accent-dot: var(--pine-color-purple-600);\n  --pine-chip-color-accent-hover: var(--pine-color-purple-300);\n  --pine-chip-color-accent: var(--pine-color-purple-100);\n}\n",":host {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n  --sizing-close: 10px;\n\n  align-items: center;\n  border-radius: var(--pine-dimension-sm);\n  display: inline-flex;\n  padding-block: var(--pine-dimension-2xs);\n  padding-inline: var(--pine-dimension-150);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--pine-chip-color-accent),\n  danger: var(--pine-chip-color-danger),\n  info: var(--pine-chip-color-info),\n  neutral: var(--pine-chip-color-neutral),\n  success: var(--pine-chip-color-success),\n  warning: var(--pine-chip-color-warning),\n);\n\n$pds-chip-sentiment-text: (\n  accent: var(--pine-color-text-accent),\n  danger: var(--pine-color-text-danger),\n  info: var(--pine-color-text-info),\n  neutral: var(--pine-color-text-neutral),\n  success: var(--pine-color-text-success),\n  warning: var(--pine-color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--pine-chip-color-accent-dot),\n  danger: var(--pine-chip-color-danger-dot),\n  info: var(--pine-chip-color-info-dot),\n  neutral: var(--pine-chip-color-neutral-dot),\n  success: var(--pine-chip-color-success-dot),\n  warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n  accent: var(--pine-chip-color-accent-hover),\n  danger: var(--pine-chip-color-danger-hover),\n  info: var(--pine-chip-color-info-hover),\n  neutral: var(--pine-chip-color-neutral-hover),\n  success: var(--pine-chip-color-success-hover),\n  warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n    border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    .pds-chip__label, .pds-chip__button, .pds-chip__close {\n      /* stylelint-disable-next-line */\n      color: map-get($pds-chip-sentiment-text, $sentiment);\n      font-weight: var(--pine-font-weight-medium);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-hover, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map-get($pds-chip-sentiment-hover, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: var(--pine-border-width) solid transparent;\n  border-radius: var(--pine-border-radius-full);\n  display: inline-block;\n  height: var(--pine-dimension-2xs);\n  margin-block-end: var(--pine-dimension-025);\n  margin-inline-end: var(--pine-dimension-2xs);\n  width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label, .pds-chip__button {\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  .pds-chip__dot {\n    margin-block-end: calc(var(--pine-dimension-025) / 4);\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--pine-dimension-none);\n  border-radius: var(--pine-dimension-sm);\n  display: flex;\n  padding: var(--pine-dimension-none);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--pine-dimension-025) * -1);\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n  margin-inline-start: var(--pine-dimension-2xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  padding-block: var(--pine-dimension-2xs);\n  padding-inline: var(--pine-dimension-150);\n\n  .pds-chip__label, .pds-chip__button {\n    font: var(--pine-typography-heading-6);\n    letter-spacing: var(--pine-letter-spacing-heading-6);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gNAAA,IAAMA,EAAmB,4/BACzB,IAAAC,EAAeD,ECDf,IAAME,EAAa,6xMACnB,IAAAC,EAAeD,E,ICOFE,EAAOC,EAAA,sB,sFAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,sCA/BV,M,gCAWE,M,eAMsE,U,aAMvC,M,CAWvCC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIP,KAAKQ,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIT,KAAKU,QAAS,CAChBH,EAAWE,KAAK,aAAeT,KAAKU,Q,CAEtC,GAAIV,KAAKW,UAAW,CAClBJ,EAAWE,KAAK,aAAeT,KAAKW,U,CAGtC,OAAOJ,EAAWK,KAAK,I,EAGjBP,EAAAC,UAAAO,eAAA,WACN,IAAMC,EAAad,KAAKU,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnClB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,MACNJ,EAAA,YAAUK,KAAMC,EAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACTjB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,OAIV,OAAOL,C,EAGTV,EAAAC,UAAAkB,OAAA,WACE,OACER,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAOjB,KAAKO,aAAcoB,GAAI3B,KAAK4B,aACtC5B,KAAKa,iBACLb,KAAKU,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS7B,KAAKC,iBAAgB,aAAa,UACvFe,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U,WApFrB,I","ignoreList":[]}

package/dist/pine-core/p-3fbb568f.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,H as a}from"./p-87fe352f.js";const n=":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--color-background-spinner:var(--pine-color-brand);--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--color-background-spinner)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}";const t=n;const r=class{constructor(i){e(this,i);this.style=()=>{if(this.size!==undefined){return{height:this.loaderSize(),width:this.loaderSize()}}};this.isLoading=true;this.showLabel=false;this.size="md";this.variant="spinner"}loaderSize(){const e={xs:"24px",sm:"32px",md:"48px",lg:"64px",xl:"80px"};if(e[this.size]){return e[this.size]}else{return this.size}}render(){return i(a,{key:"0caf3182214726aca594996b43765c540a2bea76",class:`pds-loader ${this.isLoading?"":"pds-loader--hidden"}`,"aria-hidden":!this.isLoading,"aria-busy":this.isLoading,"aria-live":"polite"},this.variant==="spinner"&&i("div",{key:"bf62aea965efcfa2d5331ac9f69fdd60836ec498",class:"pds-loader--spinner"},i("svg",{key:"f4a2ca5e27c3c04f70029415996c79d54e3db148",style:this.style(),viewBox:"0 0 200 200",fill:"none"},i("defs",{key:"dba4da5d4c65b1322c079b1ef3608044f8a0c12d"},i("linearGradient",{key:"da837ec20645bb254a1bf86796306e07744adbdd",id:"spinner-secondHalf"},i("stop",{key:"922e70ae537fa4541afb13d167ca7578759462fd",offset:"0%","stop-opacity":"0","stop-color":"currentColor"}),i("stop",{key:"861e6a6540827f500872f11527301ef563b9d3cd",offset:"100%","stop-opacity":"0.5","stop-color":"currentColor"})),i("linearGradient",{key:"b8675daa4f37de927e8d3742385e2058a0b33f36",id:"spinner-firstHalf"},i("stop",{key:"754e35be6b1268864743c42adc41ef682dab1307",offset:"0%","stop-opacity":"1","stop-color":"currentColor"}),i("stop",{key:"9db1dee07342751a07a6039326bb2fada0ba22d7",offset:"100%","stop-opacity":"0.5","stop-color":"currentColor"}))),i("g",{key:"aee0ed505c0512e831724ca54cb287bde5ab2470",class:"pds-loader__spinner-path"},i("path",{key:"93096ef22bd2fdbaa819b926b4ec8fabce2050c7",stroke:"url(#spinner-secondHalf)",d:"M 4 100 A 96 96 0 0 1 196 100"}),i("path",{key:"648bde48070689c3b22bc40f1ad17de694d146f7",stroke:"url(#spinner-firstHalf)",d:"M 196 100 A 96 96 0 0 1 4 100"}),i("path",{key:"9a78cd8d70dbeed9cf04deef9ee766c31464b0e6",stroke:"currentColor","stroke-linecap":"round",d:"M 4 100 A 96 96 0 0 1 4 98"})))),this.variant==="typing"&&i("div",{key:"6b5a395b4a7fef244d941d5276ca4348ed2e79de",class:"pds-loader--typing"},i("span",{key:"7c1e5a5b2441e0c649a1faab10a758290487c492"}),i("span",{key:"39db51a0391c2447ab4ba5a75e8d544c2167e41b"}),i("span",{key:"5315bfc12f3b269ff14ac4abe39c4bd50be4a648"})),i("div",{key:"c53aa88ef1f3bbabd67f332529016adbfcd4e82e",class:`pds-loader__label ${this.showLabel?"":"pds-loader--hidden"}`},i("slot",{key:"3d6dbd3a72223fc49e1ce1f0578296b18c7175ae",name:"label"},"Loading...")))}};r.style=t;export{r as pds_loader};
-//# sourceMappingURL=p-3fbb568f.entry.js.map

package/dist/pine-core/p-3fbb568f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsLoaderCss","PdsLoaderStyle0","PdsLoader","this","style","size","undefined","height","loaderSize","width","sizes","xs","sm","md","lg","xl","render","h","Host","key","class","isLoading","variant","viewBox","fill","id","offset","stroke","d","showLabel","name"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0 ;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n  --color-background-spinner: var(--pine-color-brand);\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--color-background-spinner);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,s+EACrB,MAAAC,EAAeD,E,MCUFE,EAAS,M,yBA2CZC,KAAAC,MAAQ,KACd,GAAID,KAAKE,OAASC,UAAW,CAC3B,MAAO,CACLC,OAAQJ,KAAKK,aACbC,MAAON,KAAKK,a,kBA3CW,K,eAKC,M,UAWnB,K,aAK6B,S,CAEhC,UAAAA,GACN,MAAME,EAAmC,CACvCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAMP,KAAKE,MAAO,CACpB,OAAOK,EAAMP,KAAKE,K,KACb,CACL,OAAOF,KAAKE,I,EAahB,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,cAAcjB,KAAKkB,UAAY,GAAK,uBAAsB,eAAgBlB,KAAKkB,UAAS,YAAalB,KAAKkB,UAAS,YAAY,UACzIlB,KAAKmB,UAAY,WAChBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,OAAAE,IAAA,2CAAKf,MAAOD,KAAKC,QAASmB,QAAQ,cAAcC,KAAK,QACnDP,EAAA,QAAAE,IAAA,4CACEF,EAAA,kBAAAE,IAAA,2CAAgBM,GAAG,sBACjBR,EAAA,QAAAE,IAAA,2CAAMO,OAAO,KAAI,eAAc,IAAG,aAAY,iBAC9CT,EAAA,QAAAE,IAAA,2CAAMO,OAAO,OAAM,eAAc,MAAK,aAAY,kBAEpDT,EAAA,kBAAAE,IAAA,2CAAgBM,GAAG,qBACjBR,EAAA,QAAAE,IAAA,2CAAMO,OAAO,KAAI,eAAc,IAAG,aAAY,iBAC9CT,EAAA,QAAAE,IAAA,2CAAMO,OAAO,OAAM,eAAc,MAAK,aAAY,mBAItDT,EAAA,KAAAE,IAAA,2CAAGC,MAAM,4BACPH,EAAA,QAAAE,IAAA,2CAAMQ,OAAO,2BAA2BC,EAAE,kCAC1CX,EAAA,QAAAE,IAAA,2CAAMQ,OAAO,0BAA0BC,EAAE,kCAEzCX,EAAA,QAAAE,IAAA,2CAAMQ,OAAO,eAAc,iBAAgB,QAAQC,EAAE,kCAM5DzB,KAAKmB,UAAY,UAChBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,8CAIJF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,qBAAqBjB,KAAK0B,UAAY,GAAK,wBACrDZ,EAAA,QAAAE,IAAA,2CAAMW,KAAK,SAAO,e","ignoreList":[]}

package/dist/pine-core/p-4d1fbb88.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js"],(function(e){"use strict";var t,a,n,i;return{setters:[function(e){t=e.r;a=e.h;n=e.H;i=e.g}],execute:function(){var s=":host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel.is-active{display:block}";var d=s;var c=e("pds_tabpanel",function(){function e(e){t(this,e);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.selected=false}e.prototype.render=function(){return a(n,{key:"e373f0105e391bcb04888b060f41d96cf374ee2d",slot:"tabpanels"},a("div",{key:"699b02073f6fa1caafc5920b82f776c86c553599",role:"tabpanel",id:this.parentComponentId+"__"+this.name+"-panel",tabindex:"0","aria-labelledby":this.parentComponentId+"__"+this.name,class:this.selected?"pds-tabpanel is-active":"pds-tabpanel"},a("slot",{key:"df59ed91bf0ca60ccbde92b2f84c7c17659bfdbd"})))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());c.style=d}}}));
-//# sourceMappingURL=p-4d1fbb88.system.entry.js.map

package/dist/pine-core/p-4f2e4e6f.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-8d1efd85.system.js","./p-5480346a.system.js"],(function(e){"use strict";var r,i,s,n,o,t,a,d;return{setters:[function(e){r=e.r;i=e.c;s=e.h;n=e.H},function(e){o=e.m},function(e){t=e.P},function(e){a=e.b;d=e.e}],execute:function(){var l=":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";var c=l;var f=":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:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var p=f;var u=':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)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}label{grid-area:label;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--pine-border);border-radius:10px;font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-150);padding-right:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-select__error-message,.pds-select__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-select__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)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:2.5rem;pointer-events:none;position:relative;z-index:1}';var h=u;var b=e("pds_select",function(){function e(e){var s=this;r(this,e);this.pdsSelectChange=i(this,"pdsSelectChange",7);this.onSelectUpdate=function(e){var r=e.target;var i=Array.from(r.options).filter((function(e){return e.selected})).map((function(e){return e.value}));if(i.length===1&&!s.multiple){s.value=i[0]}else{s.value=i}s.pdsSelectChange.emit(e)};this.handleSlotChange=function(){var e=s.slotContainer.querySelector("slot");s.selectEl.innerHTML="";var r=e.assignedElements({flatten:true});r.forEach((function(e){if(["OPTION","OPTGROUP"].includes(e.tagName)){var r=e.cloneNode(true);if(r.tagName==="OPTION"&&r.value===s.value){r.selected=true}s.selectEl.appendChild(r)}}));s.updateSelectedOption()};this.autocomplete=undefined;this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=undefined;this.label=undefined;this.multiple=false;this.name=undefined;this.required=false;this.value=undefined}e.prototype.valueChanged=function(){this.updateSelectedOption()};e.prototype.componentWillLoad=function(){this.updateSelectedOption()};e.prototype.updateSelectedOption=function(){var e=this;if(this.selectEl){var r=this.selectEl.options;Array.from(r).map((function(r){if(Array.isArray(e.value)){r.selected=e.value.includes(r.value)}else{r.selected=e.value===r.value}}))}};e.prototype.getHelperMessage=function(){return this.helperMessage&&s("p",{class:"pds-select__helper-message",id:o(this.componentId,"helper")},this.helperMessage)};e.prototype.getErrorMessage=function(){return this.errorMessage&&s("p",{class:"pds-select__error-message",id:o(this.componentId,"error"),"aria-live":"assertive"},s("pds-icon",{icon:a,size:"small"}),this.errorMessage)};e.prototype.renderMessages=function(){if(!this.helperMessage&&!this.errorMessage)return null;return s("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage())};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){var e=this;return s(n,{key:"fe06a18d5fda6211d1152ef4d6788b8d6b1b14e2","aria-disabled":this.disabled?"true":null,class:this.classNames()},s("div",{key:"f4c5487815076ffb36672d46c109a017a9ad00a5",class:"pds-select"},s(t,{key:"56057f8450a18d3b89bbf9899dfee07ea4ca7aa0",htmlFor:this.componentId,text:this.label}),s("select",{key:"70324033d55908cc147a9a773c188ee914661be7",autocomplete:this.autocomplete||undefined,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onChange:this.onSelectUpdate,required:this.required,ref:function(r){return e.selectEl=r}}),s("div",{key:"182f6da416f4135a7fd06577589b0e308f9e84fa","aria-hidden":"true",class:"hidden",ref:function(r){return e.slotContainer=r}},s("slot",{key:"0ad6aaf6901946337999ae53dcd570fa80dad9c6",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&s("pds-icon",{key:"46bfb7782c983bb6b04b1a97ddf3122eca7f62cb",class:"pds-select__select-icon",icon:d})))};Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}());b.style=c+(p+h)}}}));
-//# sourceMappingURL=p-4f2e4e6f.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsSelectTokensCss","PdsSelectStyle0","labelCss","PdsSelectStyle1","pdsSelectCss","PdsSelectStyle2","PdsSelect","exports","this","onSelectUpdate","e","target","values","Array","from","options","filter","option","map","length","_this","multiple","value","pdsSelectChange","emit","handleSlotChange","slot","slotContainer","querySelector","selectEl","innerHTML","assignedElements","flatten","forEach","item","includes","tagName","clonedItem","cloneNode","selected","appendChild","updateSelectedOption","class_1","prototype","valueChanged","componentWillLoad","isArray","getHelperMessage","helperMessage","h","class","id","messageId","componentId","getErrorMessage","errorMessage","icon","danger","size","renderMessages","classNames","invalid","push","disabled","join","render","Host","key","PdsLabel","htmlFor","text","label","autocomplete","undefined","name","onChange","required","ref","el","onSlotchange","enlarge"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-select-color-background-danger: var(--pine-color-red-050);\n}\n",":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: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\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  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\nlabel {\n  grid-area: label;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\nselect {\n  appearance: none;\n  border: var(--pine-border);\n  border-radius: 10px;\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-150);\n  padding-right: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-select__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\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: 2.5rem;\n  pointer-events: none;\n  position: relative;\n  z-index: 1;\n}\n","import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n            <select\n              autocomplete={this.autocomplete || undefined}\n              class=\"pds-select__field\"\n              disabled={this.disabled}\n              id={this.componentId}\n              multiple={this.multiple}\n              name={this.name}\n              onChange={this.onSelectUpdate}\n              required={this.required}\n              ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n            ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4SAAA,IAAMA,EAAqB,yEAC3B,IAAAC,EAAeD,ECDf,IAAME,EAAW,qTACjB,IAAAC,EAAeD,ECDf,IAAME,EAAe,qrFACrB,IAAAC,EAAeD,E,ICSFE,EAASC,EAAA,wB,oFA+GZC,KAAAC,eAAiB,SAACC,GACxB,IAAMC,EAASD,EAAEC,OAEjB,IAAMC,EAASC,MAAMC,KAAKH,EAAOI,SAC5BC,QAAO,SAACC,GAAM,OAAOA,EAAe,QAAtB,IACdC,KAAI,SAACD,GAAM,OAAOA,EAAY,KAAnB,IAEhB,GAAIL,EAAOO,SAAW,IAAMC,EAAKC,SAAU,CACvCD,EAAKE,MAAQV,EAAO,E,KACjB,CACHQ,EAAKE,MAAQV,C,CAGjBQ,EAAKG,gBAAgBC,KAAKd,E,EASpBF,KAAAiB,iBAAmB,WACzB,IAAMC,EAAON,EAAKO,cAAcC,cAAc,QAE9CR,EAAKS,SAASC,UAAY,GAC1B,IAAMC,EAAmBL,EAAKK,iBAAiB,CAAEC,QAAS,OAE1DD,EAAiBE,SAAQ,SAACC,GACxB,GAAK,CAAC,SAAU,YAAYC,SAASD,EAAKE,SAAU,CAClD,IAAMC,EAAaH,EAAKI,UAAU,MAClC,GAAID,EAAWD,UAAY,UAAaC,EAAiCf,QAAUF,EAAKE,MAAO,CAC5Fe,EAAiCE,SAAW,I,CAE/CnB,EAAKS,SAASW,YAAYH,E,KAI9BjB,EAAKqB,sB,uEAlIY,M,mHA0BA,M,kCAWA,M,qBAmBnBC,EAAAC,UAAAC,aAAA,WACEpC,KAAKiC,sB,EAGPC,EAAAC,UAAAE,kBAAA,WACErC,KAAKiC,sB,EAaCC,EAAAC,UAAAF,qBAAA,eAAArB,EAAAZ,KACN,GAAIA,KAAKqB,SAAU,CACjB,IAAMd,EAAUP,KAAKqB,SAASd,QAG9BF,MAAMC,KAAKC,GAASG,KAAI,SAACD,GACvB,GAAIJ,MAAMiC,QAAQ1B,EAAKE,OAAQ,CAC7BL,EAAOsB,SAAWnB,EAAKE,MAAMa,SAASlB,EAAOK,M,KACxC,CACLL,EAAOsB,SAAWnB,EAAKE,QAAUL,EAAOK,K,OAkDxCoB,EAAAC,UAAAI,iBAAA,WACN,OAAOvC,KAAKwC,eACVC,EAAA,KAAGC,MAAM,6BAA6BC,GAAIC,EAAU5C,KAAK6C,YAAa,WACnE7C,KAAKwC,c,EAKJN,EAAAC,UAAAW,gBAAA,WACN,OAAO9C,KAAK+C,cACVN,EAAA,KAAGC,MAAM,4BAA4BC,GAAIC,EAAU5C,KAAK6C,YAAa,SAAQ,YAAY,aACvFJ,EAAA,YAAUO,KAAMC,EAAQC,KAAK,UAC5BlD,KAAK+C,a,EAKJb,EAAAC,UAAAgB,eAAA,WACN,IAAKnD,KAAKwC,gBAAkBxC,KAAK+C,aAAc,OAAO,KAEtD,OACEN,EAAA,OAAKC,MAAM,uBACR1C,KAAKuC,mBACLvC,KAAK8C,kB,EAKJZ,EAAAC,UAAAiB,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIpD,KAAKqD,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAItD,KAAKuD,SAAU,CAAEH,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBtB,EAAAC,UAAAsB,OAAA,eAAA7C,EAAAZ,KACE,OACEyC,EAACiB,EAAI,CAAAC,IAAA,2DAAgB3D,KAAKuD,SAAW,OAAS,KAAMb,MAAO1C,KAAKoD,cAC9DX,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,cACTD,EAACmB,EAAQ,CAAAD,IAAA,2CAACE,QAAS7D,KAAK6C,YAAaiB,KAAM9D,KAAK+D,QAC9CtB,EAAA,UAAAkB,IAAA,2CACEK,aAAchE,KAAKgE,cAAgBC,UACnCvB,MAAM,oBACNa,SAAUvD,KAAKuD,SACfZ,GAAI3C,KAAK6C,YACThC,SAAUb,KAAKa,SACfqD,KAAMlE,KAAKkE,KACXC,SAAUnE,KAAKC,eACfmE,SAAUpE,KAAKoE,SACfC,IAAK,SAACC,GAAE,OAAM1D,EAAKS,SAAWiD,CAAtB,IAEZ7B,EAAA,OAAAkB,IAAA,yDAAiB,OAAOjB,MAAM,SAAS2B,IAAK,SAACC,GAAE,OAAM1D,EAAKO,cAAgBmD,CAA3B,GAC7C7B,EAAA,QAAAkB,IAAA,2CAAMY,aAAcvE,KAAKiB,oBAE1BjB,KAAKmD,kBACJnD,KAAKa,UAAY4B,EAAA,YAAAkB,IAAA,2CAAUjB,MAAM,0BAA0BM,KAAMwB,K,mIAjNvD,I","ignoreList":[]}