@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.70e259d.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 +7148 -7166
- package/labs/aria/query-associated.d.ts +23 -0
- package/labs/aria/query-associated.js +36 -0
- package/labs/aria/query-associated.js.map +1 -0
- package/labs/aria/tabs/md-aria-tab.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tab.js +8 -0
- package/labs/aria/tabs/md-aria-tab.js.map +1 -0
- package/labs/aria/tabs/md-aria-tablist.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tablist.js +8 -0
- package/labs/aria/tabs/md-aria-tablist.js.map +1 -0
- package/labs/aria/tabs/md-aria-tabpanel.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tabpanel.js +8 -0
- package/labs/aria/tabs/md-aria-tabpanel.js.map +1 -0
- package/labs/aria/tabs/tab.d.ts +33 -0
- package/labs/aria/tabs/tab.js +88 -0
- package/labs/aria/tabs/tab.js.map +1 -0
- package/labs/aria/tabs/tablist.d.ts +67 -0
- package/labs/aria/tabs/tablist.js +271 -0
- package/labs/aria/tabs/tablist.js.map +1 -0
- package/labs/aria/tabs/tabpanel.d.ts +26 -0
- package/labs/aria/tabs/tabpanel.js +53 -0
- package/labs/aria/tabs/tabpanel.js.map +1 -0
- package/labs/gb/components/appbar/_app-bar-tokens.scss +136 -0
- package/labs/gb/components/appbar/app-bar-element.d.ts +53 -0
- package/labs/gb/components/appbar/app-bar-element.js +144 -0
- package/labs/gb/components/appbar/app-bar-element.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.css +4 -0
- package/labs/gb/components/appbar/app-bar.css.map +1 -0
- package/labs/gb/components/appbar/app-bar.cssresult.d.ts +3 -0
- package/labs/gb/components/appbar/app-bar.cssresult.js +14 -0
- package/labs/gb/components/appbar/app-bar.cssresult.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.d.ts +71 -0
- package/labs/gb/components/appbar/app-bar.js +96 -0
- package/labs/gb/components/appbar/app-bar.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.scss +167 -0
- package/labs/gb/components/appbar/md-gb-app-bar.d.ts +12 -0
- package/labs/gb/components/appbar/md-gb-app-bar.js +8 -0
- package/labs/gb/components/appbar/md-gb-app-bar.js.map +1 -0
- package/labs/gb/components/badge/_badge-tokens.scss +18 -0
- package/labs/gb/components/badge/badge-element.d.ts +15 -0
- package/labs/gb/components/badge/badge-element.js +49 -0
- package/labs/gb/components/badge/badge-element.js.map +1 -0
- package/labs/gb/components/badge/badge.css +4 -0
- package/labs/gb/components/badge/badge.css.map +1 -0
- package/labs/gb/components/badge/badge.cssresult.d.ts +3 -0
- package/labs/gb/components/badge/badge.cssresult.js +14 -0
- package/labs/gb/components/badge/badge.cssresult.js.map +1 -0
- package/labs/gb/components/badge/badge.d.ts +32 -0
- package/labs/gb/components/badge/badge.js +35 -0
- package/labs/gb/components/badge/badge.js.map +1 -0
- package/labs/gb/components/badge/badge.scss +49 -0
- package/labs/gb/components/badge/md-gb-badge.d.ts +12 -0
- package/labs/gb/components/badge/md-gb-badge.js +8 -0
- package/labs/gb/components/badge/md-gb-badge.js.map +1 -0
- package/labs/gb/components/button/_button-tokens.scss +2 -0
- package/labs/gb/components/button/{md-button.d.ts → button-element.d.ts} +22 -7
- package/labs/gb/components/button/{md-button.js → button-element.js} +38 -20
- package/labs/gb/components/button/button-element.js.map +1 -0
- package/labs/gb/components/button/button.css.map +1 -1
- package/labs/gb/components/button/md-gb-button.d.ts +12 -0
- package/labs/gb/components/button/md-gb-button.js +8 -0
- package/labs/gb/components/button/md-gb-button.js.map +1 -0
- package/labs/gb/components/card/_card-tokens.scss +2 -0
- package/labs/gb/components/card/{md-card.d.ts → card-element.d.ts} +12 -7
- package/labs/gb/components/card/{md-card.js → card-element.js} +21 -14
- package/labs/gb/components/card/card-element.js.map +1 -0
- package/labs/gb/components/card/card.css.map +1 -1
- package/labs/gb/components/card/md-gb-card.d.ts +12 -0
- package/labs/gb/components/card/md-gb-card.js +8 -0
- package/labs/gb/components/card/md-gb-card.js.map +1 -0
- package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
- package/labs/gb/components/checkbox/{md-checkbox.d.ts → checkbox-element.d.ts} +15 -7
- package/labs/gb/components/checkbox/{md-checkbox.js → checkbox-element.js} +26 -16
- package/labs/gb/components/checkbox/checkbox-element.js.map +1 -0
- package/labs/gb/components/checkbox/checkbox.css.map +1 -1
- package/labs/gb/components/checkbox/md-gb-checkbox.d.ts +12 -0
- package/labs/gb/components/checkbox/md-gb-checkbox.js +8 -0
- package/labs/gb/components/checkbox/md-gb-checkbox.js.map +1 -0
- package/labs/gb/components/chip/_chip-tokens.scss +167 -0
- package/labs/gb/components/chip/chip-element.d.ts +73 -0
- package/labs/gb/components/chip/chip-element.js +233 -0
- package/labs/gb/components/chip/chip-element.js.map +1 -0
- package/labs/gb/components/chip/chip.css +4 -0
- package/labs/gb/components/chip/chip.css.map +1 -0
- package/labs/gb/components/chip/chip.cssresult.d.ts +3 -0
- package/labs/gb/components/chip/chip.cssresult.js +14 -0
- package/labs/gb/components/chip/chip.cssresult.js.map +1 -0
- package/labs/gb/components/chip/chip.d.ts +77 -0
- package/labs/gb/components/chip/chip.js +99 -0
- package/labs/gb/components/chip/chip.js.map +1 -0
- package/labs/gb/components/chip/chip.scss +97 -0
- package/labs/gb/components/chip/md-gb-chip.d.ts +13 -0
- package/labs/gb/components/chip/md-gb-chip.js +9 -0
- package/labs/gb/components/chip/md-gb-chip.js.map +1 -0
- package/labs/gb/components/divider/_divider-tokens.scss +2 -0
- package/labs/gb/components/divider/{md-divider.d.ts → divider-element.d.ts} +5 -7
- package/labs/gb/components/divider/{md-divider.js → divider-element.js} +10 -10
- package/labs/gb/components/divider/divider-element.js.map +1 -0
- package/labs/gb/components/divider/divider.css.map +1 -1
- package/labs/gb/components/divider/md-gb-divider.d.ts +12 -0
- package/labs/gb/components/divider/md-gb-divider.js +8 -0
- package/labs/gb/components/divider/md-gb-divider.js.map +1 -0
- package/labs/gb/components/fab/_fab-tokens.scss +2 -0
- package/labs/gb/components/fab/fab-element.d.ts +31 -0
- package/labs/gb/components/fab/{md-fab.js → fab-element.js} +22 -11
- package/labs/gb/components/fab/fab-element.js.map +1 -0
- package/labs/gb/components/fab/fab.css.map +1 -1
- package/labs/gb/components/fab/md-gb-fab.d.ts +12 -0
- package/labs/gb/components/fab/md-gb-fab.js +8 -0
- package/labs/gb/components/fab/md-gb-fab.js.map +1 -0
- package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
- package/labs/gb/components/iconbutton/{md-icon-button.d.ts → icon-button-element.d.ts} +15 -7
- package/labs/gb/components/iconbutton/{md-icon-button.js → icon-button-element.js} +30 -20
- package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -0
- package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
- package/labs/gb/components/iconbutton/md-gb-icon-button.d.ts +12 -0
- package/labs/gb/components/iconbutton/md-gb-icon-button.js +8 -0
- package/labs/gb/components/iconbutton/md-gb-icon-button.js.map +1 -0
- package/labs/gb/components/list/_list-tokens.scss +4 -0
- package/labs/gb/components/list/{md-list.d.ts → list-element.d.ts} +6 -7
- package/labs/gb/components/list/{md-list.js → list-element.js} +11 -10
- package/labs/gb/components/list/list-element.js.map +1 -0
- package/labs/gb/components/list/list-item-element.d.ts +77 -0
- package/labs/gb/components/list/{md-list-item.js → list-item-element.js} +48 -13
- package/labs/gb/components/list/list-item-element.js.map +1 -0
- package/labs/gb/components/list/list.css.map +1 -1
- package/labs/gb/components/list/md-gb-list-item.d.ts +12 -0
- package/labs/gb/components/list/md-gb-list-item.js +8 -0
- package/labs/gb/components/list/md-gb-list-item.js.map +1 -0
- package/labs/gb/components/list/md-gb-list.d.ts +12 -0
- package/labs/gb/components/list/md-gb-list.js +8 -0
- package/labs/gb/components/list/md-gb-list.js.map +1 -0
- package/labs/gb/components/menu/_menu-tokens.scss +4 -0
- package/labs/gb/components/menu/md-gb-menu-group.d.ts +12 -0
- package/labs/gb/components/menu/md-gb-menu-group.js +8 -0
- package/labs/gb/components/menu/md-gb-menu-group.js.map +1 -0
- package/labs/gb/components/menu/md-gb-menu-item.d.ts +12 -0
- package/labs/gb/components/menu/md-gb-menu-item.js +8 -0
- package/labs/gb/components/menu/md-gb-menu-item.js.map +1 -0
- package/labs/gb/components/menu/md-gb-menu.d.ts +12 -0
- package/labs/gb/components/menu/md-gb-menu.js +8 -0
- package/labs/gb/components/menu/md-gb-menu.js.map +1 -0
- package/labs/gb/components/menu/{md-menu.d.ts → menu-element.d.ts} +11 -7
- package/labs/gb/components/menu/{md-menu.js → menu-element.js} +16 -10
- package/labs/gb/components/menu/menu-element.js.map +1 -0
- package/labs/gb/components/menu/{md-menu-group.d.ts → menu-group-element.d.ts} +3 -6
- package/labs/gb/components/menu/{md-menu-group.js → menu-group-element.js} +11 -11
- package/labs/gb/components/menu/menu-group-element.js.map +1 -0
- package/labs/gb/components/menu/menu-item-element.d.ts +56 -0
- package/labs/gb/components/menu/{md-menu-item.js → menu-item-element.js} +41 -13
- package/labs/gb/components/menu/menu-item-element.js.map +1 -0
- 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-gb-radio.d.ts +12 -0
- package/labs/gb/components/radio/md-gb-radio.js +8 -0
- package/labs/gb/components/radio/md-gb-radio.js.map +1 -0
- package/labs/gb/components/radio/{md-radio.d.ts → radio-element.d.ts} +10 -7
- package/labs/gb/components/radio/{md-radio.js → radio-element.js} +19 -14
- package/labs/gb/components/radio/radio-element.js.map +1 -0
- 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-gb-split-button.d.ts +12 -0
- package/labs/gb/components/splitbutton/md-gb-split-button.js +8 -0
- package/labs/gb/components/splitbutton/md-gb-split-button.js.map +1 -0
- package/labs/gb/components/splitbutton/split-button-element.d.ts +33 -0
- package/labs/gb/components/splitbutton/{md-split-button.js → split-button-element.js} +21 -12
- package/labs/gb/components/splitbutton/split-button-element.js.map +1 -0
- 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-gb-switch.d.ts +12 -0
- package/labs/gb/components/switch/md-gb-switch.js +8 -0
- package/labs/gb/components/switch/md-gb-switch.js.map +1 -0
- package/labs/gb/components/switch/{md-switch.d.ts → switch-element.d.ts} +19 -7
- package/labs/gb/components/switch/{md-switch.js → switch-element.js} +28 -14
- package/labs/gb/components/switch/switch-element.js.map +1 -0
- package/labs/gb/components/switch/switch.css.map +1 -1
- package/labs/gb/styles/adopt-styles.js +6 -1
- package/labs/gb/styles/adopt-styles.js.map +1 -1
- package/labs/gb/styles/icon/{md-icon.d.ts → icon-element.d.ts} +1 -7
- package/labs/gb/styles/icon/{md-icon.js → icon-element.js} +8 -10
- package/labs/gb/styles/icon/icon-element.js.map +1 -0
- package/labs/gb/styles/icon/md-gb-icon.d.ts +12 -0
- package/labs/gb/styles/icon/md-gb-icon.js +8 -0
- package/labs/gb/styles/icon/md-gb-icon.js.map +1 -0
- package/package.json +3 -3
- package/labs/gb/components/button/md-button.js.map +0 -1
- package/labs/gb/components/card/md-card.js.map +0 -1
- package/labs/gb/components/checkbox/md-checkbox.js.map +0 -1
- package/labs/gb/components/divider/md-divider.js.map +0 -1
- package/labs/gb/components/fab/md-fab.d.ts +0 -22
- package/labs/gb/components/fab/md-fab.js.map +0 -1
- package/labs/gb/components/iconbutton/md-icon-button.js.map +0 -1
- package/labs/gb/components/list/md-list-item.d.ts +0 -44
- package/labs/gb/components/list/md-list-item.js.map +0 -1
- package/labs/gb/components/list/md-list.js.map +0 -1
- package/labs/gb/components/menu/md-menu-group.js.map +0 -1
- package/labs/gb/components/menu/md-menu-item.d.ts +0 -30
- package/labs/gb/components/menu/md-menu-item.js.map +0 -1
- package/labs/gb/components/menu/md-menu.js.map +0 -1
- package/labs/gb/components/radio/md-radio.js.map +0 -1
- package/labs/gb/components/splitbutton/md-split-button.d.ts +0 -26
- package/labs/gb/components/splitbutton/md-split-button.js.map +0 -1
- package/labs/gb/components/switch/md-switch.js.map +0 -1
- package/labs/gb/styles/icon/md-icon.js.map +0 -1
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { css, html, LitElement, nothing, } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
9
|
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
10
|
import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
|
|
11
11
|
import { mixinElementInternals } from '../../../behaviors/element-internals.js';
|
|
@@ -23,8 +23,29 @@ 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
|
+
export class ButtonElement extends baseClass {
|
|
28
49
|
constructor() {
|
|
29
50
|
super(...arguments);
|
|
30
51
|
this.hideOutline = false;
|
|
@@ -183,13 +204,13 @@ let Button = class Button extends baseClass {
|
|
|
183
204
|
this.selected = event.target.ariaPressed === 'true';
|
|
184
205
|
redispatchEvent(this, event);
|
|
185
206
|
}
|
|
186
|
-
}
|
|
207
|
+
}
|
|
187
208
|
/** @nocollapse */
|
|
188
|
-
|
|
209
|
+
ButtonElement.shadowRootOptions = {
|
|
189
210
|
mode: 'open',
|
|
190
211
|
delegatesFocus: true,
|
|
191
212
|
};
|
|
192
|
-
|
|
213
|
+
ButtonElement.styles = [
|
|
193
214
|
focusRingStyles,
|
|
194
215
|
rippleStyles,
|
|
195
216
|
buttonStyles,
|
|
@@ -207,6 +228,7 @@ Button.styles = [
|
|
|
207
228
|
}
|
|
208
229
|
.btn.btn-hide-outline {
|
|
209
230
|
--outline-color: transparent;
|
|
231
|
+
--container-elevation: var(--md-sys-elevation-shadow-0);
|
|
210
232
|
}
|
|
211
233
|
slot[name='container'] {
|
|
212
234
|
display: block;
|
|
@@ -226,36 +248,32 @@ Button.styles = [
|
|
|
226
248
|
];
|
|
227
249
|
__decorate([
|
|
228
250
|
state()
|
|
229
|
-
],
|
|
251
|
+
], ButtonElement.prototype, "hideOutline", void 0);
|
|
230
252
|
__decorate([
|
|
231
253
|
property()
|
|
232
|
-
],
|
|
254
|
+
], ButtonElement.prototype, "color", void 0);
|
|
233
255
|
__decorate([
|
|
234
256
|
property()
|
|
235
|
-
],
|
|
257
|
+
], ButtonElement.prototype, "size", void 0);
|
|
236
258
|
__decorate([
|
|
237
259
|
property({ type: Boolean })
|
|
238
|
-
],
|
|
260
|
+
], ButtonElement.prototype, "square", void 0);
|
|
239
261
|
__decorate([
|
|
240
262
|
property({ noAccessor: true })
|
|
241
|
-
],
|
|
263
|
+
], ButtonElement.prototype, "type", null);
|
|
242
264
|
__decorate([
|
|
243
265
|
property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
|
|
244
|
-
],
|
|
266
|
+
], ButtonElement.prototype, "softDisabled", void 0);
|
|
245
267
|
__decorate([
|
|
246
268
|
property({ type: Boolean })
|
|
247
|
-
],
|
|
269
|
+
], ButtonElement.prototype, "selected", void 0);
|
|
248
270
|
__decorate([
|
|
249
271
|
property()
|
|
250
|
-
],
|
|
272
|
+
], ButtonElement.prototype, "href", void 0);
|
|
251
273
|
__decorate([
|
|
252
274
|
property()
|
|
253
|
-
],
|
|
275
|
+
], ButtonElement.prototype, "download", void 0);
|
|
254
276
|
__decorate([
|
|
255
277
|
property()
|
|
256
|
-
],
|
|
257
|
-
|
|
258
|
-
customElement('md-button')
|
|
259
|
-
], Button);
|
|
260
|
-
export { Button };
|
|
261
|
-
//# sourceMappingURL=md-button.js.map
|
|
278
|
+
], ButtonElement.prototype, "target", void 0);
|
|
279
|
+
//# sourceMappingURL=button-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-element.js","sourceRoot":"","sources":["button-element.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 {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\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 */\nexport class ButtonElement 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 +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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { ButtonElement } from './button-element.js';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
/** A Material Design button. */
|
|
10
|
+
'md-gb-button': ButtonElement;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"md-gb-button.js","sourceRoot":"","sources":["md-gb-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AASlD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ButtonElement} from './button-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-gb-button': ButtonElement;\n }\n}\n\ncustomElements.define('md-gb-button', ButtonElement);\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 {
|
|
@@ -5,17 +5,22 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
|
|
7
7
|
import { type CardColor } from './card.js';
|
|
8
|
-
declare global {
|
|
9
|
-
interface HTMLElementTagNameMap {
|
|
10
|
-
/** A Material Design card component. */
|
|
11
|
-
'md-card': Card;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
8
|
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
|
|
15
9
|
/**
|
|
16
10
|
* A Material Design card.
|
|
11
|
+
*
|
|
12
|
+
* @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
|
|
13
|
+
* @slot container - Used to set a custom background container for the card.
|
|
14
|
+
* @csspart card - The card's root element.
|
|
15
|
+
* @csspart card-btn - The card's main action button, when interactive.
|
|
16
|
+
* @cssprop --container-color
|
|
17
|
+
* @cssprop --container-elevation
|
|
18
|
+
* @cssprop --container-shape
|
|
19
|
+
* @cssprop --outline-color
|
|
20
|
+
* @cssprop --outline-width
|
|
21
|
+
* @cssprop --state-layer-color
|
|
17
22
|
*/
|
|
18
|
-
export declare class
|
|
23
|
+
export declare class CardElement extends baseClass {
|
|
19
24
|
/** @nocollapse */
|
|
20
25
|
static shadowRootOptions: ShadowRootInit;
|
|
21
26
|
static styles: CSSResultOrNative[];
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { css, html, LitElement, nothing, } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
9
|
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
10
|
import { ripple } from '../ripple/ripple.js';
|
|
11
11
|
import { hasSlotted } from '../shared/has-slotted.js';
|
|
@@ -20,8 +20,19 @@ 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
|
+
export class CardElement extends baseClass {
|
|
25
36
|
constructor() {
|
|
26
37
|
super(...arguments);
|
|
27
38
|
this.hideOutline = false;
|
|
@@ -101,13 +112,13 @@ let Card = class Card extends baseClass {
|
|
|
101
112
|
}));
|
|
102
113
|
}
|
|
103
114
|
}
|
|
104
|
-
}
|
|
115
|
+
}
|
|
105
116
|
/** @nocollapse */
|
|
106
|
-
|
|
117
|
+
CardElement.shadowRootOptions = {
|
|
107
118
|
mode: 'open',
|
|
108
119
|
delegatesFocus: true,
|
|
109
120
|
};
|
|
110
|
-
|
|
121
|
+
CardElement.styles = [
|
|
111
122
|
focusRingStyles,
|
|
112
123
|
rippleStyles,
|
|
113
124
|
cardStyles,
|
|
@@ -145,18 +156,14 @@ Card.styles = [
|
|
|
145
156
|
];
|
|
146
157
|
__decorate([
|
|
147
158
|
state()
|
|
148
|
-
],
|
|
159
|
+
], CardElement.prototype, "hideOutline", void 0);
|
|
149
160
|
__decorate([
|
|
150
161
|
property()
|
|
151
|
-
],
|
|
162
|
+
], CardElement.prototype, "color", void 0);
|
|
152
163
|
__decorate([
|
|
153
164
|
property({ type: Boolean })
|
|
154
|
-
],
|
|
165
|
+
], CardElement.prototype, "disabled", void 0);
|
|
155
166
|
__decorate([
|
|
156
167
|
property({ type: Boolean })
|
|
157
|
-
],
|
|
158
|
-
|
|
159
|
-
customElement('md-card')
|
|
160
|
-
], Card);
|
|
161
|
-
export { Card };
|
|
162
|
-
//# sourceMappingURL=md-card.js.map
|
|
168
|
+
], CardElement.prototype, "interactive", void 0);
|
|
169
|
+
//# sourceMappingURL=card-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-element.js","sourceRoot":"","sources":["card-element.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 {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\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 */\nexport class CardElement 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"]}
|
|
@@ -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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { CardElement } from './card-element.js';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
/** A Material Design component. */
|
|
10
|
+
'md-gb-card': CardElement;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"md-gb-card.js","sourceRoot":"","sources":["md-gb-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAS9C,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CardElement} from './card-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-card': CardElement;\n }\n}\n\ncustomElements.define('md-gb-card', CardElement);\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 {
|
|
@@ -7,17 +7,25 @@ import { CSSResultOrNative, LitElement } from 'lit';
|
|
|
7
7
|
import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
|
|
8
8
|
import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
|
|
9
9
|
import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
|
|
10
|
-
declare global {
|
|
11
|
-
interface HTMLElementTagNameMap {
|
|
12
|
-
/** A Material Design checkbox component. */
|
|
13
|
-
'md-checkbox': Checkbox;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
10
|
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
11
|
/**
|
|
18
12
|
* A Material Design checkbox component.
|
|
13
|
+
*
|
|
14
|
+
* @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
|
|
15
|
+
* @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
|
|
16
|
+
* @csspart checkbox - The checkbox's root element.
|
|
17
|
+
* @cssprop --container-color
|
|
18
|
+
* @cssprop --container-shape
|
|
19
|
+
* @cssprop --container-size
|
|
20
|
+
* @cssprop --icon-color
|
|
21
|
+
* @cssprop --icon-size
|
|
22
|
+
* @cssprop --outline-color
|
|
23
|
+
* @cssprop --outline-width
|
|
24
|
+
* @cssprop --state-layer-color
|
|
25
|
+
* @cssprop --state-layer-shape
|
|
26
|
+
* @cssprop --state-layer-size
|
|
19
27
|
*/
|
|
20
|
-
export declare class
|
|
28
|
+
export declare class CheckboxElement extends baseClass {
|
|
21
29
|
/** @nocollapse */
|
|
22
30
|
static shadowRootOptions: ShadowRootInit;
|
|
23
31
|
static styles: CSSResultOrNative[];
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { css, html, LitElement, nothing } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, query } from 'lit/decorators.js';
|
|
9
9
|
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
10
|
import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
|
|
11
11
|
import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
|
|
@@ -23,8 +23,22 @@ 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
|
+
export class CheckboxElement extends baseClass {
|
|
28
42
|
constructor() {
|
|
29
43
|
super(...arguments);
|
|
30
44
|
/**
|
|
@@ -130,13 +144,13 @@ let Checkbox = class Checkbox extends baseClass {
|
|
|
130
144
|
[getValidityAnchor]() {
|
|
131
145
|
return this.input;
|
|
132
146
|
}
|
|
133
|
-
}
|
|
147
|
+
}
|
|
134
148
|
/** @nocollapse */
|
|
135
|
-
|
|
149
|
+
CheckboxElement.shadowRootOptions = {
|
|
136
150
|
mode: 'open',
|
|
137
151
|
delegatesFocus: true,
|
|
138
152
|
};
|
|
139
|
-
|
|
153
|
+
CheckboxElement.styles = [
|
|
140
154
|
focusRingStyles,
|
|
141
155
|
rippleStyles,
|
|
142
156
|
checkboxStyles,
|
|
@@ -151,24 +165,20 @@ Checkbox.styles = [
|
|
|
151
165
|
];
|
|
152
166
|
__decorate([
|
|
153
167
|
property({ type: Boolean })
|
|
154
|
-
],
|
|
168
|
+
], CheckboxElement.prototype, "error", void 0);
|
|
155
169
|
__decorate([
|
|
156
170
|
property({ type: Boolean })
|
|
157
|
-
],
|
|
171
|
+
], CheckboxElement.prototype, "checked", void 0);
|
|
158
172
|
__decorate([
|
|
159
173
|
property({ type: Boolean })
|
|
160
|
-
],
|
|
174
|
+
], CheckboxElement.prototype, "indeterminate", void 0);
|
|
161
175
|
__decorate([
|
|
162
176
|
property({ type: Boolean })
|
|
163
|
-
],
|
|
177
|
+
], CheckboxElement.prototype, "required", void 0);
|
|
164
178
|
__decorate([
|
|
165
179
|
property()
|
|
166
|
-
],
|
|
180
|
+
], CheckboxElement.prototype, "value", void 0);
|
|
167
181
|
__decorate([
|
|
168
182
|
query('input', true)
|
|
169
|
-
],
|
|
170
|
-
|
|
171
|
-
customElement('md-checkbox')
|
|
172
|
-
], Checkbox);
|
|
173
|
-
export { Checkbox };
|
|
174
|
-
//# sourceMappingURL=md-checkbox.js.map
|
|
183
|
+
], CheckboxElement.prototype, "input", void 0);
|
|
184
|
+
//# sourceMappingURL=checkbox-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-element.js","sourceRoot":"","sources":["checkbox-element.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 {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\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 */\nexport class CheckboxElement 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":["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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { CheckboxElement } from './checkbox-element.js';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
/** A Material Design component. */
|
|
10
|
+
'md-gb-checkbox': CheckboxElement;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"md-gb-checkbox.js","sourceRoot":"","sources":["md-gb-checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AAStD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CheckboxElement} from './checkbox-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-checkbox': CheckboxElement;\n }\n}\n\ncustomElements.define('md-gb-checkbox', CheckboxElement);\n"]}
|