@m3e/web 2.5.10 → 2.5.11
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/dist/all.js +282 -86
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +8 -8
- package/dist/all.min.js.map +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/breadcrumb.js.map +1 -1
- package/dist/breadcrumb.min.js +1 -1
- package/dist/breadcrumb.min.js.map +1 -1
- package/dist/button.js +13 -7
- package/dist/button.js.map +1 -1
- package/dist/button.min.js +1 -1
- package/dist/button.min.js.map +1 -1
- package/dist/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.min.js +1 -1
- package/dist/checkbox.min.js.map +1 -1
- package/dist/chips.js +2 -2
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/css-custom-data.json +5263 -5233
- package/dist/custom-elements.json +50798 -49906
- package/dist/fab.js +9 -9
- package/dist/fab.js.map +1 -1
- package/dist/fab.min.js +1 -1
- package/dist/fab.min.js.map +1 -1
- package/dist/form-field.js +4 -5
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +1 -1
- package/dist/form-field.min.js.map +1 -1
- package/dist/html-custom-data.json +1693 -1666
- package/dist/icon-button.js +48 -42
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.min.js +1 -1
- package/dist/icon-button.min.js.map +1 -1
- package/dist/menu.js +2 -2
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/option.js +1 -1
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/paginator.js +1 -1
- package/dist/paginator.js.map +1 -1
- package/dist/paginator.min.js +2 -2
- package/dist/paginator.min.js.map +1 -1
- package/dist/radio-group.js +6 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.min.js +1 -1
- package/dist/radio-group.min.js.map +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.js.map +1 -1
- package/dist/split-button.min.js +1 -1
- package/dist/split-button.min.js.map +1 -1
- package/dist/src/button/ButtonElement.d.ts +1 -0
- package/dist/src/button/ButtonElement.d.ts.map +1 -1
- package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
- package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
- package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
- package/dist/src/icon-button/IconButtonElement.d.ts +1 -0
- package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
- package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
- package/dist/src/menu/MenuElement.d.ts.map +1 -1
- package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
- package/dist/src/option/OptionElement.d.ts.map +1 -1
- package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
- package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
- package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
- package/dist/src/switch/SwitchElement.d.ts.map +1 -1
- package/dist/src/switch/styles/SwitchToken.d.ts.map +1 -1
- package/dist/src/theme/ThemeElement.d.ts +6 -0
- package/dist/src/theme/ThemeElement.d.ts.map +1 -1
- package/dist/src/theme/ThemeIconElement.d.ts +60 -0
- package/dist/src/theme/ThemeIconElement.d.ts.map +1 -0
- package/dist/src/theme/ThemeVariant.d.ts +3 -0
- package/dist/src/theme/ThemeVariant.d.ts.map +1 -0
- package/dist/src/theme/index.d.ts +2 -0
- package/dist/src/theme/index.d.ts.map +1 -1
- package/dist/switch.js +16 -11
- package/dist/switch.js.map +1 -1
- package/dist/switch.min.js +1 -1
- package/dist/switch.min.js.map +1 -1
- package/dist/theme.js +174 -4
- package/dist/theme.js.map +1 -1
- package/dist/theme.min.js +31 -31
- package/dist/theme.min.js.map +1 -1
- package/package.json +1 -1
package/dist/all.js
CHANGED
|
@@ -2327,7 +2327,7 @@ _M3eBreadcrumbItemButtonElement_handleClick = function _M3eBreadcrumbItemButtonE
|
|
|
2327
2327
|
}
|
|
2328
2328
|
};
|
|
2329
2329
|
/** The styles of the element. */
|
|
2330
|
-
M3eBreadcrumbItemButtonElement.styles = css`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-
|
|
2330
|
+
M3eBreadcrumbItemButtonElement.styles = css`:host { display: block; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--m3e-breadcrumb-item-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); column-gap: var(--m3e-breadcrumb-item-icon-label-space, 0.5rem); } .icon { font-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); --m3e-icon-size: var(--m3e-breadcrumb-item--icon-size, 1.25rem); } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } :host(:is(:state(--icon-only), :--icon-only)) .overflow { flex: none; } :host(:not(:is(:state(--icon-only), :--icon-only))), :host(:not(:is(:state(--icon-only), :--icon-only))) .base { min-width: 0; } :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:is(:state(--icon-only), :--icon-only)) .base { width: calc(var(--m3e-breadcrumb-item-container-height, 2.5rem) + ${DesignToken$1.density.calc(-3)}); padding-inline: var(--m3e-breadcrumb-item-icon-padding-inline, 0px); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-icon-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-icon-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-icon-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); } :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: var(--m3e-breadcrumb-item-label-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { font-size: var(--m3e-breadcrumb-item-label-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-breadcrumb-item-label-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-breadcrumb-item-label-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-breadcrumb-item-label-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(:is(:state(--icon-only), :--icon-only))) .base { padding-inline: var(--m3e-breadcrumb-item-label-padding-inline, 0.75rem); --m3e-state-layer-hover-color: var( --m3e-breadcrumb-item-label-hover-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-state-layer-focus-color: var( --m3e-breadcrumb-item-label-focus-state-layer-color, ${DesignToken$1.color.primary} ); --m3e-ripple-color: var(--m3e-breadcrumb-item-label-pressed-state-layer-color, ${DesignToken$1.color.primary}); } :host([current]) .base { color: var(--m3e-breadcrumb-item-last-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([current])) { cursor: pointer; user-select: none; } :host(:disabled:not([current])) .base { color: color-mix( in srgb, var(--m3e-breadcrumb-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-breadcrumb-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; width: max(3rem, 100%); margin: auto; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:is(:state(--icon-only), :--icon-only):not([current]):not(:disabled)) .base, :host(:not(:is(:state(--icon-only), :--icon-only)):not([current]):not(:disabled)) .base { color: LinkText; outline: 1px solid LinkText; } :host(:disabled) .base { color: GrayText; } }`;
|
|
2331
2331
|
__decorate([query(".focus-ring")], M3eBreadcrumbItemButtonElement.prototype, "_focusRing", void 0);
|
|
2332
2332
|
__decorate([query(".state-layer")], M3eBreadcrumbItemButtonElement.prototype, "_stateLayer", void 0);
|
|
2333
2333
|
__decorate([query(".ripple")], M3eBreadcrumbItemButtonElement.prototype, "_ripple", void 0);
|
|
@@ -2473,7 +2473,7 @@ M3eBreadcrumbItemElement = __decorate([customElement$1("m3e-breadcrumb-item")],
|
|
|
2473
2473
|
*/
|
|
2474
2474
|
const ButtonSizeToken = {
|
|
2475
2475
|
"extra-small": {
|
|
2476
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken$1.density.calc(
|
|
2476
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
2477
2477
|
outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
|
|
2478
2478
|
labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
|
|
2479
2479
|
labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
|
|
@@ -2490,7 +2490,7 @@ const ButtonSizeToken = {
|
|
|
2490
2490
|
iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
|
|
2491
2491
|
},
|
|
2492
2492
|
small: {
|
|
2493
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-
|
|
2493
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
2494
2494
|
outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
|
|
2495
2495
|
labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
|
|
2496
2496
|
labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
|
|
@@ -2507,7 +2507,7 @@ const ButtonSizeToken = {
|
|
|
2507
2507
|
iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
|
|
2508
2508
|
},
|
|
2509
2509
|
medium: {
|
|
2510
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-
|
|
2510
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
2511
2511
|
outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
|
|
2512
2512
|
labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}))`),
|
|
2513
2513
|
labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}))`),
|
|
@@ -3591,6 +3591,8 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick$1(LinkButton
|
|
|
3591
3591
|
constructor() {
|
|
3592
3592
|
super();
|
|
3593
3593
|
_M3eButtonElement_instances.add(this);
|
|
3594
|
+
/** @internal */
|
|
3595
|
+
this._adjacentPressedTimeout = -1;
|
|
3594
3596
|
/** @private */
|
|
3595
3597
|
_M3eButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleClick).call(this, e));
|
|
3596
3598
|
/**
|
|
@@ -3735,6 +3737,10 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
|
|
|
3735
3737
|
const group = this.closest("m3e-button-group");
|
|
3736
3738
|
if (group && group.variant === "standard") {
|
|
3737
3739
|
const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
|
|
3740
|
+
for (const button of buttons) {
|
|
3741
|
+
clearTimeout(button._adjacentPressedTimeout);
|
|
3742
|
+
button._adjacentPressedTimeout = -1;
|
|
3743
|
+
}
|
|
3738
3744
|
const index = buttons.indexOf(this);
|
|
3739
3745
|
if (pressed) {
|
|
3740
3746
|
const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
|
|
@@ -3766,14 +3772,14 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
|
|
|
3766
3772
|
if (!prefersReducedMotion$1()) {
|
|
3767
3773
|
this.addEventListener("transitionend", e => {
|
|
3768
3774
|
if (e.propertyName === "width") {
|
|
3769
|
-
|
|
3770
|
-
// Pressed
|
|
3775
|
+
this._adjacentPressedTimeout = setTimeout(() => {
|
|
3776
|
+
// Pressed timeout is tested to ensure this runs only when the button
|
|
3771
3777
|
// is no longer pressed. This handles changes to pressed state in
|
|
3772
3778
|
// quick succession.
|
|
3773
|
-
if (
|
|
3779
|
+
if (this._adjacentPressedTimeout > -1) {
|
|
3774
3780
|
__classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_cleanupAdjacentPressed).call(this, buttons);
|
|
3775
3781
|
}
|
|
3776
|
-
});
|
|
3782
|
+
}, 600);
|
|
3777
3783
|
}
|
|
3778
3784
|
}, {
|
|
3779
3785
|
once: true
|
|
@@ -5647,6 +5653,11 @@ _M3eCheckboxElement_renderIcon = function _M3eCheckboxElement_renderIcon() {
|
|
|
5647
5653
|
};
|
|
5648
5654
|
_M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
|
|
5649
5655
|
if (e.defaultPrevented) return;
|
|
5656
|
+
if (this.disabled) {
|
|
5657
|
+
e.preventDefault();
|
|
5658
|
+
e.stopImmediatePropagation();
|
|
5659
|
+
return;
|
|
5660
|
+
}
|
|
5650
5661
|
if (this.dispatchEvent(new Event("beforeinput", {
|
|
5651
5662
|
bubbles: true,
|
|
5652
5663
|
cancelable: true
|
|
@@ -5794,7 +5805,7 @@ _M3eChipElement_handleSlotChange = function _M3eChipElement_handleSlotChange(e)
|
|
|
5794
5805
|
__classPrivateFieldSet(this, _M3eChipElement_textContent, getTextContent$1(e.target), "f");
|
|
5795
5806
|
};
|
|
5796
5807
|
/** The styles of the element. */
|
|
5797
|
-
M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken$1.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-
|
|
5808
|
+
M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken$1.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken$1.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken$1.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken$1.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken$1.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken$1.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken$1.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
|
|
5798
5809
|
__decorate([query(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
|
|
5799
5810
|
__decorate([query(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
|
|
5800
5811
|
__decorate([query(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
|
|
@@ -6351,7 +6362,7 @@ _M3eInputChipElement_handleKeyDown = function _M3eInputChipElement_handleKeyDown
|
|
|
6351
6362
|
/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
|
|
6352
6363
|
M3eInputChipElement.formAssociated = true;
|
|
6353
6364
|
/** The styles of the element. */
|
|
6354
|
-
M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-
|
|
6365
|
+
M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken$1.density.calc(-3)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken$1.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken$1.color.onSurface}); } :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
|
|
6355
6366
|
__decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
|
|
6356
6367
|
__decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
|
|
6357
6368
|
__decorate([property({
|
|
@@ -13937,11 +13948,11 @@ const FabSizeToken = {
|
|
|
13937
13948
|
labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight}))`),
|
|
13938
13949
|
labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight}))`),
|
|
13939
13950
|
labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking}))`),
|
|
13940
|
-
iconSize: unsafeCSS(
|
|
13951
|
+
iconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
|
|
13941
13952
|
extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
|
|
13942
13953
|
shape: unsafeCSS(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.large}))`),
|
|
13943
|
-
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13944
|
-
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13954
|
+
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13955
|
+
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13945
13956
|
iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),
|
|
13946
13957
|
extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),
|
|
13947
13958
|
extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")
|
|
@@ -13953,11 +13964,11 @@ const FabSizeToken = {
|
|
|
13953
13964
|
labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}))`),
|
|
13954
13965
|
labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}))`),
|
|
13955
13966
|
labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}))`),
|
|
13956
|
-
iconSize: unsafeCSS(
|
|
13967
|
+
iconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
|
|
13957
13968
|
extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
|
|
13958
13969
|
shape: unsafeCSS(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.largeIncreased}))`),
|
|
13959
|
-
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13960
|
-
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13970
|
+
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13971
|
+
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13961
13972
|
iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),
|
|
13962
13973
|
extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),
|
|
13963
13974
|
extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")
|
|
@@ -13969,11 +13980,11 @@ const FabSizeToken = {
|
|
|
13969
13980
|
labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
|
|
13970
13981
|
labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
|
|
13971
13982
|
labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}))`),
|
|
13972
|
-
iconSize: unsafeCSS(
|
|
13983
|
+
iconSize: unsafeCSS("calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
|
|
13973
13984
|
extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
|
|
13974
13985
|
shape: unsafeCSS(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.extraLarge}))`),
|
|
13975
|
-
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13976
|
-
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
13986
|
+
leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13987
|
+
trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
13977
13988
|
iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),
|
|
13978
13989
|
extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),
|
|
13979
13990
|
extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")
|
|
@@ -15813,14 +15824,13 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
|
|
|
15813
15824
|
}
|
|
15814
15825
|
};
|
|
15815
15826
|
(() => {
|
|
15816
|
-
registerStyleSheet$1(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-
|
|
15827
|
+
registerStyleSheet$1(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken$1.density.calc(-3)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
|
|
15817
15828
|
})();
|
|
15818
15829
|
/** The styles of the element. */
|
|
15819
|
-
M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken$1.density.calc(-
|
|
15830
|
+
M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken$1.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken$1.motion.duration.short4},
|
|
15820
15831
|
font-size ${DesignToken$1.motion.duration.short4},
|
|
15821
|
-
line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top:
|
|
15822
|
-
margin-top ${DesignToken$1.motion.duration.short4},
|
|
15823
|
-
margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
|
|
15832
|
+
line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0.25rem; transform: translateY(-0.25rem); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short4},
|
|
15833
|
+
transform ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${DesignToken$1.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
|
|
15824
15834
|
__decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
|
|
15825
15835
|
__decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
|
|
15826
15836
|
__decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
|
|
@@ -16295,88 +16305,88 @@ function registerIcon(name, variant, data) {
|
|
|
16295
16305
|
const IconButtonSizeToken = {
|
|
16296
16306
|
/** Design tokens that control the `extra-small` `size` variant. */
|
|
16297
16307
|
"extra-small": {
|
|
16298
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(
|
|
16308
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16299
16309
|
outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
|
|
16300
|
-
iconSize: unsafeCSS(`
|
|
16310
|
+
iconSize: unsafeCSS(`var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem))`),
|
|
16301
16311
|
shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
|
|
16302
16312
|
shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
|
|
16303
16313
|
selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
|
|
16304
16314
|
selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
|
|
16305
16315
|
shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
|
|
16306
|
-
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(
|
|
16307
|
-
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(
|
|
16308
|
-
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${DesignToken$1.density.calc(
|
|
16309
|
-
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${DesignToken$1.density.calc(
|
|
16310
|
-
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${DesignToken$1.density.calc(
|
|
16311
|
-
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${DesignToken$1.density.calc(
|
|
16316
|
+
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16317
|
+
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16318
|
+
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16319
|
+
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16320
|
+
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16321
|
+
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
|
|
16312
16322
|
},
|
|
16313
16323
|
/** Design tokens that control the `small` `size` variant. */
|
|
16314
16324
|
small: {
|
|
16315
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-
|
|
16325
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16316
16326
|
outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
|
|
16317
|
-
iconSize: unsafeCSS(`
|
|
16327
|
+
iconSize: unsafeCSS(`var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
|
|
16318
16328
|
shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
|
|
16319
16329
|
shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
|
|
16320
16330
|
selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
|
|
16321
16331
|
selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
|
|
16322
16332
|
shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
|
|
16323
|
-
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(-
|
|
16324
|
-
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(-
|
|
16325
|
-
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken$1.density.calc(-
|
|
16326
|
-
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken$1.density.calc(-
|
|
16327
|
-
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken$1.density.calc(-
|
|
16328
|
-
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken$1.density.calc(-
|
|
16333
|
+
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16334
|
+
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16335
|
+
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16336
|
+
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16337
|
+
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16338
|
+
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
|
|
16329
16339
|
},
|
|
16330
16340
|
/** Design tokens that control the `medium` `size` variant. */
|
|
16331
16341
|
medium: {
|
|
16332
|
-
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-
|
|
16342
|
+
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16333
16343
|
outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
|
|
16334
|
-
iconSize: unsafeCSS(`
|
|
16344
|
+
iconSize: unsafeCSS(`var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
|
|
16335
16345
|
shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
|
|
16336
16346
|
shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
|
|
16337
16347
|
selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
|
|
16338
16348
|
selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
|
|
16339
16349
|
shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.medium}))`),
|
|
16340
|
-
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken$1.density.calc(-
|
|
16341
|
-
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken$1.density.calc(-
|
|
16342
|
-
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken$1.density.calc(-
|
|
16343
|
-
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-
|
|
16344
|
-
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken$1.density.calc(-
|
|
16345
|
-
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken$1.density.calc(-
|
|
16350
|
+
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16351
|
+
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16352
|
+
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16353
|
+
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16354
|
+
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16355
|
+
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
|
|
16346
16356
|
},
|
|
16347
16357
|
/** Design tokens that control the `large` `size` variant. */
|
|
16348
16358
|
large: {
|
|
16349
16359
|
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16350
16360
|
outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
|
|
16351
|
-
iconSize: unsafeCSS(`
|
|
16361
|
+
iconSize: unsafeCSS(`var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem))`),
|
|
16352
16362
|
shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
|
|
16353
16363
|
shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
|
|
16354
16364
|
selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
|
|
16355
16365
|
selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
|
|
16356
16366
|
shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
|
|
16357
|
-
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16358
|
-
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16359
|
-
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16360
|
-
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16361
|
-
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16362
|
-
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`)
|
|
16367
|
+
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16368
|
+
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16369
|
+
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16370
|
+
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16371
|
+
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16372
|
+
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
|
|
16363
16373
|
},
|
|
16364
16374
|
/** Design tokens that control the `extra-large` `size` variant. */
|
|
16365
16375
|
"extra-large": {
|
|
16366
16376
|
containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16367
16377
|
outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
|
|
16368
|
-
iconSize: unsafeCSS(`
|
|
16378
|
+
iconSize: unsafeCSS(`var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem))`),
|
|
16369
16379
|
shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
|
|
16370
16380
|
shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
|
|
16371
16381
|
selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
|
|
16372
16382
|
selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
|
|
16373
16383
|
shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
|
|
16374
|
-
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16375
|
-
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16376
|
-
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16377
|
-
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16378
|
-
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`),
|
|
16379
|
-
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`)
|
|
16384
|
+
narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16385
|
+
narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16386
|
+
defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16387
|
+
defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16388
|
+
wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`),
|
|
16389
|
+
wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + calc(${DesignToken$1.density.calc(-3)} / 2))`)
|
|
16380
16390
|
}
|
|
16381
16391
|
};
|
|
16382
16392
|
|
|
@@ -17119,6 +17129,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick$1(Li
|
|
|
17119
17129
|
constructor() {
|
|
17120
17130
|
super();
|
|
17121
17131
|
_M3eIconButtonElement_instances.add(this);
|
|
17132
|
+
/** @internal */
|
|
17133
|
+
this._adjacentPressedTimeout = -1;
|
|
17122
17134
|
/** @private */
|
|
17123
17135
|
_M3eIconButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleClick).call(this, e));
|
|
17124
17136
|
/**
|
|
@@ -17245,6 +17257,10 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
|
|
|
17245
17257
|
const group = this.closest("m3e-button-group");
|
|
17246
17258
|
if (group && group.variant === "standard") {
|
|
17247
17259
|
const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
|
|
17260
|
+
for (const button of buttons) {
|
|
17261
|
+
clearTimeout(button._adjacentPressedTimeout);
|
|
17262
|
+
button._adjacentPressedTimeout = -1;
|
|
17263
|
+
}
|
|
17248
17264
|
const index = buttons.indexOf(this);
|
|
17249
17265
|
if (pressed) {
|
|
17250
17266
|
const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
|
|
@@ -17276,14 +17292,14 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
|
|
|
17276
17292
|
if (!prefersReducedMotion$1()) {
|
|
17277
17293
|
this.addEventListener("transitionend", e => {
|
|
17278
17294
|
if (e.propertyName === "width") {
|
|
17279
|
-
|
|
17280
|
-
// Pressed
|
|
17295
|
+
this._adjacentPressedTimeout = setTimeout(() => {
|
|
17296
|
+
// Pressed timeout is tested to ensure this runs only when the button
|
|
17281
17297
|
// is no longer pressed. This handles changes to pressed state in
|
|
17282
17298
|
// quick succession.
|
|
17283
|
-
if (
|
|
17299
|
+
if (this._adjacentPressedTimeout > -1) {
|
|
17284
17300
|
__classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_cleanupAdjacentPressed).call(this, buttons);
|
|
17285
17301
|
}
|
|
17286
|
-
});
|
|
17302
|
+
}, 600);
|
|
17287
17303
|
}
|
|
17288
17304
|
}, {
|
|
17289
17305
|
once: true
|
|
@@ -18615,7 +18631,7 @@ class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(
|
|
|
18615
18631
|
}
|
|
18616
18632
|
}
|
|
18617
18633
|
/** The styles of the element. */
|
|
18618
|
-
MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height:
|
|
18634
|
+
MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-menu-item-container-height, 2.75rem) + ${DesignToken$1.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-menu-item-container-height, 2.75rem) + calc(var(--m3e-menu-gap, 0.125rem) * 2) + ${DesignToken$1.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
|
|
18619
18635
|
__decorate([query(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
|
|
18620
18636
|
__decorate([query(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
|
|
18621
18637
|
__decorate([query(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
|
|
@@ -19288,7 +19304,7 @@ M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin:
|
|
|
19288
19304
|
transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
|
|
19289
19305
|
overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
|
|
19290
19306
|
display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
|
|
19291
|
-
border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken$1.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken$1.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken$1.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; }
|
|
19307
|
+
border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); animation: ${unsafeCSS(`bounce-open ${DesignToken$1.motion.duration.medium1} ${DesignToken$1.motion.easing.standard}`)}; } @keyframes bounce-open { 0% { transform: scaleY(0.8); } 70% { transform: scaleY(1.02); } 100% { transform: scaleY(1); } } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken$1.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken$1.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken$1.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken$1.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
|
|
19292
19308
|
__decorate([property({
|
|
19293
19309
|
attribute: "position-x"
|
|
19294
19310
|
})], M3eMenuElement.prototype, "positionX", void 0);
|
|
@@ -21022,7 +21038,7 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
|
|
|
21022
21038
|
}
|
|
21023
21039
|
};
|
|
21024
21040
|
/** The styles of the element. */
|
|
21025
|
-
M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height:
|
|
21041
|
+
M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-option-container-height, 2.75rem) + ${DesignToken$1.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken$1.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken$1.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken$1.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken$1.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken$1.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken$1.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-option-container-height, 2.75rem) + calc(var(--m3e-option-panel-gap, 0.125rem) * 2) + ${DesignToken$1.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken$1.motion.spring.fastEffects}, width ${DesignToken$1.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:is(:state(--empty), :--empty)) .icon, :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
|
|
21026
21042
|
__decorate([query(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
|
|
21027
21043
|
__decorate([query(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
|
|
21028
21044
|
__decorate([query(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
|
|
@@ -21436,7 +21452,7 @@ _M3ePaginatorElement_emitPageEvent = function _M3ePaginatorElement_emitPageEvent
|
|
|
21436
21452
|
}));
|
|
21437
21453
|
};
|
|
21438
21454
|
/** The styles of the element. */
|
|
21439
|
-
M3ePaginatorElement.styles = css`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; } .form-field { --md-sys-density-scale: -2; --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`;
|
|
21455
|
+
M3ePaginatorElement.styles = css`:host { display: block; } .outer { display: flex; font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .inner { display: flex; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; width: 100%; --_density-scale: ${DesignToken$1.density.scale}; } .form-field { --md-sys-density-scale: min(-2, var(--_density-scale)); --m3e-form-field-font-size: var(--m3e-paginator-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); --m3e-form-field-font-weight: var( --m3e-paginator-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight} ); --m3e-form-field-line-height: var( --m3e-paginator-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight} ); --m3e-form-field-tracking: var(--m3e-paginator-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); } .items-per-page-label { display: flex; align-items: center; margin-inline-end: 0.5rem; } .form-field { min-width: auto; width: 6rem; margin-inline: 0.25rem; } .range-label { margin-inline: 1.5rem 2rem; } :host([hide-page-size]) .range-label { margin-inline-start: unset; } .range-actions { display: flex; align-items: center; } ::slotted([slot="first-page-icon"]), ::slotted([slot="previous-page-icon"]), ::slotted([slot="next-page-icon"]), ::slotted([slot="last-page-icon"]), svg { width: 1em; font-size: var(--m3e-icon-button-medium-icon-size, 1.5rem) !important; } :host(:dir(rtl)) svg { transform: rotate(180deg); }`;
|
|
21440
21456
|
/* @private */
|
|
21441
21457
|
M3ePaginatorElement.__nextId = 0;
|
|
21442
21458
|
__decorate([property({
|
|
@@ -22269,7 +22285,12 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
|
|
|
22269
22285
|
return html`<svg viewBox="0 0 20 20"><mask id="cutout2"><rect width="100%" height="100%" fill="white"></rect><circle cx="10" cy="10" r="8" fill="black"></circle></mask><circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle><circle class="inner circle" cx="10" cy="10" r="5"></circle></svg>`;
|
|
22270
22286
|
};
|
|
22271
22287
|
_M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
|
|
22272
|
-
if (e.defaultPrevented || this.checked
|
|
22288
|
+
if (e.defaultPrevented || this.checked) return;
|
|
22289
|
+
if (this.disabled) {
|
|
22290
|
+
e.preventDefault();
|
|
22291
|
+
e.stopImmediatePropagation();
|
|
22292
|
+
return;
|
|
22293
|
+
}
|
|
22273
22294
|
if (this.dispatchEvent(new Event("beforeinput", {
|
|
22274
22295
|
bubbles: true,
|
|
22275
22296
|
cancelable: true
|
|
@@ -25642,7 +25663,7 @@ _M3eSplitButtonElement_updateButtonShape = function _M3eSplitButtonElement_updat
|
|
|
25642
25663
|
}
|
|
25643
25664
|
};
|
|
25644
25665
|
/** The styles of the element. */
|
|
25645
|
-
M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size:
|
|
25666
|
+
M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken$1.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken$1.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken$1.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken$1.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken$1.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken$1.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-icon-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-icon-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); --m3e-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
|
|
25646
25667
|
__decorate([query(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
|
|
25647
25668
|
__decorate([property({
|
|
25648
25669
|
reflect: true
|
|
@@ -27067,25 +27088,25 @@ const SwitchToken = {
|
|
|
27067
27088
|
selectedIconSize: unsafeCSS("var(--m3e-switch-selected-icon-size, 1rem)"),
|
|
27068
27089
|
unselectedIconColor: unsafeCSS(`var(--m3e-switch-unselected-icon-color, ${DesignToken$1.color.surfaceContainerHighest})`),
|
|
27069
27090
|
unselectedIconSize: unsafeCSS("var(--m3e-switch-unselected-icon-size, 1rem)"),
|
|
27070
|
-
trackHeight: unsafeCSS(
|
|
27071
|
-
trackWidth: unsafeCSS(
|
|
27091
|
+
trackHeight: unsafeCSS(`calc(var(--m3e-switch-track-height, 2rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27092
|
+
trackWidth: unsafeCSS(`calc(var(--m3e-switch-track-width, 3.25rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27072
27093
|
trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken$1.color.outline})`),
|
|
27073
27094
|
trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 2px)"),
|
|
27074
27095
|
trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken$1.shape.corner.full})`),
|
|
27075
27096
|
selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken$1.color.primary})`),
|
|
27076
27097
|
unselectedTrackColor: unsafeCSS(`var(--m3e-switch-unselected-track-color, ${DesignToken$1.color.surfaceContainerHighest})`),
|
|
27077
|
-
unselectedHandleHeight: unsafeCSS(
|
|
27078
|
-
unselectedHandleWidth: unsafeCSS(
|
|
27079
|
-
withIconHandleHeight: unsafeCSS(
|
|
27080
|
-
withIconHandleWidth: unsafeCSS(
|
|
27081
|
-
selectedHandleHeight: unsafeCSS(
|
|
27082
|
-
selectedHandleWidth: unsafeCSS(
|
|
27083
|
-
pressedHandleHeight: unsafeCSS(
|
|
27084
|
-
pressedHandleWidth: unsafeCSS(
|
|
27098
|
+
unselectedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-unselected-handle-height, 1rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27099
|
+
unselectedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-unselected-handle-width, 1rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27100
|
+
withIconHandleHeight: unsafeCSS(`calc(var(--m3e-switch-with-icon-handle-height, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27101
|
+
withIconHandleWidth: unsafeCSS(`calc(var(--m3e-switch-with-icon-handle-width, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27102
|
+
selectedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-selected-handle-height, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27103
|
+
selectedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-selected-handle-width, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27104
|
+
pressedHandleHeight: unsafeCSS(`calc(var(--m3e-switch-pressed-handle-height, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27105
|
+
pressedHandleWidth: unsafeCSS(`calc(var(--m3e-switch-pressed-handle-width, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27085
27106
|
handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken$1.shape.corner.full})`),
|
|
27086
27107
|
selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken$1.color.onPrimary})`),
|
|
27087
27108
|
unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken$1.color.outline})`),
|
|
27088
|
-
stateLayerSize: unsafeCSS(
|
|
27109
|
+
stateLayerSize: unsafeCSS(`calc(var(--m3e-switch-state-layer-size, 2.5rem) + ${DesignToken$1.density.calc(-3)})`),
|
|
27089
27110
|
stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken$1.shape.corner.full})`),
|
|
27090
27111
|
disabledSelectedIconColor: unsafeCSS(`var(--m3e-switch-disabled-selected-icon-color, ${DesignToken$1.color.onSurface})`),
|
|
27091
27112
|
disabledSelectedIconOpacity: unsafeCSS("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),
|
|
@@ -27355,6 +27376,11 @@ _M3eSwitchElement_renderIcon = function _M3eSwitchElement_renderIcon() {
|
|
|
27355
27376
|
};
|
|
27356
27377
|
_M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
|
|
27357
27378
|
if (e.defaultPrevented) return;
|
|
27379
|
+
if (this.disabled) {
|
|
27380
|
+
e.preventDefault();
|
|
27381
|
+
e.stopImmediatePropagation();
|
|
27382
|
+
return;
|
|
27383
|
+
}
|
|
27358
27384
|
if (this.dispatchEvent(new Event("beforeinput", {
|
|
27359
27385
|
bubbles: true,
|
|
27360
27386
|
cancelable: true
|
|
@@ -34995,7 +35021,7 @@ async function getColorFromImage(image) {
|
|
|
34995
35021
|
return hexFromArgb(await sourceColorFromImage(image));
|
|
34996
35022
|
}
|
|
34997
35023
|
|
|
34998
|
-
var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
|
|
35024
|
+
var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getVariant, _M3eThemeElement_getContrastLevel;
|
|
34999
35025
|
/**
|
|
35000
35026
|
* A non-visual element responsible for application-level theming.
|
|
35001
35027
|
*
|
|
@@ -35030,6 +35056,7 @@ var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_fi
|
|
|
35030
35056
|
* @attr density - The density scale (0, -1, -2).
|
|
35031
35057
|
* @attr scheme - The color scheme of the theme.
|
|
35032
35058
|
* @attr strong-focus - Whether to enable strong focus indicators.
|
|
35059
|
+
* @attr variant - The color variant of the theme.
|
|
35033
35060
|
*
|
|
35034
35061
|
* @fires change - Dispatched when the theme changes.
|
|
35035
35062
|
*/
|
|
@@ -35054,6 +35081,10 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
|
|
|
35054
35081
|
* @default "#6750A4"
|
|
35055
35082
|
*/
|
|
35056
35083
|
this.color = "#6750A4";
|
|
35084
|
+
/** The color variant of the theme.
|
|
35085
|
+
* @default "neutral"
|
|
35086
|
+
*/
|
|
35087
|
+
this.variant = "neutral";
|
|
35057
35088
|
/**
|
|
35058
35089
|
* The color scheme of the theme.
|
|
35059
35090
|
* @default "auto"
|
|
@@ -35158,7 +35189,7 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
|
|
|
35158
35189
|
const theme = themeFromSourceColor(color);
|
|
35159
35190
|
const scheme = new DynamicScheme({
|
|
35160
35191
|
sourceColorHct: Hct.fromInt(color),
|
|
35161
|
-
variant:
|
|
35192
|
+
variant: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getVariant).call(this),
|
|
35162
35193
|
contrastLevel: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this),
|
|
35163
35194
|
isDark: this.isDark,
|
|
35164
35195
|
primaryPalette: theme.palettes.primary,
|
|
@@ -35228,6 +35259,29 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
|
|
|
35228
35259
|
void document.body.offsetHeight;
|
|
35229
35260
|
}
|
|
35230
35261
|
};
|
|
35262
|
+
_M3eThemeElement_getVariant = function _M3eThemeElement_getVariant() {
|
|
35263
|
+
switch (this.variant) {
|
|
35264
|
+
case "neutral":
|
|
35265
|
+
return 1;
|
|
35266
|
+
case "tonal-spot":
|
|
35267
|
+
return 2;
|
|
35268
|
+
case "vibrant":
|
|
35269
|
+
return 3;
|
|
35270
|
+
case "expressive":
|
|
35271
|
+
return 4;
|
|
35272
|
+
case "fidelity":
|
|
35273
|
+
return 5;
|
|
35274
|
+
case "content":
|
|
35275
|
+
return 6;
|
|
35276
|
+
case "rainbow":
|
|
35277
|
+
return 7;
|
|
35278
|
+
case "fruit-salad":
|
|
35279
|
+
return 8;
|
|
35280
|
+
default:
|
|
35281
|
+
return 0;
|
|
35282
|
+
// monochrome
|
|
35283
|
+
}
|
|
35284
|
+
};
|
|
35231
35285
|
_M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel() {
|
|
35232
35286
|
switch (this.contrast) {
|
|
35233
35287
|
case "high":
|
|
@@ -35291,6 +35345,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
|
|
|
35291
35345
|
/** The styles of the element. */
|
|
35292
35346
|
M3eThemeElement.styles = css`:host { display: contents; }`;
|
|
35293
35347
|
__decorate([property()], M3eThemeElement.prototype, "color", void 0);
|
|
35348
|
+
__decorate([property()], M3eThemeElement.prototype, "variant", void 0);
|
|
35294
35349
|
__decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
|
|
35295
35350
|
__decorate([property()], M3eThemeElement.prototype, "contrast", void 0);
|
|
35296
35351
|
__decorate([property({
|
|
@@ -35303,6 +35358,147 @@ __decorate([property({
|
|
|
35303
35358
|
__decorate([property()], M3eThemeElement.prototype, "motion", void 0);
|
|
35304
35359
|
M3eThemeElement = __decorate([customElement$1("m3e-theme")], M3eThemeElement);
|
|
35305
35360
|
|
|
35361
|
+
var _M3eThemeIconElement_instances, _M3eThemeIconElement_light, _M3eThemeIconElement_dark, _M3eThemeIconElement_colorSchemeChangeHandler, _M3eThemeIconElement_getVariant;
|
|
35362
|
+
/**
|
|
35363
|
+
* An icon that visually presents a preview of a theme.
|
|
35364
|
+
*
|
|
35365
|
+
* @description
|
|
35366
|
+
* The `m3e-theme-icon` renders a small preview of a theme's surface and primary colors.
|
|
35367
|
+
*
|
|
35368
|
+
* @example
|
|
35369
|
+
* The following example presents a preview of a teal light theme.
|
|
35370
|
+
* ```html
|
|
35371
|
+
* <m3e-theme-icon color="#004f4f" scheme="light"></m3e-theme-icon>
|
|
35372
|
+
* ```
|
|
35373
|
+
*
|
|
35374
|
+
* @tag m3e-theme-icon
|
|
35375
|
+
*
|
|
35376
|
+
* @attr color - The hex color of the theme to preview
|
|
35377
|
+
* @attr scheme - The color scheme of the theme to preview.
|
|
35378
|
+
* @attr variant - The color variant of the theme to preview.
|
|
35379
|
+
*
|
|
35380
|
+
* @cssprop --m3e-theme-icon-size - Size of the theme icon.
|
|
35381
|
+
* @cssprop --m3e-theme-icon-shape - Border radius of the icon container.
|
|
35382
|
+
* @cssprop --m3e-theme-icon-outline-color - Outline stroke color of the icon border.
|
|
35383
|
+
* @cssprop --m3e-theme-icon-outline-opacity - Opacity percentage applied to the outline color.
|
|
35384
|
+
* @cssprop --m3e-theme-icon-container-color - Fill color for the container layer of the previewed theme.
|
|
35385
|
+
* @cssprop --m3e-theme-icon-color - Fill color for the primary layer of the previewed theme.
|
|
35386
|
+
*/
|
|
35387
|
+
let M3eThemeIconElement = class M3eThemeIconElement extends Role$1(LitElement, "img") {
|
|
35388
|
+
constructor() {
|
|
35389
|
+
super(...arguments);
|
|
35390
|
+
_M3eThemeIconElement_instances.add(this);
|
|
35391
|
+
/** @private */
|
|
35392
|
+
_M3eThemeIconElement_light.set(this, void 0);
|
|
35393
|
+
/** @private */
|
|
35394
|
+
_M3eThemeIconElement_dark.set(this, void 0);
|
|
35395
|
+
/** @private */
|
|
35396
|
+
_M3eThemeIconElement_colorSchemeChangeHandler.set(this, () => this.requestUpdate());
|
|
35397
|
+
/**
|
|
35398
|
+
* The hex color of the theme to preview
|
|
35399
|
+
* @default "#6750A4"
|
|
35400
|
+
*/
|
|
35401
|
+
this.color = "#6750A4";
|
|
35402
|
+
/** The color variant of the theme.
|
|
35403
|
+
* @default "neutral"
|
|
35404
|
+
*/
|
|
35405
|
+
this.variant = "neutral";
|
|
35406
|
+
/**
|
|
35407
|
+
* The color scheme of the theme.
|
|
35408
|
+
* @default "auto"
|
|
35409
|
+
*/
|
|
35410
|
+
this.scheme = "auto";
|
|
35411
|
+
}
|
|
35412
|
+
/** Whether a dark theme is applied. */
|
|
35413
|
+
get isDark() {
|
|
35414
|
+
switch (this.scheme) {
|
|
35415
|
+
case "light":
|
|
35416
|
+
return false;
|
|
35417
|
+
case "dark":
|
|
35418
|
+
return true;
|
|
35419
|
+
default:
|
|
35420
|
+
// auto
|
|
35421
|
+
if (this.parentElement instanceof HTMLBodyElement) {
|
|
35422
|
+
switch (document.documentElement.style.colorScheme) {
|
|
35423
|
+
case "light":
|
|
35424
|
+
return false;
|
|
35425
|
+
case "dark":
|
|
35426
|
+
return true;
|
|
35427
|
+
}
|
|
35428
|
+
}
|
|
35429
|
+
return __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")?.matches ?? false;
|
|
35430
|
+
}
|
|
35431
|
+
}
|
|
35432
|
+
/** @inheritdoc */
|
|
35433
|
+
connectedCallback() {
|
|
35434
|
+
super.connectedCallback();
|
|
35435
|
+
__classPrivateFieldSet(this, _M3eThemeIconElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
|
|
35436
|
+
__classPrivateFieldSet(this, _M3eThemeIconElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
|
|
35437
|
+
[__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x.addEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
|
|
35438
|
+
}
|
|
35439
|
+
/** @inheritdoc */
|
|
35440
|
+
disconnectedCallback() {
|
|
35441
|
+
super.disconnectedCallback();
|
|
35442
|
+
[__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
|
|
35443
|
+
__classPrivateFieldSet(this, _M3eThemeIconElement_light, __classPrivateFieldSet(this, _M3eThemeIconElement_dark, undefined, "f"), "f");
|
|
35444
|
+
}
|
|
35445
|
+
/** @inheritdoc */
|
|
35446
|
+
updated(_changedProperties) {
|
|
35447
|
+
super.updated(_changedProperties);
|
|
35448
|
+
const base = this.shadowRoot?.querySelector(".base");
|
|
35449
|
+
const color = argbFromHex(this.color);
|
|
35450
|
+
const theme = themeFromSourceColor(color);
|
|
35451
|
+
const scheme = new DynamicScheme({
|
|
35452
|
+
sourceColorHct: Hct.fromInt(color),
|
|
35453
|
+
variant: __classPrivateFieldGet(this, _M3eThemeIconElement_instances, "m", _M3eThemeIconElement_getVariant).call(this),
|
|
35454
|
+
contrastLevel: 0,
|
|
35455
|
+
isDark: this.isDark,
|
|
35456
|
+
primaryPalette: theme.palettes.primary,
|
|
35457
|
+
neutralPalette: theme.palettes.neutral
|
|
35458
|
+
});
|
|
35459
|
+
const dynamicColors = new MaterialDynamicColors();
|
|
35460
|
+
base?.style.setProperty("--_theme-icon-container-color", hexFromArgb(dynamicColors.surface().getArgb(scheme)));
|
|
35461
|
+
base?.style.setProperty("--_theme-icon-color", hexFromArgb(dynamicColors.primary().getArgb(scheme)));
|
|
35462
|
+
}
|
|
35463
|
+
/** @inheritdoc */
|
|
35464
|
+
render() {
|
|
35465
|
+
return html`<div class="base"><svg viewBox="0 0 80 80" class="icon"><path class="container" d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/><path class="color" d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/><path class="color" d="M0 0h80v17.24H0V0z"/></svg></div>`;
|
|
35466
|
+
}
|
|
35467
|
+
};
|
|
35468
|
+
_M3eThemeIconElement_light = new WeakMap();
|
|
35469
|
+
_M3eThemeIconElement_dark = new WeakMap();
|
|
35470
|
+
_M3eThemeIconElement_colorSchemeChangeHandler = new WeakMap();
|
|
35471
|
+
_M3eThemeIconElement_instances = new WeakSet();
|
|
35472
|
+
_M3eThemeIconElement_getVariant = function _M3eThemeIconElement_getVariant() {
|
|
35473
|
+
switch (this.variant) {
|
|
35474
|
+
case "neutral":
|
|
35475
|
+
return 1;
|
|
35476
|
+
case "tonal-spot":
|
|
35477
|
+
return 2;
|
|
35478
|
+
case "vibrant":
|
|
35479
|
+
return 3;
|
|
35480
|
+
case "expressive":
|
|
35481
|
+
return 4;
|
|
35482
|
+
case "fidelity":
|
|
35483
|
+
return 5;
|
|
35484
|
+
case "content":
|
|
35485
|
+
return 6;
|
|
35486
|
+
case "rainbow":
|
|
35487
|
+
return 7;
|
|
35488
|
+
case "fruit-salad":
|
|
35489
|
+
return 8;
|
|
35490
|
+
default:
|
|
35491
|
+
return 0;
|
|
35492
|
+
// monochrome
|
|
35493
|
+
}
|
|
35494
|
+
};
|
|
35495
|
+
/** The styles of the element. */
|
|
35496
|
+
M3eThemeIconElement.styles = css`:host { display: inline-block; width: var(--m3e-theme-icon-size, 1.5rem); height: var(--m3e-theme-icon-size, 1.5rem); } .base { width: 100%; height: 100%; border-radius: var(--m3e-theme-icon-shape, ${DesignToken$1.shape.corner.extraSmall}); outline: solid 1px color-mix( in srgb, var(--m3e-theme-icon-outline-color, ${DesignToken$1.color.outlineVariant}) var(--m3e-theme-icon-outline-opacity, 50%), transparent ); } .icon { width: 100%; height: 100%; } .container { fill: var(--m3e-theme-icon-container-color, var(--_theme-icon-container-color)); } .color { fill: var(--m3e-theme-icon-color, var(--_theme-icon-color)); }`;
|
|
35497
|
+
__decorate([property()], M3eThemeIconElement.prototype, "color", void 0);
|
|
35498
|
+
__decorate([property()], M3eThemeIconElement.prototype, "variant", void 0);
|
|
35499
|
+
__decorate([property()], M3eThemeIconElement.prototype, "scheme", void 0);
|
|
35500
|
+
M3eThemeIconElement = __decorate([customElement$1("m3e-theme-icon")], M3eThemeIconElement);
|
|
35501
|
+
|
|
35306
35502
|
/**
|
|
35307
35503
|
* An item in a table of contents.
|
|
35308
35504
|
* @tag m3e-toc-item
|
|
@@ -37155,5 +37351,5 @@ __decorate([property({
|
|
|
37155
37351
|
})], M3eTreeElement.prototype, "cascade", void 0);
|
|
37156
37352
|
M3eTreeElement = M3eTreeElement_1 = __decorate([customElement$1("m3e-tree")], M3eTreeElement);
|
|
37157
37353
|
|
|
37158
|
-
export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eBreadcrumbElement, M3eBreadcrumbItemElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eContentPaneElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eTreeElement, M3eTreeItemElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getColorFromImage, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerIcon, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
|
|
37354
|
+
export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eBreadcrumbElement, M3eBreadcrumbItemElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eContentPaneElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eThemeIconElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eTreeElement, M3eTreeItemElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getColorFromImage, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerIcon, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
|
|
37159
37355
|
//# sourceMappingURL=all.js.map
|