@maicol07/material-web 2.3.0 → 2.5.1

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,16 @@
+/**
+ * @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 {
+    /** @nocollapse */
+    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,50 @@
+/**
+ * @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;
+        });
+    }
+}
+/** @nocollapse */
+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;;QAcmB,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;;AA9BD,kBAAkB;AACF,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  /** @nocollapse */\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

@@ -0,0 +1,200 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --container-height: auto;
+  --container-shape: calc(var(--container-height) / 2);
+  --icon-color: currentColor;
+  --icon-label-space: 8px;
+  --icon-size: 20px;
+  --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  --label-text-color: currentColor;
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-space: 0;
+  --md-icon-fill: 1;
+  --outline-color: transparent;
+  --outline-width: 0;
+  --state-layer-color: transparent;
+  --trailing-space: 0;
+  // LINT.ThenChange(button-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin unselected {
+  --md-icon-fill: 0;
+}
+
+@mixin selected {
+  --container-shape: var(--md-sys-shape-corner-md);
+  --md-icon-fill: 1;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin filled-unselected {
+  --container-color: var(--md-sys-color-surface-container);
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin filled-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --icon-color: var(--md-sys-color-primary);
+  --label-text-color: var(--md-sys-color-primary);
+}
+
+@mixin elevated-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --icon-color: var(--md-sys-color-on-secondary-container);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin tonal-selected {
+  --container-color: var(--md-sys-color-secondary);
+  --icon-color: var(--md-sys-color-on-secondary);
+  --label-text-color: var(--md-sys-color-on-secondary);
+}
+
+@mixin outlined {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  --outline-color: var(--md-sys-color-outline-variant);
+}
+
+@mixin outlined-selected {
+  --container-color: var(--md-sys-color-inverse-surface);
+  --icon-color: var(--md-sys-color-inverse-on-surface);
+  --label-text-color: var(--md-sys-color-inverse-on-surface);
+}
+
+@mixin text {
+  --icon-color: var(--md-sys-color-primary);
+  --label-text-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin xs {
+  --container-height: 32px;
+  --leading-space: 12px;
+  --outline-width: 1px;
+  --trailing-space: 12px;
+}
+
+@mixin sm {
+  --container-height: 40px;
+  --leading-space: 16px;
+  --outline-width: 1px;
+  --trailing-space: 16px;
+}
+
+@mixin md {
+  --container-height: 56px;
+  --icon-size: 24px;
+  --label-text: var(--md-sys-typescale-title-md);
+  --label-text-axes: var(--md-sys-typescale-title-md-axes);
+  --label-text-tracking: var(--md-sys-typescale-title-md-tracking);
+  --leading-space: 24px;
+  --outline-width: 1px;
+  --trailing-space: 24px;
+}
+
+@mixin md-selected {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --icon-label-space: 12px;
+  --icon-size: 32px;
+  --label-text: var(--md-sys-typescale-headline-sm);
+  --label-text-axes: var(--md-sys-typescale-headline-sm-axes);
+  --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
+  --leading-space: 48px;
+  --outline-width: 2px;
+  --trailing-space: 48px;
+}
+
+@mixin lg-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin xl {
+  --container-height: 136px;
+  --icon-label-space: 16px;
+  --icon-size: 40px;
+  --label-text: var(--md-sys-typescale-headline-lg);
+  --label-text-axes: var(--md-sys-typescale-headline-lg-axes);
+  --label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);
+  --leading-space: 64px;
+  --outline-width: 3px;
+  --trailing-space: 64px;
+}
+
+@mixin xl-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin square-md {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin square-lg {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-xl {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-selected {
+  --container-shape: calc(var(--container-height) / 2);
+}
+
+@mixin pressed {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin pressed-md {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin pressed-lg {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin pressed-xl {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin disabled {
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}