@material/web 2.4.2-nightly.a589695.0 → 2.4.2-nightly.b4af72e.0

package/labs/gb/components/shared/pseudo-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-classes.js","sourceRoot":"","sources":["pseudo-classes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,OAAO,OAAO,CAAC,OAAO,CAAC,qDAAqD,CAAC,CAAC;AAChF,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Cross-component classes for emulating pseudo-classes.\n *\n * All components that style with psuedo-classes for their DOM structure also\n * support emulating these states.\n *\n * @example\n * ```html\n * <button class=\"ripple active\">Pressed ripple</button>\n * ```\n */\nexport const PSEUDO_CLASSES = {\n  active: 'active',\n  checked: 'checked',\n  disabled: 'disabled',\n  focus: 'focus',\n  focusVisible: 'focus-visible',\n  hover: 'hover',\n  indeterminate: 'indeterminate',\n  invalid: 'invalid',\n};\n\n/**\n * Returns whether the element is disabled.\n *\n * @param element The element to check.\n * @return true if the element is disabled.\n */\nexport function isDisabled(element: Element): boolean {\n  return element.matches('.disabled,:disabled,[disabled],[aria-disabled=true]');\n}\n"]}

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

@@ -0,0 +1,139 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --between-space: 2px;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin button {
+  // LINT.IfChange
+  --icon-size: 0;
+  --inner-corner-size: 0;
+  --outer-corner-size: calc(var(--container-height) / 2);
+  --leading-space: 0;
+  --trailing-space: 0;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@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,39 @@
+/**
+ * @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-gb-split-button': SplitButton;
+    }
+}
+/**
+ * A Material Design split button component.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+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,132 @@
+/**
+ * @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.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+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-gb-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-gb-split-button': SplitButton;\n  }\n}\n\n/**\n * A Material Design split button component.\n *\n * @slot leading - Requires a `<button>` for the main action.\n * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.\n * @slot - Used to render the trailing button's popover menu.\n * @csspart split-btn - The split button's root element.\n * @csspart leading-btn - The split button's main action.\n * @csspart trailing-btn - The split button's menu action.\n * @cssprop --between-space\n * @cssprop --icon-size\n * @cssprop --inner-corner-size\n * @cssprop --outer-corner-size\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\n@customElement('md-gb-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,WCJA,qBDOE,gBCDF,eACA,uBACA,uDACA,mBACA,oBDCE,mBCIF,kBACA,mDDFI,gDCMJ,sBACA,uBDHI,qDCOJ,sBACA,uBDJI,wCCQJ,mDDJI,0CCQJ,mDDHE,mBCOF,kBACA,mDDLI,gDCSJ,sBACA,uBDNI,qDCUJ,sBACA,uBDPI,wCCWJ,mDDPI,0CCWJ,mDDNE,mBCUF,kBACA,mDDRI,gDCYJ,sBACA,uBDTI,qDCaJ,sBACA,uBDVI,wCCcJ,mDDVI,0CCcJ,mDDTE,mBCaF,kBACA,mDDXI,gDCeJ,sBACA,uBDZI,qDCgBJ,sBACA,uBDbI,wCCiBJ,6DDbI,0CCiBJ,6DDZE,mBCgBF,kBACA,mDDdI,gDCkBJ,sBACA,uBDfI,qDCmBJ,sBACA,uBDhBI,wCCoBJ,6DDhBI,0CCoBJ,6DDdI,kFCkBJ,uDDXE,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.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-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-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-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-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;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAQhE,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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createClassMapDirective} from '../shared/directives.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-gb-menu id=\"menu\">\n *       <md-gb-menu-item>Option 1</md-gb-menu-item>\n *       <md-gb-menu-item>Option 2</md-gb-menu-item>\n *     </md-gb-menu>\n *   </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n  getClasses: splitButtonClasses,\n});\n"]}

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

@@ -0,0 +1,164 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'split-button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;
+@layer md.comp.split-button {
+  .split-btn {
+    @include split-button-tokens.root;
+
+    .btn {
+      @include split-button-tokens.button;
+    }
+
+    .btn-xs {
+      @include split-button-tokens.button-xs;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-xs-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-xs-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-xs-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-xs-pressed;
+      }
+    }
+
+    .btn-sm {
+      @include split-button-tokens.button-sm;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-sm-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-sm-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-sm-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-sm-pressed;
+      }
+    }
+
+    .btn-md {
+      @include split-button-tokens.button-md;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-md-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-md-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-md-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-md-pressed;
+      }
+    }
+
+    .btn-lg {
+      @include split-button-tokens.button-lg;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-lg-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-lg-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-lg-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-lg-pressed;
+      }
+    }
+
+    .btn-xl {
+      @include split-button-tokens.button-xl;
+
+      &:where(:nth-child(1 of .btn)) {
+        @include split-button-tokens.button-xl-leading;
+      }
+
+      &:where(:nth-last-child(1 of .btn)) {
+        @include split-button-tokens.button-xl-trailing;
+      }
+
+      &:where(:hover, .hover) {
+        @include split-button-tokens.button-xl-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include split-button-tokens.button-xl-pressed;
+      }
+    }
+
+    &:is(.split-btn-selected, :has(:popover-open)) {
+      :nth-last-child(1 of .btn) {
+        @include split-button-tokens.button-trailing-selected;
+      }
+    }
+  }
+
+  .split-btn {
+    & {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--between-space);
+    }
+
+    :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);
+    }
+
+    :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);
+
+      &::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;
+      }
+    }
+
+    &: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);
+    }
+  }
+}