@material/web 2.4.2-nightly.2fe7e22.0 → 2.4.2-nightly.5088d91.0

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

@@ -1 +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"]}
+{"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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createElementDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.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    } catch {\n      // Ignore errors if the properties are already registered.\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  const activateRipple = () => {\n    // If the ripple is already active, restart the current 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\n  // Return true if the ripple is disabled, or if the ripple class has been\n  // removed. This allows components to disable and re-enable ripple behavior.\n  const isRippleDisabled = () =>\n    isDisabled(ripple) || !ripple.matches(`.${RIPPLE_CLASSES.ripple}`);\n\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (isRippleDisabled()) return;\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      activateRipple();\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  ripple.addEventListener(\n    'click',\n    (event) => {\n      // A UIEvent.detail click count of 0 indicates the click was not triggered\n      // by a pointer. Show the ripple press effect for these clicks as well.\n      if (event.detail === 0 && !isRippleDisabled()) {\n        activateRipple();\n      }\n    },\n    opts,\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 = createElementDirective(setupRipple);\n"]}

package/labs/gb/components/shared/directives.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DirectiveResult } from 'lit/async-directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/**
+ * A function that sets up logic for a directive's element.
+ *
+ * @param element The element attached to the directive.
+ * @param opts Options for setting up the element, including an AbortSignal for
+ *     cleanup.
+ */
+export type SetupElementFunction = (element: HTMLElement, opts: {
+    signal: AbortSignal;
+}) => void;
+/**
+ * All class map directives include AdditionalClasses to allow adding dynamic
+ * classes to the element using `classMap()`.
+ */
+export interface AdditionalClasses {
+    /**
+     * Additional classes to apply to the element.
+     */
+    classes?: ClassInfo;
+}
+/**
+ * Options for creating a class map directive.
+ *
+ * @param getClasses A function that returns the class names and truthy values
+ *     if they apply.
+ * @param setupElement An optional function to set up logic for the directive's
+ *     element.
+ */
+export interface ClassMapDirectiveOptions<State> {
+    getClasses: (state?: State) => ClassInfo;
+    setupElement?: SetupElementFunction;
+}
+/**
+ * Creates a Lit directive that behaves like `classMap()`, but also provides
+ * element setup and cleanup logic.
+ *
+ * These directives bind to `class="${componentDirectiveName()}"`.
+ *
+ * @example
+ * ```ts
+ * const toggleButton = createClassMapDirective({
+ *   getClasses: (state: ToggleButtonState) => ({
+ *     'toggle-button': true,
+ *     'toggle-button-selected': state.selected,
+ *   }),
+ *   setupElement: (element, opts) => {
+ *     element.addEventListener('click', () => {
+ *       state.selected = !state.selected;
+ *     }, opts);
+ *   },
+ * });
+ *
+ * html`
+ *   <button class="${toggleButton()}">Unselected</button>
+ *   <button class="${toggleButton({selected: true})}">Selected</button>
+ *   <button class="${toggleButton({classes: {'visible': isVisible}})}">
+ *     With additional classes
+ *   </button>
+ * `;
+ * ```
+ *
+ * @param options Options for creating the class map directive.
+ * @return A Lit `directive()` that binds to the class attribute.
+ */
+export declare function createClassMapDirective<State = {}>(options: ClassMapDirectiveOptions<State>): (state?: State & AdditionalClasses) => DirectiveResult;
+/**
+ * Creates a Lit directive that can be used to add setup and cleanup logic to
+ * an element.
+ *
+ * These directives bind as element parts.
+ *
+ * @example
+ * ```ts
+ * const logClick = createElementDirective((element, opts) => {
+ *   element.addEventListener('click', (event) => {
+ *     console.log('click', event);
+ *   }, opts);
+ * });
+ *
+ * html`<button ${logClick()}>Click me</button>`;
+ * ```
+ *
+ * @param setupElement The function to set up logic for the directive's element.
+ * @return A Lit `directive()` that binds as an element part.
+ */
+export declare function createElementDirective(setupElement: SetupElementFunction): () => DirectiveResult;

package/labs/gb/components/shared/directives.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { noChange } from 'lit';
+import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Creates a Lit directive that behaves like `classMap()`, but also provides
+ * element setup and cleanup logic.
+ *
+ * These directives bind to `class="${componentDirectiveName()}"`.
+ *
+ * @example
+ * ```ts
+ * const toggleButton = createClassMapDirective({
+ *   getClasses: (state: ToggleButtonState) => ({
+ *     'toggle-button': true,
+ *     'toggle-button-selected': state.selected,
+ *   }),
+ *   setupElement: (element, opts) => {
+ *     element.addEventListener('click', () => {
+ *       state.selected = !state.selected;
+ *     }, opts);
+ *   },
+ * });
+ *
+ * html`
+ *   <button class="${toggleButton()}">Unselected</button>
+ *   <button class="${toggleButton({selected: true})}">Selected</button>
+ *   <button class="${toggleButton({classes: {'visible': isVisible}})}">
+ *     With additional classes
+ *   </button>
+ * `;
+ * ```
+ *
+ * @param options Options for creating the class map directive.
+ * @return A Lit `directive()` that binds to the class attribute.
+ */
+export function createClassMapDirective(options) {
+    return directive(class ComponentClassMapDirective extends SetupElementDirective {
+        constructor() {
+            super(...arguments);
+            this.setupElement = options.setupElement;
+        }
+        render(params) {
+            return classMap({
+                ...(params?.classes || {}),
+                ...options.getClasses(params),
+            });
+        }
+    });
+}
+/**
+ * Creates a Lit directive that can be used to add setup and cleanup logic to
+ * an element.
+ *
+ * These directives bind as element parts.
+ *
+ * @example
+ * ```ts
+ * const logClick = createElementDirective((element, opts) => {
+ *   element.addEventListener('click', (event) => {
+ *     console.log('click', event);
+ *   }, opts);
+ * });
+ *
+ * html`<button ${logClick()}>Click me</button>`;
+ * ```
+ *
+ * @param setupElement The function to set up logic for the directive's element.
+ * @return A Lit `directive()` that binds as an element part.
+ */
+export function createElementDirective(setupElement) {
+    return directive(class ElementDirective extends SetupElementDirective {
+        constructor() {
+            super(...arguments);
+            this.setupElement = setupElement;
+        }
+        render() {
+            return noChange;
+        }
+    });
+}
+/**
+ * A base class for Lit element and attribute directives that provides a setup
+ * method for initializing logic when a directive's element is connected.
+ */
+class SetupElementDirective extends AsyncDirective {
+    update({ element }, params) {
+        if (element !== this.element) {
+            this.element = element;
+            this.disconnected();
+            if (this.isConnected) {
+                this.reconnected();
+            }
+        }
+        return this.render(...params);
+    }
+    disconnected() {
+        this.cleanup?.abort();
+    }
+    reconnected() {
+        if (this.element && this.setupElement) {
+            this.cleanup = new AbortController();
+            this.setupElement(this.element, { signal: this.cleanup.signal });
+        }
+    }
+}
+//# sourceMappingURL=directives.js.map

package/labs/gb/components/shared/directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directives.js","sourceRoot":"","sources":["directives.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,KAAK,CAAC;AAC7B,OAAO,EACL,cAAc,EAEd,SAAS,GAGV,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAsCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAwC;IAExC,OAAO,SAAS,CACd,MAAM,0BAA2B,SAAQ,qBAAqB;QAA9D;;YAQqB,iBAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzD,CAAC;QARC,MAAM,CAAC,MAAkC;YACvC,OAAO,QAAQ,CAAC;gBACd,GAAG,CAAC,MAAM,EAAE,OAAO,IAAI,EAAE,CAAC;gBAC1B,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC;aAC9B,CAAC,CAAC;QACL,CAAC;KAGF,CACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,sBAAsB,CACpC,YAAkC;IAElC,OAAO,SAAS,CACd,MAAM,gBAAiB,SAAQ,qBAAqB;QAApD;;YAKqB,iBAAY,GAAG,YAAY,CAAC;QACjD,CAAC;QALC,MAAM;YACJ,OAAO,QAAQ,CAAC;QAClB,CAAC;KAGF,CACF,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAe,qBAAsB,SAAQ,cAAc;IAmBhD,MAAM,CAAC,EAAC,OAAO,EAA8B,EAAE,MAAiB;QACvE,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,OAAsB,CAAC;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;IAChC,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACxB,CAAC;IAEkB,WAAW;QAC5B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAC,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {noChange} from 'lit';\nimport {\n  AsyncDirective,\n  AttributePart,\n  directive,\n  DirectiveResult,\n  ElementPart,\n} from 'lit/async-directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/**\n * A function that sets up logic for a directive's element.\n *\n * @param element The element attached to the directive.\n * @param opts Options for setting up the element, including an AbortSignal for\n *     cleanup.\n */\nexport type SetupElementFunction = (\n  element: HTMLElement,\n  opts: {signal: AbortSignal},\n) => void;\n\n/**\n * All class map directives include AdditionalClasses to allow adding dynamic\n * classes to the element using `classMap()`.\n */\nexport interface AdditionalClasses {\n  /**\n   * Additional classes to apply to the element.\n   */\n  classes?: ClassInfo;\n}\n\n/**\n * Options for creating a class map directive.\n *\n * @param getClasses A function that returns the class names and truthy values\n *     if they apply.\n * @param setupElement An optional function to set up logic for the directive's\n *     element.\n */\nexport interface ClassMapDirectiveOptions<State> {\n  getClasses: (state?: State) => ClassInfo;\n  setupElement?: SetupElementFunction;\n}\n\n/**\n * Creates a Lit directive that behaves like `classMap()`, but also provides\n * element setup and cleanup logic.\n *\n * These directives bind to `class=\"${componentDirectiveName()}\"`.\n *\n * @example\n * ```ts\n * const toggleButton = createClassMapDirective({\n *   getClasses: (state: ToggleButtonState) => ({\n *     'toggle-button': true,\n *     'toggle-button-selected': state.selected,\n *   }),\n *   setupElement: (element, opts) => {\n *     element.addEventListener('click', () => {\n *       state.selected = !state.selected;\n *     }, opts);\n *   },\n * });\n *\n * html`\n *   <button class=\"${toggleButton()}\">Unselected</button>\n *   <button class=\"${toggleButton({selected: true})}\">Selected</button>\n *   <button class=\"${toggleButton({classes: {'visible': isVisible}})}\">\n *     With additional classes\n *   </button>\n * `;\n * ```\n *\n * @param options Options for creating the class map directive.\n * @return A Lit `directive()` that binds to the class attribute.\n */\nexport function createClassMapDirective<State = {}>(\n  options: ClassMapDirectiveOptions<State>,\n): (state?: State & AdditionalClasses) => DirectiveResult {\n  return directive(\n    class ComponentClassMapDirective extends SetupElementDirective {\n      render(params?: State & AdditionalClasses) {\n        return classMap({\n          ...(params?.classes || {}),\n          ...options.getClasses(params),\n        });\n      }\n\n      protected override setupElement = options.setupElement;\n    },\n  );\n}\n\n/**\n * Creates a Lit directive that can be used to add setup and cleanup logic to\n * an element.\n *\n * These directives bind as element parts.\n *\n * @example\n * ```ts\n * const logClick = createElementDirective((element, opts) => {\n *   element.addEventListener('click', (event) => {\n *     console.log('click', event);\n *   }, opts);\n * });\n *\n * html`<button ${logClick()}>Click me</button>`;\n * ```\n *\n * @param setupElement The function to set up logic for the directive's element.\n * @return A Lit `directive()` that binds as an element part.\n */\nexport function createElementDirective(\n  setupElement: SetupElementFunction,\n): () => DirectiveResult {\n  return directive(\n    class ElementDirective extends SetupElementDirective {\n      render() {\n        return noChange;\n      }\n\n      protected override setupElement = setupElement;\n    },\n  );\n}\n\n/**\n * A base class for Lit element and attribute directives that provides a setup\n * method for initializing logic when a directive's element is connected.\n */\nabstract class SetupElementDirective extends AsyncDirective {\n  /**\n   * Called when the directive's element changes. Use this method to add\n   * event listeners or perform other setup logic.\n   *\n   * The `signal` option is used to clean up setup logic when the element is\n   * disconnected.\n   *\n   * @param element The element attached to the directive.\n   * @param signal An AbortSignal to clean up event listeners and other logic.\n   */\n  protected setupElement?: (\n    element: HTMLElement,\n    opts: {signal: AbortSignal},\n  ) => void;\n\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  override update({element}: ElementPart | AttributePart, params: unknown[]) {\n    if (element !== this.element) {\n      this.element = element as HTMLElement;\n      this.disconnected();\n      if (this.isConnected) {\n        this.reconnected();\n      }\n    }\n\n    return this.render(...params);\n  }\n\n  protected override disconnected() {\n    this.cleanup?.abort();\n  }\n\n  protected override reconnected() {\n    if (this.element && this.setupElement) {\n      this.cleanup = new AbortController();\n      this.setupElement(this.element, {signal: this.cleanup.signal});\n    }\n  }\n}\n"]}

package/labs/gb/components/shared/has-slotted.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class
+ * to `<slot>` elements when they have assigned nodes.
+ */
+export declare const hasSlotted: () => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/shared/has-slotted.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createElementDirective } from './directives.js';
+/**
+ * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class
+ * to `<slot>` elements when they have assigned nodes.
+ */
+export const hasSlotted = createElementDirective((element, opts) => {
+    if (!element.matches('slot')) {
+        throw new Error('hasSlotted() must be used on a <slot> element.');
+    }
+    element.addEventListener('slotchange', (event) => {
+        element.classList.toggle('has-slotted', element.assignedNodes().length > 0);
+    }, opts);
+});
+//# sourceMappingURL=has-slotted.js.map

package/labs/gb/components/shared/has-slotted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-slotted.js","sourceRoot":"","sources":["has-slotted.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,sBAAsB,EAAC,MAAM,iBAAiB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,sBAAsB,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;IACjE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CAAC,gBAAgB,CACtB,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE;QACR,OAAO,CAAC,SAAS,CAAC,MAAM,CACtB,aAAa,EACZ,OAA2B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CACxD,CAAC;IACJ,CAAC,EACD,IAAI,CACL,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createElementDirective} from './directives.js';\n\n/**\n * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class\n * to `<slot>` elements when they have assigned nodes.\n */\nexport const hasSlotted = createElementDirective((element, opts) => {\n  if (!element.matches('slot')) {\n    throw new Error('hasSlotted() must be used on a <slot> element.');\n  }\n\n  element.addEventListener(\n    'slotchange',\n    (event) => {\n      element.classList.toggle(\n        'has-slotted',\n        (element as HTMLSlotElement).assignedNodes().length > 0,\n      );\n    },\n    opts,\n  );\n});\n"]}

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

@@ -24,3 +24,10 @@ export declare const PSEUDO_CLASSES: {
     indeterminate: string;
     invalid: string;
 };
+/**
+ * Returns whether the element is disabled.
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export declare function isDisabled(element: Element): boolean;

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

@@ -24,4 +24,13 @@ export const PSEUDO_CLASSES = {
     indeterminate: 'indeterminate',
     invalid: 'invalid',
 };
+/**
+ * Returns whether the element is disabled.
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export function isDisabled(element) {
+    return element.matches('.disabled,:disabled,[disabled],[aria-disabled=true]');
+}
 //# sourceMappingURL=pseudo-classes.js.map

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

@@ -1 +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"]}
+{"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;AAEF;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,OAAO,OAAO,CAAC,OAAO,CAAC,qDAAqD,CAAC,CAAC;AAChF,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\n/**\n * Returns whether the element is disabled.\n *\n * @param element The element to check.\n * @return true if the element is disabled.\n */\nexport function isDisabled(element: Element): boolean {\n  return element.matches('.disabled,:disabled,[disabled],[aria-disabled=true]');\n}\n"]}

package/labs/gb/components/splitbutton/_split-button-tokens.scss

@@ -0,0 +1,135 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --between-space: 2px;
+}
+
+@mixin button {
+  --icon-size: 0;
+  --inner-corner-size: 0;
+  --outer-corner-size: calc(var(--container-height) / 2);
+  --leading-space: 0;
+  --trailing-space: 0;
+}
+
+@mixin button-xs {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-xs-leading {
+  --leading-space: 12px;
+  --trailing-space: 10px;
+}
+
+@mixin button-xs-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-xs-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-xs-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-sm {
+  --icon-size: 22px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-sm-leading {
+  --leading-space: 16px;
+  --trailing-space: 12px;
+}
+
+@mixin button-sm-trailing {
+  --leading-space: 13px;
+  --trailing-space: 13px;
+}
+
+@mixin button-sm-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-sm-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md {
+  --icon-size: 26px;
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin button-md-leading {
+  --leading-space: 24px;
+  --trailing-space: 24px;
+}
+
+@mixin button-md-trailing {
+  --leading-space: 15px;
+  --trailing-space: 15px;
+}
+
+@mixin button-md-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-md-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-lg {
+  --icon-size: 38px;
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin button-lg-leading {
+  --leading-space: 48px;
+  --trailing-space: 48px;
+}
+
+@mixin button-lg-trailing {
+  --leading-space: 29px;
+  --trailing-space: 29px;
+}
+
+@mixin button-lg-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-lg-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl {
+  --icon-size: 50px;
+  --inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin button-xl-leading {
+  --leading-space: 64px;
+  --trailing-space: 64px;
+}
+
+@mixin button-xl-trailing {
+  --leading-space: 43px;
+  --trailing-space: 43px;
+}
+
+@mixin button-xl-hovered {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-xl-pressed {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+}
+
+@mixin button-trailing-selected {
+  --inner-corner-size: calc(var(--container-height) / 2);
+}

package/labs/gb/components/splitbutton/md-split-button.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type SplitButtonColor, type SplitButtonSize } from './split-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design split button component. */
+        'md-split-button': SplitButton;
+    }
+}
+/**
+ * A Material Design split button component.
+ */
+export declare class SplitButton extends LitElement {
+    static styles: CSSResultOrNative[];
+    color: SplitButtonColor;
+    size: SplitButtonSize;
+    selected: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateSlotFocusVisible;
+    private cleanupToggleListener?;
+    private handleTrailingSlotchange;
+}

package/labs/gb/components/splitbutton/md-split-button.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { button } from '../button/button.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import buttonStyles from '../button/button.css' with { type: 'css' }; // github-only
+// import buttonStyles from '../button/button.cssresult.js'; // google3-only
+import splitButtonStyles from './split-button.css' with { type: 'css' }; // github-only
+// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only
+import { splitButton, } from './split-button.js';
+/**
+ * A Material Design split button component.
+ */
+let SplitButton = class SplitButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'filled';
+        this.size = 'sm';
+        this.selected = false;
+    }
+    render() {
+        const buttonConfig = {
+            color: this.color,
+            size: this.size,
+        };
+        return html `<div part="split-btn" class="${splitButton(this)}">
+      <slot
+        name="leading"
+        part="leading-btn"
+        class="${button(buttonConfig)}"
+        @focusin=${this.updateSlotFocusVisible}
+        @focusout=${this.updateSlotFocusVisible}>
+      </slot>
+      <slot
+        name="trailing"
+        part="trailing-btn"
+        class="${button(buttonConfig)}"
+        @focusin=${this.updateSlotFocusVisible}
+        @focusout=${this.updateSlotFocusVisible}
+        @slotchange=${this.handleTrailingSlotchange}>
+      </slot>
+      <slot></slot>
+    </div>`;
+    }
+    updateSlotFocusVisible(event) {
+        const slot = event.currentTarget;
+        const hasFocusVisible = slot
+            .assignedElements()
+            .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));
+        slot.classList.toggle('focus-visible', hasFocusVisible);
+    }
+    handleTrailingSlotchange(event) {
+        this.cleanupToggleListener?.abort();
+        this.cleanupToggleListener = new AbortController();
+        const slot = event.target;
+        const trailingButton = slot
+            .assignedElements()
+            .find((el) => el.matches('button'));
+        if (!trailingButton?.popoverTargetElement)
+            return;
+        trailingButton.popoverTargetElement.addEventListener('toggle', (event) => {
+            this.selected = event.newState === 'open';
+        }, { signal: this.cleanupToggleListener.signal });
+    }
+};
+SplitButton.styles = [
+    focusRingStyles,
+    rippleStyles,
+    buttonStyles,
+    splitButtonStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .split-btn {
+        flex: 1;
+      }
+      [name='leading'] {
+        display: contents;
+        &::slotted(button) {
+          all: inherit;
+          display: flex;
+        }
+      }
+      [name='trailing'] {
+        position: relative;
+        &::slotted(button) {
+          position: absolute;
+          inset: 0;
+          appearance: none;
+          background: none;
+          border: none;
+          outline: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property()
+], SplitButton.prototype, "color", void 0);
+__decorate([
+    property()
+], SplitButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SplitButton.prototype, "selected", void 0);
+SplitButton = __decorate([
+    customElement('md-split-button')
+], SplitButton);
+export { SplitButton };
+//# sourceMappingURL=md-split-button.js.map

package/labs/gb/components/splitbutton/md-split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-split-button.js","sourceRoot":"","sources":["md-split-button.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 {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {button} from '../button/button.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport buttonStyles from '../button/button.css' with {type: 'css'}; // github-only\n// import buttonStyles from '../button/button.cssresult.js'; // google3-only\nimport splitButtonStyles from './split-button.css' with {type: 'css'}; // github-only\n// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only\n\nimport {\n  splitButton,\n  type SplitButtonColor,\n  type SplitButtonSize,\n} from './split-button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design split button component. */\n    'md-split-button': SplitButton;\n  }\n}\n\n/**\n * A Material Design split button component.\n */\n@customElement('md-split-button')\nexport class SplitButton extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    splitButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .split-btn {\n        flex: 1;\n      }\n      [name='leading'] {\n        display: contents;\n        &::slotted(button) {\n          all: inherit;\n          display: flex;\n        }\n      }\n      [name='trailing'] {\n        position: relative;\n        &::slotted(button) {\n          position: absolute;\n          inset: 0;\n          appearance: none;\n          background: none;\n          border: none;\n          outline: none;\n        }\n      }\n    `,\n  ];\n\n  @property() color: SplitButtonColor = 'filled';\n  @property() size: SplitButtonSize = 'sm';\n  @property({type: Boolean}) selected = false;\n\n  protected override render() {\n    const buttonConfig = {\n      color: this.color,\n      size: this.size,\n    };\n\n    return html`<div part=\"split-btn\" class=\"${splitButton(this)}\">\n      <slot\n        name=\"leading\"\n        part=\"leading-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}>\n      </slot>\n      <slot\n        name=\"trailing\"\n        part=\"trailing-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}\n        @slotchange=${this.handleTrailingSlotchange}>\n      </slot>\n      <slot></slot>\n    </div>`;\n  }\n\n  private updateSlotFocusVisible(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const hasFocusVisible = slot\n      .assignedElements()\n      .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));\n    slot.classList.toggle('focus-visible', hasFocusVisible);\n  }\n\n  private cleanupToggleListener?: AbortController;\n  private handleTrailingSlotchange(event: Event) {\n    this.cleanupToggleListener?.abort();\n    this.cleanupToggleListener = new AbortController();\n    const slot = event.target as HTMLSlotElement;\n    const trailingButton = slot\n      .assignedElements()\n      .find((el): el is HTMLButtonElement => el.matches('button'));\n    if (!trailingButton?.popoverTargetElement) return;\n    trailingButton.popoverTargetElement.addEventListener(\n      'toggle',\n      (event: Event) => {\n        this.selected = (event as ToggleEvent).newState === 'open';\n      },\n      {signal: this.cleanupToggleListener.signal},\n    );\n  }\n}\n"]}

package/labs/gb/components/splitbutton/split-button.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.split-button{.split-btn{--between-space: 2px}.split-btn .btn{--icon-size: 0;--inner-corner-size: 0;--outer-corner-size: calc(var(--container-height) / 2);--leading-space: 0;--trailing-space: 0}.split-btn .btn-xs{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-xs:where(:nth-child(1 of .btn)){--leading-space: 12px;--trailing-space: 10px}.split-btn .btn-xs:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-xs:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-xs:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-sm{--icon-size: 22px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-sm:where(:nth-child(1 of .btn)){--leading-space: 16px;--trailing-space: 12px}.split-btn .btn-sm:where(:nth-last-child(1 of .btn)){--leading-space: 13px;--trailing-space: 13px}.split-btn .btn-sm:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-sm:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md{--icon-size: 26px;--inner-corner-size: var(--md-sys-shape-corner-xs)}.split-btn .btn-md:where(:nth-child(1 of .btn)){--leading-space: 24px;--trailing-space: 24px}.split-btn .btn-md:where(:nth-last-child(1 of .btn)){--leading-space: 15px;--trailing-space: 15px}.split-btn .btn-md:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-md:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-lg{--icon-size: 38px;--inner-corner-size: var(--md-sys-shape-corner-sm)}.split-btn .btn-lg:where(:nth-child(1 of .btn)){--leading-space: 48px;--trailing-space: 48px}.split-btn .btn-lg:where(:nth-last-child(1 of .btn)){--leading-space: 29px;--trailing-space: 29px}.split-btn .btn-lg:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-lg:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl{--icon-size: 50px;--inner-corner-size: var(--md-sys-shape-corner-md)}.split-btn .btn-xl:where(:nth-child(1 of .btn)){--leading-space: 64px;--trailing-space: 64px}.split-btn .btn-xl:where(:nth-last-child(1 of .btn)){--leading-space: 43px;--trailing-space: 43px}.split-btn .btn-xl:where(:hover,.hover){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn .btn-xl:where(:active,.active){--inner-corner-size: var(--md-sys-shape-corner-lg-increased)}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn){--inner-corner-size: calc(var(--container-height) / 2)}.split-btn{display:inline-flex;align-items:center;gap:var(--between-space)}.split-btn :nth-child(1 of .btn){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.split-btn :nth-last-child(1 of .btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.split-btn :nth-last-child(1 of .btn)::before{content:"arrow_drop_down";font:var(--md-icon-size) var(--md-icon-font);display:flex;align-items:center;aspect-ratio:1;width:var(--md-icon-size);overflow:hidden}.split-btn:is(.split-btn-selected,:has(:popover-open)) :nth-last-child(1 of .btn)::before{transform:rotate(180deg);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}}/*# sourceMappingURL=split-button.css.map */