npm - @material/web - Versions diffs - 2.4.2-nightly.418291b.0 → 2.4.2-nightly.4413a6e.0 - Mend

@material/web 2.4.2-nightly.418291b.0 → 2.4.2-nightly.4413a6e.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/labs/gb/components/menu/md-menu.js CHANGED Viewed

@@ -16,6 +16,16 @@ import { menu, MENU_COLORS, menuContext } from './menu.js';
 const baseClass = mixinElementInternals(mixinFocusable(LitElement));
 /**
  * A Material Design menu component.
+ *
+ * @slot - Used to display the menu's items.
+ * @csspart menu - The menu's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-shape
+ * @cssprop --gap
+ * @cssprop --group-padding
+ * @cssprop --group-shape
+ * @cssprop --section-label-text-color
  */
 let Menu = class Menu extends baseClass {
     get items() {
@@ -135,7 +145,7 @@ __decorate([
     property()
 ], Menu.prototype, "color", void 0);
 Menu = __decorate([
-    customElement('md-menu')
+    customElement('md-gb-menu')
 ], Menu);
 export { Menu };
 //# sourceMappingURL=md-menu.js.map

package/labs/gb/components/menu/md-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"md-menu.js","sourceRoot":"","sources":["md-menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAE/D,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAiB,MAAM,WAAW,CAAC;AASzE,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;AAEpE~~;;GAEG~~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~~SAAS~~,CAAC;~~GACZ~~,IAAI,CAkIhB","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {ContextProvider} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\n\nimport menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {menu, MENU_COLORS, menuContext, type MenuColor} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design menu component. /\n 'md-menu': Menu;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/\n A Material Design menu component.\n */\n@customElement('md-menu')\nexport class Menu extends baseClass {\n static override styles: CSSResultOrNative[] = [menuStyles, css``];\n\n @property() color: MenuColor = MENU_COLORS.standard;\n\n get items(): HTMLElement[] {\n return Array.from(this.itemsSet).sort((a, b) => {\n return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING\n ? 1\n : -1;\n });\n }\n\n private previouslyFocused?: HTMLElement;\n private readonly itemsSet = new Set<HTMLElement>();\n\n constructor() {\n super();\n this[internals].role = 'menu';\n this.addController(\n new ContextProvider(this, {\n context: menuContext,\n initialValue: {\n menu: this,\n getItems: () => this.items,\n itemConnected: (item: HTMLElement) => {\n this.itemsSet.add(item);\n },\n itemDisconnected: (item: HTMLElement) => {\n this.itemsSet.delete(item);\n },\n },\n }),\n );\n\n // TODO: move event listeners to setupMenu()\n // Handle keyboard navigation\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n event.preventDefault();\n this.hidePopover();\n return;\n }\n\n const items = this.items.filter(\n (item) => !item.matches(':disabled,[disabled]'),\n );\n const index = items.findIndex((item) => item.matches(':focus-within'));\n if (index === -1 && items.length > 0) {\n // If no item is focused, focus the first one on arrow key\n if (\n [\n 'ArrowDown',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowLeft',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n event.preventDefault();\n items[0].focus();\n }\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n if (index < items.length - 1) {\n items[index + 1].focus();\n } else {\n items[0].focus();\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n if (index > 0) {\n items[index - 1].focus();\n } else {\n items[items.length - 1].focus();\n }\n break;\n case 'Home':\n event.preventDefault();\n items[0].focus();\n break;\n case 'End':\n event.preventDefault();\n items[items.length - 1].focus();\n break;\n default:\n break;\n }\n });\n\n // Handle focus on open\n this.addEventListener(\n 'toggle',\n (event: ToggleEvent & {source?: Element \| null}) => {\n if (event.newState === 'open') {\n this.previouslyFocused = event.source as HTMLElement;\n // Focus the first non-disabled item\n setTimeout(() => {\n this.items\n .find((item) => !item.matches(':disabled,.disabled,[disabled]'))\n ?.focus();\n });\n } else {\n this.previouslyFocused?.focus();\n this.previouslyFocused = undefined;\n }\n },\n );\n }\n\n override connectedCallback() {\n super.connectedCallback();\n // Set popover behavior in connectedCallback since constructor may not\n // sprout attributes.\n this.popover = 'auto';\n }\n\n protected override render() {\n return html`<div part=\"menu\" class=\"${menu({color: this.color})} menu-host\">\n <slot></slot>\n </div>`;\n }\n}\n"]}
1	+ {"version":3,"file":"md-menu.js","sourceRoot":"","sources":["md-menu.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 {ContextProvider} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\n\nimport menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {menu, MENU_COLORS, menuContext, type MenuColor} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design menu component. /\n 'md-gb-menu': Menu;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/\n A Material Design menu component.\n \n @slot - Used to display the menu's items.\n * @csspart menu - The menu's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --gap\n * @cssprop --group-padding\n * @cssprop --group-shape\n * @cssprop --section-label-text-color\n */\n@customElement('md-gb-menu')\nexport class Menu extends baseClass {\n static override styles: CSSResultOrNative[] = [menuStyles, css``];\n\n @property() color: MenuColor = MENU_COLORS.standard;\n\n get items(): HTMLElement[] {\n return Array.from(this.itemsSet).sort((a, b) => {\n return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING\n ? 1\n : -1;\n });\n }\n\n private previouslyFocused?: HTMLElement;\n private readonly itemsSet = new Set<HTMLElement>();\n\n constructor() {\n super();\n this[internals].role = 'menu';\n this.addController(\n new ContextProvider(this, {\n context: menuContext,\n initialValue: {\n menu: this,\n getItems: () => this.items,\n itemConnected: (item: HTMLElement) => {\n this.itemsSet.add(item);\n },\n itemDisconnected: (item: HTMLElement) => {\n this.itemsSet.delete(item);\n },\n },\n }),\n );\n\n // TODO: move event listeners to setupMenu()\n // Handle keyboard navigation\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n event.preventDefault();\n this.hidePopover();\n return;\n }\n\n const items = this.items.filter(\n (item) => !item.matches(':disabled,[disabled]'),\n );\n const index = items.findIndex((item) => item.matches(':focus-within'));\n if (index === -1 && items.length > 0) {\n // If no item is focused, focus the first one on arrow key\n if (\n [\n 'ArrowDown',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowLeft',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n event.preventDefault();\n items[0].focus();\n }\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n if (index < items.length - 1) {\n items[index + 1].focus();\n } else {\n items[0].focus();\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n if (index > 0) {\n items[index - 1].focus();\n } else {\n items[items.length - 1].focus();\n }\n break;\n case 'Home':\n event.preventDefault();\n items[0].focus();\n break;\n case 'End':\n event.preventDefault();\n items[items.length - 1].focus();\n break;\n default:\n break;\n }\n });\n\n // Handle focus on open\n this.addEventListener(\n 'toggle',\n (event: ToggleEvent & {source?: Element \| null}) => {\n if (event.newState === 'open') {\n this.previouslyFocused = event.source as HTMLElement;\n // Focus the first non-disabled item\n setTimeout(() => {\n this.items\n .find((item) => !item.matches(':disabled,.disabled,[disabled]'))\n ?.focus();\n });\n } else {\n this.previouslyFocused?.focus();\n this.previouslyFocused = undefined;\n }\n },\n );\n }\n\n override connectedCallback() {\n super.connectedCallback();\n // Set popover behavior in connectedCallback since constructor may not\n // sprout attributes.\n this.popover = 'auto';\n }\n\n protected override render() {\n return html`<div part=\"menu\" class=\"${menu({color: this.color})} menu-host\">\n <slot></slot>\n </div>`;\n }\n}\n"]}

package/labs/gb/components/menu/menu.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,~~MCNF~~,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,~~mEDGE~~,~~mBCSF~~,~~0DDPI~~,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,~~WC5BF~~,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,qEACA,iBACA,8DACA,2BACA,uBACA,yEACA,6DACA,+~~EDUE~~,~~uBCNF~~,0DACA,~~uCDQE~~,~~sBCJF~~,~~0DACA~~,~~uCDME,~~uCACE,~~WCHJ~~,8DACA,gEACA,mEACA,iEACA,~~4EDEI~~,~~gCCEJ~~,mDACA,~~2FAIA~~,mDACA,~~oDDFI~~,~~kCCMJ~~,mDACA,~~qDDFE~~,~~iCCMF~~,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,~~4EDVI~~,uCAFF,~~iCCgBF~~,gDACA,oDACA,sDACA,yDACA,uDACA,~~mEDdE~~,~~mCCkBF~~,yEACA,2EACA,8EACA,4EACA,~~uFDpBI~~,uCAFF,~~mCC0BF~~,oFACA,sFACA,yFACA,uFACA,~~mGDzBI~~,~~4DC6BJ~~,gFACA,oFACA,sFACA,yFACA,uFACA,~~kGD7BE~~,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CAGF,oCACE,4CACA,qCACA,wDAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}
1	+ {"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,qEACA,iBACA,8DACA,2BACA,uBACA,yEACA,6DACA,+EDOE,uBCFF,0DACA,uCDIE,gFCCF,uCDEE,uCACE,WCCJ,8DACA,gEACA,mEACA,iEACA,4EDFI,gCCMJ,mDACA,oDDJI,uCCQJ,mDACA,oDDNI,kCCUJ,mDACA,qDDNE,iCCUF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDdI,uCAFF,iCCoBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDlBE,mCCsBF,yEACA,2EACA,8EACA,4EACA,uFDxBI,uCAFF,mCC8BF,oFACA,sFACA,yFACA,uFACA,mGD7BI,4DCiCJ,gFACA,oFACA,sFACA,yFACA,uFACA,kGDjCE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CAGF,oCACE,4CACA,qCACA,wDAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}

package/labs/gb/components/menu/menu.js CHANGED Viewed

@@ -39,7 +39,7 @@ export function menuClasses({ color } = {}) {
  * @param opts Setup options, supports a cleanup `signal`.
  */
 export function setupMenu(menu, opts) {
-    // TODO: add event listeners from <md-menu>
+    // TODO: add event listeners from <md-gb-menu>
 }
 /**
  * A Lit directive that adds menu styling and functionality to its element.

package/labs/gb/components/menu/menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAc3D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAK7E,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,cAAc;CACnB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAC,KAAK,KAAsB,EAAE;IACxD,OAAO;QACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,OAAO;KAC1D,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CACvB,IAAiB,EACjB,IAA6B;IAE7B,~~2CAA2C~~;~~AAC7C~~,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAKH,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,MAAM,CAAC,mBAAmB,CAAC,CAC5B,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,CAAC,EAAC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAC,CAAC;QACnD,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI;QAClC,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO;QACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM;QAClC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACvC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {createContext} from '@lit/context';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {FOCUS_RING_TYPES, focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/* Menu context provided to menu items. /\nexport interface MenuContext {\n /* The item's parent menu. /\n readonly menu: HTMLElement;\n /* Returns the menu's items. /\n getItems: () => HTMLElement[];\n /* Callback for menu items to register themselves with the menu. /\n itemConnected(item: HTMLElement): void;\n /* Callback for menu items to unregister themselves with the menu. /\n itemDisconnected(item: HTMLElement): void;\n}\n\n/* Menu context to provide to menu items. /\nexport const menuContext = createContext<MenuContext>(Symbol('menuContext'));\n\n/* Menu color configuration types. /\nexport type MenuColor = 'standard' \| 'vibrant';\n\n/* Menu color configurations. /\nexport const MENU_COLORS = {\n standard: 'standard',\n vibrant: 'vibrant',\n} as const;\n\n/* Menu classes. /\nexport const MENU_CLASSES = {\n menu: 'menu',\n menuVibrant: 'menu-vibrant',\n} as const;\n\n/* The state provided to the `menuClasses()` function. /\nexport interface MenuClassesState {\n /* The color of the menu. /\n color?: MenuColor;\n}\n\n/\n Returns the menu classes to apply to an element based on the given state.\n \n @param state The state of the menu.\n * @return An object of class names and truthy values if they apply.\n /\nexport function menuClasses({color}: MenuClassesState = {}): ClassInfo {\n return {\n [MENU_CLASSES.menu]: true,\n [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,\n };\n}\n\n/\n Sets up menu functionality for the given element.\n \n @param menu The element on which to set up menu functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n /\nexport function setupMenu(\n menu: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n // TODO: add event listeners from <md-menu>\n}\n\n/\n A Lit directive that adds menu styling and functionality to its element.\n \n @example\n * ```ts\n * html`<div class=\"${menu()}\">TODO: add examples</div>`;\n * ```\n /\nexport const menu = createClassMapDirective({\n getClasses: menuClasses,\n setupElement: setupMenu,\n});\n\n/* Whether a group of menu items are single or multiple selectable. /\nexport type MenuItemCheckable = 'single' \| 'multiple';\n\n/* Context provided to menu items for the checkable state of a menu item group. /\nexport const menuItemCheckable = createContext<MenuItemCheckable \| null>(\n Symbol('menuItemCheckable'),\n);\n\n/* Menu item classes. /\nexport const MENU_ITEM_CLASSES = {\n menuItem: 'menu-item',\n checked: PSEUDO_CLASSES.checked,\n hover: PSEUDO_CLASSES.hover,\n focus: PSEUDO_CLASSES.focus,\n active: PSEUDO_CLASSES.active,\n disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/* The state provided to the `menuItemClasses()` function. /\nexport interface MenuItemClassesState {\n /* Emulates `:checked`. /\n checked?: boolean;\n /* Emulates `:hover`. /\n hover?: boolean;\n /* Emulates `:focus`. /\n focus?: boolean;\n /* Emulates `:active`. /\n active?: boolean;\n /* Emulates `:disabled`. /\n disabled?: boolean;\n}\n\n/\n Returns the menu item classes to apply to an element based on the given\n * state.\n \n @param state The state of the menu item.\n * @return An object of class names and truthy values if they apply.\n /\nexport function menuItemClasses({\n checked = false,\n hover = false,\n focus = false,\n active = false,\n disabled = false,\n}: MenuItemClassesState = {}): ClassInfo {\n return {\n ...rippleClasses(),\n ...focusRingClasses({type: FOCUS_RING_TYPES.inner}),\n [MENU_ITEM_CLASSES.menuItem]: true,\n [MENU_ITEM_CLASSES.checked]: checked,\n [MENU_ITEM_CLASSES.hover]: hover,\n [MENU_ITEM_CLASSES.focus]: focus,\n [MENU_ITEM_CLASSES.active]: active,\n [MENU_ITEM_CLASSES.disabled]: disabled,\n };\n}\n\n/\n Sets up menu item functionality for the given element.\n \n @param menuItem The element on which to set up menu item functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n /\nexport function setupMenuItem(\n menuItem: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n setupRipple(menuItem, opts);\n}\n\n/\n A Lit directive that adds menu item styling and functionality to its element.\n \n @example\n * ```ts\n * html`<div class=\"${menuItem()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menuItem = createClassMapDirective({\n getClasses: menuItemClasses,\n setupElement: setupMenuItem,\n});\n"]}
1	+ {"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAc3D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAK7E,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,cAAc;CACnB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAC,KAAK,KAAsB,EAAE;IACxD,OAAO;QACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,OAAO;KAC1D,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CACvB,IAAiB,EACjB,IAA6B;IAE7B,8CAA8C;AAChD,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAKH,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,MAAM,CAAC,mBAAmB,CAAC,CAC5B,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,CAAC,EAAC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAC,CAAC;QACnD,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI;QAClC,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO;QACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM;QAClC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACvC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {createContext} from '@lit/context';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {FOCUS_RING_TYPES, focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/* Menu context provided to menu items. /\nexport interface MenuContext {\n /* The item's parent menu. /\n readonly menu: HTMLElement;\n /* Returns the menu's items. /\n getItems: () => HTMLElement[];\n /* Callback for menu items to register themselves with the menu. /\n itemConnected(item: HTMLElement): void;\n /* Callback for menu items to unregister themselves with the menu. /\n itemDisconnected(item: HTMLElement): void;\n}\n\n/* Menu context to provide to menu items. /\nexport const menuContext = createContext<MenuContext>(Symbol('menuContext'));\n\n/* Menu color configuration types. /\nexport type MenuColor = 'standard' \| 'vibrant';\n\n/* Menu color configurations. /\nexport const MENU_COLORS = {\n standard: 'standard',\n vibrant: 'vibrant',\n} as const;\n\n/* Menu classes. /\nexport const MENU_CLASSES = {\n menu: 'menu',\n menuVibrant: 'menu-vibrant',\n} as const;\n\n/* The state provided to the `menuClasses()` function. /\nexport interface MenuClassesState {\n /* The color of the menu. /\n color?: MenuColor;\n}\n\n/\n Returns the menu classes to apply to an element based on the given state.\n \n @param state The state of the menu.\n * @return An object of class names and truthy values if they apply.\n /\nexport function menuClasses({color}: MenuClassesState = {}): ClassInfo {\n return {\n [MENU_CLASSES.menu]: true,\n [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,\n };\n}\n\n/\n Sets up menu functionality for the given element.\n \n @param menu The element on which to set up menu functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n /\nexport function setupMenu(\n menu: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n // TODO: add event listeners from <md-gb-menu>\n}\n\n/\n A Lit directive that adds menu styling and functionality to its element.\n \n @example\n * ```ts\n * html`<div class=\"${menu()}\">TODO: add examples</div>`;\n * ```\n /\nexport const menu = createClassMapDirective({\n getClasses: menuClasses,\n setupElement: setupMenu,\n});\n\n/* Whether a group of menu items are single or multiple selectable. /\nexport type MenuItemCheckable = 'single' \| 'multiple';\n\n/* Context provided to menu items for the checkable state of a menu item group. /\nexport const menuItemCheckable = createContext<MenuItemCheckable \| null>(\n Symbol('menuItemCheckable'),\n);\n\n/* Menu item classes. /\nexport const MENU_ITEM_CLASSES = {\n menuItem: 'menu-item',\n checked: PSEUDO_CLASSES.checked,\n hover: PSEUDO_CLASSES.hover,\n focus: PSEUDO_CLASSES.focus,\n active: PSEUDO_CLASSES.active,\n disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/* The state provided to the `menuItemClasses()` function. /\nexport interface MenuItemClassesState {\n /* Emulates `:checked`. /\n checked?: boolean;\n /* Emulates `:hover`. /\n hover?: boolean;\n /* Emulates `:focus`. /\n focus?: boolean;\n /* Emulates `:active`. /\n active?: boolean;\n /* Emulates `:disabled`. /\n disabled?: boolean;\n}\n\n/\n Returns the menu item classes to apply to an element based on the given\n * state.\n \n @param state The state of the menu item.\n * @return An object of class names and truthy values if they apply.\n /\nexport function menuItemClasses({\n checked = false,\n hover = false,\n focus = false,\n active = false,\n disabled = false,\n}: MenuItemClassesState = {}): ClassInfo {\n return {\n ...rippleClasses(),\n ...focusRingClasses({type: FOCUS_RING_TYPES.inner}),\n [MENU_ITEM_CLASSES.menuItem]: true,\n [MENU_ITEM_CLASSES.checked]: checked,\n [MENU_ITEM_CLASSES.hover]: hover,\n [MENU_ITEM_CLASSES.focus]: focus,\n [MENU_ITEM_CLASSES.active]: active,\n [MENU_ITEM_CLASSES.disabled]: disabled,\n };\n}\n\n/\n Sets up menu item functionality for the given element.\n \n @param menuItem The element on which to set up menu item functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n /\nexport function setupMenuItem(\n menuItem: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n setupRipple(menuItem, opts);\n}\n\n/\n A Lit directive that adds menu item styling and functionality to its element.\n \n @example\n * ```ts\n * html`<div class=\"${menuItem()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menuItem = createClassMapDirective({\n getClasses: menuItemClasses,\n setupElement: setupMenuItem,\n});\n"]}

package/labs/gb/components/radio/_radio-tokens.scss CHANGED Viewed

@@ -4,11 +4,13 @@
 //
 @mixin root {
+  // LINT.IfChange
   --icon-color: var(--md-sys-color-on-surface-variant);
   --icon-size: 20px;
   --state-layer-color: var(--md-sys-color-on-surface);
   --state-layer-shape: 50%;
   --state-layer-size: 40px;
+  // LINT.ThenChange(md-radio.ts) keep in sync with `@cssprop` jsdoc tags
 }
 @mixin hovered {

package/labs/gb/components/radio/md-radio.d.ts CHANGED Viewed

@@ -10,12 +10,21 @@ import { RadioValidator } from '../../../behaviors/validators/radio-validator.js
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design radio component. */
-        'md-radio': Radio;
+        'md-gb-radio': Radio;
     }
 }
 declare const radioBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("../../../behaviors/focusable.js").Focusable) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>;
 /**
  * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
  */
 export declare class Radio extends radioBaseClass {
     static styles: CSSResultOrNative[];

package/labs/gb/components/radio/md-radio.js CHANGED Viewed

@@ -24,6 +24,15 @@ import { radio } from './radio.js';
 const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))));
 /**
  * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
  */
 let Radio = class Radio extends radioBaseClass {
     /**
@@ -180,7 +189,7 @@ __decorate([
     state()
 ], Radio.prototype, "isFocused", void 0);
 Radio = __decorate([
-    customElement('md-radio')
+    customElement('md-gb-radio')
 ], Radio);
 export { Radio };
 //# sourceMappingURL=md-radio.js.map

package/labs/gb/components/radio/md-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"md-radio.js","sourceRoot":"","sources":["md-radio.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, isServer, LitElement} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {SingleSelectionController} from '../../../../radio/internal/single-selection-controller.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {RadioValidator} from '../../../behaviors/validators/radio-validator.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 radioStyles from './radio.css' with {type: 'css'}; // github-only\n// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only\n\nimport {radio} from './radio.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design radio component. /\n 'md-radio': Radio;\n }\n}\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/\n A Material Design radio component.\n /\n@customElement('md-radio')\nexport class Radio extends radioBaseClass {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n radioStyles,\n css`\n :host {\n display: inline-flex;\n outline: none;\n }\n .radio {\n flex: 1;\n }\n `,\n ];\n\n /\n Whether or not the radio is selected.\n /\n @property({type: Boolean})\n get checked() {\n return this[internals].ariaChecked === 'true';\n }\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[internals].ariaChecked = String(checked);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n /\n The default checked state of the radio.\n /\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value \|\| false);\n }\n\n /\n Whether or not the radio is required. If any radio is required in a group,\n * all radios are implicitly required.\n /\n @property({type: Boolean}) required = false;\n\n /\n The element value to use in form submission when checked.\n /\n @property() value = 'on';\n\n @query('.radio', true) private readonly radio!: HTMLElement;\n private readonly selectionController = new SingleSelectionController(this);\n /\n Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the radio has not been\n * interacted with.\n \n @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n @state() private isFocused = false;\n\n constructor() {\n super();\n if (isServer) return;\n this[internals].role = 'radio';\n this.addController(this.selectionController);\n setupDispatchHooks(this, 'click', 'keydown');\n this.addEventListener('click', (event) => {\n // Return if disabled, or already checked since clicking on a checked\n // radio does not dispatch events.\n if (this.disabled \|\| this.checked) return;\n afterDispatch(event, () => {\n if (event.defaultPrevented) return;\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dirtyCheckedness = true;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n });\n });\n\n this.addEventListener('keydown', (event) => {\n afterDispatch(event, () => {\n if (event.key !== ' ' \|\| event.defaultPrevented) {\n return;\n }\n\n this.click();\n });\n });\n\n this.addEventListener('focus', () => {\n this.isFocused = true;\n });\n\n this.addEventListener('blur', () => {\n this.isFocused = false;\n });\n }\n\n protected override render() {\n return html`<div\n part=\"radio\"\n class=\"ripple-host focus-ring-host ${radio({\n checked: this.checked,\n disabled: this.disabled,\n focus: this.isFocused,\n })}\"></div>`;\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string \| null,\n newValue: string \| null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update radios that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new RadioValidator(() => {\n if (!this.selectionController) {\n // Validation runs on superclass construction, so selection controller\n // might not actually be ready until this class constructs.\n return [this];\n }\n\n return this.selectionController.controls as [Radio, ...Radio[]];\n });\n }\n\n override [getValidityAnchor]() {\n return this.radio;\n }\n}\n"]}
1	+ {"version":3,"file":"md-radio.js","sourceRoot":"","sources":["md-radio.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, isServer, LitElement} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {SingleSelectionController} from '../../../../radio/internal/single-selection-controller.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {RadioValidator} from '../../../behaviors/validators/radio-validator.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 radioStyles from './radio.css' with {type: 'css'}; // github-only\n// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only\n\nimport {radio} from './radio.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design radio component. /\n 'md-gb-radio': Radio;\n }\n}\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/\n A Material Design radio component.\n \n @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed\n * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles\n * @csspart radio - The radio's root element.\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n /\n@customElement('md-gb-radio')\nexport class Radio extends radioBaseClass {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n radioStyles,\n css`\n :host {\n display: inline-flex;\n outline: none;\n }\n .radio {\n flex: 1;\n }\n `,\n ];\n\n /\n Whether or not the radio is selected.\n /\n @property({type: Boolean})\n get checked() {\n return this[internals].ariaChecked === 'true';\n }\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[internals].ariaChecked = String(checked);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n /\n The default checked state of the radio.\n /\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value \|\| false);\n }\n\n /\n Whether or not the radio is required. If any radio is required in a group,\n * all radios are implicitly required.\n /\n @property({type: Boolean}) required = false;\n\n /\n The element value to use in form submission when checked.\n /\n @property() value = 'on';\n\n @query('.radio', true) private readonly radio!: HTMLElement;\n private readonly selectionController = new SingleSelectionController(this);\n /\n Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the radio has not been\n * interacted with.\n \n @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n @state() private isFocused = false;\n\n constructor() {\n super();\n if (isServer) return;\n this[internals].role = 'radio';\n this.addController(this.selectionController);\n setupDispatchHooks(this, 'click', 'keydown');\n this.addEventListener('click', (event) => {\n // Return if disabled, or already checked since clicking on a checked\n // radio does not dispatch events.\n if (this.disabled \|\| this.checked) return;\n afterDispatch(event, () => {\n if (event.defaultPrevented) return;\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dirtyCheckedness = true;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n });\n });\n\n this.addEventListener('keydown', (event) => {\n afterDispatch(event, () => {\n if (event.key !== ' ' \|\| event.defaultPrevented) {\n return;\n }\n\n this.click();\n });\n });\n\n this.addEventListener('focus', () => {\n this.isFocused = true;\n });\n\n this.addEventListener('blur', () => {\n this.isFocused = false;\n });\n }\n\n protected override render() {\n return html`<div\n part=\"radio\"\n class=\"ripple-host focus-ring-host ${radio({\n checked: this.checked,\n disabled: this.disabled,\n focus: this.isFocused,\n })}\"></div>`;\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string \| null,\n newValue: string \| null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update radios that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new RadioValidator(() => {\n if (!this.selectionController) {\n // Validation runs on superclass construction, so selection controller\n // might not actually be ready until this class constructs.\n return [this];\n }\n\n return this.selectionController.controls as [Radio, ...Radio[]];\n });\n }\n\n override [getValidityAnchor]() {\n return this.radio;\n }\n}\n"]}

package/labs/gb/components/radio/radio.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["radio.scss","_radio-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,qBAEI,~~OCNF~~,qDACA,kBACA,oDACA,yBACA,~~yBDKI~~,~~4BCDJ~~,~~6CDII~~,~~gFAGA~~,~~8BCCJ~~,~~iDDGE~~,~~6BCCF~~,0CACA,~~iDDCI~~,~~oDCGJ~~,~~oDDCE~~,+~~BCGF~~,~~mEDCE~~,OACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,iCAEA,eACE,oBACA,wBACA,4CACA,uBACA,eAEF,qCACE,+BAEF,cACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"radio.css"}
1	+ {"version":3,"sourceRoot":"","sources":["radio.scss","_radio-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,qBAEI,OCLF,qDACA,kBACA,oDACA,yBACA,yBDII,4BCCJ,6CDEI,mCCEJ,6CDCI,8BCGJ,iDDCE,6BCGF,0CACA,iDDDI,oDCKJ,oDDDE,+BCKF,mEDDE,OACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,iCAEA,eACE,oBACA,wBACA,4CACA,uBACA,eAEF,qCACE,+BAEF,cACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"radio.css"}

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

@@ -4,15 +4,19 @@
 //
 @mixin root {
+  // LINT.IfChange
   --between-space: 2px;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 @mixin button {
+  // LINT.IfChange
   --icon-size: 0;
   --inner-corner-size: 0;
   --outer-corner-size: calc(var(--container-height) / 2);
   --leading-space: 0;
   --trailing-space: 0;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 @mixin button-xs {

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

@@ -8,11 +8,24 @@ import { type SplitButtonColor, type SplitButtonSize } from './split-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design split button component. */
-        'md-split-button': SplitButton;
+        'md-gb-split-button': SplitButton;
     }
 }
 /**
  * A Material Design split button component.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
 export declare class SplitButton extends LitElement {
     static styles: CSSResultOrNative[];

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

@@ -18,6 +18,19 @@ import splitButtonStyles from './split-button.css' with { type: 'css' }; // gith
 import { splitButton, } from './split-button.js';
 /**
  * A Material Design split button component.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
 let SplitButton = class SplitButton extends LitElement {
     constructor() {
@@ -113,7 +126,7 @@ __decorate([
     property({ type: Boolean })
 ], SplitButton.prototype, "selected", void 0);
 SplitButton = __decorate([
-    customElement('md-split-button')
+    customElement('md-gb-split-button')
 ], SplitButton);
 export { SplitButton };
 //# sourceMappingURL=md-split-button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"md-split-button.js","sourceRoot":"","sources":["md-split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACrF,2FAA2F;AAE3F,OAAO,EACL,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAS3B~~;;GAEG~~;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAkCO,UAAK,GAAqB,QAAQ,CAAC;QACnC,SAAI,GAAoB,IAAI,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;IAqD9C,CAAC;IAnDoB,MAAM;QACvB,MAAM,YAAY,GAAG;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;QAEF,OAAO,IAAI,CAAA,gCAAgC,WAAW,CAAC,IAAI,CAAC;;;;iBAI/C,MAAM,CAAC,YAAY,CAAC;mBAClB,IAAI,CAAC,sBAAsB;oBAC1B,IAAI,CAAC,sBAAsB;;;;;iBAK9B,MAAM,CAAC,YAAY,CAAC;mBAClB,IAAI,CAAC,sBAAsB;oBAC1B,IAAI,CAAC,sBAAsB;sBACzB,IAAI,CAAC,wBAAwB;;;WAGxC,CAAC;IACV,CAAC;IAEO,sBAAsB,CAAC,KAAY;QACzC,MAAM,IAAI,GAAG,KAAK,CAAC,aAAgC,CAAC;QACpD,MAAM,eAAe,GAAG,IAAI;aACzB,gBAAgB,EAAE;aAClB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,qCAAqC,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;IAC1D,CAAC;IAGO,wBAAwB,CAAC,KAAY;QAC3C,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAE,CAAC;QACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,eAAe,EAAE,CAAC;QACnD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,cAAc,GAAG,IAAI;aACxB,gBAAgB,EAAE;aAClB,IAAI,CAAC,CAAC,EAAE,EAA2B,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,cAAc,EAAE,oBAAoB;YAAE,OAAO;QAClD,cAAc,CAAC,oBAAoB,CAAC,gBAAgB,CAClD,QAAQ,EACR,CAAC,KAAY,EAAE,EAAE;YACf,IAAI,CAAC,QAAQ,GAAI,KAAqB,CAAC,QAAQ,KAAK,MAAM,CAAC;QAC7D,CAAC,EACD,EAAC,MAAM,EAAE,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAC,CAC5C,CAAC;IACJ,CAAC;;AAvFe,kBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,AA/BqB,CA+BpB;AAEU;IAAX,QAAQ,EAAE;0CAAoC;AACnC;IAAX,QAAQ,EAAE;yCAA8B;AACd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAkB;AApCjC,WAAW;IADvB,aAAa,CAAC,~~iBAAiB~~,CAAC;~~GACpB~~,WAAW,CAyFvB","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"]}
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-gb-split-button': SplitButton;\n }\n}\n\n/\n A Material Design split button component.\n \n @slot leading - Requires a `<button>` for the main action.\n * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.\n * @slot - Used to render the trailing button's popover menu.\n * @csspart split-btn - The split button's root element.\n * @csspart leading-btn - The split button's main action.\n * @csspart trailing-btn - The split button's menu action.\n * @cssprop --between-space\n * @cssprop --icon-size\n * @cssprop --inner-corner-size\n * @cssprop --outer-corner-size\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\n@customElement('md-gb-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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["split-button.scss","_split-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kEACA,4BACE,~~WCLA~~,~~qBDQE~~,~~gBCJF~~,eACA,uBACA,uDACA,mBACA,~~oBDIE~~,~~qCCCF~~,~~mDDEI~~,~~gDCEJ~~,sBACA,~~uBDCI~~,~~qDCGJ~~,sBACA~~,+DAIA~~,~~6FAIA~~,~~mDDCE~~,~~mBCGF~~,kBACA,~~mDDDI~~,~~gDCKJ~~,sBACA,~~uBDFI~~,~~qDCMJ~~,sBACA,~~uBDHI~~,~~wCCOJ~~,~~mDDHI~~,~~0CCOJ~~,~~mDDFE~~,~~mBCMF~~,kBACA,~~mDDJI~~,~~gDCQJ~~,sBACA,~~uBDLI~~,~~qDCSJ~~,sBACA,~~uBDNI~~,~~wCCUJ~~,~~mDDNI~~,~~0CCUJ~~,~~mDDLE~~,~~mBCSF~~,kBACA,~~mDDPI~~,~~gDCWJ~~,sBACA,~~uBDRI~~,~~qDCYJ~~,sBACA,~~uBDTI~~,~~wCCaJ~~,~~6DDTI~~,~~0CCaJ~~,~~6DDRE~~,~~mBCYF~~,kBACA,~~mDDVI~~,~~gDCcJ~~,sBACA,~~uBDXI~~,~~qDCeJ~~,sBACA,~~uBDZI~~,~~wCCgBJ~~,~~6DDZI~~,~~0CCgBJ~~,~~6DDVI~~,~~kFCcJ~~,~~uDDPE~~,WACE,oBACA,mBACA,yBAGF,iCACE,mDACA,iDACA,iDACA,+CAGF,sCACE,mDACA,iDACA,iDACA,+CAEA,8CACE,0BACA,6CACA,aACA,mBACA,eACA,0BACA,gBAIJ,0FAEE,yBACA","file":"split-button.css"}
1	+ {"version":3,"sourceRoot":"","sources":["split-button.scss","_split-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kEACA,4BACE,WCJA,qBDOE,gBCDF,eACA,uBACA,uDACA,mBACA,oBDCE,mBCIF,kBACA,mDDFI,gDCMJ,sBACA,uBDHI,qDCOJ,sBACA,uBDJI,wCCQJ,mDDJI,0CCQJ,mDDHE,mBCOF,kBACA,mDDLI,gDCSJ,sBACA,uBDNI,qDCUJ,sBACA,uBDPI,wCCWJ,mDDPI,0CCWJ,mDDNE,mBCUF,kBACA,mDDRI,gDCYJ,sBACA,uBDTI,qDCaJ,sBACA,uBDVI,wCCcJ,mDDVI,0CCcJ,mDDTE,mBCaF,kBACA,mDDXI,gDCeJ,sBACA,uBDZI,qDCgBJ,sBACA,uBDbI,wCCiBJ,6DDbI,0CCiBJ,6DDZE,mBCgBF,kBACA,mDDdI,gDCkBJ,sBACA,uBDfI,qDCmBJ,sBACA,uBDhBI,wCCoBJ,6DDhBI,0CCoBJ,6DDdI,kFCkBJ,uDDXE,WACE,oBACA,mBACA,yBAGF,iCACE,mDACA,iDACA,iDACA,+CAGF,sCACE,mDACA,iDACA,iDACA,+CAEA,8CACE,0BACA,6CACA,aACA,mBACA,eACA,0BACA,gBAIJ,0FAEE,yBACA","file":"split-button.css"}

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

@@ -36,10 +36,10 @@ export declare function splitButtonClasses({ selected, }?: SplitButtonClassesSta
  *   <div class="${splitButton()}">
  *     <button class="${button({color: 'filled'})}">Label</button>
  *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
- *     <md-menu id="menu">
- *       <md-menu-item>Option 1</md-menu-item>
- *       <md-menu-item>Option 2</md-menu-item>
- *     </md-menu>
+ *     <md-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-menu>
  *   </div>
  * `;
  * ```

package/labs/gb/components/splitbutton/split-button.js CHANGED Viewed

@@ -32,10 +32,10 @@ export function splitButtonClasses({ selected = false, } = {}) {
  *   <div class="${splitButton()}">
  *     <button class="${button({color: 'filled'})}">Label</button>
  *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
- *     <md-menu id="menu">
- *       <md-menu-item>Option 1</md-menu-item>
- *       <md-menu-item>Option 2</md-menu-item>
- *     </md-menu>
+ *     <md-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-menu>
  *   </div>
  * `;
  * ```

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

	@@ -1 +1 @@
1	- {"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;~~AAEH~~,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;~~AAShE~~,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {~~createClassMapDirective~~} from '~~../shared~~/directives.js';\nimport {~~type ClassInfo~~} from '~~lit~~/directives~~/class-map~~.js';\n\n/* Split Button color configuration types. /\nexport type SplitButtonColor = 'filled' \| 'elevated' \| 'tonal' \| 'outlined';\n\n/* Split Button size configuration types. /\nexport type SplitButtonSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Split Button classes. /\nexport const SPLIT_BUTTON_CLASSES = {\n splitButton: 'split-btn',\n splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/* The state provided to the `splitButtonClasses()` function. /\nexport interface SplitButtonClassesState {\n /* Whether the split trailing button is selected. /\n selected?: boolean;\n}\n\n/\n Returns the split button classes to apply to an element based on the given\n * state.\n \n @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n /\nexport function splitButtonClasses({\n selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n return {\n [SPLIT_BUTTON_CLASSES.splitButton]: true,\n [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n };\n}\n\n/\n A Lit directive that adds split button styling and functionality to its\n * element.\n \n @example\n * ```ts\n * html`\n * <div class=\"${splitButton()}\">\n * <button class=\"${button({color: 'filled'})}\">Label</button>\n * <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n * <md-menu id=\"menu\">\n * <md-menu-item>Option 1</md-menu-item>\n * <md-menu-item>Option 2</md-menu-item>\n * </md-menu>\n * </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n getClasses: splitButtonClasses,\n});\n"]}
1	+ {"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAQhE,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createClassMapDirective} from '../shared/directives.js';\n\n/* Split Button color configuration types. /\nexport type SplitButtonColor = 'filled' \| 'elevated' \| 'tonal' \| 'outlined';\n\n/* Split Button size configuration types. /\nexport type SplitButtonSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Split Button classes. /\nexport const SPLIT_BUTTON_CLASSES = {\n splitButton: 'split-btn',\n splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/* The state provided to the `splitButtonClasses()` function. /\nexport interface SplitButtonClassesState {\n /* Whether the split trailing button is selected. /\n selected?: boolean;\n}\n\n/\n Returns the split button classes to apply to an element based on the given\n * state.\n \n @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n /\nexport function splitButtonClasses({\n selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n return {\n [SPLIT_BUTTON_CLASSES.splitButton]: true,\n [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n };\n}\n\n/\n A Lit directive that adds split button styling and functionality to its\n * element.\n \n @example\n * ```ts\n * html`\n * <div class=\"${splitButton()}\">\n * <button class=\"${button({color: 'filled'})}\">Label</button>\n * <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n * <md-gb-menu id=\"menu\">\n * <md-gb-menu-item>Option 1</md-gb-menu-item>\n * <md-gb-menu-item>Option 2</md-gb-menu-item>\n * </md-gb-menu>\n * </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n getClasses: splitButtonClasses,\n});\n"]}

package/labs/gb/components/switch/_switch-tokens.scss CHANGED Viewed

@@ -4,6 +4,7 @@
 //
 @mixin root {
+  // LINT.IfChange
   --handle-color: var(--md-sys-color-outline);
   --handle-size: 16px;
   --with-icon-handle-size: 24px;
@@ -16,6 +17,7 @@
   --track-outline-color: var(--md-sys-color-outline);
   --track-outline-width: 2px;
   --track-width: 52px;
+  // LINT.ThenChange(md-switch.ts) keep in sync with `@cssprop` jsdoc tags
 }
 @mixin hovered {

package/labs/gb/components/switch/md-switch.d.ts CHANGED Viewed

@@ -10,12 +10,30 @@ import { CheckboxValidator } from '../../../behaviors/validators/checkbox-valida
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design switch component. */
-        'md-switch': Switch;
+        'md-gb-switch': Switch;
     }
 }
 declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/custom-state-set.js").WithCustomStateSet) & (abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>>;
 /**
  * A Material Design switch component.
+ *
+ * @slot off-icon - Used to show an icon when the switch is unselected.
+ * @slot on-icon - Used to show an icon when the switch is selected.
+ * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles
+ * @csspart switch - The switch's root element.
+ * @cssprop --handle-color
+ * @cssprop --handle-size
+ * @cssprop --with-icon-handle-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-size
+ * @cssprop --track-color
+ * @cssprop --track-height
+ * @cssprop --track-outline-color
+ * @cssprop --track-outline-width
+ * @cssprop --track-width
  */
 export declare class Switch extends baseClass {
     /** @nocollapse */

package/labs/gb/components/switch/md-switch.js CHANGED Viewed

@@ -25,6 +25,24 @@ import { switchToggle } from './switch.js';
 const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement)))));
 /**
  * A Material Design switch component.
+ *
+ * @slot off-icon - Used to show an icon when the switch is unselected.
+ * @slot on-icon - Used to show an icon when the switch is selected.
+ * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles
+ * @csspart switch - The switch's root element.
+ * @cssprop --handle-color
+ * @cssprop --handle-size
+ * @cssprop --with-icon-handle-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-size
+ * @cssprop --track-color
+ * @cssprop --track-height
+ * @cssprop --track-outline-color
+ * @cssprop --track-outline-width
+ * @cssprop --track-width
  */
 let Switch = class Switch extends baseClass {
     constructor() {
@@ -156,7 +174,7 @@ __decorate([
     query('button', true)
 ], Switch.prototype, "button", void 0);
 Switch = __decorate([
-    customElement('md-switch')
+    customElement('md-gb-switch')
 ], Switch);
 export { Switch };
 //# sourceMappingURL=md-switch.js.map

package/labs/gb/components/switch/md-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"md-switch.js","sourceRoot":"","sources":["md-switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,QAAQ,EACR,mBAAmB,EACnB,WAAW,GACZ,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qDAAqD,CAAC;AACtF,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,YAAY,MAAM,cAAc,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC1E,oEAAoE;AAEpE,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AASzC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC5E,CACF,CAAC;AAEF~~;;GAEG~~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~~WAAW~~,CAAC;~~GACd~~,MAAM,CAyIlB","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n hasState,\n mixinCustomStateSet,\n toggleState,\n} from '../../../behaviors/custom-state-set.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\nimport {hasSlotted} from '../shared/has-slotted.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 switchStyles from './switch.css' with {type: 'css'}; // github-only\n// import switchStyles from './switch.cssresult.js'; // google3-only\n\nimport {switchToggle} from './switch.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design switch component. /\n 'md-switch': Switch;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement))),\n ),\n);\n\n/\n A Material Design switch component.\n /\n@customElement('md-switch')\nexport class Switch extends baseClass {\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n switchStyles,\n css`\n :host {\n display: inline-flex;\n }\n .switch {\n flex: 1;\n }\n ::slotted() {\n grid-area: handle;\n }\n `,\n ];\n\n /*\n Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n /\n @property({type: Boolean})\n get selected() {\n return this[hasState]('selected');\n }\n set selected(value: boolean) {\n this[toggleState]('selected', value);\n }\n\n /\n The default selected state of the switch.\n /\n get defaultSelected(): boolean {\n return this.hasAttribute('selected');\n }\n set defaultSelected(value: boolean) {\n this.toggleAttribute('selected', value \|\| false);\n }\n\n /\n When true, require the switch to be selected when participating in\n * form submission.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n /\n @property({type: Boolean}) required = false;\n\n /\n The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n /\n @property() value = 'on';\n\n @query('button', true)\n private readonly button!: HTMLButtonElement \| null;\n\n /\n Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the checkbox has not been\n * interacted with.\n \n @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n role=\"switch\"\n part=\"switch\"\n class=\"${switchToggle()}\"\n aria-checked=\"${this.selected ? 'true' : 'false'}\"\n aria-label=${ariaLabel \|\| nothing}\n ?disabled=${this.disabled}\n @change=${this.handleChange}>\n <slot name=\"off-icon\" class=\"switch-icon-off\" ${hasSlotted()}></slot>\n <slot name=\"on-icon\" class=\"switch-icon-on\"></slot>\n </button>\n `;\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n this.selected = this.button?.ariaChecked === 'true';\n // Change event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string \| null,\n newValue: string \| null,\n ) {\n if (name === 'selected' && this.dirtyCheckedness) {\n // The 'selected' attribute does not update switches that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.selected ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.selected);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.selected = this.defaultSelected;\n }\n\n override formStateRestoreCallback(state: string) {\n this.selected = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => ({\n checked: this.selected,\n required: this.required,\n }));\n }\n\n override [getValidityAnchor]() {\n return this.button;\n }\n}\n"]}
1	+ {"version":3,"file":"md-switch.js","sourceRoot":"","sources":["md-switch.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, nothing} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n hasState,\n mixinCustomStateSet,\n toggleState,\n} from '../../../behaviors/custom-state-set.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\nimport {hasSlotted} from '../shared/has-slotted.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 switchStyles from './switch.css' with {type: 'css'}; // github-only\n// import switchStyles from './switch.cssresult.js'; // google3-only\n\nimport {switchToggle} from './switch.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design switch component. /\n 'md-gb-switch': Switch;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement))),\n ),\n);\n\n/\n A Material Design switch component.\n \n @slot off-icon - Used to show an icon when the switch is unselected.\n * @slot on-icon - Used to show an icon when the switch is selected.\n * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles\n * @csspart switch - The switch's root element.\n * @cssprop --handle-color\n * @cssprop --handle-size\n * @cssprop --with-icon-handle-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-size\n * @cssprop --track-color\n * @cssprop --track-height\n * @cssprop --track-outline-color\n * @cssprop --track-outline-width\n * @cssprop --track-width\n /\n@customElement('md-gb-switch')\nexport class Switch extends baseClass {\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n switchStyles,\n css`\n :host {\n display: inline-flex;\n }\n .switch {\n flex: 1;\n }\n ::slotted() {\n grid-area: handle;\n }\n `,\n ];\n\n /*\n Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n /\n @property({type: Boolean})\n get selected() {\n return this[hasState]('selected');\n }\n set selected(value: boolean) {\n this[toggleState]('selected', value);\n }\n\n /\n The default selected state of the switch.\n /\n get defaultSelected(): boolean {\n return this.hasAttribute('selected');\n }\n set defaultSelected(value: boolean) {\n this.toggleAttribute('selected', value \|\| false);\n }\n\n /\n When true, require the switch to be selected when participating in\n * form submission.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n /\n @property({type: Boolean}) required = false;\n\n /\n The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n /\n @property() value = 'on';\n\n @query('button', true)\n private readonly button!: HTMLButtonElement \| null;\n\n /\n Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the checkbox has not been\n * interacted with.\n \n @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n role=\"switch\"\n part=\"switch\"\n class=\"${switchToggle()}\"\n aria-checked=\"${this.selected ? 'true' : 'false'}\"\n aria-label=${ariaLabel \|\| nothing}\n ?disabled=${this.disabled}\n @change=${this.handleChange}>\n <slot name=\"off-icon\" class=\"switch-icon-off\" ${hasSlotted()}></slot>\n <slot name=\"on-icon\" class=\"switch-icon-on\"></slot>\n </button>\n `;\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n this.selected = this.button?.ariaChecked === 'true';\n // Change event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string \| null,\n newValue: string \| null,\n ) {\n if (name === 'selected' && this.dirtyCheckedness) {\n // The 'selected' attribute does not update switches that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.selected ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.selected);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.selected = this.defaultSelected;\n }\n\n override formStateRestoreCallback(state: string) {\n this.selected = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => ({\n checked: this.selected,\n required: this.required,\n }));\n }\n\n override [getValidityAnchor]() {\n return this.button;\n }\n}\n"]}

package/labs/gb/components/switch/switch.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["switch.scss","_switch-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBAEI,~~QCNF~~,4CACA,oBACA,8BACA,4DACA,kBACA,oDACA,yBACA,6DACA,qBACA,mDACA,2BACA,~~oBDFE~~,~~0BCMF~~,~~uDDHE~~,~~kDCOF~~,2CACA,mCACA,+CACA,oBACA,uDACA,~~iDDVI~~,~~uECcJ~~,~~sDDVE~~,~~6DCcF~~,~~oBDXE~~,~~gCCeF~~,qEACA,qFAGA,~~8EDjBI~~,~~6ECuBJ~~,4CACA,mEACA,~~oEDpBE~~,QACE,oBACA,mDACA,mBACA,gBACA,8BACA,mEACA,0CACA,yBACA,2BACA,SACA,UACA,mEACA,kBACA,kBACA,wBACA,iCACA,WAEA,kDACE,0CAGF,gBACE,0HAIA,oBACA,6CACA,aACA,mBACA,WACA,iBACA,eACA,YACA,gDACA,uDACA,kBACA,+BAGF,eACE,WACA,WACA,kBACA,iBACA,+BACA,eACA,8BACA,kBACA,+BACA,oCACA,kCAIJ,qEACE,YAKA,8IAEE,iBAIJ,sIAEE","file":"switch.css"}
1	+ {"version":3,"sourceRoot":"","sources":["switch.scss","_switch-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBAEI,QCLF,4CACA,oBACA,8BACA,4DACA,kBACA,oDACA,yBACA,6DACA,qBACA,mDACA,2BACA,oBDHE,0BCQF,uDDLE,kDCSF,2CACA,mCACA,+CACA,oBACA,uDACA,iDDZI,uECgBJ,sDDZE,6DCgBF,oBDbE,gCCiBF,qEACA,qFAGA,8EDnBI,6ECyBJ,4CACA,mEACA,oEDtBE,QACE,oBACA,mDACA,mBACA,gBACA,8BACA,mEACA,0CACA,yBACA,2BACA,SACA,UACA,mEACA,kBACA,kBACA,wBACA,iCACA,WAEA,kDACE,0CAGF,gBACE,0HAIA,oBACA,6CACA,aACA,mBACA,WACA,iBACA,eACA,YACA,gDACA,uDACA,kBACA,+BAGF,eACE,WACA,WACA,kBACA,iBACA,+BACA,eACA,8BACA,kBACA,+BACA,oCACA,kCAIJ,qEACE,YAKA,8IAEE,iBAIJ,sIAEE","file":"switch.css"}

package/labs/gb/styles/icon/md-icon.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { Icon as IconBase } from '../../../../icon/internal/icon.js';
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design icon component. */
-        'md-icon': Icon;
+        'md-gb-icon': Icon;
     }
 }
 /**

package/labs/gb/styles/icon/md-icon.js CHANGED Viewed

@@ -21,7 +21,7 @@ let Icon = class Icon extends IconBase {
 };
 Icon.styles = [iconStyles];
 Icon = __decorate([
-    customElement('md-icon')
+    customElement('md-gb-icon')
 ], Icon);
 export { Icon };
 //# sourceMappingURL=md-icon.js.map

package/labs/gb/styles/icon/md-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"md-icon.js","sourceRoot":"","sources":["md-icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,IAAI,IAAI,QAAQ,EAAC,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAUzE;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,QAAQ;IAGvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4EAA4E;QAC5E,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;;AAPe,WAAM,GAAwB,CAAC,UAAU,CAAC,AAApC,CAAqC;AADhD,IAAI;IADhB,aAAa,CAAC,~~SAAS~~,CAAC;~~GACZ~~,IAAI,CAShB","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {type CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {Icon as IconBase} from '../../../../icon/internal/icon.js';\nimport {adoptStyles} from '../adopt-styles.js';\n\nimport iconStyles from './md-icon.css' with {type: 'css'}; // github-only\n// import iconStyles from './md-icon.cssresult.js'; // google3-only\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design icon component. /\n 'md-icon': Icon;\n }\n}\n\n/\n A Material Design icon component.\n */\n@customElement('md-icon')\nexport class Icon extends IconBase {\n static override styles: CSSResultOrNative[] = [iconStyles];\n\n override connectedCallback() {\n super.connectedCallback();\n // Adopt stylesheet to ensure global CSS @property variables are registered.\n adoptStyles(this, iconStyles);\n this.classList.add('md-icon');\n }\n}\n"]}
1	+ {"version":3,"file":"md-icon.js","sourceRoot":"","sources":["md-icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,IAAI,IAAI,QAAQ,EAAC,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAUzE;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,QAAQ;IAGvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4EAA4E;QAC5E,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;;AAPe,WAAM,GAAwB,CAAC,UAAU,CAAC,AAApC,CAAqC;AADhD,IAAI;IADhB,aAAa,CAAC,YAAY,CAAC;GACf,IAAI,CAShB","sourcesContent":["/*\n @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport {type CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {Icon as IconBase} from '../../../../icon/internal/icon.js';\nimport {adoptStyles} from '../adopt-styles.js';\n\nimport iconStyles from './md-icon.css' with {type: 'css'}; // github-only\n// import iconStyles from './md-icon.cssresult.js'; // google3-only\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /* A Material Design icon component. /\n 'md-gb-icon': Icon;\n }\n}\n\n/\n A Material Design icon component.\n */\n@customElement('md-gb-icon')\nexport class Icon extends IconBase {\n static override styles: CSSResultOrNative[] = [iconStyles];\n\n override connectedCallback() {\n super.connectedCallback();\n // Adopt stylesheet to ensure global CSS @property variables are registered.\n adoptStyles(this, iconStyles);\n this.classList.add('md-icon');\n }\n}\n"]}