@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.
- package/custom-elements.json +930 -3386
- package/labs/gb/components/button/_button-tokens.scss +2 -0
- package/labs/gb/components/button/button.css.map +1 -1
- package/labs/gb/components/button/md-button.d.ts +22 -1
- package/labs/gb/components/button/md-button.js +22 -1
- package/labs/gb/components/button/md-button.js.map +1 -1
- package/labs/gb/components/card/_card-tokens.scss +2 -0
- package/labs/gb/components/card/card.css.map +1 -1
- package/labs/gb/components/card/md-card.d.ts +12 -1
- package/labs/gb/components/card/md-card.js +12 -1
- package/labs/gb/components/card/md-card.js.map +1 -1
- package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
- package/labs/gb/components/checkbox/checkbox.css.map +1 -1
- package/labs/gb/components/checkbox/md-checkbox.d.ts +15 -1
- package/labs/gb/components/checkbox/md-checkbox.js +15 -1
- package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
- package/labs/gb/components/divider/_divider-tokens.scss +2 -0
- package/labs/gb/components/divider/divider.css.map +1 -1
- package/labs/gb/components/divider/md-divider.d.ts +5 -1
- package/labs/gb/components/divider/md-divider.js +5 -1
- package/labs/gb/components/divider/md-divider.js.map +1 -1
- package/labs/gb/components/fab/_fab-tokens.scss +2 -0
- package/labs/gb/components/fab/fab.css.map +1 -1
- package/labs/gb/components/fab/md-fab.d.ts +16 -1
- package/labs/gb/components/fab/md-fab.js +16 -1
- package/labs/gb/components/fab/md-fab.js.map +1 -1
- package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
- package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.d.ts +15 -1
- package/labs/gb/components/iconbutton/md-icon-button.js +15 -1
- package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -1
- package/labs/gb/components/list/_list-tokens.scss +4 -0
- package/labs/gb/components/list/list.css.map +1 -1
- package/labs/gb/components/list/md-list-item.d.ts +40 -1
- package/labs/gb/components/list/md-list-item.js +40 -1
- package/labs/gb/components/list/md-list-item.js.map +1 -1
- package/labs/gb/components/list/md-list.d.ts +6 -1
- package/labs/gb/components/list/md-list.js +6 -1
- package/labs/gb/components/list/md-list.js.map +1 -1
- package/labs/gb/components/menu/_menu-tokens.scss +4 -0
- package/labs/gb/components/menu/md-menu-group.d.ts +3 -1
- package/labs/gb/components/menu/md-menu-group.js +5 -1
- package/labs/gb/components/menu/md-menu-group.js.map +1 -1
- package/labs/gb/components/menu/md-menu-item.d.ts +32 -1
- package/labs/gb/components/menu/md-menu-item.js +33 -1
- package/labs/gb/components/menu/md-menu-item.js.map +1 -1
- package/labs/gb/components/menu/md-menu.d.ts +11 -1
- package/labs/gb/components/menu/md-menu.js +11 -1
- package/labs/gb/components/menu/md-menu.js.map +1 -1
- package/labs/gb/components/menu/menu.css.map +1 -1
- package/labs/gb/components/menu/menu.js +1 -1
- package/labs/gb/components/menu/menu.js.map +1 -1
- package/labs/gb/components/radio/_radio-tokens.scss +2 -0
- package/labs/gb/components/radio/md-radio.d.ts +10 -1
- package/labs/gb/components/radio/md-radio.js +10 -1
- package/labs/gb/components/radio/md-radio.js.map +1 -1
- package/labs/gb/components/radio/radio.css.map +1 -1
- package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
- package/labs/gb/components/splitbutton/md-split-button.d.ts +14 -1
- package/labs/gb/components/splitbutton/md-split-button.js +14 -1
- package/labs/gb/components/splitbutton/md-split-button.js.map +1 -1
- package/labs/gb/components/splitbutton/split-button.css.map +1 -1
- package/labs/gb/components/splitbutton/split-button.d.ts +4 -4
- package/labs/gb/components/splitbutton/split-button.js +4 -4
- package/labs/gb/components/splitbutton/split-button.js.map +1 -1
- package/labs/gb/components/switch/_switch-tokens.scss +2 -0
- package/labs/gb/components/switch/md-switch.d.ts +19 -1
- package/labs/gb/components/switch/md-switch.js +19 -1
- package/labs/gb/components/switch/md-switch.js.map +1 -1
- package/labs/gb/components/switch/switch.css.map +1 -1
- package/labs/gb/styles/icon/md-icon.d.ts +1 -1
- package/labs/gb/styles/icon/md-icon.js +1 -1
- package/labs/gb/styles/icon/md-icon.js.map +1 -1
- package/package.json +2 -2
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@mixin root {
|
|
7
|
+
// LINT.IfChange
|
|
7
8
|
--container-color: transparent;
|
|
8
9
|
--container-height: auto;
|
|
9
10
|
--container-elevation: var(--md-sys-elevation-shadow-0);
|
|
@@ -19,6 +20,7 @@
|
|
|
19
20
|
--leading-space: 0;
|
|
20
21
|
--state-layer-color: transparent;
|
|
21
22
|
--trailing-space: 0;
|
|
23
|
+
// LINT.ThenChange(md-button.ts) keep in sync with `@cssprop` jsdoc tags
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
@mixin selected {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,KCJA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDRE,2CCaF,iDDVE,gBCcF,+CACA,6CACA,mDDdI,4DCkBJ,yDACA,qDACA,2DDjBI,yDCqBJ,+CACA,6CACA,mDDnBE,kBCuBF,6DACA,wDACA,0CACA,gDDxBI,2DC4BJ,+CACA,6CACA,mDD1BE,eC8BF,2DACA,yDACA,+DD9BI,wDCkCJ,iDACA,+CACA,qDDhCE,kBCoCF,qDACA,2DACA,qDACA,qBDrCI,iCCyCJ,qBDtCI,iCC0CJ,qBDvCI,2DC2CJ,uDACA,qDACA,2DDzCE,cC6CF,gDACA,0CACA,iDD5CE,YCgDF,yBACA,sBACA,uBD/CE,YCmDF,yBACA,sBACA,uBDlDE,YCsDF,yBACA,sBACA,uBACA,kBACA,+CACA,iEDzDI,qDC6DJ,iDDzDE,YC6DF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDjEI,qDCqEJ,iDDjEE,YCqEF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDzEI,qDC6EJ,iDDzEE,gBC6EF,iDD3EI,+BC+EJ,iDD5EI,+BCgFJ,iDD7EI,+BCiFJ,iDD9EI,yDCkFJ,qDD9EE,0DCkFF,iDDhFI,yECoFJ,iDDjFI,yECqFJ,iDDlFI,yECsFJ,iDDlFE,6BCsFF,wEACA,wDACA,mEACA,yEDrFE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,WACE,iFAEF,mCACA,iCAEF,8BACE","file":"button.css"}
|
|
@@ -7,12 +7,33 @@ import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
|
|
|
7
7
|
declare global {
|
|
8
8
|
interface HTMLElementTagNameMap {
|
|
9
9
|
/** A Material Design button. */
|
|
10
|
-
'md-button': Button;
|
|
10
|
+
'md-gb-button': Button;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
|
|
14
14
|
/**
|
|
15
15
|
* A Material Design button.
|
|
16
|
+
*
|
|
17
|
+
* @slot - Used to display a label and optional icon.
|
|
18
|
+
* @slot container - Used to set a custom background container for the button.
|
|
19
|
+
* @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed
|
|
20
|
+
* @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
|
|
21
|
+
* @csspart btn - The button's root element.
|
|
22
|
+
* @cssprop --container-color
|
|
23
|
+
* @cssprop --container-height
|
|
24
|
+
* @cssprop --container-elevation
|
|
25
|
+
* @cssprop --container-shape
|
|
26
|
+
* @cssprop --outline-width
|
|
27
|
+
* @cssprop --outline-color
|
|
28
|
+
* @cssprop --icon-label-space
|
|
29
|
+
* @cssprop --icon-color
|
|
30
|
+
* @cssprop --icon-size
|
|
31
|
+
* @cssprop --label-text
|
|
32
|
+
* @cssprop --label-text-tracking
|
|
33
|
+
* @cssprop --label-text-color
|
|
34
|
+
* @cssprop --leading-space
|
|
35
|
+
* @cssprop --state-layer-color
|
|
36
|
+
* @cssprop --trailing-space
|
|
16
37
|
*/
|
|
17
38
|
export declare class Button extends baseClass {
|
|
18
39
|
/** @nocollapse */
|
|
@@ -23,6 +23,27 @@ import { button } from './button.js';
|
|
|
23
23
|
const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
24
24
|
/**
|
|
25
25
|
* A Material Design button.
|
|
26
|
+
*
|
|
27
|
+
* @slot - Used to display a label and optional icon.
|
|
28
|
+
* @slot container - Used to set a custom background container for the button.
|
|
29
|
+
* @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed
|
|
30
|
+
* @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
|
|
31
|
+
* @csspart btn - The button's root element.
|
|
32
|
+
* @cssprop --container-color
|
|
33
|
+
* @cssprop --container-height
|
|
34
|
+
* @cssprop --container-elevation
|
|
35
|
+
* @cssprop --container-shape
|
|
36
|
+
* @cssprop --outline-width
|
|
37
|
+
* @cssprop --outline-color
|
|
38
|
+
* @cssprop --icon-label-space
|
|
39
|
+
* @cssprop --icon-color
|
|
40
|
+
* @cssprop --icon-size
|
|
41
|
+
* @cssprop --label-text
|
|
42
|
+
* @cssprop --label-text-tracking
|
|
43
|
+
* @cssprop --label-text-color
|
|
44
|
+
* @cssprop --leading-space
|
|
45
|
+
* @cssprop --state-layer-color
|
|
46
|
+
* @cssprop --trailing-space
|
|
26
47
|
*/
|
|
27
48
|
let Button = class Button extends baseClass {
|
|
28
49
|
constructor() {
|
|
@@ -256,7 +277,7 @@ __decorate([
|
|
|
256
277
|
property()
|
|
257
278
|
], Button.prototype, "target", void 0);
|
|
258
279
|
Button = __decorate([
|
|
259
|
-
customElement('md-button')
|
|
280
|
+
customElement('md-gb-button')
|
|
260
281
|
], Button);
|
|
261
282
|
export { Button };
|
|
262
283
|
//# sourceMappingURL=md-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-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 {\n css,\n CSSResultOrNative,\n html,\n LitElement,\n nothing,\n PropertyValues,\n} from 'lit';\nimport {customElement, property, state} 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 {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.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\n\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-button': Button;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button 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 buttonStyles,\n css`\n :host {\n display: inline-flex;\n isolation: isolate;\n }\n .btn {\n flex: 1;\n position: relative;\n }\n .btn:has([name='container'].has-slotted) {\n background-color: transparent;\n }\n .btn.btn-hide-outline {\n --outline-color: transparent;\n --container-elevation: var(--md-sys-elevation-shadow-0);\n }\n slot[name='container'] {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n --color: var(--container-color);\n z-index: -1;\n transition: inherit;\n }\n slot[name='container']::slotted(*) {\n width: 100%;\n height: 100%;\n }\n `,\n ];\n\n @state() private hideOutline = false;\n\n /**\n * The color of the button.\n */\n @property()\n color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n /**\n * The size of the button.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * A string indicating the behavior of the button.\n *\n * - \"submit\" (default): A button that submits its associated form.\n * - \"reset\": A button that resets its associated form.\n * - \"button\": A normal button.\n * - \"toggle\": A toggle button using the `selected` property.\n * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n */\n @property({noAccessor: true})\n override get type(): string {\n return this.href ? 'link' : super.type;\n }\n override set type(type: string) {\n if (this.href && type !== 'link') {\n return;\n }\n super.type = type;\n }\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n *\n * Use this when a button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Whether or not the button is selected, when `type=\"toggle\"`.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n private lastFiredEnabledState?: boolean;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\n 'md-gb:set-show-outline',\n this.handleSetShowOutline,\n );\n }\n\n private readonly handleSetShowOutline = (event: Event) => {\n const customEvent = event as CustomEvent<{shown: boolean}>;\n this.hideOutline = !customEvent.detail.shown;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (\n changedProperties.has('disabled') ||\n changedProperties.has('softDisabled')\n ) {\n this.dispatchSetEnabledEvent();\n }\n }\n\n private dispatchSetEnabledEvent() {\n const enabled = !(this.disabled || this.softDisabled);\n\n if (this.lastFiredEnabledState === enabled) return;\n\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"container\"]',\n ) as HTMLSlotElement;\n if (slot) {\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n this.lastFiredEnabledState = enabled;\n }\n\n protected override render() {\n const classes = button({\n color: this.color,\n size: this.size,\n square: this.square,\n // Emulate `:disabled` when soft-disabled\n disabled: this.softDisabled,\n classes: {\n 'btn-hide-outline': this.hideOutline,\n },\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"btn\"\n class=${classes}\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n aria-label=${ariaLabel || nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </a>`;\n }\n\n return html`<button\n part=\"btn\"\n class=${classes}\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n @change=${this.handleChange}>\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </button>`;\n }\n\n private handleContainerSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n const enabled = !(this.disabled || this.softDisabled);\n\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n\n private handleChange(event: Event) {\n this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n redispatchEvent(this, event);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-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 {\n css,\n CSSResultOrNative,\n html,\n LitElement,\n nothing,\n PropertyValues,\n} from 'lit';\nimport {customElement, property, state} 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 {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.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\n\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-gb-button': Button;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n *\n * @slot - Used to display a label and optional icon.\n * @slot container - Used to set a custom background container for the button.\n * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart btn - The button's root element.\n * @cssprop --container-color\n * @cssprop --container-height\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-width\n * @cssprop --outline-color\n * @cssprop --icon-label-space\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --label-text-color\n * @cssprop --leading-space\n * @cssprop --state-layer-color\n * @cssprop --trailing-space\n */\n@customElement('md-gb-button')\nexport class Button 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 buttonStyles,\n css`\n :host {\n display: inline-flex;\n isolation: isolate;\n }\n .btn {\n flex: 1;\n position: relative;\n }\n .btn:has([name='container'].has-slotted) {\n background-color: transparent;\n }\n .btn.btn-hide-outline {\n --outline-color: transparent;\n --container-elevation: var(--md-sys-elevation-shadow-0);\n }\n slot[name='container'] {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n --color: var(--container-color);\n z-index: -1;\n transition: inherit;\n }\n slot[name='container']::slotted(*) {\n width: 100%;\n height: 100%;\n }\n `,\n ];\n\n @state() private hideOutline = false;\n\n /**\n * The color of the button.\n */\n @property()\n color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n /**\n * The size of the button.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * A string indicating the behavior of the button.\n *\n * - \"submit\" (default): A button that submits its associated form.\n * - \"reset\": A button that resets its associated form.\n * - \"button\": A normal button.\n * - \"toggle\": A toggle button using the `selected` property.\n * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n */\n @property({noAccessor: true})\n override get type(): string {\n return this.href ? 'link' : super.type;\n }\n override set type(type: string) {\n if (this.href && type !== 'link') {\n return;\n }\n super.type = type;\n }\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n *\n * Use this when a button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Whether or not the button is selected, when `type=\"toggle\"`.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n * If not specified, the browser will determine a filename.\n * This is only applicable when the button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n private lastFiredEnabledState?: boolean;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\n 'md-gb:set-show-outline',\n this.handleSetShowOutline,\n );\n }\n\n private readonly handleSetShowOutline = (event: Event) => {\n const customEvent = event as CustomEvent<{shown: boolean}>;\n this.hideOutline = !customEvent.detail.shown;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (\n changedProperties.has('disabled') ||\n changedProperties.has('softDisabled')\n ) {\n this.dispatchSetEnabledEvent();\n }\n }\n\n private dispatchSetEnabledEvent() {\n const enabled = !(this.disabled || this.softDisabled);\n\n if (this.lastFiredEnabledState === enabled) return;\n\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"container\"]',\n ) as HTMLSlotElement;\n if (slot) {\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n this.lastFiredEnabledState = enabled;\n }\n\n protected override render() {\n const classes = button({\n color: this.color,\n size: this.size,\n square: this.square,\n // Emulate `:disabled` when soft-disabled\n disabled: this.softDisabled,\n classes: {\n 'btn-hide-outline': this.hideOutline,\n },\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"btn\"\n class=${classes}\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n aria-label=${ariaLabel || nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </a>`;\n }\n\n return html`<button\n part=\"btn\"\n class=${classes}\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n @change=${this.handleChange}>\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </button>`;\n }\n\n private handleContainerSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n const enabled = !(this.disabled || this.softDisabled);\n\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n\n private handleChange(event: Event) {\n this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n redispatchEvent(this, event);\n }\n}\n"]}
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@mixin root {
|
|
7
|
+
// LINT.IfChange
|
|
7
8
|
--container-color: transparent;
|
|
8
9
|
--container-elevation: var(--md-sys-elevation-shadow-0);
|
|
9
10
|
--container-shape: var(--md-sys-shape-corner-md);
|
|
10
11
|
--outline-color: transparent;
|
|
11
12
|
--outline-width: 0;
|
|
12
13
|
--state-layer-color: var(--md-sys-color-on-surface);
|
|
14
|
+
// LINT.ThenChange(md-card.ts) keep in sync with `@cssprop` jsdoc tags
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
@mixin hover {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["card.scss","_card-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBAEI,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["card.scss","_card-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBAEI,MCLF,+BACA,wDACA,iDACA,6BACA,mBACA,oDDIE,wECCF,wDDGE,kBCCF,iEDEI,6CCEJ,yFDGE,oBCGF,+CACA,qDACA,qBDFI,gDCMJ,gDDFI,+CCMJ,mEDDE,oBCKF,6DACA,wDDHI,sFCOJ,wDDHI,+CCOJ,qEDFE,MACE,aACA,sBACA,kBACA,gBACA,wCACA,qCACA,sCACA,uDAGF,gBACE,gBACA,+BACA,YACA,aACA,kBACA,QACA","file":"card.css"}
|
|
@@ -8,12 +8,23 @@ import { type CardColor } from './card.js';
|
|
|
8
8
|
declare global {
|
|
9
9
|
interface HTMLElementTagNameMap {
|
|
10
10
|
/** A Material Design card component. */
|
|
11
|
-
'md-card': Card;
|
|
11
|
+
'md-gb-card': Card;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
|
|
15
15
|
/**
|
|
16
16
|
* A Material Design card.
|
|
17
|
+
*
|
|
18
|
+
* @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
|
|
19
|
+
* @slot container - Used to set a custom background container for the card.
|
|
20
|
+
* @csspart card - The card's root element.
|
|
21
|
+
* @csspart card-btn - The card's main action button, when interactive.
|
|
22
|
+
* @cssprop --container-color
|
|
23
|
+
* @cssprop --container-elevation
|
|
24
|
+
* @cssprop --container-shape
|
|
25
|
+
* @cssprop --outline-color
|
|
26
|
+
* @cssprop --outline-width
|
|
27
|
+
* @cssprop --state-layer-color
|
|
17
28
|
*/
|
|
18
29
|
export declare class Card extends baseClass {
|
|
19
30
|
/** @nocollapse */
|
|
@@ -20,6 +20,17 @@ import { card } from './card.js';
|
|
|
20
20
|
const baseClass = mixinDelegatesAria(LitElement);
|
|
21
21
|
/**
|
|
22
22
|
* A Material Design card.
|
|
23
|
+
*
|
|
24
|
+
* @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
|
|
25
|
+
* @slot container - Used to set a custom background container for the card.
|
|
26
|
+
* @csspart card - The card's root element.
|
|
27
|
+
* @csspart card-btn - The card's main action button, when interactive.
|
|
28
|
+
* @cssprop --container-color
|
|
29
|
+
* @cssprop --container-elevation
|
|
30
|
+
* @cssprop --container-shape
|
|
31
|
+
* @cssprop --outline-color
|
|
32
|
+
* @cssprop --outline-width
|
|
33
|
+
* @cssprop --state-layer-color
|
|
23
34
|
*/
|
|
24
35
|
let Card = class Card extends baseClass {
|
|
25
36
|
constructor() {
|
|
@@ -156,7 +167,7 @@ __decorate([
|
|
|
156
167
|
property({ type: Boolean })
|
|
157
168
|
], Card.prototype, "interactive", void 0);
|
|
158
169
|
Card = __decorate([
|
|
159
|
-
customElement('md-card')
|
|
170
|
+
customElement('md-gb-card')
|
|
160
171
|
], Card);
|
|
161
172
|
export { Card };
|
|
162
173
|
//# sourceMappingURL=md-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAC3C,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,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD
|
|
1
|
+
{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.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 {\n css,\n CSSResultOrNative,\n html,\n LitElement,\n nothing,\n PropertyValues,\n} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design card component. */\n 'md-gb-card': Card;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n *\n * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.\n * @slot container - Used to set a custom background container for the card.\n * @csspart card - The card's root element.\n * @csspart card-btn - The card's main action button, when interactive.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n */\n@customElement('md-gb-card')\nexport class Card extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n cardStyles,\n css`\n :host {\n display: inline-flex;\n isolation: isolate;\n }\n .card {\n flex: 1;\n position: relative;\n }\n .card:has([name='container'].has-slotted) {\n background-color: transparent;\n }\n .card.card-hide-outline {\n --outline-color: transparent;\n --container-elevation: var(--md-sys-elevation-shadow-0);\n }\n slot[name='container'] {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n --color: var(--container-color);\n z-index: -1;\n transition: inherit;\n }\n slot[name='container']::slotted(*) {\n width: 100%;\n height: 100%;\n }\n `,\n ];\n\n @state() private hideOutline = false;\n\n private lastFiredEnabledState?: boolean;\n\n /** The color of the card. */\n @property() color: CardColor = 'outlined';\n\n /** Whether the card is disabled. */\n @property({type: Boolean}) disabled = false;\n\n /** Whether the card is interactive. */\n @property({type: Boolean}) interactive = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\n 'md-gb:set-show-outline',\n this.handleSetShowOutline,\n );\n }\n\n private readonly handleSetShowOutline = (event: Event) => {\n const customEvent = event as CustomEvent<{shown: boolean}>;\n this.hideOutline = !customEvent.detail.shown;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('disabled')) {\n this.dispatchSetEnabledEvent();\n }\n }\n\n private dispatchSetEnabledEvent() {\n const enabled = !this.disabled;\n\n if (this.lastFiredEnabledState === enabled) return;\n\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"container\"]',\n ) as HTMLSlotElement;\n if (slot) {\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n this.lastFiredEnabledState = enabled;\n }\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<div\n part=\"card\"\n class=\"${card({\n color: this.color,\n disabled: this.disabled,\n interactive: this.interactive,\n classes: {\n 'card-hide-outline': this.hideOutline,\n },\n })}\">\n ${this.interactive\n ? html`<button\n part=\"card-btn\"\n class=\"card-btn ripple focus-ring-target\"\n ${ripple()}\n ?disabled=\"${this.disabled}\"\n aria-label=\"${ariaLabel || nothing}\"></button>`\n : nothing}\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </div>`;\n }\n\n private handleContainerSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n const enabled = !this.disabled;\n\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n}\n"]}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@mixin root {
|
|
7
|
+
// LINT.IfChange
|
|
7
8
|
--container-color: transparent;
|
|
8
9
|
--container-shape: 2px;
|
|
9
10
|
--container-size: 18px;
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
--state-layer-color: var(--md-sys-color-on-surface);
|
|
15
16
|
--state-layer-shape: 50%;
|
|
16
17
|
--state-layer-size: 40px;
|
|
18
|
+
// LINT.ThenChange(md-checkbox.ts) keep in sync with `@cssprop` jsdoc tags
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
@mixin hovered {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,qDAKA,oDACA,gDDFE,mCCMF,gDDFE,8BCMF,iDACA,gDDHE,8DCOF,mBACA,+CACA,6CDNI,mFCUJ,iDDNI,qFCUJ,oDDLE,gCCSF,+CACA,2CDPI,uFCWJ,6CACA,2CDPE,kCCWF,sEDRI,yFCYJ,wEACA,0CDRE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}
|
|
@@ -10,12 +10,26 @@ import { CheckboxValidator } from '../../../behaviors/validators/checkbox-valida
|
|
|
10
10
|
declare global {
|
|
11
11
|
interface HTMLElementTagNameMap {
|
|
12
12
|
/** A Material Design checkbox component. */
|
|
13
|
-
'md-checkbox': Checkbox;
|
|
13
|
+
'md-gb-checkbox': Checkbox;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>>;
|
|
17
17
|
/**
|
|
18
18
|
* A Material Design checkbox component.
|
|
19
|
+
*
|
|
20
|
+
* @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
|
|
21
|
+
* @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
|
|
22
|
+
* @csspart checkbox - The checkbox's root element.
|
|
23
|
+
* @cssprop --container-color
|
|
24
|
+
* @cssprop --container-shape
|
|
25
|
+
* @cssprop --container-size
|
|
26
|
+
* @cssprop --icon-color
|
|
27
|
+
* @cssprop --icon-size
|
|
28
|
+
* @cssprop --outline-color
|
|
29
|
+
* @cssprop --outline-width
|
|
30
|
+
* @cssprop --state-layer-color
|
|
31
|
+
* @cssprop --state-layer-shape
|
|
32
|
+
* @cssprop --state-layer-size
|
|
19
33
|
*/
|
|
20
34
|
export declare class Checkbox extends baseClass {
|
|
21
35
|
/** @nocollapse */
|
|
@@ -23,6 +23,20 @@ import { checkbox } from './checkbox.js';
|
|
|
23
23
|
const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
24
24
|
/**
|
|
25
25
|
* A Material Design checkbox component.
|
|
26
|
+
*
|
|
27
|
+
* @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
|
|
28
|
+
* @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
|
|
29
|
+
* @csspart checkbox - The checkbox's root element.
|
|
30
|
+
* @cssprop --container-color
|
|
31
|
+
* @cssprop --container-shape
|
|
32
|
+
* @cssprop --container-size
|
|
33
|
+
* @cssprop --icon-color
|
|
34
|
+
* @cssprop --icon-size
|
|
35
|
+
* @cssprop --outline-color
|
|
36
|
+
* @cssprop --outline-width
|
|
37
|
+
* @cssprop --state-layer-color
|
|
38
|
+
* @cssprop --state-layer-shape
|
|
39
|
+
* @cssprop --state-layer-size
|
|
26
40
|
*/
|
|
27
41
|
let Checkbox = class Checkbox extends baseClass {
|
|
28
42
|
constructor() {
|
|
@@ -168,7 +182,7 @@ __decorate([
|
|
|
168
182
|
query('input', true)
|
|
169
183
|
], Checkbox.prototype, "input", void 0);
|
|
170
184
|
Checkbox = __decorate([
|
|
171
|
-
customElement('md-checkbox')
|
|
185
|
+
customElement('md-gb-checkbox')
|
|
172
186
|
], Checkbox);
|
|
173
187
|
export { Checkbox };
|
|
174
188
|
//# sourceMappingURL=md-checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.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 {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';\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 checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design checkbox component. */\n 'md-checkbox': Checkbox;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A Material Design checkbox component.\n */\n@customElement('md-checkbox')\nexport class Checkbox 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 checkboxStyles,\n css`\n :host {\n display: inline-flex;\n }\n .checkbox {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the checkbox is invalid.\n */\n @property({type: Boolean}) error = false;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * The default checked state of the checkbox.\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 checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox 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 of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @query('input', true)\n private readonly input!: HTMLInputElement | null;\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 // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n return html`\n <input\n part=\"checkbox\"\n class=\"${checkbox({invalid: this.error})}\"\n type=\"checkbox\"\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || this.error || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n `;\n }\n\n private handleInput(event: Event) {\n this.dirtyCheckedness = true;\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n // <input> '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 === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update checkboxes 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 CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.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 {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';\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 checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design checkbox component. */\n 'md-gb-checkbox': Checkbox;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A Material Design checkbox component.\n *\n * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\n@customElement('md-gb-checkbox')\nexport class Checkbox 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 checkboxStyles,\n css`\n :host {\n display: inline-flex;\n }\n .checkbox {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the checkbox is invalid.\n */\n @property({type: Boolean}) error = false;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * The default checked state of the checkbox.\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 checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox 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 of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @query('input', true)\n private readonly input!: HTMLInputElement | null;\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 // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n return html`\n <input\n part=\"checkbox\"\n class=\"${checkbox({invalid: this.error})}\"\n type=\"checkbox\"\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || this.error || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n `;\n }\n\n private handleInput(event: Event) {\n this.dirtyCheckedness = true;\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n // <input> '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 === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update checkboxes 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 CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCLF,6CACA,iBDOI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}
|
|
@@ -7,11 +7,15 @@ import { CSSResultOrNative, LitElement } from 'lit';
|
|
|
7
7
|
declare global {
|
|
8
8
|
interface HTMLElementTagNameMap {
|
|
9
9
|
/** A Material Design divider component. */
|
|
10
|
-
'md-divider': Divider;
|
|
10
|
+
'md-gb-divider': Divider;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
/**
|
|
14
14
|
* A Material Design divider component.
|
|
15
|
+
*
|
|
16
|
+
* @csspart divider - The divider element.
|
|
17
|
+
* @cssprop --color
|
|
18
|
+
* @cssprop --thickness
|
|
15
19
|
*/
|
|
16
20
|
export declare class Divider extends LitElement {
|
|
17
21
|
static styles: CSSResultOrNative[];
|
|
@@ -11,6 +11,10 @@ import dividerStyles from './divider.css' with { type: 'css' }; // github-only
|
|
|
11
11
|
import { divider } from './divider.js';
|
|
12
12
|
/**
|
|
13
13
|
* A Material Design divider component.
|
|
14
|
+
*
|
|
15
|
+
* @csspart divider - The divider element.
|
|
16
|
+
* @cssprop --color
|
|
17
|
+
* @cssprop --thickness
|
|
14
18
|
*/
|
|
15
19
|
let Divider = class Divider extends LitElement {
|
|
16
20
|
constructor() {
|
|
@@ -45,7 +49,7 @@ __decorate([
|
|
|
45
49
|
property({ type: Boolean, reflect: true })
|
|
46
50
|
], Divider.prototype, "vertical", void 0);
|
|
47
51
|
Divider = __decorate([
|
|
48
|
-
customElement('md-divider')
|
|
52
|
+
customElement('md-gb-divider')
|
|
49
53
|
], Divider);
|
|
50
54
|
export { Divider };
|
|
51
55
|
//# sourceMappingURL=md-divider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.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;AAE1D,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC
|
|
1
|
+
{"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.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;AAE1D,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC;;;;;;GAMG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAmBL;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,cAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AAtBhD,OAAO;IADnB,aAAa,CAAC,eAAe,CAAC;GAClB,OAAO,CA2BnB","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';\n\nimport dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design divider component. */\n 'md-gb-divider': Divider;\n }\n}\n\n/**\n * A Material Design divider component.\n *\n * @csspart divider - The divider element.\n * @cssprop --color\n * @cssprop --thickness\n */\n@customElement('md-gb-divider')\nexport class Divider extends LitElement {\n static override styles: CSSResultOrNative[] = [\n dividerStyles,\n css`\n :host {\n display: flex;\n }\n .divider {\n flex: 1;\n }\n :host(:not([vertical])) {\n width: 100%;\n }\n :host([vertical]) {\n min-height: 100%;\n }\n `,\n ];\n\n /**\n * Whether or not the divider is vertical.\n */\n @property({type: Boolean, reflect: true}) vertical = false;\n\n protected override render() {\n return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n }\n}\n"]}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@mixin root {
|
|
7
|
+
// LINT.IfChange
|
|
7
8
|
--container-color: transparent;
|
|
8
9
|
--container-elevation: var(--md-sys-elevation-shadow-3);
|
|
9
10
|
--container-height: 56px;
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
|
|
17
18
|
--leading-space: 16px;
|
|
18
19
|
--trailing-space: 16px;
|
|
20
|
+
// LINT.ThenChange(md-fab.ts) keep in sync with `@cssprop` jsdoc tags
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
@mixin hovered {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCNF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,iCACA,iEACA,sBACA,uBDDE,uBCMF,wDDFE,yBCMF,wDDFE,2BCMF,yDACA,uDACA,6DDJE,iBCQF,+CACA,6CACA,mDDNE,6BCUF,2DACA,yDACA,+DDRE,mBCYF,iDACA,+CACA,qDDVE,4BCcF,0DACA,wDACA,8DDZE,kBCgBF,gDACA,8CACA,oDDdE,YCkBF,yBACA,2DACA,kBACA,+CACA,iEACA,sBACA,uBDpBE,YCwBF,yBACA,iDACA,yBACA,kBACA,kDACA,oEACA,sBACA,uBD3BE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,0DACA,8DACA,mCACA","file":"fab.css"}
|
|
@@ -8,11 +8,26 @@ import { type FabColor, type FabSize } from './fab.js';
|
|
|
8
8
|
declare global {
|
|
9
9
|
interface HTMLElementTagNameMap {
|
|
10
10
|
/** A Material Design fab component. */
|
|
11
|
-
'md-fab': Fab;
|
|
11
|
+
'md-gb-fab': Fab;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* A Material Design fab component.
|
|
16
|
+
*
|
|
17
|
+
* @slot - Used to display an icon and optional label.
|
|
18
|
+
* @csspart fab - The FAB's root element.
|
|
19
|
+
* @cssprop --container-color
|
|
20
|
+
* @cssprop --container-elevation
|
|
21
|
+
* @cssprop --container-height
|
|
22
|
+
* @cssprop --container-shape
|
|
23
|
+
* @cssprop --icon-color
|
|
24
|
+
* @cssprop --icon-label-space
|
|
25
|
+
* @cssprop --icon-size
|
|
26
|
+
* @cssprop --label-text
|
|
27
|
+
* @cssprop --label-text-color
|
|
28
|
+
* @cssprop --label-text-tracking
|
|
29
|
+
* @cssprop --leading-space
|
|
30
|
+
* @cssprop --trailing-space
|
|
16
31
|
*/
|
|
17
32
|
export declare class Fab extends LitElement {
|
|
18
33
|
static styles: CSSResultOrNative[];
|
|
@@ -15,6 +15,21 @@ import fabStyles from './fab.css' with { type: 'css' }; // github-only
|
|
|
15
15
|
import { fab } from './fab.js';
|
|
16
16
|
/**
|
|
17
17
|
* A Material Design fab component.
|
|
18
|
+
*
|
|
19
|
+
* @slot - Used to display an icon and optional label.
|
|
20
|
+
* @csspart fab - The FAB's root element.
|
|
21
|
+
* @cssprop --container-color
|
|
22
|
+
* @cssprop --container-elevation
|
|
23
|
+
* @cssprop --container-height
|
|
24
|
+
* @cssprop --container-shape
|
|
25
|
+
* @cssprop --icon-color
|
|
26
|
+
* @cssprop --icon-label-space
|
|
27
|
+
* @cssprop --icon-size
|
|
28
|
+
* @cssprop --label-text
|
|
29
|
+
* @cssprop --label-text-color
|
|
30
|
+
* @cssprop --label-text-tracking
|
|
31
|
+
* @cssprop --leading-space
|
|
32
|
+
* @cssprop --trailing-space
|
|
18
33
|
*/
|
|
19
34
|
let Fab = class Fab extends LitElement {
|
|
20
35
|
constructor() {
|
|
@@ -50,7 +65,7 @@ __decorate([
|
|
|
50
65
|
property()
|
|
51
66
|
], Fab.prototype, "size", void 0);
|
|
52
67
|
Fab = __decorate([
|
|
53
|
-
customElement('md-fab')
|
|
68
|
+
customElement('md-gb-fab')
|
|
54
69
|
], Fab);
|
|
55
70
|
export { Fab };
|
|
56
71
|
//# sourceMappingURL=md-fab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.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;AAE1D,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,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D
|
|
1
|
+
{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.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;AAE1D,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,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,WAAW,CAAC;GACd,GAAG,CAyBf","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';\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 fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design fab component. */\n 'md-gb-fab': Fab;\n }\n}\n\n/**\n * A Material Design fab component.\n *\n * @slot - Used to display an icon and optional label.\n * @csspart fab - The FAB's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\n@customElement('md-gb-fab')\nexport class Fab extends LitElement {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n fabStyles,\n css`\n :host {\n display: inline-flex;\n }\n .fab {\n flex: 1;\n }\n `,\n ];\n\n @property() color: FabColor = 'primary-container';\n @property() size: FabSize = 'default';\n\n protected override render() {\n return html`<button\n part=\"fab\"\n class=\"${fab({color: this.color, size: this.size})}\">\n <slot></slot>\n </button>`;\n }\n}\n"]}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@mixin root {
|
|
7
|
+
// LINT.IfChange
|
|
7
8
|
--container-color: transparent;
|
|
8
9
|
--container-height: auto;
|
|
9
10
|
--container-shape: calc(var(--container-height) / 2);
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
--outline-width: 1px;
|
|
14
15
|
--leading-space: 0;
|
|
15
16
|
--trailing-space: 0;
|
|
17
|
+
// LINT.ThenChange(md-icon-button.ts) keep in sync with `@cssprop` jsdoc tags
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
@mixin selected {
|