@material/web 2.4.2-nightly.7d7cbf4.0 → 2.4.2-nightly.8e14d5a.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/button/internal/button.d.ts +0 -4
- package/button/internal/button.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +0 -2
- package/checkbox/internal/checkbox.js.map +1 -1
- package/icon/internal/icon.d.ts +1 -1
- package/icon/internal/icon.js +1 -1
- package/icon/internal/icon.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +0 -4
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/labs/behaviors/form-associated.d.ts +0 -22
- package/labs/behaviors/form-associated.js +0 -11
- package/labs/behaviors/form-associated.js.map +1 -1
- package/labs/gb/components/button/button.d.ts +1 -1
- package/labs/gb/components/button/button.js +5 -5
- package/labs/gb/components/button/button.js.map +1 -1
- package/labs/gb/components/button/md-button.d.ts +1 -1
- package/labs/gb/components/button/md-button.js +11 -8
- package/labs/gb/components/button/md-button.js.map +1 -1
- package/labs/gb/components/card/card.d.ts +1 -1
- package/labs/gb/components/card/card.js +3 -3
- package/labs/gb/components/card/card.js.map +1 -1
- package/labs/gb/components/card/md-card.js +8 -5
- package/labs/gb/components/card/md-card.js.map +1 -1
- package/labs/gb/components/checkbox/checkbox.d.ts +1 -1
- package/labs/gb/components/checkbox/checkbox.js +4 -4
- package/labs/gb/components/checkbox/checkbox.js.map +1 -1
- package/labs/gb/components/checkbox/md-checkbox.d.ts +4 -4
- package/labs/gb/components/checkbox/md-checkbox.js +12 -9
- package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
- package/labs/gb/components/divider/divider.d.ts +1 -1
- package/labs/gb/components/divider/divider.js +1 -1
- package/labs/gb/components/divider/divider.js.map +1 -1
- package/labs/gb/components/divider/md-divider.js +2 -1
- package/labs/gb/components/divider/md-divider.js.map +1 -1
- package/labs/gb/components/fab/fab.d.ts +1 -1
- package/labs/gb/components/fab/fab.js +4 -4
- package/labs/gb/components/fab/fab.js.map +1 -1
- package/labs/gb/components/fab/md-fab.js +6 -3
- package/labs/gb/components/fab/md-fab.js.map +1 -1
- package/labs/gb/components/focus/focus-ring.js +1 -1
- package/labs/gb/components/focus/focus-ring.js.map +1 -1
- package/labs/gb/components/iconbutton/icon-button.d.ts +1 -1
- package/labs/gb/components/iconbutton/icon-button.js +5 -5
- package/labs/gb/components/iconbutton/icon-button.js.map +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.d.ts +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.js +7 -7
- package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -1
- package/labs/gb/components/list/list.d.ts +2 -2
- package/labs/gb/components/list/list.js +4 -4
- package/labs/gb/components/list/list.js.map +1 -1
- package/labs/gb/components/list/md-list-item.js +6 -3
- package/labs/gb/components/list/md-list-item.js.map +1 -1
- package/labs/gb/components/list/md-list.d.ts +1 -1
- package/labs/gb/components/list/md-list.js +3 -2
- package/labs/gb/components/list/md-list.js.map +1 -1
- package/labs/gb/components/menu/md-menu-group.d.ts +1 -1
- package/labs/gb/components/menu/md-menu-group.js +1 -1
- package/labs/gb/components/menu/md-menu-group.js.map +1 -1
- package/labs/gb/components/menu/md-menu-item.d.ts +1 -1
- package/labs/gb/components/menu/md-menu-item.js +10 -7
- package/labs/gb/components/menu/md-menu-item.js.map +1 -1
- package/labs/gb/components/menu/md-menu.d.ts +1 -1
- package/labs/gb/components/menu/md-menu.js +4 -3
- package/labs/gb/components/menu/md-menu.js.map +1 -1
- package/labs/gb/components/menu/menu.d.ts +2 -2
- package/labs/gb/components/menu/menu.js +4 -4
- package/labs/gb/components/menu/menu.js.map +1 -1
- package/labs/gb/components/radio/md-radio.d.ts +4 -4
- package/labs/gb/components/radio/md-radio.js +13 -10
- package/labs/gb/components/radio/md-radio.js.map +1 -1
- package/labs/gb/components/radio/radio.d.ts +1 -1
- package/labs/gb/components/radio/radio.js +4 -4
- package/labs/gb/components/radio/radio.js.map +1 -1
- package/labs/gb/components/ripple/ripple.js +5 -2
- package/labs/gb/components/ripple/ripple.js.map +1 -1
- package/labs/gb/components/switch/md-switch.d.ts +4 -4
- package/labs/gb/components/switch/md-switch.js +14 -11
- package/labs/gb/components/switch/md-switch.js.map +1 -1
- package/labs/gb/components/switch/switch.d.ts +1 -1
- package/labs/gb/components/switch/switch.js +5 -5
- package/labs/gb/components/switch/switch.js.map +1 -1
- package/labs/gb/styles/icon/md-icon.css +1 -1
- package/labs/gb/styles/icon/md-icon.css.map +1 -1
- package/labs/gb/styles/icon/md-icon.cssresult.js +1 -1
- package/labs/gb/styles/icon/md-icon.cssresult.js.map +1 -1
- package/labs/gb/styles/icon/md-icon.d.ts +20 -0
- package/labs/gb/styles/icon/md-icon.js +24 -0
- package/labs/gb/styles/icon/md-icon.js.map +1 -0
- package/labs/gb/styles/icon/md-icon.scss +2 -1
- package/labs/gb/styles/m3.css +5 -2
- package/labs/gb/styles/m3.css.map +1 -1
- package/labs/gb/styles/m3.cssresult.js +5 -2
- package/labs/gb/styles/m3.cssresult.js.map +1 -1
- package/labs/gb/styles/m3.scss +1 -0
- package/labs/gb/styles/space/md-space-tokens.css +4 -0
- package/labs/gb/styles/space/md-space-tokens.css.map +1 -0
- package/labs/gb/styles/space/md-space-tokens.cssresult.d.ts +3 -0
- package/labs/gb/styles/space/md-space-tokens.cssresult.js +14 -0
- package/labs/gb/styles/space/md-space-tokens.cssresult.js.map +1 -0
- package/labs/gb/styles/space/md-space-tokens.scss +28 -0
- package/labs/gb/styles/tailwind.css +4 -0
- package/labs/gb/styles/tailwind.css.map +1 -0
- package/labs/gb/styles/tailwind.cssresult.d.ts +3 -0
- package/labs/gb/styles/tailwind.cssresult.js +14 -0
- package/labs/gb/styles/tailwind.cssresult.js.map +1 -0
- package/labs/gb/styles/tailwind.scss +250 -0
- package/labs/gb/styles/typography/internal/_typography-tokens.scss +85 -16
- package/labs/gb/styles/typography/md-typography-tokens.css +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.css.map +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.cssresult.js +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.cssresult.js.map +1 -1
- package/package.json +5 -2
- package/radio/internal/radio.d.ts +0 -2
- package/radio/internal/radio.js.map +1 -1
- package/select/internal/select.d.ts +0 -2
- package/select/internal/select.js.map +1 -1
- package/slider/internal/slider.d.ts +0 -2
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/_switch.scss +1 -0
- package/switch/internal/switch-styles.css +1 -1
- package/switch/internal/switch-styles.css.map +1 -1
- package/switch/internal/switch-styles.cssresult.js +1 -1
- package/switch/internal/switch-styles.cssresult.js.map +1 -1
- package/switch/internal/switch.d.ts +0 -2
- package/switch/internal/switch.js.map +1 -1
|
@@ -4,13 +4,16 @@
|
|
|
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 { ripple } from '@material/web/labs/gb/components/ripple/ripple.js';
|
|
9
7
|
import { css, html, LitElement, nothing } from 'lit';
|
|
10
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
9
|
+
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
|
+
import { ripple } from '../ripple/ripple.js';
|
|
11
|
+
import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
|
|
12
|
+
// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
13
|
+
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
14
|
+
// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
|
|
15
|
+
import cardStyles from './card.css' with { type: 'css' }; // github-only
|
|
16
|
+
// import cardStyles from './card.cssresult.js'; // google3-only
|
|
14
17
|
import { card } from './card.js';
|
|
15
18
|
// Separate variable needed for closure.
|
|
16
19
|
const baseClass = mixinDelegatesAria(LitElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;
|
|
1
|
+
{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.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,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAA5B;;QAqBL,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;IAsBjD,CAAC;IApBoB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;WAEN,CAAC;IACV,CAAC;;AAhDD,kBAAkB;AACF,sBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,WAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAGU;IAAX,QAAQ,EAAE;mCAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAqB;AA5BpC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CAkDhB","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 {ripple} from '../ripple/ripple.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 }\n .card {\n flex: 1;\n }\n `,\n ];\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 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 })}\">\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 </div>`;\n }\n}\n"]}
|
|
@@ -56,4 +56,4 @@ export declare function setupCheckbox(checkbox: HTMLElement, opts?: {
|
|
|
56
56
|
* html`<input type="checkbox" class="${checkbox()}">`;
|
|
57
57
|
* ```
|
|
58
58
|
*/
|
|
59
|
-
export declare const checkbox: (state?: CheckboxClassesState & import("
|
|
59
|
+
export declare const checkbox: (state?: CheckboxClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { focusRingClasses } from '
|
|
7
|
-
import { rippleClasses, setupRipple
|
|
8
|
-
import { createClassMapDirective } from '
|
|
9
|
-
import { PSEUDO_CLASSES } from '
|
|
6
|
+
import { focusRingClasses } from '../focus/focus-ring.js';
|
|
7
|
+
import { rippleClasses, setupRipple } from '../ripple/ripple.js';
|
|
8
|
+
import { createClassMapDirective } from '../shared/directives.js';
|
|
9
|
+
import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
|
|
10
10
|
/** Checkbox classes. */
|
|
11
11
|
export const CHECKBOX_CLASSES = {
|
|
12
12
|
checkbox: 'checkbox',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAE3D,wBAAwB;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,aAAa,EAAE,cAAc,CAAC,aAAa;IAC3C,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAoBX;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,IAAI;QACjC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa;QAC/C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,QAAQ;QACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Checkbox classes. */\nexport const CHECKBOX_CLASSES = {\n checkbox: 'checkbox',\n invalid: PSEUDO_CLASSES.invalid,\n hover: PSEUDO_CLASSES.hover,\n focus: PSEUDO_CLASSES.focus,\n active: PSEUDO_CLASSES.active,\n checked: PSEUDO_CLASSES.checked,\n indeterminate: PSEUDO_CLASSES.indeterminate,\n disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `checkboxClasses()` function. */\nexport interface CheckboxClassesState {\n /** Emulates `:invalid`. */\n invalid?: boolean;\n /** Emulates `:hover`. */\n hover?: boolean;\n /** Emulates `:focus`. */\n focus?: boolean;\n /** Emulates `:active`. */\n active?: boolean;\n /** Emulates `:checked`. */\n checked?: boolean;\n /** Emulates `:indeterminate`. */\n indeterminate?: boolean;\n /** Emulates `:disabled`. */\n disabled?: boolean;\n}\n\n/**\n * Returns the checkbox classes to apply to an element based on the given state.\n *\n * @param state The state of the checkbox.\n * @return An object of class names and truthy values if they apply.\n */\nexport function checkboxClasses({\n invalid = false,\n hover = false,\n focus = false,\n active = false,\n checked = false,\n indeterminate = false,\n disabled = false,\n}: CheckboxClassesState = {}): ClassInfo {\n return {\n ...rippleClasses(),\n ...focusRingClasses(),\n [CHECKBOX_CLASSES.checkbox]: true,\n [CHECKBOX_CLASSES.checked]: checked,\n [CHECKBOX_CLASSES.indeterminate]: indeterminate,\n [CHECKBOX_CLASSES.disabled]: disabled,\n [CHECKBOX_CLASSES.invalid]: invalid,\n [CHECKBOX_CLASSES.hover]: hover,\n [CHECKBOX_CLASSES.focus]: focus,\n [CHECKBOX_CLASSES.active]: active,\n };\n}\n\n/**\n * Sets up checkbox functionality for the given element.\n *\n * @param checkbox The element on which to set up checkbox functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupCheckbox(\n checkbox: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n setupRipple(checkbox, opts);\n}\n\n/**\n * A Lit directive that adds checkbox styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<input type=\"checkbox\" class=\"${checkbox()}\">`;\n * ```\n */\nexport const checkbox = createClassMapDirective({\n getClasses: checkboxClasses,\n setupElement: setupCheckbox,\n});\n"]}
|
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
|
|
7
|
-
import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
|
|
8
|
-
import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
|
|
9
6
|
import { CSSResultOrNative, LitElement } from 'lit';
|
|
7
|
+
import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
|
|
8
|
+
import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
|
|
9
|
+
import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
|
|
10
10
|
declare global {
|
|
11
11
|
interface HTMLElementTagNameMap {
|
|
12
12
|
/** A Material Design checkbox component. */
|
|
13
13
|
'md-checkbox': Checkbox;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("
|
|
16
|
+
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>>;
|
|
17
17
|
/**
|
|
18
18
|
* A Material Design checkbox component.
|
|
19
19
|
*/
|
|
@@ -4,17 +4,20 @@
|
|
|
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 { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
|
|
9
|
-
import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
|
|
10
|
-
import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
|
|
11
|
-
import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
|
|
12
|
-
import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
|
|
13
7
|
import { css, html, LitElement, nothing } from 'lit';
|
|
14
8
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
9
|
+
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
|
+
import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
|
|
11
|
+
import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
|
|
12
|
+
import { mixinElementInternals } from '../../../behaviors/element-internals.js';
|
|
13
|
+
import { getFormState, getFormValue, mixinFormAssociated, } from '../../../behaviors/form-associated.js';
|
|
14
|
+
import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
|
|
15
|
+
import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
|
|
16
|
+
// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
17
|
+
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
18
|
+
// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
|
|
19
|
+
import checkboxStyles from './checkbox.css' with { type: 'css' }; // github-only
|
|
20
|
+
// import checkboxStyles from './checkbox.cssresult.js'; // google3-only
|
|
18
21
|
import { checkbox } from './checkbox.js';
|
|
19
22
|
// Separate variable needed for closure.
|
|
20
23
|
const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;
|
|
1
|
+
{"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design checkbox component. */\n 'md-checkbox': Checkbox;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A Material Design checkbox component.\n */\n@customElement('md-checkbox')\nexport class Checkbox extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n checkboxStyles,\n css`\n :host {\n display: inline-flex;\n }\n .checkbox {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the checkbox is invalid.\n */\n @property({type: Boolean}) error = false;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * The default checked state of the checkbox.\n */\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value || false);\n }\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @query('input', true)\n private readonly input!: HTMLInputElement | null;\n /**\n * Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the checkbox has not been\n * interacted with.\n *\n * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n\n protected override render() {\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n return html`\n <input\n part=\"checkbox\"\n class=\"${checkbox({invalid: this.error})}\"\n type=\"checkbox\"\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || this.error || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n `;\n }\n\n private handleInput(event: Event) {\n this.dirtyCheckedness = true;\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n // <input> 'change' event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string | null,\n newValue: string | null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update checkboxes that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
|
|
@@ -41,4 +41,4 @@ export declare function dividerClasses({ vertical, }?: DividerClassesState): Cla
|
|
|
41
41
|
* `;
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
export declare const divider: (state?: DividerClassesState & import("
|
|
44
|
+
export declare const divider: (state?: DividerClassesState & 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
|
/** Divider classes. */
|
|
8
8
|
export const DIVIDER_CLASSES = {
|
|
9
9
|
divider: 'divider',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAEhE,uBAAuB;AACvB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,kBAAkB;CAC3B,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,GAAG,KAAK,MACO,EAAE;IACzB,OAAO;QACL,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,IAAI;QAC/B,CAAC,eAAe,CAAC,eAAe,CAAC,EAAE,QAAQ;KAC5C,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,uBAAuB,CAAC;IAC7C,UAAU,EAAE,cAAc;CAC3B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createClassMapDirective} from '../shared/directives.js';\n\n/** Divider classes. */\nexport const DIVIDER_CLASSES = {\n divider: 'divider',\n dividerVertical: 'divider-vertical',\n} as const;\n\n/** The state provided to the `dividerClasses()` function. */\nexport interface DividerClassesState {\n /** Whether the divider is vertical. */\n vertical?: boolean;\n}\n\n/**\n * Returns the divider classes to apply to an element based on the given state.\n *\n * @param state The state of the divider.\n * @return An object of class names and truthy values if they apply.\n */\nexport function dividerClasses({\n vertical = false,\n}: DividerClassesState = {}): ClassInfo {\n return {\n [DIVIDER_CLASSES.divider]: true,\n [DIVIDER_CLASSES.dividerVertical]: vertical,\n };\n}\n\n/**\n * A Lit directive that adds divider styling to its element.\n *\n * @example\n * ```ts\n * html`\n * <div class=\"flex flex-col\">\n * <div>Vertical</div>\n * <hr class=\"${divider()}\">\n * <div>Items</div>\n * </div>\n *\n * <div class=\"flex flex-row\">\n * <div>Horizontal</div>\n * <hr class=\"${divider({vertical: true})}\">\n * <div>Items</div>\n * </div>\n * `;\n * ```\n */\nexport const divider = createClassMapDirective({\n getClasses: dividerClasses,\n});\n"]}
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { css, html, LitElement } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import dividerStyles from './divider.
|
|
9
|
+
import dividerStyles from './divider.css' with { type: 'css' }; // github-only
|
|
10
|
+
// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only
|
|
10
11
|
import { divider } from './divider.js';
|
|
11
12
|
/**
|
|
12
13
|
* A Material Design divider component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,aAAa,MAAM,
|
|
1
|
+
{"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAmBL;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,cAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AAtBhD,OAAO;IADnB,aAAa,CAAC,YAAY,CAAC;GACf,OAAO,CA2BnB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design divider component. */\n 'md-divider': Divider;\n }\n}\n\n/**\n * A Material Design divider component.\n */\n@customElement('md-divider')\nexport class Divider extends LitElement {\n static override styles: CSSResultOrNative[] = [\n dividerStyles,\n css`\n :host {\n display: flex;\n }\n .divider {\n flex: 1;\n }\n :host(:not([vertical])) {\n width: 100%;\n }\n :host([vertical]) {\n min-height: 100%;\n }\n `,\n ];\n\n /**\n * Whether or not the divider is vertical.\n */\n @property({type: Boolean, reflect: true}) vertical = false;\n\n protected override render() {\n return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n }\n}\n"]}
|
|
@@ -81,4 +81,4 @@ export declare function setupFab(fab: HTMLElement, opts?: {
|
|
|
81
81
|
* `;
|
|
82
82
|
* ```
|
|
83
83
|
*/
|
|
84
|
-
export declare const fab: (state?: FabClassesState & import("
|
|
84
|
+
export declare const fab: (state?: FabClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { focusRingClasses } from '
|
|
7
|
-
import { rippleClasses, setupRipple
|
|
8
|
-
import { createClassMapDirective } from '
|
|
9
|
-
import { PSEUDO_CLASSES } from '
|
|
6
|
+
import { focusRingClasses } from '../focus/focus-ring.js';
|
|
7
|
+
import { rippleClasses, setupRipple } from '../ripple/ripple.js';
|
|
8
|
+
import { createClassMapDirective } from '../shared/directives.js';
|
|
9
|
+
import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
|
|
10
10
|
/** Fab color configurations. */
|
|
11
11
|
export const FAB_COLORS = {
|
|
12
12
|
primary: 'primary',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAc3D,gCAAgC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,mBAAmB;IACrC,SAAS,EAAE,WAAW;IACtB,kBAAkB,EAAE,qBAAqB;IACzC,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;CAC/B,CAAC;AAEX,+BAA+B;AAC/B,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX,mBAAmB;AACnB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,uBAAuB;IAC5C,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,yBAAyB;IAChD,WAAW,EAAE,cAAc;IAC3B,oBAAoB,EAAE,wBAAwB;IAC9C,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;CACrB,CAAC;AAcX;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,MACK,EAAE;IACrB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,IAAI;QACvB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,OAAO;QACtD,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC/B,KAAK,KAAK,UAAU,CAAC,gBAAgB,IAAI,CAAC,KAAK;QACjD,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS;QAC1D,CAAC,WAAW,CAAC,qBAAqB,CAAC,EACjC,KAAK,KAAK,UAAU,CAAC,kBAAkB;QACzC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,QAAQ;QACxD,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,iBAAiB;QAC1E,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK;QAC1B,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM;KAC7B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,GAAgB,EAChB,IAA6B;IAE7B,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,uBAAuB,CAAC;IACzC,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,QAAQ;CACvB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Fab color configuration types. */\nexport type FabColor =\n | 'primary'\n | 'primary-container'\n | 'secondary'\n | 'secondary-container'\n | 'tertiary'\n | 'tertiary-container';\n\n/** Fab size configuration types. */\nexport type FabSize = 'default' | 'md' | 'lg';\n\n/** Fab color configurations. */\nexport const FAB_COLORS = {\n primary: 'primary',\n primaryContainer: 'primary-container',\n secondary: 'secondary',\n secondaryContainer: 'secondary-container',\n tertiary: 'tertiary',\n tertiaryContainer: 'tertiary-container',\n} as const;\n\n/** Fab size configurations. */\nexport const FAB_SIZES = {\n default: 'default',\n md: 'md',\n lg: 'lg',\n} as const;\n\n/** Fab classes. */\nexport const FAB_CLASSES = {\n fab: 'fab',\n fabPrimary: 'fab-primary',\n fabPrimaryContainer: 'fab-primary-container',\n fabSecondary: 'fab-secondary',\n fabSecondaryContainer: 'fab-secondary-container',\n fabTertiary: 'fab-tertiary',\n fabTertiaryContainer: 'fab-tertiary-container',\n fabMd: 'fab-md',\n fabLg: 'fab-lg',\n hover: PSEUDO_CLASSES.hover,\n active: PSEUDO_CLASSES.active,\n} as const;\n\n/** The state provided to the `fabClasses()` function. */\nexport interface FabClassesState {\n /** The color of the fab. */\n color?: FabColor;\n /** The size of the fab. */\n size?: FabSize;\n /** Emulates `:hover`. */\n hover?: boolean;\n /** Emulates `:active`. */\n active?: boolean;\n}\n\n/**\n * Returns the fab classes to apply to an element based on the given state.\n *\n * @param state The state of the fab.\n * @return An object of class names and truthy values if they apply.\n */\nexport function fabClasses({\n color,\n size,\n hover = false,\n active = false,\n}: FabClassesState = {}): ClassInfo {\n return {\n ...rippleClasses(),\n ...focusRingClasses(),\n [FAB_CLASSES.fab]: true,\n [FAB_CLASSES.fabPrimary]: color === FAB_COLORS.primary,\n [FAB_CLASSES.fabPrimaryContainer]:\n color === FAB_COLORS.primaryContainer || !color,\n [FAB_CLASSES.fabSecondary]: color === FAB_COLORS.secondary,\n [FAB_CLASSES.fabSecondaryContainer]:\n color === FAB_COLORS.secondaryContainer,\n [FAB_CLASSES.fabTertiary]: color === FAB_COLORS.tertiary,\n [FAB_CLASSES.fabTertiaryContainer]: color === FAB_COLORS.tertiaryContainer,\n [FAB_CLASSES.fabMd]: size === FAB_SIZES.md,\n [FAB_CLASSES.fabLg]: size === FAB_SIZES.lg,\n [FAB_CLASSES.hover]: hover,\n [FAB_CLASSES.active]: active,\n };\n}\n\n/**\n * Sets up fab functionality for the given element.\n *\n * @param fab The element on which to set up fab functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupFab(\n fab: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n setupRipple(fab, opts);\n}\n\n/**\n * A Lit directive that adds fab styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n * <button class=\"${fab()}\">\n * <md-icon>add</md-icon>\n * </button>\n *\n * <button class=\"${fab()}\">\n * <md-icon>add</md-icon>\n * Extended\n * </button>\n * `;\n * ```\n */\nexport const fab = createClassMapDirective({\n getClasses: fabClasses,\n setupElement: setupFab,\n});\n"]}
|
|
@@ -6,9 +6,12 @@
|
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { css, html, LitElement } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import focusRingStyles from '
|
|
10
|
-
import
|
|
11
|
-
import
|
|
9
|
+
import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
|
|
10
|
+
// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
|
|
11
|
+
import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
|
|
12
|
+
// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
|
|
13
|
+
import fabStyles from './fab.css' with { type: 'css' }; // github-only
|
|
14
|
+
// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only
|
|
12
15
|
import { fab } from './fab.js';
|
|
13
16
|
/**
|
|
14
17
|
* A Material Design fab component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,
|
|
1
|
+
{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design fab component. */\n 'md-fab': Fab;\n }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab extends LitElement {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n fabStyles,\n css`\n :host {\n display: inline-flex;\n }\n .fab {\n flex: 1;\n }\n `,\n ];\n\n @property() color: FabColor = 'primary-container';\n @property() size: FabSize = 'default';\n\n protected override render() {\n return html`<button\n part=\"fab\"\n class=\"${fab({color: this.color, size: this.size})}\">\n <slot></slot>\n </button>`;\n }\n}\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { PSEUDO_CLASSES } from '
|
|
6
|
+
import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
|
|
7
7
|
/** Focus ring type configurations. */
|
|
8
8
|
export const FOCUS_RING_TYPES = {
|
|
9
9
|
outer: 'outer',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAK3D,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,0BAA0B;AAC1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,cAAc,EAAE,kBAAkB;IAClC,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,YAAY;CAC1C,CAAC;AAUF;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,gBAAgB,CAAC,KAAK,EAC7B,YAAY,GAAG,KAAK,MACK,EAAE;IAC3B,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EACjC,IAAI,KAAK,gBAAgB,CAAC,KAAK,IAAI,CAAC,IAAI;QAC1C,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,gBAAgB,CAAC,KAAK;QACpE,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,YAAY;KAChD,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Focus ring type configuration types. */\nexport type FocusRingType = 'outer' | 'inner';\n\n/** Focus ring type configurations. */\nexport const FOCUS_RING_TYPES = {\n outer: 'outer',\n inner: 'inner',\n} as const;\n\n/** Focus ring classes. */\nexport const FOCUS_RING_CLASSES = {\n focusRingOuter: 'focus-ring-outer',\n focusRingInner: 'focus-ring-inner',\n focusRingTarget: 'focus-ring-target',\n focusRingHost: 'focus-ring-host',\n focusVisible: PSEUDO_CLASSES.focusVisible,\n};\n\n/** The state provided to the `focusRingClasses()` function. */\nexport interface FocusRingClassesState {\n /** The type of focus ring. Defaults to outer. */\n type?: FocusRingType;\n /** Emulates `:focus-visible`. */\n focusVisible?: boolean;\n}\n\n/**\n * Returns the focus ring classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the focus ring.\n * @return An object of class names and truthy values if they apply.\n */\nexport function focusRingClasses({\n type = FOCUS_RING_TYPES.outer,\n focusVisible = false,\n}: FocusRingClassesState = {}): ClassInfo {\n return {\n [FOCUS_RING_CLASSES.focusRingOuter]:\n type === FOCUS_RING_TYPES.outer || !type,\n [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,\n [FOCUS_RING_CLASSES.focusVisible]: focusVisible,\n };\n}\n"]}
|
|
@@ -94,4 +94,4 @@ export declare function setupIconButton(iconButton: HTMLElement, opts?: {
|
|
|
94
94
|
* </button>`;
|
|
95
95
|
* ```
|
|
96
96
|
*/
|
|
97
|
-
export declare const iconButton: (state?: IconButtonClassesState & import("
|
|
97
|
+
export declare const iconButton: (state?: IconButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { afterDispatch, setupDispatchHooks, } from '
|
|
7
|
-
import { focusRingClasses } from '
|
|
8
|
-
import { rippleClasses, setupRipple
|
|
9
|
-
import { createClassMapDirective } from '
|
|
10
|
-
import { PSEUDO_CLASSES, isDisabled
|
|
6
|
+
import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
|
|
7
|
+
import { focusRingClasses } from '../focus/focus-ring.js';
|
|
8
|
+
import { rippleClasses, setupRipple } from '../ripple/ripple.js';
|
|
9
|
+
import { createClassMapDirective } from '../shared/directives.js';
|
|
10
|
+
import { PSEUDO_CLASSES, isDisabled } from '../shared/pseudo-classes.js';
|
|
11
11
|
/** Icon Button color configurations. */
|
|
12
12
|
export const ICON_BUTTON_COLORS = {
|
|
13
13
|
filled: 'filled',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Icon Button color configuration types. */\nexport type IconButtonColor = 'filled' | 'tonal' | 'outlined' | 'standard';\n\n/** Icon Button color configurations. */\nexport const ICON_BUTTON_COLORS = {\n filled: 'filled',\n tonal: 'tonal',\n outlined: 'outlined',\n standard: 'standard',\n} as const;\n\n/** Icon Button size configuration types. */\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Icon Button size configurations. */\nexport const ICON_BUTTON_SIZES = {\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'xl',\n} as const;\n\n/** Icon Button width configuration types. */\nexport type IconButtonWidth = 'narrow' | 'wide' | '';\n\n/** Icon Button width configurations. */\nexport const ICON_BUTTON_WIDTHS = {\n narrow: 'narrow',\n wide: 'wide',\n} as const;\n\n/** Icon Button classes. */\nexport const ICON_BUTTON_CLASSES = {\n iconBtn: 'icon-btn',\n iconBtnFilled: 'icon-btn-filled',\n iconBtnTonal: 'icon-btn-tonal',\n iconBtnOutlined: 'icon-btn-outlined',\n iconBtnStandard: 'icon-btn-standard',\n iconBtnXs: 'icon-btn-xs',\n iconBtnSm: 'icon-btn-sm',\n iconBtnMd: 'icon-btn-md',\n iconBtnLg: 'icon-btn-lg',\n iconBtnXl: 'icon-btn-xl',\n iconBtnSquare: 'icon-btn-square',\n iconBtnNarrow: 'icon-btn-narrow',\n iconBtnWide: 'icon-btn-wide',\n iconBtnUnselected: 'icon-btn-unselected',\n iconBtnSelected: 'icon-btn-selected',\n active: PSEUDO_CLASSES.active,\n disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `iconButtonClasses()` function. */\nexport interface IconButtonClassesState {\n /** The color of the icon button. */\n color?: IconButtonColor;\n /** The size of the icon button. */\n size?: IconButtonSize;\n /** The width of the icon button. */\n width?: IconButtonWidth;\n /** Whether the icon button is a square shape. */\n square?: boolean;\n /** Whether the toggle button is selected, if not undefined. */\n selected?: boolean;\n /** Emulates `:active`. */\n active?: boolean;\n /** Emulates `:disabled`. */\n disabled?: boolean;\n}\n\n/**\n * Returns the icon button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the icon button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function iconButtonClasses({\n color,\n size,\n width,\n square = false,\n selected,\n active = false,\n disabled = false,\n}: IconButtonClassesState = {}): ClassInfo {\n return {\n ...rippleClasses(),\n ...focusRingClasses(),\n [ICON_BUTTON_CLASSES.iconBtn]: true,\n [ICON_BUTTON_CLASSES.iconBtnFilled]: color === ICON_BUTTON_COLORS.filled,\n [ICON_BUTTON_CLASSES.iconBtnTonal]: color === ICON_BUTTON_COLORS.tonal,\n [ICON_BUTTON_CLASSES.iconBtnOutlined]:\n color === ICON_BUTTON_COLORS.outlined,\n [ICON_BUTTON_CLASSES.iconBtnStandard]:\n color === ICON_BUTTON_COLORS.standard || !color,\n [ICON_BUTTON_CLASSES.iconBtnXs]: size === ICON_BUTTON_SIZES.xs,\n [ICON_BUTTON_CLASSES.iconBtnSm]: size === ICON_BUTTON_SIZES.sm || !size,\n [ICON_BUTTON_CLASSES.iconBtnMd]: size === ICON_BUTTON_SIZES.md,\n [ICON_BUTTON_CLASSES.iconBtnLg]: size === ICON_BUTTON_SIZES.lg,\n [ICON_BUTTON_CLASSES.iconBtnXl]: size === ICON_BUTTON_SIZES.xl,\n [ICON_BUTTON_CLASSES.iconBtnNarrow]: width === ICON_BUTTON_WIDTHS.narrow,\n [ICON_BUTTON_CLASSES.iconBtnWide]: width === ICON_BUTTON_WIDTHS.wide,\n [ICON_BUTTON_CLASSES.iconBtnSquare]: square,\n [ICON_BUTTON_CLASSES.iconBtnUnselected]: selected === false,\n [ICON_BUTTON_CLASSES.iconBtnSelected]: selected === true,\n [ICON_BUTTON_CLASSES.active]: active,\n [ICON_BUTTON_CLASSES.disabled]: disabled,\n };\n}\n\n/**\n * Sets up icon button functionality for the given element.\n *\n * @param iconButton The element on which to set up icon button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupIconButton(\n iconButton: HTMLElement,\n opts?: {signal?: AbortSignal},\n): void {\n setupDispatchHooks(iconButton, 'click');\n setupRipple(iconButton, opts);\n iconButton.addEventListener(\n 'click',\n (event) => {\n if (isDisabled(iconButton)) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n afterDispatch(event, () => {\n const isToggle = iconButton.hasAttribute('aria-pressed');\n if (event.defaultPrevented || !isToggle) {\n return;\n }\n\n const isPressed = iconButton.ariaPressed === 'true';\n iconButton.ariaPressed = String(!isPressed);\n iconButton.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n iconButton.dispatchEvent(new Event('change', {bubbles: true}));\n });\n },\n opts,\n );\n}\n\n/**\n * A Lit directive that adds icon button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${iconButton({color: 'filled'})}\">\n * <md-icon>favorite</md-icon>\n * </button>`;\n * ```\n */\nexport const iconButton = createClassMapDirective({\n getClasses: iconButtonClasses,\n setupElement: setupIconButton,\n});\n"]}
|
|
@@ -11,7 +11,7 @@ declare global {
|
|
|
11
11
|
'md-icon-button': IconButton;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
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("
|
|
14
|
+
declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
|
|
15
15
|
/**
|
|
16
16
|
* A Material Design icon button component.
|
|
17
17
|
*/
|
|
@@ -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 { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
|
|
9
|
-
import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
|
|
10
|
-
import { mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
|
|
11
|
-
import { mixinFormSubmitter } from '@material/web/labs/behaviors/form-submitter.js';
|
|
12
7
|
import { css, html, LitElement, nothing } from 'lit';
|
|
13
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
14
|
-
import
|
|
15
|
-
import
|
|
9
|
+
import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
|
|
10
|
+
import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
|
|
11
|
+
import { mixinElementInternals } from '../../../behaviors/element-internals.js';
|
|
12
|
+
import { mixinFormAssociated } from '../../../behaviors/form-associated.js';
|
|
13
|
+
import { mixinFormSubmitter } from '../../../behaviors/form-submitter.js';
|
|
14
|
+
import focusRingStyles from '../focus/focus-ring.cssresult.js';
|
|
15
|
+
import rippleStyles from '../ripple/ripple.cssresult.js';
|
|
16
16
|
import iconButtonStyles from './icon-button.cssresult.js';
|
|
17
17
|
import { iconButton } from './icon-button.js';
|
|
18
18
|
const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;
|
|
1
|
+
{"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-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.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n IconButtonColor,\n IconButtonSize,\n IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design icon button component. */\n 'md-icon-button': IconButton;\n }\n}\n\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n */\n@customElement('md-icon-button')\nexport class IconButton 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 iconButtonStyles,\n css`\n :host {\n display: inline-flex;\n }\n .icon-btn {\n flex: 1;\n }\n `,\n ];\n\n /**\n * The color of the button.\n */\n @property() color: IconButtonColor = 'standard';\n\n /**\n * The size of the button.\n */\n @property() size: IconButtonSize = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * Changes the width of the button.\n */\n @property() width: IconButtonWidth = '';\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 @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 */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n protected override render() {\n const classes = iconButton({\n color: this.color,\n size: this.size,\n width: this.width,\n square: this.square,\n disabled: this.softDisabled,\n });\n\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"icon-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=\"icon-btn\"\n class=${classes}\n type=\"button\"\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"]}
|
|
@@ -35,7 +35,7 @@ export declare function listClasses({ segmented, }?: ListClassesState): ClassInf
|
|
|
35
35
|
* `;
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
export declare const list: (state?: ListClassesState & import("
|
|
38
|
+
export declare const list: (state?: ListClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
39
39
|
/** List item classes. */
|
|
40
40
|
export declare const LIST_ITEM_CLASSES: {
|
|
41
41
|
readonly listItem: "list-item";
|
|
@@ -100,4 +100,4 @@ export declare function setupListItem(listItem: HTMLElement, opts?: {
|
|
|
100
100
|
* `;
|
|
101
101
|
* ```
|
|
102
102
|
*/
|
|
103
|
-
export declare const listItem: (state?: ListItemClassesState & import("
|
|
103
|
+
export declare const listItem: (state?: ListItemClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { FOCUS_RING_CLASSES } from '
|
|
7
|
-
import { RIPPLE_CLASSES, setupRipple
|
|
8
|
-
import { createClassMapDirective } from '
|
|
9
|
-
import { PSEUDO_CLASSES } from '
|
|
6
|
+
import { FOCUS_RING_CLASSES } from '../focus/focus-ring.js';
|
|
7
|
+
import { RIPPLE_CLASSES, setupRipple } from '../ripple/ripple.js';
|
|
8
|
+
import { createClassMapDirective } from '../shared/directives.js';
|
|
9
|
+
import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
|
|
10
10
|
/** List classes. */
|
|
11
11
|
export const LIST_CLASSES = {
|
|
12
12
|
list: 'list',
|