@material/web 2.4.2-nightly.f57b157.0 → 2.4.2-nightly.f7fd08c.0

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

@@ -1 +1 @@
-{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,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,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAA5B;;QAqBL,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;IAsBjD,CAAC;IApBoB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;WAEN,CAAC;IACV,CAAC;;AAhDD,kBAAkB;AACF,sBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,WAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAGU;IAAX,QAAQ,EAAE;mCAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAqB;AA5BpC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CAkDhB","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 {customElement, property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design card component. */\n    'md-card': Card;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card 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    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .card {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.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 {\n  css,\n  CSSResultOrNative,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\nimport {hasSlotted} from '../shared/has-slotted.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design card component. */\n    'md-card': Card;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card 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    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .card {\n        flex: 1;\n        position: relative;\n      }\n      .card:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .card.card-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  @state() private hideOutline = false;\n\n  private lastFiredEnabledState?: boolean;\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'md-gb:set-show-outline',\n      this.handleSetShowOutline,\n    );\n  }\n\n  private readonly handleSetShowOutline = (event: Event) => {\n    const customEvent = event as CustomEvent<{shown: boolean}>;\n    this.hideOutline = !customEvent.detail.shown;\n  };\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !this.disabled;\n\n    if (this.lastFiredEnabledState === enabled) return;\n\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"container\"]',\n    ) as HTMLSlotElement;\n    if (slot) {\n      for (const element of slot.assignedElements({flatten: true})) {\n        element.dispatchEvent(\n          new CustomEvent('md-gb:set-enabled', {\n            detail: {enabled},\n          }),\n        );\n      }\n    }\n    this.lastFiredEnabledState = enabled;\n  }\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n        classes: {\n          'card-hide-outline': this.hideOutline,\n        },\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </div>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !this.disabled;\n\n    for (const element of slot.assignedElements({flatten: true})) {\n      element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n      element.dispatchEvent(\n        new CustomEvent('md-gb:set-enabled', {\n          detail: {enabled},\n        }),\n      );\n    }\n  }\n}\n"]}

package/labs/gb/components/list/md-list-item.d.ts

@@ -10,7 +10,7 @@ declare global {
         'md-list-item': ListItem;
     }
 }
-declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("@material/web/labs/behaviors/element-internals.js").WithElementInternals>>;
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>>;
 /**
  * A Material Design list item component.
  */

package/labs/gb/components/list/md-list-item.js

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
-import { internals, mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
-import { hasSlotted } from '@material/web/labs/gb/components/shared/has-slotted.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import {styles as focusRingStyles} from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import {styles as rippleStyles} from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { hasSlotted } from '../shared/has-slotted.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only
 import listStyles from './list.css' with { type: 'css' }; // github-only
 // import {styles as listStyles} from './list.cssresult.js'; // google3-only
 import { listItem } from './list.js';

package/labs/gb/components/list/md-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,UAAU,EAAC,MAAM,wDAAwD,CAAC;AAClF,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,uDAAuD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtH,4HAA4H;AAC5H,OAAO,YAAY,MAAM,oDAAoD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAChH,sHAAsH;AACtH,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IA6BrC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA3FD,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,eAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;gDACvC;AAhDZ,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CA6FpB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '@material/web/labs/behaviors/element-internals.js';\nimport {hasSlotted} from '@material/web/labs/gb/components/shared/has-slotted.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design list item component. */\n    'md-list-item': ListItem;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n */\n@customElement('md-list-item')\nexport class ListItem extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    listStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .list-item {\n        flex: 1;\n        align-items: inherit;\n      }\n      :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'listitem';\n  }\n\n  /**\n   * Whether the list item is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether the list item is disabled.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Whether the list item is non-interactive.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'static'})\n  nonInteractive = false;\n\n  protected override render() {\n    const state = {\n      checked: this.checked,\n      disabled: this.disabled,\n      static: this.nonInteractive,\n    };\n    if (this.nonInteractive) {\n      return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n        >${this.renderContent()}</div\n      >`;\n    }\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<button\n      part=\"list-item\"\n      class=\"${listItem(state)}\"\n      ?disabled=${this.disabled}\n      aria-label=${ariaLabel || nothing}>\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderContent() {\n    return html`\n      <span class=\"list-item-leading\">\n        <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n        <slot name=\"leading\" ${hasSlotted()}></slot>\n      </span>\n      <span class=\"list-item-content\">\n        <slot name=\"overline\" class=\"list-item-overline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n      </span>\n      <span class=\"list-item-trailing\">\n        <slot\n          name=\"trailing-text\"\n          class=\"list-item-trailing-text\"\n          ${hasSlotted()}></slot>\n        <slot name=\"trailing\" ${hasSlotted()}></slot>\n      </span>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IA6BrC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA3FD,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,eAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;gDACvC;AAhDZ,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CA6FpB","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 {customElement, property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design list item component. */\n    'md-list-item': ListItem;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n */\n@customElement('md-list-item')\nexport class ListItem extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    listStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .list-item {\n        flex: 1;\n        align-items: inherit;\n      }\n      :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'listitem';\n  }\n\n  /**\n   * Whether the list item is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether the list item is disabled.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Whether the list item is non-interactive.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'static'})\n  nonInteractive = false;\n\n  protected override render() {\n    const state = {\n      checked: this.checked,\n      disabled: this.disabled,\n      static: this.nonInteractive,\n    };\n    if (this.nonInteractive) {\n      return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n        >${this.renderContent()}</div\n      >`;\n    }\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<button\n      part=\"list-item\"\n      class=\"${listItem(state)}\"\n      ?disabled=${this.disabled}\n      aria-label=${ariaLabel || nothing}>\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderContent() {\n    return html`\n      <span class=\"list-item-leading\">\n        <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n        <slot name=\"leading\" ${hasSlotted()}></slot>\n      </span>\n      <span class=\"list-item-content\">\n        <slot name=\"overline\" class=\"list-item-overline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n      </span>\n      <span class=\"list-item-trailing\">\n        <slot\n          name=\"trailing-text\"\n          class=\"list-item-trailing-text\"\n          ${hasSlotted()}></slot>\n        <slot name=\"trailing\" ${hasSlotted()}></slot>\n      </span>\n    `;\n  }\n}\n"]}

package/labs/gb/components/ripple/ripple.js

@@ -55,6 +55,9 @@ export function setupRipple(ripple, opts) {
                 });
             }
         }
+        catch {
+            // Ignore errors if the properties are already registered.
+        }
         finally {
             ripplePropertiesRegistered = true;
         }

package/labs/gb/components/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createElementDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Ripple classes. */\nexport const RIPPLE_CLASSES = {\n  ripple: 'ripple',\n  rippleTarget: 'ripple-target',\n  rippleHost: 'ripple-host',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `rippleClasses()` function. */\nexport interface RippleClassesState {\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the ripple classes to apply to an element based on the given state.\n *\n * @param state The state of the ripple.\n * @return An object of class names and truthy values if they apply.\n */\nexport function rippleClasses({\n  hover = false,\n  active = false,\n  disabled = false,\n}: RippleClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: true,\n    [RIPPLE_CLASSES.hover]: hover,\n    [RIPPLE_CLASSES.active]: active,\n    [RIPPLE_CLASSES.disabled]: disabled,\n  };\n}\n\nconst MINIMUM_PRESS_MS = 225;\nlet ripplePropertiesRegistered = false;\n\n/**\n * Sets up ripple functionality for the given element.\n *\n * @param ripple The element on which to set up ripple functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRipple(\n  ripple: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  if (!ripplePropertiesRegistered) {\n    const properties = [\n      ['--ripple-scale', '0%'],\n      ['--ripple-hover-opacity', '0%'],\n      ['--ripple-press-opacity', '0%'],\n      ['--ripple-x', '50%'],\n      ['--ripple-y', '50%'],\n    ];\n\n    try {\n      for (const [property, value] of properties) {\n        CSS.registerProperty({\n          name: property,\n          syntax: '<percentage>',\n          inherits: false,\n          initialValue: value,\n        });\n      }\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  const activateRipple = () => {\n    // If the ripple is already active, restart the current press animation.\n    if (ripple.classList.contains(RIPPLE_CLASSES.active)) {\n      const pressAnimation = ripple\n        .getAnimations()\n        .find(\n          (animation) =>\n            (animation as Partial<CSSAnimation>).animationName ===\n            'ripple-press',\n        );\n      pressAnimation?.cancel();\n      pressAnimation?.play();\n    }\n\n    // Emulate the `:active` class for a minimum press duration to show the\n    // ripple effect on short clicks.\n    ripple.classList.add(RIPPLE_CLASSES.active);\n    clearTimeout(minimumPressTimeoutId);\n    minimumPressTimeoutId = setTimeout(() => {\n      ripple.classList.remove(RIPPLE_CLASSES.active);\n    }, MINIMUM_PRESS_MS);\n  };\n\n  // Return true if the ripple is disabled, or if the ripple class has been\n  // removed. This allows components to disable and re-enable ripple behavior.\n  const isRippleDisabled = () =>\n    isDisabled(ripple) || !ripple.matches(`.${RIPPLE_CLASSES.ripple}`);\n\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (isRippleDisabled()) return;\n      // Set ripple position to the pointer position.\n      const rect = ripple.getBoundingClientRect();\n      const x = (event.clientX - rect.x) / rect.width;\n      const y = (event.clientY - rect.y) / rect.height;\n      ripple.style.setProperty('--ripple-x', `${x * 100}%`);\n      ripple.style.setProperty('--ripple-y', `${y * 100}%`);\n      activateRipple();\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'keydown',\n    (event: KeyboardEvent): void => {\n      // Reset ripple pointer position when a key is pressed.\n      ripple.style.removeProperty('--ripple-x');\n      ripple.style.removeProperty('--ripple-y');\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'click',\n    (event) => {\n      // A UIEvent.detail click count of 0 indicates the click was not triggered\n      // by a pointer. Show the ripple press effect for these clicks as well.\n      if (event.detail === 0 && !isRippleDisabled()) {\n        activateRipple();\n      }\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds updates the position of a ripple to match pointer\n * interactions. Use with the `.ripple` class.\n *\n * @example\n * ```ts\n * class Component extends LitElement {\n *   static styles = [rippleStyles, css`...`];\n *\n *   render() {\n *     return html`<button class=\"ripple\" ${ripple()}>Ripple effect</button>`;\n *   }\n * }\n * ```\n *\n * Use the `.ripple-target` class if the interactive element is a parent or\n * child of the ripple element.\n *\n * The `ripple()` directive should be applied to the parent element, which may\n * be the `.ripple-target` instead of the `.ripple`.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"card ripple\" ${ripple()}>\n *     Child interactive element\n *     <button class=\"ripple-target card-btn\"></button>\n *   </div>\n *\n *   <button class=\"ripple-target\" ${ripple()}>\n *     Parent interactive element\n *     <span class=\"ripple\"></span>\n *   </button>\n * `;\n * ```\n */\nexport const ripple = createElementDirective(setupRipple);\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createElementDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Ripple classes. */\nexport const RIPPLE_CLASSES = {\n  ripple: 'ripple',\n  rippleTarget: 'ripple-target',\n  rippleHost: 'ripple-host',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `rippleClasses()` function. */\nexport interface RippleClassesState {\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the ripple classes to apply to an element based on the given state.\n *\n * @param state The state of the ripple.\n * @return An object of class names and truthy values if they apply.\n */\nexport function rippleClasses({\n  hover = false,\n  active = false,\n  disabled = false,\n}: RippleClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: true,\n    [RIPPLE_CLASSES.hover]: hover,\n    [RIPPLE_CLASSES.active]: active,\n    [RIPPLE_CLASSES.disabled]: disabled,\n  };\n}\n\nconst MINIMUM_PRESS_MS = 225;\nlet ripplePropertiesRegistered = false;\n\n/**\n * Sets up ripple functionality for the given element.\n *\n * @param ripple The element on which to set up ripple functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRipple(\n  ripple: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  if (!ripplePropertiesRegistered) {\n    const properties = [\n      ['--ripple-scale', '0%'],\n      ['--ripple-hover-opacity', '0%'],\n      ['--ripple-press-opacity', '0%'],\n      ['--ripple-x', '50%'],\n      ['--ripple-y', '50%'],\n    ];\n\n    try {\n      for (const [property, value] of properties) {\n        CSS.registerProperty({\n          name: property,\n          syntax: '<percentage>',\n          inherits: false,\n          initialValue: value,\n        });\n      }\n    } catch {\n      // Ignore errors if the properties are already registered.\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  const activateRipple = () => {\n    // If the ripple is already active, restart the current press animation.\n    if (ripple.classList.contains(RIPPLE_CLASSES.active)) {\n      const pressAnimation = ripple\n        .getAnimations()\n        .find(\n          (animation) =>\n            (animation as Partial<CSSAnimation>).animationName ===\n            'ripple-press',\n        );\n      pressAnimation?.cancel();\n      pressAnimation?.play();\n    }\n\n    // Emulate the `:active` class for a minimum press duration to show the\n    // ripple effect on short clicks.\n    ripple.classList.add(RIPPLE_CLASSES.active);\n    clearTimeout(minimumPressTimeoutId);\n    minimumPressTimeoutId = setTimeout(() => {\n      ripple.classList.remove(RIPPLE_CLASSES.active);\n    }, MINIMUM_PRESS_MS);\n  };\n\n  // Return true if the ripple is disabled, or if the ripple class has been\n  // removed. This allows components to disable and re-enable ripple behavior.\n  const isRippleDisabled = () =>\n    isDisabled(ripple) || !ripple.matches(`.${RIPPLE_CLASSES.ripple}`);\n\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (isRippleDisabled()) return;\n      // Set ripple position to the pointer position.\n      const rect = ripple.getBoundingClientRect();\n      const x = (event.clientX - rect.x) / rect.width;\n      const y = (event.clientY - rect.y) / rect.height;\n      ripple.style.setProperty('--ripple-x', `${x * 100}%`);\n      ripple.style.setProperty('--ripple-y', `${y * 100}%`);\n      activateRipple();\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'keydown',\n    (event: KeyboardEvent): void => {\n      // Reset ripple pointer position when a key is pressed.\n      ripple.style.removeProperty('--ripple-x');\n      ripple.style.removeProperty('--ripple-y');\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'click',\n    (event) => {\n      // A UIEvent.detail click count of 0 indicates the click was not triggered\n      // by a pointer. Show the ripple press effect for these clicks as well.\n      if (event.detail === 0 && !isRippleDisabled()) {\n        activateRipple();\n      }\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds updates the position of a ripple to match pointer\n * interactions. Use with the `.ripple` class.\n *\n * @example\n * ```ts\n * class Component extends LitElement {\n *   static styles = [rippleStyles, css`...`];\n *\n *   render() {\n *     return html`<button class=\"ripple\" ${ripple()}>Ripple effect</button>`;\n *   }\n * }\n * ```\n *\n * Use the `.ripple-target` class if the interactive element is a parent or\n * child of the ripple element.\n *\n * The `ripple()` directive should be applied to the parent element, which may\n * be the `.ripple-target` instead of the `.ripple`.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"card ripple\" ${ripple()}>\n *     Child interactive element\n *     <button class=\"ripple-target card-btn\"></button>\n *   </div>\n *\n *   <button class=\"ripple-target\" ${ripple()}>\n *     Parent interactive element\n *     <span class=\"ripple\"></span>\n *   </button>\n * `;\n * ```\n */\nexport const ripple = createElementDirective(setupRipple);\n"]}

package/labs/gb/components/splitbutton/_split-button-tokens.scss

@@ -0,0 +1,135 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --between-space: 2px;
+}
+
+@mixin button {
+  --icon-size: 0;
+  --inner-corner-size: 0;
+  --outer-corner-size: calc(var(--container-height) / 2);
+  --leading-space: 0;
+  --trailing-space: 0;
+}
+
+@mixin button-xs {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-xs-leading {
+  --leading-space: 12px;
+  --trailing-space: 10px;
+}
+
+@mixin button-xs-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-xs-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-xs-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-sm {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-sm-leading {
+  --leading-space: 16px;
+  --trailing-space: 12px;
+}
+
+@mixin button-sm-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-sm-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-sm-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md {
+  --icon-size: 26px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-md-leading {
+  --leading-space: 24px;
+  --trailing-space: 24px;
+}
+
+@mixin button-md-trailing {
+  --leading-space: 15px;
+  --trailing-space: 15px;
+}
+
+@mixin button-md-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-lg {
+  --icon-size: 38px;
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-lg-leading {
+  --leading-space: 48px;
+  --trailing-space: 48px;
+}
+
+@mixin button-lg-trailing {
+  --leading-space: 29px;
+  --trailing-space: 29px;
+}
+
+@mixin button-lg-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-lg-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl {
+  --icon-size: 50px;
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-xl-leading {
+  --leading-space: 64px;
+  --trailing-space: 64px;
+}
+
+@mixin button-xl-trailing {
+  --leading-space: 43px;
+  --trailing-space: 43px;
+}
+
+@mixin button-xl-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-trailing-selected {
+  --inner-corner-size: calc(var(--container-height) / 2);
+}

package/labs/gb/components/splitbutton/md-split-button.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type SplitButtonColor, type SplitButtonSize } from './split-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design split button component. */
+        'md-split-button': SplitButton;
+    }
+}
+/**
+ * A Material Design split button component.
+ */
+export declare class SplitButton extends LitElement {
+    static styles: CSSResultOrNative[];
+    color: SplitButtonColor;
+    size: SplitButtonSize;
+    selected: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateSlotFocusVisible;
+    private cleanupToggleListener?;
+    private handleTrailingSlotchange;
+}

package/labs/gb/components/splitbutton/md-split-button.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { button } from '../button/button.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import buttonStyles from '../button/button.css' with { type: 'css' }; // github-only
+// import buttonStyles from '../button/button.cssresult.js'; // google3-only
+import splitButtonStyles from './split-button.css' with { type: 'css' }; // github-only
+// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only
+import { splitButton, } from './split-button.js';
+/**
+ * A Material Design split button component.
+ */
+let SplitButton = class SplitButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'filled';
+        this.size = 'sm';
+        this.selected = false;
+    }
+    render() {
+        const buttonConfig = {
+            color: this.color,
+            size: this.size,
+        };
+        return html `<div part="split-btn" class="${splitButton(this)}">
+      <slot
+        name="leading"
+        part="leading-btn"
+        class="${button(buttonConfig)}"
+        @focusin=${this.updateSlotFocusVisible}
+        @focusout=${this.updateSlotFocusVisible}>
+      </slot>
+      <slot
+        name="trailing"
+        part="trailing-btn"
+        class="${button(buttonConfig)}"
+        @focusin=${this.updateSlotFocusVisible}
+        @focusout=${this.updateSlotFocusVisible}
+        @slotchange=${this.handleTrailingSlotchange}>
+      </slot>
+      <slot></slot>
+    </div>`;
+    }
+    updateSlotFocusVisible(event) {
+        const slot = event.currentTarget;
+        const hasFocusVisible = slot
+            .assignedElements()
+            .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));
+        slot.classList.toggle('focus-visible', hasFocusVisible);
+    }
+    handleTrailingSlotchange(event) {
+        this.cleanupToggleListener?.abort();
+        this.cleanupToggleListener = new AbortController();
+        const slot = event.target;
+        const trailingButton = slot
+            .assignedElements()
+            .find((el) => el.matches('button'));
+        if (!trailingButton?.popoverTargetElement)
+            return;
+        trailingButton.popoverTargetElement.addEventListener('toggle', (event) => {
+            this.selected = event.newState === 'open';
+        }, { signal: this.cleanupToggleListener.signal });
+    }
+};
+SplitButton.styles = [
+    focusRingStyles,
+    rippleStyles,
+    buttonStyles,
+    splitButtonStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .split-btn {
+        flex: 1;
+      }
+      [name='leading'] {
+        display: contents;
+        &::slotted(button) {
+          all: inherit;
+          display: flex;
+        }
+      }
+      [name='trailing'] {
+        position: relative;
+        &::slotted(button) {
+          position: absolute;
+          inset: 0;
+          appearance: none;
+          background: none;
+          border: none;
+          outline: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property()
+], SplitButton.prototype, "color", void 0);
+__decorate([
+    property()
+], SplitButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SplitButton.prototype, "selected", void 0);
+SplitButton = __decorate([
+    customElement('md-split-button')
+], SplitButton);
+export { SplitButton };
+//# sourceMappingURL=md-split-button.js.map

package/labs/gb/components/splitbutton/md-split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-split-button.js","sourceRoot":"","sources":["md-split-button.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} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {button} from '../button/button.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 buttonStyles from '../button/button.css' with {type: 'css'}; // github-only\n// import buttonStyles from '../button/button.cssresult.js'; // google3-only\nimport splitButtonStyles from './split-button.css' with {type: 'css'}; // github-only\n// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only\n\nimport {\n  splitButton,\n  type SplitButtonColor,\n  type SplitButtonSize,\n} from './split-button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design split button component. */\n    'md-split-button': SplitButton;\n  }\n}\n\n/**\n * A Material Design split button component.\n */\n@customElement('md-split-button')\nexport class SplitButton extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    splitButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .split-btn {\n        flex: 1;\n      }\n      [name='leading'] {\n        display: contents;\n        &::slotted(button) {\n          all: inherit;\n          display: flex;\n        }\n      }\n      [name='trailing'] {\n        position: relative;\n        &::slotted(button) {\n          position: absolute;\n          inset: 0;\n          appearance: none;\n          background: none;\n          border: none;\n          outline: none;\n        }\n      }\n    `,\n  ];\n\n  @property() color: SplitButtonColor = 'filled';\n  @property() size: SplitButtonSize = 'sm';\n  @property({type: Boolean}) selected = false;\n\n  protected override render() {\n    const buttonConfig = {\n      color: this.color,\n      size: this.size,\n    };\n\n    return html`<div part=\"split-btn\" class=\"${splitButton(this)}\">\n      <slot\n        name=\"leading\"\n        part=\"leading-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}>\n      </slot>\n      <slot\n        name=\"trailing\"\n        part=\"trailing-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}\n        @slotchange=${this.handleTrailingSlotchange}>\n      </slot>\n      <slot></slot>\n    </div>`;\n  }\n\n  private updateSlotFocusVisible(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const hasFocusVisible = slot\n      .assignedElements()\n      .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));\n    slot.classList.toggle('focus-visible', hasFocusVisible);\n  }\n\n  private cleanupToggleListener?: AbortController;\n  private handleTrailingSlotchange(event: Event) {\n    this.cleanupToggleListener?.abort();\n    this.cleanupToggleListener = new AbortController();\n    const slot = event.target as HTMLSlotElement;\n    const trailingButton = slot\n      .assignedElements()\n      .find((el): el is HTMLButtonElement => el.matches('button'));\n    if (!trailingButton?.popoverTargetElement) return;\n    trailingButton.popoverTargetElement.addEventListener(\n      'toggle',\n      (event: Event) => {\n        this.selected = (event as ToggleEvent).newState === 'open';\n      },\n      {signal: this.cleanupToggleListener.signal},\n    );\n  }\n}\n"]}

package/labs/gb/components/splitbutton/split-button.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, md.comp.button;@layer md.comp.split-button{.split-btn{--between-space: 2px}.split-btn .btn{--icon-size: 0;--inner-corner-size: 0;--outer-corner-size: calc(var(--container-height) / 2);--leading-space: 0;--trailing-space: 0}.split-btn .btn-xs{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-xs:where(:nth-child(1 of .btn)){--leading-space: 12px;--trailing-space: 10px}.split-btn .btn-xs:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-xs:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-xs:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-sm{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-sm:where(:nth-child(1 of .btn)){--leading-space: 16px;--trailing-space: 12px}.split-btn .btn-sm:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-sm:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-sm:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md{--icon-size: 26px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-md:where(:nth-child(1 of .btn)){--leading-space: 24px;--trailing-space: 24px}.split-btn .btn-md:where(:nth-last-child(1 of .btn)){--leading-space: 15px;--trailing-space: 15px}.split-btn .btn-md:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-lg{--icon-size: 38px;--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-lg:where(:nth-child(1 of .btn)){--leading-space: 48px;--trailing-space: 48px}.split-btn .btn-lg:where(:nth-last-child(1 of .btn)){--leading-space: 29px;--trailing-space: 29px}.split-btn .btn-lg:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-lg:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl{--icon-size: 50px;--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-xl:where(:nth-child(1 of .btn)){--leading-space: 64px;--trailing-space: 64px}.split-btn .btn-xl:where(:nth-last-child(1 of .btn)){--leading-space: 43px;--trailing-space: 43px}.split-btn .btn-xl:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn){--inner-corner-size: calc(var(--container-height) / 2)}.split-btn{display:inline-flex;align-items:center;gap:var(--between-space)}.split-btn :nth-child(1 of .btn){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.split-btn :nth-last-child(1 of .btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.split-btn :nth-last-child(1 of .btn)::before{content:"arrow_drop_down";font:var(--md-icon-size) var(--md-icon-font);display:flex;align-items:center;aspect-ratio:1;width:var(--md-icon-size);overflow:hidden}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn)::before{transform:rotate(180deg);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}}/*# sourceMappingURL=split-button.css.map */

package/labs/gb/components/splitbutton/split-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["split-button.scss","_split-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kEACA,4BACE,WCLA,qBDQE,gBCJF,eACA,uBACA,uDACA,mBACA,oBDIE,qCCCF,mDDEI,gDCEJ,sBACA,uBDCI,qDCGJ,sBACA,+DAIA,6FAIA,mDDCE,mBCGF,kBACA,mDDDI,gDCKJ,sBACA,uBDFI,qDCMJ,sBACA,uBDHI,wCCOJ,mDDHI,0CCOJ,mDDFE,mBCMF,kBACA,mDDJI,gDCQJ,sBACA,uBDLI,qDCSJ,sBACA,uBDNI,wCCUJ,mDDNI,0CCUJ,mDDLE,mBCSF,kBACA,mDDPI,gDCWJ,sBACA,uBDRI,qDCYJ,sBACA,uBDTI,wCCaJ,6DDTI,0CCaJ,6DDRE,mBCYF,kBACA,mDDVI,gDCcJ,sBACA,uBDXI,qDCeJ,sBACA,uBDZI,wCCgBJ,6DDZI,0CCgBJ,6DDVI,kFCcJ,uDDPE,WACE,oBACA,mBACA,yBAGF,iCACE,mDACA,iDACA,iDACA,+CAGF,sCACE,mDACA,iDACA,iDACA,+CAEA,8CACE,0BACA,6CACA,aACA,mBACA,eACA,0BACA,gBAIJ,0FAEE,yBACA","file":"split-button.css"}

package/labs/gb/components/splitbutton/split-button.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/splitbutton/split-button.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/splitbutton/split-button.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.split-button{.split-btn{--between-space: 2px}.split-btn .btn{--icon-size: 0;--inner-corner-size: 0;--outer-corner-size: calc(var(--container-height) / 2);--leading-space: 0;--trailing-space: 0}.split-btn .btn-xs{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-xs:where(:nth-child(1 of .btn)){--leading-space: 12px;--trailing-space: 10px}.split-btn .btn-xs:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-xs:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-xs:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-sm{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-sm:where(:nth-child(1 of .btn)){--leading-space: 16px;--trailing-space: 12px}.split-btn .btn-sm:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-sm:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-sm:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md{--icon-size: 26px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-md:where(:nth-child(1 of .btn)){--leading-space: 24px;--trailing-space: 24px}.split-btn .btn-md:where(:nth-last-child(1 of .btn)){--leading-space: 15px;--trailing-space: 15px}.split-btn .btn-md:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-lg{--icon-size: 38px;--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-lg:where(:nth-child(1 of .btn)){--leading-space: 48px;--trailing-space: 48px}.split-btn .btn-lg:where(:nth-last-child(1 of .btn)){--leading-space: 29px;--trailing-space: 29px}.split-btn .btn-lg:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-lg:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl{--icon-size: 50px;--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-xl:where(:nth-child(1 of .btn)){--leading-space: 64px;--trailing-space: 64px}.split-btn .btn-xl:where(:nth-last-child(1 of .btn)){--leading-space: 43px;--trailing-space: 43px}.split-btn .btn-xl:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn){--inner-corner-size: calc(var(--container-height) / 2)}.split-btn{display:inline-flex;align-items:center;gap:var(--between-space)}.split-btn :nth-child(1 of .btn){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.split-btn :nth-last-child(1 of .btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.split-btn :nth-last-child(1 of .btn)::before{content:"arrow_drop_down";font:var(--md-icon-size) var(--md-icon-font);display:flex;align-items:center;aspect-ratio:1;width:var(--md-icon-size);overflow:hidden}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn)::before{transform:rotate(180deg);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=split-button.cssresult.js.map

package/labs/gb/components/splitbutton/split-button.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.cssresult.js","sourceRoot":"","sources":["split-button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,8EAA8E;AAC9E,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/splitbutton/split-button.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.split-button{.split-btn{--between-space: 2px}.split-btn .btn{--icon-size: 0;--inner-corner-size: 0;--outer-corner-size: calc(var(--container-height) / 2);--leading-space: 0;--trailing-space: 0}.split-btn .btn-xs{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-xs:where(:nth-child(1 of .btn)){--leading-space: 12px;--trailing-space: 10px}.split-btn .btn-xs:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-xs:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-xs:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-sm{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-sm:where(:nth-child(1 of .btn)){--leading-space: 16px;--trailing-space: 12px}.split-btn .btn-sm:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-sm:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-sm:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md{--icon-size: 26px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-md:where(:nth-child(1 of .btn)){--leading-space: 24px;--trailing-space: 24px}.split-btn .btn-md:where(:nth-last-child(1 of .btn)){--leading-space: 15px;--trailing-space: 15px}.split-btn .btn-md:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-lg{--icon-size: 38px;--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-lg:where(:nth-child(1 of .btn)){--leading-space: 48px;--trailing-space: 48px}.split-btn .btn-lg:where(:nth-last-child(1 of .btn)){--leading-space: 29px;--trailing-space: 29px}.split-btn .btn-lg:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-lg:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl{--icon-size: 50px;--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-xl:where(:nth-child(1 of .btn)){--leading-space: 64px;--trailing-space: 64px}.split-btn .btn-xl:where(:nth-last-child(1 of .btn)){--leading-space: 43px;--trailing-space: 43px}.split-btn .btn-xl:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn){--inner-corner-size: calc(var(--container-height) / 2)}.split-btn{display:inline-flex;align-items:center;gap:var(--between-space)}.split-btn :nth-child(1 of .btn){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.split-btn :nth-last-child(1 of .btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.split-btn :nth-last-child(1 of .btn)::before{content:\"arrow_drop_down\";font:var(--md-icon-size) var(--md-icon-font);display:flex;align-items:center;aspect-ratio:1;width:var(--md-icon-size);overflow:hidden}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn)::before{transform:rotate(180deg);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/splitbutton/split-button.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Split Button color configuration types. */
+export type SplitButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined';
+/** Split Button size configuration types. */
+export type SplitButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Split Button classes. */
+export declare const SPLIT_BUTTON_CLASSES: {
+    readonly splitButton: "split-btn";
+    readonly splitButtonSelected: "split-btn-selected";
+};
+/** The state provided to the `splitButtonClasses()` function. */
+export interface SplitButtonClassesState {
+    /** Whether the split trailing button is selected. */
+    selected?: boolean;
+}
+/**
+ * Returns the split button classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the split button.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function splitButtonClasses({ selected, }?: SplitButtonClassesState): ClassInfo;
+/**
+ * A Lit directive that adds split button styling and functionality to its
+ * element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="${splitButton()}">
+ *     <button class="${button({color: 'filled'})}">Label</button>
+ *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
+ *     <md-menu id="menu">
+ *       <md-menu-item>Option 1</md-menu-item>
+ *       <md-menu-item>Option 2</md-menu-item>
+ *     </md-menu>
+ *   </div>
+ * `;
+ * ```
+ */
+export declare const splitButton: (state?: SplitButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/splitbutton/split-button.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** Split Button classes. */
+export const SPLIT_BUTTON_CLASSES = {
+    splitButton: 'split-btn',
+    splitButtonSelected: 'split-btn-selected',
+};
+/**
+ * Returns the split button classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the split button.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function splitButtonClasses({ selected = false, } = {}) {
+    return {
+        [SPLIT_BUTTON_CLASSES.splitButton]: true,
+        [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,
+    };
+}
+/**
+ * A Lit directive that adds split button styling and functionality to its
+ * element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="${splitButton()}">
+ *     <button class="${button({color: 'filled'})}">Label</button>
+ *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
+ *     <md-menu id="menu">
+ *       <md-menu-item>Option 1</md-menu-item>
+ *       <md-menu-item>Option 2</md-menu-item>
+ *     </md-menu>
+ *   </div>
+ * `;
+ * ```
+ */
+export const splitButton = createClassMapDirective({
+    getClasses: splitButtonClasses,
+});
+//# sourceMappingURL=split-button.js.map

package/labs/gb/components/splitbutton/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAShE,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Split Button color configuration types. */\nexport type SplitButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined';\n\n/** Split Button size configuration types. */\nexport type SplitButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Split Button classes. */\nexport const SPLIT_BUTTON_CLASSES = {\n  splitButton: 'split-btn',\n  splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/** The state provided to the `splitButtonClasses()` function. */\nexport interface SplitButtonClassesState {\n  /** Whether the split trailing button is selected. */\n  selected?: boolean;\n}\n\n/**\n * Returns the split button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function splitButtonClasses({\n  selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n  return {\n    [SPLIT_BUTTON_CLASSES.splitButton]: true,\n    [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n  };\n}\n\n/**\n * A Lit directive that adds split button styling and functionality to its\n * element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${splitButton()}\">\n *     <button class=\"${button({color: 'filled'})}\">Label</button>\n *     <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n *     <md-menu id=\"menu\">\n *       <md-menu-item>Option 1</md-menu-item>\n *       <md-menu-item>Option 2</md-menu-item>\n *     </md-menu>\n *   </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n  getClasses: splitButtonClasses,\n});\n"]}