@pine-ds/core 2.16.3 → 2.16.4

package/dist/esm-es5/pds-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["pdsSelectTokensCss","PdsSelectStyle0","labelCss","PdsSelectStyle1","pdsSelectCss","PdsSelectStyle2","PdsSelect","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","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":"gPAAA,IAAMA,mBAAqB,yEAC3B,IAAAC,gBAAeD,mBCDf,IAAME,SAAW,qTACjB,IAAAC,gBAAeD,SCDf,IAAME,aAAe,qrFACrB,IAAAC,gBAAeD,a,ICSFE,UAAS,W,6GA+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,qBAmBnBlC,EAAAmC,UAAAC,aAAA,WACEnC,KAAKiC,sB,EAGPlC,EAAAmC,UAAAE,kBAAA,WACEpC,KAAKiC,sB,EAaClC,EAAAmC,UAAAD,qBAAA,eAAArB,EAAAZ,KACN,GAAIA,KAAKqB,SAAU,CACjB,IAAMd,EAAUP,KAAKqB,SAASd,QAG9BF,MAAMC,KAAKC,GAASG,KAAI,SAACD,GACvB,GAAIJ,MAAMgC,QAAQzB,EAAKE,OAAQ,CAC7BL,EAAOsB,SAAWnB,EAAKE,MAAMa,SAASlB,EAAOK,M,KACxC,CACLL,EAAOsB,SAAWnB,EAAKE,QAAUL,EAAOK,K,OAkDxCf,EAAAmC,UAAAI,iBAAA,WACN,OAAOtC,KAAKuC,eACVC,EAAA,KAAGC,MAAM,6BAA6BC,GAAIC,UAAU3C,KAAK4C,YAAa,WACnE5C,KAAKuC,c,EAKJxC,EAAAmC,UAAAW,gBAAA,WACN,OAAO7C,KAAK8C,cACVN,EAAA,KAAGC,MAAM,4BAA4BC,GAAIC,UAAU3C,KAAK4C,YAAa,SAAQ,YAAY,aACvFJ,EAAA,YAAUO,KAAMC,OAAQC,KAAK,UAC5BjD,KAAK8C,a,EAKJ/C,EAAAmC,UAAAgB,eAAA,WACN,IAAKlD,KAAKuC,gBAAkBvC,KAAK8C,aAAc,OAAO,KAEtD,OACEN,EAAA,OAAKC,MAAM,uBACRzC,KAAKsC,mBACLtC,KAAK6C,kB,EAKJ9C,EAAAmC,UAAAiB,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAInD,KAAKoD,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIrD,KAAKsD,SAAU,CAAEH,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBxD,EAAAmC,UAAAsB,OAAA,eAAA5C,EAAAZ,KACE,OACEwC,EAACiB,KAAI,CAAAC,IAAA,2DAAgB1D,KAAKsD,SAAW,OAAS,KAAMb,MAAOzC,KAAKmD,cAC9DX,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,cACTD,EAACmB,SAAQ,CAAAD,IAAA,2CAACE,QAAS5D,KAAK4C,YAAaiB,KAAM7D,KAAK8D,QAC9CtB,EAAA,UAAAkB,IAAA,2CACEK,aAAc/D,KAAK+D,cAAgBC,UACnCvB,MAAM,oBACNa,SAAUtD,KAAKsD,SACfZ,GAAI1C,KAAK4C,YACT/B,SAAUb,KAAKa,SACfoD,KAAMjE,KAAKiE,KACXC,SAAUlE,KAAKC,eACfkE,SAAUnE,KAAKmE,SACfC,IAAK,SAACC,GAAE,OAAMzD,EAAKS,SAAWgD,CAAtB,IAEZ7B,EAAA,OAAAkB,IAAA,yDAAiB,OAAOjB,MAAM,SAAS2B,IAAK,SAACC,GAAE,OAAMzD,EAAKO,cAAgBkD,CAA3B,GAC7C7B,EAAA,QAAAkB,IAAA,2CAAMY,aAActE,KAAKiB,oBAE1BjB,KAAKkD,kBACJlD,KAAKa,UAAY2B,EAAA,YAAAkB,IAAA,2CAAUjB,MAAM,0BAA0BM,KAAMwB,W,mIAjNvD,G","ignoreList":[]}
+{"version":3,"names":["pdsSelectTokensCss","PdsSelectStyle0","labelCss","PdsSelectStyle1","pdsSelectCss","PdsSelectStyle2","PdsSelect","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","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","label","htmlFor","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  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\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-2xs);\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 { 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          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\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":"6LAAA,IAAMA,mBAAqB,yEAC3B,IAAAC,gBAAeD,mBCDf,IAAME,SAAW,qTACjB,IAAAC,gBAAeD,SCDf,IAAME,aAAe,8vFACrB,IAAAC,gBAAeD,a,ICQFE,UAAS,W,6GA+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,qBAmBnBlC,EAAAmC,UAAAC,aAAA,WACEnC,KAAKiC,sB,EAGPlC,EAAAmC,UAAAE,kBAAA,WACEpC,KAAKiC,sB,EAaClC,EAAAmC,UAAAD,qBAAA,eAAArB,EAAAZ,KACN,GAAIA,KAAKqB,SAAU,CACjB,IAAMd,EAAUP,KAAKqB,SAASd,QAG9BF,MAAMC,KAAKC,GAASG,KAAI,SAACD,GACvB,GAAIJ,MAAMgC,QAAQzB,EAAKE,OAAQ,CAC7BL,EAAOsB,SAAWnB,EAAKE,MAAMa,SAASlB,EAAOK,M,KACxC,CACLL,EAAOsB,SAAWnB,EAAKE,QAAUL,EAAOK,K,OAkDxCf,EAAAmC,UAAAI,iBAAA,WACN,OAAOtC,KAAKuC,eACVC,EAAA,KAAGC,MAAM,6BAA6BC,GAAIC,UAAU3C,KAAK4C,YAAa,WACnE5C,KAAKuC,c,EAKJxC,EAAAmC,UAAAW,gBAAA,WACN,OAAO7C,KAAK8C,cACVN,EAAA,KAAGC,MAAM,4BAA4BC,GAAIC,UAAU3C,KAAK4C,YAAa,SAAQ,YAAY,aACvFJ,EAAA,YAAUO,KAAMC,OAAQC,KAAK,UAC5BjD,KAAK8C,a,EAKJ/C,EAAAmC,UAAAgB,eAAA,WACN,IAAKlD,KAAKuC,gBAAkBvC,KAAK8C,aAAc,OAAO,KAEtD,OACEN,EAAA,OAAKC,MAAM,uBACRzC,KAAKsC,mBACLtC,KAAK6C,kB,EAKJ9C,EAAAmC,UAAAiB,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAInD,KAAKoD,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIrD,KAAKsD,SAAU,CAAEH,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBxD,EAAAmC,UAAAsB,OAAA,eAAA5C,EAAAZ,KACE,OACEwC,EAACiB,KAAI,CAAAC,IAAA,2DAAgB1D,KAAKsD,SAAW,OAAS,KAAMb,MAAOzC,KAAKmD,cAC9DX,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,cACRzC,KAAK2D,OACJnB,EAAA,SAAAkB,IAAA,2CAAOE,QAAS5D,KAAK4C,aAAc5C,KAAK2D,OAE1CnB,EAAA,UAAAkB,IAAA,2CACEG,aAAc7D,KAAK6D,cAAgBC,UACnCrB,MAAM,oBACNa,SAAUtD,KAAKsD,SACfZ,GAAI1C,KAAK4C,YACT/B,SAAUb,KAAKa,SACfkD,KAAM/D,KAAK+D,KACXC,SAAUhE,KAAKC,eACfgE,SAAUjE,KAAKiE,SACfC,IAAK,SAACC,GAAE,OAAMvD,EAAKS,SAAW8C,CAAtB,IAEV3B,EAAA,OAAAkB,IAAA,yDAAiB,OAAOjB,MAAM,SAASyB,IAAK,SAACC,GAAE,OAAMvD,EAAKO,cAAgBgD,CAA3B,GAC7C3B,EAAA,QAAAkB,IAAA,2CAAMU,aAAcpE,KAAKiB,oBAE1BjB,KAAKkD,kBACJlD,KAAKa,UAAY2B,EAAA,YAAAkB,IAAA,2CAAUjB,MAAM,0BAA0BM,KAAMsB,W,mIAnNvD,G","ignoreList":[]}

package/dist/esm-es5/pds-sortable-item.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-b1696fed.js";import{h as handle}from"./index-7f8e0fa6.js";var pdsSortableItemCss=".pds-sortable-item.sc-pds-sortable-item-h{--box-shadow:var(--pine-box-shadow-400);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";var PdsSortableItemStyle0=pdsSortableItemCss;var PdsSortableItem=function(){function e(e){registerInstance(this,e);this.enableActions=false;this.componentId=undefined;this.showHandle=false}e.prototype.componentWillRender=function(){this.sortableRef=this.el.closest("pds-sortable");if(this.sortableRef&&this.sortableRef.handleType==="handle"){this.showHandle=true}};e.prototype.render=function(){return h(Host,{key:"a1cb930442bdca3f9aedbc256b70d6582068186a",class:"pds-sortable-item",id:this.componentId},this.showHandle&&h("div",{key:"ad13a6f870cbae41faf4958979a0cda900e0f2f8",class:"pds-sortable-item__handle"},h("pds-icon",{key:"1a45cc357b22c6fff2baaeb101544bc872703566",icon:handle})),h("slot",{key:"2b2f5b99b7e97069555b81e8c4539fa6ca48de41"}),this.enableActions&&h("div",{key:"97c23c665a260a153c7db5cbc9772f616fafb3f7",class:"pds-sortable-item__actions"},h("slot",{key:"e4b9b759a16f33919eb774fa021588b55df675dc",name:"sortable-item-actions"})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsSortableItem.style=PdsSortableItemStyle0;export{PdsSortableItem as pds_sortable_item};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-b1696fed.js";import{h as handle}from"./index-858623fe.js";var pdsSortableItemCss=".pds-sortable-item.sc-pds-sortable-item-h{--box-shadow:var(--pine-box-shadow-400);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";var PdsSortableItemStyle0=pdsSortableItemCss;var PdsSortableItem=function(){function e(e){registerInstance(this,e);this.enableActions=false;this.componentId=undefined;this.showHandle=false}e.prototype.componentWillRender=function(){this.sortableRef=this.el.closest("pds-sortable");if(this.sortableRef&&this.sortableRef.handleType==="handle"){this.showHandle=true}};e.prototype.render=function(){return h(Host,{key:"a1cb930442bdca3f9aedbc256b70d6582068186a",class:"pds-sortable-item",id:this.componentId},this.showHandle&&h("div",{key:"ad13a6f870cbae41faf4958979a0cda900e0f2f8",class:"pds-sortable-item__handle"},h("pds-icon",{key:"1a45cc357b22c6fff2baaeb101544bc872703566",icon:handle})),h("slot",{key:"2b2f5b99b7e97069555b81e8c4539fa6ca48de41"}),this.enableActions&&h("div",{key:"97c23c665a260a153c7db5cbc9772f616fafb3f7",class:"pds-sortable-item__actions"},h("slot",{key:"e4b9b759a16f33919eb774fa021588b55df675dc",name:"sortable-item-actions"})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsSortableItem.style=PdsSortableItemStyle0;export{PdsSortableItem as pds_sortable_item};
 //# sourceMappingURL=pds-sortable-item.entry.js.map

package/dist/esm-es5/pds-switch.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{m as messageId,a as assignDescription}from"./form-1b7b69e3.js";import{P as PdsLabel}from"./pds-label-949a17b6.js";import{b as danger}from"./index-7f8e0fa6.js";var labelCss=":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 PdsSwitchStyle0=labelCss;var pdsSwitchCss=':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);--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--pine-color-text-message);-ms-flex:1 0 100%;flex:1 0 100%;font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-switch__message--error{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-background-container-disabled)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}';var PdsSwitchStyle1=pdsSwitchCss;var PdsSwitch=function(){function e(e){var i=this;registerInstance(this,e);this.pdsSwitchChange=createEvent(this,"pdsSwitchChange",7);this.onSwitchUpdate=function(e){if(i.disabled)return;var r=e.target;i.checked=r.checked;i.pdsSwitchChange.emit(e)};this.switchClassNames=function(){var e="pds-switch";if(i.invalid===true){e+=" pds-switch--error"}if(i.helperMessage!==undefined){e+=" pds-switch--message"}return e};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.value=undefined}e.prototype.render=function(){return h(Host,{key:"c4d1c78da3de4034094ff3bc1167437e33ebd9fd",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},h("input",{key:"709b51cfd719b5498395e0921536606124c84626","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,checked:this.checked,class:"pds-switch__input",disabled:this.disabled,id:this.componentId,name:this.name?this.name:this.componentId,onChange:this.onSwitchUpdate,required:this.required,type:"checkbox",value:this.value}),h(PdsLabel,{key:"cf834cf60234a6a041d0fe75632ee13220b25fd3",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&h("div",{key:"93424c713be90c58cbe0330859688f8fee15163c",class:"pds-switch__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{key:"a20a1c59aefe4e33fd6f595a80408626c8d2623e",class:"pds-switch__message pds-switch__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{key:"c35d6daab76aeec7f64e72a38b1c8fe59ea5d897",icon:danger,size:"small"}),this.errorMessage))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsSwitch.style=PdsSwitchStyle0+PdsSwitchStyle1;export{PdsSwitch as pds_switch};
+import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-b1696fed.js";import{m as messageId,a as assignDescription}from"./form-1b7b69e3.js";import{b as danger}from"./index-858623fe.js";var PdsLabel=function(e){var i=e.classNames,r=e.htmlFor,s=e.text;return h("label",{class:i,htmlFor:r},s)};var labelCss=":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 PdsSwitchStyle0=labelCss;var pdsSwitchCss=':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);--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--pine-color-text-message);-ms-flex:1 0 100%;flex:1 0 100%;font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-switch__message--error{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-background-container-disabled)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}';var PdsSwitchStyle1=pdsSwitchCss;var PdsSwitch=function(){function e(e){var i=this;registerInstance(this,e);this.pdsSwitchChange=createEvent(this,"pdsSwitchChange",7);this.onSwitchUpdate=function(e){if(i.disabled)return;var r=e.target;i.checked=r.checked;i.pdsSwitchChange.emit(e)};this.switchClassNames=function(){var e="pds-switch";if(i.invalid===true){e+=" pds-switch--error"}if(i.helperMessage!==undefined){e+=" pds-switch--message"}return e};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.value=undefined}e.prototype.render=function(){return h(Host,{key:"c4d1c78da3de4034094ff3bc1167437e33ebd9fd",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},h("input",{key:"709b51cfd719b5498395e0921536606124c84626","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,checked:this.checked,class:"pds-switch__input",disabled:this.disabled,id:this.componentId,name:this.name?this.name:this.componentId,onChange:this.onSwitchUpdate,required:this.required,type:"checkbox",value:this.value}),h(PdsLabel,{key:"cf834cf60234a6a041d0fe75632ee13220b25fd3",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&h("div",{key:"93424c713be90c58cbe0330859688f8fee15163c",class:"pds-switch__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{key:"a20a1c59aefe4e33fd6f595a80408626c8d2623e",class:"pds-switch__message pds-switch__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{key:"c35d6daab76aeec7f64e72a38b1c8fe59ea5d897",icon:danger,size:"small"}),this.errorMessage))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsSwitch.style=PdsSwitchStyle0+PdsSwitchStyle1;export{PdsSwitch as pds_switch};
 //# sourceMappingURL=pds-switch.entry.js.map

package/dist/esm-es5/pds-switch.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["labelCss","PdsSwitchStyle0","pdsSwitchCss","PdsSwitchStyle1","PdsSwitch","this","onSwitchUpdate","e","_this","disabled","input","target","checked","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","prototype","render","h","Host","key","class","assignDescription","componentId","id","name","onChange","required","type","value","PdsLabel","classNames","htmlFor","text","label","messageId","errorMessage","icon","danger","size"],"sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  // Need discussions\n  --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n  --pine-dimension-025: 2px;\n  --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n  --number-transition-timing: 0.15s ease-out;\n\n  align-items: flex-start;\n  color: var(--pine-color-text);\n  display: inline-flex;\n  flex-flow: row wrap;\n  position: relative;\n}\n\n:host(.pds-switch--error) {\n  color: var(--pine-color-text-message-danger);\n\n  input,\n  input:checked,\n  input:hover:not(:disabled):not(:checked) {\n    background-color: var(--pine-color-danger);\n  }\n\n  input:focus-visible:not(:disabled):not(:checked) {\n    box-shadow: var(--box-shadow-focus-error);\n  }\n\n  label {\n    color: var(--color-text-error);\n  }\n}\n\n// switch container\ninput {\n  appearance: none;\n  background: var(--pine-color-neutral);\n  border: 0;\n  border-radius: var(--pine-dimension-sm);\n  cursor: pointer;\n  display: inline-block;\n  height: var(--pine-dimension-250);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transition: var(--number-transition-timing);\n  transition-property: background, border, color;\n  width: var(--pine-dimension-450);\n\n  // switch toggle\n  &::after {\n    background: var(--pine-color-secondary);\n    border-radius: var(--pine-border-radius-full);\n    box-shadow: var(--pine-box-shadow);\n    content: \"\";\n    display: block;\n    height: var(--sizing-input-toggle-size);\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    position: absolute;\n    transform: translate3d(-100%, -50%, 0);\n    transition: transform var(--number-transition-timing);\n    width: var(--sizing-input-toggle-size);\n  }\n}\n\nlabel {\n  cursor: pointer;\n  display: inline-flex;\n  flex-grow: 1;\n  margin-inline-start: var(--pine-dimension-150);\n\n  .pds-switch--error & {\n    color: inherit;\n  }\n}\n\n// Help and error messages\n.pds-switch__message {\n  color: var(--pine-color-text-message);\n  flex: 1 0 100%;\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-2xl);\n\n  + .pds-switch__message {\n    margin-block-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-switch__message--error {\n  align-items: center;\n  color: inherit;\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n// Disabled state\ninput:disabled {\n  background-color: var(--pine-color-neutral-disabled);\n  cursor: not-allowed;\n\n  ~ label {\n    cursor: initial;\n  }\n\n  &:hover::after {\n    background-color: var(--pine-color-background-container-disabled);\n  }\n\n  .pds-switch__message {\n    color: initial;\n  }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n  background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n  box-shadow: var(--box-shadow-focus);\n  outline: none;\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n  transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n  background-color: currentColor;\n  color: var(--pine-color-accent);\n\n  &:hover {\n    border-color: currentColor;\n    color: var(--pine-color-accent-hover);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"0QAAA,IAAMA,SAAW,qTACjB,IAAAC,gBAAeD,SCDf,IAAME,aAAe,8wHACrB,IAAAC,gBAAeD,a,ICSFE,UAAS,W,6GA0DZC,KAAAC,eAAiB,SAACC,GACxB,GAAIC,EAAKC,SAAU,OAEnB,IAAMC,EAAQH,EAAEI,OAChBH,EAAKI,QAAUF,EAAME,QACrBJ,EAAKK,gBAAgBC,KAAKP,E,EAGpBF,KAAAU,iBAAmB,WACzB,IAAIC,EAAgB,aAEpB,GAAIR,EAAKS,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIR,EAAKU,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,C,0CAhE0B,M,cAKf,M,sEAeD,M,uDAeC,M,qBAgCpBZ,EAAAgB,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKU,mBAAkB,gBAAiBV,KAAKI,SAAW,OAAS,MAC5Ea,EAAA,SAAAE,IAAA,8DACoBE,kBAAkBrB,KAAKsB,YAAatB,KAAKY,QAASZ,KAAKa,eAAc,eACzEb,KAAKY,QAAU,OAASE,UACtCP,QAASP,KAAKO,QACda,MAAM,oBACNhB,SAAUJ,KAAKI,SACfmB,GAAIvB,KAAKsB,YACTE,KAAMxB,KAAKwB,KAAOxB,KAAKwB,KAAOxB,KAAKsB,YACnCG,SAAUzB,KAAKC,eACfyB,SAAU1B,KAAK0B,SACfC,KAAK,WACLC,MAAO5B,KAAK4B,QAEdX,EAACY,SAAQ,CAAAV,IAAA,2CAACW,WAAW,oBAAoBC,QAAS/B,KAAKsB,YAAaU,KAAMhC,KAAKiC,QAC9EjC,KAAKa,eACJI,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPG,GAAIW,UAAUlC,KAAKsB,YAAa,WAE/BtB,KAAKa,eAGTb,KAAKmC,cACJlB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPG,GAAIW,UAAUlC,KAAKsB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUiB,KAAMC,OAAQC,KAAK,UAC5BtC,KAAKmC,c,gIA9GI,G","ignoreList":[]}
+{"version":3,"names":["PdsLabel","_a","classNames","htmlFor","text","h","class","labelCss","PdsSwitchStyle0","pdsSwitchCss","PdsSwitchStyle1","PdsSwitch","this","onSwitchUpdate","e","_this","disabled","input","target","checked","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","prototype","render","Host","key","assignDescription","componentId","id","name","onChange","required","type","value","label","messageId","errorMessage","icon","danger","size"],"sources":["src/components/_internal/pds-label/pds-label.tsx","src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.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",":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\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  // Need discussions\n  --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n  --pine-dimension-025: 2px;\n  --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n  --number-transition-timing: 0.15s ease-out;\n\n  align-items: flex-start;\n  color: var(--pine-color-text);\n  display: inline-flex;\n  flex-flow: row wrap;\n  position: relative;\n}\n\n:host(.pds-switch--error) {\n  color: var(--pine-color-text-message-danger);\n\n  input,\n  input:checked,\n  input:hover:not(:disabled):not(:checked) {\n    background-color: var(--pine-color-danger);\n  }\n\n  input:focus-visible:not(:disabled):not(:checked) {\n    box-shadow: var(--box-shadow-focus-error);\n  }\n\n  label {\n    color: var(--color-text-error);\n  }\n}\n\n// switch container\ninput {\n  appearance: none;\n  background: var(--pine-color-neutral);\n  border: 0;\n  border-radius: var(--pine-dimension-sm);\n  cursor: pointer;\n  display: inline-block;\n  height: var(--pine-dimension-250);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transition: var(--number-transition-timing);\n  transition-property: background, border, color;\n  width: var(--pine-dimension-450);\n\n  // switch toggle\n  &::after {\n    background: var(--pine-color-secondary);\n    border-radius: var(--pine-border-radius-full);\n    box-shadow: var(--pine-box-shadow);\n    content: \"\";\n    display: block;\n    height: var(--sizing-input-toggle-size);\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    position: absolute;\n    transform: translate3d(-100%, -50%, 0);\n    transition: transform var(--number-transition-timing);\n    width: var(--sizing-input-toggle-size);\n  }\n}\n\nlabel {\n  cursor: pointer;\n  display: inline-flex;\n  flex-grow: 1;\n  margin-inline-start: var(--pine-dimension-150);\n\n  .pds-switch--error & {\n    color: inherit;\n  }\n}\n\n// Help and error messages\n.pds-switch__message {\n  color: var(--pine-color-text-message);\n  flex: 1 0 100%;\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-2xl);\n\n  + .pds-switch__message {\n    margin-block-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-switch__message--error {\n  align-items: center;\n  color: inherit;\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n// Disabled state\ninput:disabled {\n  background-color: var(--pine-color-neutral-disabled);\n  cursor: not-allowed;\n\n  ~ label {\n    cursor: initial;\n  }\n\n  &:hover::after {\n    background-color: var(--pine-color-background-container-disabled);\n  }\n\n  .pds-switch__message {\n    color: initial;\n  }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n  background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n  box-shadow: var(--box-shadow-focus);\n  outline: none;\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n  transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n  background-color: currentColor;\n  color: var(--pine-color-accent);\n\n  &:hover {\n    border-color: currentColor;\n    color: var(--pine-color-accent-hover);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"uNAsBO,IAAMA,SAA4C,SAACC,G,IAAEC,EAAUD,EAAAC,WAAEC,EAAOF,EAAAE,QAAEC,EAAIH,EAAAG,KAAE,OACrFC,EAAA,SAAOC,MAAOJ,EAAYC,QAASA,GAAUC,EADwC,ECtBvF,IAAMG,SAAW,qTACjB,IAAAC,gBAAeD,SCDf,IAAME,aAAe,8wHACrB,IAAAC,gBAAeD,a,ICSFE,UAAS,W,6GA0DZC,KAAAC,eAAiB,SAACC,GACxB,GAAIC,EAAKC,SAAU,OAEnB,IAAMC,EAAQH,EAAEI,OAChBH,EAAKI,QAAUF,EAAME,QACrBJ,EAAKK,gBAAgBC,KAAKP,E,EAGpBF,KAAAU,iBAAmB,WACzB,IAAIC,EAAgB,aAEpB,GAAIR,EAAKS,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIR,EAAKU,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,C,0CAhE0B,M,cAKf,M,sEAeD,M,uDAeC,M,qBAgCpBZ,EAAAgB,UAAAC,OAAA,WACE,OACEvB,EAACwB,KAAI,CAAAC,IAAA,2CAACxB,MAAOM,KAAKU,mBAAkB,gBAAiBV,KAAKI,SAAW,OAAS,MAC5EX,EAAA,SAAAyB,IAAA,8DACoBC,kBAAkBnB,KAAKoB,YAAapB,KAAKY,QAASZ,KAAKa,eAAc,eACzEb,KAAKY,QAAU,OAASE,UACtCP,QAASP,KAAKO,QACdb,MAAM,oBACNU,SAAUJ,KAAKI,SACfiB,GAAIrB,KAAKoB,YACTE,KAAMtB,KAAKsB,KAAOtB,KAAKsB,KAAOtB,KAAKoB,YACnCG,SAAUvB,KAAKC,eACfuB,SAAUxB,KAAKwB,SACfC,KAAK,WACLC,MAAO1B,KAAK0B,QAEdjC,EAACL,SAAQ,CAAA8B,IAAA,2CAAC5B,WAAW,oBAAoBC,QAASS,KAAKoB,YAAa5B,KAAMQ,KAAK2B,QAC9E3B,KAAKa,eACJpB,EAAA,OAAAyB,IAAA,2CACExB,MAAO,sBACP2B,GAAIO,UAAU5B,KAAKoB,YAAa,WAE/BpB,KAAKa,eAGTb,KAAK6B,cACJpC,EAAA,OAAAyB,IAAA,2CACExB,MAAO,iDACP2B,GAAIO,UAAU5B,KAAKoB,YAAa,SAAQ,YAC9B,aAEV3B,EAAA,YAAAyB,IAAA,2CAAUY,KAAMC,OAAQC,KAAK,UAC5BhC,KAAK6B,c,gIA9GI,G","ignoreList":[]}

package/dist/esm-es5/pds-tab.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";var pdsTabCss='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}';var PdsTabStyle0=pdsTabCss;var PdsTab=function(){function a(a){registerInstance(this,a);this.pdsTabClick=createEvent(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,e){this.pdsTabClick.emit([a,e])};a.prototype.render=function(){var a=h("span",{key:"86bc0085668c8abc70d43b3d51ecb0328c74a250",class:"pds-tab-edge",role:"presentation"});var e=h("span",{key:"1156c49c0448e6ea11bfe7b292d96c3a396c59e4",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return h(Host,{key:"fc6a96add1a97e05ad8d85856ce44a3bc99c7581",variant:this.variant,slot:"tabs",index:this.index},h("button",{key:"41b1b8bf4e74974aa1e375a87d69c149a1fb04e6",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"&&e,h("div",{key:"81d264e8ac4e9d94e59ea8c377ac7225f48353db",class:"pds-tab__content"},h("slot",{key:"9549347c6fc773e9f9b234e72f39fa265e77aac2"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return a}();PdsTab.style=PdsTabStyle0;export{PdsTab as pds_tab};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";var pdsTabCss='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-tabs--pill pds-tab{-ms-flex:1;flex:1}.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(--pine-color-text-readonly);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.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;-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);color:var(--pine-color-text-active);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}';var PdsTabStyle0=pdsTabCss;var PdsTab=function(){function a(a){registerInstance(this,a);this.pdsTabClick=createEvent(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,e){this.pdsTabClick.emit([a,e])};a.prototype.render=function(){var a=h("span",{key:"86bc0085668c8abc70d43b3d51ecb0328c74a250",class:"pds-tab-edge",role:"presentation"});var e=h("span",{key:"1156c49c0448e6ea11bfe7b292d96c3a396c59e4",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return h(Host,{key:"fc6a96add1a97e05ad8d85856ce44a3bc99c7581",variant:this.variant,slot:"tabs",index:this.index},h("button",{key:"41b1b8bf4e74974aa1e375a87d69c149a1fb04e6",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"&&e,h("div",{key:"81d264e8ac4e9d94e59ea8c377ac7225f48353db",class:"pds-tab__content"},h("slot",{key:"9549347c6fc773e9f9b234e72f39fa265e77aac2"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return a}();PdsTab.style=PdsTabStyle0;export{PdsTab as pds_tab};
 //# sourceMappingURL=pds-tab.entry.js.map

package/dist/esm-es5/pds-tab.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","prototype","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":"oGAAA,IAAMA,UAAY,ghKAClB,IAAAC,aAAeD,U,ICMFE,OAAM,W,yMA8BE,K,CAOXA,EAAAC,UAAAC,WAAA,SAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,EAGhCJ,EAAAC,UAAAO,OAAA,WACE,IAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,IAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,KAAI,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,gIA/DrB,G","ignoreList":[]}
+{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","prototype","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  .pds-tabs--pill & {\n    flex: 1;\n  }\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(--pine-color-text-readonly);\n    flex: 1;\n    height: 34px;\n    justify-content: center;\n\n    .pds-tab__content {\n      align-items: center;\n      display: flex;\n      justify-content: center;\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      color: var(--pine-color-text-active);\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":"oGAAA,IAAMA,UAAY,mpKAClB,IAAAC,aAAeD,U,ICMFE,OAAM,W,yMA8BE,K,CAOXA,EAAAC,UAAAC,WAAA,SAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,EAGhCJ,EAAAC,UAAAO,OAAA,WACE,IAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,IAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,KAAI,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,gIA/DrB,G","ignoreList":[]}

package/dist/esm-es5/pds-table-head-cell.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{g as upSmall,d as downSmall}from"./index-7f8e0fa6.js";var pdsTableHeadCellCss=":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:12px;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}";var PdsTableHeadCellStyle0=pdsTableHeadCellCss;var PdsTableHeadCell=function(){function e(e){var t=this;registerInstance(this,e);this.pdsTableSort=createEvent(this,"pdsTableSort",7);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.toggleSort=function(){if(t.sortable){var e=t.hostElement.innerText.trim();t.sortingDirection=t.sortingDirection==="asc"?"desc":"asc";t.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));t.hostElement.classList.toggle("is-active");t.pdsTableSort.emit({column:e,direction:t.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"cc69c3960907c848101775317b0ff4e700e055e8",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"02d63e30c6e05104b14fba26cf9f95709feb9d6c"}),this.sortable&&h("pds-icon",{key:"e19c0af58d1ab0a909c72f6ddac89eacb6013a20",icon:this.sortingDirection==="asc"?upSmall:downSmall}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableHeadCell.style=PdsTableHeadCellStyle0;export{PdsTableHeadCell as pds_table_head_cell};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{g as upSmall,d as downSmall}from"./index-858623fe.js";var pdsTableHeadCellCss=":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:12px;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}";var PdsTableHeadCellStyle0=pdsTableHeadCellCss;var PdsTableHeadCell=function(){function e(e){var t=this;registerInstance(this,e);this.pdsTableSort=createEvent(this,"pdsTableSort",7);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.toggleSort=function(){if(t.sortable){var e=t.hostElement.innerText.trim();t.sortingDirection=t.sortingDirection==="asc"?"desc":"asc";t.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));t.hostElement.classList.toggle("is-active");t.pdsTableSort.emit({column:e,direction:t.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"cc69c3960907c848101775317b0ff4e700e055e8",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"02d63e30c6e05104b14fba26cf9f95709feb9d6c"}),this.sortable&&h("pds-icon",{key:"e19c0af58d1ab0a909c72f6ddac89eacb6013a20",icon:this.sortingDirection==="asc"?upSmall:downSmall}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableHeadCell.style=PdsTableHeadCellStyle0;export{PdsTableHeadCell as pds_table_head_cell};
 //# sourceMappingURL=pds-table-head-cell.entry.js.map

package/dist/esm-es5/pds-tabs.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-b1696fed.js";var pdsTabsCss=":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;--outline:2px solid var(--pine-color-focus-ring);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;gap:0;height:var(--pine-dimension-450)}";var PdsTabsStyle0=pdsTabsCss;var PdsTabs=function(){function s(s){registerInstance(this,s);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}s.prototype.tabClickHandler=function(s){if(this.componentId===s.detail[1]){this.activeTabIndex=s.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};s.prototype.handleKeyDown=function(s){var i=["ArrowLeft","ArrowRight","Home","End"];if(i.includes(s.key)){s.preventDefault();this.moveActiveTab(s.key)}};s.prototype.moveActiveTab=function(s){var i=0;var t=this.tabs.length-1;var a=null;switch(s){case"ArrowLeft":a=this.activeTabIndex===i?t:this.activeTabIndex+-1;break;case"ArrowRight":a=this.activeTabIndex===t?i:this.activeTabIndex+1;break;case"Home":a=i;break;case"End":a=t;break}this.tabs[a].children[0].focus();this.activeTabName=this.tabs[a].name;this.activeTabIndex=a};s.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};s.prototype.propGeneration=function(s,i){if(i===void 0){i=0}s.parentComponentId=this.componentId.toString();s.variant=this.variant.toString();s.selected=this.activeTabName===s.name?true:false;s["index"]=i};s.prototype.passPropsToChildren=function(){var s=this;this.tabs.forEach((function(i,t){if(s.activeTabName===i.name)s.activeTabIndex=t;s.propGeneration(i,t)}));this.tabPanels.forEach((function(i){s.propGeneration(i)}))};s.prototype.classNames=function(){var s="pds-tabs";if(this.variant&&this.variant!="primary"){var i="pds-tabs--".concat(this.variant);s+=" "+i}return s};s.prototype.componentWillLoad=function(){this.findAllChildren()};s.prototype.componentWillRender=function(){this.passPropsToChildren()};s.prototype.render=function(){return h(Host,{key:"93431c0270fb4f658262c43ab65fc144c527d7bf","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},h("div",{key:"a9b216ad2a3612b4bc5219b370efa90b9ef89e1c",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},h("slot",{key:"a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0",name:"tabs"})),h("slot",{key:"729ae2b2a129760d0d347acaee0118ba667b5292",name:"tabpanels"}))};Object.defineProperty(s.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return s}();PdsTabs.style=PdsTabsStyle0;export{PdsTabs as pds_tabs};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-b1696fed.js";var pdsTabsCss=":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;--outline:2px solid var(--pine-color-focus-ring);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";var PdsTabsStyle0=pdsTabsCss;var PdsTabs=function(){function s(s){registerInstance(this,s);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}s.prototype.tabClickHandler=function(s){if(this.componentId===s.detail[1]){this.activeTabIndex=s.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};s.prototype.handleKeyDown=function(s){var i=["ArrowLeft","ArrowRight","Home","End"];if(i.includes(s.key)){s.preventDefault();this.moveActiveTab(s.key)}};s.prototype.moveActiveTab=function(s){var i=0;var t=this.tabs.length-1;var a=null;switch(s){case"ArrowLeft":a=this.activeTabIndex===i?t:this.activeTabIndex+-1;break;case"ArrowRight":a=this.activeTabIndex===t?i:this.activeTabIndex+1;break;case"Home":a=i;break;case"End":a=t;break}this.tabs[a].children[0].focus();this.activeTabName=this.tabs[a].name;this.activeTabIndex=a};s.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};s.prototype.propGeneration=function(s,i){if(i===void 0){i=0}s.parentComponentId=this.componentId.toString();s.variant=this.variant.toString();s.selected=this.activeTabName===s.name?true:false;s["index"]=i};s.prototype.passPropsToChildren=function(){var s=this;this.tabs.forEach((function(i,t){if(s.activeTabName===i.name)s.activeTabIndex=t;s.propGeneration(i,t)}));this.tabPanels.forEach((function(i){s.propGeneration(i)}))};s.prototype.classNames=function(){var s="pds-tabs";if(this.variant&&this.variant!="primary"){var i="pds-tabs--".concat(this.variant);s+=" "+i}return s};s.prototype.componentWillLoad=function(){this.findAllChildren()};s.prototype.componentWillRender=function(){this.passPropsToChildren()};s.prototype.render=function(){return h(Host,{key:"93431c0270fb4f658262c43ab65fc144c527d7bf","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},h("div",{key:"a9b216ad2a3612b4bc5219b370efa90b9ef89e1c",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},h("slot",{key:"a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0",name:"tabs"})),h("slot",{key:"729ae2b2a129760d0d347acaee0118ba667b5292",name:"tabpanels"}))};Object.defineProperty(s.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return s}();PdsTabs.style=PdsTabsStyle0;export{PdsTabs as pds_tabs};
 //# sourceMappingURL=pds-tabs.entry.js.map

package/dist/esm-es5/pds-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-focus-ring);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mFAAA,IAAMA,WAAa,2sBACnB,IAAAC,cAAeD,W,ICUFE,QAAO,W,gLAmClBA,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,KAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,gIA9HC,G","ignoreList":[]}
+{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-focus-ring);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mFAAA,IAAMA,WAAa,4uBACnB,IAAAC,cAAeD,W,ICUFE,QAAO,W,gLAmClBA,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,KAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,gIA9HC,G","ignoreList":[]}

package/dist/esm-es5/pds-textarea.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{i as isRequired,a as assignDescription,m as messageId}from"./form-1b7b69e3.js";import{d as debounceEvent}from"./utils-5e425aaf.js";import{i as inheritAriaAttributes,a as inheritAttributes}from"./attributes-fe2c8c91.js";import{b as danger}from"./index-7f8e0fa6.js";var labelCss=":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 PdsTextareaStyle0=labelCss;var pdsInputTokensCss=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var PdsTextareaStyle1=pdsInputTokensCss;var pdsTextareaCss=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";var PdsTextareaStyle2=pdsTextareaCss;var PdsTextarea=function(){function e(e){var t=this;registerInstance(this,e);this.pdsBlur=createEvent(this,"pdsBlur",7);this.pdsFocus=createEvent(this,"pdsFocus",7);this.pdsInput=createEvent(this,"pdsInput",7);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.inheritedAttributes={};this.onBlur=function(e){t.hasFocus=false;if(t.focusedValue!==t.value){t.emitValueChange(e)}t.pdsBlur.emit(e)};this.onFocus=function(e){t.hasFocus=true;t.focusedValue=t.value;t.pdsFocus.emit(e)};this.onInput=function(e){var a=e.target;if(a){t.value=a.value||""}t.emitInputChange(e)};this.onTextareaChange=function(e){t.emitValueChange(e)};this.autocomplete=undefined;this.componentId=undefined;this.disabled=false;this.debounce=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value="";this.hasFocus=false}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeTextarea){this.nativeTextarea.focus()}return[2]}))}))};e.prototype.debounceChanged=function(){var e=this,t=e.pdsInput,a=e.debounce,r=e.originalPdsInput;this.pdsInput=a===undefined?r!==null&&r!==void 0?r:t:debounceEvent(t,a)};e.prototype.valueChanged=function(){var e=this.nativeTextarea;var t=this.getValue();if(e&&e.value!==t){e.value=t}};e.prototype.emitInputChange=function(e){var t=this.value;this.pdsInput.emit({value:t,event:e})};e.prototype.emitValueChange=function(e){var t=e.target;isRequired(t,this);var a=t.value;var r=a==null?a:a.toString();this.focusedValue=r;this.pdsTextareaChange.emit({value:r,event:e})};e.prototype.getValue=function(){return this.value||""};e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.connectedCallback=function(){this.debounceChanged()};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign(Object.assign({},inheritAriaAttributes(this.el)),inheritAttributes(this.el))};e.prototype.componentDidLoad=function(){this.originalPdsInput=this.pdsInput};e.prototype.render=function(){var e=this;var t=this.getValue();return h(Host,{key:"ff1ea6dcc0543b1c706f922a8563fa63b4721343","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},h("div",{key:"25d4efe232c9d90967a17920fb82f17d075189ae",class:"pds-textarea"},this.label&&h("label",{key:"764e320927d0eac61ad9c08b00f805b9bae4d525",htmlFor:this.componentId},this.label),h("textarea",Object.assign({key:"04f18ad66ebf94e7e52fab68e8e8d997e5d57270",ref:function(t){return e.nativeTextarea=t},"aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput},this.inheritedAttributes),t),this.helperMessage&&h("p",{key:"5c4d5afb3239208a18c47755412ab2a80ed599f8",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"906bc964bd9ff7bc5399dd693535ceeb80e9fcc6","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},h("pds-icon",{key:"19e00869fca337c8b4473852c8e4c2f57c605a64",icon:danger,size:"small"}),this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0+(PdsTextareaStyle1+PdsTextareaStyle2);export{PdsTextarea as pds_textarea};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{i as isRequired,a as assignDescription,m as messageId}from"./form-1b7b69e3.js";import{d as debounceEvent}from"./utils-5e425aaf.js";import{i as inheritAriaAttributes,a as inheritAttributes}from"./attributes-fe2c8c91.js";import{b as danger}from"./index-858623fe.js";var labelCss=":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 PdsTextareaStyle0=labelCss;var pdsInputTokensCss=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var PdsTextareaStyle1=pdsInputTokensCss;var pdsTextareaCss=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";var PdsTextareaStyle2=pdsTextareaCss;var PdsTextarea=function(){function e(e){var t=this;registerInstance(this,e);this.pdsBlur=createEvent(this,"pdsBlur",7);this.pdsFocus=createEvent(this,"pdsFocus",7);this.pdsInput=createEvent(this,"pdsInput",7);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.inheritedAttributes={};this.onBlur=function(e){t.hasFocus=false;if(t.focusedValue!==t.value){t.emitValueChange(e)}t.pdsBlur.emit(e)};this.onFocus=function(e){t.hasFocus=true;t.focusedValue=t.value;t.pdsFocus.emit(e)};this.onInput=function(e){var a=e.target;if(a){t.value=a.value||""}t.emitInputChange(e)};this.onTextareaChange=function(e){t.emitValueChange(e)};this.autocomplete=undefined;this.componentId=undefined;this.disabled=false;this.debounce=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value="";this.hasFocus=false}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeTextarea){this.nativeTextarea.focus()}return[2]}))}))};e.prototype.debounceChanged=function(){var e=this,t=e.pdsInput,a=e.debounce,r=e.originalPdsInput;this.pdsInput=a===undefined?r!==null&&r!==void 0?r:t:debounceEvent(t,a)};e.prototype.valueChanged=function(){var e=this.nativeTextarea;var t=this.getValue();if(e&&e.value!==t){e.value=t}};e.prototype.emitInputChange=function(e){var t=this.value;this.pdsInput.emit({value:t,event:e})};e.prototype.emitValueChange=function(e){var t=e.target;isRequired(t,this);var a=t.value;var r=a==null?a:a.toString();this.focusedValue=r;this.pdsTextareaChange.emit({value:r,event:e})};e.prototype.getValue=function(){return this.value||""};e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.connectedCallback=function(){this.debounceChanged()};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign(Object.assign({},inheritAriaAttributes(this.el)),inheritAttributes(this.el))};e.prototype.componentDidLoad=function(){this.originalPdsInput=this.pdsInput};e.prototype.render=function(){var e=this;var t=this.getValue();return h(Host,{key:"ff1ea6dcc0543b1c706f922a8563fa63b4721343","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},h("div",{key:"25d4efe232c9d90967a17920fb82f17d075189ae",class:"pds-textarea"},this.label&&h("label",{key:"764e320927d0eac61ad9c08b00f805b9bae4d525",htmlFor:this.componentId},this.label),h("textarea",Object.assign({key:"04f18ad66ebf94e7e52fab68e8e8d997e5d57270",ref:function(t){return e.nativeTextarea=t},"aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput},this.inheritedAttributes),t),this.helperMessage&&h("p",{key:"5c4d5afb3239208a18c47755412ab2a80ed599f8",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"906bc964bd9ff7bc5399dd693535ceeb80e9fcc6","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},h("pds-icon",{key:"19e00869fca337c8b4473852c8e4c2f57c605a64",icon:danger,size:"small"}),this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0+(PdsTextareaStyle1+PdsTextareaStyle2);export{PdsTextarea as pds_textarea};
 //# sourceMappingURL=pds-textarea.entry.js.map

package/dist/pine-core/p-0399a821.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as i,H as r}from"./p-87fe352f.js";import{m as o}from"./p-47291f05.js";import{b as t,e as a}from"./p-2f60d558.js";const n=":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";const d=n;const l=":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)}";const c=l;const p=':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;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);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-2xs);margin-block-start:var(--pine-dimension-2xs)}.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}';const h=p;const b=class{constructor(i){e(this,i);this.pdsSelectChange=s(this,"pdsSelectChange",7);this.onSelectUpdate=e=>{const s=e.target;const i=Array.from(s.options).filter((e=>e.selected)).map((e=>e.value));if(i.length===1&&!this.multiple){this.value=i[0]}else{this.value=i}this.pdsSelectChange.emit(e)};this.handleSlotChange=()=>{const e=this.slotContainer.querySelector("slot");this.selectEl.innerHTML="";const s=e.assignedElements({flatten:true});s.forEach((e=>{if(["OPTION","OPTGROUP"].includes(e.tagName)){const s=e.cloneNode(true);if(s.tagName==="OPTION"&&s.value===this.value){s.selected=true}this.selectEl.appendChild(s)}}));this.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}valueChanged(){this.updateSelectedOption()}componentWillLoad(){this.updateSelectedOption()}updateSelectedOption(){if(this.selectEl){const e=this.selectEl.options;Array.from(e).map((e=>{if(Array.isArray(this.value)){e.selected=this.value.includes(e.value)}else{e.selected=this.value===e.value}}))}}getHelperMessage(){return this.helperMessage&&i("p",{class:"pds-select__helper-message",id:o(this.componentId,"helper")},this.helperMessage)}getErrorMessage(){return this.errorMessage&&i("p",{class:"pds-select__error-message",id:o(this.componentId,"error"),"aria-live":"assertive"},i("pds-icon",{icon:t,size:"small"}),this.errorMessage)}renderMessages(){if(!this.helperMessage&&!this.errorMessage)return null;return i("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage())}classNames(){const e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join("  ")}render(){return i(r,{key:"e2d3e77b8bf3bf697615ed3a64ea28d57e6e1804","aria-disabled":this.disabled?"true":null,class:this.classNames()},i("div",{key:"1d465fa9b7266807bc1504c76cab0492e4785141",class:"pds-select"},this.label&&i("label",{key:"35d64c31a97e27847c67c6b9c49e7a825da97b5e",htmlFor:this.componentId},this.label),i("select",{key:"30ec3dfe0fe9ef962392bbc010004613da28b680",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:e=>this.selectEl=e}),i("div",{key:"8dd9a3b63fe5f577287db4f445db43701a995472","aria-hidden":"true",class:"hidden",ref:e=>this.slotContainer=e},i("slot",{key:"1c202985751ac7ab7b42dd636a8d6c378d1d67b7",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&i("pds-icon",{key:"15731b205d0aad681ca8ca19fc69c1b49e3fc923",class:"pds-select__select-icon",icon:a})))}static get watchers(){return{value:["valueChanged"]}}};b.style=d+(c+h);export{b as pds_select};
+//# sourceMappingURL=p-0399a821.entry.js.map

package/dist/pine-core/p-0399a821.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsSelectTokensCss","PdsSelectStyle0","labelCss","PdsSelectStyle1","pdsSelectCss","PdsSelectStyle2","PdsSelect","this","onSelectUpdate","e","target","values","Array","from","options","filter","option","map","length","multiple","value","pdsSelectChange","emit","handleSlotChange","slot","slotContainer","querySelector","selectEl","innerHTML","assignedElements","flatten","forEach","item","includes","tagName","clonedItem","cloneNode","selected","appendChild","updateSelectedOption","valueChanged","componentWillLoad","isArray","getHelperMessage","helperMessage","h","class","id","messageId","componentId","getErrorMessage","errorMessage","icon","danger","size","renderMessages","classNames","invalid","push","disabled","join","render","Host","key","label","htmlFor","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  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\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-2xs);\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 { 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          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\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":"wIAAA,MAAMA,EAAqB,yEAC3B,MAAAC,EAAeD,ECDf,MAAME,EAAW,qTACjB,MAAAC,EAAeD,ECDf,MAAME,EAAe,8vFACrB,MAAAC,EAAeD,E,MCQFE,EAAS,M,0EA+GZC,KAAAC,eAAkBC,IACxB,MAAMC,EAASD,EAAEC,OAEjB,MAAMC,EAASC,MAAMC,KAAKH,EAAOI,SAC5BC,QAAQC,GAAaA,EAAe,WACpCC,KAAKD,GAAaA,EAAY,QAEnC,GAAIL,EAAOO,SAAW,IAAMX,KAAKY,SAAU,CACvCZ,KAAKa,MAAQT,EAAO,E,KACjB,CACHJ,KAAKa,MAAQT,C,CAGjBJ,KAAKc,gBAAgBC,KAAKb,EAAgB,EASpCF,KAAAgB,iBAAmB,KACzB,MAAMC,EAAOjB,KAAKkB,cAAcC,cAAc,QAE9CnB,KAAKoB,SAASC,UAAY,GAC1B,MAAMC,EAAmBL,EAAKK,iBAAiB,CAAEC,QAAS,OAE1DD,EAAiBE,SAASC,IACxB,GAAK,CAAC,SAAU,YAAYC,SAASD,EAAKE,SAAU,CAClD,MAAMC,EAAaH,EAAKI,UAAU,MAClC,GAAID,EAAWD,UAAY,UAAaC,EAAiCf,QAAUb,KAAKa,MAAO,CAC5Fe,EAAiCE,SAAW,I,CAE/C9B,KAAKoB,SAASW,YAAYH,E,KAI9B5B,KAAKgC,sBAAsB,E,qEAlIV,M,mHA0BA,M,kCAWA,M,qBAmBnB,YAAAC,GACEjC,KAAKgC,sB,CAGP,iBAAAE,GACElC,KAAKgC,sB,CAaC,oBAAAA,GACN,GAAIhC,KAAKoB,SAAU,CACjB,MAAMb,EAAUP,KAAKoB,SAASb,QAG9BF,MAAMC,KAAKC,GAASG,KAAKD,IACvB,GAAIJ,MAAM8B,QAAQnC,KAAKa,OAAQ,CAC7BJ,EAAOqB,SAAW9B,KAAKa,MAAMa,SAASjB,EAAOI,M,KACxC,CACLJ,EAAOqB,SAAW9B,KAAKa,QAAUJ,EAAOI,K,MAkDxC,gBAAAuB,GACN,OAAOpC,KAAKqC,eACVC,EAAA,KAAGC,MAAM,6BAA6BC,GAAIC,EAAUzC,KAAK0C,YAAa,WACnE1C,KAAKqC,c,CAKJ,eAAAM,GACN,OAAO3C,KAAK4C,cACVN,EAAA,KAAGC,MAAM,4BAA4BC,GAAIC,EAAUzC,KAAK0C,YAAa,SAAQ,YAAY,aACvFJ,EAAA,YAAUO,KAAMC,EAAQC,KAAK,UAC5B/C,KAAK4C,a,CAKJ,cAAAI,GACN,IAAKhD,KAAKqC,gBAAkBrC,KAAK4C,aAAc,OAAO,KAEtD,OACEN,EAAA,OAAKC,MAAM,uBACRvC,KAAKoC,mBACLpC,KAAK2C,kB,CAKJ,UAAAM,GACN,MAAMA,EAAa,GAEnB,GAAIjD,KAAKkD,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAInD,KAAKoD,SAAU,CAAEH,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,CAGzB,MAAAC,GACE,OACEhB,EAACiB,EAAI,CAAAC,IAAA,2DAAgBxD,KAAKoD,SAAW,OAAS,KAAMb,MAAOvC,KAAKiD,cAC9DX,EAAA,OAAAkB,IAAA,2CAAKjB,MAAM,cACRvC,KAAKyD,OACJnB,EAAA,SAAAkB,IAAA,2CAAOE,QAAS1D,KAAK0C,aAAc1C,KAAKyD,OAE1CnB,EAAA,UAAAkB,IAAA,2CACEG,aAAc3D,KAAK2D,cAAgBC,UACnCrB,MAAM,oBACNa,SAAUpD,KAAKoD,SACfZ,GAAIxC,KAAK0C,YACT9B,SAAUZ,KAAKY,SACfiD,KAAM7D,KAAK6D,KACXC,SAAU9D,KAAKC,eACf8D,SAAU/D,KAAK+D,SACfC,IAAMC,GAAQjE,KAAKoB,SAAW6C,IAEhC3B,EAAA,OAAAkB,IAAA,yDAAiB,OAAOjB,MAAM,SAASyB,IAAMC,GAAQjE,KAAKkB,cAAgB+C,GACxE3B,EAAA,QAAAkB,IAAA,2CAAMU,aAAclE,KAAKgB,oBAE1BhB,KAAKgD,kBACJhD,KAAKY,UAAY0B,EAAA,YAAAkB,IAAA,2CAAUjB,MAAM,0BAA0BM,KAAMsB,K","ignoreList":[]}

package/dist/pine-core/p-03e4027f.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-dba6ac9c.system.js"],(function(e){"use strict";var i,r,a,s,o,d,n;return{setters:[function(e){i=e.r;r=e.c;a=e.h;s=e.H},function(e){o=e.m;d=e.a},function(e){n=e.b}],execute:function(){var c=".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var t=c;var l='.sc-pds-radio-h{--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);--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-body-sm);gap:var(--pine-dimension-2xs)}';var p=l;var b=e("pds_radio",function(){function e(e){var a=this;i(this,e);this.pdsRadioChange=r(this,"pdsRadioChange",7);this.handleRadioChange=function(e){if(a.disabled){return}var i=e.target;var r=i.checked;a.pdsRadioChange.emit(r)};this.checked=false;this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.value=undefined}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(){return a(s,{key:"1a4f52f466f516a5803b5a539db579890fd5ec97",class:this.classNames()},a("label",{key:"fbf2fc5d2be220ad70e314c146f57e25536dbb13",htmlFor:this.componentId},a("input",{key:"1016b5d553e30af9c2e7199a05cd75b30e725606","aria-describedby":d(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange}),this.label),this.helperMessage&&a("div",{key:"4ac07622503e267abb9e0a808870e75b49329231",class:"pds-radio__message",id:o(this.componentId,"helper")},this.helperMessage),this.errorMessage&&a("div",{key:"808d6e1b93ed05b7875e9a5aeb7907a9c73f2410",class:"pds-radio__message pds-radio__message--error",id:o(this.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"c7bdadaf26d528c2ebb9e8790c9dd276ddb7d6b3",icon:n,size:"small"}),this.errorMessage))};return e}());b.style=t+p}}}));
+//# sourceMappingURL=p-03e4027f.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["labelCss","PdsRadioStyle0","pdsRadioCss","PdsRadioStyle1","PdsRadio","exports","this","handleRadioChange","e","_this","disabled","target","isChecked","checked","pdsRadioChange","emit","class_1","prototype","classNames","invalid","push","join","render","h","Host","key","class","htmlFor","componentId","assignDescription","helperMessage","undefined","type","id","name","value","required","onChange","label","messageId","errorMessage","icon","danger","size"],"sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: 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  --sizing-check-size: 6px;\n  --sizing-input-size: var(--pine-dimension-sm);\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--pine-color-border-danger);\n\n    &:checked {\n      background: var(--pine-color-border-danger);\n\n      &:hover {\n        background: var(--pine-color-border-danger-hover);\n        border-color: var(--pine-color-border-danger-hover);\n      }\n    }\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-radio__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\ninput {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-border-radius-full);\n  flex: none;\n  height: var(--sizing-input-size);\n  margin: 0;\n  margin-block-start: var(--pine-dimension-025);\n  position: relative;\n  width: var(--sizing-input-size);\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    border: var(--pine-border-hover);\n  }\n\n  &:checked {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent-hover);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      background: var(--pine-color-background-container);\n      border-radius: var(--pine-border-radius-full);\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background-color: var(--pine-color-accent-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-border-disabled);\n      }\n    }\n\n    + label {\n      cursor: not-allowed;\n    }\n\n    ~ .pds-radio__message {\n      color: var(--pine-color-text-message-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n}\n\nlabel {\n  display: flex;\n  gap: var(--pine-dimension-xs);\n}\n\n.pds-radio__message {\n  color: var(--pine-color-text-message);\n  margin-block-start: var(--sizing-margin-block-start);\n  margin-inline-start: var(--pine-dimension-md);\n  width: 100%;\n}\n\n.pds-radio__message--error {\n  align-items: center;\n  display: flex;\n  font-size: var(--pine-font-size-body-sm);\n  gap: var(--pine-dimension-2xs);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the radio 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 radio.\n   */\n  @Prop() helperMessage: string;\n\n    /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n    @Prop() invalid = false;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            type=\"radio\"\n            id={this.componentId}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleRadioChange}\n          />\n          {this.label}\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"8PAAA,IAAMA,EAAW,sXACjB,IAAAC,EAAeD,ECDf,IAAME,EAAc,0xGACpB,IAAAC,EAAeD,E,ICQFE,EAAQC,EAAA,uB,kFA4DXC,KAAAC,kBAAoB,SAACC,GAC3B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjB,IAAMC,EAAYD,EAAOE,QAEzBJ,EAAKK,eAAeC,KAAKH,E,eA/DT,M,yCAWC,M,sEAgBC,M,uDAgBD,M,qBAuBXI,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIZ,KAAKa,QAAS,CAChBD,EAAWE,KAAK,a,CAElB,GAAId,KAAKI,SAAU,CACjBQ,EAAWE,KAAK,c,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKY,cAChBK,EAAA,SAAAE,IAAA,2CAAOE,QAASrB,KAAKsB,aACnBL,EAAA,SAAAE,IAAA,8DACoBI,EAAkBvB,KAAKsB,YAAatB,KAAKa,QAASb,KAAKwB,eAAc,eACzExB,KAAKa,QAAU,OAASY,UACtCC,KAAK,QACLC,GAAI3B,KAAKsB,YACTM,KAAM5B,KAAK4B,KACXC,MAAO7B,KAAK6B,MACZtB,QAASP,KAAKO,QACduB,SAAU9B,KAAK8B,SACf1B,SAAUJ,KAAKI,SACf2B,SAAU/B,KAAKC,oBAEhBD,KAAKgC,OAEPhC,KAAKwB,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,qBACPO,GAAIM,EAAUjC,KAAKsB,YAAa,WAE/BtB,KAAKwB,eAGTxB,KAAKkC,cACJjB,EAAA,OAAAE,IAAA,2CACEC,MAAO,+CACPO,GAAIM,EAAUjC,KAAKsB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUgB,KAAMC,EAAQC,KAAK,UAC5BrC,KAAKkC,c,WArHG,I","ignoreList":[]}

package/dist/pine-core/{p-fce8b94f.system.entry.js → p-04fb06cd.system.entry.js}

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

package/dist/pine-core/{p-841eae86.entry.js → p-0ad21851.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as a,H as i}from"./p-87fe352f.js";import{c as s,u as o}from"./p-6e1737e0.js";const e=":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-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-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--pine-color-background-container);border:var(--pine-border);border-color:var(--pine-color-secondary);border-radius:var(--pine-border-radius-round);bottom:var(--pine-dimension-none);position:absolute;right:var(--pine-dimension-none)}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";const n=e;const t=class{constructor(i){r(this,i);this.renderAssetWrapper=()=>{const r={height:this.avatarSize(),width:this.avatarSize()};return a("div",{style:r,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())};this.renderAvatar=()=>this.dropdown?a("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},this.renderAssetWrapper()):this.renderAssetWrapper();this.renderBadge=()=>this.badge&&a("pds-icon",{color:"var(--pine-color-purple-600)",class:"pds-avatar__badge",icon:s,size:"33.53%"});this.renderIconOrImage=()=>this.image?a("img",{alt:this.alt,src:this.image}):a("pds-icon",{color:"var(--pine-color-mercury-500)",icon:o,size:"33.53%"});this.classNames=()=>({"pds-avatar":true,[`pds-avatar--has-image`]:this.image!==""&&this.image!==null,[`pds-avatar--${this.variant}`]:this.variant==="admin"});this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}avatarSize(){const r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}}render(){return a(i,{key:"6c013c87792c77cf63a321d4b194b241c8c8f7f5",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}};t.style=n;export{t as pds_avatar};
-//# sourceMappingURL=p-841eae86.entry.js.map
+import{r,h as a,H as i}from"./p-87fe352f.js";import{c as s,u as o}from"./p-2f60d558.js";const e=":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-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-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--pine-color-background-container);border:var(--pine-border);border-color:var(--pine-color-secondary);border-radius:var(--pine-border-radius-round);bottom:var(--pine-dimension-none);position:absolute;right:var(--pine-dimension-none)}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";const n=e;const t=class{constructor(i){r(this,i);this.renderAssetWrapper=()=>{const r={height:this.avatarSize(),width:this.avatarSize()};return a("div",{style:r,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())};this.renderAvatar=()=>this.dropdown?a("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},this.renderAssetWrapper()):this.renderAssetWrapper();this.renderBadge=()=>this.badge&&a("pds-icon",{color:"var(--pine-color-purple-600)",class:"pds-avatar__badge",icon:s,size:"33.53%"});this.renderIconOrImage=()=>this.image?a("img",{alt:this.alt,src:this.image}):a("pds-icon",{color:"var(--pine-color-mercury-500)",icon:o,size:"33.53%"});this.classNames=()=>({"pds-avatar":true,[`pds-avatar--has-image`]:this.image!==""&&this.image!==null,[`pds-avatar--${this.variant}`]:this.variant==="admin"});this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}avatarSize(){const r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}}render(){return a(i,{key:"6c013c87792c77cf63a321d4b194b241c8c8f7f5",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}};t.style=n;export{t as pds_avatar};
+//# sourceMappingURL=p-0ad21851.entry.js.map

package/dist/pine-core/{p-3b529bb7.system.entry.js → p-0c68a8ea.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-45cf2585.system.js","./p-840c252f.system.js"],(function(i){"use strict";var n,e,s;return{setters:[function(i){n=i.r;e=i.h},function(i){s=i.l}],execute:function(){var t=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{color:var(--pine-color-text-hover);text-decoration:none}";var o=t;var d=i("pds_link",function(){function i(i){n(this,i);this.componentId=undefined;this.external=false;this.variant="inline";this.fontSize="lg";this.href=undefined}i.prototype.classNames=function(){var i=["pds-link"];if(this.fontSize){i.push("pds-link--"+this.fontSize)}if(this.variant){i.push("pds-link--"+this.variant)}return i.join(" ")};i.prototype.render=function(){return e("a",{key:"ee9b0a9897e2a212989d607c85f2050ee992bd32",class:this.classNames(),href:this.href,id:this.componentId,target:this.external?"_blank":undefined,part:"link"},e("slot",{key:"611a4f9194ce38fd3b79c7e55281a625267846a4"},this.href),this.external&&e("pds-icon",{key:"a527d217c8ef1e69a2ca127019fbeb3eb25b3a02",icon:s,size:this.fontSize}))};return i}());d.style=o}}}));
-//# sourceMappingURL=p-3b529bb7.system.entry.js.map
+System.register(["./p-45cf2585.system.js","./p-dba6ac9c.system.js"],(function(i){"use strict";var n,e,s;return{setters:[function(i){n=i.r;e=i.h},function(i){s=i.l}],execute:function(){var t=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{color:var(--pine-color-text-hover);text-decoration:none}";var o=t;var d=i("pds_link",function(){function i(i){n(this,i);this.componentId=undefined;this.external=false;this.variant="inline";this.fontSize="lg";this.href=undefined}i.prototype.classNames=function(){var i=["pds-link"];if(this.fontSize){i.push("pds-link--"+this.fontSize)}if(this.variant){i.push("pds-link--"+this.variant)}return i.join(" ")};i.prototype.render=function(){return e("a",{key:"ee9b0a9897e2a212989d607c85f2050ee992bd32",class:this.classNames(),href:this.href,id:this.componentId,target:this.external?"_blank":undefined,part:"link"},e("slot",{key:"611a4f9194ce38fd3b79c7e55281a625267846a4"},this.href),this.external&&e("pds-icon",{key:"a527d217c8ef1e69a2ca127019fbeb3eb25b3a02",icon:s,size:this.fontSize}))};return i}());d.style=o}}}));
+//# sourceMappingURL=p-0c68a8ea.system.entry.js.map