npm - @pine-ds/core - Versions diffs - 2.20.0-mercury.0 → 2.22.0-mercury.0 - Mend

@pine-ds/core 2.20.0-mercury.0 → 2.22.0-mercury.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (442) hide show

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-c806218b.js";var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color:var(--pine-color-grey-900);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-grey-700);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-grey-700);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:1px solid var(--color-border-default);border-radius:var(--pine-border-radius-100);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";var PdsTextareaStyle0=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"f58ccd5b20fc30c6e6153e04e98b27fe265040af","aria-disabled":this.disabled?"true":null},h("div",{key:"480b51012d0f7a05d83fb8cb359d2bc3a4e82189",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"0b34ee6ee8eec6891c00596f840d028ab6ac36bb",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"6f066ce38aaec3257bddd69715118aa5740723c1","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"91c66558978cdbb3191c0af31c34c2647749c01a",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"da8320d10ace733c7181ab3c6827da99d94d7ebd","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0;export{PdsTextarea as pds_textarea};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-c806218b.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTextareaStyle0=baseCss;var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color:var(--pine-color-grey-900);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-grey-700);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-grey-700);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:1px solid var(--color-border-default);border-radius:var(--pine-border-radius-100);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";var PdsTextareaStyle1=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"178de49f01c711145054009b42828b846b7670b9","aria-disabled":this.disabled?"true":null},h("div",{key:"b62cfd1551b4923990b2b806a9ad07755b82a2a4",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"3a5990ac49ad3367d3f59dd8ff6e986920ccccc5",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"e27ff5eb4350be9a1c2351ccda578588241e85d7","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"71e4839681208e2a11e79d0a9e3d1542da566dcf",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"64de96c3dcf76d0e1d888f9e88f4bec66138010d","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0+PdsTextareaStyle1;export{PdsTextarea as pds_textarea};
 //# sourceMappingURL=pds-textarea.entry.js.map

package/dist/esm-es5/pds-textarea.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n --color: var(--pine-color-grey-900);\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-default: var(--pine-color-grey-400);\n --color-border-error: var(--pine-color-red-300);\n --color-border-focus-visible: var(--pine-color-grey-300);\n --color-border-hover: var(--pine-color-grey-500);\n --color-disabled-default: var(--pine-color-grey-700);\n --color-error-default: var(--pine-color-red-300);\n --color-focus-visible-outline: var(--pine-color-purple-300);\n --color-focus-visible-outline-error: var(--pine-color-red-200);\n --color-placeholder-default: var(--pine-color-grey-700);\n\n --font-size-field: var(--pine-font-size-100);\n --font-size-helper-message: var(--pine-font-size-100);\n --font-size-label: var(--pine-font-size-100);\n --font-weight-field: var(--pine-font-weight-normal);\n --font-weight-helper-message: var(--pine-font-weight-normal);\n --font-weight-label: var(--pine-font-weight-medium);\n\n --line-height-field: var(--pine-line-height-150);\n --line-height-helper-message: var(--pine-line-height-125);\n --line-height-label: var(--pine-line-height-150);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--font-size-label);\n font-weight: var(--font-weight-label);\n line-height: var(--line-height-label);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background);\n border: 1px solid var(--color-border-default);\n border-radius: var(--pine-border-radius-100);\n font-family: inherit;\n font-size: var(--font-size-field);\n font-weight: var(--font-weight-field);\n line-height: var(--line-height-field);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--color-border-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-disabled-default);\n cursor: not-allowed;\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 &::placeholder {\n color: var(--color-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--font-size-helper-message);\n font-weight: var(--font-weight-helper-message);\n line-height: var(--line-height-helper-message);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrl: 'pds-textarea.scss',\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /*\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the textarea is disabled\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Specifies the error text and provides an error-themed treatment to the field\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a hint or description of the textarea\n /\n @Prop() helperMessage?: string;\n\n /\n Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n /\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /\n Text to be displayed as the textarea label\n /\n @Prop() label?: string;\n\n /\n Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n /\n @Prop() name: string = this.componentId;\n\n /\n Specifies a short hint that describes the expected value of the textarea\n /\n @Prop() placeholder?: string;\n\n /\n Indicates whether or not the textarea is readonly\n * @defaultValue false\n /\n @Prop() readonly = false;\n\n /\n Indicates whether or not the textarea is required\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n Sets number of rows of text visible without needing to scroll in the textarea\n /\n @Prop() rows?: number;\n\n /\n The value of the textarea\n /\n @Prop({mutable: true}) value?: string;\n\n /\n Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6MAAA,IAAMA,eAAiB,6jHACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G","ignoreList":[]}
1	+ {"version":3,"names":["baseCss","PdsTextareaStyle0","pdsTextareaCss","PdsTextareaStyle1","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n --color: var(--pine-color-grey-900);\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-default: var(--pine-color-grey-400);\n --color-border-error: var(--pine-color-red-300);\n --color-border-focus-visible: var(--pine-color-grey-300);\n --color-border-hover: var(--pine-color-grey-500);\n --color-disabled-default: var(--pine-color-grey-700);\n --color-error-default: var(--pine-color-red-300);\n --color-focus-visible-outline: var(--pine-color-purple-300);\n --color-focus-visible-outline-error: var(--pine-color-red-200);\n --color-placeholder-default: var(--pine-color-grey-700);\n\n --font-size-field: var(--pine-font-size-100);\n --font-size-helper-message: var(--pine-font-size-100);\n --font-size-label: var(--pine-font-size-100);\n --font-weight-field: var(--pine-font-weight-normal);\n --font-weight-helper-message: var(--pine-font-weight-normal);\n --font-weight-label: var(--pine-font-weight-medium);\n\n --line-height-field: var(--pine-line-height-150);\n --line-height-helper-message: var(--pine-line-height-125);\n --line-height-label: var(--pine-line-height-150);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--font-size-label);\n font-weight: var(--font-weight-label);\n line-height: var(--line-height-label);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background);\n border: 1px solid var(--color-border-default);\n border-radius: var(--pine-border-radius-100);\n font-family: inherit;\n font-size: var(--font-size-field);\n font-weight: var(--font-weight-field);\n line-height: var(--line-height-field);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--color-border-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-disabled-default);\n cursor: not-allowed;\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 &::placeholder {\n color: var(--color-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--font-size-helper-message);\n font-weight: var(--font-weight-helper-message);\n line-height: var(--line-height-helper-message);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the textarea is disabled\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Specifies the error text and provides an error-themed treatment to the field\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a hint or description of the textarea\n /\n @Prop() helperMessage?: string;\n\n /\n Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n /\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /\n Text to be displayed as the textarea label\n /\n @Prop() label?: string;\n\n /\n Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n /\n @Prop() name: string = this.componentId;\n\n /\n Specifies a short hint that describes the expected value of the textarea\n /\n @Prop() placeholder?: string;\n\n /\n Indicates whether or not the textarea is readonly\n * @defaultValue false\n /\n @Prop() readonly = false;\n\n /\n Indicates whether or not the textarea is required\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n Sets number of rows of text visible without needing to scroll in the textarea\n /\n @Prop() rows?: number;\n\n /\n The value of the textarea\n /\n @Prop({mutable: true}) value?: string;\n\n /\n Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6MAAA,IAAMA,QAAU,s1DAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,6jHACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G","ignoreList":[]}

package/dist/esm-es5/pds-tooltip.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,i=t.overlay,a=t.offset,e=a===void 0?8:a;if(r==undefined)return;var n=r.getBoundingClientRect();var l=i.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):i.style.top="50%";i.style.left="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("left"):i.style.top="50%";i.style.right="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("bottom"):i.style.top="calc(".concat(n.height,"px + ").concat(e,"px)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break;case o.includes("top"):i.style.top="calc((".concat(l.height,"px + ").concat(e,"px) * -1)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break}};var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-200);--color-background-default:var(--pine-color-grey-900);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-085);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle0=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"52999e010e83fb265a46867b0b29169f7363a496",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"6bb63ba10eab04114ced7ead7079d46cc22cb72c",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"930c148c837912ad9d5ea57e92246e0211b355c4","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"813429e2865fae92050d779ca7f47072313db851"})),h("div",{key:"7f47e8b4ff3d6238f27e38986f032ece94f6b584",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"90b3f02974d250375d55ed332a9c525626ff5439",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0;export{PdsTooltip as pds_tooltip};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,e=t.overlay,i=t.offset,a=i===void 0?8:i;if(r==undefined)return;var n=r.getBoundingClientRect();var l=e.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):e.style.top="50%";e.style.left="calc(".concat(n.width,"px + ").concat(a,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("left"):e.style.top="50%";e.style.right="calc(".concat(n.width,"px + ").concat(a,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("bottom"):e.style.top="calc(".concat(n.height,"px + ").concat(a,"px)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break;case o.includes("top"):e.style.top="calc((".concat(l.height,"px + ").concat(a,"px) * -1)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break}};var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTooltipStyle0=baseCss;var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-200);--color-background-default:var(--pine-color-grey-900);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-085);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle1=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"2d8f8962d48885ba08942be77017a4935ddd2e22",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"532fcea8cc64b97257ee44f7513d24ae6369bc80",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"aeebff67bb54044f6c929b3da664c8b5185d34bb","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"459356377503d70ca14d8fc52fc25ed989e9c54c"})),h("div",{key:"29eab9bdfc2579d96ba66cce94ecf82b52c3e8a5",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"33b625cdc333f23ad036a7623581e49b95ce23e7",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0+PdsTooltipStyle1;export{PdsTooltip as pds_tooltip};
 //# sourceMappingURL=pds-tooltip.entry.js.map

package/dist/esm-es5/pds-tooltip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"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-200);\n\n --color-background-default: var(--pine-color-grey-900);\n --color-text-default: var(--pine-color-white);\n\n --font-size-overlay: var(--pine-font-size-085);\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() {\n display: flex;\n }\n\n ::slotted([slot=\"content\"]) {\n display: block;\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"],"mappings":"6IAOO,IAAMA,gBAAkB,SAACC,G,IAACC,EAAID,EAAAC,KAAEC,EAAaF,EAAAE,cAAEC,EAAOH,EAAAG,QAAEC,EAAAJ,EAAAK,SAAMD,SAAA,EAAG,EAACA,EACvE,GAAIH,GAAQK,UAAW,OAEvB,IAAMC,EAAON,EAAKO,wBAClB,IAAMC,EAAcN,EAAQK,wBAG5B,IAAKN,GAAiBA,GAAiB,GAAI,OAE3C,OAAQ,MACN,KAAKA,EAAcQ,SAAS,SAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAME,KAAO,QAAAC,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACrDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,QAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAMO,MAAQ,QAAAJ,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACtDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,UAC1BP,EAAQQ,MAAMC,IAAM,QAAAE,OAAQP,EAAKY,OAAM,SAAAL,OAAQT,EAAM,OACrDF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,OAC1BP,EAAQQ,MAAMC,IAAM,SAAAE,OAASL,EAAYU,OAAM,SAAAL,OAAQT,EAAM,aAC7DF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAE5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEN,ECxFA,IAAMI,cAAgB,q1JACtB,IAAAC,iBAAeD,c,ICcFE,WAAU,W,oKAkHbC,KAAAC,WAAa,WACnBC,EAAKC,cACLD,EAAKE,eAAeC,M,EAGdL,KAAAM,WAAa,WACnBJ,EAAKK,cACLL,EAAKM,eAAeH,M,cA7GJ,M,gEAgBE,K,iBAME,M,eAkBL,Q,YAM8B,K,CAG/CI,EAAAC,UAAAC,iBAAA,WACE,GAAIX,KAAKY,OAAQ,CACfZ,KAAKM,Y,KACA,CACLN,KAAKC,Y,GAcTQ,EAAAC,UAAAG,kBAAA,WACE,GAAIb,KAAKY,OAAQ,CACfZ,KAAKO,a,CAGPP,KAAKc,GAAGC,iBAAiB,OAAQf,KAAKC,WAAY,MAClDD,KAAKc,GAAGC,iBAAiB,QAASf,KAAKM,WAAY,K,EAGrDG,EAAAC,UAAAM,mBAAA,WACE,GAAIhB,KAAKY,OAAQ,CACfZ,KAAKO,a,GAITE,EAAAC,UAAAO,mBAAA,WACEzC,gBAAgB,CAACE,KAAMsB,KAAKc,GAAInC,cAAeqB,KAAKkB,UAAWtC,QAASoB,KAAKmB,W,EAOzEV,EAAAC,UAAAH,YAAN,W,qFACEP,KAAKY,OAAS,K,iBAOVH,EAAAC,UAAAP,YAAN,W,qFACEH,KAAKY,OAAS,M,iBAahBH,EAAAC,UAAAU,OAAA,eAAAlB,EAAAF,KACE,OACEqB,EAACC,KAAI,CAAAC,IAAA,2CACHC,aAAcxB,KAAKM,WACnBmB,aAAczB,KAAKC,WACnByB,UAAW1B,KAAKM,WAChBqB,WAAY3B,KAAKC,YAEjBoB,EAAA,OAAAE,IAAA,2CACEK,MAAO,uDAAArC,OAEUS,KAAKkB,UAAS,kBAAA3B,OAC3BS,KAAK6B,YAAc,gCAAkC,GAAE,kBAAAtC,OACvDS,KAAKY,OAAS,uBAAyB,GAAE,kBAAArB,OACzCS,KAAK8B,SAAW,GAAK,wBAAuB,iBAGhDT,EAAA,QAAAE,IAAA,8DACoBvB,KAAK+B,YACvBH,MAAM,wBAENP,EAAA,QAAAE,IAAA,8CAGFF,EAAA,OAAAE,IAAA,2CAAKK,MAAM,uBAAsB,cAClB5B,KAAKY,OAAS,QAAU,OAAM,YAChCZ,KAAKY,OAAS,SAAW,MACpCoB,GAAIhC,KAAK+B,YACTE,IAAK,SAACnB,GAAE,OAAMZ,EAAKiB,UAAYL,CAAvB,EACRoB,KAAK,WAELb,EAAA,QAAAE,IAAA,2CACEY,KAAK,YAENnC,KAAKoC,U,6PA9JK,G","ignoreList":[]}
1	+ {"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","baseCss","PdsTooltipStyle0","pdsTooltipCss","PdsTooltipStyle1","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/global/styles/base.scss?tag=pds-tooltip&encapsulation=shadow","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","// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\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-200);\n\n --color-background-default: var(--pine-color-grey-900);\n --color-text-default: var(--pine-color-white);\n\n --font-size-overlay: var(--pine-font-size-085);\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() {\n display: flex;\n }\n\n ::slotted([slot=\"content\"]) {\n display: block;\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 styleUrls: ['../../global/styles/base.scss', '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"],"mappings":"6IAOO,IAAMA,gBAAkB,SAACC,G,IAACC,EAAID,EAAAC,KAAEC,EAAaF,EAAAE,cAAEC,EAAOH,EAAAG,QAAEC,EAAAJ,EAAAK,SAAMD,SAAA,EAAG,EAACA,EACvE,GAAIH,GAAQK,UAAW,OAEvB,IAAMC,EAAON,EAAKO,wBAClB,IAAMC,EAAcN,EAAQK,wBAG5B,IAAKN,GAAiBA,GAAiB,GAAI,OAE3C,OAAQ,MACN,KAAKA,EAAcQ,SAAS,SAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAME,KAAO,QAAAC,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACrDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,QAC1BP,EAAQQ,MAAMC,IAAM,MACpBT,EAAQQ,MAAMO,MAAQ,QAAAJ,OAAQP,EAAKQ,MAAK,SAAAD,OAAQT,EAAM,OACtDF,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAMC,IAAM,IACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAMM,OAAS,IACvBd,EAAQQ,MAAMC,IAAM,UACpBT,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,UAC1BP,EAAQQ,MAAMC,IAAM,QAAAE,OAAQP,EAAKY,OAAM,SAAAL,OAAQT,EAAM,OACrDF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAG5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEF,KAAKd,EAAcQ,SAAS,OAC1BP,EAAQQ,MAAMC,IAAM,SAAAE,OAASL,EAAYU,OAAM,SAAAL,OAAQT,EAAM,aAC7DF,EAAQQ,MAAME,KAAO,MACrBV,EAAQQ,MAAMK,UAAY,mBAE1B,GAAId,EAAcQ,SAAS,SAAU,CACnCP,EAAQQ,MAAME,KAAO,IACrBV,EAAQQ,MAAMK,UAAY,e,CAE5B,GAAId,EAAcQ,SAAS,OAAQ,CACjCP,EAAQQ,MAAME,KAAO,UACrBV,EAAQQ,MAAMO,MAAQ,IACtBf,EAAQQ,MAAMK,UAAY,e,CAG5B,MAEN,ECxFA,IAAMI,QAAU,s1DAChB,IAAAC,iBAAeD,QCDf,IAAME,cAAgB,q1JACtB,IAAAC,iBAAeD,c,ICcFE,WAAU,W,oKAkHbC,KAAAC,WAAa,WACnBC,EAAKC,cACLD,EAAKE,eAAeC,M,EAGdL,KAAAM,WAAa,WACnBJ,EAAKK,cACLL,EAAKM,eAAeH,M,cA7GJ,M,gEAgBE,K,iBAME,M,eAkBL,Q,YAM8B,K,CAG/CI,EAAAC,UAAAC,iBAAA,WACE,GAAIX,KAAKY,OAAQ,CACfZ,KAAKM,Y,KACA,CACLN,KAAKC,Y,GAcTQ,EAAAC,UAAAG,kBAAA,WACE,GAAIb,KAAKY,OAAQ,CACfZ,KAAKO,a,CAGPP,KAAKc,GAAGC,iBAAiB,OAAQf,KAAKC,WAAY,MAClDD,KAAKc,GAAGC,iBAAiB,QAASf,KAAKM,WAAY,K,EAGrDG,EAAAC,UAAAM,mBAAA,WACE,GAAIhB,KAAKY,OAAQ,CACfZ,KAAKO,a,GAITE,EAAAC,UAAAO,mBAAA,WACE3C,gBAAgB,CAACE,KAAMwB,KAAKc,GAAIrC,cAAeuB,KAAKkB,UAAWxC,QAASsB,KAAKmB,W,EAOzEV,EAAAC,UAAAH,YAAN,W,qFACEP,KAAKY,OAAS,K,iBAOVH,EAAAC,UAAAP,YAAN,W,qFACEH,KAAKY,OAAS,M,iBAahBH,EAAAC,UAAAU,OAAA,eAAAlB,EAAAF,KACE,OACEqB,EAACC,KAAI,CAAAC,IAAA,2CACHC,aAAcxB,KAAKM,WACnBmB,aAAczB,KAAKC,WACnByB,UAAW1B,KAAKM,WAChBqB,WAAY3B,KAAKC,YAEjBoB,EAAA,OAAAE,IAAA,2CACEK,MAAO,uDAAAvC,OAEUW,KAAKkB,UAAS,kBAAA7B,OAC3BW,KAAK6B,YAAc,gCAAkC,GAAE,kBAAAxC,OACvDW,KAAKY,OAAS,uBAAyB,GAAE,kBAAAvB,OACzCW,KAAK8B,SAAW,GAAK,wBAAuB,iBAGhDT,EAAA,QAAAE,IAAA,8DACoBvB,KAAK+B,YACvBH,MAAM,wBAENP,EAAA,QAAAE,IAAA,8CAGFF,EAAA,OAAAE,IAAA,2CAAKK,MAAM,uBAAsB,cAClB5B,KAAKY,OAAS,QAAU,OAAM,YAChCZ,KAAKY,OAAS,SAAW,MACpCoB,GAAIhC,KAAK+B,YACTE,IAAK,SAACnB,GAAE,OAAMZ,EAAKiB,UAAYL,CAAvB,EACRoB,KAAK,WAELb,EAAA,QAAAE,IAAA,2CACEY,KAAK,YAENnC,KAAKoC,U,6PA9JK,G","ignoreList":[]}

package/dist/pine-core/p-058ee4aa.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as a,g as i}from"./p-7e7de1d6.js";const s=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const r=s;const n=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter: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 o=n;const h=class{constructor(t){e(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}tabClickHandler(e){if(this.componentId===e.detail[1]){this.activeTabIndex=e.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(e){const t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(e.key)){e.preventDefault();this.moveActiveTab(e.key)}}moveActiveTab(e){const t=0;const a=this.tabs.length-1;let i=null;switch(e){case"ArrowLeft":i=this.activeTabIndex===t?a:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===a?t:this.activeTabIndex+1;break;case"Home":i=t;break;case"End":i=a;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i}findAllChildren(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")}propGeneration(e,t=0){e.parentComponentId=this.componentId.toString();e.variant=this.variant.toString();e.selected=this.activeTabName===e.name?true:false;e["index"]=t}passPropsToChildren(){this.tabs.forEach(((e,t)=>{if(this.activeTabName===e.name)this.activeTabIndex=t;this.propGeneration(e,t)}));this.tabPanels.forEach((e=>{this.propGeneration(e)}))}classNames(){let e=`pds-tabs`;if(this.variant&&this.variant!="primary"){const t=`pds-tabs--${this.variant}`;e+=" "+t}return e}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return t(a,{key:"590f66c80be5b92b015e6499ee60bef965bbaa1e","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"7251690cd8b8ac1425763212883c98826d15fed1",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},t("slot",{key:"d07a6f7b621309db9cd7169184c8e7ae0b3b981f",name:"tabs"})),t("slot",{key:"dcc5b2ea9bdf45f33d3cb2b0a75fa4a2885ec00b",name:"tabpanels"}))}get el(){return i(this)}};h.style=r+o;export{h as pds_tabs};
2	+ //# sourceMappingURL=p-058ee4aa.entry.js.map

package/dist/pine-core/p-058ee4aa.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsTabsStyle0","pdsTabsCss","PdsTabsStyle1","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/global/styles/base.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":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 styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n if (keySet.includes(ev.key)) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n this.tabs = this.el.querySelectorAll('pds-tab');\n this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAa,giBACnB,MAAAC,EAAeD,E,MCUFE,EAAO,M,kKAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,CAGhB,eAAAG,GACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,CAGpC,cAAAE,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,CAGX,mBAAAK,GACN/B,KAAKK,KAAK2B,SAAQ,CAACP,EAAOC,KACxB,GAAI1B,KAAKI,gBAAkBqB,EAAMnB,KAAMN,KAAKG,eAAiBuB,EAC7D1B,KAAKwB,eAAeC,EAAOC,EAAM,IAGnC1B,KAAKuB,UAAUS,SAASP,IACtBzB,KAAKwB,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAIlC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAanC,KAAK6B,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACEpC,KAAKoB,iB,CAGP,mBAAAiB,GACErC,KAAK+B,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAA7B,IAAA,6DAAkBX,KAAKI,cAAeqC,MAAOzC,KAAKiC,aAAcS,GAAI1C,KAAKC,aAC5EsC,EAAA,OAAA5B,IAAA,2CAAK8B,MAAM,oBAAoBE,KAAK,UAAS,aAAa3C,KAAK4C,cAC7DL,EAAA,QAAA5B,IAAA,2CAAML,KAAK,UAEbiC,EAAA,QAAA5B,IAAA,2CAAML,KAAK,c","ignoreList":[]}

package/dist/pine-core/p-06f526e5.system.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{r(s.next(e))}catch(e){a(e)}}function d(e){try{r(s["throw"](e))}catch(e){a(e)}}function r(e){e.done?n(e.value):o(e.value).then(i,d)}r((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,o,a,i;return i={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function d(e){return function(t){return r([e,t])}}function r(d){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,d[0]&&(n=0)),n)try{if(s=1,o&&(a=d[0]&2?o["return"]:d[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,d[1])).done)return a;if(o=0,a)d=[d[0]&2,a.value];switch(d[0]){case 0:case 1:a=d;break;case 4:n.label++;return{value:d[1],done:false};case 5:n.label++;o=d[1];d=[0];continue;case 7:d=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(d[0]===6||d[0]===2)){n=0;continue}if(d[0]===3&&(!a||d[1]>a[0]&&d[1]<a[3])){n.label=d[1];break}if(d[0]===6&&n.label<a[1]){n.label=a[1];a=d;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(d);break}if(a[2])n.ops.pop();n.trys.pop();continue}d=t.call(e,n)}catch(e){d=[6,e];o=0}finally{s=a=0}if(d[0]&5)throw d[1];return{value:d[0]?d[1]:void 0,done:true}}};System.register(["./p-d20f4c1d.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,s,o;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,s([["p-20dae7d1.system",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-479fd128.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-b4fb6072.system",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-82a927d0.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-2837aec3.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-4262c8d0.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-967ab4b1.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b4f7b883.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-30895edd.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-f8c08ca7.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-94a76b90.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-b8cbff05.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-5dab0de3.system",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-64ec41b5.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-9071a673.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-7ed5ef61.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-7c029627.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-9229e03e.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-766e4212.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-4cfa45e5.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-41c843c5.system",[[1,"pds-table-body"]]],["p-6293581d.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-c644e0b4.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-a58de843.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-307b87fc.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-e8874481.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-2ed1ef67.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-e705a6ad.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-8233b878.system",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-ad7f960d.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],t)]}}))}))}))}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{d(s.next(e))}catch(e){a(e)}}function r(e){try{d(s["throw"](e))}catch(e){a(e)}}function d(e){e.done?n(e.value):o(e.value).then(i,r)}d((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,o,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(t){return d([e,t])}}function d(r){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(n=0)),n)try{if(s=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;o=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){n.label=r[1];break}if(r[0]===6&&n.label<a[1]){n.label=a[1];a=r;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(r);break}if(a[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(e){r=[6,e];o=0}finally{s=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-d20f4c1d.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,s,o;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,s([["p-61176372.system",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-42ec166f.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-a9769abf.system",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-bc40df83.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-569e79e5.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-4a2d1c1a.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-69f338ff.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b4f7b883.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-30895edd.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-0a559f32.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-6df39072.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-f2550a67.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-8a097891.system",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-2598d875.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-41141b0b.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-7ed5ef61.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-f682f33e.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-b844e85c.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-766e4212.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-62789a79.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-0fd90583.system",[[1,"pds-table-body"]]],["p-6293581d.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-8048be9c.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-fdb6c6ea.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-e6e198eb.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-e8874481.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-a05bfa39.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-739f9ac1.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-cf035857.system",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-b4852304.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],t)]}}))}))}))}}}));
 //# sourceMappingURL=p-06f526e5.system.js.map

package/dist/pine-core/p-0a559f32.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register(["./p-d20f4c1d.system.js"],(function(e){"use strict";var i,a,r;return{setters:[function(e){i=e.r;a=e.h;r=e.H}],execute:function(){var s=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var n=s;var t=":host{--color-background-default:var(--pine-color-grey-400);--spacing-offset-xxs:var(--pine-spacing-050);--spacing-offset-xs:var(--pine-spacing-100);--spacing-offset-sm:var(--pine-spacing-200);--spacing-offset-md:var(--pine-spacing-300);--spacing-offset-lg:var(--pine-spacing-450);--spacing-offset-xxl:var(--pine-spacing-800)}.pds-divider{background:var(--color-background-default);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--spacing-offset-xxs) -1);padding:0 var(--spacing-offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--spacing-offset-xxs) * -1) 0;padding:var(--spacing-offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--spacing-offset-xs) * -1);padding:0 var(--spacing-offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--spacing-offset-xs) * -1) 0;padding:var(--spacing-offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--spacing-offset-sm) * -1);padding:0 var(--spacing-offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--spacing-offset-sm) * -1) 0;padding:var(--spacing-offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--spacing-offset-md) * -1);padding:0 var(--spacing-offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--spacing-offset-md) * -1) 0;padding:var(--spacing-offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--spacing-offset-lg) * -1);padding:0 var(--spacing-offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--spacing-offset-lg) * -1) 0;padding:var(--spacing-offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--spacing-offset-xl) * -1);padding:0 var(--spacing-offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--spacing-offset-xl) * -1) 0;padding:var(--spacing-offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--spacing-offset-xxl) * -1);padding:0 var(--spacing-offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--spacing-offset-xxl) * -1) 0;padding:var(--spacing-offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";var d=t;var o=e("pds_divider",function(){function e(e){i(this,e);this.componentId=undefined;this.offset=undefined;this.vertical=false}e.prototype.classNames=function(){var e=["pds-divider"];if(this.vertical){e.push("pds-divider--vertical")}if(this.offset){var i="pds-divider--offset-"+this.offset;e.push(i)}return e.join(" ")};e.prototype.render=function(){return a(r,{key:"03b43edbf300af791cb86d11991507f1449981f7",id:this.componentId},a("hr",{key:"3385a8497632540187d3c5f16716032d37d5c036",class:this.classNames()}))};return e}());o.style=n+d}}}));
2	+ //# sourceMappingURL=p-0a559f32.system.entry.js.map

package/dist/pine-core/p-0a559f32.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsDividerStyle0","pdsDividerCss","PdsDividerStyle1","PdsDivider","exports","class_1","prototype","classNames","this","vertical","push","offset","offsetClassName","join","render","h","Host","key","id","componentId","class"],"sources":["src/global/styles/base.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --color-background-default: var(--pine-color-grey-400);\n --spacing-offset-xxs: var(--pine-spacing-050);\n --spacing-offset-xs: var(--pine-spacing-100);\n --spacing-offset-sm: var(--pine-spacing-200);\n --spacing-offset-md: var(--pine-spacing-300);\n --spacing-offset-lg: var(--pine-spacing-450);\n --spacing-offset-xxl: var(--pine-spacing-800);\n}\n\n$pds-divider-offsets: (\n xxs: var(--spacing-offset-xxs),\n xs: var(--spacing-offset-xs),\n sm: var(--spacing-offset-sm),\n md: var(--spacing-offset-md),\n lg: var(--spacing-offset-lg),\n xl: var(--spacing-offset-xl),\n xxl: var(--spacing-offset-xxl),\n);\n\n.pds-divider {\n background: var(--color-background-default);\n border: 0;\n display: flex;\n height: 1px;\n margin: 0;\n width: 100%;\n}\n\n.pds-divider--vertical {\n height: 100%;\n width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n .pds-divider--offset-#{$offset} {\n margin: 0 calc($value * -1);\n padding: 0 $value;\n\n &.pds-divider--vertical {\n margin: calc($value * -1) 0;\n padding: $value 0;\n }\n }\n}\n\n@media (max-width: 767px) {\n .pds-divider--vertical {\n display: none;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-divider',\n styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'],\n shadow: true,\n})\nexport class PdsDivider {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n */\n @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n /**\n * Sets divider to display vertically\n * @defaultValue false\n */\n @Prop() vertical = false;\n\n private classNames() {\n const classNames = ['pds-divider'];\n\n if (this.vertical) {\n classNames.push('pds-divider--vertical');\n }\n\n if (this.offset) {\n const offsetClassName = 'pds-divider--offset-' + this.offset;\n classNames.push(offsetClassName);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host id={this.componentId}>\n <hr class={this.classNames()} />\n </Host>\n );\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAgB,4oEACtB,IAAAC,EAAeD,E,ICMFE,EAAUC,EAAA,yB,uFAeF,K,CAEXC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,eAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,wB,CAGlB,GAAIF,KAAKG,OAAQ,CACf,IAAMC,EAAkB,uBAAyBJ,KAAKG,OACtDJ,EAAWG,KAAKE,E,CAGlB,OAAOL,EAAWM,KAAK,I,EAGzBR,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,GAAIV,KAAKW,aACbJ,EAAA,MAAAE,IAAA,2CAAIG,MAAOZ,KAAKD,e,WAnCD,I","ignoreList":[]}

package/dist/pine-core/p-0fd90583.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register(["./p-d20f4c1d.system.js"],(function(e){"use strict";var r,o,t;return{setters:[function(e){r=e.r;o=e.h;t=e.H}],execute:function(){var n=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var a=n;var i=":host{border-color:inherit;display:table-row-group;vertical-align:middle}";var h=i;var l=e("pds_table_body",function(){function e(e){r(this,e)}e.prototype.render=function(){return o(t,{key:"d47c7a779b96ea7ac9d7cf3b4cdf0973e7ee100c",role:"rowgroup"},o("slot",{key:"30136cb5047fea4bb9c205f50071d09cb2a83857"}))};return e}());l.style=a+h}}}));
2	+ //# sourceMappingURL=p-0fd90583.system.entry.js.map

package/dist/pine-core/p-0fd90583.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsTableBodyStyle0","pdsTableBodyCss","PdsTableBodyStyle1","PdsTableBody","exports","class_1","prototype","render","h","Host","key","role"],"sources":["src/global/styles/base.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAkB,4EACxB,IAAAC,EAAeD,E,ICMFE,EAAYC,EAAA,4B,wBAEvBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C,WALiB,I","ignoreList":[]}

package/dist/pine-core/p-20bdacf6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as i}from"./p-7e7de1d6.js";import{l as n}from"./p-373bf876.js";const t=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const o=t;const r=":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-text-default:var(--pine-color-grey-900);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-085);--font-size-xs:var(--pine-font-size-085);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";const s=r;const a=class{constructor(i){e(this,i);this.componentId=undefined;this.external=false;this.variant="inline";this.fontSize="lg";this.href=undefined}classNames(){const e=["pds-link"];if(this.fontSize){e.push("pds-link--"+this.fontSize)}if(this.variant){e.push("pds-link--"+this.variant)}return e.join(" ")}render(){return i("a",{key:"48d18c76dabdf7848cb28406ca41bcb319046f15",class:this.classNames(),href:this.href,id:this.componentId,target:this.external?"_blank":undefined,part:"link"},i("slot",{key:"d1300abecf3a94cbeb0dd0203e0938496499750b"},this.href),this.external&&i("pds-icon",{key:"353ee581e0060669910e0e9220f3e85d2c46e41b",icon:n,size:this.fontSize}))}};a.style=o+s;export{a as pds_link};
2	+ //# sourceMappingURL=p-20bdacf6.entry.js.map

package/dist/pine-core/p-20bdacf6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsLinkStyle0","pdsLinkCss","PdsLinkStyle1","PdsLink","classNames","this","fontSize","push","variant","join","render","h","key","class","href","id","componentId","target","external","undefined","part","icon","launch","size"],"sources":["src/global/styles/base.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n\n --border-outline: 4px solid var(--pine-color-blue-200);\n --border-radius: var(--pine-border-radius-075);\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n --color-text-default: var(--pine-color-grey-900);\n\n --font-size: var(--pine-font-size-100);\n --font-size-sm: var(--pine-font-size-085);\n --font-size-xs: var(--pine-font-size-085);\n --font-weight: var(--pine-font-weight-medium);\n\n --spacing-inline-start-margin: var(--pine-spacing-050);\n --sizing-svg-lg: 15px;\n --sizing-svg-md: 13px;\n --sizing-svg-sm: 11px;\n\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--spacing-inline-start-margin);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--color-text);\n display: inline-flex;\n font-weight: inherit;\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n position: relative;\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--font-size-xs);\n\n pds-icon {\n height: var(--sizing-svg-sm);\n width: var(--sizing-svg-sm);\n }\n}\n\n.pds-link--md {\n font-size: var(--font-size-sm);\n\n pds-icon {\n height: var(--sizing-svg-md);\n width: var(--sizing-svg-md);\n }\n}\n\n.pds-link--lg {\n font-size: var(--font-size);\n\n pds-icon {\n height: var(--sizing-svg-lg);\n width: var(--sizing-svg-lg);\n }\n}\n\n.pds-link--plain {\n font-weight: var(--font-weight);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n// Default = inline link\n.pds-link--default {\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n tag: 'pds-link',\n styleUrls: ['../../global/styles/base.scss', 'pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * When enabled, opens link in a new tab.\n * @defaultValue false\n */\n @Prop() external = false;\n\n /**\n *\n * Modifies the look of the link\n */\n @Prop() variant: 'inline' | 'plain' = 'inline';\n\n /**\n *\n * The Font size follows t-shirt model\n * sm: 12px\n * md: 14px\n * lg: 16px\n * @defaultValue lg\n */\n @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n /**\n * The URL that the hyperlink points to.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n target={this.external ? '_blank' : undefined}\n part=\"link\"\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAa,g+CACnB,MAAAC,EAAeD,E,MCYFE,EAAO,M,kEAUC,M,aAMmB,S,cAUC,K,oBAO/B,UAAAC,GACN,MAAMA,EAAa,CAAC,YAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,aAAeF,KAAKC,S,CAGtC,GAAID,KAAKG,QAAS,CAChBJ,EAAWG,KAAK,aAAeF,KAAKG,Q,CAGtC,OAAOJ,EAAWK,KAAK,I,CAGzB,MAAAC,GAEE,OACEC,EAAA,KAAAC,IAAA,2CACEC,MAAOR,KAAKD,aACZU,KAAMT,KAAKS,KACXC,GAAIV,KAAKW,YACTC,OAAQZ,KAAKa,SAAW,SAAWC,UACnCC,KAAK,QAELT,EAAA,QAAAC,IAAA,4CAAOP,KAAKS,MACXT,KAAKa,UACJP,EAAA,YAAAC,IAAA,2CAAUS,KAAMC,EAAQC,KAAMlB,KAAKC,W","ignoreList":[]}

package/dist/pine-core/p-2258e023.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as r,h as o,H as i,g as a}from"./p-7e7de1d6.js";import{i as t,P as l,a as s,m as n}from"./p-7bc0b531.js";const d=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const h=d;const c=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color:var(--pine-color-grey-900);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-grey-700);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-grey-700);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:1px solid var(--color-border-default);border-radius:var(--pine-border-radius-100);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";const p=c;const f=class{constructor(o){e(this,o);this.pdsTextareaChange=r(this,"pdsTextareaChange",7);this.onTextareaChange=e=>{const r=e.target;t(r,this);if(r){this.value=r.innerHTML}this.pdsTextareaChange.emit({value:this.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}textareaClassNames(){const e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")}render(){return o(i,{key:"178de49f01c711145054009b42828b846b7670b9","aria-disabled":this.disabled?"true":null},o("div",{key:"b62cfd1551b4923990b2b806a9ad07755b82a2a4",class:"pds-textarea"},this.label&&o(l,{key:"3a5990ac49ad3367d3f59dd8ff6e986920ccccc5",htmlFor:this.componentId,text:this.label}),o("textarea",{key:"e27ff5eb4350be9a1c2351ccda578588241e85d7","aria-describedby":s(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&o("p",{key:"71e4839681208e2a11e79d0a9e3d1542da566dcf",class:"pds-textarea__helper-message",id:n(this.componentId,"helper")},this.helperMessage),this.invalid&&o("p",{key:"64de96c3dcf76d0e1d888f9e88f4bec66138010d","aria-live":"assertive",class:"pds-textarea__error-message",id:n(this.componentId,"error")},this.errorMessage)))}get el(){return a(this)}};f.style=h+p;export{f as pds_textarea};
2	+ //# sourceMappingURL=p-2258e023.entry.js.map

package/dist/pine-core/p-2258e023.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsTextareaStyle0","pdsTextareaCss","PdsTextareaStyle1","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","value","innerHTML","pdsTextareaChange","emit","event","componentId","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n --color: var(--pine-color-grey-900);\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-default: var(--pine-color-grey-400);\n --color-border-error: var(--pine-color-red-300);\n --color-border-focus-visible: var(--pine-color-grey-300);\n --color-border-hover: var(--pine-color-grey-500);\n --color-disabled-default: var(--pine-color-grey-700);\n --color-error-default: var(--pine-color-red-300);\n --color-focus-visible-outline: var(--pine-color-purple-300);\n --color-focus-visible-outline-error: var(--pine-color-red-200);\n --color-placeholder-default: var(--pine-color-grey-700);\n\n --font-size-field: var(--pine-font-size-100);\n --font-size-helper-message: var(--pine-font-size-100);\n --font-size-label: var(--pine-font-size-100);\n --font-weight-field: var(--pine-font-weight-normal);\n --font-weight-helper-message: var(--pine-font-weight-normal);\n --font-weight-label: var(--pine-font-weight-medium);\n\n --line-height-field: var(--pine-line-height-150);\n --line-height-helper-message: var(--pine-line-height-125);\n --line-height-label: var(--pine-line-height-150);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--font-size-label);\n font-weight: var(--font-weight-label);\n line-height: var(--line-height-label);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background);\n border: 1px solid var(--color-border-default);\n border-radius: var(--pine-border-radius-100);\n font-family: inherit;\n font-size: var(--font-size-field);\n font-weight: var(--font-weight-field);\n line-height: var(--line-height-field);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--color-border-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-disabled-default);\n cursor: not-allowed;\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 &::placeholder {\n color: var(--color-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--font-size-helper-message);\n font-weight: var(--font-weight-helper-message);\n line-height: var(--line-height-helper-message);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the textarea is disabled\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Specifies the error text and provides an error-themed treatment to the field\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a hint or description of the textarea\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the textarea is readonly\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Indicates whether or not the textarea is required\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea\n */\n @Prop() rows?: number;\n\n /**\n * The value of the textarea\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yHAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAiB,6jHACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,8EAwEdC,KAAAC,iBAAoBC,IAC1B,MAAMC,EAAWD,EAAGE,OACpBC,EAAWF,EAAUH,MAErB,GAAIG,EAAU,CACZH,KAAKM,MAAQH,EAASI,S,CAGxBP,KAAKQ,kBAAkBC,KAAK,CAACH,MAAON,KAAKM,MAAOI,MAAOR,GAAI,E,yCApE1C,M,sEAgBc,M,+BAUVF,KAAKW,Y,yCAWT,M,cAMA,M,yCA4BX,kBAAAC,GACN,MAAMC,EAAa,CAAC,uBAEpB,GAAIb,KAAKc,SAAWd,KAAKc,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYpB,KAAKqB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRtB,KAAKuB,OACJL,EAACM,EAAQ,CAAAJ,IAAA,2CAACK,QAASzB,KAAKW,YAAae,KAAM1B,KAAKuB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,EAAkB3B,KAAKW,YAAaX,KAAKc,QAASd,KAAK4B,eAAc,eACzE5B,KAAKc,QAAU,OAASe,UACtCP,MAAOtB,KAAKY,qBACZS,SAAUrB,KAAKqB,SACfS,GAAI9B,KAAKW,YACToB,KAAM/B,KAAK+B,KACXC,YAAahC,KAAKgC,YAClBC,SAAUjC,KAAKkC,SACfC,SAAUnC,KAAKmC,SACfC,KAAMpC,KAAKoC,KACXC,SAAUrC,KAAKC,kBACfD,KAAKM,OACNN,KAAK4B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,WAE/BX,KAAK4B,eAGT5B,KAAKc,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,UAE/BX,KAAKuC,e","ignoreList":[]}

package/dist/pine-core/p-2598d875.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register(["./p-d20f4c1d.system.js"],(function(e){"use strict";var r,i,o;return{setters:[function(e){r=e.r;i=e.h;o=e.H}],execute:function(){var a=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var s=a;var t=":host{--color-progress-fill:var(--pine-color-blue-300);--sizing-progress-bar-height:8px;--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{--border-radius:var(--pine-border-radius-050);--color-progress-bar-background:var(--pine-color-grey-300);-ms-flex-align:center;align-items:center;background-color:var(--color-progress-bar-background);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--sizing-progress-bar-height);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--sizing-progress-bar-height);width:100%}progress::-webkit-progress-value{--border-radius:var(--pine-border-radius-050);--color-background:var(--pine-color-blue-300);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}progress::-moz-progress-bar{--color-background:var(--pine-color-blue-300);--border-radius:var(--pine-border-radius-050);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-085);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-150);--spacing-inline-start-margin:var(--pine-spacing-300);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--spacing-inline-start-margin) / 2);margin-inline-start:calc(var(--spacing-inline-start-margin) / 2)}";var n=t;var l=e("pds_progress",function(){function e(e){r(this,e);this.animated=false;this.componentId=undefined;this.fillColor=undefined;this.label=undefined;this.percent=0;this.showPercent=false}e.prototype.render=function(){return i(o,{key:"abd4f8e7972ff974b671831e38ae821a01bbc519",class:this.animated?{"is-animated":this.animated}:""},i("div",{key:"b6afe1b42ccf8f346c88648276d1e991fe41fd91",class:"pds-progress"},i("label",{key:"676f91cdc74a861005cc7a25f811d51212641ee1",class:"pds-progress__label",htmlFor:this.componentId},this.label),i("progress",{key:"5f0154648ba27c6d83bd9fd3d7c3b59597665b1c",id:this.componentId,max:"100",style:this.fillColor?{"--color-progress-fill":this.fillColor}:{},value:this.percent})),this.showPercent&&i("div",{key:"a538abd09affcb043a215c2ca504a9cbbe500332",class:"pds-progress__percentage"},this.percent,"%"))};return e}());l.style=s+n}}}));
2	+ //# sourceMappingURL=p-2598d875.system.entry.js.map

package/dist/pine-core/p-2598d875.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["baseCss","PdsProgressStyle0","pdsProgressCss","PdsProgressStyle1","PdsProgress","exports","class_1","prototype","render","h","Host","key","class","this","animated","htmlFor","componentId","label","id","max","style","fillColor","value","percent","showPercent"],"sources":["src/global/styles/base.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --color-progress-fill: var(--pine-color-blue-300);\n\n --sizing-progress-bar-height: 8px;\n --sizing-progress-bar-width: 100%;\n\n align-items: center;\n display: flex;\n width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: var(--sizing-progress-bar-width);\n }\n}\n\n.pds-progress {\n --border-radius: var(--pine-border-radius-050);\n --color-progress-bar-background: var(--pine-color-grey-300);\n\n align-items: center;\n background-color: var(--color-progress-bar-background);\n border-radius: var(--border-radius);\n display: flex;\n flex-direction: row;\n height: var(--sizing-progress-bar-height);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--sizing-progress-bar-height);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n --border-radius: var(--pine-border-radius-050);\n --color-background: var(--pine-color-blue-300);\n\n background-color: var(--color-progress-fill, var(--color-background));\n border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n --color-background: var(--pine-color-blue-300);\n --border-radius: var(--pine-border-radius-050);\n\n background-color: var(--color-progress-fill, var(--color-background));\n border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n --font-size: var(--pine-font-size-085);\n --font-weight: var(--pine-font-weight-medium);\n --line-height: var(--pine-line-height-150);\n --spacing-inline-start-margin: var(--pine-spacing-300);\n\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrls: ['../../global/styles/base.scss', 'pds-progress.scss'],\n shadow: true,\n})\nexport class PdsProgress {\n /**\n * Determines whether or not progress is animated.\n * @defaultValue false\n */\n @Prop() animated = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pine-color-blue-300)'\n */\n @Prop() fillColor: string;\n\n /**\n * String used for label text. Label is visually hidden but required for better accessibility.\n */\n @Prop() label!: string;\n\n /**\n * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n */\n @Prop() percent = 0;\n\n /**\n * Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"mappings":"kJAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAiB,imEACvB,IAAAC,EAAeD,E,ICMFE,EAAWC,EAAA,0B,sCAKH,M,sFAsBD,E,iBAMI,K,CAEtBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOC,KAAKC,SAAW,CAAE,cAAeD,KAAKC,UAAa,IAC9DL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,sBAAsBG,QAASF,KAAKG,aAC9CH,KAAKI,OAERR,EAAA,YAAAE,IAAA,2CACEO,GAAIL,KAAKG,YACTG,IAAI,MACJC,MAAOP,KAAKQ,UAAY,CAAE,wBAAyBR,KAAKQ,WAAc,GACtEC,MAAOT,KAAKU,WAIfV,KAAKW,aAAef,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BAA4BC,KAAKU,QAAO,K,WAlDxD,I","ignoreList":[]}

package/dist/pine-core/p-35d6c787.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as o,H as e,g as a}from"./p-7e7de1d6.js";import{b as t}from"./p-373bf876.js";const n=r=>!!r.shadowRoot&&!!r.attachShadow;const i=':where(:not(slot),:not(slot)::before,:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const d=i;const c=":host{--border-radius-default:var(--pine-border-radius-round);--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-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--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-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-150);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--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-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);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{color:currentColor;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 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-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--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const l=c;const s=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(n(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")}render(){return o(e,{key:"4c63b9a386ed3d9d9f3516648ec26c3823ac6fa6","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"50cdc14ea87c350f2e173fb38006021bfe0b78d7",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"94e7c0b1b6b8223b78afe5b61a6073b907afc6e1",name:this.icon,part:"icon"}),o("slot",{key:"736b97d814d34eb8a01ddd22ade8d9ee5a35de82"}),this.variant==="disclosure"&&o("pds-icon",{key:"f7bea88482de7bfaf23c74e71d9748a403df6a76",icon:t,part:"caret"})))}get el(){return a(this)}};s.style=d+l;export{s as pds_button};
2	+ //# sourceMappingURL=p-35d6c787.entry.js.map