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

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

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { ripple } from '../ripple/ripple.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 cardStyles from './card.css' with { type: 'css' }; // github-only
+// import cardStyles from './card.cssresult.js'; // google3-only
+import { card } from './card.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(LitElement);
+/**
+ * A Material Design card.
+ */
+let Card = class Card extends baseClass {
+    constructor() {
+        super(...arguments);
+        /** The color of the card. */
+        this.color = 'outlined';
+        /** Whether the card is disabled. */
+        this.disabled = false;
+        /** Whether the card is interactive. */
+        this.interactive = false;
+    }
+    render() {
+        const { ariaLabel } = this;
+        return html `<div
+      part="card"
+      class="${card({
+            color: this.color,
+            disabled: this.disabled,
+            interactive: this.interactive,
+        })}">
+      ${this.interactive
+            ? html `<button
+            part="card-btn"
+            class="card-btn ripple focus-ring-target"
+            ${ripple()}
+            ?disabled="${this.disabled}"
+            aria-label="${ariaLabel || nothing}"></button>`
+            : nothing}
+      <slot></slot>
+    </div>`;
+    }
+};
+/** @nocollapse */
+Card.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+Card.styles = [
+    focusRingStyles,
+    rippleStyles,
+    cardStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .card {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property()
+], Card.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "interactive", void 0);
+Card = __decorate([
+    customElement('md-card')
+], Card);
+export { Card };
+//# sourceMappingURL=md-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAA5B;;QAqBL,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;IAsBjD,CAAC;IApBoB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;WAEN,CAAC;IACV,CAAC;;AAhDD,kBAAkB;AACF,sBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,WAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAGU;IAAX,QAAQ,EAAE;mCAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAqB;AA5BpC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CAkDhB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design card component. */\n    'md-card': Card;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .card {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/labs/gb/components/checkbox/_checkbox-tokens.scss

@@ -0,0 +1,64 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --container-color: transparent;
+  --container-shape: 2px;
+  --container-size: 18px;
+  --icon-color: transparent;
+  --icon-size: 18px;
+  --outline-color: var(--md-sys-color-on-surface-variant);
+  --outline-width: 2px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+}
+
+@mixin hovered {
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin selected {
+  --outline-width: 0;
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+}
+
+@mixin selected-hovered {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin error {
+  --state-layer-color: var(--md-sys-color-error);
+  --outline-color: var(--md-sys-color-error);
+}
+
+@mixin error-selected {
+  --container-color: var(--md-sys-color-error);
+  --icon-color: var(--md-sys-color-on-error);
+}
+
+@mixin disabled {
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}
+
+@mixin disabled-selected {
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --icon-color: var(--md-sys-color-surface);
+}

package/labs/gb/components/checkbox/checkbox.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;@layer md.comp.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: "check"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: "remove"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}/*# sourceMappingURL=checkbox.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}

package/labs/gb/components/checkbox/checkbox.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/checkbox/checkbox.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;@layer md.comp.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: "check"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: "remove"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=checkbox.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cssresult.js","sourceRoot":"","sources":["checkbox.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,uEAAuE;AACvE,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/checkbox/checkbox.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;@layer md.comp.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: \"check\"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: \"remove\"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:\"\";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Checkbox classes. */
+export declare const CHECKBOX_CLASSES: {
+    readonly checkbox: "checkbox";
+    readonly invalid: string;
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly checked: string;
+    readonly indeterminate: string;
+    readonly disabled: string;
+};
+/** The state provided to the `checkboxClasses()` function. */
+export interface CheckboxClassesState {
+    /** Emulates `:invalid`. */
+    invalid?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:indeterminate`. */
+    indeterminate?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the checkbox classes to apply to an element based on the given state.
+ *
+ * @param state The state of the checkbox.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function checkboxClasses({ invalid, hover, focus, active, checked, indeterminate, disabled, }?: CheckboxClassesState): ClassInfo;
+/**
+ * Sets up checkbox functionality for the given element.
+ *
+ * @param checkbox The element on which to set up checkbox functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupCheckbox(checkbox: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds checkbox styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<input type="checkbox" class="${checkbox()}">`;
+ * ```
+ */
+export declare const checkbox: (state?: CheckboxClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/checkbox/checkbox.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
+/** Checkbox classes. */
+export const CHECKBOX_CLASSES = {
+    checkbox: 'checkbox',
+    invalid: PSEUDO_CLASSES.invalid,
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    active: PSEUDO_CLASSES.active,
+    checked: PSEUDO_CLASSES.checked,
+    indeterminate: PSEUDO_CLASSES.indeterminate,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the checkbox classes to apply to an element based on the given state.
+ *
+ * @param state The state of the checkbox.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function checkboxClasses({ invalid = false, hover = false, focus = false, active = false, checked = false, indeterminate = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [CHECKBOX_CLASSES.checkbox]: true,
+        [CHECKBOX_CLASSES.checked]: checked,
+        [CHECKBOX_CLASSES.indeterminate]: indeterminate,
+        [CHECKBOX_CLASSES.disabled]: disabled,
+        [CHECKBOX_CLASSES.invalid]: invalid,
+        [CHECKBOX_CLASSES.hover]: hover,
+        [CHECKBOX_CLASSES.focus]: focus,
+        [CHECKBOX_CLASSES.active]: active,
+    };
+}
+/**
+ * Sets up checkbox functionality for the given element.
+ *
+ * @param checkbox The element on which to set up checkbox functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupCheckbox(checkbox, opts) {
+    setupRipple(checkbox, opts);
+}
+/**
+ * A Lit directive that adds checkbox styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<input type="checkbox" class="${checkbox()}">`;
+ * ```
+ */
+export const checkbox = createClassMapDirective({
+    getClasses: checkboxClasses,
+    setupElement: setupCheckbox,
+});
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAE3D,wBAAwB;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,aAAa,EAAE,cAAc,CAAC,aAAa;IAC3C,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAoBX;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,IAAI;QACjC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa;QAC/C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,QAAQ;QACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,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 {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Checkbox classes. */\nexport const CHECKBOX_CLASSES = {\n  checkbox: 'checkbox',\n  invalid: PSEUDO_CLASSES.invalid,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  indeterminate: PSEUDO_CLASSES.indeterminate,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `checkboxClasses()` function. */\nexport interface CheckboxClassesState {\n  /** Emulates `:invalid`. */\n  invalid?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:indeterminate`. */\n  indeterminate?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the checkbox classes to apply to an element based on the given state.\n *\n * @param state The state of the checkbox.\n * @return An object of class names and truthy values if they apply.\n */\nexport function checkboxClasses({\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}: CheckboxClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [CHECKBOX_CLASSES.checkbox]: true,\n    [CHECKBOX_CLASSES.checked]: checked,\n    [CHECKBOX_CLASSES.indeterminate]: indeterminate,\n    [CHECKBOX_CLASSES.disabled]: disabled,\n    [CHECKBOX_CLASSES.invalid]: invalid,\n    [CHECKBOX_CLASSES.hover]: hover,\n    [CHECKBOX_CLASSES.focus]: focus,\n    [CHECKBOX_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up checkbox functionality for the given element.\n *\n * @param checkbox The element on which to set up checkbox functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupCheckbox(\n  checkbox: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(checkbox, opts);\n}\n\n/**\n * A Lit directive that adds checkbox styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<input type=\"checkbox\" class=\"${checkbox()}\">`;\n * ```\n */\nexport const checkbox = createClassMapDirective({\n  getClasses: checkboxClasses,\n  setupElement: setupCheckbox,\n});\n"]}

package/labs/gb/components/checkbox/checkbox.scss

@@ -0,0 +1,105 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'checkbox-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.checkbox {
+  .checkbox {
+    & {
+      @include checkbox-tokens.root;
+    }
+
+    &:is(:hover, .hover) {
+      @include checkbox-tokens.hovered;
+    }
+
+    &:is(:focus-within, .focus) {
+      @include checkbox-tokens.focused;
+    }
+
+    &:is(:active, .active) {
+      @include checkbox-tokens.pressed;
+    }
+
+    &:is(:checked, .checked, :indeterminate, .indeterminate) {
+      @include checkbox-tokens.selected;
+
+      &:where(:hover, .hover) {
+        @include checkbox-tokens.selected-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include checkbox-tokens.selected-pressed;
+      }
+    }
+
+    &:is(:invalid, .invalid) {
+      @include checkbox-tokens.error;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.error-selected;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include checkbox-tokens.disabled;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      appearance: none;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background-image: none;
+      outline: none;
+      margin: 0;
+      --icon: 'check';
+
+      &:is(:indeterminate, .indeterminate)::before {
+        --icon: 'remove';
+      }
+
+      &::before {
+        content: var(--icon);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        overflow: hidden;
+        aspect-ratio: 1;
+        width: var(--container-size);
+        background: var(--container-color);
+        border-radius: var(--container-shape);
+        border: var(--outline-width) solid var(--outline-color);
+        color: var(--icon-color);
+        font: var(--icon-size) / 1 var(--md-icon-font);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        aspect-ratio: 1;
+        background-image: var(--ripple);
+        color: var(--state-layer-color);
+        width: var(--state-layer-size);
+        border-radius: var(--state-layer-shape);
+        outline: var(--focus-ring-outline);
+        outline-offset: var(--focus-ring-offset);
+        transition: var(--ripple-transition);
+        animation: var(--ripple-animation), var(--focus-ring-animation);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
+import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design checkbox component. */
+        'md-checkbox': Checkbox;
+    }
+}
+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/constraint-validation.js").ConstraintValidation>>;
+/**
+ * A Material Design checkbox component.
+ */
+export declare class Checkbox extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the checkbox is invalid.
+     */
+    error: boolean;
+    /**
+     * Whether or not the checkbox is selected.
+     */
+    checked: boolean;
+    /**
+     * The default checked state of the checkbox.
+     */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * Whether or not the checkbox is indeterminate.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+     */
+    indeterminate: boolean;
+    /**
+     * When true, require the checkbox to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    required: boolean;
+    /**
+     * The value of the checkbox that is submitted with a form when selected.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+     */
+    value: string;
+    private readonly input;
+    /**
+     * Mimics the behavior of <input> dirty checkedness, where the `checked`
+     * attribute only updates the checked state if the checkbox has not been
+     * interacted with.
+     *
+     * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+     */
+    private dirtyCheckedness;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLInputElement;
+}
+export {};