mtrl 0.10.5 → 0.10.7

package/dist/core/compose/features/index.d.ts

@@ -1,3 +1,14 @@
+/**
+ * The composition features, at the import path `mtrl/core/compose/features`.
+ *
+ * @deprecated `material` 3.0.0, where this library continues, does not resolve this
+ * path (FLO-414): import these names from `material/core/compose`, which exports them,
+ * the README's `withLifecycle` among them. `mtrl/core/compose` exports them too, except
+ * `withBadge`, `LabelManager` and the badge feature's `BadgeComponent` and
+ * `BadgeConfig`; of those four, `material` 3.0.0 keeps `withBadge` and the two badge
+ * types internal (for a badge, use `createBadge`) and exports `LabelManager`.
+ * @packageDocumentation
+ */
 export { withEvents } from "./events.js";
 export { withText } from "./text.js";
 export { withIcon } from "./icon.js";

package/dist/core/compose/features/input.d.ts

@@ -58,12 +58,16 @@ export interface InputFeature {
      */
     input: HTMLInputElement;
     /**
-     * Gets the current input value
+     * Gets the current input value.
+     * In `material` 3.0.0 `getValue()` returns the checked boolean, and the input's string
+     * value is `getValueAttribute()`.
      * @returns Current value
      */
     getValue: () => string;
     /**
-     * Sets the input value and emits a value event
+     * Sets the input value and emits a value event.
+     * In `material` 3.0.0 `setValue()` takes the checked boolean and is silent (no `value`
+     * event); the input's string value is set with `setValueAttribute()`.
      * @param value - New value to set
      * @returns Component instance for chaining
      */
@@ -82,6 +86,9 @@ export interface InputComponent extends ElementComponent, InputFeature {
  * Creates an input element and adds it to a component
  * Handles both input creation and event emission for state changes
  *
+ * In `material` 3.0.0 the `change` payload's `value` is the checked boolean, as the checkbox
+ * and the switch report it, and the input's string value is `valueAttribute`.
+ *
  * @param config - Input configuration
  * @returns Function that enhances a component with input functionality
  */

package/dist/core/config/component.d.ts

@@ -10,7 +10,7 @@ export interface BaseComponentConfig {
     /**
      * @deprecated Since FLO-117 `class` and `className` are not prefixed either,
      * so this option does the same thing as those. It is kept for the release
-     * that changes the behaviour and will be removed in 1.0.0.
+     * that changes the behaviour and will be removed in `material` 3.0.0.
      */
     rawClass?: string | string[];
     parent?: HTMLElement | string | null;

package/dist/core/dom/create.d.ts

@@ -76,7 +76,7 @@ export interface CreateElementOptions {
     /**
      * @deprecated Since FLO-117 `class` and `className` are not prefixed either,
      * so this option does the same thing as those. It is kept for the release
-     * that changes the behaviour and will be removed in 1.0.0.
+     * that changes the behaviour and will be removed in `material` 3.0.0.
      */
     rawClass?: string | string[];
     /** HTML attributes */

package/dist/core/utils/theme.d.ts

@@ -24,7 +24,7 @@ export declare const onThemeChange: (callback: ThemeChangeCallback) => (() => vo
  * @deprecated for `-rgb` names only: the themes no longer declare the
  * `--<prefix>-sys-color-*-rgb` twins (FLO-311). `getThemeColor('sys-color-X-rgb')`
  * still returns the `'r, g, b'` triplet, derived from `sys-color-X`, and will be
- * removed in the next major. Read `sys-color-X` (with `alpha` for rgba) instead.
+ * removed in `material` 3.0.0. Read `sys-color-X` (with `alpha` for rgba) instead.
  *
  * @example
  * // Basic usage

package/dist/elements/css/search.js

@@ -1,4 +1,4 @@
 import "./ripple.js";
 import { registerStyles, registerPreupgrade } from "../styles.js";
-registerStyles({ "search": ".mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-item--two-line .mtrl-search__suggestion-text{display:flex;flex-direction:column}.mtrl-search__suggestion-supporting{overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}" });
+registerStyles({ "search": ".mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-item--two-line .mtrl-search__suggestion-text{display:flex;flex-direction:column}.mtrl-search__suggestion-supporting{overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}" });
 registerPreupgrade({ "search": "m-search:not(:defined){display:flex;align-items:center;box-sizing:border-box;height:56px;padding:0 56px 0 60px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-search:not(:defined)::before{content:attr(placeholder)}m-search:not(:defined)[value]:not([value=\"\"])::before{content:attr(value);color:var(--mtrl-sys-color-on-surface)}m-search:not(:defined)>*{visibility:hidden;display:none}" });

package/dist/elements/css/tabs.js

@@ -2,5 +2,5 @@ import "./ripple.js";
 import "./badge.js";
 import "./button.js";
 import { registerStyles, registerPreupgrade } from "../styles.js";
-registerStyles({ "tabs": ".mtrl-tabs{position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box}.mtrl-tabs--primary{min-height:48px}.mtrl-tabs--primary:has(.mtrl-button.mtrl-tab--icon-and-text){min-height:64px}.mtrl-tabs--primary .mtrl-tabs__indicator{border-radius:3px 3px 0 0;background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs--secondary{min-height:48px}.mtrl-tabs--secondary .mtrl-tabs__indicator{border-radius:0;background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs .mtrl-button.mtrl-tab::before{content:none}.mtrl-tabs:not(.mtrl-tabs--scrollable){flex-direction:row}.mtrl-tabs:not(.mtrl-tabs--scrollable)>.mtrl-button.mtrl-tab{flex:1}.mtrl-tabs--scrollable{overflow:hidden}.mtrl-tabs--scrollable .mtrl-tabs__scroll{display:flex;padding-inline:52px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mtrl-tabs--scrollable .mtrl-tabs__scroll::-webkit-scrollbar{display:none}.mtrl-tabs__divider{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-tabs__indicator{position:absolute;bottom:0;left:0;transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),width 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1);z-index:1}.mtrl-button.mtrl-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:90px;max-width:360px;padding:0 16px;border:none;border-radius:0;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;user-select:none;flex-shrink:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;transition:background-color .2s cubic-bezier(0.4, 0, 0.2, 1),color .2s cubic-bezier(0.4, 0, 0.2, 1)}.mtrl-button.mtrl-tab--text-only{height:48px}.mtrl-button.mtrl-tab--icon-only{height:48px}.mtrl-button.mtrl-tab--icon-and-text{height:64px;flex-direction:column}.mtrl-button.mtrl-tab.mtrl-button--icon{padding:0 16px}.mtrl-button.mtrl-tab:focus{outline:none}.mtrl-button.mtrl-tab:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px;z-index:1}.mtrl-button.mtrl-tab--disabled,.mtrl-button.mtrl-tab:disabled{pointer-events:none;opacity:.38}.mtrl-button.mtrl-tab .mtrl-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-button.mtrl-tab .mtrl-button__icon svg{width:100%;height:100%;fill:currentColor}.mtrl-button.mtrl-tab--icon-and-text .mtrl-button__icon{margin-bottom:4px}.mtrl-button.mtrl-tab .mtrl-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;line-height:1.2}.mtrl-button.mtrl-tab--icon-only .mtrl-button__text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mtrl-button.mtrl-tab--icon-only .mtrl-badge__wrapper .mtrl-badge--top-right{top:4px;right:4px}.mtrl-button.mtrl-tab--text-only .mtrl-badge__wrapper .mtrl-badge--top-right{top:8px;right:8px}.mtrl-button.mtrl-tab--icon-and-text .mtrl-badge__wrapper .mtrl-badge--top-right{top:4px;right:calc(50% - 20px)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active{color:var(--mtrl-sys-color-primary);border-radius:0}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active .mtrl-button__icon{color:var(--mtrl-sys-color-primary)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:hover,.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:focus-visible,.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--focus{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:active:not(:has(>.mtrl-ripple)),.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled){color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):hover,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--hover{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):focus-visible,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--focus{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active:not(:has(>.mtrl-ripple)),.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled) .mtrl-ripple-wave{background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active{color:var(--mtrl-sys-color-on-surface);border-radius:0}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active .mtrl-button__icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:hover,.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:focus-visible,.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--focus{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:active:not(:has(>.mtrl-ripple)),.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled){color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):hover,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--hover{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):focus-visible,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--focus{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active:not(:has(>.mtrl-ripple)),.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tab-panel{padding:16px}.mtrl-tab-panel[hidden]{display:none}.mtrl-tabs__scroll-indicator{position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s ease}.mtrl-tabs__scroll-indicator.visible{opacity:1}.mtrl-tabs__scroll-indicator--left{left:0;background:linear-gradient(to right, var(--mtrl-sys-color-surface), transparent)}.mtrl-tabs__scroll-indicator--right{right:0;background:linear-gradient(to left, var(--mtrl-sys-color-surface), transparent)}.mtrl-tabs__scroll-indicator--shadow.mtrl-tabs__scroll-indicator--left{box-shadow:2px 0 4px -2px rgba(0,0,0,.2);background:none}.mtrl-tabs__scroll-indicator--shadow.mtrl-tabs__scroll-indicator--right{box-shadow:-2px 0 4px -2px rgba(0,0,0,.2);background:none}.mtrl-tabs__scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background-color:var(--mtrl-sys-color-surface-container-high);border:none;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}.mtrl-tabs__scroll-button:disabled{opacity:.38;cursor:default}.mtrl-tabs__scroll-button svg{width:24px;height:24px;fill:var(--mtrl-sys-color-on-surface)}.mtrl-tabs__scroll-button--left{left:4px}.mtrl-tabs__scroll-button--right{right:4px}.mtrl-tabs__scroll-button:focus{outline:none}.mtrl-tabs__scroll-button:focus-visible{outline:2px solid var(--mtrl-sys-color-primary)}.mtrl-tabs--responsive-small .mtrl-button.mtrl-tab{padding:0 12px;min-width:72px}" });
+registerStyles({ "tabs": ".mtrl-tabs{position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box}.mtrl-tabs--primary{min-height:48px}.mtrl-tabs--primary:has(.mtrl-button.mtrl-tab--icon-and-text){min-height:64px}.mtrl-tabs--primary .mtrl-tabs__indicator{border-radius:3px 3px 0 0;background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs--secondary{min-height:48px}.mtrl-tabs--secondary .mtrl-tabs__indicator{border-radius:0;background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs .mtrl-button.mtrl-tab::before{content:none}.mtrl-tabs:not(.mtrl-tabs--scrollable){flex-direction:row}.mtrl-tabs:not(.mtrl-tabs--scrollable)>.mtrl-button.mtrl-tab{flex:1}.mtrl-tabs--scrollable{overflow:hidden}.mtrl-tabs--scrollable .mtrl-tabs__scroll{display:flex;padding-inline:52px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.mtrl-tabs--scrollable .mtrl-tabs__scroll::-webkit-scrollbar{display:none}.mtrl-tabs__divider{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-tabs__indicator{position:absolute;bottom:0;left:0;transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),width 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1);z-index:1}.mtrl-button.mtrl-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:90px;max-width:360px;padding:0 16px;border:none;border-radius:0;background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;user-select:none;flex-shrink:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;transition:background-color .2s cubic-bezier(0.4, 0, 0.2, 1),color .2s cubic-bezier(0.4, 0, 0.2, 1)}.mtrl-button.mtrl-tab--text-only{height:48px}.mtrl-button.mtrl-tab--icon-only{height:48px}.mtrl-button.mtrl-tab--icon-and-text{height:64px;flex-direction:column}.mtrl-button.mtrl-tab.mtrl-button--icon{padding:0 16px}.mtrl-button.mtrl-tab:focus{outline:none}.mtrl-button.mtrl-tab:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px;z-index:1}.mtrl-button.mtrl-tab--disabled,.mtrl-button.mtrl-tab:disabled{pointer-events:none;opacity:.38}.mtrl-button.mtrl-tab .mtrl-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.mtrl-button.mtrl-tab .mtrl-button__icon svg{width:100%;height:100%;fill:currentColor}.mtrl-button.mtrl-tab--icon-and-text .mtrl-button__icon{margin-bottom:4px}.mtrl-button.mtrl-tab .mtrl-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;line-height:1.2}.mtrl-button.mtrl-tab--icon-only .mtrl-button__text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mtrl-button.mtrl-tab--icon-only .mtrl-badge__wrapper .mtrl-badge--top-right{top:4px;right:4px}.mtrl-button.mtrl-tab--text-only .mtrl-badge__wrapper .mtrl-badge--top-right{top:8px;right:8px}.mtrl-button.mtrl-tab--icon-and-text .mtrl-badge__wrapper .mtrl-badge--top-right{top:4px;right:calc(50% - 20px)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active{color:var(--mtrl-sys-color-primary);border-radius:0}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active .mtrl-button__icon{color:var(--mtrl-sys-color-primary)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:hover,.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 8%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:focus-visible,.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--focus{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab--active:active:not(:has(>.mtrl-ripple)),.mtrl-tabs--primary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled){color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):hover,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--hover{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):focus-visible,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--focus{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active,.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active:not(:has(>.mtrl-ripple)),.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-primary) 10%, transparent)}.mtrl-tabs--primary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled) .mtrl-ripple-wave{background-color:var(--mtrl-sys-color-primary)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active{color:var(--mtrl-sys-color-on-surface);border-radius:0}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active .mtrl-button__icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:hover,.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:focus-visible,.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--focus{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active:active:not(:has(>.mtrl-ripple)),.mtrl-tabs--secondary .mtrl-button.mtrl-tab--active.mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled){color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):hover,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--hover{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):focus-visible,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--focus{color:var(--mtrl-sys-color-on-surface);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active,.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{color:var(--mtrl-sys-color-on-surface)}.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled):active:not(:has(>.mtrl-ripple)),.mtrl-tabs--secondary .mtrl-button.mtrl-tab:not(.mtrl-button.mtrl-tab--active):not(.mtrl-button.mtrl-tab--disabled):not(:disabled).mtrl-button.mtrl-tab--pressed{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-tab-panel{padding:16px}.mtrl-tab-panel[hidden]{display:none}.mtrl-tabs__scroll-indicator{position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s ease}.mtrl-tabs__scroll-indicator.visible{opacity:1}.mtrl-tabs__scroll-indicator--left{left:0;background:linear-gradient(to right, var(--mtrl-sys-color-surface), transparent)}.mtrl-tabs__scroll-indicator--right{right:0;background:linear-gradient(to left, var(--mtrl-sys-color-surface), transparent)}.mtrl-tabs__scroll-indicator--shadow.mtrl-tabs__scroll-indicator--left{box-shadow:2px 0 4px -2px rgba(0,0,0,.2);background:none}.mtrl-tabs__scroll-indicator--shadow.mtrl-tabs__scroll-indicator--right{box-shadow:-2px 0 4px -2px rgba(0,0,0,.2);background:none}.mtrl-tabs__scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background-color:var(--mtrl-sys-color-surface-container-high);border:none;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}.mtrl-tabs__scroll-button:disabled{opacity:.38;cursor:default}.mtrl-tabs__scroll-button svg{width:24px;height:24px;fill:var(--mtrl-sys-color-on-surface)}.mtrl-tabs__scroll-button--left{left:4px}.mtrl-tabs__scroll-button--right{right:4px}.mtrl-tabs__scroll-button:focus{outline:none}.mtrl-tabs__scroll-button:focus-visible{outline:2px solid var(--mtrl-sys-color-primary)}.mtrl-tabs--responsive-small .mtrl-button.mtrl-tab{padding:0 12px;min-width:72px}" });
 registerPreupgrade({ "tabs": "m-tabs:not(:defined){display:block;box-sizing:border-box;height:48px;overflow:hidden;border-bottom:1px solid var(--mtrl-sys-color-outline-variant)}m-tabs:not(:defined):has(>[icon]){height:64px}m-tabs:not(:defined)>*{visibility:hidden;display:none}" });

package/dist/elements/define.d.ts

@@ -141,6 +141,14 @@ export { DEFAULT_PREFIX };
  * Registered under these names like the component entries.
  */
 export declare const SHADOW_BASE_STYLES: readonly ["ripple"];
+/**
+ * The sheet every shadow root adopts first. The reduced-motion rule is the
+ * document reset's (styles/base/_reset.scss), which does not match inside a
+ * shadow tree: transitions are limited to the fades, animations end at once
+ * (FLO-549). test/styles/reduced-motion.test.ts keeps the two copies equal.
+ * @internal
+ */
+export declare const BASE_HOST_STYLES: string;
 type Camel<S extends string> = S extends `${infer H}-${infer T}` ? `${H}${Capitalize<Camel<T>>}` : S;
 type ValueOf<T> = T extends "boolean" ? boolean : T extends "number" ? number : string;
 type Get<S, K extends string> = S extends {

package/dist/elements/define.js

@@ -18,7 +18,8 @@ import { PREFIX } from "../core/config.js";
 import { applyStyles, DEFAULT_PREFIX, hasStyles, registerStyles, usePreupgradePrefix } from "./styles.js";
 export { DEFAULT_PREFIX };
 export const SHADOW_BASE_STYLES = ["ripple"];
-const BASE_HOST_STYLES = ":host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}";
+export const BASE_HOST_STYLES = ":host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}" +
+    "@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}";
 const camel = (name) => name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 const kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 const read = (host, name, type) => {

package/dist/elements/icon-button.d.ts

@@ -6,8 +6,8 @@
  * `selected` property the live one: the attribute moves the state until the
  * user or script changes it. A click dispatches `change` with `{ selected }`
  * from the host, as `<m-switch>` and `<m-checkbox>` do; `toggle`, which
- * clashed with the native ToggleEvent, is dispatched as well for one release
- * (deprecated, FLO-295).
+ * clashed with the native ToggleEvent, is dispatched as well until `material` 3.0.0
+ * removes it (deprecated, FLO-295): listen to `change`.
  * `type="submit"` and `type="reset"` act on the host's form.
  *
  * Parts: `icon-button`, `icon`, `ripple`.
@@ -96,6 +96,7 @@ declare const iconButtonSpec: {
                 selected: boolean;
             };
         };
+        /** @deprecated Dispatched beside `change`; removed in `material` 3.0.0. Listen to `change` (FLO-295). */
         toggle: {
             detail: (payload: unknown) => {
                 selected: boolean;

package/dist/elements/index.d.ts

@@ -40,16 +40,16 @@ export { sliderElement, defineSlider } from "./slider.js";
 export type { SliderSpec, SliderElement } from "./slider.js";
 export { textfieldElement as textFieldElement, defineTextfield as defineTextField } from "./textfield.js";
 export { 
-/** @deprecated Use textFieldElement: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+/** @deprecated Use textFieldElement: M3 writes "text field" as two words. Removed in `material` 3.0.0 (FLO-383). */
 textfieldElement, 
-/** @deprecated Use defineTextField: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+/** @deprecated Use defineTextField: M3 writes "text field" as two words. Removed in `material` 3.0.0 (FLO-383). */
 defineTextfield, } from "./textfield.js";
 export type { TextfieldSpec as TextFieldSpec, TextfieldElement as TextFieldElement, TextfieldElementComponent as TextFieldElementComponent, 
-/** @deprecated Use TextFieldSpec: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+/** @deprecated Use TextFieldSpec: M3 writes "text field" as two words. Removed in `material` 3.0.0 (FLO-383). */
 TextfieldSpec, 
-/** @deprecated Use TextFieldElement: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+/** @deprecated Use TextFieldElement: M3 writes "text field" as two words. Removed in `material` 3.0.0 (FLO-383). */
 TextfieldElement, 
-/** @deprecated Use TextFieldElementComponent: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+/** @deprecated Use TextFieldElementComponent: M3 writes "text field" as two words. Removed in `material` 3.0.0 (FLO-383). */
 TextfieldElementComponent, } from "./textfield.js";
 export { radiosElement, radioDeclaration, defineRadios } from "./radios.js";
 export type { RadiosSpec, RadiosElement, RadioAttributes } from "./radios.js";
@@ -114,6 +114,7 @@ export declare const elements: {
     readonly extendedFab: import("./define.js").ElementDefinition<import("../index.js").ExtendedFabComponent>;
     readonly checkbox: import("./define.js").ElementDefinition<import("../index.js").CheckboxComponent>;
     readonly slider: import("./define.js").ElementDefinition<import("../index.js").SliderComponent>;
+    /** In `material` 3.0.0 this key is `textField`. */
     readonly textfield: import("./define.js").ElementDefinition<import("./textfield.js").TextfieldElementComponent>;
     readonly radios: import("./define.js").ElementDefinition<import("../index.js").RadiosComponent>;
     readonly navigationRail: import("./define.js").ElementDefinition<import("../index.js").NavigationRailComponent>;

package/dist/elements/preupgrade.css

@@ -1,2 +1,2 @@
-/*! mtrl v0.10.5 | MIT */
+/*! mtrl v0.10.7 | MIT */
 @layer mtrl.preupgrade{m-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;min-width:58px;white-space:nowrap;background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary);height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[icon]::before{width:20px;height:20px}m-button:not(:defined)[size=xs]{height:32px;padding:0 12px;gap:8px;border-radius:16px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=xs][icon]::before{width:20px;height:20px}m-button:not(:defined)[size=s]{height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=s][icon]::before{width:20px;height:20px}m-button:not(:defined)[size=m]{height:56px;padding:0 24px;gap:8px;border-radius:28px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-button:not(:defined)[size=m][icon]::before{width:24px;height:24px}m-button:not(:defined)[size=l]{height:96px;padding:0 48px;gap:12px;border-radius:48px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=l][icon]::before{width:32px;height:32px}m-button:not(:defined)[size=xl]{height:136px;padding:0 64px;gap:16px;border-radius:68px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=xl][icon]::before{width:40px;height:40px}m-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-button:not(:defined)[variant=elevated]{background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}m-button:not(:defined)[variant=outlined]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant)}m-button:not(:defined)[variant=text]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-button:not(:defined)[variant=text]{padding:0 12px}m-button:not(:defined)[icon]::before{content:"";flex:none}m-button:not(:defined)[icon]:not([size]),m-button:not(:defined)[icon][size=s]{padding-left:12px}m-switch:not(:defined){display:inline-grid;grid-template-columns:auto auto;align-content:center;align-items:center;column-gap:12px;box-sizing:border-box;min-height:56px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-switch:not(:defined)::after{content:"";grid-column:2;grid-row:1;box-sizing:border-box;width:52px;height:32px;border:2px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:radial-gradient(circle at 14px 50%, var(--mtrl-sys-color-outline) 8px, transparent 8.5px) var(--mtrl-sys-color-surface-container-highest)}m-switch:not(:defined)[checked]::after{border-color:var(--mtrl-sys-color-primary);background:radial-gradient(circle at calc(100% - 14px) 50%, var(--mtrl-sys-color-on-primary) 12px, transparent 12.5px) var(--mtrl-sys-color-primary)}m-switch:not(:defined)[supporting-text]::after{grid-row:1/span 2}m-switch:not(:defined)[supporting-text]::before{content:attr(supporting-text);grid-column:1;grid-row:2;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-tabs:not(:defined){display:block;box-sizing:border-box;height:48px;overflow:hidden;border-bottom:1px solid var(--mtrl-sys-color-outline-variant)}m-tabs:not(:defined):has(>[icon]){height:64px}m-tabs:not(:defined)>*{visibility:hidden;display:none}m-progress:not(:defined){display:block;box-sizing:border-box;height:4px;padding:0 4px;overflow:hidden;color:rgba(0,0,0,0);background:var(--mtrl-sys-color-secondary-container) content-box}m-progress:not(:defined)[variant=circular]{display:inline-flex;vertical-align:middle;width:40px;height:40px;padding:0;background:none}m-loading-indicator:not(:defined){display:inline-flex;vertical-align:middle;width:48px;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-badge:not(:defined){display:inline-flex;vertical-align:middle;width:0;height:0;overflow:hidden}m-divider:not(:defined){display:block;height:1px;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-outline-variant)}m-divider:not(:defined)[orientation=vertical]{display:inline-block;align-self:stretch;width:1px;height:auto}m-icon-button:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);height:40px;width:40px;border-radius:20px}m-icon-button:not(:defined)[size=xs]{height:32px;width:32px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=narrow]{height:32px;width:28px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=wide]{height:32px;width:40px;border-radius:16px}m-icon-button:not(:defined)[width=narrow]{height:40px;width:32px;border-radius:20px}m-icon-button:not(:defined)[width=wide]{height:40px;width:52px;border-radius:20px}m-icon-button:not(:defined)[size=m]{height:56px;width:56px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=narrow]{height:56px;width:48px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=wide]{height:56px;width:72px;border-radius:28px}m-icon-button:not(:defined)[size=l]{height:96px;width:96px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=narrow]{height:96px;width:64px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=wide]{height:96px;width:128px;border-radius:48px}m-icon-button:not(:defined)[size=xl]{height:136px;width:136px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=narrow]{height:136px;width:104px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=wide]{height:136px;width:184px;border-radius:68px}m-icon-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary)}m-icon-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container)}m-icon-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-fab:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[size=small]{width:40px;height:40px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}m-fab:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-extended-fab:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);height:56px;min-width:56px;padding:0 16px;gap:8px;border-radius:var(--mtrl-sys-shape-corner-large, 16px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-extended-fab:not(:defined)[icon]::before{width:24px;height:24px}m-extended-fab:not(:defined)[icon]::before{content:"";flex:none}m-extended-fab:not(:defined)[icon-position=end]::before{order:1}m-extended-fab:not(:defined)[size=medium]{height:80px;min-width:80px;padding:0 26px;gap:16px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=medium][icon]::before{width:28px;height:28px}m-extended-fab:not(:defined)[size=large]{height:96px;min-width:96px;padding:0 28px;gap:20px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=large][icon]::before{width:32px;height:32px}m-checkbox:not(:defined){display:inline-flex;align-items:center;box-sizing:border-box;min-height:48px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-checkbox:not(:defined)::before{content:"";flex:none;box-sizing:border-box;width:18px;height:18px;margin-inline-end:12px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:2px}m-checkbox:not(:defined)[checked]::before{border-color:var(--mtrl-sys-color-primary);background-color:var(--mtrl-sys-color-primary)}m-checkbox:not(:defined)[label-position=start]::before{order:1;margin-inline:12px 0}m-slider:not(:defined){display:block;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-textfield:not(:defined){display:inline-block;position:relative;box-sizing:border-box;width:280px;height:56px;padding:22px 16px 0 16px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-textfield:not(:defined)::before{content:attr(value) " ";white-space:pre}m-textfield:not(:defined)[label]::after{content:attr(label);position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant)}m-textfield:not(:defined)[label][value]:not([value=""])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-textfield:not(:defined)[variant=outlined]{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-textfield:not(:defined)[variant=outlined][label][value]:not([value=""])::after{top:-8px;padding:0 4px;left:12px}m-textfield:not(:defined)[density=compact]{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-textfield:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-textfield:not(:defined)[density=compact][variant=outlined]{padding-top:9.5px}m-textfield:not(:defined)[supporting-text]:not([supporting-text=""]),m-textfield:not(:defined)[maxlength]{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-textfield:not(:defined)[supporting-text]:not([supporting-text=""])[variant=outlined],m-textfield:not(:defined)[maxlength][variant=outlined]{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-textfield:not(:defined)[supporting-text]:not([supporting-text=""])[density=compact],m-textfield:not(:defined)[maxlength][density=compact]{height:calc(40px + 20px)}m-textfield:not(:defined)>*{display:none}m-radios:not(:defined){display:block;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-radios:not(:defined)[direction=horizontal]{display:flex;flex-wrap:wrap}m-radios:not(:defined)>*{visibility:hidden;display:flex;align-items:center;box-sizing:border-box;height:48px;padding-inline-start:48px}m-navigation-rail:not(:defined){display:block;box-sizing:border-box;padding:132px 0 16px;background:linear-gradient(var(--mtrl-sys-color-surface), var(--mtrl-sys-color-surface)) no-repeat 0 0/96px 100%}m-navigation-rail:not(:defined)>*{visibility:hidden;display:block;height:64px;overflow:hidden}m-navigation-rail:not(:defined)>*+*{margin-top:4px}m-drawer:not(:defined){display:block;flex-shrink:0;padding:12px 0}m-drawer:not(:defined)[open]{background-color:var(--mtrl-sys-color-surface)}m-drawer:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-top-app-bar:not(:defined){position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;box-sizing:border-box;height:64px;padding:0 12px 0 28px;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=center]{justify-content:center}m-top-app-bar:not(:defined)[type=medium],m-top-app-bar:not(:defined)[type=large]{align-items:flex-end;padding-left:44px;padding-bottom:24px;height:112px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=large]{padding-bottom:28px;height:152px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:28px;line-height:36px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)>[slot=leading]{order:-1}m-top-app-bar:not(:defined)>[slot=trailing]{order:1;margin-left:auto}m-bottom-app-bar:not(:defined){position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container)}m-bottom-app-bar:not(:defined)>[slot=fab]{margin-left:auto}m-button-group:not(:defined){display:inline-flex;vertical-align:middle;gap:12px;white-space:nowrap}m-button-group:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;box-sizing:border-box;height:40px;padding:0 16px;border:1px solid rgba(0,0,0,0);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-chips:not(:defined){display:flex;flex-wrap:wrap;gap:8px}m-chips:not(:defined)[vertical]{flex-direction:column;align-items:flex-start}m-chips:not(:defined)[scrollable]{flex-wrap:nowrap;overflow:hidden}m-chips:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;box-sizing:border-box;height:32px;padding:0 16px;white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-list:not(:defined){display:block;padding:8px 0;background-color:var(--mtrl-sys-color-surface)}m-list:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-list:not(:defined)>*[supporting-text],m-list:not(:defined)>*[overline]{height:72px}m-list:not(:defined)>*[kind=divider]{height:1px}m-list:not(:defined)>*[kind=subheader]{height:auto;padding:16px 16px 8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-card:not(:defined){display:flex;flex-direction:column;box-sizing:border-box;padding:16px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-card:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-surface-container-highest)}m-card:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface)}m-card:not(:defined)[headline]::before{content:attr(headline);order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)[subhead]::after{content:attr(subhead);order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-card:not(:defined)[headline]:not([subhead])::before,m-card:not(:defined)[subhead]::after{margin-bottom:16px}m-card:not(:defined)>[slot=headline]{order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)>[slot=subhead]{order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-carousel:not(:defined){display:block}m-carousel:not(:defined)>*{visibility:hidden;display:none}m-menu:not(:defined){display:none}m-fab-menu:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab-menu:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-fab-menu:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary-container)}m-fab-menu:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary-container)}m-fab-menu:not(:defined)>*{visibility:hidden;display:none}m-select:not(:defined){display:inline-block;position:relative;box-sizing:border-box;width:280px;height:56px;padding:22px 44px 0 16px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-select:not(:defined)::before{content:attr(value) " ";white-space:pre}m-select:not(:defined)[label]::after{content:attr(label);position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant)}m-select:not(:defined)[label][value]:not([value=""])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-select:not(:defined)[variant=outlined]{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-select:not(:defined)[variant=outlined][label][value]:not([value=""])::after{top:-8px;padding:0 4px;left:12px}m-select:not(:defined)[density=compact]{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact][variant=outlined]{padding-top:9.5px}m-select:not(:defined)[supporting-text]:not([supporting-text=""]),m-select:not(:defined)[maxlength]{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-select:not(:defined)[supporting-text]:not([supporting-text=""])[variant=outlined],m-select:not(:defined)[maxlength][variant=outlined]{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-select:not(:defined)[supporting-text]:not([supporting-text=""])[density=compact],m-select:not(:defined)[maxlength][density=compact]{height:calc(40px + 20px)}m-select:not(:defined)>*{display:none}m-select:not(:defined)::before{content:" "}m-split-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;position:relative;z-index:0;box-sizing:border-box;height:40px;padding:0 calc(12px + 50px) 0 16px;color:var(--mtrl-sys-color-on-primary);white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-split-button:not(:defined)::before,m-split-button:not(:defined)::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;background-color:var(--mtrl-sys-color-primary)}m-split-button:not(:defined)::before{left:0;right:50px;border-radius:20px 4px 4px 20px}m-split-button:not(:defined)::after{right:0;width:48px;border-radius:4px 20px 20px 4px}m-split-button:not(:defined)>*{display:none}m-tooltip:not(:defined){display:none}m-toolbar:not(:defined){display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;min-height:64px;padding-inline:16px;background-color:var(--mtrl-sys-color-surface-container)}m-toolbar:not(:defined)[arrangement=center]{justify-content:center;gap:32px}m-toolbar:not(:defined)[variant=floating]{width:fit-content;justify-content:center;gap:4px;padding:8px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}m-toolbar:not(:defined)[variant=floating]:not([flat]){box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}m-toolbar:not(:defined)[variant=floating][orientation=vertical]{flex-direction:column;min-height:0;min-width:64px}m-toolbar:not(:defined)[color=vibrant]{background-color:var(--mtrl-sys-color-primary-container)}m-snackbar:not(:defined){display:none}m-dialog:not(:defined){display:none}m-bottom-sheet:not(:defined){display:none}m-side-sheet:not(:defined){display:none}m-datepicker:not(:defined){display:inline-block;box-sizing:border-box;width:280px;vertical-align:baseline;white-space:nowrap}m-datepicker:not(:defined)::before{content:attr(label) " ";white-space:pre;display:inline-block;width:100%;padding-bottom:80px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-datepicker:not(:defined)>*{display:none}m-timepicker:not(:defined){display:none}m-search:not(:defined){display:flex;align-items:center;box-sizing:border-box;height:56px;padding:0 56px 0 60px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-search:not(:defined)::before{content:attr(placeholder)}m-search:not(:defined)[value]:not([value=""])::before{content:attr(value);color:var(--mtrl-sys-color-on-surface)}m-search:not(:defined)>*{visibility:hidden;display:none}}

package/dist/elements/search.d.ts

@@ -38,7 +38,10 @@ import { type AttributeValue, type Config, type DefineOptions, type ElementAttri
 type Handler = (event: SearchEvent) => void;
 /** The search, with the element's events, methods and input. */
 export interface SearchElementComponent extends Omit<SearchComponent, "on" | "off"> {
-    /** Subscribes by the element's event names (`open`, `select`…) as well as the factory's. */
+    /**
+     * Subscribes by the element's event names (`open`, `select`…) as well as the factory's.
+     * In `material` 3.0.0 `on` and `off` take a closed map of those names: any other name is a type error.
+     */
     on: (event: string, handler: Handler) => SearchElementComponent;
     off: (event: string, handler: Handler) => SearchElementComponent;
     /** Opens the view. */

package/dist/elements/textfield.d.ts

@@ -159,7 +159,11 @@ export declare const textfieldElement: import("./define.js").ElementDefinition<T
 export type TextfieldSpec = typeof textfieldSpec;
 /** `<m-textfield>` as a ref or a query returns it. */
 export type TextfieldElement = ElementInstance<TextfieldSpec, TextfieldElementComponent>;
-/** Registers `<m-textfield>` (or `<prefix-textfield>`). */
+/**
+ * Registers `<m-textfield>` (or `<prefix-textfield>`).
+ * In `material` 3.0.0 the tag is `<m-text-field>`, and the part `textfield` is `text-field`
+ * (`::part(text-field)`, on the select too).
+ */
 export declare const defineTextfield: (options?: DefineOptions) => string;
 declare global {
     /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */

package/dist/elements/timepicker.d.ts

@@ -48,6 +48,7 @@ export interface TimepickerElementComponent {
     close: () => void;
     isOpen: () => boolean;
     required: boolean;
+    /** In `material` 3.0.0 `on` and `off` take the time picker's event map: any other name is a type error, and each handler's argument is typed. */
     on: (event: string, handler: EventCallback) => void;
     off: (event: string, handler: EventCallback) => void;
     destroy: () => void;