@pine-ds/core 0.1.5 → 0.2.1

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
-const pdsLabel = require('./pds-label-c988430d.js');
+const index = require('./index-9b7c547c.js');
+const pdsLabel = require('./pds-label-b30f3c13.js');
 
 const pdsSwitchCss = ":host{--background-color:var(--pine-color-neutral-grey-400);--background-color-checked:var(--pine-color-neutral-charcoal-400);--background-color-checked-hover:var(--pine-color-neutral-charcoal-400);--background-color-disabled:var(--pine-color-neutral-grey-300);--background-color-hover:var(--pine-color-neutral-grey-500);--input-border-radius:var(--pine-border-radius-lg);--input-height:20px;--input-width:36px;--input-toggle-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--input-toggle-color:var(--pine-color-base-white);--input-toggle-offset:2px;--input-toggle-size:calc(var(--input-height) - (var(--input-toggle-offset) * 2));--label-gap-size:12px;--label-line-height:var(--pine-line-height-md);--message-spacing-block:var(--pine-spacing-xxs);--message-spacing-inline:calc(var(--input-width) + var(--label-gap-size));--message-text-color:var(--pine-color-neutral-charcoal-200);--outline-color-focus:var(--pine-color-primary-200);--outline-color-focus-error:var(--pine-color-red-200);--text-color-default:var(--pine-color-neutral-charcoal-400);--text-color-disabled:var(--pine-color-neutral-grey-500);--text-color-error:var(--pine-color-red-300);--transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--text-color-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--text-color-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--text-color-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:0 0 0 4px var(--outline-color-focus-error);box-shadow:0 0 0 4px var(--outline-color-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background-color);border:0;border-radius:var(--input-border-radius);cursor:pointer;display:inline-block;height:var(--input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--transition-timing);transition:var(--transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--input-width)}input::after{background:var(--input-toggle-color);border-radius:50%;-webkit-box-shadow:var(--input-toggle-box-shadow);box-shadow:var(--input-toggle-box-shadow);content:\"\";display:block;height:var(--input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--transition-timing);transition:-webkit-transform var(--transition-timing);transition:transform var(--transition-timing);transition:transform var(--transition-timing), -webkit-transform var(--transition-timing);width:var(--input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--label-line-height);-webkit-margin-start:var(--label-gap-size);margin-inline-start:var(--label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--message-text-color);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--message-spacing-inline);margin-inline-start:var(--message-spacing-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--message-spacing-block);margin-block-start:var(--message-spacing-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--background-color-disabled);cursor:not-allowed}input:disabled~label{color:var(--text-color-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--background-color-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:0 0 0 4px var(--outline-color-focus);box-shadow:0 0 0 4px var(--outline-color-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--background-color-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--background-color-checked-hover)}";
 const PdsSwitchStyle0 = pdsSwitchCss;

package/dist/cjs/pds-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTabCss = "pds-tab{--background-color-tab:var(--pine-color-neutral-grey-300);--background-color-tab-active:var(--pine-color-neutral-charcoal-400);--background-color-tab-hover:var(--pine-color-neutral-grey-400);--border-radius:var(--pine-border-radius-xs);--color:var(--pine-color-neutral-charcoal-200);--color-active:var(--pine-color-neutral-charcoal-400);--color-focus:var(--pine-color-neutral-charcoal-300);--color-white:var(--pine-color-base-white);--font-size-body:var(--pine-font-size-body);--font-size-sm:var(--pine-font-size-body-sm);--font-size-xs:var(--pine-font-size-body-xs);--font-weight:var(--pine-font-weight-medium);--line-height-md:var(--pine-line-height-md);--line-height-sm:var(--pine-line-height-sm);--line-height-xs:var(--pine-line-height-xs);--outline:4px solid var(--pine-color-primary-200);display:inline-block;position:relative}*:focus-visible{border-radius:var(--border-radius);outline:var(--outline)}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:0;-ms-flex-align:center;align-items:center;color:var(--color);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--color-active)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--color-active)}.pds-tab:focus-visible{color:var(--color-focus)}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-body);font-weight:var(--font-weight);line-height:var(--line-height-md);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:currentColor;bottom:0;content:\"\";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--tab-background-color:transparent}.pds-tabs--availability .pds-tab{background-color:var(--tab-background-color);border-radius:8px 8px 0 0;padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--tab-background-color:var(--color-white)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--tab-background-color:var(--background-color-tab)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-xs);line-height:var(--line-height-xs);padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--tab-background-color);box-shadow:4px 4px 0 0 var(--tab-background-color);content:\"\";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--tab-background-color);box-shadow:-4px 4px 0 0 var(--tab-background-color);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--tab-background-color:var(--background-color-tab)}.pds-tabs--filter .pds-tab{background-color:var(--tab-background-color);border-radius:50px;color:var(--color-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--tab-background-color:var(--background-color-tab-active);color:var(--color-white)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--tab-background-color:var(--background-color-tab-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-sm);line-height:var(--line-height-sm);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}";
 const PdsTabStyle0 = pdsTabCss;

package/dist/cjs/pds-table-body.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTableBodyCss = ":host{border-color:inherit;display:table-row-group;vertical-align:middle}";
 const PdsTableBodyStyle0 = pdsTableBodyCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTableHeadCellCss = ":host{--background-fixed:var(--pine-color-base-white);--border:var(--pine-border-default);--box-shadow:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-sorting:var(--pine-color-neutral-charcoal-500);--color:var(--pine-color-neutral-charcoal-200);--fixed-cell-position:0;--font-size:var(--pine-font-size-body-sm);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-sm);--margin-arrow:var(--pine-spacing-xxs);--padding-arrow:calc(var(--pine-spacing-xxs) / 2);--padding-compact:var(--pine-spacing-xxs);--padding:calc(var(--pine-spacing-md) / 2);-webkit-border-after:var(--border);border-block-end:var(--border);color:var(--color);display:table-cell;font-size:var(--font-size);font-style:normal;font-weight:var(--font-weight);line-height:var(--line-height);padding:var(--padding);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--padding-compact)}:host(.is-fixed){background:var(--background-fixed);left:var(--fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--margin-arrow);margin-inline-start:var(--margin-arrow);-webkit-padding-before:var(--padding-arrow);padding-block-start:var(--padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
 const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;

package/dist/cjs/pds-table-head.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTableHeadCss = ":host{--background-fixed:var(--pine-color-base-white);--border:var(--pine-border-default);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host pds-table-checkbox-cell{-webkit-border-after:var(--border);border-block-end:var(--border)}";
 const PdsTableHeadStyle0 = pdsTableHeadCss;

package/dist/cjs/pds-table-row.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTableRowCss = ":host{--background-fixed:var(--pine-color-base-white);--background-interactive:var(--pine-color-neutral-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--background-interactive)}";
 const PdsTableRowStyle0 = pdsTableRowCss;

package/dist/cjs/pds-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTableCss = ":host{--background:var(--pine-color-base-white);background:var(--background);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--background)), to(var(--background))), -webkit-gradient(linear, left top, right top, from(var(--background)), to(var(--background))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";
 const PdsTableStyle0 = pdsTableCss;

package/dist/cjs/pds-tabpanel.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--panel-margin-top);padding:var(--panel-padding)}.pds-tabpanel.is-active{display:block}";
 const PdsTabpanelStyle0 = pdsTabpanelCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const pdsTabsCss = ":host{--panel-margin-top:0;--panel-padding:0;--gap-md:var(--pine-spacing-md);--gap-xs:var(--pine-spacing-xs);--gap-sm:16px var(--pine-spacing-sm);--outline:2px solid var(--pine-color-primary-200);display:block}*:focus{outline:var(--outline)}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--gap-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--gap-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--gap-sm)}";
 const PdsTabsStyle0 = pdsTabsCss;

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
-const pdsLabel = require('./pds-label-c988430d.js');
+const index = require('./index-9b7c547c.js');
+const pdsLabel = require('./pds-label-b30f3c13.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 PdsTextareaStyle0 = pdsTextareaCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 
 const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
     if (elem == undefined)

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4cd639bf.js');
+const index = require('./index-9b7c547c.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.12.6 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.13.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));

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

@@ -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.12.6 | 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}
+{"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}

package/dist/collection/collection-manifest.json

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

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

@@ -3,8 +3,9 @@
 }
 
 details {
+  --animation-transform-timing: 200ms;
   --border-radius: var(--pine-spacing-xs);
-  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
+  --box-shadow-focus: inset 0 0 0 2px 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);
@@ -18,15 +19,32 @@ details {
   border-radius: var(--border-radius);
   padding-inline: var(--spacing-details-padding-inline);
 }
+details pds-icon {
+  transform: scaleY(1);
+  transition: transform var(--animation-transform-timing);
+}
 
 /* stylelint-disable-next-line */
 details[open] {
   background-color: var(--color-content-background);
+  transition: transform var(--animation-transform-timing);
+  /* stylelint-disable-next-line selector-no-qualifying-type */
 }
 details[open] summary {
   color: var(--color-font-active);
   font-weight: var(--font-weight);
 }
+details[open] summary pds-icon {
+  transform: scaleY(-1);
+  transition: transform var(--animation-transform-timing);
+}
+details[open] .pds-accordion__body {
+  transition: max-height 1s ease-in-out;
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+}
+details[open] .pds-accordion__body.open {
+  max-height: max-content;
+}
 
 summary {
   border-radius: var(--border-radius);
@@ -53,4 +71,9 @@ summary:focus-visible {
 }
 summary pds-icon {
   margin-inline-start: auto;
+}
+
+.pds-accordion__body {
+  max-height: 0;
+  overflow: hidden;
 }

package/dist/collection/components/pds-accordion/pds-accordion.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { downSmall } from "@pine-ds/icons/icons";
 /**
  * @slot (default) - Accordion body content.
  * @slot label - Accordion trigger button content.
@@ -19,12 +20,18 @@ export class PdsAccordion {
     }
     handleOpenState(newValue) {
         this.isOpen = newValue;
+        if (newValue === true) {
+            this.containerEl.classList.add('open');
+        }
+        else {
+            this.containerEl.classList.remove('open');
+        }
     }
     componentDidLoad() {
         this.detailsEl.addEventListener('toggle', this.handleToggle);
     }
     render() {
-        return (h(Host, { key: 'e2e795c93ddd812acd5f9ac26546953d7172ba39', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '772f09a0f28f03a0feffa7a6ea1fd0cbf0947c56' }, this.getOpenAttribute(), { ref: (el) => this.detailsEl = el }), h("summary", { key: 'f8987032a8e8468f9e8728ed673c26210fd0c2a2' }, h("slot", { key: '5dfcd343dfdc7b5eb6f75e75dff494aab0fbea36', name: "label" }, "Details"), h("pds-icon", { key: '2e6cd67ca003428c48b0c0545287b629918f243a', name: this.isOpen ? 'up-small' : 'down-small' })), h("div", { key: '508b2e5d33c4a83e6f569ba30ef042e5ffc01318', class: "pds-accordion__body" }, h("slot", { key: '13bc1ae447df49043efbbf631844add1245fbabe' })))));
+        return (h(Host, { key: '16488169e8370ef00005364086a0b3a9bf2629d6', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '4bef67d20f40212ae2c49a4236a1b60c30c0f9af' }, this.getOpenAttribute(), { ref: (el) => this.detailsEl = el }), h("summary", { key: '1f990d447ac77274161314b74488669b5eb9762a' }, h("slot", { key: 'dc1c0b7f64e3c4d406a28fb1677b634af2f1af30', name: "label" }, "Details"), h("pds-icon", { key: '26d253bf3c039574cbcbab5000751492e21a0e32', icon: downSmall })), h("div", { key: 'a237207559a95b1b90bde48ddd37507f4103a3ca', class: `pds-accordion__body ${this.isOpen ? 'open' : ''}`, ref: (el) => this.containerEl = el }, h("slot", { key: 'f5808d1ffd746e470439d2de9c9580bfc13dc5f5' })))));
     }
     static get is() { return "pds-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-accordion/pds-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;GAGG;AAMH,MAAM,OAAO,YAAY;;QAwBf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAA;QAEO,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAA;;sBAhBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB;gBAC1F;oBACE,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAAI,CACnD;gBACV,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({ \n    attribute: 'open',\n    mutable: true,\n    reflect: true \n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon name={this.isOpen ? 'up-small' : 'down-small'} />\n          </summary>\n          <div class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,YAAY;;QA+Bf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAA;QAEO,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG,CAAC;YACxB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB;gBAC1F;oBACE,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAG,SAAS,GAAK,CACvB;gBACV,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB;oBAClH,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n  private containerEl: HTMLDivElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n\n    if ( newValue === true ) {\n      this.containerEl.classList.add('open');\n    } else {\n      this.containerEl.classList.remove('open');\n    }\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={ downSmall } />\n          </summary>\n          <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-avatar/pds-avatar.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
 /**
  * @part image - The main image element that represents the avatar component.
 */
@@ -22,13 +23,13 @@ export class PdsAvatar {
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            && h("pds-icon", { class: "pds-avatar__badge", name: "check-circle-filled", size: "33.53%" }));
+            && h("pds-icon", { class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
         this.renderIconOrImage = () => (this.image
             ? h("img", { alt: this.alt, src: this.image })
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            : h("pds-icon", { name: "user-filled", size: "33.53%" }));
+            : h("pds-icon", { color: "var(--pine-color-primary-400)", icon: userFilled, size: "33.53%" }));
         this.classNames = () => ({
             'pds-avatar': true,
             [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
@@ -58,7 +59,7 @@ export class PdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'e934e89ad98ccb12b0efa4daffa0449b989cdf53', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '0e214f7cca56b36b49e27c8dc097acc7b34391cc', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get is() { return "pds-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-avatar/pds-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;EAEE;AAMF,MAAM,OAAO,SAAS;;QAiEZ,uBAAkB,GAAG,GAAG,EAAE;YAChC,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe;gBACpC,IAAI,CAAC,iBAAiB,EAAE;gBACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAA;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO,CACL,IAAI,CAAC,QAAQ;gBACX,CAAC;oBACD,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,kBAAkB,EAAE,CACnB;gBACT,CAAC;oBACD,IAAI,CAAC,kBAAkB,EAAE,CAC5B,CAAA;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE,CAAC,CAC1B,IAAI,CAAC,KAAK;YACV,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;eAC5C,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC9F,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE,CAAC,CAChC,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzC,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;YACjD,CAAC,CAAC,gBAAU,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC3D,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE,CAAC,CACzB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,wCAAwC;YAC7G,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAA;QAClB,CAAC;IACH,CAAC;IAqDD,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n    \n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" name=\"check-circle-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon name=\"user-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAErE;;EAEE;AAMF,MAAM,OAAO,SAAS;;QAiEZ,uBAAkB,GAAG,GAAG,EAAE;YAChC,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe;gBACpC,IAAI,CAAC,iBAAiB,EAAE;gBACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAA;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO,CACL,IAAI,CAAC,QAAQ;gBACX,CAAC;oBACD,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,kBAAkB,EAAE,CACnB;gBACT,CAAC;oBACD,IAAI,CAAC,kBAAkB,EAAE,CAC5B,CAAA;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE,CAAC,CAC1B,IAAI,CAAC,KAAK;YACV,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;eAC5C,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC5F,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE,CAAC,CAChC,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzC,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;YACjD,CAAC,CAAC,gBAAU,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,GAAY,CAChG,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE,CAAC,CACzB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,wCAAwC;YAC7G,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAA;QAClB,CAAC;IACH,CAAC;IAqDD,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-primary-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-link/pds-link.css

@@ -1,5 +1,6 @@
 :host {
   --border-radius: var(--pine-border-radius-sm);
+  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-primary-200);
   --color: var(--pine-color-neutral-charcoal-400);
   --font-size: var(--pine-font-size-body);
   --font-size-sm: var(--pine-font-size-body-sm);
@@ -22,9 +23,9 @@
   display: inline-flex;
   font-weight: inherit;
 }
-.pds-link:focus {
-  border-radius: var(--border-radius);
-  outline: var(--outline);
+.pds-link:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
 }
 
 .pds-link--sm {

package/dist/docs.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-03-12T20:37:13",
+  "timestamp": "2024-03-19T18:33:16",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.6",
-    "typescriptVersion": "5.3.3"
+    "version": "4.13.0",
+    "typescriptVersion": "5.4.2"
   },
   "components": [
     {

package/dist/esm/{index-09d6e504.js → index-5e54ea50.js}

@@ -863,6 +863,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
  * @returns the newly created node
  */
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+    var _a;
     // tslint:disable-next-line: prefer-const
     const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
@@ -930,6 +931,8 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             elm['s-cr'] = contentRef;
             // remember the slot name, or empty string for default slot
             elm['s-sn'] = newVNode.$name$ || '';
+            // remember the ref callback function
+            elm['s-rf'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.ref;
             // check if we've got an old vnode for this slot
             oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
             if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
@@ -945,7 +948,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
 };
 const putBackInOriginalLocation = (parentElm, recursive) => {
     plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-    const oldSlotChildNodes = parentElm.childNodes;
+    const oldSlotChildNodes = Array.from(parentElm.childNodes);
+    if (parentElm['s-sr'] && BUILD.experimentalSlotFixes) {
+        let node = parentElm;
+        while ((node = node.nextSibling)) {
+            if (node && node['s-sn'] === parentElm['s-sn'] && node['s-sh'] === hostTagName) {
+                oldSlotChildNodes.push(node);
+            }
+        }
+    }
     for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
         const childNode = oldSlotChildNodes[i];
         if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
@@ -1667,7 +1678,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                     // If the node we're currently planning on inserting the new node before is an element,
                     // we need to do some additional checks to make sure we're inserting the node in the correct order.
                     // The use case here would be that we have multiple nodes being relocated to the same slot. So, we want
-                    // to make sure they get inserted into their new how in the same order they were declared in their original location.
+                    // to make sure they get inserted into their new home in the same order they were declared in their original location.
                     //
                     // TODO(STENCIL-914): Remove `experimentalSlotFixes` check
                     {
@@ -1708,6 +1719,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                             }
                         }
                     }
+                    nodeToRelocate && typeof slotRefNode['s-rf'] === 'function' && slotRefNode['s-rf'](nodeToRelocate);
                 }
                 else {
                     // this node doesn't have a slot home to go to, so let's hide it
@@ -2754,4 +2766,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-09d6e504.js.map
+//# sourceMappingURL=index-5e54ea50.js.map