@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -1,47 +1,252 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a33b470.js';
-import { d as downSmall, r as remove } from './index-a1e2f9af.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { d as downSmall, r as remove } from './index-B0DXTeeV.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
+import { F as FOCUSABLE_WRAPPER, s as setupTruncationTooltip } from './truncation-tooltip-CkIWm6Z-.js';
+import { n as normalizeColorValue } from './utils-OYK5-nwe.js';
+import './keep-hydrated-BgNaWLoS.js';
+import './floating-ui.dom-Cuc0DYlm.js';
+import './portal-target-CKRzRKdO.js';
 
-const pdsChipCss = ":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-300);--color-background-accent-interactive:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-300);--color-background-danger-interactive:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-300);--color-background-info-interactive:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-300);--color-background-neutral-dot:var(--pine-color-charcoal-100);--color-background-neutral-interactive:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-300);--color-background-success-interactive:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-300);--color-background-warning-interactive:var(--pine-color-yellow-200);--font-size-sm:var(--pine-font-size-087);--font-size-body:var(--pine-font-size-100);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-100);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-interactive)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-interactive)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-interactive)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-interactive)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-interactive)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-body);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-body);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";
-const PdsChipStyle0 = pdsChipCss;
+const pdsChipTokensCss = () => `:host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-text:var(--pine-color-purple-950);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-text:var(--pine-color-red-950);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-text:var(--pine-color-blue-950);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-text:var(--pine-color-grey-950);--pine-chip-color-solid:var(--pine-color-grey-900);--pine-chip-color-solid-hover:var(--pine-color-grey-950);--pine-chip-color-solid-dot:var(--pine-color-white);--pine-chip-color-solid-text:var(--pine-color-white);--pine-chip-color-subtle:var(--pine-color-white);--pine-chip-color-subtle-hover:var(--pine-color-grey-300);--pine-chip-color-subtle-dot:var(--pine-color-grey-900);--pine-chip-color-subtle-text:var(--pine-color-grey-900);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-text:var(--pine-color-green-950);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-chip-color-accent:var(--pine-color-purple-900);--pine-chip-color-accent-hover:var(--pine-color-purple-800);--pine-chip-color-accent-dot:var(--pine-color-purple-400);--pine-chip-color-accent-text:var(--pine-color-purple-100);--pine-chip-color-danger:var(--pine-color-red-900);--pine-chip-color-danger-hover:var(--pine-color-red-800);--pine-chip-color-danger-dot:var(--pine-color-red-400);--pine-chip-color-danger-text:var(--pine-color-red-100);--pine-chip-color-info:var(--pine-color-blue-900);--pine-chip-color-info-hover:var(--pine-color-blue-800);--pine-chip-color-info-dot:var(--pine-color-blue-400);--pine-chip-color-info-text:var(--pine-color-blue-100);--pine-chip-color-neutral:var(--pine-color-grey-800);--pine-chip-color-neutral-hover:var(--pine-color-grey-600);--pine-chip-color-neutral-dot:var(--pine-color-grey-300);--pine-chip-color-neutral-text:var(--pine-color-grey-100);--pine-chip-color-solid:var(--pine-color-white);--pine-chip-color-solid-hover:var(--pine-color-grey-100);--pine-chip-color-solid-dot:var(--pine-color-grey-900);--pine-chip-color-solid-text:var(--pine-color-grey-900);--pine-chip-color-subtle:var(--pine-color-grey-900);--pine-chip-color-subtle-hover:var(--pine-color-grey-500);--pine-chip-color-subtle-dot:var(--pine-color-white);--pine-chip-color-subtle-text:var(--pine-color-white);--pine-chip-color-success:var(--pine-color-green-900);--pine-chip-color-success-hover:var(--pine-color-green-800);--pine-chip-color-success-dot:var(--pine-color-green-400);--pine-chip-color-success-text:var(--pine-color-green-100);--pine-chip-color-warning:var(--pine-color-yellow-900);--pine-chip-color-warning-hover:var(--pine-color-yellow-800);--pine-chip-color-warning-dot:var(--pine-color-yellow-400);--pine-chip-color-warning-text:var(--pine-color-yellow-100)}`;
 
+const pdsChipCss = () => `:host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot))}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-chip-color-accent-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot))}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-chip-color-danger-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-info-dot))}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-chip-color-info-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot))}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-chip-color-neutral-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--solid){background:var(--pine-chip-color-solid);border:var(--pine-border-width) solid var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot))}:host(.pds-chip--solid) .pds-chip__label,:host(.pds-chip--solid) .pds-chip__button,:host(.pds-chip--solid) .pds-chip__close{color:var(--pine-chip-color-solid-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--solid) .pds-chip__close:hover{background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid.pds-chip--dropdown:hover){background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--subtle){background:var(--pine-chip-color-subtle);border:var(--pine-border-width) solid var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot))}:host(.pds-chip--subtle) .pds-chip__label,:host(.pds-chip--subtle) .pds-chip__button,:host(.pds-chip--subtle) .pds-chip__close{color:var(--pine-chip-color-subtle-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--subtle) .pds-chip__close:hover{background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle.pds-chip--dropdown:hover){background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-success-dot))}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-chip-color-success-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot))}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-chip-color-warning-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--solid){border-color:transparent}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__icon{color:var(--pds-chip-icon-color, currentColor)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host([max-width]){-webkit-box-sizing:border-box;box-sizing:border-box;max-width:var(--pds-chip-max-width);min-width:0}:host([max-width]) .pds-chip__label,:host([max-width]) .pds-chip__button{min-width:0}:host([max-width]) .pds-chip__label-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}`;
+
+const SENTIMENT_DOT_COLORS = {
+    accent: 'var(--pine-chip-color-accent-dot)',
+    danger: 'var(--pine-chip-color-danger-dot)',
+    info: 'var(--pine-chip-color-info-dot)',
+    neutral: 'var(--pine-chip-color-neutral-dot)',
+    solid: 'var(--pine-chip-color-solid-dot)',
+    subtle: 'var(--pine-chip-color-subtle-dot)',
+    success: 'var(--pine-chip-color-success-dot)',
+    warning: 'var(--pine-chip-color-warning-dot)',
+};
+// Beside the listbox and level with the option, so the tooltip never covers the other options.
+function besideListbox(wrapper) {
+    const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
+    const listbox = option === null || option === void 0 ? void 0 : option.closest('[role="listbox"]');
+    if (!option || !listbox)
+        return {};
+    return {
+        placement: 'right',
+        reference: {
+            getBoundingClientRect: () => {
+                const { top, bottom, height } = option.getBoundingClientRect();
+                const { left, right, width } = listbox.getBoundingClientRect();
+                return { x: left, y: top, top, left, bottom, right, width, height };
+            },
+        },
+    };
+}
 const PdsChip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pdsTagCloseClick = createEvent(this, "pdsTagCloseClick", 7);
+        this.pdsTagCloseClick = createEvent(this, "pdsTagCloseClick");
+        this.hostKeeper = new HostStylingKeeper();
+        this.truncationCleanup = null;
+        /**
+         * Determines whether a dot should be displayed on the chip.
+         * Note: This prop is ignored when sentiment is 'brand'.
+         * @defaultValue false
+         */
+        this.dot = false;
+        /**
+         * Defines the color scheme of the chip.
+         * @defaultValue 'neutral'
+         */
+        this.sentiment = 'neutral';
+        /**
+         * Sets the style variant of the chip.
+         * Note: This prop is ignored when sentiment is 'brand'.
+         * @defaultValue 'text'
+         */
+        this.variant = 'text';
+        /**
+         * Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Remove'
+         */
+        this.dismissLabel = 'Remove';
         this.handleCloseClick = () => {
             this.pdsTagCloseClick.emit();
         };
-        this.componentId = undefined;
-        this.sentiment = 'neutral';
-        this.dot = false;
-        this.label = undefined;
-        this.large = false;
-        this.variant = 'text';
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // A moved chip reconnects without re-rendering, so componentDidRender won't re-bind what
+        // disconnectedCallback tore down. Before the first render there's no label, and it binds there.
+        if (this.maxWidth && this.labelTextEl) {
+            this.initTruncationTooltip();
+        }
+    }
+    // Bind (and re-bind) here, not just on load: changing variant/size remounts
+    // the label span, so the tooltip has to re-attach to the current node or it
+    // would keep measuring a detached one. Keyed on node identity so an unrelated
+    // re-render doesn't tear a working tooltip down.
+    componentDidRender() {
+        if (this.maxWidth && this.labelTextEl) {
+            if (this.labelTextEl !== this.tooltipBoundEl) {
+                this.initTruncationTooltip();
+            }
+        }
+        else if (this.tooltipBoundEl) {
+            this.destroyTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+        this.destroyTruncationTooltip();
+    }
+    // Reveal the clipped label on hover/focus, matching pds-text / pds-table-cell.
+    // getTooltipText reads the host's textContent — the slotted label.
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        if (this.labelTextEl) {
+            const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
+            // Hidden from assistive tech, a tab stop would be focusable with no name; hover still reveals it.
+            const hidden = this.el.closest('[aria-hidden="true"]') !== null;
+            this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
+                // The dropdown variant's label span already sits inside
+                // `<button class="pds-chip__button">`, which is already focusable and
+                // bubbles focusin to the host — a tabindex on the span too would nest
+                // a second tab stop inside the button.
+                manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper && !hidden,
+                // A wrapping control sits outside the host, so its focus never reaches the host's listener.
+                focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
+            this.tooltipBoundEl = this.labelTextEl;
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
+        this.tooltipBoundEl = null;
+    }
+    get effectiveSize() {
+        var _a;
+        return (_a = this.size) !== null && _a !== void 0 ? _a : 'md';
     }
     classNames() {
         const classNames = ['pds-chip'];
-        if (this.large) {
-            classNames.push('pds-chip--large');
+        const size = this.effectiveSize;
+        if (size && size !== 'md') {
+            classNames.push('pds-chip--' + size);
         }
-        if (this.variant) {
-            classNames.push('pds-chip--' + this.variant);
+        // For brand sentiment, always use text variant
+        const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;
+        if (effectiveVariant) {
+            classNames.push('pds-chip--' + effectiveVariant);
         }
         if (this.sentiment) {
             classNames.push('pds-chip--' + this.sentiment);
         }
-        return classNames.join('  ');
+        return classNames.join(' ');
+    }
+    get effectiveVariant() {
+        // For brand sentiment, force text variant behavior
+        return this.sentiment === 'brand' ? 'text' : this.variant;
+    }
+    get iconSize() {
+        switch (this.effectiveSize) {
+            case 'sm': return '10px';
+            case 'lg': return '14px';
+            default: return '12px';
+        }
     }
     setChipContent() {
-        const isDropdown = this.variant === 'dropdown';
-        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label, h("pds-icon", { icon: downSmall, size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label));
+        const isDropdown = this.effectiveVariant === 'dropdown';
+        // For brand sentiment, ignore dot prop
+        const showDot = this.sentiment === 'brand' ? false : this.dot;
+        // ::slotted() can only select an assigned element, never a bare text
+        // node — and a plain `<pds-chip>Some text</pds-chip>` slots text with no
+        // wrapping element. Wrapping the slot itself in an internal span gives
+        // maxWidth something to ellipsize regardless of what's slotted.
+        // A focus-triggered tooltip needs a focusable anchor, but the label span
+        // only earns a tab stop while its text is actually clipped — a chip whose
+        // label fits has nothing to reveal. setupTruncationTooltip owns that
+        // tabindex off the measurement for every variant except dropdown: its
+        // label span already sits inside `<button class="pds-chip__button">`,
+        // which is already focusable and bubbles focusin to the host, so
+        // initTruncationTooltip passes `manageTabIndex: false` there to avoid
+        // nesting a second tab stop inside the button. The same goes for a chip
+        // inside a consumer's own focusable control (FOCUSABLE_WRAPPER).
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null)), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null))));
         return chipContent;
     }
+    get hostStyles() {
+        // Hand maxWidth to the stylesheet as a custom property rather than an inline
+        // max-width, so a consumer can override it from a stylesheet (e.g. a media
+        // query) without !important — the same pattern pds-box uses for min-width.
+        // The width and the min-width/box-sizing that make it work are applied in
+        // pds-chip.scss under :host([max-width]).
+        const styles = {};
+        if (this.maxWidth) {
+            styles['--pds-chip-max-width'] = this.maxWidth;
+        }
+        // Custom properties rather than inline colors on the dot/icon, so a
+        // consumer's ::part(dot) or ::part(icon) rule still wins over the prop.
+        const dotColor = normalizeColorValue(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        if (dotColor !== undefined) {
+            styles['--pds-chip-dot-color'] = dotColor;
+        }
+        const iconColor = normalizeColorValue(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        if (iconColor !== undefined) {
+            styles['--pds-chip-icon-color'] = iconColor;
+        }
+        return styles;
+    }
+    renderCloseButton() {
+        const CloseElement = this.removeUrl ? 'a' : 'button';
+        const closeAttributes = () => {
+            if (this.removeUrl) {
+                // Link attributes
+                const linkAttrs = {
+                    class: 'pds-chip__close',
+                    href: this.removeUrl,
+                    'aria-label': this.dismissLabel,
+                };
+                // Add target if specified
+                if (this.removeTarget) {
+                    linkAttrs.target = this.removeTarget;
+                }
+                // Add HTTP method attributes if specified
+                if (this.removeHttpMethod) {
+                    linkAttrs['data-method'] = this.removeHttpMethod;
+                    linkAttrs['data-turbo-method'] = this.removeHttpMethod;
+                }
+                // Build rel attribute by collecting all required values
+                const relValues = [];
+                // Add noopener noreferrer if target is _blank
+                if (this.removeTarget === '_blank') {
+                    relValues.push('noopener', 'noreferrer');
+                }
+                // Add nofollow for non-GET methods (best practice)
+                if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {
+                    relValues.push('nofollow');
+                }
+                // Set rel attribute if we have any values
+                if (relValues.length > 0) {
+                    linkAttrs.rel = relValues.join(' ');
+                }
+                return linkAttrs;
+            }
+            // Button attributes
+            return {
+                class: 'pds-chip__close',
+                type: 'button',
+                'aria-label': this.dismissLabel,
+            };
+        };
+        return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
+    }
     render() {
-        return (h(Host, { key: 'a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '83d2273a0785c4516a57ed618645d937ba33f9f5', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '6ca04621d1acd134ce3352a034ea69ea7f794fbd', icon: remove, size: "12px" })))));
+        const hostClass = this.classNames();
+        const hostStyles = this.hostStyles;
+        this.hostKeeper.record(hostClass, hostStyles);
+        return (h(Host, { key: '7f9ee3000b4a68726730ee8019f5b866a2f53ae7', class: hostClass, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
+    get el() { return getElement(this); }
 };
-PdsChip.style = PdsChipStyle0;
+PdsChip.style = pdsChipTokensCss() + pdsChipCss();
 
 export { PdsChip as pds_chip };
-
-//# sourceMappingURL=pds-chip.entry.js.map