@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/chips/chip/chip.d.ts

@@ -3,17 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { ChipType, IChipDeleteEventData, IChipSelectEventData } from './chip-constants';
+import { BaseComponent, IBaseComponent } from '../../core';
+import { ChipTheme, ChipType, IChipDeleteEventData, IChipSelectEventData } from './chip-constants';
+import { ChipFoundation } from './chip-foundation';
 export interface IChipComponent extends IBaseComponent {
     type: ChipType;
+    value: unknown;
     selected: boolean;
-    disabled: boolean;
     invalid: boolean;
-    value: any;
+    disabled: boolean;
     dense: boolean;
-    emulateFocus: boolean;
-    tryFocusDelete(): void;
+    theme: ChipTheme;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    focusRemoveButton(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -25,30 +30,110 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-chip>` component.
- *
  * @tag forge-chip
+ *
+ * @property {ChipType} type - The type of chip.
+ * @property {unknown} value - The value of the chip.
+ * @property {boolean} selected - Whether the chip is selected.
+ * @property {boolean} invalid - Whether the chip is invalid.
+ * @property {boolean} disabled - Whether the chip is disabled.
+ * @property {boolean} dense - Whether the chip is dense.
+ * @property {ChipTheme} theme - The theme of the chip.
+ * @property {string} href - The href of the chip.
+ * @property {string} target - The target of the chip.
+ * @property {string} download - The download of the chip.
+ * @property {string} rel - The rel of the chip.
+ *
+ * @attribute {ChipType} type - The type of chip.
+ * @attribute {unknown} value - The value of the chip.
+ * @attribute {boolean} selected - Whether the chip is selected.
+ * @attribute {boolean} invalid - Whether the chip is invalid.
+ * @attribute {boolean} disabled - Whether the chip is disabled.
+ * @attribute {boolean} dense - Whether the chip is dense.
+ * @attribute {ChipTheme} theme - The theme of the chip.
+ * @attribute {string} href - The href of the chip.
+ * @attribute {string} target - The target of the chip.
+ * @attribute {string} download - The download of the chip.
+ * @attribute {string} rel - The rel of the chip.
+ *
+ * @fires {IChipDeleteEventData} forge-chip-delete - Event fired when the chip is deleted.
+ * @fires {IChipSelectEventData} forge-chip-select - Event fired when the chip is selected.
+ *
+ * @cssproperty --forge-chip-background - The background color of the chip.
+ * @cssproperty --forge-chip-color - The background color of the chip.
+ * @cssproperty --forge-chip-shape - The shape of the chip.
+ * @cssproperty --forge-chip-spacing - The spacing between chips.
+ * @cssproperty --forge-chip-height - The height of the chip.
+ * @cssproperty --forge-chip-padding-inline - The inline padding of the chip.
+ * @cssproperty --forge-chip-padding-block - The block padding of the chip.
+ * @cssproperty --forge-chip-cursor - The cursor style of the chip.
+ * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
+ * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
+ * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
+ * @cssproperty --forge-chip-dense-height - The height of the dense chip.
+ * @cssproperty --forge-chip-dense-padding-inline - The inline padding of the dense chip.
+ * @cssproperty --forge-chip-dense-spacing - The spacing between dense chips.
+ * @cssproperty --forge-chip-dense-font-size - The font size of the dense chip.
+ * @cssproperty --forge-chip-dense-font-weight - The font weight of the dense chip.
+ * @cssproperty --forge-chip-dense-focus-indicator-offset - The offset of the focus indicator for dense chips.
+ * @cssproperty --forge-chip-dense-icon-font-size - The font size of the icon in dense chips.
+ * @cssproperty --forge-chip-remove-button-spacing - The spacing of the remove button in chips.
+ * @cssproperty --forge-chip-remove-button-height-dense - The height of the remove button in dense chips.
+ * @cssproperty --forge-chip-remove-button-icon-size-dense - The icon size of the remove button in dense chips.
+ * @cssproperty --forge-chip-remove-button-spacing-dense - The spacing of the remove button in dense chips.
+ * @cssproperty --forge-chip-selected-background - The background color of the selected chip.
+ * @cssproperty --forge-chip-selected-color - The text color of the selected chip.
+ * @cssproperty --forge-chip-invalid-color - The text color of the invalid chip.
+ * @cssproperty --forge-chip-invalid-selected-background - The background color of the invalid selected chip.
+ * @cssproperty --forge-chip-invalid-selected-color - The text color of the invalid selected chip.
+ * @cssproperty --forge-chip-border-width - The width of the chip border.
+ * @cssproperty --forge-chip-border-style - The style of the chip border.
+ * @cssproperty --forge-chip-border-color - The color of the chip border.
+ * @cssproperty --forge-chip-field-background - The background color of the chip field.
+ * @cssproperty --forge-chip-field-color - The text color of the chip field.
+ * @cssproperty --forge-chip-field-shape - The shape of the chip field.
+ * @cssproperty --forge-chip-field-border-color - The color of the chip field border.
+ * @cssproperty --forge-chip-field-cursor - The cursor style of the chip field.
+ * @cssproperty --forge-chip-checkmark-size - The size of the checkmark in chips.
+ * @cssproperty --forge-chip-checkmark-color - The color of the checkmark in chips.
+ * @cssproperty --forge-chip-checkmark-spacing - The spacing of the checkmark in chips.
+ * @cssproperty --forge-chip-avatar-size - The size of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-size-dense - The size of the avatar in dense chips.
+ * @cssproperty --forge-chip-avatar-font-size - The font size of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-font-size-dense - The font size of the avatar in dense chips.
+ * @cssproperty --forge-chip-avatar-spacing - The spacing of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-spacing-dense - The spacing of the avatar in dense chips.
+ * @cssproperty --forge-chip-transition-duration - The duration of the chip transition.
+ * @cssproperty --forge-chip-transition-easing - The easing function of the chip transition.
+ * @cssproperty --forge-chip-checkmark-transition-delay - The delay of the checkmark transition in chips.
+ *
+ * @csspart root - The component's root element.
+ * @csspart trigger - The trigger element of the chip.
+ * @csspart focus-indicator - The focus indicator of the chip.
+ * @csspart state-layer - The state layer surface.
+ *
+ * @slot - The content of the chip.
+ * @slot start - The start content of the chip.
+ * @slot end - The end content of the chip.
  */
 export declare class ChipComponent extends BaseComponent implements IChipComponent {
     static get observedAttributes(): string[];
-    private _foundation;
+    protected _foundation: ChipFoundation;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets the chip type. */
+    focus(options?: FocusOptions): void;
+    focusRemoveButton(): void;
+    click(): void;
     type: ChipType;
-    /** Gets/sets the selected state of the chip. */
+    value: unknown;
     selected: boolean;
-    /** Gets/sets the disabled state of the chip. */
-    disabled: boolean;
-    /** Gets/sets the invalid state of the chip. */
     invalid: boolean;
-    /** Gets/sets the chip value. */
-    value: any;
-    /** Gets/sets the dense state of the chip. */
+    disabled: boolean;
     dense: boolean;
-    emulateFocus: boolean;
-    focus(): void;
-    tryFocusDelete(): void;
+    theme: ChipTheme;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
 }

package/esm/chips/chip/chip.js

@@ -5,72 +5,162 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconCancel } from '@tylertech/tyler-icons/standard';
-import { BaseComponent } from '../../core/base/base-component';
+import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { BaseComponent } from '../../core';
+import { FocusIndicatorComponent } from '../../focus-indicator';
 import { IconComponent, IconRegistry } from '../../icon';
+import { IconButtonComponent } from '../../icon-button';
+import { StateLayerComponent } from '../../state-layer';
 import { ChipAdapter } from './chip-adapter';
 import { CHIP_CONSTANTS } from './chip-constants';
 import { ChipFoundation } from './chip-foundation';
-const template = '<template><div class=\"forge-chip\" part=\"root button\"><slot name=\"leading\" class=\"forge-chip__leading\"></slot><div role=\"button\" tabindex=\"0\" class=\"forge-chip__content\" part=\"content\"><slot></slot></div><slot name=\"trailing\"></slot></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;border-radius:16px;width:auto;width:var(--forge-chip-width,auto);height:auto;height:var(--forge-chip-height,auto);min-height:36px;min-height:var(--forge-chip-min-height,36px);box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);text-transform:none;overflow:hidden}.forge-chip::after,.forge-chip::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-chip::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-chip::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-chip.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-chip.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-chip.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-chip.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-chip.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-chip::after,.forge-chip::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-chip.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-chip::after,.forge-chip::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover::before,.forge-chip:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused::before,.forge-chip:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-chip::-moz-focus-inner{padding:0;border:0}.forge-chip:active{outline:0}.forge-chip:hover{cursor:pointer}.forge-chip:disabled{cursor:default;pointer-events:none}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-chip:not(:disabled){background-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#6200ee))}.forge-chip:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-chip .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-chip .mdc-button__ripple::after,.forge-chip .mdc-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-chip:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-chip:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-chip:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-chip:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-chip:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-evolution-chip__ripple{border-radius:16px}.forge-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.forge-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.forge-chip.forge-chip--disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:default;pointer-events:none}.forge-chip.forge-chip--disabled .forge-chip__delete-button{opacity:.54}.forge-chip__leading--hidden{display:none}.forge-chip__content{-webkit-box-flex:1;flex-grow:1;text-align:center}.forge-chip__content:focus{outline:0}.forge-chip ::slotted([slot=leading]){margin-left:-6px;margin-right:4px}.forge-chip ::slotted(forge-avatar[slot]){--forge-avatar-size:24px}.forge-chip ::slotted([slot=trailing]){margin-left:4px;margin-right:-8px}.forge-chip__checkmark{height:24px}.forge-chip__checkmark-svg{width:0;height:24px;-webkit-transition:width 150ms cubic-bezier(.4, 0, .2, 1);transition:width 150ms cubic-bezier(.4, 0, .2, 1)}.forge-chip__checkmark-path{stroke:#fff;stroke:var(--mdc-theme-on-primary,#fff);-webkit-transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:4px;margin-right:-8px;-webkit-transition:color 150ms linear;transition:color 150ms linear;outline:0;line-height:inherit;position:relative;border-radius:50%}.forge-chip__delete-button:focus{outline:currentColor solid 2px}.forge-chip__delete-button:focus,.forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip__delete-button:active{opacity:.75}.forge-chip__delete-button__touch-target{position:absolute;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled,.forge-chip--filter.forge-chip--selected.forge-chip--disabled,.forge-chip--input.forge-chip--selected.forge-chip--disabled{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);opacity:.37}.forge-chip--choice.forge-chip--selected.forge-chip--disabled::after,.forge-chip--choice.forge-chip--selected.forge-chip--disabled::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected ::slotted([slot=leading]),.forge-chip--filter.forge-chip--selected ::slotted([slot=leading]),.forge-chip--input.forge-chip--selected ::slotted([slot=leading]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--filter.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--input.forge-chip--selected ::slotted([slot=trailing]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected .forge-chip__delete-button,.forge-chip--filter.forge-chip--selected .forge-chip__delete-button,.forge-chip--input.forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark{margin-left:-6px;margin-right:4px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg{width:24px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path{-webkit-transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);stroke-dashoffset:0}.forge-chip--field .forge-chip__delete-button{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip--field .forge-chip__delete-button:focus,.forge-chip--field .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:focus,.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--disabled .forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-chip--dense{min-height:28px;min-height:var(--forge-chip-min-height,28px)}.forge-chip--dense.forge-chip--field{min-height:20px;min-height:var(--forge-chip-min-height,20px);padding:0;margin:0;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-chip--dense.forge-chip--field ::slotted([slot=leading]){margin:0 0 0 2px;font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__content{font-size:12px;padding:0 8px}.forge-chip--dense.forge-chip--field ::slotted([slot=trailing]){font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__delete-button{margin:0 2px 0 0;font-size:18px}.forge-chip--invalid:not(.forge-chip--disabled){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled)::after,.forge-chip--invalid:not(.forge-chip--disabled)::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--invalid:not(.forge-chip--disabled):hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip--invalid:not(.forge-chip--disabled):not(:disabled){border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}:host{display:inline-block}:host([hidden]){display:none}:host([theme=error]){--mdc-theme-primary:var(--mdc-theme-error)}';
+const template = '<template><div class=\"forge-chip\" part=\"root\"><button type=\"button\" id=\"trigger\" class=\"trigger\" part=\"trigger\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><slot></slot><slot name=\"end\"><slot name=\"trailing\"></slot></slot></button><forge-focus-indicator target=\"trigger\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\"trigger\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
+const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, var(--forge-shape-full, 9999px));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, var(--forge-shape-medium, 4px));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_chip-spacing);-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-font-size:var(--_chip-dense-font-size);--forge-typography-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){-webkit-margin-start:var(--_chip-avatar-spacing);margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){-webkit-margin-end:var(--_chip-avatar-spacing);margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);-webkit-transition-property:width;transition-property:width;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{-webkit-padding-start:var(--_chip-checkmark-spacing);padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{-webkit-transition-delay:var(--_chip-checkmark-transition-delay);transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
 /**
- * The custom element class behind the `<forge-chip>` component.
- *
  * @tag forge-chip
+ *
+ * @property {ChipType} type - The type of chip.
+ * @property {unknown} value - The value of the chip.
+ * @property {boolean} selected - Whether the chip is selected.
+ * @property {boolean} invalid - Whether the chip is invalid.
+ * @property {boolean} disabled - Whether the chip is disabled.
+ * @property {boolean} dense - Whether the chip is dense.
+ * @property {ChipTheme} theme - The theme of the chip.
+ * @property {string} href - The href of the chip.
+ * @property {string} target - The target of the chip.
+ * @property {string} download - The download of the chip.
+ * @property {string} rel - The rel of the chip.
+ *
+ * @attribute {ChipType} type - The type of chip.
+ * @attribute {unknown} value - The value of the chip.
+ * @attribute {boolean} selected - Whether the chip is selected.
+ * @attribute {boolean} invalid - Whether the chip is invalid.
+ * @attribute {boolean} disabled - Whether the chip is disabled.
+ * @attribute {boolean} dense - Whether the chip is dense.
+ * @attribute {ChipTheme} theme - The theme of the chip.
+ * @attribute {string} href - The href of the chip.
+ * @attribute {string} target - The target of the chip.
+ * @attribute {string} download - The download of the chip.
+ * @attribute {string} rel - The rel of the chip.
+ *
+ * @fires {IChipDeleteEventData} forge-chip-delete - Event fired when the chip is deleted.
+ * @fires {IChipSelectEventData} forge-chip-select - Event fired when the chip is selected.
+ *
+ * @cssproperty --forge-chip-background - The background color of the chip.
+ * @cssproperty --forge-chip-color - The background color of the chip.
+ * @cssproperty --forge-chip-shape - The shape of the chip.
+ * @cssproperty --forge-chip-spacing - The spacing between chips.
+ * @cssproperty --forge-chip-height - The height of the chip.
+ * @cssproperty --forge-chip-padding-inline - The inline padding of the chip.
+ * @cssproperty --forge-chip-padding-block - The block padding of the chip.
+ * @cssproperty --forge-chip-cursor - The cursor style of the chip.
+ * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
+ * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
+ * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
+ * @cssproperty --forge-chip-dense-height - The height of the dense chip.
+ * @cssproperty --forge-chip-dense-padding-inline - The inline padding of the dense chip.
+ * @cssproperty --forge-chip-dense-spacing - The spacing between dense chips.
+ * @cssproperty --forge-chip-dense-font-size - The font size of the dense chip.
+ * @cssproperty --forge-chip-dense-font-weight - The font weight of the dense chip.
+ * @cssproperty --forge-chip-dense-focus-indicator-offset - The offset of the focus indicator for dense chips.
+ * @cssproperty --forge-chip-dense-icon-font-size - The font size of the icon in dense chips.
+ * @cssproperty --forge-chip-remove-button-spacing - The spacing of the remove button in chips.
+ * @cssproperty --forge-chip-remove-button-height-dense - The height of the remove button in dense chips.
+ * @cssproperty --forge-chip-remove-button-icon-size-dense - The icon size of the remove button in dense chips.
+ * @cssproperty --forge-chip-remove-button-spacing-dense - The spacing of the remove button in dense chips.
+ * @cssproperty --forge-chip-selected-background - The background color of the selected chip.
+ * @cssproperty --forge-chip-selected-color - The text color of the selected chip.
+ * @cssproperty --forge-chip-invalid-color - The text color of the invalid chip.
+ * @cssproperty --forge-chip-invalid-selected-background - The background color of the invalid selected chip.
+ * @cssproperty --forge-chip-invalid-selected-color - The text color of the invalid selected chip.
+ * @cssproperty --forge-chip-border-width - The width of the chip border.
+ * @cssproperty --forge-chip-border-style - The style of the chip border.
+ * @cssproperty --forge-chip-border-color - The color of the chip border.
+ * @cssproperty --forge-chip-field-background - The background color of the chip field.
+ * @cssproperty --forge-chip-field-color - The text color of the chip field.
+ * @cssproperty --forge-chip-field-shape - The shape of the chip field.
+ * @cssproperty --forge-chip-field-border-color - The color of the chip field border.
+ * @cssproperty --forge-chip-field-cursor - The cursor style of the chip field.
+ * @cssproperty --forge-chip-checkmark-size - The size of the checkmark in chips.
+ * @cssproperty --forge-chip-checkmark-color - The color of the checkmark in chips.
+ * @cssproperty --forge-chip-checkmark-spacing - The spacing of the checkmark in chips.
+ * @cssproperty --forge-chip-avatar-size - The size of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-size-dense - The size of the avatar in dense chips.
+ * @cssproperty --forge-chip-avatar-font-size - The font size of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-font-size-dense - The font size of the avatar in dense chips.
+ * @cssproperty --forge-chip-avatar-spacing - The spacing of the avatar in chips.
+ * @cssproperty --forge-chip-avatar-spacing-dense - The spacing of the avatar in dense chips.
+ * @cssproperty --forge-chip-transition-duration - The duration of the chip transition.
+ * @cssproperty --forge-chip-transition-easing - The easing function of the chip transition.
+ * @cssproperty --forge-chip-checkmark-transition-delay - The delay of the checkmark transition in chips.
+ *
+ * @csspart root - The component's root element.
+ * @csspart trigger - The trigger element of the chip.
+ * @csspart focus-indicator - The focus indicator of the chip.
+ * @csspart state-layer - The state layer surface.
+ *
+ * @slot - The content of the chip.
+ * @slot start - The start content of the chip.
+ * @slot end - The end content of the chip.
  */
 let ChipComponent = class ChipComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            CHIP_CONSTANTS.attributes.TYPE,
-            CHIP_CONSTANTS.attributes.SELECTED,
-            CHIP_CONSTANTS.attributes.DISABLED,
-            CHIP_CONSTANTS.attributes.VALUE,
-            CHIP_CONSTANTS.attributes.DENSE,
-            CHIP_CONSTANTS.attributes.INVALID,
-            CHIP_CONSTANTS.attributes.EMULATE_FOCUS
-        ];
+        return Object.values(CHIP_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
-        IconRegistry.define(tylIconCancel);
+        IconRegistry.define(tylIconClose);
         attachShadowTemplate(this, template, styles);
         this._foundation = new ChipFoundation(new ChipAdapter(this));
     }
     connectedCallback() {
         this._foundation.initialize();
     }
-    disconnectedCallback() {
-        this._foundation.disconnect();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case CHIP_CONSTANTS.attributes.TYPE:
                 this.type = newValue;
                 break;
+            case CHIP_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
             case CHIP_CONSTANTS.attributes.SELECTED:
                 this.selected = coerceBoolean(newValue);
                 break;
-            case CHIP_CONSTANTS.attributes.DISABLED:
-                this.disabled = coerceBoolean(newValue);
-                break;
             case CHIP_CONSTANTS.attributes.INVALID:
                 this.invalid = coerceBoolean(newValue);
                 break;
-            case CHIP_CONSTANTS.attributes.VALUE:
-                this.value = newValue;
+            case CHIP_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
                 break;
             case CHIP_CONSTANTS.attributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case CHIP_CONSTANTS.attributes.EMULATE_FOCUS:
-                this.emulateFocus = coerceBoolean(newValue);
+            case CHIP_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.HREF:
+                this.href = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.DOWNLOAD:
+                this.download = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.REL:
+                this.rel = newValue;
+                break;
         }
     }
-    focus() {
-        this._foundation.setFocus();
+    focus(options) {
+        this._foundation.focus(options);
+    }
+    focusRemoveButton() {
+        this._foundation.focusRemoveButton();
     }
-    tryFocusDelete() {
-        this._foundation.tryFocusDelete();
+    click() {
+        this._foundation.click();
     }
 };
 __decorate([
@@ -78,26 +168,43 @@ __decorate([
 ], ChipComponent.prototype, "type", void 0);
 __decorate([
     FoundationProperty()
-], ChipComponent.prototype, "selected", void 0);
+], ChipComponent.prototype, "value", void 0);
 __decorate([
     FoundationProperty()
-], ChipComponent.prototype, "disabled", void 0);
+], ChipComponent.prototype, "selected", void 0);
 __decorate([
     FoundationProperty()
 ], ChipComponent.prototype, "invalid", void 0);
 __decorate([
     FoundationProperty()
-], ChipComponent.prototype, "value", void 0);
+], ChipComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
 ], ChipComponent.prototype, "dense", void 0);
 __decorate([
     FoundationProperty()
-], ChipComponent.prototype, "emulateFocus", void 0);
+], ChipComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "href", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "download", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "rel", void 0);
 ChipComponent = __decorate([
     CustomElement({
         name: CHIP_CONSTANTS.elementName,
-        dependencies: [IconComponent]
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent,
+            IconButtonComponent,
+            IconComponent
+        ]
     })
 ], ChipComponent);
 export { ChipComponent };

package/esm/chips/chip-set/chip-set-constants.d.ts

@@ -5,15 +5,21 @@
  */
 export declare const CHIP_SET_CONSTANTS: {
     elementName: "forge-chip-set";
-    attributes: {
+    observedAttributes: {
         VERTICAL: string;
         TYPE: string;
         DENSE: string;
         DISABLED: string;
+        INVALID: string;
+        THEME: string;
     };
-    classes: {
-        ROOT: string;
+    attributes: {
         VERTICAL: string;
+        TYPE: string;
+        DENSE: string;
+        DISABLED: string;
+        INVALID: string;
+        THEME: string;
     };
     selectors: {
         ROOT: string;

package/esm/chips/chip-set/chip-set-constants.js

@@ -5,22 +5,21 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}chip-set`;
-const attributes = {
+const observedAttributes = {
     VERTICAL: 'vertical',
     TYPE: 'type',
     DENSE: 'dense',
-    DISABLED: 'disabled'
-};
-const classes = {
-    ROOT: 'forge-chip-set',
-    VERTICAL: 'forge-chip-set--vertical'
+    DISABLED: 'disabled',
+    INVALID: 'invalid',
+    THEME: 'theme'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
-    ROOT: `.${classes.ROOT}`
+    ROOT: '.forge-chip-set'
 };
 export const CHIP_SET_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    classes,
     selectors
 };

package/esm/chips/chip-set/chip-set.d.ts

@@ -4,12 +4,14 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { ChipType } from '../chip/chip-constants';
+import { ChipTheme, ChipType } from '../chip/chip-constants';
 export interface IChipSetComponent extends IBaseComponent {
     vertical: boolean;
     type: ChipType;
     dense: boolean;
     disabled: boolean;
+    invalid: boolean;
+    theme: ChipTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,19 +19,54 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-chip-set>` custom element.
- *
  * @tag forge-chip-set
+ *
+ * @summary Chips sets are used to group multiple chips together and orchestrate their behavior.
+ *
+ * @property {boolean} [vertical=false] - Whether the chip set is vertical.
+ * @property {ChipType} [type='action'] - The type of chip.
+ * @property {boolean} [dense=false] - Whether the chip set is dense.
+ * @property {boolean} [disabled=false] - Whether the chip set is disabled.
+ * @property {boolean} [invalid=false] - Whether the chip set is invalid.
+ * @property {ChipTheme} [theme='primary'] - The theme of the chip set.
+ *
+ * @attribute {boolean} [vertical] - Whether the chip set is vertically oriented.
+ * @attribute {ChipType} [type] - The type of chips.
+ * @attribute {boolean} [dense] - Whether all chips in the chip set are dense.
+ * @attribute {boolean} [disabled] - Whether all chips in the chip set are disabled.
+ * @attribute {boolean} [invalid] - Whether all chips in the chip set are invalid.
+ * @attribute {ChipTheme} [theme] - The theme of the chips.
+ *
+ * @cssproperty --forge-chip-set-spacing - The spacing between chips.
+ *
+ * @csspart root - The component's root element.
+ *
+ * @slot - The chips to display in the chip set.
  */
 export declare class ChipSetComponent extends BaseComponent implements IChipSetComponent {
     static get observedAttributes(): string[];
-    private _foundation;
+    private _vertical;
+    private _type;
+    private _dense;
+    private _disabled;
+    private _invalid;
+    private _theme;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    vertical: boolean;
-    type: ChipType;
-    dense: boolean;
-    disabled: boolean;
+    private _onChipNavigate;
+    private _findChipDescendants;
+    private _syncChipsProperty;
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    get type(): ChipType;
+    set type(value: ChipType);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get theme(): ChipTheme;
+    set theme(value: ChipTheme);
 }