@m3e/web 2.5.1 → 2.5.3

package/dist/all.js

@@ -2351,6 +2351,7 @@ var _M3eBreadcrumbItemElement_instances, _M3eBreadcrumbItemElement_defaultSepara
  * @tag m3e-breadcrumb-item
  *
  * @slot - Renders the content of the breadcrumb item.
+ * @slot icon - Renders an icon before the item's label.
  *
  * @attr item-label - The accessible label used by the internal breadcrumb button.
  * @attr disabled - Whether the breadcrumb item is disabled.
@@ -4229,7 +4230,11 @@ _M3eMonthViewElement_handleItemClick = function _M3eMonthViewElement_handleItemC
   if (item.ariaDisabled === "true" || !item.dataset["value"]) return;
   this.activeDate = new Date(item.dataset["value"]);
   this.activeDate = clampDate(this.activeDate, this.minDate, this.maxDate);
-  if (this.rangeStart) {
+  if (this.rangeEnd) {
+    this.rangeStart = this.activeDate;
+    this.rangeEnd = null;
+    __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
+  } else if (this.rangeStart) {
     if (compareDate(this.activeDate, this.rangeStart) < 0) {
       this.rangeStart = this.activeDate;
       this.rangeEnd = null;
@@ -4294,7 +4299,7 @@ _M3eMonthViewElement_handleItemFocus = function _M3eMonthViewElement_handleItemF
 };
 _M3eMonthViewElement_setRangeHighlight = function _M3eMonthViewElement_setRangeHighlight(item) {
   __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_clearRangeHighlight).call(this);
-  if (this.rangeStart && item.dataset["value"]) {
+  if (this.rangeStart && !this.rangeEnd && item.dataset["value"]) {
     if (compareDate(new Date(item.dataset["value"]), this.rangeStart) > 0) {
       item.parentElement.classList.add("range-highlight-end");
     }
@@ -4857,6 +4862,18 @@ let M3eCalendarElement = class M3eCalendarElement extends LitElement {
     if (changedProperties.has("startAt")) {
       this._activeDate = new Date(this.startAt ?? this.date ?? this._today);
     }
+    if (changedProperties.has("rangeStart") && this.rangeStart) {
+      this._activeDate = new Date(this.rangeStart);
+      if (!changedProperties.has("date")) {
+        this.date = new Date(this.rangeStart);
+      }
+    }
+    if (changedProperties.has("rangeEnd") && this.rangeEnd) {
+      this._activeDate = new Date(this.rangeEnd);
+      if (!changedProperties.has("date")) {
+        this.date = new Date(this.rangeEnd);
+      }
+    }
     if (changedProperties.has("startView")) {
       this._activeView = this.startView;
     }
@@ -11400,6 +11417,8 @@ var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleS
  *
  * @tag m3e-slide
  *
+ * @slot - Renders the items through which to cycle.
+ *
  * @attr selected-index - The zero-based index of the visible item.
  *
  * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
@@ -12217,6 +12236,12 @@ let M3eDatepickerElement = M3eDatepickerElement_1 = class M3eDatepickerElement e
     if (["date", "rangeStart", "rangeEnd"].some(x => changedProperties.has(x))) {
       __classPrivateFieldGet(this, _M3eDatepickerElement_instances, "m", _M3eDatepickerElement_clearSelectionState).call(this);
     }
+    if (changedProperties.has("rangeStart") && this.rangeStart && !changedProperties.has("date")) {
+      this.date = new Date(this.rangeStart);
+    }
+    if (changedProperties.has("rangeEnd") && this.rangeEnd && !changedProperties.has("date")) {
+      this.date = new Date(this.rangeEnd);
+    }
     if (changedProperties.has("variant")) {
       __classPrivateFieldGet(this, _M3eDatepickerElement_breakpointUnobserve, "f")?.call(this);
       if (this.variant === "auto") {
@@ -18120,7 +18145,7 @@ _M3eListOptionElement_handleClick = function _M3eListOptionElement_handleClick(e
   }
 };
 /** The styles of the element. */
-M3eListOptionElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:state(-three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:not(:disabled)) .base { color: var(--m3e-list-item-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } :host(:state(-hide-selection)) .indicator, :host(:not(:state(-hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`];
+M3eListOptionElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:state(-three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:not(:disabled)) .content { color: var(--m3e-list-item-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } :host(:state(-hide-selection)) .indicator, :host(:not(:state(-hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`];
 __decorate([query(".focus-ring")], M3eListOptionElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eListOptionElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eListOptionElement.prototype, "_ripple", void 0);
@@ -19563,7 +19588,7 @@ __decorate([property({
 })], M3eNavBarElement.prototype, "mode", void 0);
 M3eNavBarElement = __decorate([customElement$1("m3e-nav-bar")], M3eNavBarElement);
 
-var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick;
+var _M3eNavItemElement_instances, _M3eNavItemElement_clickHandler, _M3eNavItemElement_handleClick, _M3eNavItemElement_handleSelectedIconSlotChange;
 /**
  * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.
  *
@@ -19689,7 +19714,7 @@ let M3eNavItemElement = class M3eNavItemElement extends LinkButton$1(Selected$1(
   /** @inheritdoc */
   render() {
     const disabled = this.disabled || this.disabledInteractive;
-    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink$1]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon" aria-hidden="true"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`;
+    return html`${this.orientation === "vertical" ? html`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>` : nothing}<div class="outer">${this[renderPseudoLink$1]()}<div class="inner">${this.orientation === "horizontal" ? html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>` : nothing}<m3e-state-layer class="state-layer" ?disabled="${disabled}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon" aria-hidden="true"><slot name="icon"></slot><slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavItemElement_instances, "m", _M3eNavItemElement_handleSelectedIconSlotChange)}"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`;
   }
 };
 _M3eNavItemElement_clickHandler = new WeakMap();
@@ -19710,8 +19735,11 @@ _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
     this.selected = false;
   }
 };
+_M3eNavItemElement_handleSelectedIconSlotChange = function _M3eNavItemElement_handleSelectedIconSlotChange(e) {
+  setCustomState$1(this, "-with-selected-icon", hasAssignedNodes$1(e.target));
+};
 /** The styles of the element. */
-M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:state(-with-selected-icon))) slot[name="selected-icon"], :host([selected]:state(-with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([query(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
@@ -22271,9 +22299,9 @@ const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeho
  * Styles for `M3eSearchViewElement`.
  * @internal
  */
-const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
+const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
       overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-      display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
+      display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
       background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
         visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
@@ -24495,6 +24523,8 @@ var _M3eSliderElement_instances, _M3eSliderElement_directionalitySubscription, _
  *
  * @tag m3e-slider
  *
+ * @slot - Renders the thumbs of the slider.
+ *
  * @attr disabled - Whether the element is disabled.
  * @attr discrete - Whether to show tick marks.
  * @attr labelled - Whether to show value labels when activated.
@@ -27844,6 +27874,19 @@ function clampDouble(min, max, input) {
   }
   return input;
 }
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+function sanitizeDegreesInt(degrees) {
+  degrees = degrees % 360;
+  if (degrees < 0) {
+    degrees = degrees + 360;
+  }
+  return degrees;
+}
 /**
  * Sanitizes a degree measure as a floating-point number.
  *
@@ -27857,6 +27900,12 @@ function sanitizeDegreesDouble(degrees) {
   }
   return degrees;
 }
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+function differenceDegrees(a, b) {
+  return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
 /**
  * Multiplies a 1x3 row vector with a 3x3 matrix.
  */
@@ -27908,6 +27957,12 @@ function argbFromLinrgb(linrgb) {
   const b = delinearized(linrgb[2]);
   return argbFromRgb(r, g, b);
 }
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+function alphaFromArgb(argb) {
+  return argb >> 24 & 255;
+}
 /**
  * Returns the red component of a color in ARGB format.
  */
@@ -27948,6 +28003,50 @@ function xyzFromArgb(argb) {
   const b = linearized(blueFromArgb(argb));
   return matrixMultiply([r, g, b], SRGB_TO_XYZ);
 }
+/**
+ * Converts a color represented in Lab color space into an ARGB
+ * integer.
+ */
+function argbFromLab(l, a, b) {
+  const whitePoint = WHITE_POINT_D65;
+  const fy = (l + 16.0) / 116.0;
+  const fx = a / 500.0 + fy;
+  const fz = fy - b / 200.0;
+  const xNormalized = labInvf(fx);
+  const yNormalized = labInvf(fy);
+  const zNormalized = labInvf(fz);
+  const x = xNormalized * whitePoint[0];
+  const y = yNormalized * whitePoint[1];
+  const z = zNormalized * whitePoint[2];
+  return argbFromXyz(x, y, z);
+}
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ *
+ * @param argb the ARGB representation of a color
+ * @return a Lab object representing the color
+ */
+function labFromArgb(argb) {
+  const linearR = linearized(redFromArgb(argb));
+  const linearG = linearized(greenFromArgb(argb));
+  const linearB = linearized(blueFromArgb(argb));
+  const matrix = SRGB_TO_XYZ;
+  const x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+  const y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+  const z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+  const whitePoint = WHITE_POINT_D65;
+  const xNormalized = x / whitePoint[0];
+  const yNormalized = y / whitePoint[1];
+  const zNormalized = z / whitePoint[2];
+  const fx = labF(xNormalized);
+  const fy = labF(yNormalized);
+  const fz = labF(zNormalized);
+  const l = 116.0 * fy - 16;
+  const a = 500.0 * (fx - fy);
+  const b = 200.0 * (fy - fz);
+  return [l, a, b];
+}
 /**
  * Converts an L* value to an ARGB representation.
  *
@@ -30655,6 +30754,712 @@ class CorePalette {
   }
 }
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Provides conversions needed for K-Means quantization. Converting input to
+ * points, and converting the final state of the K-Means algorithm to colors.
+ */
+class LabPointProvider {
+  /**
+   * Convert a color represented in ARGB to a 3-element array of L*a*b*
+   * coordinates of the color.
+   */
+  fromInt(argb) {
+    return labFromArgb(argb);
+  }
+  /**
+   * Convert a 3-element array to a color represented in ARGB.
+   */
+  toInt(point) {
+    return argbFromLab(point[0], point[1], point[2]);
+  }
+  /**
+   * Standard CIE 1976 delta E formula also takes the square root, unneeded
+   * here. This method is used by quantization algorithms to compare distance,
+   * and the relative ordering is the same, with or without a square root.
+   *
+   * This relatively minor optimization is helpful because this method is
+   * called at least once for each pixel in an image.
+   */
+  distance(from, to) {
+    const dL = from[0] - to[0];
+    const dA = from[1] - to[1];
+    const dB = from[2] - to[2];
+    return dL * dL + dA * dA + dB * dB;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const MAX_ITERATIONS = 10;
+const MIN_MOVEMENT_DISTANCE = 3.0;
+/**
+ * An image quantizer that improves on the speed of a standard K-Means algorithm
+ * by implementing several optimizations, including deduping identical pixels
+ * and a triangle inequality rule that reduces the number of comparisons needed
+ * to identify which cluster a point should be moved to.
+ *
+ * Wsmeans stands for Weighted Square Means.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerWsmeans {
+  /**
+   * @param inputPixels Colors in ARGB format.
+   * @param startingClusters Defines the initial state of the quantizer. Passing
+   *     an empty array is fine, the implementation will create its own initial
+   *     state that leads to reproducible results for the same inputs.
+   *     Passing an array that is the result of Wu quantization leads to higher
+   *     quality results.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Colors in ARGB format.
+   */
+  static quantize(inputPixels, startingClusters, maxColors) {
+    const pixelToCount = new Map();
+    const points = new Array();
+    const pixels = new Array();
+    const pointProvider = new LabPointProvider();
+    let pointCount = 0;
+    for (let i = 0; i < inputPixels.length; i++) {
+      const inputPixel = inputPixels[i];
+      const pixelCount = pixelToCount.get(inputPixel);
+      if (pixelCount === undefined) {
+        pointCount++;
+        points.push(pointProvider.fromInt(inputPixel));
+        pixels.push(inputPixel);
+        pixelToCount.set(inputPixel, 1);
+      } else {
+        pixelToCount.set(inputPixel, pixelCount + 1);
+      }
+    }
+    const counts = new Array();
+    for (let i = 0; i < pointCount; i++) {
+      const pixel = pixels[i];
+      const count = pixelToCount.get(pixel);
+      if (count !== undefined) {
+        counts[i] = count;
+      }
+    }
+    let clusterCount = Math.min(maxColors, pointCount);
+    if (startingClusters.length > 0) {
+      clusterCount = Math.min(clusterCount, startingClusters.length);
+    }
+    const clusters = new Array();
+    for (let i = 0; i < startingClusters.length; i++) {
+      clusters.push(pointProvider.fromInt(startingClusters[i]));
+    }
+    const additionalClustersNeeded = clusterCount - clusters.length;
+    if (startingClusters.length === 0 && additionalClustersNeeded > 0) {
+      for (let i = 0; i < additionalClustersNeeded; i++) {
+        const l = Math.random() * 100.0;
+        const a = Math.random() * (100.0 - -100 + 1) + -100;
+        const b = Math.random() * (100.0 - -100 + 1) + -100;
+        clusters.push(new Array(l, a, b));
+      }
+    }
+    const clusterIndices = new Array();
+    for (let i = 0; i < pointCount; i++) {
+      clusterIndices.push(Math.floor(Math.random() * clusterCount));
+    }
+    const indexMatrix = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      indexMatrix.push(new Array());
+      for (let j = 0; j < clusterCount; j++) {
+        indexMatrix[i].push(0);
+      }
+    }
+    const distanceToIndexMatrix = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      distanceToIndexMatrix.push(new Array());
+      for (let j = 0; j < clusterCount; j++) {
+        distanceToIndexMatrix[i].push(new DistanceAndIndex());
+      }
+    }
+    const pixelCountSums = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      pixelCountSums.push(0);
+    }
+    for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+      for (let i = 0; i < clusterCount; i++) {
+        for (let j = i + 1; j < clusterCount; j++) {
+          const distance = pointProvider.distance(clusters[i], clusters[j]);
+          distanceToIndexMatrix[j][i].distance = distance;
+          distanceToIndexMatrix[j][i].index = i;
+          distanceToIndexMatrix[i][j].distance = distance;
+          distanceToIndexMatrix[i][j].index = j;
+        }
+        distanceToIndexMatrix[i].sort();
+        for (let j = 0; j < clusterCount; j++) {
+          indexMatrix[i][j] = distanceToIndexMatrix[i][j].index;
+        }
+      }
+      let pointsMoved = 0;
+      for (let i = 0; i < pointCount; i++) {
+        const point = points[i];
+        const previousClusterIndex = clusterIndices[i];
+        const previousCluster = clusters[previousClusterIndex];
+        const previousDistance = pointProvider.distance(point, previousCluster);
+        let minimumDistance = previousDistance;
+        let newClusterIndex = -1;
+        for (let j = 0; j < clusterCount; j++) {
+          if (distanceToIndexMatrix[previousClusterIndex][j].distance >= 4 * previousDistance) {
+            continue;
+          }
+          const distance = pointProvider.distance(point, clusters[j]);
+          if (distance < minimumDistance) {
+            minimumDistance = distance;
+            newClusterIndex = j;
+          }
+        }
+        if (newClusterIndex !== -1) {
+          const distanceChange = Math.abs(Math.sqrt(minimumDistance) - Math.sqrt(previousDistance));
+          if (distanceChange > MIN_MOVEMENT_DISTANCE) {
+            pointsMoved++;
+            clusterIndices[i] = newClusterIndex;
+          }
+        }
+      }
+      if (pointsMoved === 0 && iteration !== 0) {
+        break;
+      }
+      const componentASums = new Array(clusterCount).fill(0);
+      const componentBSums = new Array(clusterCount).fill(0);
+      const componentCSums = new Array(clusterCount).fill(0);
+      for (let i = 0; i < clusterCount; i++) {
+        pixelCountSums[i] = 0;
+      }
+      for (let i = 0; i < pointCount; i++) {
+        const clusterIndex = clusterIndices[i];
+        const point = points[i];
+        const count = counts[i];
+        pixelCountSums[clusterIndex] += count;
+        componentASums[clusterIndex] += point[0] * count;
+        componentBSums[clusterIndex] += point[1] * count;
+        componentCSums[clusterIndex] += point[2] * count;
+      }
+      for (let i = 0; i < clusterCount; i++) {
+        const count = pixelCountSums[i];
+        if (count === 0) {
+          clusters[i] = [0.0, 0.0, 0.0];
+          continue;
+        }
+        const a = componentASums[i] / count;
+        const b = componentBSums[i] / count;
+        const c = componentCSums[i] / count;
+        clusters[i] = [a, b, c];
+      }
+    }
+    const argbToPopulation = new Map();
+    for (let i = 0; i < clusterCount; i++) {
+      const count = pixelCountSums[i];
+      if (count === 0) {
+        continue;
+      }
+      const possibleNewCluster = pointProvider.toInt(clusters[i]);
+      if (argbToPopulation.has(possibleNewCluster)) {
+        continue;
+      }
+      argbToPopulation.set(possibleNewCluster, count);
+    }
+    return argbToPopulation;
+  }
+}
+/**
+ *  A wrapper for maintaining a table of distances between K-Means clusters.
+ */
+class DistanceAndIndex {
+  constructor() {
+    this.distance = -1;
+    this.index = -1;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Quantizes an image into a map, with keys of ARGB colors, and values of the
+ * number of times that color appears in the image.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerMap {
+  /**
+   * @param pixels Colors in ARGB format.
+   * @return A Map with keys of ARGB colors, and values of the number of times
+   *     the color appears in the image.
+   */
+  static quantize(pixels) {
+    const countByColor = new Map();
+    for (let i = 0; i < pixels.length; i++) {
+      const pixel = pixels[i];
+      const alpha = alphaFromArgb(pixel);
+      if (alpha < 255) {
+        continue;
+      }
+      countByColor.set(pixel, (countByColor.get(pixel) ?? 0) + 1);
+    }
+    return countByColor;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const INDEX_BITS = 5;
+const SIDE_LENGTH = 33; // ((1 << INDEX_INDEX_BITS) + 1)
+const TOTAL_SIZE = 35937; // SIDE_LENGTH * SIDE_LENGTH * SIDE_LENGTH
+const directions = {
+  RED: 'red',
+  GREEN: 'green',
+  BLUE: 'blue'
+};
+/**
+ * An image quantizer that divides the image's pixels into clusters by
+ * recursively cutting an RGB cube, based on the weight of pixels in each area
+ * of the cube.
+ *
+ * The algorithm was described by Xiaolin Wu in Graphic Gems II, published in
+ * 1991.
+ */
+class QuantizerWu {
+  constructor(weights = [], momentsR = [], momentsG = [], momentsB = [], moments = [], cubes = []) {
+    this.weights = weights;
+    this.momentsR = momentsR;
+    this.momentsG = momentsG;
+    this.momentsB = momentsB;
+    this.moments = moments;
+    this.cubes = cubes;
+  }
+  /**
+   * @param pixels Colors in ARGB format.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Colors in ARGB format.
+   */
+  quantize(pixels, maxColors) {
+    this.constructHistogram(pixels);
+    this.computeMoments();
+    const createBoxesResult = this.createBoxes(maxColors);
+    const results = this.createResult(createBoxesResult.resultCount);
+    return results;
+  }
+  constructHistogram(pixels) {
+    this.weights = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsR = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsG = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsB = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.moments = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    const countByColor = QuantizerMap.quantize(pixels);
+    for (const [pixel, count] of countByColor.entries()) {
+      const red = redFromArgb(pixel);
+      const green = greenFromArgb(pixel);
+      const blue = blueFromArgb(pixel);
+      const bitsToRemove = 8 - INDEX_BITS;
+      const iR = (red >> bitsToRemove) + 1;
+      const iG = (green >> bitsToRemove) + 1;
+      const iB = (blue >> bitsToRemove) + 1;
+      const index = this.getIndex(iR, iG, iB);
+      this.weights[index] = (this.weights[index] ?? 0) + count;
+      this.momentsR[index] += count * red;
+      this.momentsG[index] += count * green;
+      this.momentsB[index] += count * blue;
+      this.moments[index] += count * (red * red + green * green + blue * blue);
+    }
+  }
+  computeMoments() {
+    for (let r = 1; r < SIDE_LENGTH; r++) {
+      const area = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaR = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaG = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaB = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const area2 = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0.0);
+      for (let g = 1; g < SIDE_LENGTH; g++) {
+        let line = 0;
+        let lineR = 0;
+        let lineG = 0;
+        let lineB = 0;
+        let line2 = 0.0;
+        for (let b = 1; b < SIDE_LENGTH; b++) {
+          const index = this.getIndex(r, g, b);
+          line += this.weights[index];
+          lineR += this.momentsR[index];
+          lineG += this.momentsG[index];
+          lineB += this.momentsB[index];
+          line2 += this.moments[index];
+          area[b] += line;
+          areaR[b] += lineR;
+          areaG[b] += lineG;
+          areaB[b] += lineB;
+          area2[b] += line2;
+          const previousIndex = this.getIndex(r - 1, g, b);
+          this.weights[index] = this.weights[previousIndex] + area[b];
+          this.momentsR[index] = this.momentsR[previousIndex] + areaR[b];
+          this.momentsG[index] = this.momentsG[previousIndex] + areaG[b];
+          this.momentsB[index] = this.momentsB[previousIndex] + areaB[b];
+          this.moments[index] = this.moments[previousIndex] + area2[b];
+        }
+      }
+    }
+  }
+  createBoxes(maxColors) {
+    this.cubes = Array.from({
+      length: maxColors
+    }).fill(0).map(() => new Box());
+    const volumeVariance = Array.from({
+      length: maxColors
+    }).fill(0.0);
+    this.cubes[0].r0 = 0;
+    this.cubes[0].g0 = 0;
+    this.cubes[0].b0 = 0;
+    this.cubes[0].r1 = SIDE_LENGTH - 1;
+    this.cubes[0].g1 = SIDE_LENGTH - 1;
+    this.cubes[0].b1 = SIDE_LENGTH - 1;
+    let generatedColorCount = maxColors;
+    let next = 0;
+    for (let i = 1; i < maxColors; i++) {
+      if (this.cut(this.cubes[next], this.cubes[i])) {
+        volumeVariance[next] = this.cubes[next].vol > 1 ? this.variance(this.cubes[next]) : 0.0;
+        volumeVariance[i] = this.cubes[i].vol > 1 ? this.variance(this.cubes[i]) : 0.0;
+      } else {
+        volumeVariance[next] = 0.0;
+        i--;
+      }
+      next = 0;
+      let temp = volumeVariance[0];
+      for (let j = 1; j <= i; j++) {
+        if (volumeVariance[j] > temp) {
+          temp = volumeVariance[j];
+          next = j;
+        }
+      }
+      if (temp <= 0.0) {
+        generatedColorCount = i + 1;
+        break;
+      }
+    }
+    return new CreateBoxesResult(maxColors, generatedColorCount);
+  }
+  createResult(colorCount) {
+    const colors = [];
+    for (let i = 0; i < colorCount; ++i) {
+      const cube = this.cubes[i];
+      const weight = this.volume(cube, this.weights);
+      if (weight > 0) {
+        const r = Math.round(this.volume(cube, this.momentsR) / weight);
+        const g = Math.round(this.volume(cube, this.momentsG) / weight);
+        const b = Math.round(this.volume(cube, this.momentsB) / weight);
+        const color = 255 << 24 | (r & 0x0ff) << 16 | (g & 0x0ff) << 8 | b & 0x0ff;
+        colors.push(color);
+      }
+    }
+    return colors;
+  }
+  variance(cube) {
+    const dr = this.volume(cube, this.momentsR);
+    const dg = this.volume(cube, this.momentsG);
+    const db = this.volume(cube, this.momentsB);
+    const xx = this.moments[this.getIndex(cube.r1, cube.g1, cube.b1)] - this.moments[this.getIndex(cube.r1, cube.g1, cube.b0)] - this.moments[this.getIndex(cube.r1, cube.g0, cube.b1)] + this.moments[this.getIndex(cube.r1, cube.g0, cube.b0)] - this.moments[this.getIndex(cube.r0, cube.g1, cube.b1)] + this.moments[this.getIndex(cube.r0, cube.g1, cube.b0)] + this.moments[this.getIndex(cube.r0, cube.g0, cube.b1)] - this.moments[this.getIndex(cube.r0, cube.g0, cube.b0)];
+    const hypotenuse = dr * dr + dg * dg + db * db;
+    const volume = this.volume(cube, this.weights);
+    return xx - hypotenuse / volume;
+  }
+  cut(one, two) {
+    const wholeR = this.volume(one, this.momentsR);
+    const wholeG = this.volume(one, this.momentsG);
+    const wholeB = this.volume(one, this.momentsB);
+    const wholeW = this.volume(one, this.weights);
+    const maxRResult = this.maximize(one, directions.RED, one.r0 + 1, one.r1, wholeR, wholeG, wholeB, wholeW);
+    const maxGResult = this.maximize(one, directions.GREEN, one.g0 + 1, one.g1, wholeR, wholeG, wholeB, wholeW);
+    const maxBResult = this.maximize(one, directions.BLUE, one.b0 + 1, one.b1, wholeR, wholeG, wholeB, wholeW);
+    let direction;
+    const maxR = maxRResult.maximum;
+    const maxG = maxGResult.maximum;
+    const maxB = maxBResult.maximum;
+    if (maxR >= maxG && maxR >= maxB) {
+      if (maxRResult.cutLocation < 0) {
+        return false;
+      }
+      direction = directions.RED;
+    } else if (maxG >= maxR && maxG >= maxB) {
+      direction = directions.GREEN;
+    } else {
+      direction = directions.BLUE;
+    }
+    two.r1 = one.r1;
+    two.g1 = one.g1;
+    two.b1 = one.b1;
+    switch (direction) {
+      case directions.RED:
+        one.r1 = maxRResult.cutLocation;
+        two.r0 = one.r1;
+        two.g0 = one.g0;
+        two.b0 = one.b0;
+        break;
+      case directions.GREEN:
+        one.g1 = maxGResult.cutLocation;
+        two.r0 = one.r0;
+        two.g0 = one.g1;
+        two.b0 = one.b0;
+        break;
+      case directions.BLUE:
+        one.b1 = maxBResult.cutLocation;
+        two.r0 = one.r0;
+        two.g0 = one.g0;
+        two.b0 = one.b1;
+        break;
+      default:
+        throw new Error('unexpected direction ' + direction);
+    }
+    one.vol = (one.r1 - one.r0) * (one.g1 - one.g0) * (one.b1 - one.b0);
+    two.vol = (two.r1 - two.r0) * (two.g1 - two.g0) * (two.b1 - two.b0);
+    return true;
+  }
+  maximize(cube, direction, first, last, wholeR, wholeG, wholeB, wholeW) {
+    const bottomR = this.bottom(cube, direction, this.momentsR);
+    const bottomG = this.bottom(cube, direction, this.momentsG);
+    const bottomB = this.bottom(cube, direction, this.momentsB);
+    const bottomW = this.bottom(cube, direction, this.weights);
+    let max = 0.0;
+    let cut = -1;
+    let halfR = 0;
+    let halfG = 0;
+    let halfB = 0;
+    let halfW = 0;
+    for (let i = first; i < last; i++) {
+      halfR = bottomR + this.top(cube, direction, i, this.momentsR);
+      halfG = bottomG + this.top(cube, direction, i, this.momentsG);
+      halfB = bottomB + this.top(cube, direction, i, this.momentsB);
+      halfW = bottomW + this.top(cube, direction, i, this.weights);
+      if (halfW === 0) {
+        continue;
+      }
+      let tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+      let tempDenominator = halfW * 1.0;
+      let temp = tempNumerator / tempDenominator;
+      halfR = wholeR - halfR;
+      halfG = wholeG - halfG;
+      halfB = wholeB - halfB;
+      halfW = wholeW - halfW;
+      if (halfW === 0) {
+        continue;
+      }
+      tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+      tempDenominator = halfW * 1.0;
+      temp += tempNumerator / tempDenominator;
+      if (temp > max) {
+        max = temp;
+        cut = i;
+      }
+    }
+    return new MaximizeResult(cut, max);
+  }
+  volume(cube, moment) {
+    return moment[this.getIndex(cube.r1, cube.g1, cube.b1)] - moment[this.getIndex(cube.r1, cube.g1, cube.b0)] - moment[this.getIndex(cube.r1, cube.g0, cube.b1)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] - moment[this.getIndex(cube.r0, cube.g1, cube.b1)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+  }
+  bottom(cube, direction, moment) {
+    switch (direction) {
+      case directions.RED:
+        return -moment[this.getIndex(cube.r0, cube.g1, cube.b1)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      case directions.GREEN:
+        return -moment[this.getIndex(cube.r1, cube.g0, cube.b1)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      case directions.BLUE:
+        return -moment[this.getIndex(cube.r1, cube.g1, cube.b0)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      default:
+        throw new Error('unexpected direction $direction');
+    }
+  }
+  top(cube, direction, position, moment) {
+    switch (direction) {
+      case directions.RED:
+        return moment[this.getIndex(position, cube.g1, cube.b1)] - moment[this.getIndex(position, cube.g1, cube.b0)] - moment[this.getIndex(position, cube.g0, cube.b1)] + moment[this.getIndex(position, cube.g0, cube.b0)];
+      case directions.GREEN:
+        return moment[this.getIndex(cube.r1, position, cube.b1)] - moment[this.getIndex(cube.r1, position, cube.b0)] - moment[this.getIndex(cube.r0, position, cube.b1)] + moment[this.getIndex(cube.r0, position, cube.b0)];
+      case directions.BLUE:
+        return moment[this.getIndex(cube.r1, cube.g1, position)] - moment[this.getIndex(cube.r1, cube.g0, position)] - moment[this.getIndex(cube.r0, cube.g1, position)] + moment[this.getIndex(cube.r0, cube.g0, position)];
+      default:
+        throw new Error('unexpected direction $direction');
+    }
+  }
+  getIndex(r, g, b) {
+    return (r << INDEX_BITS * 2) + (r << INDEX_BITS + 1) + r + (g << INDEX_BITS) + g + b;
+  }
+}
+/**
+ * Keeps track of the state of each box created as the Wu  quantization
+ * algorithm progresses through dividing the image's pixels as plotted in RGB.
+ */
+class Box {
+  constructor(r0 = 0, r1 = 0, g0 = 0, g1 = 0, b0 = 0, b1 = 0, vol = 0) {
+    this.r0 = r0;
+    this.r1 = r1;
+    this.g0 = g0;
+    this.g1 = g1;
+    this.b0 = b0;
+    this.b1 = b1;
+    this.vol = vol;
+  }
+}
+/**
+ * Represents final result of Wu algorithm.
+ */
+class CreateBoxesResult {
+  /**
+   * @param requestedCount how many colors the caller asked to be returned from
+   *     quantization.
+   * @param resultCount the actual number of colors achieved from quantization.
+   *     May be lower than the requested count.
+   */
+  constructor(requestedCount, resultCount) {
+    this.requestedCount = requestedCount;
+    this.resultCount = resultCount;
+  }
+}
+/**
+ * Represents the result of calculating where to cut an existing box in such
+ * a way to maximize variance between the two new boxes created by a cut.
+ */
+class MaximizeResult {
+  constructor(cutLocation, maximum) {
+    this.cutLocation = cutLocation;
+    this.maximum = maximum;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * An image quantizer that improves on the quality of a standard K-Means
+ * algorithm by setting the K-Means initial state to the output of a Wu
+ * quantizer, instead of random centroids. Improves on speed by several
+ * optimizations, as implemented in Wsmeans, or Weighted Square Means, K-Means
+ * with those optimizations.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerCelebi {
+  /**
+   * @param pixels Colors in ARGB format.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Map with keys of colors in ARGB format, and values of number of
+   *     pixels in the original image that correspond to the color in the
+   *     quantized image.
+   */
+  static quantize(pixels, maxColors) {
+    const wu = new QuantizerWu();
+    const wuResult = wu.quantize(pixels, maxColors);
+    return QuantizerWsmeans.quantize(pixels, wuResult, maxColors);
+  }
+}
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -30756,6 +31561,145 @@ SchemeVibrant.secondaryRotations = [18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12
  */
 SchemeVibrant.tertiaryRotations = [35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0];
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SCORE_OPTION_DEFAULTS = {
+  desired: 4,
+  fallbackColorARGB: 0xff4285f4,
+  filter: true // Avoid unsuitable colors.
+};
+function compare(a, b) {
+  if (a.score > b.score) {
+    return -1;
+  } else if (a.score < b.score) {
+    return 1;
+  }
+  return 0;
+}
+/**
+ *  Given a large set of colors, remove colors that are unsuitable for a UI
+ *  theme, and rank the rest based on suitability.
+ *
+ *  Enables use of a high cluster count for image quantization, thus ensuring
+ *  colors aren't muddied, while curating the high cluster count to a much
+ *  smaller number of appropriate choices.
+ */
+class Score {
+  constructor() {}
+  /**
+   * Given a map with keys of colors and values of how often the color appears,
+   * rank the colors based on suitability for being used for a UI theme.
+   *
+   * @param colorsToPopulation map with keys of colors and values of how often
+   *     the color appears, usually from a source image.
+   * @param {ScoreOptions} options optional parameters.
+   * @return Colors sorted by suitability for a UI theme. The most suitable
+   *     color is the first item, the least suitable is the last. There will
+   *     always be at least one color returned. If all the input colors
+   *     were not suitable for a theme, a default fallback color will be
+   *     provided, Google Blue.
+   */
+  static score(colorsToPopulation, options) {
+    const {
+      desired,
+      fallbackColorARGB,
+      filter
+    } = {
+      ...SCORE_OPTION_DEFAULTS,
+      ...options
+    };
+    // Get the HCT color for each Argb value, while finding the per hue count and
+    // total count.
+    const colorsHct = [];
+    const huePopulation = new Array(360).fill(0);
+    let populationSum = 0;
+    for (const [argb, population] of colorsToPopulation.entries()) {
+      const hct = Hct.fromInt(argb);
+      colorsHct.push(hct);
+      const hue = Math.floor(hct.hue);
+      huePopulation[hue] += population;
+      populationSum += population;
+    }
+    // Hues with more usage in neighboring 30 degree slice get a larger number.
+    const hueExcitedProportions = new Array(360).fill(0.0);
+    for (let hue = 0; hue < 360; hue++) {
+      const proportion = huePopulation[hue] / populationSum;
+      for (let i = hue - 14; i < hue + 16; i++) {
+        const neighborHue = sanitizeDegreesInt(i);
+        hueExcitedProportions[neighborHue] += proportion;
+      }
+    }
+    // Scores each HCT color based on usage and chroma, while optionally
+    // filtering out values that do not have enough chroma or usage.
+    const scoredHct = new Array();
+    for (const hct of colorsHct) {
+      const hue = sanitizeDegreesInt(Math.round(hct.hue));
+      const proportion = hueExcitedProportions[hue];
+      if (filter && (hct.chroma < Score.CUTOFF_CHROMA || proportion <= Score.CUTOFF_EXCITED_PROPORTION)) {
+        continue;
+      }
+      const proportionScore = proportion * 100.0 * Score.WEIGHT_PROPORTION;
+      const chromaWeight = hct.chroma < Score.TARGET_CHROMA ? Score.WEIGHT_CHROMA_BELOW : Score.WEIGHT_CHROMA_ABOVE;
+      const chromaScore = (hct.chroma - Score.TARGET_CHROMA) * chromaWeight;
+      const score = proportionScore + chromaScore;
+      scoredHct.push({
+        hct,
+        score
+      });
+    }
+    // Sorted so that colors with higher scores come first.
+    scoredHct.sort(compare);
+    // Iterates through potential hue differences in degrees in order to select
+    // the colors with the largest distribution of hues possible. Starting at
+    // 90 degrees(maximum difference for 4 colors) then decreasing down to a
+    // 15 degree minimum.
+    const chosenColors = [];
+    for (let differenceDegrees$1 = 90; differenceDegrees$1 >= 15; differenceDegrees$1--) {
+      chosenColors.length = 0;
+      for (const {
+        hct
+      } of scoredHct) {
+        const duplicateHue = chosenColors.find(chosenHct => {
+          return differenceDegrees(hct.hue, chosenHct.hue) < differenceDegrees$1;
+        });
+        if (!duplicateHue) {
+          chosenColors.push(hct);
+        }
+        if (chosenColors.length >= desired) break;
+      }
+      if (chosenColors.length >= desired) break;
+    }
+    const colors = [];
+    if (chosenColors.length === 0) {
+      colors.push(fallbackColorARGB);
+    }
+    for (const chosenHct of chosenColors) {
+      colors.push(chosenHct.toInt());
+    }
+    return colors;
+  }
+}
+Score.TARGET_CHROMA = 48.0; // A1 Chroma
+Score.WEIGHT_PROPORTION = 0.7;
+Score.WEIGHT_CHROMA_ABOVE = 0.3;
+Score.WEIGHT_CHROMA_BELOW = 0.1;
+Score.CUTOFF_CHROMA = 5.0;
+Score.CUTOFF_EXCITED_PROPORTION = 0.01;
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -30829,6 +31773,96 @@ function parseIntHex(value) {
   return parseInt(value, 16);
 }
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Get the source color from an image.
+ *
+ * @param image The image element
+ * @return Source color - the color most suitable for creating a UI theme
+ */
+async function sourceColorFromImage(image) {
+  // Convert Image data to Pixel Array
+  const imageBytes = await new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+      reject(new Error('Could not get canvas context'));
+      return;
+    }
+    const loadCallback = () => {
+      canvas.width = image.width;
+      canvas.height = image.height;
+      context.drawImage(image, 0, 0);
+      let rect = [0, 0, image.width, image.height];
+      const area = image.dataset['area'];
+      if (area && /^\d+(\s*,\s*\d+){3}$/.test(area)) {
+        rect = area.split(/\s*,\s*/).map(s => {
+          // tslint:disable-next-line:ban
+          return parseInt(s, 10);
+        });
+      }
+      const [sx, sy, sw, sh] = rect;
+      resolve(context.getImageData(sx, sy, sw, sh).data);
+    };
+    const errorCallback = () => {
+      reject(new Error('Image load failed'));
+    };
+    if (image.complete) {
+      loadCallback();
+    } else {
+      image.onload = loadCallback;
+      image.onerror = errorCallback;
+    }
+  });
+  // Convert Image data to Pixel Array
+  const pixels = [];
+  for (let i = 0; i < imageBytes.length; i += 4) {
+    const r = imageBytes[i];
+    const g = imageBytes[i + 1];
+    const b = imageBytes[i + 2];
+    const a = imageBytes[i + 3];
+    if (a < 255) {
+      continue;
+    }
+    const argb = argbFromRgb(r, g, b);
+    pixels.push(argb);
+  }
+  // Convert Pixels to Material Colors
+  const result = QuantizerCelebi.quantize(pixels, 128);
+  const ranked = Score.score(result);
+  const top = ranked[0];
+  return top;
+}
+
+/**
+ * Extracts the Material source color from an image and returns it as a hex string.
+ * @param {HTMLImageElement} image - A fully loaded image element. Pixel data is sampled to derive the source color.
+ * @returns {Promise<string>} A hex color string (`#RRGGBB`) representing the extracted source color.
+ *
+ * @example
+ * const img = document.querySelector("img");
+ * const color = await getColorFromImage(img);
+ * // "#6750A4"
+ */
+async function getColorFromImage(image) {
+  return hexFromArgb(await sourceColorFromImage(image));
+}
+
 var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
 /**
  * A non-visual element responsible for application-level theming.
@@ -30857,6 +31891,8 @@ var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_fi
  * ```
  * @tag m3e-theme
  *
+ * @slot - Renders content styled by the theme.
+ *
  * @attr color - The hex color from which to derive dynamic color palettes.
  * @attr contrast - The contrast level of the theme.
  * @attr density - The density scale (0, -1, -2).
@@ -31118,7 +32154,7 @@ let M3eTocItemElement = class M3eTocItemElement extends Selected$1(Disabled$1(At
   }
 };
 /** The styles of the element. */
-M3eTocItemElement.styles = css`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${DesignToken$1.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${unsafeCSS(`color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1}) ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken$1.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken$1.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken$1.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken$1.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${DesignToken$1.color.onSecondaryContainer}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eTocItemElement.styles = css`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${DesignToken$1.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${unsafeCSS(`color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken$1.motion.duration.long1}) ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken$1.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken$1.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken$1.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken$1.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${DesignToken$1.color.onSurface}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 __decorate([query(".base")], M3eTocItemElement.prototype, "_base", void 0);
 __decorate([query(".state-layer")], M3eTocItemElement.prototype, "_stateLayer", void 0);
 __decorate([state()], M3eTocItemElement.prototype, "node", void 0);
@@ -32882,5 +33918,5 @@ __decorate([property({
 })], M3eTreeElement.prototype, "cascade", void 0);
 M3eTreeElement = M3eTreeElement_1 = __decorate([customElement$1("m3e-tree")], M3eTreeElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, 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, 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, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
+export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, 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, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
 //# sourceMappingURL=all.js.map