@material/web 2.4.2-nightly.7619df0.0 → 2.4.2-nightly.81807b2.0

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Directive, ElementPart, PartInfo } from 'lit/directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Ripple classes. */
+export declare const RIPPLE_CLASSES: {
+    ripple: string;
+    rippleTarget: string;
+    rippleHost: string;
+    hover: string;
+    active: string;
+    disabled: string;
+};
+/** The state provided to the `rippleClasses()` function. */
+export interface RippleClassesState {
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the ripple classes to apply to an element based on the given state.
+ *
+ * @param state The state of the ripple.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function rippleClasses({ hover, active, disabled, }?: RippleClassesState): ClassInfo;
+/**
+ * Sets up ripple functionality for the given element.
+ *
+ * @param ripple The element on which to set up ripple functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupRipple(ripple: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+declare class RippleDirective extends Directive {
+    private element?;
+    private cleanup?;
+    constructor(partInfo: PartInfo);
+    render(): void;
+    update({ element }: ElementPart): symbol;
+}
+/**
+ * A Lit directive that adds updates the position of a ripple to match pointer
+ * interactions. Use with the `.ripple` class.
+ *
+ * @example
+ * ```ts
+ * class Component extends LitElement {
+ *   static styles = [rippleStyles, css`...`];
+ *
+ *   render() {
+ *     return html`<button class="ripple" ${ripple()}>Ripple effect</button>`;
+ *   }
+ * }
+ * ```
+ *
+ * Use the `.ripple-target` class if the interactive element is a parent or
+ * child of the ripple element.
+ *
+ * The `ripple()` directive should be applied to the parent element, which may
+ * be the `.ripple-target` instead of the `.ripple`.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="card ripple" ${ripple()}>
+ *     Child interactive element
+ *     <button class="ripple-target card-btn"></button>
+ *   </div>
+ *
+ *   <button class="ripple-target" ${ripple()}>
+ *     Parent interactive element
+ *     <span class="ripple"></span>
+ *   </button>
+ * `;
+ * ```
+ */
+export declare const ripple: () => import("lit-html/directive.js").DirectiveResult<typeof RippleDirective>;
+export {};

package/labs/gb/components/ripple/ripple.js

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { noChange } from 'lit';
+import { Directive, directive, PartType, } from 'lit/directive.js';
+/** Ripple classes. */
+export const RIPPLE_CLASSES = {
+    ripple: 'ripple',
+    rippleTarget: 'ripple-target',
+    rippleHost: 'ripple-host',
+    hover: PSEUDO_CLASSES.hover,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the ripple classes to apply to an element based on the given state.
+ *
+ * @param state The state of the ripple.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function rippleClasses({ hover = false, active = false, disabled = false, } = {}) {
+    return {
+        [RIPPLE_CLASSES.ripple]: true,
+        [RIPPLE_CLASSES.hover]: hover,
+        [RIPPLE_CLASSES.active]: active,
+        [RIPPLE_CLASSES.disabled]: disabled,
+    };
+}
+const MINIMUM_PRESS_MS = 225;
+let ripplePropertiesRegistered = false;
+/**
+ * Sets up ripple functionality for the given element.
+ *
+ * @param ripple The element on which to set up ripple functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupRipple(ripple, opts) {
+    if (!ripplePropertiesRegistered) {
+        const properties = [
+            ['--ripple-scale', '0%'],
+            ['--ripple-hover-opacity', '0%'],
+            ['--ripple-press-opacity', '0%'],
+            ['--ripple-x', '50%'],
+            ['--ripple-y', '50%'],
+        ];
+        try {
+            for (const [property, value] of properties) {
+                CSS.registerProperty({
+                    name: property,
+                    syntax: '<percentage>',
+                    inherits: false,
+                    initialValue: value,
+                });
+            }
+        }
+        finally {
+            ripplePropertiesRegistered = true;
+        }
+    }
+    let minimumPressTimeoutId;
+    ripple.addEventListener('pointerdown', (event) => {
+        if (ripple.matches(':disabled,.disabled'))
+            return;
+        // Set ripple position to the pointer position.
+        const rect = ripple.getBoundingClientRect();
+        const x = (event.clientX - rect.x) / rect.width;
+        const y = (event.clientY - rect.y) / rect.height;
+        ripple.style.setProperty('--ripple-x', `${x * 100}%`);
+        ripple.style.setProperty('--ripple-y', `${y * 100}%`);
+        // If another pointerdown is received while the ripple is active, restart
+        // the active press animation.
+        if (ripple.classList.contains(RIPPLE_CLASSES.active)) {
+            const pressAnimation = ripple
+                .getAnimations()
+                .find((animation) => animation.animationName ===
+                'ripple-press');
+            pressAnimation?.cancel();
+            pressAnimation?.play();
+        }
+        // Emulate the `:active` class for a minimum press duration to show the
+        // ripple effect on short clicks.
+        ripple.classList.add(RIPPLE_CLASSES.active);
+        clearTimeout(minimumPressTimeoutId);
+        minimumPressTimeoutId = setTimeout(() => {
+            ripple.classList.remove(RIPPLE_CLASSES.active);
+        }, MINIMUM_PRESS_MS);
+    }, opts);
+    ripple.addEventListener('keydown', (event) => {
+        // Reset ripple pointer position when a key is pressed.
+        ripple.style.removeProperty('--ripple-x');
+        ripple.style.removeProperty('--ripple-y');
+    }, opts);
+}
+class RippleDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error('The `ripple` directive must be used on an element');
+        }
+    }
+    render() { }
+    update({ element }) {
+        if (this.element !== element) {
+            this.element = element;
+            this.cleanup?.abort();
+            this.cleanup = new AbortController();
+            setupRipple(this.element, { signal: this.cleanup.signal });
+        }
+        return noChange;
+    }
+}
+/**
+ * A Lit directive that adds updates the position of a ripple to match pointer
+ * interactions. Use with the `.ripple` class.
+ *
+ * @example
+ * ```ts
+ * class Component extends LitElement {
+ *   static styles = [rippleStyles, css`...`];
+ *
+ *   render() {
+ *     return html`<button class="ripple" ${ripple()}>Ripple effect</button>`;
+ *   }
+ * }
+ * ```
+ *
+ * Use the `.ripple-target` class if the interactive element is a parent or
+ * child of the ripple element.
+ *
+ * The `ripple()` directive should be applied to the parent element, which may
+ * be the `.ripple-target` instead of the `.ripple`.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="card ripple" ${ripple()}>
+ *     Child interactive element
+ *     <button class="ripple-target card-btn"></button>
+ *   </div>
+ *
+ *   <button class="ripple-target" ${ripple()}>
+ *     Parent interactive element
+ *     <span class="ripple"></span>
+ *   </button>
+ * `;
+ * ```
+ */
+export const ripple = directive(RippleDirective);
+//# sourceMappingURL=ripple.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {noChange} from 'lit';\nimport {\n  Directive,\n  directive,\n  ElementPart,\n  PartInfo,\n  PartType,\n} from 'lit/directive.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Ripple classes. */\nexport const RIPPLE_CLASSES = {\n  ripple: 'ripple',\n  rippleTarget: 'ripple-target',\n  rippleHost: 'ripple-host',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `rippleClasses()` function. */\nexport interface RippleClassesState {\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the ripple classes to apply to an element based on the given state.\n *\n * @param state The state of the ripple.\n * @return An object of class names and truthy values if they apply.\n */\nexport function rippleClasses({\n  hover = false,\n  active = false,\n  disabled = false,\n}: RippleClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: true,\n    [RIPPLE_CLASSES.hover]: hover,\n    [RIPPLE_CLASSES.active]: active,\n    [RIPPLE_CLASSES.disabled]: disabled,\n  };\n}\n\nconst MINIMUM_PRESS_MS = 225;\nlet ripplePropertiesRegistered = false;\n\n/**\n * Sets up ripple functionality for the given element.\n *\n * @param ripple The element on which to set up ripple functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRipple(\n  ripple: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  if (!ripplePropertiesRegistered) {\n    const properties = [\n      ['--ripple-scale', '0%'],\n      ['--ripple-hover-opacity', '0%'],\n      ['--ripple-press-opacity', '0%'],\n      ['--ripple-x', '50%'],\n      ['--ripple-y', '50%'],\n    ];\n\n    try {\n      for (const [property, value] of properties) {\n        CSS.registerProperty({\n          name: property,\n          syntax: '<percentage>',\n          inherits: false,\n          initialValue: value,\n        });\n      }\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (ripple.matches(':disabled,.disabled')) return;\n\n      // Set ripple position to the pointer position.\n      const rect = ripple.getBoundingClientRect();\n      const x = (event.clientX - rect.x) / rect.width;\n      const y = (event.clientY - rect.y) / rect.height;\n      ripple.style.setProperty('--ripple-x', `${x * 100}%`);\n      ripple.style.setProperty('--ripple-y', `${y * 100}%`);\n\n      // If another pointerdown is received while the ripple is active, restart\n      // the active press animation.\n      if (ripple.classList.contains(RIPPLE_CLASSES.active)) {\n        const pressAnimation = ripple\n          .getAnimations()\n          .find(\n            (animation) =>\n              (animation as Partial<CSSAnimation>).animationName ===\n              'ripple-press',\n          );\n        pressAnimation?.cancel();\n        pressAnimation?.play();\n      }\n\n      // Emulate the `:active` class for a minimum press duration to show the\n      // ripple effect on short clicks.\n      ripple.classList.add(RIPPLE_CLASSES.active);\n      clearTimeout(minimumPressTimeoutId);\n      minimumPressTimeoutId = setTimeout(() => {\n        ripple.classList.remove(RIPPLE_CLASSES.active);\n      }, MINIMUM_PRESS_MS);\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'keydown',\n    (event: KeyboardEvent): void => {\n      // Reset ripple pointer position when a key is pressed.\n      ripple.style.removeProperty('--ripple-x');\n      ripple.style.removeProperty('--ripple-y');\n    },\n    opts,\n  );\n}\n\nclass RippleDirective extends Directive {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('The `ripple` directive must be used on an element');\n    }\n  }\n  render() {}\n  override update({element}: ElementPart) {\n    if (this.element !== element) {\n      this.element = element as HTMLElement;\n      this.cleanup?.abort();\n      this.cleanup = new AbortController();\n      setupRipple(this.element, {signal: this.cleanup.signal});\n    }\n    return noChange;\n  }\n}\n\n/**\n * A Lit directive that adds updates the position of a ripple to match pointer\n * interactions. Use with the `.ripple` class.\n *\n * @example\n * ```ts\n * class Component extends LitElement {\n *   static styles = [rippleStyles, css`...`];\n *\n *   render() {\n *     return html`<button class=\"ripple\" ${ripple()}>Ripple effect</button>`;\n *   }\n * }\n * ```\n *\n * Use the `.ripple-target` class if the interactive element is a parent or\n * child of the ripple element.\n *\n * The `ripple()` directive should be applied to the parent element, which may\n * be the `.ripple-target` instead of the `.ripple`.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"card ripple\" ${ripple()}>\n *     Child interactive element\n *     <button class=\"ripple-target card-btn\"></button>\n *   </div>\n *\n *   <button class=\"ripple-target\" ${ripple()}>\n *     Parent interactive element\n *     <span class=\"ripple\"></span>\n *   </button>\n * `;\n * ```\n */\nexport const ripple = directive(RippleDirective);\n"]}

package/labs/gb/components/ripple/ripple.scss

@@ -0,0 +1,103 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys;
+@layer md.comp.ripple {
+  @property --ripple-scale {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-hover-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-press-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-x {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+  @property --ripple-y {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+
+  .ripple {
+    --ripple-color: currentColor;
+    --ripple-press-transition: --ripple-press-opacity 375ms linear;
+    --ripple-transition: --ripple-hover-opacity 15ms linear,
+      var(--ripple-press-transition);
+    --ripple-animation: ripple-release 375ms linear;
+    --ripple: radial-gradient(
+        hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity))
+      ),
+      radial-gradient(
+        circle at var(--ripple-x) var(--ripple-y),
+        hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity))
+          var(--ripple-scale),
+        transparent calc(var(--ripple-scale) * 1.35)
+      );
+
+    background-image: var(--ripple);
+    transition: var(--ripple-transition);
+    animation: var(--ripple-animation), var(--focus-ring-animation, none);
+
+    // Ripples support the following DOM use cases:
+    // 1. `.ripple` and interactive element are the same.
+    // 2. `.ripple` is a parent of a child interactive `.ripple-target`.
+    // 3. `.ripple` is a child of a parent interactive `.ripple-target`.
+    // 4. `.ripple.ripple-host` is a within an interactive shadow DOM host.
+    //
+    // Pseudo class emulation is only needed for the `.ripple` element, not for
+    // the target or host elements.
+
+    &:is(:hover, .hover),
+    &:has(.ripple-target:hover),
+    .ripple-target:hover &,
+    :host(:hover) &.ripple-host {
+      --ripple-hover-opacity: 8%;
+    }
+
+    &:is(:active, .active),
+    &:has(.ripple-target:active),
+    .ripple-target:active &,
+    :host(:active) &.ripple-host {
+      --ripple-press-opacity: 10%;
+      --ripple-press-transition: --ripple-press-opacity 100ms linear;
+      --ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    &:is(:disabled, .disabled) {
+      --ripple: none;
+    }
+  }
+
+  @keyframes ripple-press {
+    from {
+      --ripple-scale: 20%;
+    }
+    to {
+      --ripple-scale: 100%;
+      --ripple-x: 50%;
+      --ripple-y: 50%;
+    }
+  }
+
+  @keyframes ripple-release {
+    from {
+      --ripple-scale: 100%;
+    }
+    to {
+      --ripple-scale: 100%;
+    }
+  }
+}

package/labs/gb/components/shared/pseudo-classes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Cross-component classes for emulating pseudo-classes.
+ *
+ * All components that style with psuedo-classes for their DOM structure also
+ * support emulating these states.
+ *
+ * @example
+ * ```html
+ * <button class="ripple active">Pressed ripple</button>
+ * ```
+ */
+export declare const PSEUDO_CLASSES: {
+    active: string;
+    checked: string;
+    disabled: string;
+    focus: string;
+    focusVisible: string;
+    hover: string;
+    indeterminate: string;
+    invalid: string;
+};

package/labs/gb/components/shared/pseudo-classes.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Cross-component classes for emulating pseudo-classes.
+ *
+ * All components that style with psuedo-classes for their DOM structure also
+ * support emulating these states.
+ *
+ * @example
+ * ```html
+ * <button class="ripple active">Pressed ripple</button>
+ * ```
+ */
+export const PSEUDO_CLASSES = {
+    active: 'active',
+    checked: 'checked',
+    disabled: 'disabled',
+    focus: 'focus',
+    focusVisible: 'focus-visible',
+    hover: 'hover',
+    indeterminate: 'indeterminate',
+    invalid: 'invalid',
+};
+//# sourceMappingURL=pseudo-classes.js.map

package/labs/gb/components/shared/pseudo-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-classes.js","sourceRoot":"","sources":["pseudo-classes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Cross-component classes for emulating pseudo-classes.\n *\n * All components that style with psuedo-classes for their DOM structure also\n * support emulating these states.\n *\n * @example\n * ```html\n * <button class=\"ripple active\">Pressed ripple</button>\n * ```\n */\nexport const PSEUDO_CLASSES = {\n  active: 'active',\n  checked: 'checked',\n  disabled: 'disabled',\n  focus: 'focus',\n  focusVisible: 'focus-visible',\n  hover: 'hover',\n  indeterminate: 'indeterminate',\n  invalid: 'invalid',\n};\n"]}

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((cssResultOrNative) => isCSSResult(cssResultOrNative)
+        ? cssResultOrNative.styleSheet
+        : cssResultOrNative);
+    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) {
+        node.adoptedStyleSheets = Array.from(new Set([...node.adoptedStyleSheets, ...stylesheets]));
+        return true;
+    }
+    return false;
+}
+function isCSSResult(style) {
+    return 'styleSheet' in style;
+}
+//# 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,iBAAiB,EAAE,EAAE,CACpE,WAAW,CAAC,iBAAiB,CAAC;QAC5B,CAAC,CAAC,iBAAiB,CAAC,UAAW;QAC/B,CAAC,CAAC,iBAAiB,CACtB,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,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAClC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,WAAW,CAAC,CAAC,CACtD,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,WAAW,CAAC,KAAwB;IAC3C,OAAO,YAAY,IAAI,KAAK,CAAC;AAC/B,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type CSSResult, 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((cssResultOrNative) =>\n    isCSSResult(cssResultOrNative)\n      ? cssResultOrNative.styleSheet!\n      : cssResultOrNative,\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    node.adoptedStyleSheets = Array.from(\n      new Set([...node.adoptedStyleSheets, ...stylesheets]),\n    );\n    return true;\n  }\n  return false;\n}\n\nfunction isCSSResult(style: CSSResultOrNative): style is CSSResult {\n  return 'styleSheet' in style;\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;