material 1.0.4 → 3.0.0-next.0

package/dist/ssr/react.d.ts

@@ -0,0 +1 @@
+import "./index";

package/dist/ssr/react.js

@@ -0,0 +1,225 @@
+// src/ssr/react.ts
+/**
+ * Enable declarative shadow DOM for material/react in this server process.
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * The server-rendered shadow root is built in a separate render, without the context of providers above the component.
+ * The page's own render (the light DOM) sees the provided value. Until upgrade, a child reading context with a default shows that default in the painted shadow root; a child requiring its context leaves this component without a declarative shadow root while the page still renders. In development, a warning names the element.
+ * The Vue and Solid bridges see the provided value in both the shadow root and light DOM. Svelte has this same context limit and logs a development-only warning naming the element when required context leaves it without a shadow root.
+ * Pass the resolved string as a prop or attribute, or accept client-rendered text until the upgrade. A fix is planned for a later 3.x release (FLO-517).
+ * @module ssr/react
+ */
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import "./index.js";
+const bridge = globalThis[Symbol.for("mtrl.ssr")];
+/**
+ * Waits before each retry of a suspending child. The first retry is the next
+ * task, so a child that resolves in a few milliseconds is snapshotted at once.
+ * The wait then doubles, and further retries keep the last step. A slow child
+ * is rendered a few times a second instead of hundreds.
+ */
+const RETRY_DELAYS_MS = [0, 2, 4, 8, 16, 32, 64, 128, 250];
+/**
+ * Suspensions past this are left to the page. Forty attempts is about eight
+ * seconds at the delays above. The host is then rendered with no shadow root,
+ * and the page keeps streaming for as long as it would without the bridge.
+ */
+const MAX_SUSPENDS = 40;
+let serializingChildren = false;
+/** One counter per host. The child element is stable across the host's retries; a ref is not. */
+const attempts = new WeakMap();
+/**
+ * renderToStaticMarkup reports a synchronous suspend as a plain Error thrown
+ * from one place in React. The thenable the child threw does not escape, and
+ * the Error has no code or digest. The message depends on the build, so it is
+ * not the signal: the header is skipped and the first call frame is compared
+ * with a frame sampled from this process's own React. A child's error is
+ * thrown from the child, including one whose text copies React's message.
+ * A frame is a V8 line starting with `at `, or a JavaScriptCore or SpiderMonkey
+ * `name@file:line:col` line. Anything else is not a frame, so the error is not
+ * a suspension.
+ */
+const firstFrame = (error) => {
+    if (!(error instanceof Error) || typeof error.stack !== "string")
+        return undefined;
+    const header = `${error.name}: ${error.message}`;
+    const rest = error.stack.startsWith(header) ? error.stack.slice(header.length) : error.stack;
+    return rest.split("\n").map((line) => line.trim()).find((line) => line.startsWith("at ") || /@[^@]*:\d+:\d+/.test(line));
+};
+/** `null` until the first suspend samples this process's React. An empty sample stays unset. */
+let sampledFrame = null;
+const suspendFrame = () => {
+    if (sampledFrame !== null)
+        return sampledFrame;
+    const pending = new Promise(() => { });
+    const Probe = () => { throw pending; };
+    const errorLog = console.error;
+    const warnLog = console.warn;
+    console.error = () => { };
+    console.warn = () => { };
+    try {
+        renderToStaticMarkup(React.createElement(Probe));
+        sampledFrame = undefined;
+    }
+    catch (error) {
+        sampledFrame = firstFrame(error);
+    }
+    finally {
+        console.error = errorLog;
+        console.warn = warnLog;
+    }
+    // Once per process: the sample is cached, and a second host does not sample again.
+    if (sampledFrame === undefined && isDevelopment()) {
+        console.warn("[mtrl] Suspending children of mtrl components will render without a server shadow root because no stack frame is available. Error.stackTraceLimit is 0, or Error.prepareStackTrace is custom.");
+    }
+    return sampledFrame;
+};
+const isSynchronousSuspend = (error) => {
+    const frame = firstFrame(error);
+    return frame !== undefined && frame === sampledFrame;
+};
+/** Same guard as core/utils/warn.ts: tsc leaves NODE_ENV in place, and a browser without process must not throw. */
+const isDevelopment = () => {
+    try {
+        return typeof process !== "undefined" && process.env != null && process.env.NODE_ENV !== "production";
+    }
+    catch {
+        return false;
+    }
+};
+const elementLabel = (tag, props) => {
+    const id = typeof props.id === "string" && props.id ? ` id=${JSON.stringify(props.id)}` : "";
+    return `<${tag}${id}>`;
+};
+/** Elements the attempt counter can hang from. Slot wrappers are recreated on every host render, so the counter hangs from the child inside them. */
+const childNodes = (children) => {
+    const nodes = [];
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            for (const child of node)
+                visit(child);
+            return;
+        }
+        if (node === null || typeof node !== "object")
+            return;
+        if (React.isValidElement(node) && node.type === "span") {
+            const props = node.props;
+            if (props.slot != null) {
+                visit(props.children);
+                return;
+            }
+        }
+        nodes.push(node);
+    };
+    const top = React.isValidElement(children) && children.type === React.Fragment
+        ? children.props.children
+        : children;
+    visit(top);
+    return nodes;
+};
+const nextAttempt = (children) => {
+    const nodes = childNodes(children);
+    if (nodes.length === 0)
+        return MAX_SUSPENDS + 1;
+    let state;
+    for (const node of nodes) {
+        state = attempts.get(node);
+        if (state)
+            break;
+    }
+    if (!state)
+        state = { count: 0, nodes, gaveUp: false };
+    state.count += 1;
+    state.nodes = nodes;
+    for (const node of nodes)
+        attempts.set(node, state);
+    return state.count;
+};
+const suspendedGaveUp = (children) => {
+    for (const node of childNodes(children)) {
+        if (attempts.get(node)?.gaveUp)
+            return true;
+    }
+    return false;
+};
+/** Keeps the counter so a later render of the same child does not warn again. */
+const markGaveUp = (children) => {
+    let state;
+    for (const node of childNodes(children)) {
+        state = attempts.get(node);
+        if (state)
+            break;
+    }
+    if (!state || state.gaveUp)
+        return false;
+    state.gaveUp = true;
+    return true;
+};
+const clearAttempt = (children) => {
+    const nodes = childNodes(children);
+    let state;
+    for (const node of nodes) {
+        state = attempts.get(node);
+        if (state)
+            break;
+    }
+    if (!state)
+        return;
+    for (const node of state.nodes)
+        attempts.delete(node);
+    for (const node of nodes)
+        attempts.delete(node);
+};
+const retryDelay = (attempt) => RETRY_DELAYS_MS[Math.min(attempt - 1, RETRY_DELAYS_MS.length - 1)] ?? RETRY_DELAYS_MS[RETRY_DELAYS_MS.length - 1] ?? 250;
+bridge.react = (tag, props, children, prefix) => {
+    // Nested hosts emit their own roots when React renders the outer tree.
+    // A template from this pass would declare a shadow root twice.
+    if (serializingChildren)
+        return undefined;
+    // The cap already let this child go. A later pass must not open another wait or warn again.
+    if (suspendedGaveUp(children))
+        return undefined;
+    // Sample outside a render. Doing it from the catch would nest renderToStaticMarkup.
+    suspendFrame();
+    let markup;
+    serializingChildren = true;
+    try {
+        // No Suspense wrapper here. renderToStaticMarkup renders an error and a
+        // suspension as the same fallback, so a wrapper cannot tell them apart.
+        // A suspension is thrown from React's static renderer; any other throw is
+        // the child's error. A boundary already inside the children still renders
+        // its own fallback, and this pass does not throw.
+        markup = renderToStaticMarkup(React.createElement(tag, props, children));
+    }
+    catch (error) {
+        if (!isSynchronousSuspend(error)) {
+            // Returning lets the host finish. The page then renders this child and
+            // reports its error, as it does without the bridge. Development names the
+            // host and the error; nothing is remembered past this call.
+            if (isDevelopment()) {
+                const message = error instanceof Error ? error.message : String(error);
+                console.warn(`[mtrl] ${elementLabel(tag, props)} child snapshot failed, often because it needs ancestor context; this response has no shadow root for it: ${message}`);
+            }
+            clearAttempt(children);
+            return undefined;
+        }
+        const attempt = nextAttempt(children);
+        if (attempt > MAX_SUSPENDS) {
+            // No template, and the page render reaches the child. A slow response is not a failed request.
+            if (markGaveUp(children) && isDevelopment()) {
+                console.warn(`[mtrl] ${elementLabel(tag, props)} still had a suspending child after ${MAX_SUSPENDS} attempts, so this response has no shadow root for it.`);
+            }
+            return undefined;
+        }
+        const delay = retryDelay(attempt);
+        throw new Promise((resolve) => { setTimeout(resolve, delay); });
+    }
+    finally {
+        serializingChildren = false;
+    }
+    clearAttempt(children);
+    // Let React serialize host props (style objects, tabIndex, boolean/data/aria
+    // attributes). The server bridge parses them in its own DOM realm.
+    // An opted-out host has no shadow content and must not get an empty template.
+    return bridge.shadow(tag, markup, prefix) || undefined;
+};

package/dist/ssr/solid.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/solid
+ */
+import "./index";

package/dist/ssr/solid.js

@@ -0,0 +1,26 @@
+import { ssr, ssrElement } from "solid-js/web";
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/solid
+ */
+import "./index.js";
+const bridge = globalThis[Symbol.for("mtrl.ssr")];
+const TAG = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+bridge.solid = (tag, props, children, prefix) => {
+    if (!TAG.test(tag))
+        throw new TypeError(`Invalid tag: ${tag}`);
+    // Let Solid escape and resolve the children exactly once, in the real page
+    // context. A second render could create resources under the page's Suspense
+    // owner that never resolve, or consume a different set of hydration keys.
+    const hostProps = { ...props, children };
+    const markup = ssrElement(tag, hostProps, undefined, false).t;
+    const closing = `</${tag}>`;
+    const openingLength = ssrElement(tag, hostProps, "", false).t.length - closing.length;
+    const light = markup.slice(openingLength, -closing.length);
+    // Nested adapters have already supplied their templates. Strip them only
+    // from the shadow renderer's detached copy; feeding them back would declare
+    // a shadow root twice. The page's original light DOM is kept byte for byte.
+    const html = bridge.shadow(tag, markup, prefix, true);
+    const template = html ? `<template shadowrootmode="open" shadowrootdelegatesfocus="">${html}</template>` : "";
+    return ssr(template + light);
+};

package/dist/ssr/svelte.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/svelte
+ */
+import "./index";

package/dist/ssr/svelte.js

@@ -0,0 +1,88 @@
+import { render } from "svelte/server";
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/svelte
+ */
+import "./index.js";
+const bridge = globalThis[Symbol.for("mtrl.ssr")];
+let serializingChildren = false;
+const TAG = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+const NAME = /^[a-zA-Z_:][a-zA-Z0-9_.:-]*$/;
+const SLOT = /^[a-z][a-z0-9-]*$/;
+const isDevelopment = () => {
+    try {
+        return typeof process !== "undefined" && process.env != null && process.env.NODE_ENV !== "production";
+    }
+    catch {
+        return false;
+    }
+};
+const escapeAttr = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/** Host attributes as HTML. Functions and unsafe names stay out of the string the bridge parses. */
+const attributeText = (attributes) => {
+    let text = "";
+    for (const [name, value] of Object.entries(attributes)) {
+        if (!NAME.test(name))
+            continue;
+        if (typeof value === "string")
+            text += ` ${name}="${escapeAttr(value)}"`;
+        else if (typeof value === "number" && Number.isFinite(value))
+            text += ` ${name}="${value}"`;
+        else if (value === true)
+            text += ` ${name}=""`;
+    }
+    return text;
+};
+/**
+ * Light DOM the element factory reads, without nested declarative roots.
+ * Snippets run against a real renderer so dev-mode element checks have a component context.
+ */
+const childrenMarkup = (children, slots) => {
+    const Capture = (renderer, props) => {
+        renderer.component((target) => {
+            props.children?.(target);
+            for (const [slot, snippet] of props.slots) {
+                target.push(`<span style="display: contents" slot="${slot}">`);
+                snippet(target);
+                target.push("</span>");
+            }
+        }, Capture);
+    };
+    return render(Capture, {
+        props: { children, slots },
+    }).body;
+};
+bridge.svelte = (tag, attributes, children, slots, prefix) => {
+    // Nested components emit their own roots in the outer tree. Serializing them
+    // again would declare a shadow root twice, which the renderer rejects.
+    if (serializingChildren)
+        return "";
+    if (!TAG.test(tag))
+        throw new TypeError(`Invalid tag: ${tag}`);
+    for (const [slot] of slots)
+        if (!SLOT.test(slot))
+            throw new TypeError(`Invalid slot: ${slot}`);
+    let light;
+    serializingChildren = true;
+    try {
+        // The detached renderer has no access to providers above this host. The
+        // page renders these snippets again in its own tree, where a real child
+        // error still escapes through Svelte's normal server render.
+        light = childrenMarkup(children, slots);
+    }
+    catch (error) {
+        if (isDevelopment()) {
+            const id = typeof attributes.id === "string" && attributes.id ? ` id=${JSON.stringify(attributes.id)}` : "";
+            const message = error instanceof Error ? error.message : String(error);
+            console.warn(`[mtrl] <${tag}${id}> child snapshot failed, often because it needs ancestor context; this response has no shadow root for it: ${message}`);
+        }
+        return "";
+    }
+    finally {
+        serializingChildren = false;
+    }
+    const markup = `<${tag}${attributeText(attributes)}>${light}</${tag}>`;
+    // An opted-out host has no shadow content and must not get an empty template.
+    const html = bridge.shadow(tag, markup, prefix);
+    return html ? `<template shadowrootmode="open" shadowrootdelegatesfocus="">${html}</template>` : "";
+};

package/dist/ssr/vue.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/vue
+ */
+import "./index";

package/dist/ssr/vue.js

@@ -0,0 +1,92 @@
+// src/ssr/vue.ts
+/**
+ * Enable declarative shadow DOM for material/vue in this server process.
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/vue
+ */
+import { getCurrentInstance, h } from "vue";
+import { ssrRenderVNode } from "vue/server-renderer";
+/**
+ * The identity HTML policy is not a sanitizer; configure a synchronous sanitizer for untrusted markup.
+ * @module ssr/vue
+ */
+import "./index.js";
+const bridge = globalThis[Symbol.for("mtrl.ssr")];
+const TAG = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+/**
+ * Vue pushes promises into the buffer when a child `setup` is async. They
+ * resolve to strings or nested buffers, in order. Anything else is not markup.
+ */
+const flatten = (item) => {
+    if (typeof item === "string")
+        return item;
+    if (isThenable(item))
+        return Promise.resolve(item).then((value) => Promise.resolve(flatten(value)));
+    if (Array.isArray(item)) {
+        let html = "";
+        let chain = null;
+        for (const part of item) {
+            const next = flatten(part);
+            if (chain) {
+                const step = next;
+                chain = chain.then((soFar) => typeof step === "string" ? soFar + step : step.then((value) => soFar + value));
+            }
+            else if (typeof next === "string") {
+                html += next;
+            }
+            else {
+                const soFar = html;
+                chain = next.then((value) => soFar + value);
+            }
+        }
+        return chain ?? html;
+    }
+    throw new TypeError("Vue SSR shadow markup must be HTML");
+};
+/** Slot nodes, once. A second pass would run `async setup` again under the page's Suspense. */
+const renderNodes = (nodes, parent) => {
+    const parts = [];
+    const push = (item) => {
+        parts.push(item);
+    };
+    // The public vnode type omits the scope ids Vue's renderer copies onto slot content.
+    const scope = parent?.vnode?.slotScopeIds?.join(" ") || undefined;
+    const instance = parent ?? null;
+    for (const node of nodes)
+        ssrRenderVNode(push, node, instance, scope);
+    return flatten(parts);
+};
+/** Opening tag, so the shadow renderer can read the host attributes. Children stay separate. */
+const openTag = (tag, props, parent) => {
+    const parts = [];
+    const push = (item) => {
+        parts.push(item);
+    };
+    const instance = parent ?? null;
+    ssrRenderVNode(push, h(tag, props), instance);
+    const html = flatten(parts);
+    if (typeof html !== "string")
+        throw new TypeError("Vue SSR host attributes must be synchronous");
+    const closing = `</${tag}>`;
+    if (!html.endsWith(closing))
+        throw new TypeError(`Vue SSR host did not close <${tag}>`);
+    return html.slice(0, -closing.length);
+};
+bridge.vue = (tag, props, children, prefix) => {
+    if (!TAG.test(tag))
+        throw new TypeError(`Invalid tag: ${tag}`);
+    const parent = getCurrentInstance();
+    const open = openTag(tag, props, parent);
+    // One render of the real slot nodes. Sync markup stays a string; an async
+    // child becomes a promise the page buffer already knows how to await.
+    const light = renderNodes(children(), parent);
+    const finish = (lightHtml) => {
+        // Nested hosts already emitted declarative roots. Strip them only from
+        // the renderer's detached copy; the page keeps this light HTML.
+        const html = bridge.shadow(tag, `${open}${lightHtml}</${tag}>`, prefix, true);
+        const template = html ? `<template shadowrootmode="open" shadowrootdelegatesfocus="">${html}</template>` : "";
+        return `${template}${lightHtml}`;
+    };
+    return typeof light === "string" ? finish(light) : light.then(finish);
+};

package/dist/styles/badge.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,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}}

package/dist/styles/badge.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/badge.js

@@ -0,0 +1,2 @@
+
+import "./badge.css";

package/dist/styles/base.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.base{:root{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-error-container: #F9DEDC;--mtrl-sys-color-on-error-container: #410E0B;--mtrl-sys-color-success: #006C4E;--mtrl-sys-color-on-success: #FFFFFF;--mtrl-sys-color-warning: #974800;--mtrl-sys-color-on-warning: #FFFFFF;--mtrl-sys-color-info: #0061A4;--mtrl-sys-color-on-info: #FFFFFF;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-primary-fixed: #eaddff;--mtrl-sys-color-primary-fixed-dim: #d0bcff;--mtrl-sys-color-on-primary-fixed: #21005d;--mtrl-sys-color-on-primary-fixed-variant: #4f378b;--mtrl-sys-color-secondary-fixed: #e8def8;--mtrl-sys-color-secondary-fixed-dim: #ccc2dc;--mtrl-sys-color-on-secondary-fixed: #1d192b;--mtrl-sys-color-on-secondary-fixed-variant: #4a4458;--mtrl-sys-color-tertiary-fixed: #ffd8e4;--mtrl-sys-color-tertiary-fixed-dim: #efb8c8;--mtrl-sys-color-on-tertiary-fixed: #31111d;--mtrl-sys-color-on-tertiary-fixed-variant: #633b48;--mtrl-sys-color-surface: #fef7ff;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-bright: #fef7ff;--mtrl-sys-color-surface-variant: #e7e0ec;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-on-surface: #1d1b20;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #322f35;--mtrl-sys-color-inverse-on-surface: #f5eff7;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.1;--mtrl-sys-state-pressed-state-layer-opacity: 0.1;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}@media(prefers-color-scheme: dark){:root{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-error-container: #8C1D18;--mtrl-sys-color-on-error-container: #F9DEDC;--mtrl-sys-color-success: #8CD6AF;--mtrl-sys-color-on-success: #003824;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #462A00;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003355;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-primary-fixed: #eaddff;--mtrl-sys-color-primary-fixed-dim: #d0bcff;--mtrl-sys-color-on-primary-fixed: #21005d;--mtrl-sys-color-on-primary-fixed-variant: #4f378b;--mtrl-sys-color-secondary-fixed: #e8def8;--mtrl-sys-color-secondary-fixed-dim: #ccc2dc;--mtrl-sys-color-on-secondary-fixed: #1d192b;--mtrl-sys-color-on-secondary-fixed-variant: #4a4458;--mtrl-sys-color-tertiary-fixed: #ffd8e4;--mtrl-sys-color-tertiary-fixed-dim: #efb8c8;--mtrl-sys-color-on-tertiary-fixed: #31111d;--mtrl-sys-color-on-tertiary-fixed-variant: #633b48;--mtrl-sys-color-surface: #141218;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-bright: #3b383e;--mtrl-sys-color-surface-variant: #49454f;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-on-surface: #e6e0e9;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-variant: #49454f;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #e6e0e9;--mtrl-sys-color-inverse-on-surface: #322f35;--mtrl-sys-color-inverse-primary: #6750a4}}.dark-theme{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-error-container: #8C1D18;--mtrl-sys-color-on-error-container: #F9DEDC;--mtrl-sys-color-success: #8CD6AF;--mtrl-sys-color-on-success: #003824;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #462A00;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003355;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-primary-fixed: #eaddff;--mtrl-sys-color-primary-fixed-dim: #d0bcff;--mtrl-sys-color-on-primary-fixed: #21005d;--mtrl-sys-color-on-primary-fixed-variant: #4f378b;--mtrl-sys-color-secondary-fixed: #e8def8;--mtrl-sys-color-secondary-fixed-dim: #ccc2dc;--mtrl-sys-color-on-secondary-fixed: #1d192b;--mtrl-sys-color-on-secondary-fixed-variant: #4a4458;--mtrl-sys-color-tertiary-fixed: #ffd8e4;--mtrl-sys-color-tertiary-fixed-dim: #efb8c8;--mtrl-sys-color-on-tertiary-fixed: #31111d;--mtrl-sys-color-on-tertiary-fixed-variant: #633b48;--mtrl-sys-color-surface: #141218;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-bright: #3b383e;--mtrl-sys-color-surface-variant: #49454f;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-on-surface: #e6e0e9;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-variant: #49454f;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #e6e0e9;--mtrl-sys-color-inverse-on-surface: #322f35;--mtrl-sys-color-inverse-primary: #6750a4}[data-theme=baseline]{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-error-container: #F9DEDC;--mtrl-sys-color-on-error-container: #410E0B;--mtrl-sys-color-success: #006C4E;--mtrl-sys-color-on-success: #FFFFFF;--mtrl-sys-color-warning: #974800;--mtrl-sys-color-on-warning: #FFFFFF;--mtrl-sys-color-info: #0061A4;--mtrl-sys-color-on-info: #FFFFFF;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-primary-fixed: #eaddff;--mtrl-sys-color-primary-fixed-dim: #d0bcff;--mtrl-sys-color-on-primary-fixed: #21005d;--mtrl-sys-color-on-primary-fixed-variant: #4f378b;--mtrl-sys-color-secondary-fixed: #e8def8;--mtrl-sys-color-secondary-fixed-dim: #ccc2dc;--mtrl-sys-color-on-secondary-fixed: #1d192b;--mtrl-sys-color-on-secondary-fixed-variant: #4a4458;--mtrl-sys-color-tertiary-fixed: #ffd8e4;--mtrl-sys-color-tertiary-fixed-dim: #efb8c8;--mtrl-sys-color-on-tertiary-fixed: #31111d;--mtrl-sys-color-on-tertiary-fixed-variant: #633b48;--mtrl-sys-color-surface: #fef7ff;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-bright: #fef7ff;--mtrl-sys-color-surface-variant: #e7e0ec;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-on-surface: #1d1b20;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #322f35;--mtrl-sys-color-inverse-on-surface: #f5eff7;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.1;--mtrl-sys-state-pressed-state-layer-opacity: 0.1;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}[data-theme=baseline][data-theme-mode=dark]{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-error-container: #8C1D18;--mtrl-sys-color-on-error-container: #F9DEDC;--mtrl-sys-color-success: #8CD6AF;--mtrl-sys-color-on-success: #003824;--mtrl-sys-color-warning: #FFB95C;--mtrl-sys-color-on-warning: #462A00;--mtrl-sys-color-info: #99CBFF;--mtrl-sys-color-on-info: #003355;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-primary-fixed: #eaddff;--mtrl-sys-color-primary-fixed-dim: #d0bcff;--mtrl-sys-color-on-primary-fixed: #21005d;--mtrl-sys-color-on-primary-fixed-variant: #4f378b;--mtrl-sys-color-secondary-fixed: #e8def8;--mtrl-sys-color-secondary-fixed-dim: #ccc2dc;--mtrl-sys-color-on-secondary-fixed: #1d192b;--mtrl-sys-color-on-secondary-fixed-variant: #4a4458;--mtrl-sys-color-tertiary-fixed: #ffd8e4;--mtrl-sys-color-tertiary-fixed-dim: #efb8c8;--mtrl-sys-color-on-tertiary-fixed: #31111d;--mtrl-sys-color-on-tertiary-fixed-variant: #633b48;--mtrl-sys-color-surface: #141218;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-bright: #3b383e;--mtrl-sys-color-surface-variant: #49454f;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-on-surface: #e6e0e9;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-variant: #49454f;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-inverse-surface: #e6e0e9;--mtrl-sys-color-inverse-on-surface: #322f35;--mtrl-sys-color-inverse-primary: #6750a4}@media(prefers-contrast: more){:is([data-theme=baseline],:root:not([data-theme])):not([data-theme-contrast]):not([data-theme-mode=dark])[data-theme]{--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-primary: #312259;--mtrl-sys-color-primary-container: #4f4078;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-secondary: #2f293d;--mtrl-sys-color-secondary-container: #4c465b;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-tertiary: #44212e;--mtrl-sys-color-tertiary-container: #653d4b;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-primary-fixed: #4f4078;--mtrl-sys-color-primary-fixed-dim: #382960;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-secondary-fixed: #4c465b;--mtrl-sys-color-secondary-fixed-dim: #353043;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-tertiary-fixed: #653d4b;--mtrl-sys-color-tertiary-fixed-dim: #4c2734;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface: #fdf7ff;--mtrl-sys-color-surface-dim: #bcb7bf;--mtrl-sys-color-surface-bright: #fdf7ff;--mtrl-sys-color-surface-variant: #e7e0eb;--mtrl-sys-color-surface-container-low: #f5eff7;--mtrl-sys-color-surface-container: #e6e0e9;--mtrl-sys-color-surface-container-high: #d8d2da;--mtrl-sys-color-surface-container-highest: #cac5cc;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #2e2b33;--mtrl-sys-color-outline-variant: #4b4851;--mtrl-sys-color-inverse-on-surface: #ffffff;--mtrl-sys-color-inverse-primary: #cfbdfe}}@media(prefers-contrast: more)and (not (prefers-color-scheme: dark)){:is([data-theme=baseline],:root:not([data-theme])):not([data-theme-contrast]):root:not([data-theme]):not(.dark-theme){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-primary: #312259;--mtrl-sys-color-primary-container: #4f4078;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-secondary: #2f293d;--mtrl-sys-color-secondary-container: #4c465b;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-tertiary: #44212e;--mtrl-sys-color-tertiary-container: #653d4b;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-primary-fixed: #4f4078;--mtrl-sys-color-primary-fixed-dim: #382960;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-secondary-fixed: #4c465b;--mtrl-sys-color-secondary-fixed-dim: #353043;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-tertiary-fixed: #653d4b;--mtrl-sys-color-tertiary-fixed-dim: #4c2734;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface: #fdf7ff;--mtrl-sys-color-surface-dim: #bcb7bf;--mtrl-sys-color-surface-bright: #fdf7ff;--mtrl-sys-color-surface-variant: #e7e0eb;--mtrl-sys-color-surface-container-low: #f5eff7;--mtrl-sys-color-surface-container: #e6e0e9;--mtrl-sys-color-surface-container-high: #d8d2da;--mtrl-sys-color-surface-container-highest: #cac5cc;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #2e2b33;--mtrl-sys-color-outline-variant: #4b4851;--mtrl-sys-color-inverse-on-surface: #ffffff;--mtrl-sys-color-inverse-primary: #cfbdfe}}@media(prefers-contrast: more){:is([data-theme=baseline],:root:not([data-theme])):not([data-theme-contrast])[data-theme][data-theme-mode=dark],:is([data-theme=baseline],:root:not([data-theme])):not([data-theme-contrast]):root:not([data-theme]).dark-theme{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #f5edff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #cbb9fa;--mtrl-sys-color-on-primary-container: #0f0033;--mtrl-sys-color-secondary: #f5edff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #c8bed8;--mtrl-sys-color-on-secondary-container: #0d081a;--mtrl-sys-color-tertiary: #ffebef;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #eab4c4;--mtrl-sys-color-on-tertiary-container: #1d030d;--mtrl-sys-color-primary-fixed: #e9ddff;--mtrl-sys-color-primary-fixed-dim: #cfbdfe;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #16033d;--mtrl-sys-color-secondary-fixed: #e8def9;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #130e20;--mtrl-sys-color-tertiary-fixed: #ffd9e3;--mtrl-sys-color-tertiary-fixed-dim: #eeb8c8;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #240713;--mtrl-sys-color-surface-bright: #524f55;--mtrl-sys-color-surface-variant: #49454e;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #211f24;--mtrl-sys-color-surface-container: #322f35;--mtrl-sys-color-surface-container-high: #3d3a41;--mtrl-sys-color-surface-container-highest: #48464c;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #f4eef9;--mtrl-sys-color-outline-variant: #c6c0cb;--mtrl-sys-color-inverse-on-surface: #000000;--mtrl-sys-color-inverse-primary: #4e3f77}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){:is([data-theme=baseline],:root:not([data-theme])):not([data-theme-contrast]):root:not([data-theme]):not(.dark-theme){--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #f5edff;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #cbb9fa;--mtrl-sys-color-on-primary-container: #0f0033;--mtrl-sys-color-secondary: #f5edff;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #c8bed8;--mtrl-sys-color-on-secondary-container: #0d081a;--mtrl-sys-color-tertiary: #ffebef;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #eab4c4;--mtrl-sys-color-on-tertiary-container: #1d030d;--mtrl-sys-color-primary-fixed: #e9ddff;--mtrl-sys-color-primary-fixed-dim: #cfbdfe;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #16033d;--mtrl-sys-color-secondary-fixed: #e8def9;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #130e20;--mtrl-sys-color-tertiary-fixed: #ffd9e3;--mtrl-sys-color-tertiary-fixed-dim: #eeb8c8;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #240713;--mtrl-sys-color-surface-bright: #524f55;--mtrl-sys-color-surface-variant: #49454e;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #211f24;--mtrl-sys-color-surface-container: #322f35;--mtrl-sys-color-surface-container-high: #3d3a41;--mtrl-sys-color-surface-container-highest: #48464c;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #f4eef9;--mtrl-sys-color-outline-variant: #c6c0cb;--mtrl-sys-color-inverse-on-surface: #000000;--mtrl-sys-color-inverse-primary: #4e3f77}}:root{--mtrl-ref-typeface-brand: Roboto, sans-serif;--mtrl-ref-typeface-plain: Roboto, sans-serif;--mtrl-sys-shape-corner-none: 0;--mtrl-sys-shape-corner-extra-small: 4px;--mtrl-sys-shape-corner-small: 8px;--mtrl-sys-shape-corner-medium: 12px;--mtrl-sys-shape-corner-large: 16px;--mtrl-sys-shape-corner-large-increased: 20px;--mtrl-sys-shape-corner-extra-large: 28px;--mtrl-sys-shape-corner-extra-large-increased: 32px;--mtrl-sys-shape-corner-extra-extra-large: 48px;--mtrl-sys-shape-corner-full: 9999px;--mtrl-sys-typescale-body-medium-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-medium-font-size: 14px;--mtrl-sys-typescale-body-medium-line-height: 20px}*,*::before,*::after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;padding:0}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::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}}button{background:rgba(0,0,0,0);border:none;cursor:pointer;padding:0}ul,ol{list-style:none;margin:0;padding:0}a{text-decoration:none;color:inherit}table{border-collapse:collapse;border-spacing:0}.mtrl-ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}.mtrl-ripple-wave{position:absolute;border-radius:50%;background-color:currentColor;opacity:0;transform:scale(0);pointer-events:none;will-change:transform,opacity;transition:opacity .4s cubic-bezier(0.4, 0, 0.2, 1)}.mtrl-ripple-wave.active{animation:mtrl-ripple-expand .4s cubic-bezier(0.4, 0, 0.2, 1) both;opacity:.1}.mtrl-ripple-wave.fade-out{opacity:0}@keyframes mtrl-ripple-expand{from{transform:scale(0)}to{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.mtrl-ripple-wave.active{animation:none;transform:scale(1)}.mtrl-ripple-wave{transition:none}}[data-ripple]{position:relative;overflow:hidden}[data-ripple]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none}[data-ripple][data-ripple=light]::after{background-color:hsla(0,0%,100%,.3)}[data-ripple][data-ripple=dark]::after{background-color:rgba(0,0,0,.1)}[data-ripple]>*{position:relative;z-index:1}body{margin:0;padding:0;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-sys-typescale-body-medium-font);font-size:var(--mtrl-sys-typescale-body-medium-font-size);line-height:var(--mtrl-sys-typescale-body-medium-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1)}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}*,*::before,*::after{box-sizing:border-box}}

package/dist/styles/base.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/base.js

@@ -0,0 +1,2 @@
+
+import "./base.css";

package/dist/styles/bottom-app-bar.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.bottom-app-bar{.mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar__actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar__actions>*{flex-shrink:0}.mtrl-bottom-app-bar__fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar__fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}[dir=rtl] .mtrl-bottom-app-bar{padding:12px 4px 12px 16px}[dir=rtl] .mtrl-bottom-app-bar__actions{flex-direction:row-reverse}[dir=rtl] .mtrl-bottom-app-bar__fab-container{margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}}

package/dist/styles/bottom-app-bar.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/bottom-app-bar.js

@@ -0,0 +1,2 @@
+
+import "./bottom-app-bar.css";

package/dist/styles/bottom-sheet.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.bottom-sheet{.mtrl-bottom-sheet{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.mtrl-bottom-sheet--scrim-visible,.mtrl-bottom-sheet--partial,.mtrl-bottom-sheet--expanded{pointer-events:auto}.mtrl-bottom-sheet__scrim{position:absolute;inset:0;background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;visibility:hidden;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),visibility 0s linear 250ms}.mtrl-bottom-sheet__container{position:relative;width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);border-start-start-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);border-start-end-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15),0 32px 0 0 var(--mtrl-sys-color-surface-container-low);transform:translateY(100%);transition:transform 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-bottom-sheet__container:focus{outline:none}.mtrl-bottom-sheet__container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-bottom-sheet__handle{flex:0 0 auto;position:relative;align-self:center;width:48px;height:48px;margin:0 auto;padding:0;border:0;border-radius:50%;background:none;cursor:grab;touch-action:none}.mtrl-bottom-sheet__handle::before{content:"";position:absolute;inset:22px 8px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);background-color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-bottom-sheet__handle:active{cursor:grabbing}.mtrl-bottom-sheet__handle:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-bottom-sheet__header{flex:0 0 auto;padding:0 24px 16px}.mtrl-bottom-sheet__title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-bottom-sheet__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;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-bottom-sheet--partial .mtrl-bottom-sheet__container{transform:translateY(0);max-height:var(--mtrl-bottom-sheet-peek-height, 50%);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)}.mtrl-bottom-sheet--partial .mtrl-bottom-sheet__scrim{opacity:1;visibility:visible;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),visibility 0s}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet__container{transform:translateY(0);max-height:100%;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)}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet__container:where(.mtrl-bottom-sheet--full-height *){border-start-start-radius:0;border-start-end-radius:0}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet__scrim{opacity:1;visibility:visible;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),visibility 0s}.mtrl-bottom-sheet--standard{pointer-events:none}.mtrl-bottom-sheet--standard .mtrl-bottom-sheet__container{pointer-events:auto}@media(prefers-reduced-motion: reduce){.mtrl-bottom-sheet .mtrl-bottom-sheet__container,.mtrl-bottom-sheet .mtrl-bottom-sheet__scrim,.mtrl-bottom-sheet--partial .mtrl-bottom-sheet__container,.mtrl-bottom-sheet--partial .mtrl-bottom-sheet__scrim,.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet__container,.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet__scrim{transition:none}}dialog.mtrl-bottom-sheet{width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:rgba(0,0,0,0);color:inherit;transition:overlay 250ms allow-discrete}dialog.mtrl-bottom-sheet::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}dialog.mtrl-bottom-sheet.mtrl-bottom-sheet--partial::backdrop,dialog.mtrl-bottom-sheet.mtrl-bottom-sheet--expanded::backdrop{opacity:1}@media(prefers-reduced-motion: reduce){dialog.mtrl-bottom-sheet,dialog.mtrl-bottom-sheet::backdrop{transition:none}}}

package/dist/styles/bottom-sheet.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/bottom-sheet.js

@@ -0,0 +1,2 @@
+
+import "./bottom-sheet.css";

package/dist/styles/button-group.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.button-group{.mtrl-button-group{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:var(--mtrl-button-group-gap, 12px);--mtrl-button-group-height: 40px;--mtrl-button-group-icon: 20px;--mtrl-button-group-gap: 12px;--mtrl-button-group-inner-corner: var(--mtrl-sys-shape-corner-small, 8px);--mtrl-button-group-pressed-corner: var(--mtrl-sys-shape-corner-extra-small, 4px);--mtrl-button-group-radius: 20px}.mtrl-button-group--vertical{flex-direction:column;align-items:stretch}.mtrl-button-group>.mtrl-button,.mtrl-button-group>.mtrl-icon-button{margin:0;flex-shrink:0;height:var(--mtrl-button-group-height);transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),box-shadow 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),padding 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),gap 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-button-group>.mtrl-button:active,.mtrl-button-group>.mtrl-icon-button:active{transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),box-shadow 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-radius 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 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),padding 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),gap 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-button-group>.mtrl-icon-button{width:var(--mtrl-button-group-height)}.mtrl-button-group--equal-width>.mtrl-button{flex:1 1 0;justify-content:center}.mtrl-button-group--disabled{pointer-events:none}.mtrl-button-group--connected>.mtrl-button,.mtrl-button-group--connected>.mtrl-icon-button{--mtrl-button-shape:var(--mtrl-button-group-inner-corner);--mtrl-button-shape-pressed:var(--mtrl-button-group-pressed-corner);--mtrl-button-shape-selected:var(--mtrl-button-group-radius)}.mtrl-button-group--connected>.mtrl-button-group__button--first{--mtrl-button-shape:var(--mtrl-button-group-radius) var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-radius);--mtrl-button-shape-pressed:var(--mtrl-button-group-radius) var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-radius)}.mtrl-button-group--connected>.mtrl-button-group__button--last{--mtrl-button-shape:var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-radius) var(--mtrl-button-group-radius) var(--mtrl-button-group-inner-corner);--mtrl-button-shape-pressed:var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-radius) var(--mtrl-button-group-radius) var(--mtrl-button-group-pressed-corner)}.mtrl-button-group--connected>.mtrl-button-group__button--single{--mtrl-button-shape:var(--mtrl-button-group-radius);--mtrl-button-shape-pressed:var(--mtrl-button-group-radius)}.mtrl-button-group--connected.mtrl-button-group--vertical>.mtrl-button-group__button--first{--mtrl-button-shape:var(--mtrl-button-group-radius) var(--mtrl-button-group-radius) var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-inner-corner);--mtrl-button-shape-pressed:var(--mtrl-button-group-radius) var(--mtrl-button-group-radius) var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-pressed-corner)}.mtrl-button-group--connected.mtrl-button-group--vertical>.mtrl-button-group__button--last{--mtrl-button-shape:var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-inner-corner) var(--mtrl-button-group-radius) var(--mtrl-button-group-radius);--mtrl-button-shape-pressed:var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-pressed-corner) var(--mtrl-button-group-radius) var(--mtrl-button-group-radius)}.mtrl-button-group--connected.mtrl-button-group--square>.mtrl-button-group__button--first,.mtrl-button-group--connected.mtrl-button-group--square>.mtrl-button-group__button--last,.mtrl-button-group--connected.mtrl-button-group--square>.mtrl-button-group__button--single{--mtrl-button-shape:var(--mtrl-button-group-inner-corner);--mtrl-button-shape-pressed:var(--mtrl-button-group-pressed-corner)}.mtrl-button-group--connected.mtrl-button-group--size-xs>.mtrl-button,.mtrl-button-group--connected.mtrl-button-group--size-xs>.mtrl-icon-button,.mtrl-button-group--connected.mtrl-button-group--size-s>.mtrl-button,.mtrl-button-group--connected.mtrl-button-group--size-s>.mtrl-icon-button{min-width:48px}.mtrl-button-group--labels-selected>.mtrl-button{gap:0;min-width:var(--mtrl-button-group-height);padding:0 calc((var(--mtrl-button-group-height) - var(--mtrl-button-group-icon))/2)}.mtrl-button-group--labels-selected>.mtrl-button .mtrl-button__text{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:clip;transition:max-width 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-button-group--labels-selected>.mtrl-button-group__button--selected{gap:8px;padding:0 16px}.mtrl-button-group--labels-selected>.mtrl-button-group__button--selected .mtrl-button__text{max-width:12em;opacity:1}}

package/dist/styles/button-group.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/button-group.js

@@ -0,0 +1,3 @@
+import "./button.js";
+import "./icon-button.js";
+import "./button-group.css";

package/dist/styles/button.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+@layer mtrl.preupgrade,mtrl.base,mtrl.utilities,mtrl.text-field,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.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-bar,mtrl.navigation-rail,mtrl.list,mtrl.tooltip,mtrl.toolbar;@layer mtrl.button{.mtrl-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:58px;height:40px;padding:0 16px;border:none;border-radius:var(--mtrl-button-shape, 20px);background-color:rgba(0,0,0,0);color:inherit;font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;will-change:border-radius;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),box-shadow 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-button:focus{outline:none}.mtrl-button:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-button:disabled{pointer-events:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);box-shadow:none}.mtrl-button:disabled .mtrl-button__icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent)}.mtrl-button::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button:hover::before{opacity:.08}.mtrl-button:focus-visible::before{opacity:.1}.mtrl-button:active:not(:has(>.mtrl-ripple))::before,.mtrl-button--active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-button__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__icon svg{width:100%;height:100%}.mtrl-button__progress{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__progress.mtrl-progress{width:20px;height:20px;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button__progress .mtrl-progress__canvas{color:currentColor}.mtrl-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-button--xs{height:32px;padding:0 12px;gap:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 16px)}.mtrl-button--xs .mtrl-button__icon,.mtrl-button--xs .mtrl-button__progress,.mtrl-button--xs .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--xs.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--xs.mtrl-button--outlined{border-width:1px}.mtrl-button--s{height:40px;padding:0 16px;gap:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 20px)}.mtrl-button--s .mtrl-button__icon,.mtrl-button--s .mtrl-button__progress,.mtrl-button--s .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--s.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--s.mtrl-button--outlined{border-width:1px}.mtrl-button--m{height:56px;padding:0 24px;gap:8px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;border-radius:var(--mtrl-button-shape, 28px)}.mtrl-button--m .mtrl-button__icon,.mtrl-button--m .mtrl-button__progress,.mtrl-button--m .mtrl-button__progress.mtrl-progress{width:24px;height:24px}.mtrl-button--m.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--m.mtrl-button--outlined{border-width:1px}.mtrl-button--l{height:96px;padding:0 48px;gap:12px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 48px)}.mtrl-button--l .mtrl-button__icon,.mtrl-button--l .mtrl-button__progress,.mtrl-button--l .mtrl-button__progress.mtrl-progress{width:32px;height:32px}.mtrl-button--l.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--l.mtrl-button--outlined{border-width:2px}.mtrl-button--xl{height:136px;padding:0 64px;gap:16px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 68px)}.mtrl-button--xl .mtrl-button__icon,.mtrl-button--xl .mtrl-button__progress,.mtrl-button--xl .mtrl-button__progress.mtrl-progress{width:40px;height:40px}.mtrl-button--xl.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--xl.mtrl-button--outlined{border-width:3px}.mtrl-button--s.mtrl-button--icon{padding-left:12px}.mtrl-button--s.mtrl-button--icon:has(.mtrl-button__icon--end){padding-left:16px;padding-right:12px}.mtrl-button--xs::after,.mtrl-button--s::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}.mtrl-button:active,.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px));box-shadow:none}.mtrl-button--xs:active,.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--s:active,.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--m:active,.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--l:active,.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--xl:active,.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--filled{color:var(--mtrl-sys-color-on-primary)}.mtrl-button--elevated{color:var(--mtrl-sys-color-primary)}.mtrl-button--tonal{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-button--outlined{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--text{color:var(--mtrl-button-text-color, var(--mtrl-sys-color-primary))}.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary)}.mtrl-button--filled:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--filled:active,.mtrl-button--filled.mtrl-button--active,.mtrl-button--filled:disabled{box-shadow:none}.mtrl-button--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-button--elevated:active,.mtrl-button--elevated.mtrl-button--active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:disabled{box-shadow:none}.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary-container)}.mtrl-button--tonal:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--tonal:active,.mtrl-button--tonal.mtrl-button--active,.mtrl-button--tonal:disabled{box-shadow:none}.mtrl-button--outlined{border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent)}.mtrl-button--text{padding:0 12px}.mtrl-button--text.mtrl-button--icon{padding:0 16px 0 12px}.mtrl-button--text.mtrl-button--icon:has(.mtrl-button__icon--end){padding:0 12px 0 16px}.mtrl-button--text.mtrl-button--m{padding:0 24px}.mtrl-button--text.mtrl-button--l{padding:0 48px}.mtrl-button--text.mtrl-button--xl{padding:0 64px}.mtrl-button--text:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--filled,.mtrl-button--toggle.mtrl-button--filled:hover,.mtrl-button--toggle.mtrl-button--filled:active,.mtrl-button--toggle.mtrl-button--filled.mtrl-button--active,.mtrl-button--toggle.mtrl-button--tonal,.mtrl-button--toggle.mtrl-button--tonal:hover,.mtrl-button--toggle.mtrl-button--tonal:active,.mtrl-button--toggle.mtrl-button--tonal.mtrl-button--active{box-shadow:none}.mtrl-button--toggle.mtrl-button--filled{background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--elevated{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{border-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle:disabled,.mtrl-button--toggle.mtrl-button--selected:disabled{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent);box-shadow:none}.mtrl-button--toggle.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--circular{flex:none !important;border-radius:50%;padding:8px;min-width:unset;width:40px !important;height:40px}.mtrl-button--circular:active,.mtrl-button--circular.mtrl-button--active{border-radius:50%}.mtrl-button--circular:active.mtrl-button--square,.mtrl-button--circular.mtrl-button--active.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px) !important}.mtrl-button--circular.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-button--circular.mtrl-button--xs{width:32px;height:32px;padding:0}.mtrl-button--circular.mtrl-button--s{width:40px;height:40px;padding:0}.mtrl-button--circular.mtrl-button--m{width:56px;height:56px;padding:0}.mtrl-button--circular.mtrl-button--l{width:96px;height:96px;padding:0}.mtrl-button--circular.mtrl-button--xl{width:136px;height:136px;padding:0}.mtrl-button--circular .mtrl-button__text{display:none}.mtrl-button--circular.mtrl-button--progress{padding:0 !important}.mtrl-button[disabled].mtrl-button--progress .mtrl-button__progress{opacity:.7}}

package/dist/styles/button.d.ts

@@ -0,0 +1 @@
+export {};