mtrl 0.10.5 → 0.10.6

package/dist/components/button-group/button-group.js

@@ -56,6 +56,8 @@ const createButtonGroup = (config = {}) => {
         const releasePress = () => {
             buttons.forEach(b => {
                 b.element.style.width = '';
+                b.element.style.minWidth = '';
+                b.element.style.maxWidth = '';
                 b.element.style.paddingLeft = '';
                 b.element.style.paddingRight = '';
             });
@@ -70,26 +72,40 @@ const createButtonGroup = (config = {}) => {
                 return;
             const view = component.element.ownerDocument.defaultView;
             const padding = (i, side) => view ? parseFloat(view.getComputedStyle(buttons[i].element)[side]) || 0 : 0;
+            const rtl = view?.getComputedStyle(component.element).direction === 'rtl';
             const previous = buttons[index - 1] ? index - 1 : -1;
             const next = buttons[index + 1] ? index + 1 : -1;
             const middle = previous >= 0 && next >= 0;
             const share = expandedRatio * widths[index] / (middle ? 2 : 1);
             let growth = 0;
+            const apply = [];
             const compress = (i, side) => {
                 const limit = Math.min(share, BUTTON_GROUP_COMPRESSION_LIMIT, widths[i]);
                 if (limit <= 0)
                     return;
-                buttons[i].element.style.width = `${widths[i] - limit}px`;
+                const el = buttons[i].element;
+                const to = widths[i] - limit;
+                el.style.minWidth = `${to}px`;
+                el.style.width = `${widths[i]}px`;
                 const facing = padding(i, side);
-                if (facing > 0)
-                    buttons[i].element.style[side] = `${Math.max(0, facing - limit)}px`;
+                apply.push(() => {
+                    el.style.width = `${to}px`;
+                    if (facing > 0)
+                        el.style[side] = `${Math.max(0, facing - limit)}px`;
+                });
                 growth += limit;
             };
             if (previous >= 0)
-                compress(previous, 'paddingRight');
+                compress(previous, rtl ? 'paddingLeft' : 'paddingRight');
             if (next >= 0)
-                compress(next, 'paddingLeft');
-            buttons[index].element.style.width = `${widths[index] + growth}px`;
+                compress(next, rtl ? 'paddingRight' : 'paddingLeft');
+            const pressed = buttons[index].element;
+            const to = widths[index] + growth;
+            pressed.style.maxWidth = `${to}px`;
+            pressed.style.width = `${widths[index]}px`;
+            void pressed.offsetWidth;
+            apply.forEach(fn => fn());
+            pressed.style.width = `${to}px`;
             document.addEventListener('pointerup', releasePress);
             document.addEventListener('pointercancel', releasePress);
         };

package/dist/components/button-group/types.d.ts

@@ -217,7 +217,9 @@ export interface ButtonGroupConfig {
      */
     ariaLabel?: string;
     /**
-     * Event handlers for button group events
+     * Event handlers for button group events. On 0.10.x this map is accepted
+     * and never called: subscribe with `on(event, handler)` on the group. In 1.0
+     * the handlers run, with the listener's argument.
      */
     on?: {
         click?: (event: ButtonGroupEvent) => void;

package/dist/components/card/types.d.ts

@@ -224,7 +224,7 @@ export interface BaseComponent {
     getElementClass: (base: string, element: string) => string;
     /** Add CSS class(es) */
     addClass: (...classes: string[]) => BaseComponent;
-    /** Emit an event */
+    /** Emit an event. In 1.0, `emit` accepts only the card's own events ({@link CardEvents}). */
     emit?: (event: string, data?: unknown) => void;
     /** Component configuration */
     config: CardComponentConfig;

package/dist/components/carousel/types.d.ts

@@ -1,6 +1,7 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
 /** Current item reported by programmatic navigation or native scrolling. */
 export interface CarouselChangePayload {
+    /** The current item's index. In 1.0 the payload carries it as `value`, and `index` is gone. */
     index: number;
 }
 /** Events emitted by the scroll feature and forwarded from the root. */

package/dist/components/chips/types.d.ts

@@ -36,7 +36,9 @@ export interface ChipConfig {
     trailingLabel?: string;
     /** The trailing button opens a menu: aria-haspopup="menu", and a drop-down arrow unless trailingIcon is set. */
     trailingMenu?: boolean;
+    /** In 1.0 a chip's `onClick` receives the `click` payload, `{ event, originalEvent, element }`, not the chip. */
     onClick?: (chip: ChipComponent) => void;
+    /** In 1.0 a chip's `onChange` receives one object, `{ selected, chip, value }`, the `change` payload. */
     onChange?: (selected: boolean, chip: ChipComponent) => void;
     onSelect?: (chip: ChipComponent) => void;
     class?: string;
@@ -152,7 +154,9 @@ export interface ChipsConfig {
      */
     selectionRequired?: boolean;
     /**
-     * Callback function when chip selection changes
+     * Callback function when chip selection changes.
+     * In 1.0 it receives one object, `{ value, selected, changed }` (no array, no
+     * second argument), and also hears `selectByValue(values, true)`.
      */
     onChange?: (event: ChipsChangeEvent, changedValue: string | null) => void;
     /**

package/dist/components/icon-button/types.d.ts

@@ -74,6 +74,9 @@ export interface IconButtonConfig extends BaseComponentConfig {
      * Whether the IconButton supports toggle (selection) behavior
      * When true, the button can be selected/unselected
      *
+     * A click emits `change`. The DOM `toggle` event the button also dispatches
+     * is deprecated and removed in 1.0: listen to `change`.
+     *
      * @default false
      */
     toggle?: boolean;

package/dist/components/navigation-rail/types.d.ts

@@ -50,7 +50,9 @@ export interface NavigationRailConfig extends BaseComponentConfig {
     header?: HTMLElement;
     ripple?: boolean;
     onSelect?: (event: NavigationRailSelectEvent) => void;
+    /** In 1.0 it receives `{ expanded: true }`, the object an `expand` listener receives. */
     onExpand?: () => void;
+    /** In 1.0 it receives `{ expanded: false }`, the object a `collapse` listener receives. */
     onCollapse?: () => void;
 }
 export interface NavigationRailComponent {

package/dist/components/radios/constants.d.ts

@@ -69,13 +69,13 @@ export declare const RADIO_EVENTS: {
  * Default configuration values
  */
 export declare const RADIO_DEFAULTS: {
-    /** Default radio variant */
+    /** @deprecated The radios have no variant option; nothing reads this. Removed in 1.0. */
     readonly VARIANT: "standard";
     /** Default radio direction */
     readonly DIRECTION: "vertical";
-    /** Default label position */
+    /** @deprecated The radios have no label position option; nothing reads this. Removed in 1.0. */
     readonly LABEL_POSITION: "right";
-    /** Default radio size */
+    /** @deprecated The radios have no size option; nothing reads this. Removed in 1.0. */
     readonly SIZE: "medium";
 };
 /**

package/dist/components/radios/types.d.ts

@@ -101,7 +101,10 @@ export interface RadioItem {
 }
 /** Selection or unknown-value clearing reported by the radio group. */
 export interface RadiosChangePayload {
-    /** Selected value, or an empty string when an unknown value clears selection. */
+    /**
+     * Selected value, or an empty string when an unknown value clears selection.
+     * In 1.0 that is `null`, as the select and `<m-radios>` report it.
+     */
     value: string;
     /** Native input change event; undefined for programmatic clearing. */
     originalEvent: Event | undefined;
@@ -133,12 +136,14 @@ export interface RadiosComponent {
      */
     getClass: (name: string) => string;
     /**
-     * Gets the radios component name
+     * Gets the radios component name.
+     * In 1.0 it returns `null`, not an empty string, when nothing is selected.
      * @returns Selected radio value or empty string if none selected
      */
     getValue: () => string;
     /**
-     * Sets the radios component value (selects a radio)
+     * Sets the radios component value (selects a radio).
+     * In 1.0 it also accepts `null`, which clears the selection.
      * @param value - Value to select
      * @returns The radios component for chaining
      */

package/dist/components/search/types.d.ts

@@ -116,17 +116,17 @@ export interface SearchConfig {
     class?: string;
     /** Component prefix for class names */
     prefix?: string;
-    /** Called when search is submitted */
+    /** Called when search is submitted. In 1.0 it receives the `SearchEvent` a `submit` listener receives: read `event.value`. */
     onSubmit?: (value: string) => void;
-    /** Called when input value changes */
+    /** Called when input value changes. In 1.0 it receives the `SearchEvent` an `input` listener receives: read `event.value`. */
     onInput?: (value: string) => void;
-    /** Called when search is cleared */
+    /** Called when search is cleared. In 1.0 it receives the `SearchEvent` a `clear` listener receives. */
     onClear?: () => void;
-    /** Called when view expands */
+    /** Called when view expands. In 1.0 it receives the object an `expand` listener receives. */
     onExpand?: () => void;
-    /** Called when view collapses */
+    /** Called when view collapses. In 1.0 it receives the object a `collapse` listener receives. */
     onCollapse?: () => void;
-    /** Called when a suggestion is selected */
+    /** Called when a suggestion is selected. In 1.0 it receives the `SearchEvent`: the suggestion is `event.suggestion`. */
     onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
     /** Event handlers map */
     on?: Partial<Record<SearchEventType, (event: SearchEvent) => void>>;

package/dist/components/select/types.d.ts

@@ -160,12 +160,14 @@ export interface SelectComponent {
     element: HTMLElement;
     /**
      * The textfield component
-     * @deprecated Renamed `textField` in 1.0 (FLO-383); `textfield` remains as an alias through
-     * 1.x.
+     * @deprecated Renamed `textField` in 1.0 (FLO-383), where `select.textfield` is `undefined`.
+     * 0.10.x has no `textField`, so rename it when you upgrade.
      */
     textfield: TextfieldComponent;
     /**
      * The menu component
+     * @deprecated Removed in 1.0. Use the select's own methods and events: `open()`,
+     * `close()`, `isOpen()`, `getOptions()`, `setOptions()`, and `open`, `close` and `change`.
      */
     menu: MenuComponent;
     /**

package/dist/components/split-button/types.d.ts

@@ -84,7 +84,11 @@ export interface SplitButtonComponent {
     leadingElement: HTMLButtonElement;
     /** The trailing button's element */
     trailingElement: HTMLButtonElement;
-    /** The menu, when the component was given items */
+    /**
+     * The menu, when the component was given items
+     * @deprecated Removed in 1.0. Use the split button's own methods and events: `expand()`,
+     * `collapse()`, `isExpanded()`, and `expand`, `collapse` and `select`.
+     */
     menu?: MenuComponent;
     /** Sets the leading button's label */
     setText: (text: string) => SplitButtonComponent;

package/dist/components/tabs/types.d.ts

@@ -407,7 +407,7 @@ export interface TabsComponent {
      */
     off(event: string, handler: Function): this;
     /**
-     * Emit an event
+     * Emit an event. In 1.0, `emit` accepts only the tabs' own events.
      * @param event - Event name
      * @param data - Event data
      * @returns Tabs component for chaining

package/dist/components/timepicker/types.d.ts

@@ -222,7 +222,8 @@ export interface TimePickerConfig {
      */
     onClose?: () => void;
     /**
-     * Callback when time is confirmed; receives the same 24-hour value as getValue()
+     * Callback when time is confirmed; receives the same 24-hour value as getValue().
+     * In 1.0 it receives `{ value }`, the object a `confirm` listener receives.
      */
     onConfirm?: (time: string) => void;
     /**

package/dist/components/tooltip/api.js

@@ -39,7 +39,9 @@ export const withAPI = ({ lifecycle }) => (component) => {
     const calculatePosition = () => {
         if (!target)
             return { top: 0, left: 0 };
-        const tooltipRect = component.element.getBoundingClientRect();
+        component.element.style.left = "0px";
+        const tooltipWidth = component.element.offsetWidth;
+        const tooltipHeight = component.element.offsetHeight;
         const targetRect = target.getBoundingClientRect();
         const scrollY = topLayer ? 0 : window.scrollY || window.pageYOffset;
         const scrollX = topLayer ? 0 : window.scrollX || window.pageXOffset;
@@ -49,23 +51,23 @@ export const withAPI = ({ lifecycle }) => (component) => {
         let arrowPosition;
         switch (position) {
             case TOOLTIP_POSITIONS.TOP:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left =
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "bottom";
                 break;
             case TOOLTIP_POSITIONS.TOP_START:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left = targetRect.left + scrollX;
                 arrowPosition = "bottom-start";
                 break;
             case TOOLTIP_POSITIONS.TOP_END:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left =
-                    targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+                    targetRect.left + scrollX + targetRect.width - tooltipWidth;
                 arrowPosition = "bottom-end";
                 break;
             case TOOLTIP_POSITIONS.RIGHT:
@@ -73,7 +75,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.top +
                         scrollY +
                         targetRect.height / 2 -
-                        tooltipRect.height / 2;
+                        tooltipHeight / 2;
                 left = targetRect.left + scrollX + targetRect.width + offset;
                 arrowPosition = "left";
                 break;
@@ -84,7 +86,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 break;
             case TOOLTIP_POSITIONS.RIGHT_END:
                 top =
-                    targetRect.top + scrollY + targetRect.height - tooltipRect.height;
+                    targetRect.top + scrollY + targetRect.height - tooltipHeight;
                 left = targetRect.left + scrollX + targetRect.width + offset;
                 arrowPosition = "left-end";
                 break;
@@ -94,7 +96,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "top";
                 break;
             case TOOLTIP_POSITIONS.BOTTOM_START:
@@ -105,7 +107,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
             case TOOLTIP_POSITIONS.BOTTOM_END:
                 top = targetRect.top + scrollY + targetRect.height + offset;
                 left =
-                    targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+                    targetRect.left + scrollX + targetRect.width - tooltipWidth;
                 arrowPosition = "top-end";
                 break;
             case TOOLTIP_POSITIONS.LEFT:
@@ -113,19 +115,19 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.top +
                         scrollY +
                         targetRect.height / 2 -
-                        tooltipRect.height / 2;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                        tooltipHeight / 2;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right";
                 break;
             case TOOLTIP_POSITIONS.LEFT_START:
                 top = targetRect.top + scrollY;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right-start";
                 break;
             case TOOLTIP_POSITIONS.LEFT_END:
                 top =
-                    targetRect.top + scrollY + targetRect.height - tooltipRect.height;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                    targetRect.top + scrollY + targetRect.height - tooltipHeight;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right-end";
                 break;
             default:
@@ -134,15 +136,15 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "top";
         }
         const windowWidth = window.innerWidth;
         if (left < 0) {
             left = 0;
         }
-        else if (left + tooltipRect.width > windowWidth) {
-            left = windowWidth - tooltipRect.width;
+        else if (left + tooltipWidth > windowWidth) {
+            left = windowWidth - tooltipWidth;
         }
         return { top, left, arrowPosition };
     };

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 1.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 1.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 1.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/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 1.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 1.0. Listen to `change` (FLO-295). */
         toggle: {
             detail: (payload: unknown) => {
                 selected: boolean;

package/dist/elements/preupgrade.css

@@ -1,2 +1,2 @@
-/*! mtrl v0.10.5 | MIT */
+/*! mtrl v0.10.6 | 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "Material Design 3 components for the web: plain JavaScript, web components, and React, Vue, Svelte and Solid components. TypeScript, zero dependencies.",
   "author": "floor",
   "license": "MIT",

package/dist/styles/badge.css

@@ -1,2 +1,2 @@
-/*! mtrl v0.10.5 | MIT */
+/*! mtrl v0.10.6 | MIT */
 @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.fab-menu,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.datepicker,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.badge{.mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-left{left:auto;right:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-left{left:auto;right:-8px}}