@pine-ds/core 1.0.0 → 1.0.2

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
 import { m as messageId, P as PdsLabel, a as assignDescription } from './pds-label-d7e11551.js';
 
-const pdsSwitchCss = ":host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 2px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 2px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-charcoal-400);--color-background-checked-hover:var(--pine-color-charcoal-400);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-charcoal-200);--color-outline-focus:var(--pine-color-blue-200);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-400);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--sizing-label-gap-size:12px;--spacing-input-toggle-offset:2px;--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--sizing-label-gap-size));--transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}: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)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--transition-timing);transition:var(--transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);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(--transition-timing);transition:-webkit-transform var(--transition-timing);transition:transform var(--transition-timing);transition:transform var(--transition-timing), -webkit-transform var(--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;line-height:var(--line-height-label);-webkit-margin-start:var(--sizing-label-gap-size);margin-inline-start:var(--sizing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-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(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}";
+const pdsSwitchCss = ":host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 2px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 2px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-charcoal-400);--color-background-checked-hover:var(--pine-color-charcoal-400);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-charcoal-200);--color-outline-focus:var(--pine-color-blue-200);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-400);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--spacing-label-gap-size:var(--pine-spacing-150);--spacing-input-toggle-offset:calc(var(--pine-spacing-050) / 2);--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--spacing-label-gap-size));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}: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)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);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;line-height:var(--line-height-label);-webkit-margin-start:var(--spacing-label-gap-size);margin-inline-start:var(--spacing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-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(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}";
 const PdsSwitchStyle0 = pdsSwitchCss;
 
 const PdsSwitch = class {

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

@@ -1 +1 @@
-{"file":"pds-switch.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,yjJAAyjJ,CAAC;AAC/kJ,wBAAe,YAAY;;MCQd,SAAS;;;;QAgEZ,mBAAc,GAAG,CAAC,CAAQ;YAChC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;SAC5C,CAAC;;;;QAKM,qBAAgB,GAAG;YACzB,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;gBACzB,aAAa,IAAI,oBAAoB,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;gBACpC,aAAa,IAAI,sBAAsB,CAAC;aACzC;YACD,OAAO,aAAa,CAAC;SACtB,CAAC;;uBAvEgB,KAAK;wBAKH,KAAK;;;uBAeN,KAAK;;;wBAeJ,KAAK;oBAMY,UAAU;;;IAgC/C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAChF,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACF,EAAC,QAAQ,qDAAC,UAAU,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACvF,IAAI,CAAC,aAAa;YACjB,4DACE,KAAK,EAAE,qBAAqB,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,4DACE,KAAK,EAAE,gDAAgD,EACvD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n  --border-radius-input: var(--pine-border-radius-200);\n  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);\n  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);\n\n  --color-background-checked: var(--pine-color-charcoal-400);\n  --color-background-checked-hover: var(--pine-color-charcoal-400);\n  --color-background-disabled: var(--pine-color-grey-300);\n  --color-background-hover: var(--pine-color-grey-500);\n  --color-background-input-default: var(--pine-color-grey-400);\n  --color-input-toggle: var(--pine-color-white);\n  --color-message-text: var(--pine-color-charcoal-200);\n  --color-outline-focus: var(--pine-color-blue-200);\n  --color-outline-focus-error: var(--pine-color-red-200);\n  --color-text-default: var(--pine-color-charcoal-400);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-error: var(--pine-color-red-300);\n\n  --dimension-input-height: 20px;\n  --dimension-input-width: 36px;\n\n  --line-height-label: var(--pine-line-height-150);\n\n  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));\n  --sizing-label-gap-size: 12px;\n  --spacing-input-toggle-offset: 2px;\n  --spacing-message-block: var(--pine-spacing-050);\n  --spacing-message-inline: calc(var(--dimension-input-width) + var(--sizing-label-gap-size));\n\n  --transition-timing: 0.15s ease-out;\n\n\n  align-items: flex-start;\n  color: var(--color-text-default);\n  display: inline-flex;\n  flex-flow: row wrap;\n  margin-block-end: var(--pine-spacing-md);\n  position: relative;\n}\n\n:host(.pds-switch--error) {\n  color: var(--color-text-error);\n\n  input,\n  input:checked,\n  input:hover:not(:disabled):not(:checked) {\n    background-color: var(--color-text-error);\n  }\n\n  input:focus-visible:not(:disabled):not(:checked) {\n    box-shadow: var(--box-shadow-focus-error);\n  }\n}\n\n// switch container\ninput {\n  appearance: none;\n  background: var(--color-background-input-default);\n  border: 0;\n  border-radius: var(--border-radius-input);\n  cursor: pointer;\n  display: inline-block;\n  height: var(--dimension-input-height);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transform: translateY(2px);\n  transition: var(--transition-timing);\n  transition-property: background, border, color;\n  width: var(--dimension-input-width);\n\n  // switch toggle\n  &::after {\n    background: var(--color-input-toggle);\n    border-radius: 50%;\n    box-shadow: var(--box-shadow-input-toggle);\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(--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  line-height: var(--line-height-label);\n  margin-inline-start: var(--sizing-label-gap-size);\n\n  .pds-switch--error & {\n    color: inherit;\n  }\n}\n\n// Help and error messages\n.pds-switch__message {\n  color: var(--color-message-text);\n  flex: 1 0 100%;\n  font-size: var(--pine-font-size-body-sm);\n  line-height: var(--pine-line-height-sm);\n  margin-inline-start: var(--spacing-message-inline);\n\n  + .pds-switch__message {\n    margin-block-start: var(--spacing-message-block);\n  }\n}\n\n.pds-switch__message--error {\n  color: inherit;\n}\n\n// Disabled state\ninput:disabled {\n  background-color: var(--color-background-disabled);\n  cursor: not-allowed;\n\n  ~ label {\n    color: var(--color-text-disabled);\n    cursor: initial;\n  }\n\n  .pds-switch__message {\n    color: initial;\n  }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n  background-color: var(--color-background-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(--color-background-checked);\n\n  &:hover {\n    border-color: currentColor;\n    color: var(--color-background-checked-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';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrl: '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() 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   * Specifies the underlying input element type\n   * @defaultValue 'checkbox'\n   */\n  @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n  /**\n   * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\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    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Generate switch classes\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={this.type}\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            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-switch.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,sqJAAsqJ,CAAC;AAC5rJ,wBAAe,YAAY;;MCQd,SAAS;;;;QAgEZ,mBAAc,GAAG,CAAC,CAAQ;YAChC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;SAC5C,CAAC;;;;QAKM,qBAAgB,GAAG;YACzB,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;gBACzB,aAAa,IAAI,oBAAoB,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;gBACpC,aAAa,IAAI,sBAAsB,CAAC;aACzC;YACD,OAAO,aAAa,CAAC;SACtB,CAAC;;uBAvEgB,KAAK;wBAKH,KAAK;;;uBAeN,KAAK;;;wBAeJ,KAAK;oBAMY,UAAU;;;IAgC/C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAChF,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACF,EAAC,QAAQ,qDAAC,UAAU,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACvF,IAAI,CAAC,aAAa;YACjB,4DACE,KAAK,EAAE,qBAAqB,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,4DACE,KAAK,EAAE,gDAAgD,EACvD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n  --border-radius-input: var(--pine-border-radius-200);\n\n  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);\n  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);\n\n  --color-background-checked: var(--pine-color-charcoal-400);\n  --color-background-checked-hover: var(--pine-color-charcoal-400);\n  --color-background-disabled: var(--pine-color-grey-300);\n  --color-background-hover: var(--pine-color-grey-500);\n  --color-background-input-default: var(--pine-color-grey-400);\n  --color-input-toggle: var(--pine-color-white);\n  --color-message-text: var(--pine-color-charcoal-200);\n  --color-outline-focus: var(--pine-color-blue-200);\n  --color-outline-focus-error: var(--pine-color-red-200);\n  --color-text-default: var(--pine-color-charcoal-400);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-error: var(--pine-color-red-300);\n\n  --dimension-input-height: 20px;\n  --dimension-input-width: 36px;\n\n  --line-height-label: var(--pine-line-height-150);\n\n  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));\n\n  --spacing-label-gap-size: var(--pine-spacing-150);\n  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);\n  --spacing-message-block: var(--pine-spacing-050);\n  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));\n\n  --number-transition-timing: 0.15s ease-out;\n\n\n  align-items: flex-start;\n  color: var(--color-text-default);\n  display: inline-flex;\n  flex-flow: row wrap;\n  margin-block-end: var(--pine-spacing-md);\n  position: relative;\n}\n\n:host(.pds-switch--error) {\n  color: var(--color-text-error);\n\n  input,\n  input:checked,\n  input:hover:not(:disabled):not(:checked) {\n    background-color: var(--color-text-error);\n  }\n\n  input:focus-visible:not(:disabled):not(:checked) {\n    box-shadow: var(--box-shadow-focus-error);\n  }\n}\n\n// switch container\ninput {\n  appearance: none;\n  background: var(--color-background-input-default);\n  border: 0;\n  border-radius: var(--border-radius-input);\n  cursor: pointer;\n  display: inline-block;\n  height: var(--dimension-input-height);\n  margin: 0;\n  padding: 0;\n  position: relative;\n  transform: translateY(2px);\n  transition: var(--number-transition-timing);\n  transition-property: background, border, color;\n  width: var(--dimension-input-width);\n\n  // switch toggle\n  &::after {\n    background: var(--color-input-toggle);\n    border-radius: 50%;\n    box-shadow: var(--box-shadow-input-toggle);\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  line-height: var(--line-height-label);\n  margin-inline-start: var(--spacing-label-gap-size);\n\n  .pds-switch--error & {\n    color: inherit;\n  }\n}\n\n// Help and error messages\n.pds-switch__message {\n  color: var(--color-message-text);\n  flex: 1 0 100%;\n  font-size: var(--pine-font-size-body-sm);\n  line-height: var(--pine-line-height-sm);\n  margin-inline-start: var(--spacing-message-inline);\n\n  + .pds-switch__message {\n    margin-block-start: var(--spacing-message-block);\n  }\n}\n\n.pds-switch__message--error {\n  color: inherit;\n}\n\n// Disabled state\ninput:disabled {\n  background-color: var(--color-background-disabled);\n  cursor: not-allowed;\n\n  ~ label {\n    color: var(--color-text-disabled);\n    cursor: initial;\n  }\n\n  .pds-switch__message {\n    color: initial;\n  }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n  background-color: var(--color-background-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(--color-background-checked);\n\n  &:hover {\n    border-color: currentColor;\n    color: var(--color-background-checked-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';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrl: '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() 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   * Specifies the underlying input element type\n   * @defaultValue 'checkbox'\n   */\n  @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n  /**\n   * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\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    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Generate switch classes\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={this.type}\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            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
 import { e as upSmall, d as downSmall } from './index-c6934caf.js';
 
-const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
+const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-text-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-text-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
 const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;
 
 const PdsTableHeadCell = class {

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

@@ -1 +1 @@
-{"file":"pds-table-head-cell.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,wwDAAwwD,CAAC;AACryD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QA2BnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAjCmD,KAAK;8BACd,KAAK;;IAEhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-sorting: var(--pine-color-charcoal-500);\n  --color-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n\n  --font-size-head-cell: var(--pine-font-size-087);\n  --font-weight-cell-default: var(--pine-font-weight-normal);\n\n  --line-height-cell-default: var(--pine-line-height-125);\n\n  --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n  --spacing-padding-block-compact: var(--pine-spacing-050);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--color-default);\n  display: table-cell;\n  font-size: var(--font-size-head-cell);\n  font-style: normal;\n  font-weight: var(--font-weight-cell-default);\n  line-height: var(--line-height-cell-default);\n  padding: var(--padding-cell-default);\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-margin-inline-start-arrow);\n    padding-block-start: var(--spacing-padding-arrow);\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--color-sorting);\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrl: 'pds-table-head-cell.scss',\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n  @State() private tableScrolling: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table-head-cell.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,kxDAAkxD,CAAC;AAC/yD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QA2BnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAjCmD,KAAK;8BACd,KAAK;;IAEhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-sorting: var(--pine-color-charcoal-500);\n  --color-text-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n\n  --font-size-head-cell: var(--pine-font-size-087);\n  --font-weight-cell-default: var(--pine-font-weight-normal);\n\n  --line-height-cell-default: var(--pine-line-height-125);\n\n  --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n  --spacing-padding-block-compact: var(--pine-spacing-050);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--color-text-default);\n  display: table-cell;\n  font-size: var(--font-size-head-cell);\n  font-style: normal;\n  font-weight: var(--font-weight-cell-default);\n  line-height: var(--line-height-cell-default);\n  padding: var(--padding-cell-default);\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-margin-inline-start-arrow);\n    padding-block-start: var(--spacing-padding-arrow);\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--color-sorting);\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrl: 'pds-table-head-cell.scss',\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n  @State() private tableScrolling: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-table-head.entry.js.map

@@ -1 +1 @@
-{"file":"pds-table-head.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,0gBAA0gB,CAAC;AACniB,2BAAe,eAAe;;MCMjB,YAAY;;;;IAIvB,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;YACpF,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;SACtC;KACF;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,IACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxC,4EAAqB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,eAAe,GAAG,EAAE,GAAwB,CACpG,EACD,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --color-background-fixed: var(--pine-color-base-white);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--color-background-fixed);\n    left: 0;\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrl: 'pds-table-head.scss',\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  tableRef: HTMLPdsTableElement\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n  render() {\n    return (\n      <Host role=\"row\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''}></pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table-head.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,0gBAA0gB,CAAC;AACniB,2BAAe,eAAe;;MCMjB,YAAY;;;;IAIvB,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;YACpF,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;SACtC;KACF;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,IACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxC,4EAAqB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,eAAe,GAAG,EAAE,GAAwB,CACpG,EACD,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --color-background-fixed: var(--pine-color-base-white);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--color-background-fixed);\n    left: 0;\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrl: 'pds-table-head.scss',\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  tableRef: HTMLPdsTableElement\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n  render() {\n    return (\n      <Host role=\"row\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''}></pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-6f0bb1b9.js';
 
-const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:16px var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
+const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
 const PdsTabsStyle0 = pdsTabsCss;
 
 const PdsTabs = class {

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

@@ -1 +1 @@
-{"file":"pds-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n  \n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: 16px var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/pds-tooltip.entry.js.map

@@ -1 +1 @@
-{"file":"pds-tooltip.entry.js","mappings":"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","names":[],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --box-shadow-default: var(--pine-box-shadow-md);\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n  --font-size-overlay: var(--pine-font-size-087);\n  --line-height-overlay: var(--pine-line-height-125);\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted([slot=\"content\"]) {\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-tooltip.entry.js","mappings":"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","names":[],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted([slot=\"content\"]) {\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-6f0bb1b9.js";import{d as downSmall}from"./index-c6934caf.js";var pdsAccordionCss=":host{display:block}details{--animation-transform-timing:200ms;--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}@-webkit-keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-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}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-animation:slide-down var(--animation-transform-timing);animation:slide-down var(--animation-transform-timing);max-height:0;overflow:hidden}";var PdsAccordionStyle0=pdsAccordionCss;var PdsAccordion=function(){function a(a){var n=this;registerInstance(this,a);this.handleToggle=function(){n.isOpen=n.detailsEl.open};this.getOpenAttribute=function(){if(n.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}a.prototype.handleOpenState=function(a){this.isOpen=a;if(a===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};a.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};a.prototype.render=function(){var a=this;return h(Host,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},h("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(n){return a.detailsEl=n}}),h("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},h("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),h("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:downSmall})),h("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(n){return a.containerEl=n}},h("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(a,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return a}();PdsAccordion.style=PdsAccordionStyle0;export{PdsAccordion as pds_accordion};
+import{r as registerInstance,h,H as Host}from"./index-6f0bb1b9.js";import{d as downSmall}from"./index-c6934caf.js";var pdsAccordionCss=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open] .pds-accordion__body{display:none;}details[open] .pds-accordion__body.open{display:block}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-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}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";var PdsAccordionStyle0=pdsAccordionCss;var PdsAccordion=function(){function n(n){var a=this;registerInstance(this,n);this.handleToggle=function(){a.isOpen=a.detailsEl.open};this.getOpenAttribute=function(){if(a.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}n.prototype.handleOpenState=function(n){this.isOpen=n;if(n===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};n.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};n.prototype.render=function(){var n=this;return h(Host,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},h("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(a){return n.detailsEl=a}}),h("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},h("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),h("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:downSmall})),h("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(a){return n.containerEl=a}},h("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(n,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return n}();PdsAccordion.style=PdsAccordionStyle0;export{PdsAccordion as pds_accordion};
 //# sourceMappingURL=pds-accordion.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --animation-transform-timing: 200ms;\n\n  --border-radius-default: var(--pine-border-radius-100);\n\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-content-background-default: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-300);\n  --color-text-default: var(--pine-color-charcoal-200);\n  --color-text-active: var(--pine-color-charcoal-500);\n  --color-text-hover: var(--pine-color-charcoal-300);\n\n  --spacing-details-padding-inline: var(--pine-spacing-150);\n  --spacing-summary-padding-block: var(--pine-spacing-050);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  border-radius: var(--border-radius-default);\n  padding-inline: var(--spacing-details-padding-inline);\n\n  pds-icon {\n    transform: scaleY(1);\n    transition: transform var(--animation-transform-timing);\n  }\n}\n\n@keyframes slide-down {\n  from {\n    opacity: 0;\n    transform: translateY(-100%)\n  }\n\n  65% {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0%);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n  transition: transform var(--animation-transform-timing);\n\n  summary {\n    color: var(--color-text-active);\n    font: var(--typography-default);\n\n    pds-icon {\n      transform: scaleY(-1);\n      transition: transform var(--animation-transform-timing);\n    }\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  .pds-accordion__body {\n    transition: max-height 1s ease-in-out;\n\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    &.open {\n      max-height: 1000px;\n    }\n\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius-default);\n  color: var(--color-text-default);\n  font: var(--typography-default);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  animation: slide-down var(--animation-transform-timing);\n  max-height: 0;\n  overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n  private containerEl: HTMLDivElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n\n    if ( newValue === true ) {\n      this.containerEl.classList.add('open');\n    } else {\n      this.containerEl.classList.remove('open');\n    }\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={ downSmall } />\n          </summary>\n          <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mHAAA,IAAMA,gBAAkB,mkHACxB,IAAAC,mBAAeD,gB,ICWFE,aAAY,W,kDA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBN,EAAAQ,UAAAC,gBAAA,SAAgBC,GACdT,KAAKG,OAASM,EAEd,GAAKA,IAAa,KAAO,CACvBT,KAAKU,YAAYC,UAAUC,IAAI,O,KAC1B,CACLZ,KAAKU,YAAYC,UAAUE,OAAO,O,GAetCd,EAAAQ,UAAAO,iBAAA,WACEd,KAAKI,UAAUW,iBAAiB,SAAUf,KAAKC,a,EAGjDF,EAAAQ,UAAAS,OAAA,eAAAd,EAAAF,KACE,OACEiB,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIrB,KAAKsB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAanB,KAAKM,mBAAkB,CAAEmB,IAAK,SAACC,GAAO,OAAAxB,EAAKE,UAAYsB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,aAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB9B,KAAKG,OAAS,OAAS,IAAMsB,IAAK,SAACC,GAAO,OAAAxB,EAAKQ,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,G"}
+{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"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  --border-radius-default: var(--pine-border-radius-100);\n\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-content-background-default: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-300);\n  --color-text-default: var(--pine-color-charcoal-200);\n  --color-text-active: var(--pine-color-charcoal-500);\n  --color-text-hover: var(--pine-color-charcoal-300);\n\n  --number-animation-transform-timing: 200ms;\n\n  --spacing-details-padding-inline: var(--pine-spacing-150);\n  --spacing-summary-padding-block: var(--pine-spacing-050);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  border-radius: var(--border-radius-default);\n  padding-inline: var(--spacing-details-padding-inline);\n\n  pds-icon {\n    transform: scaleY(1);\n    transition: transform var(--number-animation-transform-timing);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n  transition: transform var(--number-animation-transform-timing);\n\n  summary {\n    color: var(--color-text-active);\n    font: var(--typography-default);\n\n    pds-icon {\n      transform: scaleY(-1);\n      transition: transform var(--number-animation-transform-timing);\n    }\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  .pds-accordion__body {\n    display: none;\n\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    &.open {\n      display: block;\n    }\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius-default);\n  color: var(--color-text-default);\n  font: var(--typography-default);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n  private containerEl: HTMLDivElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n\n    if ( newValue === true ) {\n      this.containerEl.classList.add('open');\n    } else {\n      this.containerEl.classList.remove('open');\n    }\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={ downSmall } />\n          </summary>\n          <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mHAAA,IAAMA,gBAAkB,okGACxB,IAAAC,mBAAeD,gB,ICWFE,aAAY,W,kDA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBN,EAAAQ,UAAAC,gBAAA,SAAgBC,GACdT,KAAKG,OAASM,EAEd,GAAKA,IAAa,KAAO,CACvBT,KAAKU,YAAYC,UAAUC,IAAI,O,KAC1B,CACLZ,KAAKU,YAAYC,UAAUE,OAAO,O,GAetCd,EAAAQ,UAAAO,iBAAA,WACEd,KAAKI,UAAUW,iBAAiB,SAAUf,KAAKC,a,EAGjDF,EAAAQ,UAAAS,OAAA,eAAAd,EAAAF,KACE,OACEiB,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIrB,KAAKsB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAanB,KAAKM,mBAAkB,CAAEmB,IAAK,SAACC,GAAO,OAAAxB,EAAKE,UAAYsB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,aAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB9B,KAAKG,OAAS,OAAS,IAAMsB,IAAK,SAACC,GAAO,OAAAxB,EAAKQ,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";import{b as caretDown}from"./index-c6934caf.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var pdsButtonCss=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-background-action-primary-default);--color-background-primary-disabled:var(--pine-color-background-action-primary-disabled);--color-background-primary-hover:var(--pine-color-background-action-primary-hover);--color-text-primary-default:var(--pine-color-text-action-primary-default);--color-text-primary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-text-body-default);--color-text-secondary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-background-action-accent-default);--color-background-accent-disabled:var(--pine-color-background-action-accent-disabled);--color-background-accent-hover:var(--pine-color-background-action-accent-hover);--color-text-accent-default:var(--pine-color-text-action-accent-default);--color-text-accent-disabled:var(--pine-color-text-action-accent-disabled);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-background-action-destructive-default);--color-background-destructive-disabled:var(--pine-color-background-action-destructive-disabled);--color-background-destructive-hover:var(--pine-color-background-action-destructive-hover);--color-text-destructive-default:var(--pine-color-text-action-destructive-default);--color-text-destructive-disabled:var(--pine-color-text-action-destructive-disabled);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-body-med);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";var PdsButtonStyle0=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&h("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),h("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&h("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:caretDown,part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0;export{PdsButton as pds_button};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";import{b as caretDown}from"./index-c6934caf.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var pdsButtonCss=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-charcoal-400);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-charcoal-500);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-charcoal-100);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-charcoal-400);--color-text-secondary-disabled:var(--pine-color-charcoal-100);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-blue-300);--color-background-accent-disabled:var(--pine-color-blue-100);--color-background-accent-hover:var(--pine-color-blue-400);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-blue-200);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";var PdsButtonStyle0=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&h("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),h("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&h("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:caretDown,part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0;export{PdsButton as pds_button};
 //# sourceMappingURL=pds-button.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-background-action-primary-default);\n  --color-background-primary-disabled: var(--pine-color-background-action-primary-disabled);\n  --color-background-primary-hover: var(--pine-color-background-action-primary-hover);\n  --color-text-primary-default: var(--pine-color-text-action-primary-default);\n  --color-text-primary-disabled: var(--pine-color-text-action-primary-disabled);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-text-body-default);\n  --color-text-secondary-disabled: var(--pine-color-text-action-primary-disabled);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-background-action-accent-default);\n  --color-background-accent-disabled: var(--pine-color-background-action-accent-disabled);\n  --color-background-accent-hover: var(--pine-color-background-action-accent-hover);\n  --color-text-accent-default: var(--pine-color-text-action-accent-default);\n  --color-text-accent-disabled: var(--pine-color-text-action-accent-disabled);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-background-action-destructive-default);\n  --color-background-destructive-disabled: var(--pine-color-background-action-destructive-disabled);\n  --color-background-destructive-hover: var(--pine-color-background-action-destructive-hover);\n  --color-text-destructive-default: var(--pine-color-text-action-destructive-default);\n  --color-text-destructive-disabled: var(--pine-color-text-action-destructive-disabled);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-body-med);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n    border-color: var(--color-border-focus);\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,aAAe,0uLACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIX,aAAaU,EAAKT,IAAK,CACzB,IAAMW,EAAOF,EAAKT,GAAGY,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIAvFtD,G"}
+{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-charcoal-400);\n  --color-background-primary-disabled: var(--pine-color-grey-300);\n  --color-background-primary-hover: var(--pine-color-charcoal-500);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-charcoal-400);\n  --color-text-secondary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-blue-300);\n  --color-background-accent-disabled: var(--pine-color-blue-100);\n  --color-background-accent-hover: var(--pine-color-blue-400);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-blue-200);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-300);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-400);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-200);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n    border-color: var(--color-border-focus);\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,aAAe,m9KACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIX,aAAaU,EAAKT,IAAK,CACzB,IAAMW,EAAOF,EAAKT,GAAGY,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIAvFtD,G"}

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

@@ -1 +1 @@
-{"version":3,"names":["pdsCheckboxCss","PdsCheckboxStyle0","PdsCheckbox","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","prototype","classNames","invalid","push","indeterminate","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","required","onChange","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","pdsTableCellCss","PdsTableCellStyle0","PdsTableCell","handleScroll","tableRef","scrollLeft","tableScrolling","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","compact","truncate","role","style","selectable"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);\n  --border-radius: var(--pine-border-radius-050);\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-border-disabled: var(--pine-color-charcoal-100);\n  --color-border-icon: var(--pine-color-white);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(--pine-color-grey-300);\n  --color-invalid: var(--pine-color-red-300);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-message: var(--pine-color-charcoal-200);\n  --sizing-input: var(--pine-font-size-100);\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(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\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(--color-invalid);\n  }\n}\n\n:host(.is-indeterminate) {\n  input:checked {\n    &::after {\n      border-bottom: 0;\n      transform: rotate(87deg) translate3d(-114%, 25%, 0);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--color-background);\n  border: var(--border-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border: var(--border-color-interactive-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      border: 1px solid var(--color-border-icon);\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(--color-background-disabled);\n    border-color: var(--color-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--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  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(--color-text-message);\n  font-size: 14px;\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: '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;\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() 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  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 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          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\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.handleCheckboxChange}\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            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-cell-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n  --dimension-max-width-truncated: 100px;\n\n  --font-size-cell-default: var(--pine-font-size-087);\n\n  --number-fixed-column-index: 0;\n\n  --spacing-line-height-cell-default: var(--pine-line-height-125);\n  --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n  --spacing-padding-compact: var(--pine-spacing-050);\n\n  color: var(--color-cell-default);\n  display: table-cell;\n  font-size: var(--font-size-cell-default);\n  line-height: var(--spacing-line-height-cell-default);\n  padding: var(--spacing-padding-cell-default);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: var(--dimension-max-width-truncated);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrl: 'pds-table-cell.scss',\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6LAAA,IAAMA,eAAiB,8pGACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAmEdC,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,0SAIRV,EAAAW,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKY,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIb,KAAKc,cAAe,CAAEH,EAAWE,KAAK,mB,CAC1C,GAAIb,KAAKI,SAAU,CAAEO,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBhB,EAAAW,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKW,cAChBM,EAAA,SAAAE,IAAA,8DACoBE,kBAAkBrB,KAAKsB,YAAatB,KAAKY,QAASZ,KAAKuB,eAAc,eACzEvB,KAAKY,QAAU,OAASY,UACtCC,KAAK,WACLC,GAAI1B,KAAKsB,YACTK,KAAM3B,KAAK2B,KACXlB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACdsB,SAAU5B,KAAK4B,SACfxB,SAAUJ,KAAKI,SACfyB,SAAU7B,KAAKC,uBAEjBgB,EAACa,SAAQ,CAAAX,IAAA,2CAACY,QAAS/B,KAAKsB,YAAaU,KAAMhC,KAAKiC,MAAOtB,WAAYX,KAAKkC,YAAc,kBAAoB,KACzGlC,KAAKuB,eACJN,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPM,GAAIS,UAAUnC,KAAKsB,YAAa,WAE/BtB,KAAKuB,eAGTvB,KAAKoC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPM,GAAIS,UAAUnC,KAAKsB,YAAa,SAAQ,YAC9B,aAETtB,KAAKoC,c,WAzHM,G,oCCVxB,IAAMC,gBAAkB,wrCACxB,IAAAC,mBAAeD,gB,ICMFE,aAAY,W,kDAuCfvC,KAAAwC,aAAe,WACrB,GAAIrC,EAAKsC,SAASC,WAAa,EAAG,CAChCvC,EAAKwC,eAAiB,I,KACjB,CACLxC,EAAKwC,eAAiB,K,+CAxBiB,K,CAf3CJ,EAAA7B,UAAAkC,oBAAA,WACE5C,KAAKyC,SAAWzC,KAAK6C,YAAYC,QAAQ,Y,EAG3CP,EAAA7B,UAAAqC,iBAAA,WACE,GAAI/C,KAAKyC,UAAYzC,KAAKyC,SAASO,YAAchD,KAAKyC,SAASQ,YAAa,CAC1EjD,KAAKyC,SAASS,iBAAiB,SAAUlD,KAAKwC,a,GAW1CD,EAAA7B,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKyC,UAAYzC,KAAKyC,SAASU,QAAS,CAC1CxC,EAAWE,KAAK,a,CAGlB,GAAIb,KAAKoD,SAAU,CACjBzC,EAAWE,KAAK,e,CAGlB,GAAIb,KAAKyC,UAAYzC,KAAKyC,SAASQ,aAAejD,KAAK2C,eAAgB,CACrEhC,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBwB,EAAA7B,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOpB,KAAKW,aACZ0C,KAAK,WACLC,MACEtD,KAAKyC,UACLzC,KAAKyC,SAASQ,aACdjD,KAAKyC,SAASc,WACV,CAAE,wBAAyB,QAC3B,IAGNtC,EAAA,QAAAE,IAAA,6C,yIA5DiB,G"}
+{"version":3,"names":["pdsCheckboxCss","PdsCheckboxStyle0","PdsCheckbox","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","prototype","classNames","invalid","push","indeterminate","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","required","onChange","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","pdsTableCellCss","PdsTableCellStyle0","PdsTableCell","handleScroll","tableRef","scrollLeft","tableScrolling","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","compact","truncate","role","style","selectable"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);\n\n  --border-radius: var(--pine-border-radius-050);\n\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);\n\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-border-disabled: var(--pine-color-charcoal-100);\n  --color-border-icon: var(--pine-color-white);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(--pine-color-grey-300);\n  --color-invalid: var(--pine-color-red-300);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-message: var(--pine-color-charcoal-200);\n\n  --sizing-input: var(--pine-font-size-100);\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(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\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(--color-invalid);\n  }\n}\n\n:host(.is-indeterminate) {\n  input:checked {\n    &::after {\n      border-bottom: 0;\n      transform: rotate(87deg) translate3d(-114%, 25%, 0);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--color-background);\n  border: var(--border-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border: var(--border-color-interactive-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      border: 1px solid var(--color-border-icon);\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(--color-background-disabled);\n    border-color: var(--color-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--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  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(--color-text-message);\n  font-size: 14px;\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: '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;\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() 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  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 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          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\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.handleCheckboxChange}\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            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  --color-background-fixed: var(--pine-color-white);\n  --color-cell-default: var(--pine-color-charcoal-200);\n\n  --dimension-fixed-cell-position: 0;\n  --dimension-max-width-truncated: 100px;\n\n  --font-size-cell-default: var(--pine-font-size-087);\n\n  --number-fixed-column-index: 0;\n\n  --spacing-line-height-cell-default: var(--pine-line-height-125);\n  --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n  --spacing-padding-compact: var(--pine-spacing-050);\n\n  color: var(--color-cell-default);\n  display: table-cell;\n  font-size: var(--font-size-cell-default);\n  line-height: var(--spacing-line-height-cell-default);\n  padding: var(--spacing-padding-cell-default);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n  background: var(--color-background-fixed);\n  left: var(--dimension-fixed-cell-position);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: var(--dimension-max-width-truncated);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrl: 'pds-table-cell.scss',\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6LAAA,IAAMA,eAAiB,8pGACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAmEdC,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,0SAIRV,EAAAW,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKY,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIb,KAAKc,cAAe,CAAEH,EAAWE,KAAK,mB,CAC1C,GAAIb,KAAKI,SAAU,CAAEO,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBhB,EAAAW,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKW,cAChBM,EAAA,SAAAE,IAAA,8DACoBE,kBAAkBrB,KAAKsB,YAAatB,KAAKY,QAASZ,KAAKuB,eAAc,eACzEvB,KAAKY,QAAU,OAASY,UACtCC,KAAK,WACLC,GAAI1B,KAAKsB,YACTK,KAAM3B,KAAK2B,KACXlB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACdsB,SAAU5B,KAAK4B,SACfxB,SAAUJ,KAAKI,SACfyB,SAAU7B,KAAKC,uBAEjBgB,EAACa,SAAQ,CAAAX,IAAA,2CAACY,QAAS/B,KAAKsB,YAAaU,KAAMhC,KAAKiC,MAAOtB,WAAYX,KAAKkC,YAAc,kBAAoB,KACzGlC,KAAKuB,eACJN,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPM,GAAIS,UAAUnC,KAAKsB,YAAa,WAE/BtB,KAAKuB,eAGTvB,KAAKoC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPM,GAAIS,UAAUnC,KAAKsB,YAAa,SAAQ,YAC9B,aAETtB,KAAKoC,c,WAzHM,G,oCCVxB,IAAMC,gBAAkB,wrCACxB,IAAAC,mBAAeD,gB,ICMFE,aAAY,W,kDAuCfvC,KAAAwC,aAAe,WACrB,GAAIrC,EAAKsC,SAASC,WAAa,EAAG,CAChCvC,EAAKwC,eAAiB,I,KACjB,CACLxC,EAAKwC,eAAiB,K,+CAxBiB,K,CAf3CJ,EAAA7B,UAAAkC,oBAAA,WACE5C,KAAKyC,SAAWzC,KAAK6C,YAAYC,QAAQ,Y,EAG3CP,EAAA7B,UAAAqC,iBAAA,WACE,GAAI/C,KAAKyC,UAAYzC,KAAKyC,SAASO,YAAchD,KAAKyC,SAASQ,YAAa,CAC1EjD,KAAKyC,SAASS,iBAAiB,SAAUlD,KAAKwC,a,GAW1CD,EAAA7B,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKyC,UAAYzC,KAAKyC,SAASU,QAAS,CAC1CxC,EAAWE,KAAK,a,CAGlB,GAAIb,KAAKoD,SAAU,CACjBzC,EAAWE,KAAK,e,CAGlB,GAAIb,KAAKyC,UAAYzC,KAAKyC,SAASQ,aAAejD,KAAK2C,eAAgB,CACrEhC,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBwB,EAAA7B,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOpB,KAAKW,aACZ0C,KAAK,WACLC,MACEtD,KAAKyC,UACLzC,KAAKyC,SAASQ,aACdjD,KAAKyC,SAASc,WACV,CAAE,wBAAyB,QAC3B,IAGNtC,EAAA,QAAAE,IAAA,6C,yIA5DiB,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-6f0bb1b9.js";import{P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d7e11551.js";var pdsInputCss=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-error:0 0 0 2px var(--pine-color-red-200);--color-text-default:var(-pine-color-charcoal-500);--color-background-disabled:var(--pine-color-grey-100);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-text:var(--pine-color-grey-500);--color-placeholder-text:var(--pine-color-charcoal-200);--font-size-helper-message:var(--pine-font-size-100);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-text);cursor:not-allowed}input:hover{border-color:var(--color-border-hover)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input:-ms-input-placeholder{color:var(--color-placeholder-text)}input:has(~.pds-input__error-message){border-color:var(--color-border-error)}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-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{color:var(--color-error)}";var PdsInputStyle0=pdsInputCss;var PdsInput=function(){function e(e){var i=this;registerInstance(this,e);this.pdsInput=createEvent(this,"pdsInput",7);this.onInputEvent=function(e){var r=e.target;if(r){i.value=r.value||""}i.pdsInput.emit(e)};this.componentId=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=undefined}e.prototype.render=function(){return h(Host,{key:"d11ef85231a61d59752e289cb0832eb971115a84","aria-disabled":this.disabled?"true":null},h("div",{key:"722e05d546051d094ee4d870eaaefea24d241032",class:"pds-input"},h(PdsLabel,{key:"a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7",htmlFor:this.componentId,text:this.label}),h("input",{key:"89d5b9cfa436ca98c58da38455c6e08abce6937c",class:"pds-input__field","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,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}),this.helperMessage&&h("p",{key:"4fe86e4f98f16c25009b9011cf02e7a71c9050ef",class:"pds-input__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("p",{key:"50c1d4b6603868f5494c599298b23814df26782b",class:"pds-input__error-message",id:messageId(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage)))};return e}();PdsInput.style=PdsInputStyle0;export{PdsInput as pds_input};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-6f0bb1b9.js";import{P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d7e11551.js";var pdsInputCss=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-error:0 0 0 2px var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-500);--color-background-disabled:var(--pine-color-grey-100);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-text:var(--pine-color-grey-500);--color-placeholder-text:var(--pine-color-charcoal-200);--font-size-helper-message:var(--pine-font-size-100);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-text);cursor:not-allowed}input:hover{border-color:var(--color-border-hover)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input:-ms-input-placeholder{color:var(--color-placeholder-text)}input:has(~.pds-input__error-message){border-color:var(--color-border-error)}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-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{color:var(--color-error)}";var PdsInputStyle0=pdsInputCss;var PdsInput=function(){function e(e){var i=this;registerInstance(this,e);this.pdsInput=createEvent(this,"pdsInput",7);this.onInputEvent=function(e){var r=e.target;if(r){i.value=r.value||""}i.pdsInput.emit(e)};this.componentId=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=undefined}e.prototype.render=function(){return h(Host,{key:"d11ef85231a61d59752e289cb0832eb971115a84","aria-disabled":this.disabled?"true":null},h("div",{key:"722e05d546051d094ee4d870eaaefea24d241032",class:"pds-input"},h(PdsLabel,{key:"a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7",htmlFor:this.componentId,text:this.label}),h("input",{key:"89d5b9cfa436ca98c58da38455c6e08abce6937c",class:"pds-input__field","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,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}),this.helperMessage&&h("p",{key:"4fe86e4f98f16c25009b9011cf02e7a71c9050ef",class:"pds-input__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("p",{key:"50c1d4b6603868f5494c599298b23814df26782b",class:"pds-input__error-message",id:messageId(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage)))};return e}();PdsInput.style=PdsInputStyle0;export{PdsInput as pds_input};
 //# sourceMappingURL=pds-input.entry.js.map