@pine-ds/core 2.16.0 → 2.16.2

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

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

package/dist/pine-core/p-2fedf634.system.entry.js

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

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

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

package/dist/pine-core/p-399617f0.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,i,t,n){function r(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,o){function a(e){try{l(n.next(e))}catch(e){o(e)}}function s(e){try{l(n["throw"](e))}catch(e){o(e)}}function l(e){e.done?t(e.value):r(e.value).then(a,s)}l((n=n.apply(e,i||[])).next())}))};var __generator=this&&this.__generator||function(e,i){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,r,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(i){return l([e,i])}}function l(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(t=0)),t)try{if(n=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:t.label++;return{value:s[1],done:false};case 5:t.label++;r=s[1];s=[0];continue;case 7:s=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){t=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){t.label=s[1];break}if(s[0]===6&&t.label<o[1]){t.label=o[1];o=s;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(s);break}if(o[2])t.ops.pop();t.trys.pop();continue}s=i.call(e,t)}catch(e){s=[6,e];r=0}finally{n=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-5480346a.system.js","./p-017e1978.system.js","./p-a7d75615.system.js"],(function(e){"use strict";var i,t,n,r,o,a,s,l,c,d;return{setters:[function(e){i=e.r;t=e.c;n=e.h;r=e.H;o=e.g},function(e){a=e.a;s=e.m},function(e){l=e.b},function(e){c=e.d},function(e){d=e.i}],execute:function(){var u=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var h=u;var f=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font-weight:var(--pine-font-weight-medium)}";var p=f;var b=":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]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{color:var(--pine-color-text-label);font-weight:var(--pine-font-weight-medium)}input{border:1px solid var(--pine-color-border);border-radius:10px;color:var(--pine-color-text-active);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);}input: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;}input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}input:hover{border-color:var(--pine-color-border-hover)}input:focus-visible{border-color:var(--pine-color-border-active);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}input::-moz-placeholder{color:var(--pine-color-text-placeholder)}input::-moz-placeholder{color:var(--pine-color-text-placeholder)}input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}input:has(~.pds-input__error-message){background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}input:has(~.pds-input__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-input__error-message,.pds-input__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-input__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 v=b;var m=e("pds_input",function(){function e(e){var n=this;i(this,e);this.pdsBlur=t(this,"pdsBlur",7);this.pdsChange=t(this,"pdsChange",7);this.pdsFocus=t(this,"pdsFocus",7);this.pdsInput=t(this,"pdsInput",7);this.inheritedAttributes={};this.isComposing=false;this.onInputEvent=function(e){var i=e.target;if(i){n.value=i.value||""}n.emitInputChange(e)};this.onChangeEvent=function(e){n.emitValueChange(e)};this.onBlurEvent=function(e){n.hasFocus=false;if(n.focusedValue!==n.value){n.emitValueChange(e)}n.pdsBlur.emit(e)};this.onFocusEvent=function(e){n.hasFocus=true;n.focusedValue=n.value;n.pdsFocus.emit(e)};this.onCompositionStart=function(){n.isComposing=true};this.onCompositionEnd=function(){n.isComposing=false};this.autocomplete=undefined;this.componentId=undefined;this.debounce=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=undefined;this.label=undefined;this.name=undefined;this.placeholder=undefined;this.readonly=undefined;this.required=undefined;this.type="text";this.value="";this.hasFocus=false}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};e.prototype.debounceChanged=function(){var e=this,i=e.pdsInput,t=e.debounce,n=e.originalPdsInput;this.pdsInput=t===undefined?n!==null&&n!==void 0?n:i:c(i,t)};e.prototype.valueChanged=function(){var e=this.nativeInput;var i=this.getValue();if(e&&e.value!==i&&!this.isComposing){e.value=i}};e.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};e.prototype.emitValueChange=function(e){var i=this.value;var t=i==null?i:i.toString();this.focusedValue=t;this.pdsChange.emit({value:t,event:e})};e.prototype.emitInputChange=function(e){var i=this.value;var t=i==null?i:i.toString();this.pdsInput.emit({value:t,event:e})};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},d(this.el))};e.prototype.componentDidLoad=function(){this.debounceChanged()};e.prototype.render=function(){var e=this;return n(r,{key:"4247c9ed871a2f5e39fea4c222367341eda18e32","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null},n("div",{key:"b49fb30682b34b2c20ed6b0959d66e18050088d0",class:"pds-input"},n("label",{key:"ac028db52deca16edd0663ccccdc01d3651a299a",htmlFor:this.componentId},this.label),n("input",Object.assign({key:"cf478f28743397013c0964aa3f6232de2a319f7a",class:"pds-input__field",ref:function(i){return e.nativeInput=i},"aria-describedby":a(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,autocomplete:this.autocomplete,disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,type:this.type,value:this.value,onInput:this.onInputEvent,onChange:this.onChangeEvent,onBlur:this.onBlurEvent,onFocus:this.onFocusEvent,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.helperMessage&&n("p",{key:"78180c0527fc6ef81d9e915898333a9e09e892e4",class:"pds-input__helper-message",id:s(this.componentId,"helper")},this.helperMessage),this.errorMessage&&n("p",{key:"9512deaecd57644da843557cd07ac8880cde424f",class:"pds-input__error-message",id:s(this.componentId,"error"),"aria-live":"assertive"},n("pds-icon",{key:"38c36403181b41c06f16e737f088e58199f07618",icon:l,size:"small"}),this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}());m.style=h+(p+v)}}}));
-//# sourceMappingURL=p-399617f0.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsInputTokensCss","PdsInputStyle0","labelCss","PdsInputStyle1","pdsInputCss","PdsInputStyle2","PdsInput","exports","this","inheritedAttributes","isComposing","onInputEvent","ev","input","target","_this","value","emitInputChange","onChangeEvent","emitValueChange","onBlurEvent","hasFocus","focusedValue","pdsBlur","emit","onFocusEvent","pdsFocus","onCompositionStart","onCompositionEnd","class_1","prototype","setFocus","nativeInput","focus","debounceChanged","_a","pdsInput","debounce","originalPdsInput","undefined","debounceEvent","valueChanged","getValue","toString","event","newValue","pdsChange","componentWillLoad","Object","assign","inheritAriaAttributes","el","componentDidLoad","render","h","Host","key","disabled","readonly","class","htmlFor","componentId","label","ref","assignDescription","invalid","helperMessage","autocomplete","id","name","placeholder","readOnly","required","type","onInput","onChange","onBlur","onFocus","onCompositionstart","onCompositionend","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:host {\n  --pine-input-color-background-danger: var(--pine-color-red-050);\n}\n",":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font-weight: var(--pine-font-weight-medium);\n\n}\n",":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  display: inline;\n}\n\n:host([aria-readonly=\"true\"]) {\n  input {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font-weight: var(--pine-font-weight-medium);\n}\n\ninput {\n  border: 1px solid var(--pine-color-border);\n  border-radius: 10px;\n  color: var(--pine-color-text-active);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\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    /* stylelint-disable */\n    &::-webkit-input-placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n\n    &::-moz-placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n\n    &::-moz-placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n\n    &:-ms-input-placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n    /* stylelint-enable */\n  }\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\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  /* stylelint-disable */\n  &::-webkit-input-placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &::-moz-placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &::-moz-placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &:-ms-input-placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &:has(~.pds-input__error-message) {\n\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n  /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__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-input__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  /**\n   * The value of the input when the input is focused.\n   */\n  private focusedValue?: string | number | null;\n\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   *\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if ( this.nativeInput ) {\n      this.nativeInput.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   *\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  componentDidLoad() {\n    this.debounceChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <label htmlFor={this.componentId}>{this.label}</label>\n          <input class=\"pds-input__field\"\n            ref={(input) => this.nativeInput = input}\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n            onChange={this.onChangeEvent}\n            onBlur={this.onBlurEvent}\n            onFocus={this.onFocusEvent}\n            onCompositionstart={this.onCompositionStart}\n            onCompositionend={this.onCompositionEnd}\n            {...this.inheritedAttributes}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gzDAAA,IAAMA,EAAoB,wEAC1B,IAAAC,EAAeD,ECDf,IAAME,EAAW,8QACjB,IAAAC,EAAeD,ECDf,IAAME,EAAc,k8EACpB,IAAAC,EAAeD,E,ICcFE,EAAQC,EAAA,uB,+KAEXC,KAAAC,oBAAkC,GAClCD,KAAAE,YAAc,MAmJdF,KAAAG,aAAe,SAACC,GACtB,IAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTE,EAAKC,MAAQH,EAAMG,OAAS,E,CAE9BD,EAAKE,gBAAgBL,E,EAGfJ,KAAAU,cAAgB,SAACN,GACvBG,EAAKI,gBAAgBP,E,EAGfJ,KAAAY,YAAc,SAACR,GACrBG,EAAKM,SAAW,MAEhB,GAAIN,EAAKO,eAAiBP,EAAKC,MAAO,CAKpCD,EAAKI,gBAAgBP,E,CAGvBG,EAAKQ,QAAQC,KAAKZ,E,EAGZJ,KAAAiB,aAAe,SAACb,GACtBG,EAAKM,SAAW,KAChBN,EAAKO,aAAeP,EAAKC,MAEzBD,EAAKW,SAASF,KAAKZ,E,EAGbJ,KAAAmB,mBAAqB,WAC3BZ,EAAKL,YAAc,I,EAGbF,KAAAoB,iBAAmB,WACzBb,EAAKL,YAAc,K,uTA5EN,O,WAKyC,G,cAKpC,K,CAjFdmB,EAAAC,UAAAC,SAAN,W,qFACE,GAAKvB,KAAKwB,YAAc,CACtBxB,KAAKwB,YAAYC,O,kBAmFXJ,EAAAC,UAAAI,gBAAA,WACF,IAAAC,EAA2C3B,KAAzC4B,EAAQD,EAAAC,SAAEC,EAAQF,EAAAE,SAAEC,EAAgBH,EAAAG,iBAM5C9B,KAAK4B,SAAWC,IAAaE,UAAYD,IAAgB,MAAhBA,SAAgB,EAAhBA,EAAoBF,EAAWI,EAAcJ,EAAUC,E,EAIxFR,EAAAC,UAAAW,aAAA,WACR,IAAMT,EAAcxB,KAAKwB,YACzB,IAAMhB,EAAQR,KAAKkC,WAEnB,GAAIV,GAAeA,EAAYhB,QAAUA,IAAUR,KAAKE,YAAa,CACnEsB,EAAYhB,MAAQA,C,GAIhBa,EAAAC,UAAAY,SAAA,WACN,cAAclC,KAAKQ,QAAU,SAAWR,KAAKQ,MAAM2B,YAAcnC,KAAKQ,OAAS,IAAI2B,U,EA+C7Ed,EAAAC,UAAAX,gBAAA,SAAgByB,GACd,IAAA5B,EAAUR,KAAIQ,MACtB,IAAM6B,EAAW7B,GAAS,KAAOA,EAAQA,EAAM2B,WAE/CnC,KAAKc,aAAeuB,EACpBrC,KAAKsC,UAAUtB,KAAK,CAAER,MAAO6B,EAAUD,MAAKA,G,EAOtCf,EAAAC,UAAAb,gBAAA,SAAgB2B,GACd,IAAA5B,EAAUR,KAAIQ,MAGtB,IAAM6B,EAAW7B,GAAS,KAAOA,EAAQA,EAAM2B,WAE/CnC,KAAK4B,SAASZ,KAAK,CAAER,MAAO6B,EAAUD,MAAKA,G,EAI7Cf,EAAAC,UAAAiB,kBAAA,WACEvC,KAAKC,oBAAmBuC,OAAAC,OAAA,GACnBC,EAAsB1C,KAAK2C,I,EAIlCtB,EAAAC,UAAAsB,iBAAA,WACE5C,KAAK0B,iB,EAGPL,EAAAC,UAAAuB,OAAA,eAAAtC,EAAAP,KACE,OACE8C,EAACC,EAAI,CAAAC,IAAA,2DACYhD,KAAKiD,SAAW,OAAS,KAAI,gBAC7BjD,KAAKkD,SAAW,OAAS,MAExCJ,EAAA,OAAAE,IAAA,2CAAKG,MAAM,aACTL,EAAA,SAAAE,IAAA,2CAAOI,QAASpD,KAAKqD,aAAcrD,KAAKsD,OACxCR,EAAA,QAAAN,OAAAC,OAAA,CAAAO,IAAA,2CAAOG,MAAM,mBACXI,IAAK,SAAClD,GAAU,OAAAE,EAAKiB,YAAcnB,CAAnB,EAAwB,mBACtBmD,EAAkBxD,KAAKqD,YAAarD,KAAKyD,QAASzD,KAAK0D,eAAc,eACzE1D,KAAKyD,QAAU,OAAS1B,UACtC4B,aAAc3D,KAAK2D,aACnBV,SAAUjD,KAAKiD,SACfW,GAAI5D,KAAKqD,YACTQ,KAAM7D,KAAK6D,KACXC,YAAa9D,KAAK8D,YAClBC,SAAU/D,KAAKkD,SACfc,SAAUhE,KAAKgE,SACfC,KAAMjE,KAAKiE,KACXzD,MAAOR,KAAKQ,MACZ0D,QAASlE,KAAKG,aACdgE,SAAUnE,KAAKU,cACf0D,OAAQpE,KAAKY,YACbyD,QAASrE,KAAKiB,aACdqD,mBAAoBtE,KAAKmB,mBACzBoD,iBAAkBvE,KAAKoB,kBACnBpB,KAAKC,sBAEVD,KAAK0D,eACJZ,EAAA,KAAAE,IAAA,2CACEG,MAAM,4BACNS,GAAIY,EAAUxE,KAAKqD,YAAa,WAE/BrD,KAAK0D,eAGT1D,KAAKyE,cACJ3B,EAAA,KAAAE,IAAA,2CACEG,MAAM,2BACNS,GAAIY,EAAUxE,KAAKqD,YAAa,SAAQ,YAC9B,aAEVP,EAAA,YAAAE,IAAA,2CAAU0B,KAAMC,EAAQC,KAAK,UAC5B5E,KAAKyE,e,4QA9QC,I","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js"],(function(a){"use strict";var t,e,i,n,o;return{setters:[function(a){t=a.r;e=a.c;i=a.h;n=a.H;o=a.g}],execute:function(){var s='pds-tab{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--outline:4px solid var(--pine-color-focus-ring);display:inline-block;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}';var d=s;var r=a("pds_tab",function(){function a(a){t(this,a);this.pdsTabClick=e(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,t){this.pdsTabClick.emit([a,t])};a.prototype.render=function(){var a=i("span",{key:"d98a922aaa1b9a6023830badc391c3d1d615ec6a",class:"pds-tab-edge",role:"presentation"});var t=i("span",{key:"390da28bb3fd9ab1fa2fddda45569e92d4547fa3",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return i(n,{key:"5996673486d4bd95f98a691b155529a60655e92f",variant:this.variant,slot:"tabs",index:this.index},i("button",{key:"6eded79f9d5aa9093080933aa9aaa2ad88440759",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,i("div",{key:"9f8927d976b6964c22414e9fbb8680b9132370fa",class:"pds-tab__content"},i("slot",{key:"691c6cf5e42bc42c6492276fd5905733c424921c"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});return a}());r.style=d}}}));
-//# sourceMappingURL=p-4e2fe44a.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","exports","class_1","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  display: inline-block;\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","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":"kKAAA,IAAMA,EAAY,myHAClB,IAAAC,EAAeD,E,ICMFE,EAAMC,EAAA,qB,gLA8BE,K,CAOXC,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,EAAI,CAAAJ,IAAA,2CAACK,QAASX,KAAKW,QAASC,KAAK,OAAOd,MAAOE,KAAKF,OACnDO,EAAA,UAAAC,IAAA,2CACEE,KAAK,MACLK,GAAIb,KAAKD,kBAAoB,KAAOC,KAAKc,KAAI,gBAC9Bd,KAAKD,kBAAoB,KAAOC,KAAKc,KAAO,SAC3DC,SAAUf,KAAKgB,SAAW,IAAM,KAAI,gBACrBhB,KAAKgB,SAAW,OAAS,QACxCT,MAAOP,KAAKgB,SAAW,oBAAsB,UAC7CC,QAASjB,KAAKH,WAAWqB,KAAKlB,KAAMA,KAAKF,MAAOE,KAAKD,oBAEpDC,KAAKW,UAAY,gBAAkBP,EACnCJ,KAAKW,UAAY,gBAAkBF,EACpCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAmBF,EAAA,QAAAC,IAAA,+C,uHA/DrB,I","ignoreList":[]}

package/dist/pine-core/p-59f4c8ab.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-8d1efd85.system.js","./p-5480346a.system.js"],(function(e){"use strict";var i,o,r,n,a,t,s,d;return{setters:[function(e){i=e.r;o=e.c;r=e.h;n=e.H},function(e){a=e.m;t=e.a},function(e){s=e.P},function(e){d=e.b}],execute:function(){var c=':host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-secondary);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(90deg) translate3d(-103%, 32%, 0);transform:rotate(90deg) translate3d(-103%, 32%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);height:var(--pine-dimension-sm);margin:0;position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-secondary-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-secondary);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-grey-300)}input:disabled+label{color:var(--pine-color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{font-weight:var(--pine-font-weight-body-medium);-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}.pds-checkbox__message--error{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-085);gap:var(--pine-spacing-050)}';var l=c;var p=e("pds_checkbox",function(){function e(e){var r=this;i(this,e);this.pdsCheckboxChange=o(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=o(this,"pdsCheckboxInput",7);this.handleCheckboxChange=function(e){if(r.disabled){return}var i=e.target;r.checked=i.checked;r.pdsCheckboxChange.emit({checked:i.checked,value:r.value})};this.handleInput=function(){r.pdsCheckboxInput.emit({checked:r.checked,value:r.value})};this.checked=false;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}e.prototype.updateIndeterminate=function(){this.indeterminate=undefined};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){return r(n,{key:"a9a36f6b064c3ff184de99514e9dea1f4e59b44d",class:this.classNames()},r("input",{key:"ed7adf4890dd6b7f03659eee3586eeab609af114",type:"checkbox","aria-describedby":t(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),r(s,{key:"a68de459c7a6aef1cfa507808b996ca6b594c165",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&r("div",{key:"34e4b9bc0c8f8e48a5b74e4c2dd695983d640d12",class:"pds-checkbox__message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&r("div",{key:"8ca0733a88369da4248cb2c98e25d9f7d01d7672",class:"pds-checkbox__message pds-checkbox__message--error",id:a(this.componentId,"error"),"aria-live":"assertive"},r("pds-icon",{key:"f5a97b3612cb3990770367faaeafbbd1d46e48ee",icon:d,size:"small"}),this.errorMessage))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["updateIndeterminate"]}},enumerable:false,configurable:true});return e}());p.style=l}}}));
-//# sourceMappingURL=p-59f4c8ab.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsCheckboxCss","PdsCheckboxStyle0","PdsCheckbox","exports","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","class_1","prototype","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","type","assignDescription","componentId","helperMessage","id","name","required","onChange","onInput","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\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-danger);\n\n      &:hover {\n        background: var(--pine-color-danger-hover);\n        border-color: var(--pine-color-border-danger-hover);\n      }\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-invalid); // Remove when outline radius is supported in Safari\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.is-indeterminate) {\n  input {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--pine-color-secondary);\n      border-bottom: 0;\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--pine-color-secondary);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-2xs);\n  height: var(--pine-dimension-sm);\n  margin: 0;\n  position: relative;\n  width: var(--pine-dimension-sm);\n\n  &:hover {\n    background: var(--pine-color-secondary-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      border: 1px solid var(--pine-color-secondary);\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\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: var(--pine-color-background-container-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-grey-300);\n      }\n    }\n\n    + label {\n      color: var(--pine-color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--pine-color-text-disabled);\n    }\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\nlabel {\n  font-weight: var(--pine-font-weight-body-medium);\n  margin-inline-start: 10px;\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--pine-color-text-message);\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n\n.pds-checkbox__message--error {\n  align-items: center;\n  display: flex;\n  font-size: var(--pine-font-size-085);\n  gap: var(--pine-spacing-050);\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = 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   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__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":"4SAAA,IAAMA,EAAiB,44GACvB,IAAAC,EAAeD,E,ICUFE,EAAWC,EAAA,0B,2IA0EdC,KAAAC,qBAAuB,SAACC,GAC9B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjBF,EAAKG,QAAUD,EAAOC,QAEtBH,EAAKI,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAON,EAAKM,O,EAIRT,KAAAU,YAAc,WACpBP,EAAKQ,iBAAiBH,KAAK,CACzBF,QAASH,EAAKG,QACdG,MAAON,EAAKM,O,eAvF6B,M,iRAkE7CG,EAAAC,UAAAC,oBAAA,WACEd,KAAKe,cAAgBC,S,EAwBfJ,EAAAC,UAAAI,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIjB,KAAKkB,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAInB,KAAKe,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAInB,KAAKI,SAAU,CAAEa,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,EAGzBR,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOzB,KAAKiB,cAChBK,EAAA,SAAAE,IAAA,2CACEE,KAAK,WAAU,mBACGC,EAAkB3B,KAAK4B,YAAa5B,KAAKkB,QAASlB,KAAK6B,eAAc,eACzE7B,KAAKkB,QAAU,OAASF,UACtCc,GAAI9B,KAAK4B,YACTb,cAAef,KAAKe,cACpBgB,KAAM/B,KAAK+B,KACXtB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACd0B,SAAUhC,KAAKgC,SACf5B,SAAUJ,KAAKI,SACf6B,SAAUjC,KAAKC,qBACfiC,QAASlC,KAAKU,cAEhBY,EAACa,EAAQ,CAAAX,IAAA,2CAACY,QAASpC,KAAK4B,YAAaS,KAAMrC,KAAKsC,MAAOrB,WAAYjB,KAAKuC,YAAc,kBAAoB,KACzGvC,KAAK6B,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPK,GAAIU,EAAUxC,KAAK4B,YAAa,WAE/B5B,KAAK6B,eAGT7B,KAAKyC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPK,GAAIU,EAAUxC,KAAK4B,YAAa,SAAQ,YAC9B,aAEVN,EAAA,YAAAE,IAAA,2CAAUkB,KAAMC,EAAQC,KAAK,UAC5B5C,KAAKyC,c,4IA1IM,I","ignoreList":[]}

package/dist/pine-core/p-5b9f8f6a.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-8d1efd85.system.js","./p-5480346a.system.js"],(function(i){"use strict";var e,r,s,o,a,d,n,c;return{setters:[function(i){e=i.r;r=i.c;s=i.h;o=i.H},function(i){a=i.m;d=i.a},function(i){n=i.P},function(i){c=i.b}],execute:function(){var t='.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;border:var(--pine-border);border-radius:var(--pine-border-radius-full);height:var(--sizing-input-size);margin:0;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{color:var(--pine-color-text-disabled);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{font-weight:var(--pine-font-weight-body-medium);-webkit-margin-start:10px;margin-inline-start:10px}.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:26px;margin-inline-start:26px;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=t;var l=i("pds_radio",function(){function i(i){var s=this;e(this,i);this.pdsRadioChange=r(this,"pdsRadioChange",7);this.handleRadioChange=function(i){if(s.disabled){return}var e=i.target;var r=e.checked;s.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}i.prototype.classNames=function(){var i=[];if(this.invalid){i.push("is-invalid")}if(this.disabled){i.push("is-disabled")}return i.join("  ")};i.prototype.render=function(){return s(o,{key:"8c8f58c550fc7b82b135aee152ad01d4bd388a21",class:this.classNames()},s("input",{key:"45b2723c50b7539c0e7219242707fd73b7633237","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}),s(n,{key:"805a7dcf03ff90842468dcfc36e94ef0f6a7cac0",htmlFor:this.componentId,text:this.label}),this.helperMessage&&s("div",{key:"2b38ec8828b4ff7d40454f54af3ce1cc367f15e6",class:"pds-radio__message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("div",{key:"37f62ed40f7ad6c83d8d171a3fdf90404062cb5d",class:"pds-radio__message pds-radio__message--error",id:a(this.componentId,"error"),"aria-live":"assertive"},s("pds-icon",{key:"5c4d4be02ee1a4e4049778771ec10b2b5921e7fb",icon:c,size:"small"}),this.errorMessage))};return i}());l.style=p}}}));
-//# sourceMappingURL=p-5b9f8f6a.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsRadioCss","PdsRadioStyle0","PdsRadio","exports","this","handleRadioChange","e","_this","disabled","target","isChecked","checked","pdsRadioChange","emit","class_1","prototype","classNames","invalid","push","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","value","required","onChange","PdsLabel","htmlFor","text","label","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":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  border: var(--pine-border);\n  border-radius: var(--pine-border-radius-full);\n  height: var(--sizing-input-size);\n  margin: 0;\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      color: var(--pine-color-text-disabled);\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  font-weight: var(--pine-font-weight-body-medium);\n  margin-inline-start: 10px;\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: 26px;\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 { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['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        <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        <PdsLabel htmlFor={this.componentId} text={this.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":"4SAAA,IAAMA,EAAc,spGACpB,IAAAC,EAAeD,E,ICSFE,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,8DACoBE,EAAkBrB,KAAKsB,YAAatB,KAAKa,QAASb,KAAKuB,eAAc,eACzEvB,KAAKa,QAAU,OAASW,UACtCC,KAAK,QACLC,GAAI1B,KAAKsB,YACTK,KAAM3B,KAAK2B,KACXC,MAAO5B,KAAK4B,MACZrB,QAASP,KAAKO,QACdsB,SAAU7B,KAAK6B,SACfzB,SAAUJ,KAAKI,SACf0B,SAAU9B,KAAKC,oBAEjBgB,EAACc,EAAQ,CAAAZ,IAAA,2CAACa,QAAShC,KAAKsB,YAAaW,KAAMjC,KAAKkC,QAC/ClC,KAAKuB,eACJN,EAAA,OAAAE,IAAA,2CACEC,MAAO,qBACPM,GAAIS,EAAUnC,KAAKsB,YAAa,WAE/BtB,KAAKuB,eAGTvB,KAAKoC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,+CACPM,GAAIS,EAAUnC,KAAKsB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUkB,KAAMC,EAAQC,KAAK,UAC5BvC,KAAKoC,c,WAnHG,I","ignoreList":[]}

package/dist/pine-core/p-650a27ca.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as r,H as s,g as n}from"./p-87fe352f.js";import{m as t,a as o}from"./p-47291f05.js";import{P as a}from"./p-0c09ce7a.js";import{b as d}from"./p-d561168e.js";const c=':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;font-weight:var(--pine-font-weight-medium);-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)}.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{color:var(--pine-color-text-disabled);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)}';const l=c;const p=class{constructor(r){i(this,r);this.pdsSwitchChange=e(this,"pdsSwitchChange",7);this.onSwitchUpdate=i=>{if(this.disabled)return;const e=i.target;this.checked=e.checked;this.pdsSwitchChange.emit(i)};this.switchClassNames=()=>{let i=`pds-switch`;if(this.invalid===true){i+=" pds-switch--error"}if(this.helperMessage!==undefined){i+=" pds-switch--message"}return i};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.value=undefined}render(){return r(s,{key:"0c57e5a99f6d5c398c9c1a0164a9cad167d21bf8",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},r("input",{key:"3be2c03ee6525bdc1b215f252d9a8a04539fec9d","aria-describedby":o(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}),r(a,{key:"c6a42085334420dc87265dbb89414c23af3e82d1",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&r("div",{key:"307b54a0fb0c71af5cf91a7ba80c8c3b3c7201b0",class:`pds-switch__message`,id:t(this.componentId,"helper")},this.helperMessage),this.errorMessage&&r("div",{key:"5fa0429017fa7083db7baa5c4d8bea11c9c92a1d",class:`pds-switch__message pds-switch__message--error`,id:t(this.componentId,"error"),"aria-live":"assertive"},r("pds-icon",{key:"3dcc1270248d7efeaccc8a9d5bccf2888b10ccae",icon:d,size:"small"}),this.errorMessage))}get el(){return n(this)}};p.style=l;export{p as pds_switch};
-//# sourceMappingURL=p-650a27ca.entry.js.map

package/dist/pine-core/p-650a27ca.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsSwitchCss","PdsSwitchStyle0","PdsSwitch","this","onSwitchUpdate","e","disabled","input","target","checked","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","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/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":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  font-weight: var(--pine-font-weight-medium);\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\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    color: var(--pine-color-text-disabled);\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: ['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":"mLAAA,MAAMA,EAAe,kwHACrB,MAAAC,EAAeD,E,MCSFE,EAAS,M,0EA0DZC,KAAAC,eAAkBC,IACxB,GAAIF,KAAKG,SAAU,OAEnB,MAAMC,EAAQF,EAAEG,OAChBL,KAAKM,QAAUF,EAAME,QACrBN,KAAKO,gBAAgBC,KAAKN,EAAgB,EAGpCF,KAAAS,iBAAmB,KACzB,IAAIC,EAAgB,aAEpB,GAAIV,KAAKW,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIV,KAAKY,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,CAAa,E,wCAhEa,M,cAKf,M,sEAeD,M,uDAeC,M,qBAgCpB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOlB,KAAKS,mBAAkB,gBAAiBT,KAAKG,SAAW,OAAS,MAC5EY,EAAA,SAAAE,IAAA,8DACoBE,EAAkBnB,KAAKoB,YAAapB,KAAKW,QAASX,KAAKY,eAAc,eACzEZ,KAAKW,QAAU,OAASE,UACtCP,QAASN,KAAKM,QACdY,MAAM,oBACNf,SAAUH,KAAKG,SACfkB,GAAIrB,KAAKoB,YACTE,KAAMtB,KAAKsB,KAAOtB,KAAKsB,KAAOtB,KAAKoB,YACnCG,SAAUvB,KAAKC,eACfuB,SAAUxB,KAAKwB,SACfC,KAAK,WACLC,MAAO1B,KAAK0B,QAEdX,EAACY,EAAQ,CAAAV,IAAA,2CAACW,WAAW,oBAAoBC,QAAS7B,KAAKoB,YAAaU,KAAM9B,KAAK+B,QAC9E/B,KAAKY,eACJG,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPG,GAAIW,EAAUhC,KAAKoB,YAAa,WAE/BpB,KAAKY,eAGTZ,KAAKiC,cACJlB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPG,GAAIW,EAAUhC,KAAKoB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUiB,KAAMC,EAAQC,KAAK,UAC5BpC,KAAKiC,c","ignoreList":[]}

package/dist/pine-core/p-6709f0f7.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-45cf2585.system.js","./p-521ac753.system.js","./p-8d1efd85.system.js","./p-5480346a.system.js"],(function(i){"use strict";var e,r,n,s,t,o,a,d,c;return{setters:[function(i){e=i.r;r=i.c;n=i.h;s=i.H;t=i.g},function(i){o=i.m;a=i.a},function(i){d=i.P},function(i){c=i.b}],execute:function(){var l=':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;font-weight:var(--pine-font-weight-medium);-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)}.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{color:var(--pine-color-text-disabled);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 p=l;var h=i("pds_switch",function(){function i(i){var n=this;e(this,i);this.pdsSwitchChange=r(this,"pdsSwitchChange",7);this.onSwitchUpdate=function(i){if(n.disabled)return;var e=i.target;n.checked=e.checked;n.pdsSwitchChange.emit(i)};this.switchClassNames=function(){var i="pds-switch";if(n.invalid===true){i+=" pds-switch--error"}if(n.helperMessage!==undefined){i+=" pds-switch--message"}return i};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.value=undefined}i.prototype.render=function(){return n(s,{key:"0c57e5a99f6d5c398c9c1a0164a9cad167d21bf8",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},n("input",{key:"3be2c03ee6525bdc1b215f252d9a8a04539fec9d","aria-describedby":a(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}),n(d,{key:"c6a42085334420dc87265dbb89414c23af3e82d1",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&n("div",{key:"307b54a0fb0c71af5cf91a7ba80c8c3b3c7201b0",class:"pds-switch__message",id:o(this.componentId,"helper")},this.helperMessage),this.errorMessage&&n("div",{key:"5fa0429017fa7083db7baa5c4d8bea11c9c92a1d",class:"pds-switch__message pds-switch__message--error",id:o(this.componentId,"error"),"aria-live":"assertive"},n("pds-icon",{key:"3dcc1270248d7efeaccc8a9d5bccf2888b10ccae",icon:c,size:"small"}),this.errorMessage))};Object.defineProperty(i.prototype,"el",{get:function(){return t(this)},enumerable:false,configurable:true});return i}());h.style=p}}}));
-//# sourceMappingURL=p-6709f0f7.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsSwitchCss","PdsSwitchStyle0","PdsSwitch","exports","this","onSwitchUpdate","e","_this","disabled","input","target","checked","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","class_1","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/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":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  font-weight: var(--pine-font-weight-medium);\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\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    color: var(--pine-color-text-disabled);\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: ['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":"oTAAA,IAAMA,EAAe,kwHACrB,IAAAC,EAAeD,E,ICSFE,EAASC,EAAA,wB,oFA0DZC,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,qBAgCpBI,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOrB,KAAKU,mBAAkB,gBAAiBV,KAAKI,SAAW,OAAS,MAC5Ec,EAAA,SAAAE,IAAA,8DACoBE,EAAkBtB,KAAKuB,YAAavB,KAAKY,QAASZ,KAAKa,eAAc,eACzEb,KAAKY,QAAU,OAASE,UACtCP,QAASP,KAAKO,QACdc,MAAM,oBACNjB,SAAUJ,KAAKI,SACfoB,GAAIxB,KAAKuB,YACTE,KAAMzB,KAAKyB,KAAOzB,KAAKyB,KAAOzB,KAAKuB,YACnCG,SAAU1B,KAAKC,eACf0B,SAAU3B,KAAK2B,SACfC,KAAK,WACLC,MAAO7B,KAAK6B,QAEdX,EAACY,EAAQ,CAAAV,IAAA,2CAACW,WAAW,oBAAoBC,QAAShC,KAAKuB,YAAaU,KAAMjC,KAAKkC,QAC9ElC,KAAKa,eACJK,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPG,GAAIW,EAAUnC,KAAKuB,YAAa,WAE/BvB,KAAKa,eAGTb,KAAKoC,cACJlB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPG,GAAIW,EAAUnC,KAAKuB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUiB,KAAMC,EAAQC,KAAK,UAC5BvC,KAAKoC,c,uHA9GI,I","ignoreList":[]}

package/dist/pine-core/p-6ce5b998.entry.js

@@ -1,2 +0,0 @@
-import{r,c as i,h as e,H as s}from"./p-87fe352f.js";import{m as o,a}from"./p-47291f05.js";import{P as d}from"./p-0c09ce7a.js";import{b as n}from"./p-d561168e.js";const c='.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;border:var(--pine-border);border-radius:var(--pine-border-radius-full);height:var(--sizing-input-size);margin:0;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{color:var(--pine-color-text-disabled);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{font-weight:var(--pine-font-weight-body-medium);-webkit-margin-start:10px;margin-inline-start:10px}.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:26px;margin-inline-start:26px;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)}';const t=c;const p=class{constructor(e){r(this,e);this.pdsRadioChange=i(this,"pdsRadioChange",7);this.handleRadioChange=r=>{if(this.disabled){return}const i=r.target;const e=i.checked;this.pdsRadioChange.emit(e)};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}classNames(){const r=[];if(this.invalid){r.push("is-invalid")}if(this.disabled){r.push("is-disabled")}return r.join("  ")}render(){return e(s,{key:"8c8f58c550fc7b82b135aee152ad01d4bd388a21",class:this.classNames()},e("input",{key:"45b2723c50b7539c0e7219242707fd73b7633237","aria-describedby":a(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}),e(d,{key:"805a7dcf03ff90842468dcfc36e94ef0f6a7cac0",htmlFor:this.componentId,text:this.label}),this.helperMessage&&e("div",{key:"2b38ec8828b4ff7d40454f54af3ce1cc367f15e6",class:"pds-radio__message",id:o(this.componentId,"helper")},this.helperMessage),this.errorMessage&&e("div",{key:"37f62ed40f7ad6c83d8d171a3fdf90404062cb5d",class:`pds-radio__message pds-radio__message--error`,id:o(this.componentId,"error"),"aria-live":"assertive"},e("pds-icon",{key:"5c4d4be02ee1a4e4049778771ec10b2b5921e7fb",icon:n,size:"small"}),this.errorMessage))}};p.style=t;export{p as pds_radio};
-//# sourceMappingURL=p-6ce5b998.entry.js.map

package/dist/pine-core/p-6ce5b998.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsRadioCss","PdsRadioStyle0","PdsRadio","this","handleRadioChange","e","disabled","target","isChecked","checked","pdsRadioChange","emit","classNames","invalid","push","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","value","required","onChange","PdsLabel","htmlFor","text","label","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":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  border: var(--pine-border);\n  border-radius: var(--pine-border-radius-full);\n  height: var(--sizing-input-size);\n  margin: 0;\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      color: var(--pine-color-text-disabled);\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  font-weight: var(--pine-font-weight-body-medium);\n  margin-inline-start: 10px;\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: 26px;\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 { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['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        <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        <PdsLabel htmlFor={this.componentId} text={this.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":"kKAAA,MAAMA,EAAc,spGACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,wEA4DXC,KAAAC,kBAAqBC,IAC3B,GAAIF,KAAKG,SAAU,CACjB,M,CAGF,MAAMC,EAASF,EAAEE,OACjB,MAAMC,EAAYD,EAAOE,QAEzBN,KAAKO,eAAeC,KAAKH,EAAU,E,aA/DnB,M,yCAWC,M,sEAgBC,M,uDAgBD,M,qBAuBX,UAAAI,GACN,MAAMA,EAAa,GAEnB,GAAIT,KAAKU,QAAS,CAChBD,EAAWE,KAAK,a,CAElB,GAAIX,KAAKG,SAAU,CACjBM,EAAWE,KAAK,c,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOjB,KAAKS,cAChBK,EAAA,SAAAE,IAAA,8DACoBE,EAAkBlB,KAAKmB,YAAanB,KAAKU,QAASV,KAAKoB,eAAc,eACzEpB,KAAKU,QAAU,OAASW,UACtCC,KAAK,QACLC,GAAIvB,KAAKmB,YACTK,KAAMxB,KAAKwB,KACXC,MAAOzB,KAAKyB,MACZnB,QAASN,KAAKM,QACdoB,SAAU1B,KAAK0B,SACfvB,SAAUH,KAAKG,SACfwB,SAAU3B,KAAKC,oBAEjBa,EAACc,EAAQ,CAAAZ,IAAA,2CAACa,QAAS7B,KAAKmB,YAAaW,KAAM9B,KAAK+B,QAC/C/B,KAAKoB,eACJN,EAAA,OAAAE,IAAA,2CACEC,MAAO,qBACPM,GAAIS,EAAUhC,KAAKmB,YAAa,WAE/BnB,KAAKoB,eAGTpB,KAAKiC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,+CACPM,GAAIS,EAAUhC,KAAKmB,YAAa,SAAQ,YAC9B,aAEVL,EAAA,YAAAE,IAAA,2CAAUkB,KAAMC,EAAQC,KAAK,UAC5BpC,KAAKiC,c","ignoreList":[]}

package/dist/pine-core/p-6d8df897.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as i,H as r}from"./p-87fe352f.js";import{m as t}from"./p-47291f05.js";import{P as o}from"./p-0c09ce7a.js";import{b as a,e as n}from"./p-d561168e.js";const d=':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{font:var(--pine-typography-body-medium);grid-area:label;letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--pine-border);border-radius:10px;font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-150);padding-right:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-050);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-color-red-050);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-select__error-message,.pds-select__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:2.5rem;pointer-events:none;position:relative;z-index:1}';const l=d;const c=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:t(this.componentId,"helper")},this.helperMessage)}getErrorMessage(){return this.errorMessage&&i("p",{class:"pds-select__error-message",id:t(this.componentId,"error"),"aria-live":"assertive"},i("pds-icon",{icon:a,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:"165255feccf783f5be54aafd3d662f74c6fe376d","aria-disabled":this.disabled?"true":null,class:this.classNames()},i("div",{key:"15a65039af0d9f33a3cc2e3402e4f883fbcbee17",class:"pds-select"},i(o,{key:"aca9088817a4faa1d077e2a0bca640d62d940bf1",htmlFor:this.componentId,text:this.label}),i("select",{key:"ed87a23fc18c58d7a12f69ea0c934d4779955530",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:"c62b99979077a1d0d513cb222643fcdac5b8918a","aria-hidden":"true",class:"hidden",ref:e=>this.slotContainer=e},i("slot",{key:"44c53a70f4cc009fe601e868a4bbf251e45ff8a1",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&i("pds-icon",{key:"7b23da1edb11078a6471aa3a2847b0e54bb1b6bc",class:"pds-select__select-icon",icon:n})))}static get watchers(){return{value:["valueChanged"]}}};c.style=l;export{c as pds_select};
-//# sourceMappingURL=p-6d8df897.entry.js.map

package/dist/pine-core/p-6d8df897.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsSelectCss","PdsSelectStyle0","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","PdsLabel","htmlFor","text","label","autocomplete","undefined","name","onChange","required","ref","el","onSlotchange","enlarge"],"sources":["src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":[":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  font: var(--pine-typography-body-medium);\n  grid-area: label;\n  letter-spacing: var(--pine-letter-spacing);\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-color-red-050);\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-color-red-050);\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  styleUrl: '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":"4KAAA,MAAMA,EAAe,quFACrB,MAAAC,EAAeD,E,MCSFE,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,cACTD,EAACmB,EAAQ,CAAAD,IAAA,2CAACE,QAAS1D,KAAK0C,YAAaiB,KAAM3D,KAAK4D,QAC9CtB,EAAA,UAAAkB,IAAA,2CACEK,aAAc7D,KAAK6D,cAAgBC,UACnCvB,MAAM,oBACNa,SAAUpD,KAAKoD,SACfZ,GAAIxC,KAAK0C,YACT9B,SAAUZ,KAAKY,SACfmD,KAAM/D,KAAK+D,KACXC,SAAUhE,KAAKC,eACfgE,SAAUjE,KAAKiE,SACfC,IAAMC,GAAQnE,KAAKoB,SAAW+C,IAElC7B,EAAA,OAAAkB,IAAA,yDAAiB,OAAOjB,MAAM,SAAS2B,IAAMC,GAAQnE,KAAKkB,cAAgBiD,GACxE7B,EAAA,QAAAkB,IAAA,2CAAMY,aAAcpE,KAAKgB,oBAE1BhB,KAAKgD,kBACJhD,KAAKY,UAAY0B,EAAA,YAAAkB,IAAA,2CAAUjB,MAAM,0BAA0BM,KAAMwB,K","ignoreList":[]}

package/dist/pine-core/p-6db1fe5c.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,H as i,g as e}from"./p-87fe352f.js";const a=":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)}";const n=a;const d=class{constructor(t){s(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}tabClickHandler(s){if(this.componentId===s.detail[1]){this.activeTabIndex=s.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(s){const t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(s.key)){s.preventDefault();this.moveActiveTab(s.key)}}moveActiveTab(s){const t=0;const i=this.tabs.length-1;let e=null;switch(s){case"ArrowLeft":e=this.activeTabIndex===t?i:this.activeTabIndex+-1;break;case"ArrowRight":e=this.activeTabIndex===i?t:this.activeTabIndex+1;break;case"Home":e=t;break;case"End":e=i;break}this.tabs[e].children[0].focus();this.activeTabName=this.tabs[e].name;this.activeTabIndex=e}findAllChildren(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")}propGeneration(s,t=0){s.parentComponentId=this.componentId.toString();s.variant=this.variant.toString();s.selected=this.activeTabName===s.name?true:false;s["index"]=t}passPropsToChildren(){this.tabs.forEach(((s,t)=>{if(this.activeTabName===s.name)this.activeTabIndex=t;this.propGeneration(s,t)}));this.tabPanels.forEach((s=>{this.propGeneration(s)}))}classNames(){let s=`pds-tabs`;if(this.variant&&this.variant!="primary"){const t=`pds-tabs--${this.variant}`;s+=" "+t}return s}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return t(i,{key:"9f6f438a9ee877cc53a790d9e4235074d3df973d","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"92e82a7532305dc20d5bb9d547784e2ec28cb77f",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},t("slot",{key:"ce5dd8180512ecdc2d161d8c2c8fc5625b5f705c",name:"tabs"})),t("slot",{key:"3995ee8c5e3ab3ee5334abe59543288bbcb8e1f1",name:"tabpanels"}))}get el(){return e(this)}};d.style=n;export{d as pds_tabs};
-//# sourceMappingURL=p-6db1fe5c.entry.js.map

package/dist/pine-core/p-6db1fe5c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --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","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';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,ibACnB,MAAAC,EAAeD,E,MCUFE,EAAO,M,kKAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,CAGhB,eAAAG,GACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,CAGpC,cAAAE,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,CAGX,mBAAAK,GACN/B,KAAKK,KAAK2B,SAAQ,CAACP,EAAOC,KACxB,GAAI1B,KAAKI,gBAAkBqB,EAAMnB,KAAMN,KAAKG,eAAiBuB,EAC7D1B,KAAKwB,eAAeC,EAAOC,EAAM,IAGnC1B,KAAKuB,UAAUS,SAASP,IACtBzB,KAAKwB,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAIlC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAanC,KAAK6B,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACEpC,KAAKoB,iB,CAGP,mBAAAiB,GACErC,KAAK+B,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAA7B,IAAA,6DAAkBX,KAAKI,cAAeqC,MAAOzC,KAAKiC,aAAcS,GAAI1C,KAAKC,aAC5EsC,EAAA,OAAA5B,IAAA,2CAAK8B,MAAM,oBAAoBE,KAAK,UAAS,aAAa3C,KAAK4C,cAC7DL,EAAA,QAAA5B,IAAA,2CAAML,KAAK,UAEbiC,EAAA,QAAA5B,IAAA,2CAAML,KAAK,c","ignoreList":[]}

package/dist/pine-core/p-726dc3d1.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as o,H as r}from"./p-87fe352f.js";import{m as a,a as t}from"./p-47291f05.js";import{P as s}from"./p-0c09ce7a.js";import{b as n}from"./p-d561168e.js";const d=':host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-secondary);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(90deg) translate3d(-103%, 32%, 0);transform:rotate(90deg) translate3d(-103%, 32%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);height:var(--pine-dimension-sm);margin:0;position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-secondary-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-secondary);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-grey-300)}input:disabled+label{color:var(--pine-color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{font-weight:var(--pine-font-weight-body-medium);-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}.pds-checkbox__message--error{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-085);gap:var(--pine-spacing-050)}';const c=d;const l=class{constructor(o){e(this,o);this.pdsCheckboxChange=i(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=i(this,"pdsCheckboxInput",7);this.handleCheckboxChange=e=>{if(this.disabled){return}const i=e.target;this.checked=i.checked;this.pdsCheckboxChange.emit({checked:i.checked,value:this.value})};this.handleInput=()=>{this.pdsCheckboxInput.emit({checked:this.checked,value:this.value})};this.checked=false;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}updateIndeterminate(){this.indeterminate=undefined}classNames(){const e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")}render(){return o(r,{key:"a9a36f6b064c3ff184de99514e9dea1f4e59b44d",class:this.classNames()},o("input",{key:"ed7adf4890dd6b7f03659eee3586eeab609af114",type:"checkbox","aria-describedby":t(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),o(s,{key:"a68de459c7a6aef1cfa507808b996ca6b594c165",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&o("div",{key:"34e4b9bc0c8f8e48a5b74e4c2dd695983d640d12",class:"pds-checkbox__message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&o("div",{key:"8ca0733a88369da4248cb2c98e25d9f7d01d7672",class:`pds-checkbox__message pds-checkbox__message--error`,id:a(this.componentId,"error"),"aria-live":"assertive"},o("pds-icon",{key:"f5a97b3612cb3990770367faaeafbbd1d46e48ee",icon:n,size:"small"}),this.errorMessage))}static get watchers(){return{checked:["updateIndeterminate"]}}};l.style=c;export{l as pds_checkbox};
-//# sourceMappingURL=p-726dc3d1.entry.js.map

package/dist/pine-core/p-726dc3d1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsCheckboxCss","PdsCheckboxStyle0","PdsCheckbox","this","handleCheckboxChange","e","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","type","assignDescription","componentId","helperMessage","id","name","required","onChange","onInput","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","icon","danger","size"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\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-danger);\n\n      &:hover {\n        background: var(--pine-color-danger-hover);\n        border-color: var(--pine-color-border-danger-hover);\n      }\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-invalid); // Remove when outline radius is supported in Safari\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.is-indeterminate) {\n  input {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--pine-color-secondary);\n      border-bottom: 0;\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--pine-color-secondary);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-2xs);\n  height: var(--pine-dimension-sm);\n  margin: 0;\n  position: relative;\n  width: var(--pine-dimension-sm);\n\n  &:hover {\n    background: var(--pine-color-secondary-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      border: 1px solid var(--pine-color-secondary);\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\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: var(--pine-color-background-container-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-grey-300);\n      }\n    }\n\n    + label {\n      color: var(--pine-color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--pine-color-text-disabled);\n    }\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\nlabel {\n  font-weight: var(--pine-font-weight-body-medium);\n  margin-inline-start: 10px;\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--pine-color-text-message);\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n\n.pds-checkbox__message--error {\n  align-items: center;\n  display: flex;\n  font-size: var(--pine-font-size-085);\n  gap: var(--pine-spacing-050);\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = 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   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__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":"4KAAA,MAAMA,EAAiB,44GACvB,MAAAC,EAAeD,E,MCUFE,EAAW,M,iIA0EdC,KAAAC,qBAAwBC,IAC9B,GAAIF,KAAKG,SAAU,CACjB,M,CAGF,MAAMC,EAASF,EAAEE,OACjBJ,KAAKK,QAAUD,EAAOC,QAEtBL,KAAKM,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAOR,KAAKQ,OACZ,EAGIR,KAAAS,YAAc,KACpBT,KAAKU,iBAAiBH,KAAK,CACzBF,QAASL,KAAKK,QACdG,MAAOR,KAAKQ,OACZ,E,aAxFyC,M,iRAkE7C,mBAAAG,GACEX,KAAKY,cAAgBC,S,CAwBf,UAAAC,GACN,MAAMA,EAAa,GAEnB,GAAId,KAAKe,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIhB,KAAKY,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAIhB,KAAKG,SAAU,CAAEW,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOtB,KAAKc,cAChBK,EAAA,SAAAE,IAAA,2CACEE,KAAK,WAAU,mBACGC,EAAkBxB,KAAKyB,YAAazB,KAAKe,QAASf,KAAK0B,eAAc,eACzE1B,KAAKe,QAAU,OAASF,UACtCc,GAAI3B,KAAKyB,YACTb,cAAeZ,KAAKY,cACpBgB,KAAM5B,KAAK4B,KACXpB,MAAOR,KAAKQ,MACZH,QAASL,KAAKK,QACdwB,SAAU7B,KAAK6B,SACf1B,SAAUH,KAAKG,SACf2B,SAAU9B,KAAKC,qBACf8B,QAAS/B,KAAKS,cAEhBU,EAACa,EAAQ,CAAAX,IAAA,2CAACY,QAASjC,KAAKyB,YAAaS,KAAMlC,KAAKmC,MAAOrB,WAAYd,KAAKoC,YAAc,kBAAoB,KACzGpC,KAAK0B,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPK,GAAIU,EAAUrC,KAAKyB,YAAa,WAE/BzB,KAAK0B,eAGT1B,KAAKsC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPK,GAAIU,EAAUrC,KAAKyB,YAAa,SAAQ,YAC9B,aAEVN,EAAA,YAAAE,IAAA,2CAAUkB,KAAMC,EAAQC,KAAK,UAC5BzC,KAAKsC,c","ignoreList":[]}

package/dist/pine-core/p-8205e4d8.system.entry.js

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","part","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n\n  // TODO: Needs discussion\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --color-text-hover: var(--pine-color-text-secondary);\n  --number-animation-transform-timing: 200ms;\n\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(var(--pine-dimension-2xs));\n  padding-inline-start: var(var(--pine-dimension-xs));\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,6uDACxB,IAAAC,EAAeD,E,ICaFE,EAAYC,EAAA,2B,mCAwBfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCAfY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,C,EAchBH,EAAAC,UAAAG,iBAAA,WACEX,KAAKI,UAAUQ,iBAAiB,SAAUZ,KAAKC,a,EAGjDM,EAAAC,UAAAK,OAAA,eAAAX,EAAAF,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIlB,KAAKmB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAahB,KAAKM,mBAAkB,CAAEgB,IAAK,SAACC,GAAE,OAAMrB,EAAKE,UAAYmB,CAAvB,IAC5CT,EAAA,WAAAE,IAAA,2CAASQ,KAAK,oBACZV,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SAAO,WAClBX,EAAA,YAAAE,IAAA,2CAAUU,KAAMC,KAElBb,EAAA,OAAAE,IAAA,2CAAKQ,KAAK,iBAAiBP,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C,uIAhDa,I","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,c as t,h as e,H as i,g as o}from"./p-87fe352f.js";const s='pds-tab{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--outline:4px solid var(--pine-color-focus-ring);display:inline-block;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}';const n=s;const d=class{constructor(e){a(this,e);this.pdsTabClick=t(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}onTabClick(a,t){this.pdsTabClick.emit([a,t])}render(){const a=e("span",{key:"d98a922aaa1b9a6023830badc391c3d1d615ec6a",class:"pds-tab-edge",role:"presentation"});const t=e("span",{key:"390da28bb3fd9ab1fa2fddda45569e92d4547fa3",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return e(i,{key:"5996673486d4bd95f98a691b155529a60655e92f",variant:this.variant,slot:"tabs",index:this.index},e("button",{key:"6eded79f9d5aa9093080933aa9aaa2ad88440759",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,e("div",{key:"9f8927d976b6964c22414e9fbb8680b9132370fa",class:"pds-tab__content"},e("slot",{key:"691c6cf5e42bc42c6492276fd5905733c424921c"}))))}get el(){return o(this)}};d.style=n;export{d as pds_tab};
-//# sourceMappingURL=p-9e976b99.entry.js.map