@maicol07/material-web 2.3.0 → 2.5.1

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/switch/switch.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.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:". handle ." 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: ""}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: ""): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:"";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: " "}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=switch.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cssresult.js","sourceRoot":"","sources":["switch.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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/switch/switch.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.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:\". handle .\" 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: \"\"}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: \"\"): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:\"\";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: \" \"}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}\n`;\nexport default styles.styleSheet!;\n"]}

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

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

package/labs/gb/components/switch/switch.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled } from '../shared/pseudo-classes.js';
+/** Switch classes. */
+export const SWITCH_CLASSES = {
+    switch: 'switch',
+    checked: PSEUDO_CLASSES.checked,
+    hover: PSEUDO_CLASSES.hover,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the switch classes to apply to an element based on the given state.
+ *
+ * @param state The state of the switch.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function switchClasses({ checked = false, hover = false, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [SWITCH_CLASSES.switch]: true,
+        [SWITCH_CLASSES.checked]: checked,
+        [SWITCH_CLASSES.hover]: hover,
+        [SWITCH_CLASSES.active]: active,
+        [SWITCH_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up switch functionality for the given element.
+ *
+ * @param switchEl The element on which to set up switch functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupSwitch(switchEl, opts) {
+    const isButton = switchEl.matches('button');
+    if (isButton) {
+        // Only setup dispatch hooks if we add a button click listener, but call it
+        // before setupRipple() adds its click listener.
+        setupDispatchHooks(switchEl, 'click');
+    }
+    setupRipple(switchEl, opts);
+    if (!isButton)
+        return;
+    // Support toggling <button role="switch" aria-checked="">
+    switchEl.addEventListener('click', (event) => {
+        if (isDisabled(switchEl))
+            return;
+        const wasChecked = switchEl.ariaChecked === 'true';
+        switchEl.ariaChecked = String(!wasChecked);
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                switchEl.ariaChecked = String(wasChecked);
+                return;
+            }
+            // Mimic native browser input and change event behavior.
+            switchEl.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            switchEl.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    }, opts);
+}
+/**
+ * A Lit directive that adds switch styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <input role="switch" type="checkbox" class="${switchToggle()}">
+ *
+ *   <button role="switch" aria-checked="false" class="${switchToggle()}"></button>
+ * `;
+ * ```
+ */
+export const switchToggle = createClassMapDirective({
+    getClasses: switchClasses,
+    setupElement: setupSwitch,
+});
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,+CAA+C,CAAC;AACvD,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,EAAE,UAAU,EAAC,MAAM,6BAA6B,CAAC;AAEvE,sBAAsB;AACtB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAcX;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACM,EAAE;IACxB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI;QAC7B,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO;QACjC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK;QAC7B,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM;QAC/B,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACpC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CACzB,QAAqB,EACrB,IAA6B;IAE7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5C,IAAI,QAAQ,EAAE,CAAC;QACb,2EAA2E;QAC3E,gDAAgD;QAChD,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC;IAED,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,QAAQ;QAAE,OAAO;IAEtB,0DAA0D;IAC1D,QAAQ,CAAC,gBAAgB,CACvB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,UAAU,CAAC,QAAQ,CAAC;YAAE,OAAO;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,KAAK,MAAM,CAAC;QACnD,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3C,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;YACxB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;gBAC1C,OAAO;YACT,CAAC;YAED,wDAAwD;YACxD,QAAQ,CAAC,aAAa,CACpB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;YACF,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACL,CAAC,EACD,IAAI,CACL,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,uBAAuB,CAAC;IAClD,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,WAAW;CAC1B,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 {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Switch classes. */\nexport const SWITCH_CLASSES = {\n  switch: 'switch',\n  checked: PSEUDO_CLASSES.checked,\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `switchClasses()` function. */\nexport interface SwitchClassesState {\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the switch classes to apply to an element based on the given state.\n *\n * @param state The state of the switch.\n * @return An object of class names and truthy values if they apply.\n */\nexport function switchClasses({\n  checked = false,\n  hover = false,\n  active = false,\n  disabled = false,\n}: SwitchClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [SWITCH_CLASSES.switch]: true,\n    [SWITCH_CLASSES.checked]: checked,\n    [SWITCH_CLASSES.hover]: hover,\n    [SWITCH_CLASSES.active]: active,\n    [SWITCH_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up switch functionality for the given element.\n *\n * @param switchEl The element on which to set up switch functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupSwitch(\n  switchEl: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  const isButton = switchEl.matches('button');\n  if (isButton) {\n    // Only setup dispatch hooks if we add a button click listener, but call it\n    // before setupRipple() adds its click listener.\n    setupDispatchHooks(switchEl, 'click');\n  }\n\n  setupRipple(switchEl, opts);\n  if (!isButton) return;\n\n  // Support toggling <button role=\"switch\" aria-checked=\"\">\n  switchEl.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(switchEl)) return;\n      const wasChecked = switchEl.ariaChecked === 'true';\n      switchEl.ariaChecked = String(!wasChecked);\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) {\n          switchEl.ariaChecked = String(wasChecked);\n          return;\n        }\n\n        // Mimic native browser input and change event behavior.\n        switchEl.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        switchEl.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds switch styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <input role=\"switch\" type=\"checkbox\" class=\"${switchToggle()}\">\n *\n *   <button role=\"switch\" aria-checked=\"false\" class=\"${switchToggle()}\"></button>\n * `;\n * ```\n */\nexport const switchToggle = createClassMapDirective({\n  getClasses: switchClasses,\n  setupElement: setupSwitch,\n});\n"]}

package/labs/gb/components/switch/switch.scss

@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'switch-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.switch {
+  .switch {
+    & {
+      @include switch-tokens.root;
+    }
+    &:is(:hover, .hover) {
+      @include switch-tokens.hovered;
+    }
+    &:is(:checked, .checked, [aria-checked='true']) {
+      @include switch-tokens.selected;
+      &:where(:hover, .hover) {
+        @include switch-tokens.selected-hovered;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include switch-tokens.pressed;
+    }
+    &:is(:disabled, .disabled) {
+      @include switch-tokens.disabled;
+      &:where(:checked, .checked, [aria-checked='true']) {
+        @include switch-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      display: inline-grid;
+      grid-template: '. handle .' 1fr / 0fr min-content 1fr;
+      place-items: center;
+      appearance: none;
+      background: var(--track-color);
+      border: var(--track-outline-width) solid var(--track-outline-color);
+      border-radius: calc(var(--track-height) / 2);
+      width: var(--track-width);
+      height: var(--track-height);
+      margin: 0;
+      padding: 0;
+      transition: grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);
+      isolation: isolate;
+      position: relative;
+      color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+      --icon: '';
+
+      &:is(:checked, .checked, [aria-checked='true']) {
+        grid-template-columns: 1fr min-content 0fr;
+      }
+
+      &::before {
+        --_handle-size: if(
+          style(--icon: ''): var(--handle-size);
+          else: max(var(--handle-size), var(--with-icon-handle-size));
+        );
+        content: var(--icon);
+        font: var(--md-icon-size) var(--md-icon-font);
+        display: grid;
+        place-items: center;
+        z-index: -1;
+        grid-area: handle;
+        aspect-ratio: 1;
+        height: 100%;
+        clip-path: circle(calc(var(--_handle-size) / 2));
+        transition: clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 50%;
+        background: var(--handle-color);
+      }
+
+      &::after {
+        content: '';
+        z-index: -1;
+        position: absolute;
+        grid-area: handle;
+        background-image: var(--ripple);
+        aspect-ratio: 1;
+        width: var(--state-layer-size);
+        border-radius: 50%;
+        color: var(--state-layer-color);
+        transition: var(--ripple-transition);
+        animation: var(--ripple-animation);
+      }
+    }
+
+    &:has(.switch-icon-off:not(slot), .switch-icon-off.has-slotted) {
+      --icon: ' '; // Use space to clear CSS icon and update the handle size.
+    }
+
+    .switch-icon-off,
+    .switch-icon-on {
+      &:not(slot),
+      &::slotted(*) {
+        grid-area: handle;
+      }
+    }
+
+    &:is(:checked, .checked, [aria-checked='true']) .switch-icon-off,
+    &:not(:checked, .checked, [aria-checked='true']) .switch-icon-on {
+      display: none;
+    }
+  }
+}

package/labs/gb/styles/adopt-styles.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type CSSResultOrNative } from 'lit';
+/**
+ * Owner types that can adopt stylesheets using `adoptStyles()`.
+ */
+export type AdoptStylesOwner = DocumentOrShadowRoot | Element;
+/**
+ * Adopts the given stylesheets to the provided document or shadow root owner.
+ *
+ * @example
+ * ```ts
+ * import globalStylesheet from './stylesheet.css' with {type: 'css'};
+ *
+ * adoptStyles(document, globalStylesheet);
+ * ```
+ *
+ * If an element is provided, the styles are adopted to the element's owner
+ * document. If the element is within a shadow root, the styles are also adopted
+ * to the host shadow root.
+ *
+ * @example
+ * ```ts
+ * import hostClasses from './stylesheet.css' with {type: 'css'};
+ *
+ * class LightDomElement extends HTMLElement {
+ *   connectedCallback() {
+ *     adoptStyles(this, hostClasses);
+ *     this.classList.add('host-class');
+ *   }
+ * }
+ * ```
+ *
+ * @param owner The owner document, shadow root, or element to adopt the
+ *     styles to.
+ * @param styles The styles to adopt.
+ */
+export declare function adoptStyles(owner: AdoptStylesOwner | null | undefined, styles: CSSResultOrNative | CSSResultOrNative[]): void;

package/labs/gb/styles/adopt-styles.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Adopts the given stylesheets to the provided document or shadow root owner.
+ *
+ * @example
+ * ```ts
+ * import globalStylesheet from './stylesheet.css' with {type: 'css'};
+ *
+ * adoptStyles(document, globalStylesheet);
+ * ```
+ *
+ * If an element is provided, the styles are adopted to the element's owner
+ * document. If the element is within a shadow root, the styles are also adopted
+ * to the host shadow root.
+ *
+ * @example
+ * ```ts
+ * import hostClasses from './stylesheet.css' with {type: 'css'};
+ *
+ * class LightDomElement extends HTMLElement {
+ *   connectedCallback() {
+ *     adoptStyles(this, hostClasses);
+ *     this.classList.add('host-class');
+ *   }
+ * }
+ * ```
+ *
+ * @param owner The owner document, shadow root, or element to adopt the
+ *     styles to.
+ * @param styles The styles to adopt.
+ */
+export function adoptStyles(owner, styles) {
+    if (!owner)
+        return;
+    styles = Array.isArray(styles) ? styles : [styles];
+    const stylesheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+    if (adopt(owner, stylesheets)) {
+        // Styles adopted directly on the owner document or shadow root.
+        return;
+    }
+    // When provided an element, adopt styles to the element's document and host
+    // shadow root, if present.
+    adopt(owner.ownerDocument, stylesheets);
+    adopt(owner.getRootNode(), stylesheets);
+}
+function adopt(node, stylesheets) {
+    if (node && 'adoptedStyleSheets' in node) {
+        const unadopted = stylesheets.filter((stylesheet) => !node.adoptedStyleSheets.includes(stylesheet));
+        if (!unadopted.length) {
+            // All styles are already adopted.
+            return true;
+        }
+        node.adoptedStyleSheets = Array.from(new Set([...node.adoptedStyleSheets, ...unadopted]));
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=adopt-styles.js.map

package/labs/gb/styles/adopt-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adopt-styles.js","sourceRoot":"","sources":["adopt-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CACzB,KAA0C,EAC1C,MAA+C;IAE/C,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACpD,CAAC,YAAY,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAC/C,CAAC;IAEF,IAAI,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC;QAC9B,gEAAgE;QAChE,OAAO;IACT,CAAC;IAED,4EAA4E;IAC5E,2BAA2B;IAC3B,KAAK,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,KAAK,CACZ,IAAwC,EACxC,WAA4B;IAE5B,IAAI,IAAI,IAAI,oBAAoB,IAAI,IAAI,EAAE,CAAC;QACzC,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAClC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAC9D,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACtB,kCAAkC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAClC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,SAAS,CAAC,CAAC,CACpD,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type CSSResultOrNative} from 'lit';\n\n/**\n * Owner types that can adopt stylesheets using `adoptStyles()`.\n */\nexport type AdoptStylesOwner = DocumentOrShadowRoot | Element;\n\n/**\n * Adopts the given stylesheets to the provided document or shadow root owner.\n *\n * @example\n * ```ts\n * import globalStylesheet from './stylesheet.css' with {type: 'css'};\n *\n * adoptStyles(document, globalStylesheet);\n * ```\n *\n * If an element is provided, the styles are adopted to the element's owner\n * document. If the element is within a shadow root, the styles are also adopted\n * to the host shadow root.\n *\n * @example\n * ```ts\n * import hostClasses from './stylesheet.css' with {type: 'css'};\n *\n * class LightDomElement extends HTMLElement {\n *   connectedCallback() {\n *     adoptStyles(this, hostClasses);\n *     this.classList.add('host-class');\n *   }\n * }\n * ```\n *\n * @param owner The owner document, shadow root, or element to adopt the\n *     styles to.\n * @param styles The styles to adopt.\n */\nexport function adoptStyles(\n  owner: AdoptStylesOwner | null | undefined,\n  styles: CSSResultOrNative | CSSResultOrNative[],\n): void {\n  if (!owner) return;\n\n  styles = Array.isArray(styles) ? styles : [styles];\n  const stylesheets: CSSStyleSheet[] = styles.map((s) =>\n    s instanceof CSSStyleSheet ? s : s.styleSheet!,\n  );\n\n  if (adopt(owner, stylesheets)) {\n    // Styles adopted directly on the owner document or shadow root.\n    return;\n  }\n\n  // When provided an element, adopt styles to the element's document and host\n  // shadow root, if present.\n  adopt(owner.ownerDocument, stylesheets);\n  adopt(owner.getRootNode(), stylesheets);\n}\n\nfunction adopt(\n  node: DocumentOrShadowRoot | Node | null,\n  stylesheets: CSSStyleSheet[],\n): node is DocumentOrShadowRoot {\n  if (node && 'adoptedStyleSheets' in node) {\n    const unadopted = stylesheets.filter(\n      (stylesheet) => !node.adoptedStyleSheets.includes(stylesheet),\n    );\n    if (!unadopted.length) {\n      // All styles are already adopted.\n      return true;\n    }\n    node.adoptedStyleSheets = Array.from(\n      new Set([...node.adoptedStyleSheets, ...unadopted]),\n    );\n    return true;\n  }\n  return false;\n}\n"]}

package/labs/gb/styles/color/internal/_color-tokens.scss

@@ -0,0 +1,95 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:meta';
+@use '../../../../../sass/ext/map_ext';
+@use '../../../../../tokens/versions/latest/sass/md-ref-palette';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color-meta';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark-meta';
+// go/keep-sorted end
+
+@mixin emit-custom-properties(
+  $light-vars: meta.module-variables(md-sys-color),
+  $light-meta: meta.module-variables(md-sys-color-meta),
+  $dark-vars: meta.module-variables(md-sys-color__dark),
+  $dark-meta: meta.module-variables(md-sys-color__dark-meta),
+  $include-palette: false,
+  $palette-vars: meta.module-variables(md-ref-palette),
+) {
+  $color-tokens: (
+    'primary',
+    'on-primary',
+    'primary-container',
+    'on-primary-container',
+    'primary-fixed',
+    'primary-fixed-dim',
+    'on-primary-fixed',
+    'on-primary-fixed-variant',
+    'secondary',
+    'on-secondary',
+    'secondary-container',
+    'on-secondary-container',
+    'secondary-fixed',
+    'secondary-fixed-dim',
+    'on-secondary-fixed',
+    'on-secondary-fixed-variant',
+    'tertiary',
+    'on-tertiary',
+    'tertiary-container',
+    'on-tertiary-container',
+    'tertiary-fixed',
+    'tertiary-fixed-dim',
+    'on-tertiary-fixed',
+    'on-tertiary-fixed-variant',
+    'error',
+    'on-error',
+    'error-container',
+    'on-error-container',
+    'surface',
+    'surface-dim',
+    'surface-bright',
+    'surface-container-lowest',
+    'surface-container-low',
+    'surface-container',
+    'surface-container-high',
+    'surface-container-highest',
+    'on-surface',
+    'on-surface-variant',
+    'outline',
+    'outline-variant',
+    'inverse-surface',
+    'inverse-on-surface',
+    'inverse-primary',
+    'scrim',
+    'shadow',
+  );
+
+  @each $name in $color-tokens {
+    $light: map_ext.get-strict($light-vars, $name);
+    $dark: map_ext.get-strict($dark-vars, $name);
+
+    @if $include-palette {
+      // Change value to reference palette variables.
+      $light: map_ext.get-strict($light-meta, '#{$name}--resolved');
+      $dark: map_ext.get-strict($dark-meta, '#{$name}--resolved');
+    }
+
+    $value: $light;
+    @if $light != $dark {
+      $value: light-dark($light, $dark);
+    }
+
+    --md-sys-color-#{$name}: #{$value};
+  }
+
+  @if $include-palette {
+    @each $name, $value in $palette-vars {
+      --md-ref-palette-#{$name}: #{$value};
+    }
+  }
+}

package/labs/gb/styles/color/md-color-tokens-full.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys.color{:root{color-scheme:light dark;--md-sys-color-primary: light-dark(var(--md-ref-palette-primary40), var(--md-ref-palette-primary80));--md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary100), var(--md-ref-palette-primary20));--md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary90), var(--md-ref-palette-primary30));--md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary30), var(--md-ref-palette-primary90));--md-sys-color-primary-fixed: var(--md-ref-palette-primary90);--md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80);--md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10);--md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30);--md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary40), var(--md-ref-palette-secondary80));--md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary100), var(--md-ref-palette-secondary20));--md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary90), var(--md-ref-palette-secondary30));--md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary30), var(--md-ref-palette-secondary90));--md-sys-color-secondary-fixed: var(--md-ref-palette-secondary90);--md-sys-color-secondary-fixed-dim: var(--md-ref-palette-secondary80);--md-sys-color-on-secondary-fixed: var(--md-ref-palette-secondary10);--md-sys-color-on-secondary-fixed-variant: var(--md-ref-palette-secondary30);--md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary40), var(--md-ref-palette-tertiary80));--md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary100), var(--md-ref-palette-tertiary20));--md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary90), var(--md-ref-palette-tertiary30));--md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary30), var(--md-ref-palette-tertiary90));--md-sys-color-tertiary-fixed: var(--md-ref-palette-tertiary90);--md-sys-color-tertiary-fixed-dim: var(--md-ref-palette-tertiary80);--md-sys-color-on-tertiary-fixed: var(--md-ref-palette-tertiary10);--md-sys-color-on-tertiary-fixed-variant: var(--md-ref-palette-tertiary30);--md-sys-color-error: light-dark(var(--md-ref-palette-error40), var(--md-ref-palette-error80));--md-sys-color-on-error: light-dark(var(--md-ref-palette-error100), var(--md-ref-palette-error20));--md-sys-color-error-container: light-dark(var(--md-ref-palette-error90), var(--md-ref-palette-error30));--md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error30), var(--md-ref-palette-error90));--md-sys-color-surface: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral6));--md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral87), var(--md-ref-palette-neutral6));--md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral24));--md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral100), var(--md-ref-palette-neutral4));--md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral96), var(--md-ref-palette-neutral10));--md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral94), var(--md-ref-palette-neutral12));--md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral92), var(--md-ref-palette-neutral17));--md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral90), var(--md-ref-palette-neutral22));--md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral10), var(--md-ref-palette-neutral90));--md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant30), var(--md-ref-palette-neutral-variant80));--md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant50), var(--md-ref-palette-neutral-variant60));--md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant80), var(--md-ref-palette-neutral-variant30));--md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral20), var(--md-ref-palette-neutral90));--md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral95), var(--md-ref-palette-neutral20));--md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary80), var(--md-ref-palette-primary40));--md-sys-color-scrim: var(--md-ref-palette-neutral0);--md-sys-color-shadow: var(--md-ref-palette-neutral0);--md-ref-palette-black: #000;--md-ref-palette-blue-variant0: #000;--md-ref-palette-blue-variant10: #001f2d;--md-ref-palette-blue-variant100: #fff;--md-ref-palette-blue-variant20: #003549;--md-ref-palette-blue-variant30: #004d68;--md-ref-palette-blue-variant40: #006788;--md-ref-palette-blue-variant50: #0081a8;--md-ref-palette-blue-variant60: #009dc9;--md-ref-palette-blue-variant70: #00bbea;--md-ref-palette-blue-variant80: #67d4ff;--md-ref-palette-blue-variant90: #bde9ff;--md-ref-palette-blue-variant95: #e0f4ff;--md-ref-palette-blue-variant98: #f4faff;--md-ref-palette-blue0: #000;--md-ref-palette-blue10: #001944;--md-ref-palette-blue100: #fff;--md-ref-palette-blue20: #012c6f;--md-ref-palette-blue30: #04409f;--md-ref-palette-blue40: #1157ce;--md-ref-palette-blue50: #3271ea;--md-ref-palette-blue60: #4e8ff8;--md-ref-palette-blue70: #76acff;--md-ref-palette-blue80: #a1c9ff;--md-ref-palette-blue90: #d0e4ff;--md-ref-palette-blue95: #e7f2ff;--md-ref-palette-blue98: #f5faff;--md-ref-palette-cyan0: #000;--md-ref-palette-cyan10: #001f26;--md-ref-palette-cyan100: #fff;--md-ref-palette-cyan20: #003641;--md-ref-palette-cyan30: #004e5d;--md-ref-palette-cyan40: #00687c;--md-ref-palette-cyan50: #00839b;--md-ref-palette-cyan60: #009ebb;--md-ref-palette-cyan70: #00bbdf;--md-ref-palette-cyan80: #60d5f3;--md-ref-palette-cyan90: #acedff;--md-ref-palette-cyan95: #d8f6ff;--md-ref-palette-cyan98: #f0fbff;--md-ref-palette-error0: #000;--md-ref-palette-error10: #410e0b;--md-ref-palette-error100: #fff;--md-ref-palette-error20: #601410;--md-ref-palette-error30: #8c1d18;--md-ref-palette-error40: #b3261e;--md-ref-palette-error50: #dc362e;--md-ref-palette-error60: #e46962;--md-ref-palette-error70: #ec928e;--md-ref-palette-error80: #f2b8b5;--md-ref-palette-error90: #f9dedc;--md-ref-palette-error95: #fceeee;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbf9;--md-ref-palette-green0: #000;--md-ref-palette-green10: #002110;--md-ref-palette-green100: #fff;--md-ref-palette-green20: #00381f;--md-ref-palette-green30: #00522c;--md-ref-palette-green40: #006c35;--md-ref-palette-green50: #128937;--md-ref-palette-green60: #1aa64a;--md-ref-palette-green70: #44c265;--md-ref-palette-green80: #80da88;--md-ref-palette-green90: #beefbb;--md-ref-palette-green95: #ddf8d8;--md-ref-palette-green98: #f2fcef;--md-ref-palette-grey-variant0: #000;--md-ref-palette-grey-variant10: #191d1c;--md-ref-palette-grey-variant100: #fff;--md-ref-palette-grey-variant20: #2d312f;--md-ref-palette-grey-variant30: #444746;--md-ref-palette-grey-variant40: #5c5f5e;--md-ref-palette-grey-variant50: #747775;--md-ref-palette-grey-variant60: #8e918f;--md-ref-palette-grey-variant70: #a9acaa;--md-ref-palette-grey-variant80: #c4c7c5;--md-ref-palette-grey-variant90: #e1e3e1;--md-ref-palette-grey-variant95: #eff2ef;--md-ref-palette-grey-variant98: #f7faf7;--md-ref-palette-grey0: #000;--md-ref-palette-grey10: #1b1b1c;--md-ref-palette-grey100: #fff;--md-ref-palette-grey20: #303030;--md-ref-palette-grey30: #474747;--md-ref-palette-grey40: #5e5e5e;--md-ref-palette-grey50: #777;--md-ref-palette-grey60: #919191;--md-ref-palette-grey70: #ababab;--md-ref-palette-grey80: #c7c7c7;--md-ref-palette-grey90: #e3e3e3;--md-ref-palette-grey95: #f2f2f2;--md-ref-palette-grey98: #f9f9f9;--md-ref-palette-neutral-variant0: #000;--md-ref-palette-neutral-variant10: #1d1a22;--md-ref-palette-neutral-variant100: #fff;--md-ref-palette-neutral-variant20: #322f37;--md-ref-palette-neutral-variant30: #49454f;--md-ref-palette-neutral-variant40: #605d66;--md-ref-palette-neutral-variant50: #79747e;--md-ref-palette-neutral-variant60: #938f99;--md-ref-palette-neutral-variant70: #aea9b4;--md-ref-palette-neutral-variant80: #cac4d0;--md-ref-palette-neutral-variant90: #e7e0ec;--md-ref-palette-neutral-variant95: #f5eefa;--md-ref-palette-neutral-variant98: #fdf7ff;--md-ref-palette-neutral-variant99: #fffbfe;--md-ref-palette-neutral0: #000;--md-ref-palette-neutral10: #1d1b20;--md-ref-palette-neutral100: #fff;--md-ref-palette-neutral12: #211f26;--md-ref-palette-neutral17: #2b2930;--md-ref-palette-neutral20: #322f35;--md-ref-palette-neutral22: #36343b;--md-ref-palette-neutral24: #3b383e;--md-ref-palette-neutral30: #48464c;--md-ref-palette-neutral4: #0f0d13;--md-ref-palette-neutral40: #605d64;--md-ref-palette-neutral50: #79767d;--md-ref-palette-neutral6: #141218;--md-ref-palette-neutral60: #938f96;--md-ref-palette-neutral70: #aea9b1;--md-ref-palette-neutral80: #cac5cd;--md-ref-palette-neutral87: #ded8e1;--md-ref-palette-neutral90: #e6e0e9;--md-ref-palette-neutral92: #ece6f0;--md-ref-palette-neutral94: #f3edf7;--md-ref-palette-neutral95: #f5eff7;--md-ref-palette-neutral96: #f7f2fa;--md-ref-palette-neutral98: #fef7ff;--md-ref-palette-neutral99: #fffbff;--md-ref-palette-orange0: #000;--md-ref-palette-orange10: #321200;--md-ref-palette-orange100: #fff;--md-ref-palette-orange20: #522302;--md-ref-palette-orange30: #753403;--md-ref-palette-orange40: #9a4600;--md-ref-palette-orange50: #c05a01;--md-ref-palette-orange60: #e86e00;--md-ref-palette-orange70: #ff8d41;--md-ref-palette-orange80: #ffb683;--md-ref-palette-orange90: #ffdcc3;--md-ref-palette-orange95: #ffede1;--md-ref-palette-orange98: #fff8f4;--md-ref-palette-pink0: #000;--md-ref-palette-pink10: #3d0023;--md-ref-palette-pink100: #fff;--md-ref-palette-pink20: #620438;--md-ref-palette-pink30: #8d0053;--md-ref-palette-pink40: #b60d6e;--md-ref-palette-pink50: #dc258d;--md-ref-palette-pink60: #f94aab;--md-ref-palette-pink70: #ff7dd2;--md-ref-palette-pink80: #ffaee4;--md-ref-palette-pink90: #ffd8ef;--md-ref-palette-pink95: #ffecf6;--md-ref-palette-pink98: #fff7fc;--md-ref-palette-primary0: #000;--md-ref-palette-primary10: #21005d;--md-ref-palette-primary100: #fff;--md-ref-palette-primary20: #381e72;--md-ref-palette-primary30: #4f378b;--md-ref-palette-primary40: #6750a4;--md-ref-palette-primary50: #7f67be;--md-ref-palette-primary60: #9a82db;--md-ref-palette-primary70: #b69df8;--md-ref-palette-primary80: #d0bcff;--md-ref-palette-primary90: #eaddff;--md-ref-palette-primary95: #f6edff;--md-ref-palette-primary98: #fef7ff;--md-ref-palette-primary99: #fffbfe;--md-ref-palette-purple0: #000;--md-ref-palette-purple10: #280255;--md-ref-palette-purple100: #fff;--md-ref-palette-purple20: #400b84;--md-ref-palette-purple30: #5629a4;--md-ref-palette-purple40: #7438d2;--md-ref-palette-purple50: #9254ea;--md-ref-palette-purple60: #ad72ff;--md-ref-palette-purple70: #c597ff;--md-ref-palette-purple80: #d9bafd;--md-ref-palette-purple90: #eedcfe;--md-ref-palette-purple95: #f7ecfe;--md-ref-palette-purple98: #fdf8ff;--md-ref-palette-red0: #000;--md-ref-palette-red10: #3a0907;--md-ref-palette-red100: #fff;--md-ref-palette-red20: #60150f;--md-ref-palette-red30: #8a1a16;--md-ref-palette-red40: #b3251e;--md-ref-palette-red50: #db372d;--md-ref-palette-red60: #f55e57;--md-ref-palette-red70: #ff8983;--md-ref-palette-red80: #ffb3ae;--md-ref-palette-red90: #ffdadc;--md-ref-palette-red95: #ffecee;--md-ref-palette-red98: #fff8f8;--md-ref-palette-secondary0: #000;--md-ref-palette-secondary10: #1d192b;--md-ref-palette-secondary100: #fff;--md-ref-palette-secondary20: #332d41;--md-ref-palette-secondary30: #4a4458;--md-ref-palette-secondary40: #625b71;--md-ref-palette-secondary50: #7a7289;--md-ref-palette-secondary60: #958da5;--md-ref-palette-secondary70: #b0a7c0;--md-ref-palette-secondary80: #ccc2dc;--md-ref-palette-secondary90: #e8def8;--md-ref-palette-secondary95: #f6edff;--md-ref-palette-secondary98: #fef7ff;--md-ref-palette-secondary99: #fffbfe;--md-ref-palette-tertiary0: #000;--md-ref-palette-tertiary10: #31111d;--md-ref-palette-tertiary100: #fff;--md-ref-palette-tertiary20: #492532;--md-ref-palette-tertiary30: #633b48;--md-ref-palette-tertiary40: #7d5260;--md-ref-palette-tertiary50: #986977;--md-ref-palette-tertiary60: #b58392;--md-ref-palette-tertiary70: #d29dac;--md-ref-palette-tertiary80: #efb8c8;--md-ref-palette-tertiary90: #ffd8e4;--md-ref-palette-tertiary95: #ffecf1;--md-ref-palette-tertiary98: #fff8f8;--md-ref-palette-tertiary99: #fffbfa;--md-ref-palette-white: #fff;--md-ref-palette-yellow0: #000;--md-ref-palette-yellow10: #2f1400;--md-ref-palette-yellow100: #fff;--md-ref-palette-yellow20: #4d2600;--md-ref-palette-yellow30: #6d3a01;--md-ref-palette-yellow40: #8f4e06;--md-ref-palette-yellow50: #b16300;--md-ref-palette-yellow60: #d37b00;--md-ref-palette-yellow70: #ef9800;--md-ref-palette-yellow80: #fcbd00;--md-ref-palette-yellow90: #ffe07c;--md-ref-palette-yellow95: #fff2b4;--md-ref-palette-yellow98: #fffade}}/*# sourceMappingURL=md-color-tokens-full.css.map */

package/labs/gb/styles/color/md-color-tokens-full.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["md-color-tokens-full.scss","internal/_color-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,oBACE,MACE,wBC2EA,wwIAKE","file":"md-color-tokens-full.css"}

package/labs/gb/styles/color/md-color-tokens-full.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/styles/color/md-color-tokens-full.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/styles/color/md-color-tokens-full.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys.color{:root{color-scheme:light dark;--md-sys-color-primary: light-dark(var(--md-ref-palette-primary40), var(--md-ref-palette-primary80));--md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary100), var(--md-ref-palette-primary20));--md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary90), var(--md-ref-palette-primary30));--md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary30), var(--md-ref-palette-primary90));--md-sys-color-primary-fixed: var(--md-ref-palette-primary90);--md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80);--md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10);--md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30);--md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary40), var(--md-ref-palette-secondary80));--md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary100), var(--md-ref-palette-secondary20));--md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary90), var(--md-ref-palette-secondary30));--md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary30), var(--md-ref-palette-secondary90));--md-sys-color-secondary-fixed: var(--md-ref-palette-secondary90);--md-sys-color-secondary-fixed-dim: var(--md-ref-palette-secondary80);--md-sys-color-on-secondary-fixed: var(--md-ref-palette-secondary10);--md-sys-color-on-secondary-fixed-variant: var(--md-ref-palette-secondary30);--md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary40), var(--md-ref-palette-tertiary80));--md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary100), var(--md-ref-palette-tertiary20));--md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary90), var(--md-ref-palette-tertiary30));--md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary30), var(--md-ref-palette-tertiary90));--md-sys-color-tertiary-fixed: var(--md-ref-palette-tertiary90);--md-sys-color-tertiary-fixed-dim: var(--md-ref-palette-tertiary80);--md-sys-color-on-tertiary-fixed: var(--md-ref-palette-tertiary10);--md-sys-color-on-tertiary-fixed-variant: var(--md-ref-palette-tertiary30);--md-sys-color-error: light-dark(var(--md-ref-palette-error40), var(--md-ref-palette-error80));--md-sys-color-on-error: light-dark(var(--md-ref-palette-error100), var(--md-ref-palette-error20));--md-sys-color-error-container: light-dark(var(--md-ref-palette-error90), var(--md-ref-palette-error30));--md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error30), var(--md-ref-palette-error90));--md-sys-color-surface: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral6));--md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral87), var(--md-ref-palette-neutral6));--md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral24));--md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral100), var(--md-ref-palette-neutral4));--md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral96), var(--md-ref-palette-neutral10));--md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral94), var(--md-ref-palette-neutral12));--md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral92), var(--md-ref-palette-neutral17));--md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral90), var(--md-ref-palette-neutral22));--md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral10), var(--md-ref-palette-neutral90));--md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant30), var(--md-ref-palette-neutral-variant80));--md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant50), var(--md-ref-palette-neutral-variant60));--md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant80), var(--md-ref-palette-neutral-variant30));--md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral20), var(--md-ref-palette-neutral90));--md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral95), var(--md-ref-palette-neutral20));--md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary80), var(--md-ref-palette-primary40));--md-sys-color-scrim: var(--md-ref-palette-neutral0);--md-sys-color-shadow: var(--md-ref-palette-neutral0);--md-ref-palette-black: #000;--md-ref-palette-blue-variant0: #000;--md-ref-palette-blue-variant10: #001f2d;--md-ref-palette-blue-variant100: #fff;--md-ref-palette-blue-variant20: #003549;--md-ref-palette-blue-variant30: #004d68;--md-ref-palette-blue-variant40: #006788;--md-ref-palette-blue-variant50: #0081a8;--md-ref-palette-blue-variant60: #009dc9;--md-ref-palette-blue-variant70: #00bbea;--md-ref-palette-blue-variant80: #67d4ff;--md-ref-palette-blue-variant90: #bde9ff;--md-ref-palette-blue-variant95: #e0f4ff;--md-ref-palette-blue-variant98: #f4faff;--md-ref-palette-blue0: #000;--md-ref-palette-blue10: #001944;--md-ref-palette-blue100: #fff;--md-ref-palette-blue20: #012c6f;--md-ref-palette-blue30: #04409f;--md-ref-palette-blue40: #1157ce;--md-ref-palette-blue50: #3271ea;--md-ref-palette-blue60: #4e8ff8;--md-ref-palette-blue70: #76acff;--md-ref-palette-blue80: #a1c9ff;--md-ref-palette-blue90: #d0e4ff;--md-ref-palette-blue95: #e7f2ff;--md-ref-palette-blue98: #f5faff;--md-ref-palette-cyan0: #000;--md-ref-palette-cyan10: #001f26;--md-ref-palette-cyan100: #fff;--md-ref-palette-cyan20: #003641;--md-ref-palette-cyan30: #004e5d;--md-ref-palette-cyan40: #00687c;--md-ref-palette-cyan50: #00839b;--md-ref-palette-cyan60: #009ebb;--md-ref-palette-cyan70: #00bbdf;--md-ref-palette-cyan80: #60d5f3;--md-ref-palette-cyan90: #acedff;--md-ref-palette-cyan95: #d8f6ff;--md-ref-palette-cyan98: #f0fbff;--md-ref-palette-error0: #000;--md-ref-palette-error10: #410e0b;--md-ref-palette-error100: #fff;--md-ref-palette-error20: #601410;--md-ref-palette-error30: #8c1d18;--md-ref-palette-error40: #b3261e;--md-ref-palette-error50: #dc362e;--md-ref-palette-error60: #e46962;--md-ref-palette-error70: #ec928e;--md-ref-palette-error80: #f2b8b5;--md-ref-palette-error90: #f9dedc;--md-ref-palette-error95: #fceeee;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbf9;--md-ref-palette-green0: #000;--md-ref-palette-green10: #002110;--md-ref-palette-green100: #fff;--md-ref-palette-green20: #00381f;--md-ref-palette-green30: #00522c;--md-ref-palette-green40: #006c35;--md-ref-palette-green50: #128937;--md-ref-palette-green60: #1aa64a;--md-ref-palette-green70: #44c265;--md-ref-palette-green80: #80da88;--md-ref-palette-green90: #beefbb;--md-ref-palette-green95: #ddf8d8;--md-ref-palette-green98: #f2fcef;--md-ref-palette-grey-variant0: #000;--md-ref-palette-grey-variant10: #191d1c;--md-ref-palette-grey-variant100: #fff;--md-ref-palette-grey-variant20: #2d312f;--md-ref-palette-grey-variant30: #444746;--md-ref-palette-grey-variant40: #5c5f5e;--md-ref-palette-grey-variant50: #747775;--md-ref-palette-grey-variant60: #8e918f;--md-ref-palette-grey-variant70: #a9acaa;--md-ref-palette-grey-variant80: #c4c7c5;--md-ref-palette-grey-variant90: #e1e3e1;--md-ref-palette-grey-variant95: #eff2ef;--md-ref-palette-grey-variant98: #f7faf7;--md-ref-palette-grey0: #000;--md-ref-palette-grey10: #1b1b1c;--md-ref-palette-grey100: #fff;--md-ref-palette-grey20: #303030;--md-ref-palette-grey30: #474747;--md-ref-palette-grey40: #5e5e5e;--md-ref-palette-grey50: #777;--md-ref-palette-grey60: #919191;--md-ref-palette-grey70: #ababab;--md-ref-palette-grey80: #c7c7c7;--md-ref-palette-grey90: #e3e3e3;--md-ref-palette-grey95: #f2f2f2;--md-ref-palette-grey98: #f9f9f9;--md-ref-palette-neutral-variant0: #000;--md-ref-palette-neutral-variant10: #1d1a22;--md-ref-palette-neutral-variant100: #fff;--md-ref-palette-neutral-variant20: #322f37;--md-ref-palette-neutral-variant30: #49454f;--md-ref-palette-neutral-variant40: #605d66;--md-ref-palette-neutral-variant50: #79747e;--md-ref-palette-neutral-variant60: #938f99;--md-ref-palette-neutral-variant70: #aea9b4;--md-ref-palette-neutral-variant80: #cac4d0;--md-ref-palette-neutral-variant90: #e7e0ec;--md-ref-palette-neutral-variant95: #f5eefa;--md-ref-palette-neutral-variant98: #fdf7ff;--md-ref-palette-neutral-variant99: #fffbfe;--md-ref-palette-neutral0: #000;--md-ref-palette-neutral10: #1d1b20;--md-ref-palette-neutral100: #fff;--md-ref-palette-neutral12: #211f26;--md-ref-palette-neutral17: #2b2930;--md-ref-palette-neutral20: #322f35;--md-ref-palette-neutral22: #36343b;--md-ref-palette-neutral24: #3b383e;--md-ref-palette-neutral30: #48464c;--md-ref-palette-neutral4: #0f0d13;--md-ref-palette-neutral40: #605d64;--md-ref-palette-neutral50: #79767d;--md-ref-palette-neutral6: #141218;--md-ref-palette-neutral60: #938f96;--md-ref-palette-neutral70: #aea9b1;--md-ref-palette-neutral80: #cac5cd;--md-ref-palette-neutral87: #ded8e1;--md-ref-palette-neutral90: #e6e0e9;--md-ref-palette-neutral92: #ece6f0;--md-ref-palette-neutral94: #f3edf7;--md-ref-palette-neutral95: #f5eff7;--md-ref-palette-neutral96: #f7f2fa;--md-ref-palette-neutral98: #fef7ff;--md-ref-palette-neutral99: #fffbff;--md-ref-palette-orange0: #000;--md-ref-palette-orange10: #321200;--md-ref-palette-orange100: #fff;--md-ref-palette-orange20: #522302;--md-ref-palette-orange30: #753403;--md-ref-palette-orange40: #9a4600;--md-ref-palette-orange50: #c05a01;--md-ref-palette-orange60: #e86e00;--md-ref-palette-orange70: #ff8d41;--md-ref-palette-orange80: #ffb683;--md-ref-palette-orange90: #ffdcc3;--md-ref-palette-orange95: #ffede1;--md-ref-palette-orange98: #fff8f4;--md-ref-palette-pink0: #000;--md-ref-palette-pink10: #3d0023;--md-ref-palette-pink100: #fff;--md-ref-palette-pink20: #620438;--md-ref-palette-pink30: #8d0053;--md-ref-palette-pink40: #b60d6e;--md-ref-palette-pink50: #dc258d;--md-ref-palette-pink60: #f94aab;--md-ref-palette-pink70: #ff7dd2;--md-ref-palette-pink80: #ffaee4;--md-ref-palette-pink90: #ffd8ef;--md-ref-palette-pink95: #ffecf6;--md-ref-palette-pink98: #fff7fc;--md-ref-palette-primary0: #000;--md-ref-palette-primary10: #21005d;--md-ref-palette-primary100: #fff;--md-ref-palette-primary20: #381e72;--md-ref-palette-primary30: #4f378b;--md-ref-palette-primary40: #6750a4;--md-ref-palette-primary50: #7f67be;--md-ref-palette-primary60: #9a82db;--md-ref-palette-primary70: #b69df8;--md-ref-palette-primary80: #d0bcff;--md-ref-palette-primary90: #eaddff;--md-ref-palette-primary95: #f6edff;--md-ref-palette-primary98: #fef7ff;--md-ref-palette-primary99: #fffbfe;--md-ref-palette-purple0: #000;--md-ref-palette-purple10: #280255;--md-ref-palette-purple100: #fff;--md-ref-palette-purple20: #400b84;--md-ref-palette-purple30: #5629a4;--md-ref-palette-purple40: #7438d2;--md-ref-palette-purple50: #9254ea;--md-ref-palette-purple60: #ad72ff;--md-ref-palette-purple70: #c597ff;--md-ref-palette-purple80: #d9bafd;--md-ref-palette-purple90: #eedcfe;--md-ref-palette-purple95: #f7ecfe;--md-ref-palette-purple98: #fdf8ff;--md-ref-palette-red0: #000;--md-ref-palette-red10: #3a0907;--md-ref-palette-red100: #fff;--md-ref-palette-red20: #60150f;--md-ref-palette-red30: #8a1a16;--md-ref-palette-red40: #b3251e;--md-ref-palette-red50: #db372d;--md-ref-palette-red60: #f55e57;--md-ref-palette-red70: #ff8983;--md-ref-palette-red80: #ffb3ae;--md-ref-palette-red90: #ffdadc;--md-ref-palette-red95: #ffecee;--md-ref-palette-red98: #fff8f8;--md-ref-palette-secondary0: #000;--md-ref-palette-secondary10: #1d192b;--md-ref-palette-secondary100: #fff;--md-ref-palette-secondary20: #332d41;--md-ref-palette-secondary30: #4a4458;--md-ref-palette-secondary40: #625b71;--md-ref-palette-secondary50: #7a7289;--md-ref-palette-secondary60: #958da5;--md-ref-palette-secondary70: #b0a7c0;--md-ref-palette-secondary80: #ccc2dc;--md-ref-palette-secondary90: #e8def8;--md-ref-palette-secondary95: #f6edff;--md-ref-palette-secondary98: #fef7ff;--md-ref-palette-secondary99: #fffbfe;--md-ref-palette-tertiary0: #000;--md-ref-palette-tertiary10: #31111d;--md-ref-palette-tertiary100: #fff;--md-ref-palette-tertiary20: #492532;--md-ref-palette-tertiary30: #633b48;--md-ref-palette-tertiary40: #7d5260;--md-ref-palette-tertiary50: #986977;--md-ref-palette-tertiary60: #b58392;--md-ref-palette-tertiary70: #d29dac;--md-ref-palette-tertiary80: #efb8c8;--md-ref-palette-tertiary90: #ffd8e4;--md-ref-palette-tertiary95: #ffecf1;--md-ref-palette-tertiary98: #fff8f8;--md-ref-palette-tertiary99: #fffbfa;--md-ref-palette-white: #fff;--md-ref-palette-yellow0: #000;--md-ref-palette-yellow10: #2f1400;--md-ref-palette-yellow100: #fff;--md-ref-palette-yellow20: #4d2600;--md-ref-palette-yellow30: #6d3a01;--md-ref-palette-yellow40: #8f4e06;--md-ref-palette-yellow50: #b16300;--md-ref-palette-yellow60: #d37b00;--md-ref-palette-yellow70: #ef9800;--md-ref-palette-yellow80: #fcbd00;--md-ref-palette-yellow90: #ffe07c;--md-ref-palette-yellow95: #fff2b4;--md-ref-palette-yellow98: #fffade}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=md-color-tokens-full.cssresult.js.map

package/labs/gb/styles/color/md-color-tokens-full.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-color-tokens-full.cssresult.js","sourceRoot":"","sources":["md-color-tokens-full.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4EAA4E;AAC5E,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/styles/color/md-color-tokens-full.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.color{:root{color-scheme:light dark;--md-sys-color-primary: light-dark(var(--md-ref-palette-primary40), var(--md-ref-palette-primary80));--md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary100), var(--md-ref-palette-primary20));--md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary90), var(--md-ref-palette-primary30));--md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary30), var(--md-ref-palette-primary90));--md-sys-color-primary-fixed: var(--md-ref-palette-primary90);--md-sys-color-primary-fixed-dim: var(--md-ref-palette-primary80);--md-sys-color-on-primary-fixed: var(--md-ref-palette-primary10);--md-sys-color-on-primary-fixed-variant: var(--md-ref-palette-primary30);--md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary40), var(--md-ref-palette-secondary80));--md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary100), var(--md-ref-palette-secondary20));--md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary90), var(--md-ref-palette-secondary30));--md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary30), var(--md-ref-palette-secondary90));--md-sys-color-secondary-fixed: var(--md-ref-palette-secondary90);--md-sys-color-secondary-fixed-dim: var(--md-ref-palette-secondary80);--md-sys-color-on-secondary-fixed: var(--md-ref-palette-secondary10);--md-sys-color-on-secondary-fixed-variant: var(--md-ref-palette-secondary30);--md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary40), var(--md-ref-palette-tertiary80));--md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary100), var(--md-ref-palette-tertiary20));--md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary90), var(--md-ref-palette-tertiary30));--md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary30), var(--md-ref-palette-tertiary90));--md-sys-color-tertiary-fixed: var(--md-ref-palette-tertiary90);--md-sys-color-tertiary-fixed-dim: var(--md-ref-palette-tertiary80);--md-sys-color-on-tertiary-fixed: var(--md-ref-palette-tertiary10);--md-sys-color-on-tertiary-fixed-variant: var(--md-ref-palette-tertiary30);--md-sys-color-error: light-dark(var(--md-ref-palette-error40), var(--md-ref-palette-error80));--md-sys-color-on-error: light-dark(var(--md-ref-palette-error100), var(--md-ref-palette-error20));--md-sys-color-error-container: light-dark(var(--md-ref-palette-error90), var(--md-ref-palette-error30));--md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error30), var(--md-ref-palette-error90));--md-sys-color-surface: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral6));--md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral87), var(--md-ref-palette-neutral6));--md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral98), var(--md-ref-palette-neutral24));--md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral100), var(--md-ref-palette-neutral4));--md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral96), var(--md-ref-palette-neutral10));--md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral94), var(--md-ref-palette-neutral12));--md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral92), var(--md-ref-palette-neutral17));--md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral90), var(--md-ref-palette-neutral22));--md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral10), var(--md-ref-palette-neutral90));--md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant30), var(--md-ref-palette-neutral-variant80));--md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant50), var(--md-ref-palette-neutral-variant60));--md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant80), var(--md-ref-palette-neutral-variant30));--md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral20), var(--md-ref-palette-neutral90));--md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral95), var(--md-ref-palette-neutral20));--md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary80), var(--md-ref-palette-primary40));--md-sys-color-scrim: var(--md-ref-palette-neutral0);--md-sys-color-shadow: var(--md-ref-palette-neutral0);--md-ref-palette-black: #000;--md-ref-palette-blue-variant0: #000;--md-ref-palette-blue-variant10: #001f2d;--md-ref-palette-blue-variant100: #fff;--md-ref-palette-blue-variant20: #003549;--md-ref-palette-blue-variant30: #004d68;--md-ref-palette-blue-variant40: #006788;--md-ref-palette-blue-variant50: #0081a8;--md-ref-palette-blue-variant60: #009dc9;--md-ref-palette-blue-variant70: #00bbea;--md-ref-palette-blue-variant80: #67d4ff;--md-ref-palette-blue-variant90: #bde9ff;--md-ref-palette-blue-variant95: #e0f4ff;--md-ref-palette-blue-variant98: #f4faff;--md-ref-palette-blue0: #000;--md-ref-palette-blue10: #001944;--md-ref-palette-blue100: #fff;--md-ref-palette-blue20: #012c6f;--md-ref-palette-blue30: #04409f;--md-ref-palette-blue40: #1157ce;--md-ref-palette-blue50: #3271ea;--md-ref-palette-blue60: #4e8ff8;--md-ref-palette-blue70: #76acff;--md-ref-palette-blue80: #a1c9ff;--md-ref-palette-blue90: #d0e4ff;--md-ref-palette-blue95: #e7f2ff;--md-ref-palette-blue98: #f5faff;--md-ref-palette-cyan0: #000;--md-ref-palette-cyan10: #001f26;--md-ref-palette-cyan100: #fff;--md-ref-palette-cyan20: #003641;--md-ref-palette-cyan30: #004e5d;--md-ref-palette-cyan40: #00687c;--md-ref-palette-cyan50: #00839b;--md-ref-palette-cyan60: #009ebb;--md-ref-palette-cyan70: #00bbdf;--md-ref-palette-cyan80: #60d5f3;--md-ref-palette-cyan90: #acedff;--md-ref-palette-cyan95: #d8f6ff;--md-ref-palette-cyan98: #f0fbff;--md-ref-palette-error0: #000;--md-ref-palette-error10: #410e0b;--md-ref-palette-error100: #fff;--md-ref-palette-error20: #601410;--md-ref-palette-error30: #8c1d18;--md-ref-palette-error40: #b3261e;--md-ref-palette-error50: #dc362e;--md-ref-palette-error60: #e46962;--md-ref-palette-error70: #ec928e;--md-ref-palette-error80: #f2b8b5;--md-ref-palette-error90: #f9dedc;--md-ref-palette-error95: #fceeee;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbf9;--md-ref-palette-green0: #000;--md-ref-palette-green10: #002110;--md-ref-palette-green100: #fff;--md-ref-palette-green20: #00381f;--md-ref-palette-green30: #00522c;--md-ref-palette-green40: #006c35;--md-ref-palette-green50: #128937;--md-ref-palette-green60: #1aa64a;--md-ref-palette-green70: #44c265;--md-ref-palette-green80: #80da88;--md-ref-palette-green90: #beefbb;--md-ref-palette-green95: #ddf8d8;--md-ref-palette-green98: #f2fcef;--md-ref-palette-grey-variant0: #000;--md-ref-palette-grey-variant10: #191d1c;--md-ref-palette-grey-variant100: #fff;--md-ref-palette-grey-variant20: #2d312f;--md-ref-palette-grey-variant30: #444746;--md-ref-palette-grey-variant40: #5c5f5e;--md-ref-palette-grey-variant50: #747775;--md-ref-palette-grey-variant60: #8e918f;--md-ref-palette-grey-variant70: #a9acaa;--md-ref-palette-grey-variant80: #c4c7c5;--md-ref-palette-grey-variant90: #e1e3e1;--md-ref-palette-grey-variant95: #eff2ef;--md-ref-palette-grey-variant98: #f7faf7;--md-ref-palette-grey0: #000;--md-ref-palette-grey10: #1b1b1c;--md-ref-palette-grey100: #fff;--md-ref-palette-grey20: #303030;--md-ref-palette-grey30: #474747;--md-ref-palette-grey40: #5e5e5e;--md-ref-palette-grey50: #777;--md-ref-palette-grey60: #919191;--md-ref-palette-grey70: #ababab;--md-ref-palette-grey80: #c7c7c7;--md-ref-palette-grey90: #e3e3e3;--md-ref-palette-grey95: #f2f2f2;--md-ref-palette-grey98: #f9f9f9;--md-ref-palette-neutral-variant0: #000;--md-ref-palette-neutral-variant10: #1d1a22;--md-ref-palette-neutral-variant100: #fff;--md-ref-palette-neutral-variant20: #322f37;--md-ref-palette-neutral-variant30: #49454f;--md-ref-palette-neutral-variant40: #605d66;--md-ref-palette-neutral-variant50: #79747e;--md-ref-palette-neutral-variant60: #938f99;--md-ref-palette-neutral-variant70: #aea9b4;--md-ref-palette-neutral-variant80: #cac4d0;--md-ref-palette-neutral-variant90: #e7e0ec;--md-ref-palette-neutral-variant95: #f5eefa;--md-ref-palette-neutral-variant98: #fdf7ff;--md-ref-palette-neutral-variant99: #fffbfe;--md-ref-palette-neutral0: #000;--md-ref-palette-neutral10: #1d1b20;--md-ref-palette-neutral100: #fff;--md-ref-palette-neutral12: #211f26;--md-ref-palette-neutral17: #2b2930;--md-ref-palette-neutral20: #322f35;--md-ref-palette-neutral22: #36343b;--md-ref-palette-neutral24: #3b383e;--md-ref-palette-neutral30: #48464c;--md-ref-palette-neutral4: #0f0d13;--md-ref-palette-neutral40: #605d64;--md-ref-palette-neutral50: #79767d;--md-ref-palette-neutral6: #141218;--md-ref-palette-neutral60: #938f96;--md-ref-palette-neutral70: #aea9b1;--md-ref-palette-neutral80: #cac5cd;--md-ref-palette-neutral87: #ded8e1;--md-ref-palette-neutral90: #e6e0e9;--md-ref-palette-neutral92: #ece6f0;--md-ref-palette-neutral94: #f3edf7;--md-ref-palette-neutral95: #f5eff7;--md-ref-palette-neutral96: #f7f2fa;--md-ref-palette-neutral98: #fef7ff;--md-ref-palette-neutral99: #fffbff;--md-ref-palette-orange0: #000;--md-ref-palette-orange10: #321200;--md-ref-palette-orange100: #fff;--md-ref-palette-orange20: #522302;--md-ref-palette-orange30: #753403;--md-ref-palette-orange40: #9a4600;--md-ref-palette-orange50: #c05a01;--md-ref-palette-orange60: #e86e00;--md-ref-palette-orange70: #ff8d41;--md-ref-palette-orange80: #ffb683;--md-ref-palette-orange90: #ffdcc3;--md-ref-palette-orange95: #ffede1;--md-ref-palette-orange98: #fff8f4;--md-ref-palette-pink0: #000;--md-ref-palette-pink10: #3d0023;--md-ref-palette-pink100: #fff;--md-ref-palette-pink20: #620438;--md-ref-palette-pink30: #8d0053;--md-ref-palette-pink40: #b60d6e;--md-ref-palette-pink50: #dc258d;--md-ref-palette-pink60: #f94aab;--md-ref-palette-pink70: #ff7dd2;--md-ref-palette-pink80: #ffaee4;--md-ref-palette-pink90: #ffd8ef;--md-ref-palette-pink95: #ffecf6;--md-ref-palette-pink98: #fff7fc;--md-ref-palette-primary0: #000;--md-ref-palette-primary10: #21005d;--md-ref-palette-primary100: #fff;--md-ref-palette-primary20: #381e72;--md-ref-palette-primary30: #4f378b;--md-ref-palette-primary40: #6750a4;--md-ref-palette-primary50: #7f67be;--md-ref-palette-primary60: #9a82db;--md-ref-palette-primary70: #b69df8;--md-ref-palette-primary80: #d0bcff;--md-ref-palette-primary90: #eaddff;--md-ref-palette-primary95: #f6edff;--md-ref-palette-primary98: #fef7ff;--md-ref-palette-primary99: #fffbfe;--md-ref-palette-purple0: #000;--md-ref-palette-purple10: #280255;--md-ref-palette-purple100: #fff;--md-ref-palette-purple20: #400b84;--md-ref-palette-purple30: #5629a4;--md-ref-palette-purple40: #7438d2;--md-ref-palette-purple50: #9254ea;--md-ref-palette-purple60: #ad72ff;--md-ref-palette-purple70: #c597ff;--md-ref-palette-purple80: #d9bafd;--md-ref-palette-purple90: #eedcfe;--md-ref-palette-purple95: #f7ecfe;--md-ref-palette-purple98: #fdf8ff;--md-ref-palette-red0: #000;--md-ref-palette-red10: #3a0907;--md-ref-palette-red100: #fff;--md-ref-palette-red20: #60150f;--md-ref-palette-red30: #8a1a16;--md-ref-palette-red40: #b3251e;--md-ref-palette-red50: #db372d;--md-ref-palette-red60: #f55e57;--md-ref-palette-red70: #ff8983;--md-ref-palette-red80: #ffb3ae;--md-ref-palette-red90: #ffdadc;--md-ref-palette-red95: #ffecee;--md-ref-palette-red98: #fff8f8;--md-ref-palette-secondary0: #000;--md-ref-palette-secondary10: #1d192b;--md-ref-palette-secondary100: #fff;--md-ref-palette-secondary20: #332d41;--md-ref-palette-secondary30: #4a4458;--md-ref-palette-secondary40: #625b71;--md-ref-palette-secondary50: #7a7289;--md-ref-palette-secondary60: #958da5;--md-ref-palette-secondary70: #b0a7c0;--md-ref-palette-secondary80: #ccc2dc;--md-ref-palette-secondary90: #e8def8;--md-ref-palette-secondary95: #f6edff;--md-ref-palette-secondary98: #fef7ff;--md-ref-palette-secondary99: #fffbfe;--md-ref-palette-tertiary0: #000;--md-ref-palette-tertiary10: #31111d;--md-ref-palette-tertiary100: #fff;--md-ref-palette-tertiary20: #492532;--md-ref-palette-tertiary30: #633b48;--md-ref-palette-tertiary40: #7d5260;--md-ref-palette-tertiary50: #986977;--md-ref-palette-tertiary60: #b58392;--md-ref-palette-tertiary70: #d29dac;--md-ref-palette-tertiary80: #efb8c8;--md-ref-palette-tertiary90: #ffd8e4;--md-ref-palette-tertiary95: #ffecf1;--md-ref-palette-tertiary98: #fff8f8;--md-ref-palette-tertiary99: #fffbfa;--md-ref-palette-white: #fff;--md-ref-palette-yellow0: #000;--md-ref-palette-yellow10: #2f1400;--md-ref-palette-yellow100: #fff;--md-ref-palette-yellow20: #4d2600;--md-ref-palette-yellow30: #6d3a01;--md-ref-palette-yellow40: #8f4e06;--md-ref-palette-yellow50: #b16300;--md-ref-palette-yellow60: #d37b00;--md-ref-palette-yellow70: #ef9800;--md-ref-palette-yellow80: #fcbd00;--md-ref-palette-yellow90: #ffe07c;--md-ref-palette-yellow95: #fff2b4;--md-ref-palette-yellow98: #fffade}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/styles/color/md-color-tokens-full.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/color-tokens';
+// go/keep-sorted end
+
+@layer md.sys.color {
+  :root {
+    color-scheme: light dark;
+    @include color-tokens.emit-custom-properties(
+      $include-palette: true,
+    );
+  }
+}