@material/web 2.4.2-nightly.fd17013.0 → 2.4.2-nightly.fd6fe2a.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 +47238 -0
- package/labs/gb/components/button/md-button.d.ts +9 -1
- package/labs/gb/components/button/md-button.js +83 -2
- package/labs/gb/components/button/md-button.js.map +1 -1
- package/labs/gb/components/card/md-card.d.ts +9 -1
- package/labs/gb/components/card/md-card.js +79 -2
- package/labs/gb/components/card/md-card.js.map +1 -1
- package/labs/gb/components/list/md-list-item.d.ts +1 -1
- package/labs/gb/components/list/md-list-item.js +7 -7
- package/labs/gb/components/list/md-list-item.js.map +1 -1
- package/labs/gb/components/splitbutton/split-button.d.ts +1 -1
- package/labs/gb/components/splitbutton/split-button.js +1 -1
- package/labs/gb/components/splitbutton/split-button.js.map +1 -1
- package/labs/gb/styles/adopt-styles.js +1 -6
- package/labs/gb/styles/adopt-styles.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +4 -1
- package/list/internal/listitem/list-item.js +4 -1
- package/list/internal/listitem/list-item.js.map +1 -1
- package/menu/internal/submenu/sub-menu.d.ts +5 -1
- package/menu/internal/submenu/sub-menu.js +5 -1
- package/menu/internal/submenu/sub-menu.js.map +1 -1
- package/package.json +21 -2
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { CSSResultOrNative, LitElement } from 'lit';
|
|
6
|
+
import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
|
|
7
7
|
declare global {
|
|
8
8
|
interface HTMLElementTagNameMap {
|
|
9
9
|
/** A Material Design button. */
|
|
@@ -18,6 +18,7 @@ export declare class Button extends baseClass {
|
|
|
18
18
|
/** @nocollapse */
|
|
19
19
|
static shadowRootOptions: ShadowRootInit;
|
|
20
20
|
static styles: CSSResultOrNative[];
|
|
21
|
+
private hideOutline;
|
|
21
22
|
/**
|
|
22
23
|
* The color of the button.
|
|
23
24
|
*/
|
|
@@ -69,7 +70,14 @@ export declare class Button extends baseClass {
|
|
|
69
70
|
* include `_blank` to open in a new tab.
|
|
70
71
|
*/
|
|
71
72
|
target: '_blank' | '_parent' | '_self' | '_top' | '';
|
|
73
|
+
private lastFiredEnabledState?;
|
|
74
|
+
connectedCallback(): void;
|
|
75
|
+
disconnectedCallback(): void;
|
|
76
|
+
private readonly handleSetShowOutline;
|
|
77
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
78
|
+
private dispatchSetEnabledEvent;
|
|
72
79
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
80
|
+
private handleContainerSlotChange;
|
|
73
81
|
private handleChange;
|
|
74
82
|
}
|
|
75
83
|
export {};
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
8
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
8
|
+
import { customElement, 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';
|
|
@@ -15,6 +15,7 @@ import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // g
|
|
|
15
15
|
// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
16
16
|
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
17
17
|
// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
|
|
18
|
+
import { hasSlotted } from '../shared/has-slotted.js';
|
|
18
19
|
import buttonStyles from './button.css' with { type: 'css' }; // github-only
|
|
19
20
|
// import buttonStyles from './button.cssresult.js'; // google3-only
|
|
20
21
|
import { button } from './button.js';
|
|
@@ -26,6 +27,7 @@ const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixi
|
|
|
26
27
|
let Button = class Button extends baseClass {
|
|
27
28
|
constructor() {
|
|
28
29
|
super(...arguments);
|
|
30
|
+
this.hideOutline = false;
|
|
29
31
|
/**
|
|
30
32
|
* The color of the button.
|
|
31
33
|
*/
|
|
@@ -66,6 +68,10 @@ let Button = class Button extends baseClass {
|
|
|
66
68
|
* include `_blank` to open in a new tab.
|
|
67
69
|
*/
|
|
68
70
|
this.target = '';
|
|
71
|
+
this.handleSetShowOutline = (event) => {
|
|
72
|
+
const customEvent = event;
|
|
73
|
+
this.hideOutline = !customEvent.detail.shown;
|
|
74
|
+
};
|
|
69
75
|
}
|
|
70
76
|
/**
|
|
71
77
|
* A string indicating the behavior of the button.
|
|
@@ -85,6 +91,35 @@ let Button = class Button extends baseClass {
|
|
|
85
91
|
}
|
|
86
92
|
super.type = type;
|
|
87
93
|
}
|
|
94
|
+
connectedCallback() {
|
|
95
|
+
super.connectedCallback();
|
|
96
|
+
this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
|
|
97
|
+
}
|
|
98
|
+
disconnectedCallback() {
|
|
99
|
+
super.disconnectedCallback();
|
|
100
|
+
this.removeEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
|
|
101
|
+
}
|
|
102
|
+
updated(changedProperties) {
|
|
103
|
+
super.updated(changedProperties);
|
|
104
|
+
if (changedProperties.has('disabled') ||
|
|
105
|
+
changedProperties.has('softDisabled')) {
|
|
106
|
+
this.dispatchSetEnabledEvent();
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
dispatchSetEnabledEvent() {
|
|
110
|
+
const enabled = !(this.disabled || this.softDisabled);
|
|
111
|
+
if (this.lastFiredEnabledState === enabled)
|
|
112
|
+
return;
|
|
113
|
+
const slot = this.shadowRoot?.querySelector('slot[name="container"]');
|
|
114
|
+
if (slot) {
|
|
115
|
+
for (const element of slot.assignedElements({ flatten: true })) {
|
|
116
|
+
element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
|
|
117
|
+
detail: { enabled },
|
|
118
|
+
}));
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
this.lastFiredEnabledState = enabled;
|
|
122
|
+
}
|
|
88
123
|
render() {
|
|
89
124
|
const classes = button({
|
|
90
125
|
color: this.color,
|
|
@@ -92,6 +127,9 @@ let Button = class Button extends baseClass {
|
|
|
92
127
|
square: this.square,
|
|
93
128
|
// Emulate `:disabled` when soft-disabled
|
|
94
129
|
disabled: this.softDisabled,
|
|
130
|
+
classes: {
|
|
131
|
+
'btn-hide-outline': this.hideOutline,
|
|
132
|
+
},
|
|
95
133
|
});
|
|
96
134
|
// Needed for closure conformance
|
|
97
135
|
const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
|
|
@@ -108,6 +146,10 @@ let Button = class Button extends baseClass {
|
|
|
108
146
|
aria-disabled=${this.disabled || this.softDisabled || nothing}
|
|
109
147
|
tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
|
|
110
148
|
<slot></slot>
|
|
149
|
+
<slot
|
|
150
|
+
name="container"
|
|
151
|
+
${hasSlotted()}
|
|
152
|
+
@slotchange=${this.handleContainerSlotChange}></slot>
|
|
111
153
|
</a>`;
|
|
112
154
|
}
|
|
113
155
|
return html `<button
|
|
@@ -121,8 +163,22 @@ let Button = class Button extends baseClass {
|
|
|
121
163
|
aria-expanded=${ariaExpanded || nothing}
|
|
122
164
|
@change=${this.handleChange}>
|
|
123
165
|
<slot></slot>
|
|
166
|
+
<slot
|
|
167
|
+
name="container"
|
|
168
|
+
${hasSlotted()}
|
|
169
|
+
@slotchange=${this.handleContainerSlotChange}></slot>
|
|
124
170
|
</button>`;
|
|
125
171
|
}
|
|
172
|
+
handleContainerSlotChange(event) {
|
|
173
|
+
const slot = event.target;
|
|
174
|
+
const enabled = !(this.disabled || this.softDisabled);
|
|
175
|
+
for (const element of slot.assignedElements({ flatten: true })) {
|
|
176
|
+
element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));
|
|
177
|
+
element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
|
|
178
|
+
detail: { enabled },
|
|
179
|
+
}));
|
|
180
|
+
}
|
|
181
|
+
}
|
|
126
182
|
handleChange(event) {
|
|
127
183
|
this.selected = event.target.ariaPressed === 'true';
|
|
128
184
|
redispatchEvent(this, event);
|
|
@@ -140,12 +196,37 @@ Button.styles = [
|
|
|
140
196
|
css `
|
|
141
197
|
:host {
|
|
142
198
|
display: inline-flex;
|
|
199
|
+
isolation: isolate;
|
|
143
200
|
}
|
|
144
201
|
.btn {
|
|
145
202
|
flex: 1;
|
|
203
|
+
position: relative;
|
|
204
|
+
}
|
|
205
|
+
.btn:has([name='container'].has-slotted) {
|
|
206
|
+
background-color: transparent;
|
|
207
|
+
}
|
|
208
|
+
.btn.btn-hide-outline {
|
|
209
|
+
--outline-color: transparent;
|
|
210
|
+
}
|
|
211
|
+
slot[name='container'] {
|
|
212
|
+
display: block;
|
|
213
|
+
position: absolute;
|
|
214
|
+
inset: 0;
|
|
215
|
+
border-radius: inherit;
|
|
216
|
+
pointer-events: none;
|
|
217
|
+
--color: var(--container-color);
|
|
218
|
+
z-index: -1;
|
|
219
|
+
transition: inherit;
|
|
220
|
+
}
|
|
221
|
+
slot[name='container']::slotted(*) {
|
|
222
|
+
width: 100%;
|
|
223
|
+
height: 100%;
|
|
146
224
|
}
|
|
147
225
|
`,
|
|
148
226
|
];
|
|
227
|
+
__decorate([
|
|
228
|
+
state()
|
|
229
|
+
], Button.prototype, "hideOutline", void 0);
|
|
149
230
|
__decorate([
|
|
150
231
|
property()
|
|
151
232
|
], Button.prototype, "color", void 0);
|
|
@@ -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 {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} 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\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 }\n .btn {\n flex: 1;\n }\n `,\n ];\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 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 });\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 </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 </button>`;\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-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 }\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"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { CSSResultOrNative, LitElement } from 'lit';
|
|
6
|
+
import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
|
|
7
7
|
import { type CardColor } from './card.js';
|
|
8
8
|
declare global {
|
|
9
9
|
interface HTMLElementTagNameMap {
|
|
@@ -19,12 +19,20 @@ export declare class Card extends baseClass {
|
|
|
19
19
|
/** @nocollapse */
|
|
20
20
|
static shadowRootOptions: ShadowRootInit;
|
|
21
21
|
static styles: CSSResultOrNative[];
|
|
22
|
+
private hideOutline;
|
|
23
|
+
private lastFiredEnabledState?;
|
|
22
24
|
/** The color of the card. */
|
|
23
25
|
color: CardColor;
|
|
24
26
|
/** Whether the card is disabled. */
|
|
25
27
|
disabled: boolean;
|
|
26
28
|
/** Whether the card is interactive. */
|
|
27
29
|
interactive: boolean;
|
|
30
|
+
connectedCallback(): void;
|
|
31
|
+
disconnectedCallback(): void;
|
|
32
|
+
private readonly handleSetShowOutline;
|
|
33
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
34
|
+
private dispatchSetEnabledEvent;
|
|
28
35
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
36
|
+
private handleContainerSlotChange;
|
|
29
37
|
}
|
|
30
38
|
export {};
|
|
@@ -4,10 +4,11 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
8
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
8
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
9
|
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
10
|
import { ripple } from '../ripple/ripple.js';
|
|
11
|
+
import { hasSlotted } from '../shared/has-slotted.js';
|
|
11
12
|
import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
|
|
12
13
|
// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
13
14
|
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
@@ -23,12 +24,45 @@ const baseClass = mixinDelegatesAria(LitElement);
|
|
|
23
24
|
let Card = class Card extends baseClass {
|
|
24
25
|
constructor() {
|
|
25
26
|
super(...arguments);
|
|
27
|
+
this.hideOutline = false;
|
|
26
28
|
/** The color of the card. */
|
|
27
29
|
this.color = 'outlined';
|
|
28
30
|
/** Whether the card is disabled. */
|
|
29
31
|
this.disabled = false;
|
|
30
32
|
/** Whether the card is interactive. */
|
|
31
33
|
this.interactive = false;
|
|
34
|
+
this.handleSetShowOutline = (event) => {
|
|
35
|
+
const customEvent = event;
|
|
36
|
+
this.hideOutline = !customEvent.detail.shown;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
connectedCallback() {
|
|
40
|
+
super.connectedCallback();
|
|
41
|
+
this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
|
|
42
|
+
}
|
|
43
|
+
disconnectedCallback() {
|
|
44
|
+
super.disconnectedCallback();
|
|
45
|
+
this.removeEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
|
|
46
|
+
}
|
|
47
|
+
updated(changedProperties) {
|
|
48
|
+
super.updated(changedProperties);
|
|
49
|
+
if (changedProperties.has('disabled')) {
|
|
50
|
+
this.dispatchSetEnabledEvent();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
dispatchSetEnabledEvent() {
|
|
54
|
+
const enabled = !this.disabled;
|
|
55
|
+
if (this.lastFiredEnabledState === enabled)
|
|
56
|
+
return;
|
|
57
|
+
const slot = this.shadowRoot?.querySelector('slot[name="container"]');
|
|
58
|
+
if (slot) {
|
|
59
|
+
for (const element of slot.assignedElements({ flatten: true })) {
|
|
60
|
+
element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
|
|
61
|
+
detail: { enabled },
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
this.lastFiredEnabledState = enabled;
|
|
32
66
|
}
|
|
33
67
|
render() {
|
|
34
68
|
const { ariaLabel } = this;
|
|
@@ -38,6 +72,9 @@ let Card = class Card extends baseClass {
|
|
|
38
72
|
color: this.color,
|
|
39
73
|
disabled: this.disabled,
|
|
40
74
|
interactive: this.interactive,
|
|
75
|
+
classes: {
|
|
76
|
+
'card-hide-outline': this.hideOutline,
|
|
77
|
+
},
|
|
41
78
|
})}">
|
|
42
79
|
${this.interactive
|
|
43
80
|
? html `<button
|
|
@@ -48,8 +85,22 @@ let Card = class Card extends baseClass {
|
|
|
48
85
|
aria-label="${ariaLabel || nothing}"></button>`
|
|
49
86
|
: nothing}
|
|
50
87
|
<slot></slot>
|
|
88
|
+
<slot
|
|
89
|
+
name="container"
|
|
90
|
+
${hasSlotted()}
|
|
91
|
+
@slotchange=${this.handleContainerSlotChange}></slot>
|
|
51
92
|
</div>`;
|
|
52
93
|
}
|
|
94
|
+
handleContainerSlotChange(event) {
|
|
95
|
+
const slot = event.target;
|
|
96
|
+
const enabled = !this.disabled;
|
|
97
|
+
for (const element of slot.assignedElements({ flatten: true })) {
|
|
98
|
+
element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));
|
|
99
|
+
element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
|
|
100
|
+
detail: { enabled },
|
|
101
|
+
}));
|
|
102
|
+
}
|
|
103
|
+
}
|
|
53
104
|
};
|
|
54
105
|
/** @nocollapse */
|
|
55
106
|
Card.shadowRootOptions = {
|
|
@@ -63,12 +114,38 @@ Card.styles = [
|
|
|
63
114
|
css `
|
|
64
115
|
:host {
|
|
65
116
|
display: inline-flex;
|
|
117
|
+
isolation: isolate;
|
|
66
118
|
}
|
|
67
119
|
.card {
|
|
68
120
|
flex: 1;
|
|
121
|
+
position: relative;
|
|
122
|
+
}
|
|
123
|
+
.card:has([name='container'].has-slotted) {
|
|
124
|
+
background-color: transparent;
|
|
125
|
+
}
|
|
126
|
+
.card.card-hide-outline {
|
|
127
|
+
--outline-color: transparent;
|
|
128
|
+
--container-elevation: var(--md-sys-elevation-shadow-0);
|
|
129
|
+
}
|
|
130
|
+
slot[name='container'] {
|
|
131
|
+
display: block;
|
|
132
|
+
position: absolute;
|
|
133
|
+
inset: 0;
|
|
134
|
+
border-radius: inherit;
|
|
135
|
+
pointer-events: none;
|
|
136
|
+
--color: var(--container-color);
|
|
137
|
+
z-index: -1;
|
|
138
|
+
transition: inherit;
|
|
139
|
+
}
|
|
140
|
+
slot[name='container']::slotted(*) {
|
|
141
|
+
width: 100%;
|
|
142
|
+
height: 100%;
|
|
69
143
|
}
|
|
70
144
|
`,
|
|
71
145
|
];
|
|
146
|
+
__decorate([
|
|
147
|
+
state()
|
|
148
|
+
], Card.prototype, "hideOutline", void 0);
|
|
72
149
|
__decorate([
|
|
73
150
|
property()
|
|
74
151
|
], Card.prototype, "color", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,
|
|
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-card': Card;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-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"]}
|
|
@@ -10,7 +10,7 @@ declare global {
|
|
|
10
10
|
'md-list-item': ListItem;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
|
-
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("
|
|
13
|
+
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>>;
|
|
14
14
|
/**
|
|
15
15
|
* A Material Design list item component.
|
|
16
16
|
*/
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
|
-
import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
|
|
8
|
-
import { internals, mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
|
|
9
|
-
import { hasSlotted } from '@material/web/labs/gb/components/shared/has-slotted.js';
|
|
10
7
|
import { css, html, LitElement, nothing } from 'lit';
|
|
11
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
import
|
|
15
|
-
|
|
9
|
+
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
|
+
import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
|
|
11
|
+
import { hasSlotted } from '../shared/has-slotted.js';
|
|
12
|
+
import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
|
|
13
|
+
// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
14
|
+
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
15
|
+
// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only
|
|
16
16
|
import listStyles from './list.css' with { type: 'css' }; // github-only
|
|
17
17
|
// import {styles as listStyles} from './list.cssresult.js'; // google3-only
|
|
18
18
|
import { listItem } from './list.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;
|
|
1
|
+
{"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IA6BrC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA3FD,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,eAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;gDACvC;AAhDZ,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CA6FpB","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} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design list item component. */\n 'md-list-item': ListItem;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n */\n@customElement('md-list-item')\nexport class ListItem extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n listStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n }\n .list-item {\n flex: 1;\n align-items: inherit;\n }\n :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'listitem';\n }\n\n /**\n * Whether the list item is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether the list item is disabled.\n */\n @property({type: Boolean}) disabled = false;\n\n /**\n * Whether the list item is non-interactive.\n */\n @property({type: Boolean, reflect: true, attribute: 'static'})\n nonInteractive = false;\n\n protected override render() {\n const state = {\n checked: this.checked,\n disabled: this.disabled,\n static: this.nonInteractive,\n };\n if (this.nonInteractive) {\n return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n >${this.renderContent()}</div\n >`;\n }\n\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<button\n part=\"list-item\"\n class=\"${listItem(state)}\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel || nothing}>\n ${this.renderContent()}\n </button>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"list-item-leading\">\n <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n <slot name=\"leading\" ${hasSlotted()}></slot>\n </span>\n <span class=\"list-item-content\">\n <slot name=\"overline\" class=\"list-item-overline\"></slot>\n <slot></slot>\n <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n </span>\n <span class=\"list-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"list-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n}\n"]}
|
|
@@ -44,4 +44,4 @@ export declare function splitButtonClasses({ selected, }?: SplitButtonClassesSta
|
|
|
44
44
|
* `;
|
|
45
45
|
* ```
|
|
46
46
|
*/
|
|
47
|
-
export declare const splitButton: (state?: SplitButtonClassesState & import("
|
|
47
|
+
export declare const splitButton: (state?: SplitButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { createClassMapDirective } from '
|
|
6
|
+
import { createClassMapDirective } from '../shared/directives.js';
|
|
7
7
|
/** Split Button classes. */
|
|
8
8
|
export const SPLIT_BUTTON_CLASSES = {
|
|
9
9
|
splitButton: 'split-btn',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,uBAAuB,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAShE,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Split Button color configuration types. */\nexport type SplitButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined';\n\n/** Split Button size configuration types. */\nexport type SplitButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Split Button classes. */\nexport const SPLIT_BUTTON_CLASSES = {\n splitButton: 'split-btn',\n splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/** The state provided to the `splitButtonClasses()` function. */\nexport interface SplitButtonClassesState {\n /** Whether the split trailing button is selected. */\n selected?: boolean;\n}\n\n/**\n * Returns the split button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function splitButtonClasses({\n selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n return {\n [SPLIT_BUTTON_CLASSES.splitButton]: true,\n [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n };\n}\n\n/**\n * A Lit directive that adds split button styling and functionality to its\n * element.\n *\n * @example\n * ```ts\n * html`\n * <div class=\"${splitButton()}\">\n * <button class=\"${button({color: 'filled'})}\">Label</button>\n * <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n * <md-menu id=\"menu\">\n * <md-menu-item>Option 1</md-menu-item>\n * <md-menu-item>Option 2</md-menu-item>\n * </md-menu>\n * </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n getClasses: splitButtonClasses,\n});\n"]}
|
|
@@ -37,9 +37,7 @@ export function adoptStyles(owner, styles) {
|
|
|
37
37
|
if (!owner)
|
|
38
38
|
return;
|
|
39
39
|
styles = Array.isArray(styles) ? styles : [styles];
|
|
40
|
-
const stylesheets = styles.map((
|
|
41
|
-
? cssResultOrNative.styleSheet
|
|
42
|
-
: cssResultOrNative);
|
|
40
|
+
const stylesheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
|
|
43
41
|
if (adopt(owner, stylesheets)) {
|
|
44
42
|
// Styles adopted directly on the owner document or shadow root.
|
|
45
43
|
return;
|
|
@@ -56,7 +54,4 @@ function adopt(node, stylesheets) {
|
|
|
56
54
|
}
|
|
57
55
|
return false;
|
|
58
56
|
}
|
|
59
|
-
function isCSSResult(style) {
|
|
60
|
-
return 'styleSheet' in style;
|
|
61
|
-
}
|
|
62
57
|
//# sourceMappingURL=adopt-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adopt-styles.js","sourceRoot":"","sources":["adopt-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CACzB,KAA0C,EAC1C,MAA+C;IAE/C,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"adopt-styles.js","sourceRoot":"","sources":["adopt-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CACzB,KAA0C,EAC1C,MAA+C;IAE/C,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACpD,CAAC,YAAY,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAC/C,CAAC;IAEF,IAAI,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC;QAC9B,gEAAgE;QAChE,OAAO;IACT,CAAC;IAED,4EAA4E;IAC5E,2BAA2B;IAC3B,KAAK,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,KAAK,CACZ,IAAwC,EACxC,WAA4B;IAE5B,IAAI,IAAI,IAAI,oBAAoB,IAAI,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAClC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,WAAW,CAAC,CAAC,CACtD,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type CSSResultOrNative} from 'lit';\n\n/**\n * Owner types that can adopt stylesheets using `adoptStyles()`.\n */\nexport type AdoptStylesOwner = DocumentOrShadowRoot | Element;\n\n/**\n * Adopts the given stylesheets to the provided document or shadow root owner.\n *\n * @example\n * ```ts\n * import globalStylesheet from './stylesheet.css' with {type: 'css'};\n *\n * adoptStyles(document, globalStylesheet);\n * ```\n *\n * If an element is provided, the styles are adopted to the element's owner\n * document. If the element is within a shadow root, the styles are also adopted\n * to the host shadow root.\n *\n * @example\n * ```ts\n * import hostClasses from './stylesheet.css' with {type: 'css'};\n *\n * class LightDomElement extends HTMLElement {\n * connectedCallback() {\n * adoptStyles(this, hostClasses);\n * this.classList.add('host-class');\n * }\n * }\n * ```\n *\n * @param owner The owner document, shadow root, or element to adopt the\n * styles to.\n * @param styles The styles to adopt.\n */\nexport function adoptStyles(\n owner: AdoptStylesOwner | null | undefined,\n styles: CSSResultOrNative | CSSResultOrNative[],\n): void {\n if (!owner) return;\n\n styles = Array.isArray(styles) ? styles : [styles];\n const stylesheets: CSSStyleSheet[] = styles.map((s) =>\n s instanceof CSSStyleSheet ? s : s.styleSheet!,\n );\n\n if (adopt(owner, stylesheets)) {\n // Styles adopted directly on the owner document or shadow root.\n return;\n }\n\n // When provided an element, adopt styles to the element's document and host\n // shadow root, if present.\n adopt(owner.ownerDocument, stylesheets);\n adopt(owner.getRootNode(), stylesheets);\n}\n\nfunction adopt(\n node: DocumentOrShadowRoot | Node | null,\n stylesheets: CSSStyleSheet[],\n): node is DocumentOrShadowRoot {\n if (node && 'adoptedStyleSheets' in node) {\n node.adoptedStyleSheets = Array.from(\n new Set([...node.adoptedStyleSheets, ...stylesheets]),\n );\n return true;\n }\n return false;\n}\n"]}
|
|
@@ -16,7 +16,10 @@ export type ListItemType = 'text' | 'button' | 'link';
|
|
|
16
16
|
declare const listItemBaseClass: import("../../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
|
|
17
17
|
/**
|
|
18
18
|
* @fires request-activation {Event} Requests the list to set `tabindex=0` on
|
|
19
|
-
* the item and focus it.
|
|
19
|
+
* the item and focus it. Used internally for list keyboard navigation; most
|
|
20
|
+
* applications do not need to listen for this event. It is exposed for
|
|
21
|
+
* authors building their own list-item replacements or wrapping items in a
|
|
22
|
+
* custom controller. --bubbles --composed
|
|
20
23
|
*/
|
|
21
24
|
export declare class ListItemEl extends listItemBaseClass implements ListItem {
|
|
22
25
|
/** @nocollapse */
|
|
@@ -17,7 +17,10 @@ import { createRequestActivationEvent, } from '../list-navigation-helpers.js';
|
|
|
17
17
|
const listItemBaseClass = mixinDelegatesAria(LitElement);
|
|
18
18
|
/**
|
|
19
19
|
* @fires request-activation {Event} Requests the list to set `tabindex=0` on
|
|
20
|
-
* the item and focus it.
|
|
20
|
+
* the item and focus it. Used internally for list keyboard navigation; most
|
|
21
|
+
* applications do not need to listen for this event. It is exposed for
|
|
22
|
+
* authors building their own list-item replacements or wrapping items in a
|
|
23
|
+
* custom controller. --bubbles --composed
|
|
21
24
|
*/
|
|
22
25
|
export class ListItemEl extends listItemBaseClass {
|
|
23
26
|
constructor() {
|