npm - @pine-ds/core - Versions diffs - 0.2.3 → 1.0.0 - Mend

@pine-ds/core 0.2.3 → 1.0.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 (572) hide show

package/dist/cjs/pds-textarea.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9b7c547c.js');
-const pdsLabel = require('./pds-label-b30f3c13.js');
+const index = require('./index-7d9c71f6.js');
+const pdsLabel = require('./pds-label-5ebae56e.js');
-const pdsTextareaCss = ":host{--background-color:#fff;--background-color-disabled:var(--pine-color-neutral-grey-200);--color:var(--pine-color-neutral-charcoal-400);--color-error:var(--pine-color-red-300);--color-placeholder:var(--pine-color-neutral-charcoal-200);--color-disabled:var(--pine-color-neutral-charcoal-200);--border-color-default:var(--pine-color-neutral-grey-400);--border-color-hover:var(--pine-color-neutral-grey-500);--border-color-focus-visible:var(--pine-color-neutral-grey-300);--border-color-error:var(--pine-color-red-300);--focus-visible-outline-color:var(--pine-color-primary-200);--focus-visible-outline-color-error:var(--pine-color-red-200);--label-font-size:var(--pine-font-size-body);--label-font-weight:var(--pine-font-weight-medium);--label-line-height:var(--pine-line-height-md);--label-margin-block-end:var(--pine-spacing-xs);--field-font-size:var(--pine-font-size-body);--field-font-weight:var(--pine-font-weight-regular);--field-line-height:var(--pine-line-height-md);--field-padding-block:var(--pine-spacing-xs);--field-padding-inline:var(--pine-spacing-sm);--helper-message-font-size:var(--pine-font-size-body-xs);--helper-message-font-weight:var(--pine-font-weight-regular);--helper-message-line-height:var(--pine-line-height-sm);--helper-message-margin-block-start:var(--pine-spacing-xs);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);-webkit-margin-after:var(--label-margin-block-end);margin-block-end:var(--label-margin-block-end)}.pds-textarea__field{background-color:var(--background-color);border:var(--pine-border-interactive);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--field-font-size);font-weight:var(--field-font-weight);line-height:var(--field-line-height);padding:var(--field-padding-block) var(--field-padding-inline)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--border-color-hover)}.pds-textarea__field:disabled{background-color:var(--background-color-disabled);color:var(--color-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{border-color:var(--border-color-focus-visible);outline:4px solid var(--focus-visible-outline-color)}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder)}.pds-textarea__field::placeholder{color:var(--color-placeholder)}.pds-textarea__field.is-invalid{border-color:var(--color-error);outline-color:var(--focus-visible-outline-color-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--helper-message-font-size);font-weight:var(--helper-message-font-weight);line-height:var(--helper-message-line-height);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--helper-message-margin-block-start);margin-block-start:var(--helper-message-margin-block-start)}.pds-textarea__error-message{color:var(--color-error)}";
+const pdsTextareaCss = ":host{--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--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-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-primary-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--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:var(--pine-border-interactive);border-radius:var(--pine-border-radius-md);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 PdsTextareaStyle0 = pdsTextareaCss;
 const PdsTextarea = class {
@@ -41,10 +41,10 @@ const PdsTextarea = class {
         return classNames.join('  ');
     }
     render() {
-        return (index.h(index.Host, { key: '741dcb258f9992f943e898b4f8ac569046f40a73', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'cb678d3e24cec028b7220b4d087e82ce24e26205', class: "pds-textarea" }, this.label &&
-            index.h(pdsLabel.PdsLabel, { htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '667cec0eb152e45a01f87ca64865c816afe5b67b', "aria-describedby": pdsLabel.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 &&
-            index.h("p", { class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            index.h("p", { "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
+        return (index.h(index.Host, { key: 'a6f6eb13665857ec8762d454d79ff216e2062a66', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'fa77f9c7c29f214ee4d8ddb8e1e48d4d16b6a47e', class: "pds-textarea" }, this.label &&
+            index.h(pdsLabel.PdsLabel, { key: '75c242138f5c2a33a82feaa775dae0c05843d2c1', htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '8bebb57b878c745e07ebfc18afd2aaf7d2da66a5', "aria-describedby": pdsLabel.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 &&
+            index.h("p", { key: 'b9a83aeb83b0cf4232359154d36a8ec48b0a3638', class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            index.h("p", { key: 'ee70c7aa56b8a8e18de58394c04140065670f8db', "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"pds-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,~~opGAAopG,~~CAAC;~~AAC5qG~~,0BAAe,cAAc;;MCShB,WAAW;;;;QAwEd,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClDA,mBAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;aACjC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACTA,QAACE,iBAAQ,~~IAAC~~,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3DF,2FACoBG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjBH,~~eACE~~,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACXJ,~~4BACY~~,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAEvC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;","names":["isRequired","h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --~~background~~-~~color~~: ~~#fff~~;\n --~~background~~-~~color~~-~~disabled~~: var(--~~pine-~~color-~~neutral~~-~~grey~~-~~200~~);\n\n --color: var(--pine-color-~~neutral-~~charcoal-400);\n --color-~~error~~: var(--pine-color-~~red-300~~);\n --color-~~placeholder~~: var(--pine-color-~~neutral~~-~~charcoal-~~200);\n --color-~~disabled~~: var(--pine-color-~~neutral~~-~~charcoal-200~~);\n\n --border-color-~~default~~: var(--pine-color-~~neutral-~~grey-~~400~~);\n --border-~~color-~~hover: var(--pine-color-~~neutral-~~grey-500);\n --~~border-~~color-~~focus~~-~~visible~~: var(--pine-color-~~neutral~~-~~grey-300~~);\n --~~border-~~color-error: var(--pine-color-red-300);\n\n --focus-visible-outline~~-color~~: var(--pine-color-primary-200);\n --focus-visible-outline-~~color-~~error: var(--pine-color-red-200);\n\n --~~label-~~font-size: var(--pine-font-size-~~body~~);\n --~~label-~~font-~~weight~~: var(--pine-font-~~weight~~-~~medium~~);\n --~~label~~-~~line~~-~~height~~: var(--pine-~~line~~-~~height~~-md);\n --~~label~~-~~margin~~-~~block-end~~: var(--pine-~~spacing~~-xs);\n\n --~~field-~~font-~~size~~: var(--pine-font-~~size~~-~~body~~);\n --~~field-~~font-weight: var(--pine-font-weight-~~regular~~);\n --~~field-~~line-height: var(--pine-line-height-md);\n --~~field~~-~~padding~~-~~block~~: var(--pine-~~spacing~~-xs);\n --~~field~~-~~padding~~-~~inline~~: var(--pine-~~spacing~~-sm);\n\n --~~helper~~-~~message~~-~~font~~-~~size~~: var(--pine-~~font~~-~~size-body-xs~~);\n --helper-message~~-font-weight~~: var(--pine-~~font~~-~~weight-regular~~);\n --~~helper~~-~~message~~-~~line~~-~~height~~: var(--pine-~~line~~-~~height-sm~~);\n --~~helper~~-~~message~~-~~margin~~-~~block-start~~: var(--pine-spacing-xs);\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(--~~label-~~font-size);\n font-weight: var(--~~label-~~font-weight);\n line-height: var(--~~label-~~line-height);\n margin-block-end: var(--~~label~~-margin-block-end);\n}\n\n.pds-textarea__field {\n background-color: var(--background~~-color~~);\n border: var(--pine-border-interactive);\n border-radius: var(--pine-border-radius-md);\n font-family: inherit;\n font-size: var(--~~field-~~font-size);\n font-weight: var(--~~field-~~font-weight);\n line-height: var(--~~field-~~line-height);\n padding: var(--~~field~~-padding-block) var(--~~field~~-padding-inline);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--border-~~color-~~hover);\n }\n\n &:disabled {\n background-color: var(--background-~~color-~~disabled);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n ~~border-color~~: var(--border-~~color-~~focus~~-visible~~);\n ~~outline~~: ~~4px solid~~ var(--~~focus~~-~~visible~~-outline~~-color)~~;\n }\n\n &::placeholder {\n color: var(--color-placeholder);\n }\n\n &.is-invalid {\n border-color: var(--color-error);\n ~~outline~~-~~color~~: var(--~~focus~~-~~visible~~-~~outline~~-~~color-~~error);\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--helper-message~~-font-size~~);\n font-weight: var(--helper-message~~-font-weight~~);\n line-height: var(--~~helper-message-~~line-height~~);\n margin~~-~~block~~-~~end: 0~~;\n margin-block-start: var(--~~helper~~-~~message-~~margin-block-start);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error);\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"],"version":3}
1	+ {"file":"pds-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,+7GAA+7G,CAAC;AACv9G,0BAAe,cAAc;;MCShB,WAAW;;;;QAwEd,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClDA,mBAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;aACjC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACTA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3DF,2FACoBG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACXJ,6EACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAEvC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;","names":["isRequired","h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n --color: var(--pine-color-charcoal-400);\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-charcoal-200);\n --color-error-default: var(--pine-color-red-300);\n --color-focus-visible-outline: var(--pine-color-primary-200);\n --color-focus-visible-outline-error: var(--pine-color-red-200);\n --color-placeholder-default: var(--pine-color-charcoal-200);\n\n --font-size-field: var(--pine-font-size-100);\n --font-size-helper-message: var(--pine-font-size-075);\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: var(--pine-border-interactive);\n border-radius: var(--pine-border-radius-md);\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"],"version":3}

package/dist/cjs/pds-tooltip.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9b7c547c.js');
+const index = require('./index-7d9c71f6.js');
 const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
     if (elem == undefined)
@@ -72,7 +72,7 @@ const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
     }
 };
-const pdsTooltipCss = ":host{--background-color:var(--pine-color-neutral-charcoal-400);--box-shadow:var(--pine-box-shadow-md);--color:var(--pine-color-base-white);--width:320px;--arrow-size:6px;--arrow-offset:14px;--overlay-border-radius:var(--pine-border-radius-md);--overlay-font-size:var(--pine-font-size-body-sm);--overlay-line-height:var(--pine-line-height-sm);--overlay-padding:var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);--arrow-pointing-down:var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-to-the-right:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);--arrow-pointing-to-the-left:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-up:0 var(--arrow-size) var(--arrow-size);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--width)}.pds-tooltip__content{background-color:var(--background-color);border-radius:var(--overlay-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--overlay-font-size);line-height:var(--overlay-line-height);opacity:0;padding:var(--overlay-padding);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(--arrow-pointing-to-the-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);bottom:var(--arrow-offset);left:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -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(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:var(--arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:initial;right:var(--arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);bottom:var(--arrow-offset);left:initial;right:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:50%;top:calc(var(--arrow-size) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:initial;right:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
+const 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-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--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([slot=content]){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}";
 const PdsTooltipStyle0 = pdsTooltipCss;
 const PdsTooltip = class {
@@ -132,13 +132,13 @@ const PdsTooltip = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: '234af23d5c082cbaf02c3f4026d094e19514520e', class: `
+        return (index.h(index.Host, { key: '088766be31b8716e158cbffd4afc4ada0f14dc3d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: 'c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, index.h("span", { key: '8636e6ec54ca42b7a96683b2a97f26ee4994ce75', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '915856a37e16dd9a5d19afec7111d90f3a1e1d0d' })), index.h("div", { key: '0e50c1c3559cfc529da2fc67a8b248e63ad8f75b', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, index.h("slot", { key: 'dafafd2a343b10ed140eb5bd325d3b17a3dc062a', name: "content" }), this.content))));
+          ` }, index.h("span", { key: '25a69f567a33df83ff784d36de5bce86874d6d1d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: 'eab3bbca9b913b04ef4dfe7a8e472c43d57c4979' })), index.h("div", { key: 'bdaa9f26f848b440a8432a44481f8a1059ae0689', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, index.h("slot", { key: '0e62fe237e9a39208aa2146e2dc1d6df6b25b41d', name: "content" }), this.content))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

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

package/dist/cjs/pine-core.cjs.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9b7c547c.js');
+const index = require('./index-7d9c71f6.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 /*
- Stencil Client Patch Browser v4.13.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pine-core.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ const patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head.cjs",[[1,"pds-table-head"]]],["pds-table-row.cjs",[[1,"pds-table-row",{"isSelected":[32]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"handle":[4]}]]],["pds-box.cjs",[[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"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[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]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[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]}]]],["pds-row.cjs",[[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"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-switch.cjs",[[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]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[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"]]]]],["pds-textarea.cjs",[[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]}]]],["pds-tooltip.cjs",[[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"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32]}]]],["pds-checkbox_2.cjs",[[1,"pds-checkbox",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[4],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]}],[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]]], options);
+  return index.bootstrapLazy([["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head.cjs",[[1,"pds-table-head"]]],["pds-table-row.cjs",[[1,"pds-table-row",{"isSelected":[32]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-box.cjs",[[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"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[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]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[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]}]]],["pds-row.cjs",[[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"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-switch.cjs",[[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]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[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"]]]]],["pds-textarea.cjs",[[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]}]]],["pds-tooltip.cjs",[[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"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32]}]]],["pds-checkbox_2.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[4],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]}],[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/pine-core.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pine-core.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,2MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.13.0 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})['data-opts'] \|\| {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}
1	+ {"file":"pine-core.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,2MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.15.0 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})['data-opts'] \|\| {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -31,8 +31,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.13.0",
-    "typescriptVersion": "5.4.2"
+    "version": "4.15.0",
+    "typescriptVersion": "5.4.4"
   },
   "collections": [
     {

package/dist/collection/components/pds-accordion/pds-accordion.css CHANGED Viewed

@@ -4,19 +4,19 @@
 details {
   --animation-transform-timing: 200ms;
-  --border-radius: var(--pine-spacing-xs);
-  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
-  --color-content-background: var(--pine-base-color-white);
-  --color-background-hover: var(--pine-color-neutral-grey-300);
-  --color-font: var(--pine-color-neutral-charcoal-200);
-  --color-font-active: var(--pine-color-neutral-charcoal-500);
-  --color-font-hover: var(--pine-color-neutral-charcoal-300);
-  --font-weight: var(--pine-font-weight-semibold);
-  --spacing-details-padding-inline: 12px;
-  --spacing-summary-padding-block: var(--pine-spacing-xxs);
-  --spacing-summary-padding-inline-start: var(--pine-spacing-xs);
-  --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);
-  border-radius: var(--border-radius);
+  --border-radius-default: var(--pine-border-radius-100);
+  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
+  --color-content-background-default: var(--pine-color-white);
+  --color-background-hover: var(--pine-color-grey-300);
+  --color-text-default: var(--pine-color-charcoal-200);
+  --color-text-active: var(--pine-color-charcoal-500);
+  --color-text-hover: var(--pine-color-charcoal-300);
+  --spacing-details-padding-inline: var(--pine-spacing-150);
+  --spacing-summary-padding-block: var(--pine-spacing-050);
+  --spacing-summary-padding-inline-start: var(--pine-spacing-100);
+  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
+  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  border-radius: var(--border-radius-default);
   padding-inline: var(--spacing-details-padding-inline);
 }
 details pds-icon {
@@ -24,6 +24,19 @@ details pds-icon {
   transition: transform var(--animation-transform-timing);
 }
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  65% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
 /* stylelint-disable-next-line */
 details[open] {
   background-color: var(--color-content-background);
@@ -31,8 +44,8 @@ details[open] {
   /* stylelint-disable-next-line selector-no-qualifying-type */
 }
 details[open] summary {
-  color: var(--color-font-active);
-  font-weight: var(--font-weight);
+  color: var(--color-text-active);
+  font: var(--typography-default);
 }
 details[open] summary pds-icon {
   transform: scaleY(-1);
@@ -47,9 +60,9 @@ details[open] .pds-accordion__body.open {
 }
 summary {
-  border-radius: var(--border-radius);
-  color: var(--color-font);
-  font-weight: var(--font-weight);
+  border-radius: var(--border-radius-default);
+  color: var(--color-text-default);
+  font: var(--typography-default);
   padding-block: var(--spacing-summary-padding-block);
   padding-inline-end: var(--spacing-summary-padding-inline-end);
   padding-inline-start: var(--spacing-summary-padding-inline-start);
@@ -62,7 +75,7 @@ summary::-webkit-details-marker {
 }
 summary:hover {
   background: var(--color-background-hover);
-  color: var(--color-font-hover);
+  color: var(--color-text-hover);
   cursor: pointer;
 }
 summary:focus-visible {
@@ -74,6 +87,7 @@ summary pds-icon {
 }
 .pds-accordion__body {
+  animation: slide-down var(--animation-transform-timing);
   max-height: 0;
   overflow: hidden;
 }

package/dist/collection/components/pds-avatar/pds-avatar.css CHANGED Viewed

@@ -3,20 +3,23 @@
 }
 div {
-  --background-color: var(--pine-color-primary-100);
-  --badge-background-color: var(--pine-color-base-white);
-  --border: var(--pine-border-default);
-  --radius-round: 50%;
+  --color-background-container: var(--pine-color-blue-100);
+  --color-background-badge: var(--pine-color-white);
+  --color-border-badge: var(--pine-color-white);
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  --border-radius-round: var(--pine-border-radius-round);
+  --border-radius-none: var(--pine-border-radius-0);
+  --spacing-none: var(--pine-spacing-0);
   align-items: center;
-  background-color: var(--background-color);
-  border-radius: var(--admin-radius-round, var(--radius-round));
+  background-color: var(--color-background-container);
+  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
   display: inline-flex;
   justify-content: center;
   position: relative;
 }
 :host(.pds-avatar--admin) div {
-  --admin-radius-round: 12px;
-  border-radius: var(--admin-radius-round);
+  --border-radius-admin-round: var(--pine-spacing-150);
+  border-radius: var(--border-radius-admin-round);
 }
 :host(.pds-avatar--has-image) div {
   background: transparent;
@@ -28,15 +31,16 @@ div {
 }
 .pds-avatar__button {
-  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);
+  --border-radius-round: var(--pine-border-radius-round);
   align-items: center;
   appearance: none;
   background: transparent;
-  border: 0;
-  border-radius: var(--radius-round);
+  border: var(--border-radius-none);
+  border-radius: var(--border-radius-round);
   cursor: pointer;
   display: flex;
-  padding: 0;
+  padding: var(--spacing-none);
 }
 .pds-avatar__button:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -44,17 +48,17 @@ div {
 }
 .pds-avatar__badge {
-  background-color: var(--badge-background-color);
-  border: var(--border);
-  border-color: var(--badge-background-color);
-  border-radius: var(--radius-round);
-  bottom: 0;
+  background-color: var(--color-background-badge);
+  border: var(--border-default);
+  border-color: var(--color-border-badge);
+  border-radius: var(--border-radius-round);
+  bottom: var(--spacing-none);
   position: absolute;
-  right: 0;
+  right: var(--spacing-none);
 }
 img {
-  border-radius: var(--admin-radius-round, var(--radius-round));
+  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
   height: 100%;
   object-fit: cover;
   width: 100%;