@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.12ec888.0

package/labs/gb/components/checkbox/{md-checkbox.js → checkbox-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
@@ -23,8 +23,22 @@ import { checkbox } from './checkbox.js';
 const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
 /**
  * A Material Design checkbox component.
+ *
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
+ * @csspart checkbox - The checkbox's root element.
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --container-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
  */
-let Checkbox = class Checkbox extends baseClass {
+export class CheckboxElement extends baseClass {
     constructor() {
         super(...arguments);
         /**
@@ -130,13 +144,13 @@ let Checkbox = class Checkbox extends baseClass {
     [getValidityAnchor]() {
         return this.input;
     }
-};
+}
 /** @nocollapse */
-Checkbox.shadowRootOptions = {
+CheckboxElement.shadowRootOptions = {
     mode: 'open',
     delegatesFocus: true,
 };
-Checkbox.styles = [
+CheckboxElement.styles = [
     focusRingStyles,
     rippleStyles,
     checkboxStyles,
@@ -151,24 +165,20 @@ Checkbox.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], Checkbox.prototype, "error", void 0);
+], CheckboxElement.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean })
-], Checkbox.prototype, "checked", void 0);
+], CheckboxElement.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean })
-], Checkbox.prototype, "indeterminate", void 0);
+], CheckboxElement.prototype, "indeterminate", void 0);
 __decorate([
     property({ type: Boolean })
-], Checkbox.prototype, "required", void 0);
+], CheckboxElement.prototype, "required", void 0);
 __decorate([
     property()
-], Checkbox.prototype, "value", void 0);
+], CheckboxElement.prototype, "value", void 0);
 __decorate([
     query('input', true)
-], Checkbox.prototype, "input", void 0);
-Checkbox = __decorate([
-    customElement('md-checkbox')
-], Checkbox);
-export { Checkbox };
-//# sourceMappingURL=md-checkbox.js.map
+], CheckboxElement.prototype, "input", void 0);
+//# sourceMappingURL=checkbox-element.js.map

package/labs/gb/components/checkbox/checkbox-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-element.js","sourceRoot":"","sources":["checkbox-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qDAAqD,CAAC;AAEtF,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,cAAc,MAAM,gBAAgB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC9E,wEAAwE;AAExE,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACvD,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,eAAgB,SAAQ,SAAS;IAA9C;;QAqBE;;WAEG;QACwB,UAAK,GAAG,KAAK,CAAC;QAEzC;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAY3C;;;;WAIG;QACwB,kBAAa,GAAG,KAAK,CAAC;QAEjD;;;;;WAKG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;;;WAIG;QACS,UAAK,GAAG,IAAI,CAAC;QAIzB;;;;;;WAMG;QACK,qBAAgB,GAAG,KAAK,CAAC;IA0EnC,CAAC;IAnHC;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,cAAc,CAAC,KAAc;QAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAClD,CAAC;IAmCkB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,WAAW,EAAC,GAAG,IAAuB,CAAC;QACzD,OAAO,IAAI,CAAA;;;iBAGE,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;;uBAEzB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;qBACxC,SAAS,IAAI,OAAO;uBAClB,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO;oBACvC,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,aAAa;mBACxB,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,WAAW;kBACf,IAAI,CAAC,YAAY;KAC9B,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAY;QAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;QAC1C,uEAAuE;IACzE,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,0DAA0D;QAC1D,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,oEAAoE;YACpE,mBAAmB;YACnB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;IAEQ,CAAC,eAAe,CAAC;QACxB,OAAO,IAAI,iBAAiB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAEQ,CAAC,iBAAiB,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;;AAhJD,kBAAkB;AACF,iCAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,sBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,cAAc;IACd,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAKyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CAAe;AAKd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAiB;AAiBhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sDAAuB;AAQtB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAkB;AAOhC;IAAX,QAAQ,EAAE;8CAAc;AAGR;IADhB,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;8CAC4B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A Material Design checkbox component.\n *\n * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class CheckboxElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    checkboxStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .checkbox {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the checkbox is invalid.\n   */\n  @property({type: Boolean}) error = false;\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * The default checked state of the checkbox.\n   */\n  get defaultChecked(): boolean {\n    return this.hasAttribute('checked');\n  }\n  set defaultChecked(value: boolean) {\n    this.toggleAttribute('checked', value || false);\n  }\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @query('input', true)\n  private readonly input!: HTMLInputElement | null;\n  /**\n   * Mimics the behavior of <input> dirty checkedness, where the `checked`\n   * attribute only updates the checked state if the checkbox has not been\n   * interacted with.\n   *\n   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n   */\n  private dirtyCheckedness = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    return html`\n      <input\n        part=\"checkbox\"\n        class=\"${checkbox({invalid: this.error})}\"\n        type=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-invalid=${ariaInvalid || this.error || nothing}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        .indeterminate=${this.indeterminate}\n        .checked=${this.checked}\n        @input=${this.handleInput}\n        @change=${this.handleChange} />\n    `;\n  }\n\n  private handleInput(event: Event) {\n    this.dirtyCheckedness = true;\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    this.dirtyCheckedness = true;\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'checked' && this.dirtyCheckedness) {\n      // The 'checked' attribute does not update checkboxes that have been\n      // interacted with.\n      return;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    this.dirtyCheckedness = false;\n    this.checked = this.defaultChecked;\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}

package/labs/gb/components/checkbox/checkbox.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,qDAKA,oDACA,gDDFE,mCCMF,gDDFE,8BCMF,iDACA,gDDHE,8DCOF,mBACA,+CACA,6CDNI,mFCUJ,iDDNI,qFCUJ,oDDLE,gCCSF,+CACA,2CDPI,uFCWJ,6CACA,2CDPE,kCCWF,sEDRI,yFCYJ,wEACA,0CDRE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}

package/labs/gb/components/checkbox/md-gb-checkbox.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CheckboxElement } from './checkbox-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-checkbox': CheckboxElement;
+    }
+}

package/labs/gb/components/checkbox/md-gb-checkbox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CheckboxElement } from './checkbox-element.js';
+customElements.define('md-gb-checkbox', CheckboxElement);
+//# sourceMappingURL=md-gb-checkbox.js.map

package/labs/gb/components/checkbox/md-gb-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-checkbox.js","sourceRoot":"","sources":["md-gb-checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AAStD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CheckboxElement} from './checkbox-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-checkbox': CheckboxElement;\n  }\n}\n\ncustomElements.define('md-gb-checkbox', CheckboxElement);\n"]}

package/labs/gb/components/chip/_chip-tokens.scss

@@ -0,0 +1,167 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.chip
+// --states="hovered|focused|pressed|dragged,:unselected|selected,:filter|input,with-leading-icon|with-avatar,with-trailing-icon,disabled"
+// --exclude=motion,state-layer,indicator
+
+@mixin root {
+  // LINT.IfChange
+  --avatar-opacity: unset;
+  // md.comp.chip.avatar.shape
+  --avatar-shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.avatar.size
+  --avatar-size: 24px;
+  --container-color: unset;
+  // md.comp.chip.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // --container-opacity: unset; // EDIT: unused
+  // md.comp.chip.gap.horizontal
+  --gap-horizontal: var(--md-sys-space-50);
+  // md.comp.chip.height
+  --height: 32px;
+  // md.comp.chip.label-text
+  --label-text: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.chip.label-text
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  // md.comp.chip.unselected.label-text.color
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  // --label-text-opacity: unset; // EDIT: unused
+  // ┌┄ md.comp.chip.label-text
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // md.comp.chip.unselected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  // --leading-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.leading-icon.size
+  --leading-icon-size: 18px;
+  // md.comp.chip.unselected.outline.color
+  --outline-color: var(--md-sys-color-outline-variant);
+  // --outline-opacity: unset; // EDIT: unused
+  // md.comp.chip.unselected.outline.width
+  --outline-width: 1px;
+  // md.comp.chip.padding.bottom
+  --padding-bottom: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.leading
+  --padding-leading: var(--md-sys-space-200);
+  // md.comp.chip.padding.top
+  --padding-top: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.trailing
+  --padding-trailing: var(--md-sys-space-200);
+  // md.comp.chip.unselected.shape
+  --shape: var(--md-sys-shape-corner-md);
+  // md.comp.chip.unselected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // --trailing-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.trailing-icon.size
+  --trailing-icon-size: 18px;
+  // LINT.ThenChange(md-gb-chip.ts) sync with `@cssprop` jsdoc tags
+}
+
+@mixin pressed {
+  // md.comp.chip.pressed.shape
+  --shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin dragged {
+  // md.comp.chip.dragged.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin selected {
+  // md.comp.chip.selected.container.color
+  --container-color: var(--md-sys-color-secondary-container);
+  // md.comp.chip.selected.label-text.color
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.outline.width
+  --outline-width: 0px;
+  // md.comp.chip.selected.shape
+  --shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.selected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin input {
+  // md.comp.chip.input.padding.leading
+  --padding-leading: var(--md-sys-space-150);
+  // md.comp.chip.input.padding.trailing
+  --padding-trailing: var(--md-sys-space-150);
+}
+
+@mixin with-leading-icon {
+  // md.comp.chip.with-leading-icon.padding.leading
+  --padding-leading: var(--md-sys-space-100);
+}
+
+@mixin with-avatar {
+  // md.comp.chip.with-avatar.padding.leading
+  --padding-leading: var(--md-sys-space-50);
+}
+
+@mixin with-trailing-icon {
+  // md.comp.chip.with-trailing-icon.padding.trailing
+  --padding-trailing: var(--md-sys-space-100);
+}
+
+@mixin disabled {
+  // md.comp.chip.disabled.avatar.opacity
+  --avatar-opacity: 0.38;
+  // ┌ md.comp.chip.disabled.label-text.opacity
+  // md.comp.chip.disabled.label-text.color
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.disabled.leading-icon.opacity
+  // md.comp.chip.disabled.leading-icon.color
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.unselected.disabled.outline.opacity
+  // md.comp.chip.unselected.disabled.outline.color
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);
+  // ┌ md.comp.chip.disabled.trailing-icon.opacity
+  // md.comp.chip.disabled.trailing-icon.color
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+}
+
+@mixin disabled-selected {
+  // ┌ md.comp.chip.selected.disabled.container.opacity
+  // md.comp.chip.selected.disabled.container.color
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.12);
+}
+
+// EDIT: Manual adjustments
+@mixin filter {
+  // Hoisted to root, so empty here to satisfy chip.scss mapping
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  --outline-width: 0;
+}
+
+@mixin outlined {
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-outline);
+  --outline-width: 1px;
+}

package/labs/gb/components/chip/chip-element.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type ChipColor, type ChipType } from './chip.js';
+/**
+ * A Material Design Expressive Chip component (`md-gb-chip`).
+ *
+ * @slot - Used to display the chip label text.
+ * @slot icon - Used to display an optional leading icon, checkmark, or avatar.
+ * @slot remove-icon - Used to display the trailing remove button icon when `removable="true"`.
+ * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed
+ * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles
+ * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed
+ * @csspart chip - The root container element.
+ * @cssprop --avatar-opacity
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-opacity
+ * @cssprop --gap-horizontal
+ * @cssprop --height
+ * @cssprop --label-text
+ * @cssprop --label-text-color
+ * @cssprop --label-text-opacity
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-opacity
+ * @cssprop --leading-icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-opacity
+ * @cssprop --outline-width
+ * @cssprop --padding-bottom
+ * @cssprop --padding-leading
+ * @cssprop --padding-top
+ * @cssprop --padding-trailing
+ * @cssprop --shape
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-opacity
+ * @cssprop --trailing-icon-size
+ */
+export declare class ChipElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    /** The color emphasis of the chip. Defaults to `outlined`. */
+    color: ChipColor;
+    /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */
+    type: ChipType;
+    /** Whether the filter or toggle chip is selected. */
+    selected: boolean;
+    /** Whether the chip is removable. */
+    removable: boolean;
+    /** Whether the chip is disabled. */
+    disabled: boolean;
+    /** Whether the chip is soft-disabled (`aria-disabled="true"` while preserving focusability). */
+    softDisabled: boolean;
+    /** The URL destination if `type="link"` or if `href` is set. */
+    href: string;
+    /** Where to display the linked `href` URL for a link chip. */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    private hasLeadingIcon;
+    private hasAvatar;
+    private hasRemoveIcon;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private renderLeadingIcon;
+    private renderRemoveButton;
+    private handleIconSlotChange;
+    private handleRemoveIconSlotChange;
+    private handleChange;
+    private handleRemove;
+}

package/labs/gb/components/chip/chip-element.js

@@ -0,0 +1,233 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import focusRingStyles from '../focus/focus-ring.cssresult.js';
+import rippleStyles from '../ripple/ripple.cssresult.js';
+import { chip } from './chip.js';
+import { styles as chipStyles } from './chip.cssresult.js';
+/**
+ * A Material Design Expressive Chip component (`md-gb-chip`).
+ *
+ * @slot - Used to display the chip label text.
+ * @slot icon - Used to display an optional leading icon, checkmark, or avatar.
+ * @slot remove-icon - Used to display the trailing remove button icon when `removable="true"`.
+ * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed
+ * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles
+ * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed
+ * @csspart chip - The root container element.
+ * @cssprop --avatar-opacity
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-opacity
+ * @cssprop --gap-horizontal
+ * @cssprop --height
+ * @cssprop --label-text
+ * @cssprop --label-text-color
+ * @cssprop --label-text-opacity
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-opacity
+ * @cssprop --leading-icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-opacity
+ * @cssprop --outline-width
+ * @cssprop --padding-bottom
+ * @cssprop --padding-leading
+ * @cssprop --padding-top
+ * @cssprop --padding-trailing
+ * @cssprop --shape
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-opacity
+ * @cssprop --trailing-icon-size
+ */
+export class ChipElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The color emphasis of the chip. Defaults to `outlined`. */
+        this.color = 'outlined';
+        /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */
+        this.type = 'action';
+        /** Whether the filter or toggle chip is selected. */
+        this.selected = false;
+        /** Whether the chip is removable. */
+        this.removable = false;
+        /** Whether the chip is disabled. */
+        this.disabled = false;
+        /** Whether the chip is soft-disabled (`aria-disabled="true"` while preserving focusability). */
+        this.softDisabled = false;
+        /** The URL destination if `type="link"` or if `href` is set. */
+        this.href = '';
+        /** Where to display the linked `href` URL for a link chip. */
+        this.target = '';
+        this.hasLeadingIcon = false;
+        this.hasAvatar = false;
+        this.hasRemoveIcon = false;
+    }
+    render() {
+        const isFilterSelected = (this.type === 'filter' || this.type === 'toggle') && this.selected;
+        const withLeadingIcon = this.hasLeadingIcon || isFilterSelected;
+        const withAvatar = this.hasAvatar;
+        const chipClasses = chip({
+            color: this.color,
+            type: this.href ? 'link' : this.type,
+            selected: this.selected,
+            removable: this.removable,
+            disabled: this.softDisabled || this.disabled,
+            withLeadingIcon: withLeadingIcon && !withAvatar,
+            withAvatar,
+            withTrailingIcon: this.removable || this.hasRemoveIcon,
+        });
+        if (this.href || this.type === 'link') {
+            return html `<a
+        part="chip"
+        class="${chipClasses}"
+        href=${this.href}
+        target=${this.target ||
+                nothing}
+        aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}
+        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
+        ${this.renderContent(withLeadingIcon, isFilterSelected)}
+      </a>`;
+        }
+        if (this.removable) {
+            return html `<div
+        part="chip"
+        class="${chipClasses}"
+        role="row"
+        aria-pressed=${this.type === 'filter' || this.type === 'toggle'
+                ? (this.selected ? 'true' : 'false')
+                : nothing}
+        @change=${this.handleChange}>
+        <button
+          class="chip-action focus-ring-target"
+          type="button"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.softDisabled ? 'true' : nothing}>
+          ${this.renderContent(withLeadingIcon, isFilterSelected)}
+        </button>
+        ${this.renderRemoveButton()}
+      </div>`;
+        }
+        return html `<button
+      part="chip"
+      class="${chipClasses}"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled ? 'true' : nothing}
+      aria-pressed=${this.type === 'filter' || this.type === 'toggle'
+            ? (this.selected ? 'true' : 'false')
+            : nothing}
+      @change=${this.handleChange}>
+      ${this.renderContent(withLeadingIcon, isFilterSelected)}
+    </button>`;
+    }
+    renderContent(withLeadingIcon, isFilterSelected) {
+        return html `
+      ${this.renderLeadingIcon(withLeadingIcon, isFilterSelected)}
+      <slot></slot>
+    `;
+    }
+    renderLeadingIcon(withLeadingIcon, isFilterSelected) {
+        return html `<span
+      class="chip-icon"
+      style="${withLeadingIcon ? '' : 'display: none;'}">
+      <slot name="icon" @slotchange=${this.handleIconSlotChange}>
+        ${isFilterSelected ? html `✓` : nothing}
+      </slot>
+    </span>`;
+    }
+    renderRemoveButton() {
+        return html `<button
+      class="chip-remove focus-ring-outer"
+      type="button"
+      aria-label="Remove"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled ? 'true' : nothing}
+      @click=${this.handleRemove}>
+      <slot
+        name="remove-icon"
+        @slotchange=${this.handleRemoveIconSlotChange}
+        >✕</slot
+      >
+    </button>`;
+    }
+    handleIconSlotChange(event) {
+        const slot = event.target;
+        const elements = slot.assignedElements({ flatten: true });
+        this.hasLeadingIcon = elements.length > 0;
+        this.hasAvatar = elements.some((el) => el.classList.contains('chip-avatar'));
+    }
+    handleRemoveIconSlotChange(event) {
+        const slot = event.target;
+        this.hasRemoveIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    handleChange(event) {
+        this.selected = event.target.ariaPressed === 'true';
+        redispatchEvent(this, event);
+    }
+    handleRemove(event) {
+        event.stopPropagation();
+        if (this.disabled || this.softDisabled)
+            return;
+        this.dispatchEvent(new Event('remove', { bubbles: true, composed: true }));
+    }
+}
+ChipElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    chipStyles,
+    css `
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+      .chip {
+        flex: 1;
+      }
+      .chip-icon {
+        display: inline-flex;
+        align-items: center;
+      }
+    `,
+];
+__decorate([
+    property()
+], ChipElement.prototype, "color", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], ChipElement.prototype, "softDisabled", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "href", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "target", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasAvatar", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasRemoveIcon", void 0);
+//# sourceMappingURL=chip-element.js.map

package/labs/gb/components/chip/chip-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-element.js","sourceRoot":"","sources":["chip-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport focusRingStyles from '../focus/focus-ring.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport {chip, type ChipColor, type ChipType} from './chip.js';\nimport {styles as chipStyles} from './chip.cssresult.js';\n\n/**\n * A Material Design Expressive Chip component (`md-gb-chip`).\n *\n * @slot - Used to display the chip label text.\n * @slot icon - Used to display an optional leading icon, checkmark, or avatar.\n * @slot remove-icon - Used to display the trailing remove button icon when `removable=\"true\"`.\n * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed\n * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles\n * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed\n * @csspart chip - The root container element.\n * @cssprop --avatar-opacity\n * @cssprop --avatar-shape\n * @cssprop --avatar-size\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-opacity\n * @cssprop --gap-horizontal\n * @cssprop --height\n * @cssprop --label-text\n * @cssprop --label-text-color\n * @cssprop --label-text-opacity\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-opacity\n * @cssprop --leading-icon-size\n * @cssprop --outline-color\n * @cssprop --outline-opacity\n * @cssprop --outline-width\n * @cssprop --padding-bottom\n * @cssprop --padding-leading\n * @cssprop --padding-top\n * @cssprop --padding-trailing\n * @cssprop --shape\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-opacity\n * @cssprop --trailing-icon-size\n */\nexport class ChipElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    chipStyles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n      .chip {\n        flex: 1;\n      }\n      .chip-icon {\n        display: inline-flex;\n        align-items: center;\n      }\n    `,\n  ];\n\n  /** The color emphasis of the chip. Defaults to `outlined`. */\n  @property() color: ChipColor = 'outlined';\n\n  /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */\n  @property() type: ChipType = 'action';\n\n  /** Whether the filter or toggle chip is selected. */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /** Whether the chip is removable. */\n  @property({type: Boolean, reflect: true}) removable = false;\n\n  /** Whether the chip is disabled. */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /** Whether the chip is soft-disabled (`aria-disabled=\"true\"` while preserving focusability). */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /** The URL destination if `type=\"link\"` or if `href` is set. */\n  @property() href = '';\n\n  /** Where to display the linked `href` URL for a link chip. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @state() private hasLeadingIcon = false;\n  @state() private hasAvatar = false;\n  @state() private hasRemoveIcon = false;\n\n  protected override render() {\n    const isFilterSelected =\n      (this.type === 'filter' || this.type === 'toggle') && this.selected;\n    const withLeadingIcon = this.hasLeadingIcon || isFilterSelected;\n    const withAvatar = this.hasAvatar;\n\n    const chipClasses = chip({\n      color: this.color,\n      type: this.href ? 'link' : this.type,\n      selected: this.selected,\n      removable: this.removable,\n      disabled: this.softDisabled || this.disabled,\n      withLeadingIcon: withLeadingIcon && !withAvatar,\n      withAvatar,\n      withTrailingIcon: this.removable || this.hasRemoveIcon,\n    });\n\n    if (this.href || this.type === 'link') {\n      return html`<a\n        part=\"chip\"\n        class=\"${chipClasses}\"\n        href=${this.href}\n        target=${(this.target as '_blank' | '_parent' | '_self' | '_top') ||\n        nothing}\n        aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        ${this.renderContent(withLeadingIcon, isFilterSelected)}\n      </a>`;\n    }\n\n    if (this.removable) {\n      return html`<div\n        part=\"chip\"\n        class=\"${chipClasses}\"\n        role=\"row\"\n        aria-pressed=${this.type === 'filter' || this.type === 'toggle'\n          ? (this.selected ? 'true' : 'false')\n          : nothing}\n        @change=${this.handleChange}>\n        <button\n          class=\"chip-action focus-ring-target\"\n          type=\"button\"\n          ?disabled=${this.disabled}\n          aria-disabled=${this.softDisabled ? 'true' : nothing}>\n          ${this.renderContent(withLeadingIcon, isFilterSelected)}\n        </button>\n        ${this.renderRemoveButton()}\n      </div>`;\n    }\n\n    return html`<button\n      part=\"chip\"\n      class=\"${chipClasses}\"\n      type=\"button\"\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled ? 'true' : nothing}\n      aria-pressed=${this.type === 'filter' || this.type === 'toggle'\n        ? (this.selected ? 'true' : 'false')\n        : nothing}\n      @change=${this.handleChange}>\n      ${this.renderContent(withLeadingIcon, isFilterSelected)}\n    </button>`;\n  }\n\n  private renderContent(withLeadingIcon: boolean, isFilterSelected: boolean) {\n    return html`\n      ${this.renderLeadingIcon(withLeadingIcon, isFilterSelected)}\n      <slot></slot>\n    `;\n  }\n\n  private renderLeadingIcon(\n    withLeadingIcon: boolean,\n    isFilterSelected: boolean,\n  ) {\n    return html`<span\n      class=\"chip-icon\"\n      style=\"${withLeadingIcon ? '' : 'display: none;'}\">\n      <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}>\n        ${isFilterSelected ? html`✓` : nothing}\n      </slot>\n    </span>`;\n  }\n\n  private renderRemoveButton() {\n    return html`<button\n      class=\"chip-remove focus-ring-outer\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled ? 'true' : nothing}\n      @click=${this.handleRemove}>\n      <slot\n        name=\"remove-icon\"\n        @slotchange=${this.handleRemoveIconSlotChange}\n        >✕</slot\n      >\n    </button>`;\n  }\n\n  private handleIconSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const elements = slot.assignedElements({flatten: true});\n    this.hasLeadingIcon = elements.length > 0;\n    this.hasAvatar = elements.some((el) => el.classList.contains('chip-avatar'));\n  }\n\n  private handleRemoveIconSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasRemoveIcon = slot.assignedNodes({flatten: true}).length > 0;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n\n  private handleRemove(event: Event) {\n    event.stopPropagation();\n    if (this.disabled || this.softDisabled) return;\n    this.dispatchEvent(new Event('remove', {bubbles: true, composed: true}));\n  }\n}\n"]}

package/labs/gb/components/chip/chip.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.chip{.chip{--avatar-opacity: unset;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-size: 24px;--container-color: unset;--container-elevation: var(--md-sys-elevation-shadow-0);--gap-horizontal: var(--md-sys-space-50);--height: 32px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: var(--md-sys-color-on-surface-variant);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 18px;--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px;--padding-bottom: var(--md-sys-space-75);--padding-leading: var(--md-sys-space-200);--padding-top: var(--md-sys-space-75);--padding-trailing: var(--md-sys-space-200);--shape: var(--md-sys-shape-corner-md);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 18px}.chip.chip-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--label-text-color: var(--md-sys-color-on-surface);--outline-width: 0}.chip.chip-filled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-0);--label-text-color: var(--md-sys-color-on-surface);--outline-width: 0}.chip.chip-tonal{--container-color: var(--md-sys-color-secondary-container);--container-elevation: var(--md-sys-elevation-shadow-0);--label-text-color: var(--md-sys-color-on-secondary-container);--outline-width: 0}.chip.chip-outlined{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--label-text-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-outline);--outline-width: 1px}.chip:is(.chip-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--outline-width: 0px;--shape: var(--md-sys-shape-corner-full);--trailing-icon-color: var(--md-sys-color-on-secondary-container)}.chip.chip-input{--padding-leading: var(--md-sys-space-150);--padding-trailing: var(--md-sys-space-150)}.chip.chip-with-leading-icon{--padding-leading: var(--md-sys-space-100)}.chip.chip-with-trailing-icon{--padding-trailing: var(--md-sys-space-100)}.chip.chip-with-avatar{--padding-leading: var(--md-sys-space-50)}.chip:is(:disabled,.disabled,[aria-disabled=true]){--avatar-opacity: 0.38;--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38)}.chip{display:inline-flex;align-items:center;justify-content:center;height:var(--height);gap:var(--gap-horizontal);padding-inline:var(--padding-leading) var(--padding-trailing);padding-block:var(--padding-top) var(--padding-bottom);border:var(--outline-width) solid var(--outline-color);border-radius:var(--shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);box-sizing:border-box;user-select:none;white-space:nowrap;--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.chip:not(:disabled,.disabled,[aria-disabled=true]){cursor:pointer}.chip .chip-action,.chip .chip-remove{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-horizontal);background:rgba(0,0,0,0);border:none;outline:none;color:inherit;font:inherit;padding:0;margin:0;height:100%;cursor:inherit}.chip .chip-remove{border-radius:50%;aspect-ratio:1;margin-inline-start:4px;outline:var(--focus-ring-outline);--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}/*# sourceMappingURL=chip.css.map */

package/labs/gb/components/chip/chip.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["chip.scss","_chip-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBACE,MCGA,wBAEA,gDAEA,oBACA,yBAEA,wDAGA,yCAEA,eAEA,+CAEA,yDAEA,2DAGA,iEAEA,6DAGA,0BAEA,qDAGA,qBAEA,yCAEA,2CAEA,sCAEA,4CAEA,uCAEA,8DAGA,2BD/CE,oBC+HF,6DACA,wDACA,mDACA,mBD/HE,kBCmIF,yDACA,wDACA,mDACA,mBDnIE,iBCuIF,2DACA,wDACA,+DACA,mBDvIE,oBC2IF,+BACA,wDACA,mDACA,6CACA,qBD5IE,6CCmDF,2DAEA,+DAEA,iEAEA,qBAEA,yCAEA,kEDvDE,iBC4DF,2CAEA,4CD3DE,6BCgEF,2CD7DE,8BCuEF,4CDpEE,uBC+DF,0CD5DE,mDCsEF,uBAGA,0EAGA,4EAGA,sEAGA,6ED9EE,MACE,oBACA,mBACA,uBACA,qBACA,0BACA,8DACA,uDACA,uDACA,2BACA,sCACA,wCACA,8BACA,uBACA,0CACA,+CACA,sBACA,iBACA,mBACA,2CACA,yCAEF,oDACE,eAGF,sCAEE,oBACA,mBACA,uBACA,0BACA,yBACA,YACA,aACA,cACA,aACA,UACA,SACA,YACA,eAEF,mBACE,kBACA,eACA,wBACA,kCACA,4CACA","file":"chip.css"}