@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.70e259d.0

package/labs/gb/components/appbar/app-bar.js

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** App Bar size configurations. */
+export const APP_BAR_SIZES = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+/** App Bar variant configurations. */
+export const APP_BAR_VARIANTS = {
+    standard: 'standard',
+    search: 'search',
+};
+/** App Bar classes. */
+export const APP_BAR_CLASSES = {
+    appBar: 'app-bar',
+    appBarSm: 'app-bar-sm',
+    appBarMd: 'app-bar-md',
+    appBarLg: 'app-bar-lg',
+    appBarWithSubtitle: 'app-bar-with-subtitle',
+    appBarSearch: 'app-bar-search',
+    appBarScrolled: 'app-bar-scrolled',
+};
+/**
+ * Returns the app bar classes to apply to an element based on the given state.
+ *
+ * @param state The state of the app bar.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function appBarClasses({ size = 'sm', withSubtitle = false, variant = 'standard', scrolled = false, } = {}) {
+    return {
+        [APP_BAR_CLASSES.appBar]: true,
+        [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,
+        [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,
+        [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,
+        [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,
+        [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,
+        [APP_BAR_CLASSES.appBarScrolled]: scrolled,
+    };
+}
+/**
+ * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.
+ *
+ * @param appBar The element on which to set up app bar functionality.
+ * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.
+ */
+export function setupAppBar(appBar, opts) {
+    if (!opts?.scrollTarget) {
+        return;
+    }
+    const target = opts.scrollTarget;
+    const signal = opts.signal;
+    const onScroll = () => {
+        if (signal?.aborted)
+            return;
+        let scrollTop = 0;
+        if (target instanceof Window) {
+            scrollTop = target.scrollY || target.document.documentElement.scrollTop;
+        }
+        else if (target instanceof HTMLElement) {
+            scrollTop = target.scrollTop;
+        }
+        const isScrolled = scrollTop > 0;
+        const wasScrolled = appBar.classList.contains(APP_BAR_CLASSES.appBarScrolled);
+        if (isScrolled !== wasScrolled) {
+            appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);
+            appBar.dispatchEvent(new CustomEvent('scrollstatechange', {
+                bubbles: true,
+                composed: true,
+                detail: { scrolled: isScrolled },
+            }));
+        }
+    };
+    target.addEventListener('scroll', onScroll, { passive: true, signal });
+    onScroll();
+}
+/**
+ * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${appBar({size: 'md', scrolled: true})}">
+ *   <div class="app-bar-top-row">...</div>
+ *   <div class="app-bar-bottom-row">...</div>
+ * </div>`;
+ * ```
+ */
+export const appBar = createClassMapDirective({
+    getClasses: appBarClasses,
+    setupElement: setupAppBar,
+});
+//# sourceMappingURL=app-bar.js.map

package/labs/gb/components/appbar/app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["app-bar.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';\n\nimport {createClassMapDirective} from '../shared/directives.js';\n\n/** App Bar size configuration types. */\nexport type AppBarSize = 'sm' | 'md' | 'lg';\n\n/** App Bar size configurations. */\nexport const APP_BAR_SIZES = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\n/** App Bar variant configuration types. */\nexport type AppBarVariant = 'standard' | 'search';\n\n/** App Bar variant configurations. */\nexport const APP_BAR_VARIANTS = {\n  standard: 'standard',\n  search: 'search',\n} as const;\n\n/** App Bar classes. */\nexport const APP_BAR_CLASSES = {\n  appBar: 'app-bar',\n  appBarSm: 'app-bar-sm',\n  appBarMd: 'app-bar-md',\n  appBarLg: 'app-bar-lg',\n  appBarWithSubtitle: 'app-bar-with-subtitle',\n  appBarSearch: 'app-bar-search',\n  appBarScrolled: 'app-bar-scrolled',\n} as const;\n\n/** The state provided to the `appBarClasses()` function. */\nexport interface AppBarClassesState {\n  /** The size of the app bar (`sm`, `md`, `lg`). */\n  size?: AppBarSize;\n  /** Whether the app bar has a subtitle. */\n  withSubtitle?: boolean;\n  /** The behavior variant (`standard` or `search`). */\n  variant?: AppBarVariant;\n  /** Whether the app bar is in a scrolled or docked state (`.app-bar-scrolled`). */\n  scrolled?: boolean;\n}\n\n/**\n * Returns the app bar classes to apply to an element based on the given state.\n *\n * @param state The state of the app bar.\n * @return An object of class names and truthy values if they apply.\n */\nexport function appBarClasses({\n  size = 'sm',\n  withSubtitle = false,\n  variant = 'standard',\n  scrolled = false,\n}: AppBarClassesState = {}): ClassInfo {\n  return {\n    [APP_BAR_CLASSES.appBar]: true,\n    [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,\n    [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,\n    [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,\n    [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,\n    [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,\n    [APP_BAR_CLASSES.appBarScrolled]: scrolled,\n  };\n}\n\n/**\n * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.\n *\n * @param appBar The element on which to set up app bar functionality.\n * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.\n */\nexport function setupAppBar(\n  appBar: HTMLElement,\n  opts?: {signal?: AbortSignal; scrollTarget?: HTMLElement | Window},\n): void {\n  if (!opts?.scrollTarget) {\n    return;\n  }\n  const target = opts.scrollTarget;\n  const signal = opts.signal;\n\n  const onScroll = () => {\n    if (signal?.aborted) return;\n    let scrollTop = 0;\n    if (target instanceof Window) {\n      scrollTop = target.scrollY || target.document.documentElement.scrollTop;\n    } else if (target instanceof HTMLElement) {\n      scrollTop = target.scrollTop;\n    }\n    const isScrolled = scrollTop > 0;\n    const wasScrolled = appBar.classList.contains(\n      APP_BAR_CLASSES.appBarScrolled,\n    );\n    if (isScrolled !== wasScrolled) {\n      appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);\n      appBar.dispatchEvent(\n        new CustomEvent('scrollstatechange', {\n          bubbles: true,\n          composed: true,\n          detail: {scrolled: isScrolled},\n        }),\n      );\n    }\n  };\n\n  target.addEventListener('scroll', onScroll, {passive: true, signal});\n  onScroll();\n}\n\n/**\n * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${appBar({size: 'md', scrolled: true})}\">\n *   <div class=\"app-bar-top-row\">...</div>\n *   <div class=\"app-bar-bottom-row\">...</div>\n * </div>`;\n * ```\n */\nexport const appBar = createClassMapDirective({\n  getClasses: appBarClasses,\n  setupElement: setupAppBar,\n});\n"]}

package/labs/gb/components/appbar/app-bar.scss

@@ -0,0 +1,167 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'app-bar-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.app-bar {
+  // Component tokens
+  .app-bar {
+    @include app-bar-tokens.root;
+  }
+  .app-bar-md {
+    @include app-bar-tokens.medium;
+  }
+  .app-bar-lg {
+    @include app-bar-tokens.large;
+  }
+  .app-bar-with-subtitle {
+    @include app-bar-tokens.with-subtitle;
+  }
+  .app-bar-with-subtitle.app-bar-lg {
+    @include app-bar-tokens.with-subtitle-large;
+  }
+  .app-bar-search {
+    @include app-bar-tokens.search;
+  }
+  .app-bar-scrolled {
+    @include app-bar-tokens.on-scroll;
+  }
+  .app-bar-scrolled.app-bar-search {
+    @include app-bar-tokens.on-scroll-search;
+  }
+
+  // Component styles
+  .app-bar {
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+    width: 100%;
+    min-height: var(--container-height);
+    background-color: var(--container-color);
+    border-radius: var(--container-shape);
+    box-shadow: var(--container-elevation);
+    color: var(--title-color);
+    transition:
+      background-color 200ms ease,
+      box-shadow 200ms ease,
+      min-height 200ms ease;
+    padding-inline: var(--leading-space) var(--trailing-space);
+  }
+
+  // Small and Search layouts (single row)
+  .app-bar-sm,
+  .app-bar-search {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // Medium and Large layouts (two rows)
+  .app-bar-md,
+  .app-bar-lg {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+
+    .app-bar-top-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 64px;
+      width: 100%;
+    }
+
+    .app-bar-bottom-row {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding-bottom: 24px;
+      padding-inline: 12px;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  }
+
+  // Slot containers
+  .app-bar-leading,
+  .app-bar-trailing {
+    display: flex;
+    align-items: center;
+    gap: var(--icon-button-space);
+    flex-shrink: 0;
+  }
+
+  .app-bar-leading {
+    color: var(--leading-icon-color);
+  }
+
+  .app-bar-trailing {
+    color: var(--trailing-icon-color);
+  }
+
+  .app-bar-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .app-bar-sm .app-bar-title-wrapper {
+    margin-inline: 4px;
+  }
+
+  .app-bar-title {
+    margin: 0;
+    font: var(--title);
+    font-variation-settings: var(--title-axes);
+    letter-spacing: var(--title-tracking);
+    color: var(--title-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::slotted(*) {
+      margin: 0;
+      font: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+  }
+
+  .app-bar-subtitle {
+    margin: 0;
+    margin-top: 2px;
+    font: var(--subtitle);
+    font-variation-settings: var(--subtitle-axes);
+    letter-spacing: var(--subtitle-tracking);
+    color: var(--subtitle-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::slotted(*) {
+      margin: 0;
+      font: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+  }
+
+  .app-bar-search-container {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+    margin-inline: 8px;
+  }
+}

package/labs/gb/components/appbar/md-gb-app-bar.d.ts

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

package/labs/gb/components/appbar/md-gb-app-bar.js

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

package/labs/gb/components/appbar/md-gb-app-bar.js.map

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

package/labs/gb/components/badge/_badge-tokens.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --container-color: var(--md-sys-color-error);
+  --shape: var(--md-sys-shape-corner-full);
+  --size: 6px;
+  --label-text-color: var(--md-sys-color-on-error);
+  --label-text: var(--md-sys-typescale-label-sm);
+  --label-text-tracking: var(--md-sys-typescale-label-sm-tracking);
+  --label-text-axes: var(--md-sys-typescale-label-sm-axes);
+}
+
+@mixin large {
+  --size: 16px;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+/**
+ * A Material Design badge component.
+ */
+export declare class BadgeElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    private hasContent;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleSlotChange;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+import { badge } from './badge.js';
+import { styles as badgeStyles } from './badge.cssresult.js';
+/**
+ * A Material Design badge component.
+ */
+export class BadgeElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasContent = false;
+    }
+    render() {
+        return html `<span part="badge" class="${badge({ large: this.hasContent })}">
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    </span>`;
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes();
+        this.hasContent = nodes.some((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node.textContent ?? '').trim().length > 0;
+            }
+            return true;
+        });
+    }
+}
+BadgeElement.styles = [
+    badgeStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .badge {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    state()
+], BadgeElement.prototype, "hasContent", void 0);
+//# sourceMappingURL=badge-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-element.js","sourceRoot":"","sources":["badge-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AACjC,OAAO,EAAC,MAAM,IAAI,WAAW,EAAC,MAAM,sBAAsB,CAAC;AAE3D;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAamB,eAAU,GAAG,KAAK,CAAC;IAkBtC,CAAC;IAhBoB,MAAM;QACvB,OAAO,IAAI,CAAA,6BAA6B,KAAK,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAC,CAAC;0BACjD,IAAI,CAAC,gBAAgB;YACnC,CAAC;IACX,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;gBACrC,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YACpD,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;;AA7Be,mBAAM,GAAwB;IAC5C,WAAW;IACX,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAEe;IAAhB,KAAK,EAAE;gDAA4B","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 {state} from 'lit/decorators.js';\nimport {badge} from './badge.js';\nimport {styles as badgeStyles} from './badge.cssresult.js';\n\n/**\n * A Material Design badge component.\n */\nexport class BadgeElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    badgeStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .badge {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @state() private hasContent = false;\n\n  protected override render() {\n    return html`<span part=\"badge\" class=\"${badge({large: this.hasContent})}\">\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    </span>`;\n  }\n\n  private handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes();\n    this.hasContent = nodes.some((node) => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        return (node.textContent ?? '').trim().length > 0;\n      }\n      return true;\n    });\n  }\n}\n"]}

package/labs/gb/components/badge/badge.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}/*# sourceMappingURL=badge.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["badge.scss","_badge-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,qBAEI,OCNF,6CACA,yCACA,YACA,iDACA,+CACA,iEACA,yDDIE,OACE,oBACA,mBACA,uBACA,wCACA,2BACA,mBACA,kBACA,sBAEA,YACE,aAKJ,mBChBF,aDkBI,WACA,sBACA,cAEA,8BACA,uBACA,0CACA,+CAEA,wBACE","file":"badge.css"}

package/labs/gb/components/badge/badge.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/badge/badge.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/badge/badge.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=badge.cssresult.js.map

package/labs/gb/components/badge/badge.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.cssresult.js","sourceRoot":"","sources":["badge.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iEAAiE;AACjE,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/badge/badge.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;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/badge/badge.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Badge classes. */
+export declare const BADGE_CLASSES: {
+    readonly badge: "badge";
+    readonly badgeLarge: "badge-large";
+};
+/** The state provided to the `badgeClasses()` function. */
+export interface BadgeClassesState {
+    /** Whether the badge is large. */
+    large?: boolean;
+}
+/**
+ * Returns the badge classes to apply to an element.
+ *
+ * @param state The state of the badge.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function badgeClasses({ large, }?: BadgeClassesState): ClassInfo;
+/**
+ * A Lit directive that adds badge styling to its element.
+ *
+ * @example
+ * ```ts
+ * html`<span class="${badge({large: true})}">1</span>`;
+ * ```
+ */
+export declare const badge: (state?: BadgeClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/badge/badge.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** Badge classes. */
+export const BADGE_CLASSES = {
+    badge: 'badge',
+    badgeLarge: 'badge-large',
+};
+/**
+ * Returns the badge classes to apply to an element.
+ *
+ * @param state The state of the badge.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function badgeClasses({ large = false, } = {}) {
+    return {
+        [BADGE_CLASSES.badge]: true,
+        [BADGE_CLASSES.badgeLarge]: large,
+    };
+}
+/**
+ * A Lit directive that adds badge styling to its element.
+ *
+ * @example
+ * ```ts
+ * html`<span class="${badge({large: true})}">1</span>`;
+ * ```
+ */
+export const badge = createClassMapDirective({
+    getClasses: badgeClasses,
+});
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAEhE,qBAAqB;AACrB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,GAAG,KAAK,MACQ,EAAE;IACvB,OAAO;QACL,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI;QAC3B,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK;KAClC,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,uBAAuB,CAAoB;IAC9D,UAAU,EAAE,YAAY;CACzB,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/** Badge classes. */\nexport const BADGE_CLASSES = {\n  badge: 'badge',\n  badgeLarge: 'badge-large',\n} as const;\n\n/** The state provided to the `badgeClasses()` function. */\nexport interface BadgeClassesState {\n  /** Whether the badge is large. */\n  large?: boolean;\n}\n\n/**\n * Returns the badge classes to apply to an element.\n *\n * @param state The state of the badge.\n * @return An object of class names and truthy values if they apply.\n */\nexport function badgeClasses({\n  large = false,\n}: BadgeClassesState = {}): ClassInfo {\n  return {\n    [BADGE_CLASSES.badge]: true,\n    [BADGE_CLASSES.badgeLarge]: large,\n  };\n}\n\n/**\n * A Lit directive that adds badge styling to its element.\n *\n * @example\n * ```ts\n * html`<span class=\"${badge({large: true})}\">1</span>`;\n * ```\n */\nexport const badge = createClassMapDirective<BadgeClassesState>({\n  getClasses: badgeClasses,\n});\n"]}

package/labs/gb/components/badge/badge.scss

@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'badge-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.badge {
+  .badge {
+    & {
+      @include badge-tokens.root;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--container-color);
+      border-radius: var(--shape);
+      height: var(--size);
+      width: var(--size);
+      box-sizing: border-box;
+
+      slot {
+        display: none;
+      }
+    }
+
+    // Large badge (with text)
+    &.badge-large {
+      @include badge-tokens.large;
+      width: auto;
+      min-width: var(--size);
+      padding: 0 4px;
+
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+
+      slot {
+        display: contents;
+      }
+    }
+  }
+}

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

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

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

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

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

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

package/labs/gb/components/button/_button-tokens.scss

@@ -4,6 +4,7 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --container-color: transparent;
   --container-height: auto;
   --container-elevation: var(--md-sys-elevation-shadow-0);
@@ -19,6 +20,7 @@
   --leading-space: 0;
   --state-layer-color: transparent;
   --trailing-space: 0;
+  // LINT.ThenChange(md-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin selected {

package/labs/gb/components/button/{md-button.d.ts → button-element.d.ts}

@@ -4,17 +4,32 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        /** A Material Design button. */
-        'md-button': Button;
-    }
-}
 declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
 /**
  * A Material Design button.
+ *
+ * @slot - Used to display a label and optional icon.
+ * @slot container - Used to set a custom background container for the button.
+ * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
+ * @csspart btn - The button's root element.
+ * @cssprop --container-color
+ * @cssprop --container-height
+ * @cssprop --container-elevation
+ * @cssprop --container-shape
+ * @cssprop --outline-width
+ * @cssprop --outline-color
+ * @cssprop --icon-label-space
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --label-text-color
+ * @cssprop --leading-space
+ * @cssprop --state-layer-color
+ * @cssprop --trailing-space
  */
-export declare class Button extends baseClass {
+export declare class ButtonElement extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     static styles: CSSResultOrNative[];