@material/web 2.4.2-nightly.259fd71.0 → 2.4.2-nightly.3758f46.0

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("@material/web/labs/gb/components/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 '@material/web/labs/gb/components/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,uDAAuD,CAAC;AAS9F,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 '@material/web/labs/gb/components/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"]}

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);
+    }
+  }
+}

package/labs/gb/styles/m3.css

@@ -22,4 +22,4 @@
  */@layer md.sys.space{:root{--md-sys-space-unit: 8px;--md-sys-space-0: calc(var(--md-sys-space-unit) * 0);--md-sys-space-25: calc(var(--md-sys-space-unit) * 0.25);--md-sys-space-50: calc(var(--md-sys-space-unit) * 0.5);--md-sys-space-75: calc(var(--md-sys-space-unit) * 0.75);--md-sys-space-100: var(--md-sys-space-unit);--md-sys-space-125: calc(var(--md-sys-space-unit) * 1.25);--md-sys-space-150: calc(var(--md-sys-space-unit) * 1.5);--md-sys-space-175: calc(var(--md-sys-space-unit) * 1.75);--md-sys-space-200: calc(var(--md-sys-space-unit) * 2);--md-sys-space-250: calc(var(--md-sys-space-unit) * 2.5);--md-sys-space-300: calc(var(--md-sys-space-unit) * 3);--md-sys-space-400: calc(var(--md-sys-space-unit) * 4);--md-sys-space-450: calc(var(--md-sys-space-unit) * 4.5);--md-sys-space-500: calc(var(--md-sys-space-unit) * 5);--md-sys-space-600: calc(var(--md-sys-space-unit) * 6);--md-sys-space-700: calc(var(--md-sys-space-unit) * 7);--md-sys-space-800: calc(var(--md-sys-space-unit) * 8);--md-sys-space-900: calc(var(--md-sys-space-unit) * 9)}}/*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem / 1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-sm-tracking: 0.03125rem;--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem / 1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-md-tracking: 0.03125rem;--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem / 1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-label-lg-tracking: 0.00625rem;--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem / 1rem var(--md-ref-typeface-plain);--md-sys-typescale-body-sm-tracking: 0.025rem;--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem / 1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-body-md-tracking: 0.015625rem;--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem / 1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-body-lg-tracking: 0.03125rem;--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem / 1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-title-sm-tracking: 0.00625rem;--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem / 1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-title-md-tracking: 0.009375rem;--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem / 1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-title-lg-tracking: 0rem;--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem / 2rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-sm-tracking: 0rem;--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem / 2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-md-tracking: 0rem;--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem / 2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-lg-tracking: 0rem;--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem / 2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-display-sm-tracking: 0rem;--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem / 3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-display-md-tracking: 0rem;--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem / 4rem var(--md-ref-typeface-brand);--md-sys-typescale-display-lg-tracking: -0.015625rem}}/*# sourceMappingURL=m3.css.map */
+ */@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-sm-tracking: 0.03125rem;--md-sys-typescale-label-sm-axes: normal;--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-sm-axes: "ROND" 100;--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-md-tracking: 0.03125rem;--md-sys-typescale-label-md-axes: normal;--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-md-axes: "ROND" 100;--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-label-lg-tracking: 0.00625rem;--md-sys-typescale-label-lg-axes: normal;--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-lg-axes: "ROND" 100;--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-body-sm-tracking: 0.025rem;--md-sys-typescale-body-sm-axes: normal;--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-sm-axes: "ROND" 100;--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-body-md-tracking: 0.015625rem;--md-sys-typescale-body-md-axes: normal;--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-md-axes: "ROND" 100;--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-body-lg-tracking: 0.03125rem;--md-sys-typescale-body-lg-axes: normal;--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-lg-axes: "ROND" 100;--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-title-sm-tracking: 0.00625rem;--md-sys-typescale-title-sm-axes: normal;--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-sm-axes: "ROND" 100;--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-title-md-tracking: 0.009375rem;--md-sys-typescale-title-md-axes: normal;--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-md-axes: "ROND" 100;--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-title-lg-tracking: 0rem;--md-sys-typescale-title-lg-axes: normal;--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-lg-axes: "ROND" 100;--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-sm-tracking: 0rem;--md-sys-typescale-headline-sm-axes: normal;--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-sm-axes: "ROND" 100;--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-md-tracking: 0rem;--md-sys-typescale-headline-md-axes: normal;--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-md-axes: "ROND" 100;--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-lg-tracking: 0rem;--md-sys-typescale-headline-lg-axes: normal;--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-lg-axes: "ROND" 100;--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-display-sm-tracking: 0rem;--md-sys-typescale-display-sm-axes: normal;--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-sm-axes: "ROND" 100;--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-display-md-tracking: 0rem;--md-sys-typescale-display-md-axes: normal;--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-md-axes: "ROND" 100;--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-display-lg-tracking: -0.015625rem;--md-sys-typescale-display-lg-axes: normal;--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-lg-axes: "ROND" 100}}/*# sourceMappingURL=m3.css.map */

package/labs/gb/styles/m3.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["m3.scss","color/md-color-tokens.scss","color/internal/_color-tokens.scss","elevation/md-elevation-tokens.scss","icon/md-icon.scss","motion/md-motion-tokens-easing.scss","shape/md-shape-tokens.scss","space/md-space-tokens.scss","typography/md-typography-tokens.scss","typography/internal/_typography-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCSA,oBACE,MACE,wBC2EA,g5ECtFJ;AAAA;AAAA;AAAA,GAKA,wBACE,MACE,kCACA,2JAGA,2JAGA,2JAGA,4JAGA,6JCpBJ;AAAA;AAAA;AAAA,GAKA,yBACE,mBACA,cACA,iCAEF,0BACE,iBACA,cACA,2BAEF,yBACE,6BACA,cACA,mBAEF,yBACE,kBACA,cACA,iBAEF,yBACE,kBACA,cACA,kBAEF,yBACE,kBACA,cACA,gBAEF,yBACE,kBACA,cACA,gBAGF,mBACE,yBAEE,oBACA,mBACA,qBACA,gBACA,2BACA,0BACA,eACA,8BACA,8BACA,8BACA,gCACA,wBACE,4GAIF,oCC5DJ;AAAA;AAAA;AAAA,GASA,qBACE,MACE,4DACA,uEACA,qEACA,8DACA,8EACA,8EACA,sCACA,uCACA,uCACA,uCACA,wCACA,wCACA,wCACA,wCACA,sCACA,sCACA,sCACA,sCACA,4CACA,4CACA,4CACA,8CChCJ;AAAA;AAAA;AAAA,GASA,oBACE,MACE,gCACA,8BACA,8BACA,+BACA,+BACA,yCACA,+BACA,yCACA,gCACA,qCCpBJ;AAAA;AAAA;AAAA,GAKA,oBACE,MACE,yBACA,qDACA,yDACA,wDACA,yDACA,6CACA,0DACA,yDACA,0DACA,uDACA,yDACA,uDACA,uDACA,yDACA,uDACA,uDACA,uDACA,uDACA,wDCzBJ;AAAA;AAAA;AAAA,GASA,wBACE,MCsBA,sDACA,+EACA,sCAIA,qCAIA,mCA8BI,gHAIA,iDAJA,8GAIA,iDAJA,kHAIA,iDAJA,8GAIA,8CAJA,kHAIA,iDAJA,6GAIA,gDAJA,kHAIA,iDAJA,6GAIA,kDAJA,mHAIA,2CAJA,iHAIA,8CAJA,qHAIA,8CAJA,iHAIA,8CAJA,oHAIA,6CAJA,sHAIA,6CAJA,mHAIA","file":"m3.css"}
+{"version":3,"sourceRoot":"","sources":["m3.scss","color/md-color-tokens.scss","color/internal/_color-tokens.scss","elevation/md-elevation-tokens.scss","icon/md-icon.scss","motion/md-motion-tokens-easing.scss","shape/md-shape-tokens.scss","space/md-space-tokens.scss","typography/md-typography-tokens.scss","typography/internal/_typography-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCSA,oBACE,MACE,wBC2EA,g5ECtFJ;AAAA;AAAA;AAAA,GAKA,wBACE,MACE,kCACA,2JAGA,2JAGA,2JAGA,4JAGA,6JCpBJ;AAAA;AAAA;AAAA,GAKA,yBACE,mBACA,cACA,iCAEF,0BACE,iBACA,cACA,2BAEF,yBACE,6BACA,cACA,mBAEF,yBACE,kBACA,cACA,iBAEF,yBACE,kBACA,cACA,kBAEF,yBACE,kBACA,cACA,gBAEF,yBACE,kBACA,cACA,gBAGF,mBACE,yBAEE,oBACA,mBACA,qBACA,gBACA,2BACA,0BACA,eACA,8BACA,8BACA,8BACA,gCACA,wBACE,4GAIF,oCC5DJ;AAAA;AAAA;AAAA,GASA,qBACE,MACE,4DACA,uEACA,qEACA,8DACA,8EACA,8EACA,sCACA,uCACA,uCACA,uCACA,wCACA,wCACA,wCACA,wCACA,sCACA,sCACA,sCACA,sCACA,4CACA,4CACA,4CACA,8CChCJ;AAAA;AAAA;AAAA,GASA,oBACE,MACE,gCACA,8BACA,8BACA,+BACA,+BACA,yCACA,+BACA,yCACA,gCACA,qCCpBJ;AAAA;AAAA;AAAA,GAKA,oBACE,MACE,yBACA,qDACA,yDACA,wDACA,yDACA,6CACA,0DACA,yDACA,0DACA,uDACA,yDACA,uDACA,uDACA,yDACA,uDACA,uDACA,uDACA,uDACA,wDCzBJ;AAAA;AAAA;AAAA,GASA,wBACE,MC6BA,sDACA,+EACA,sCAIA,qCAIA,mCA6BI,8GACA,iDACA,yCACA,uHACA,wDAJA,4GACA,iDACA,yCACA,qHACA,wDAJA,gHACA,iDACA,yCACA,yHACA,wDAJA,4GACA,8CACA,wCACA,sHACA,uDAJA,gHACA,iDACA,wCACA,0HACA,uDAJA,2GACA,gDACA,wCACA,qHACA,uDAJA,gHACA,iDACA,yCACA,yHACA,wDAJA,2GACA,kDACA,yCACA,oHACA,wDAJA,iHACA,2CACA,yCACA,2HACA,wDAJA,+GACA,8CACA,4CACA,yHACA,2DAJA,mHACA,8CACA,4CACA,6HACA,2DAJA,+GACA,8CACA,4CACA,yHACA,2DAJA,kHACA,6CACA,2CACA,4HACA,0DAJA,oHACA,6CACA,2CACA,8HACA,0DAJA,iHACA,qDACA,2CACA,2HACA","file":"m3.css"}