react-material-design 0.0.0-stage → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Coletta Alexandre
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# React Material Design
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://badge.fury.io/js/react-material-design.svg)](https://badge.fury.io/js/react-material-design)
+
+React Material Design is a React component library built on the principles of Google's Material Design 3 Expressive design language. It provides a comprehensive set of UI components that are both visually appealing and highly functional, enabling developers to create consistent and accessible user interfaces with ease.
+
+## Documentation
+
+Documentation is under construction.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));exports.__toESM=s;

package/dist/components/Button/context.cjs

@@ -0,0 +1 @@
+let e=require("react/compiler-runtime"),t=require("react"),n=require("react/jsx-runtime");var r=(0,t.createContext)(null),i=()=>(0,t.useContext)(r);function a(t){let i=(0,e.c)(7),a;i[0]!==t.color||i[1]!==t.shape||i[2]!==t.width?(a={color:t.color,shape:t.shape,width:t.width,getColor(e){if(typeof t.color==`string`)return t.color;switch(e){case`default`:return t.color?.default;case`icon`:return t.color?.icon}},getShape(e){if(typeof t.shape==`string`)return t.shape;switch(e){case`default`:return t.shape?.default;case`icon`:return t.shape?.icon}},getWidth(e){if(typeof t.width==`string`)return t.width;switch(e){case`default`:return t.width?.default;case`icon`:return t.width?.icon}}},i[0]=t.color,i[1]=t.shape,i[2]=t.width,i[3]=a):a=i[3];let o=a,s;return i[4]!==o||i[5]!==t.children?(s=(0,n.jsx)(r,{value:o,children:t.children}),i[4]=o,i[5]=t.children,i[6]=s):s=i[6],s}exports.ButtonContext=r,exports.default=a,exports.useButtonContext=i;

package/dist/components/Button/context.d.ts

@@ -0,0 +1,29 @@
+import { ButtonColor, ButtonWidth } from './default';
+import { IconButtonColor, IconButtonWidth } from './icon';
+import { CommonButtonColor, CommonButtonShape, CommonButtonWidth } from './types';
+import { PropsWithChildren } from 'react';
+export interface ButtonProviderColors {
+    default?: ButtonColor;
+    icon?: IconButtonColor;
+}
+export interface ButtonProviderShapes {
+    default?: CommonButtonShape;
+    icon?: CommonButtonShape;
+}
+export interface ButtonProviderWidths {
+    default?: ButtonWidth;
+    icon?: IconButtonWidth;
+}
+export interface ButtonProviderProps {
+    color?: ButtonProviderColors | CommonButtonColor;
+    shape?: ButtonProviderShapes | CommonButtonShape;
+    width?: ButtonProviderWidths | CommonButtonWidth;
+}
+export interface ButtonContext extends ButtonProviderProps {
+    getColor(type: keyof ButtonProviderColors): ButtonColor | IconButtonColor | undefined;
+    getShape(type: keyof ButtonProviderShapes): CommonButtonShape | undefined;
+    getWidth(type: keyof ButtonProviderWidths): ButtonWidth | IconButtonWidth | undefined;
+}
+export declare const ButtonContext: import('react').Context<ButtonContext | null>;
+export declare const useButtonContext: () => ButtonContext | null;
+export default function ButtonProvider(props: PropsWithChildren<ButtonProviderProps>): import('react').JSX.Element;

package/dist/components/Button/context.js

@@ -0,0 +1,41 @@
+import { c as e } from "react/compiler-runtime";
+import { createContext as t, useContext as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/components/Button/context.tsx
+var i = t(null), a = () => n(i);
+function o(t) {
+	let n = e(7), a;
+	n[0] !== t.color || n[1] !== t.shape || n[2] !== t.width ? (a = {
+		color: t.color,
+		shape: t.shape,
+		width: t.width,
+		getColor(e) {
+			if (typeof t.color == "string") return t.color;
+			switch (e) {
+				case "default": return t.color?.default;
+				case "icon": return t.color?.icon;
+			}
+		},
+		getShape(e) {
+			if (typeof t.shape == "string") return t.shape;
+			switch (e) {
+				case "default": return t.shape?.default;
+				case "icon": return t.shape?.icon;
+			}
+		},
+		getWidth(e) {
+			if (typeof t.width == "string") return t.width;
+			switch (e) {
+				case "default": return t.width?.default;
+				case "icon": return t.width?.icon;
+			}
+		}
+	}, n[0] = t.color, n[1] = t.shape, n[2] = t.width, n[3] = a) : a = n[3];
+	let o = a, s;
+	return n[4] !== o || n[5] !== t.children ? (s = /* @__PURE__ */ r(i, {
+		value: o,
+		children: t.children
+	}), n[4] = o, n[5] = t.children, n[6] = s) : s = n[6], s;
+}
+//#endregion
+export { i as ButtonContext, o as default, a as useButtonContext };

package/dist/components/Button/default/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require("../../Icon/Icon.cjs");require('./style.css');const e=require("../../misc/OrderedCollection/index.cjs");require("../../misc/Polymorphic.cjs");const t=require("./render.cjs");;/* empty css             */let n=require("react/compiler-runtime"),r=require("react/jsx-runtime");function i(i){let a=(0,n.c)(4);if(e.useOrderedCollection()){let t;return a[0]===i?t=a[1]:(t=(0,r.jsx)(e.OrderedCollectionChild,{name:`Button`,content:i}),a[0]=i,a[1]=t),t}let o;return a[2]===i?o=a[3]:(o=(0,r.jsx)(t.default,{...i}),a[2]=i,a[3]=o),o}exports.default=i;

package/dist/components/Button/default/index.d.ts

@@ -0,0 +1,26 @@
+import { CommonButtonColor, CommonButtonProps, CommonButtonWidth, CommonSelectableButtonProps } from '../types';
+import { IconDefinition } from '../../Icon/Icon';
+import { PolymorphicComponent } from '../../misc/Polymorphic';
+import { TooltipProps } from '../../Tooltip';
+import { ElementType, ReactElement, Ref } from 'react';
+export type ButtonColor = "elevated" | CommonButtonColor | "text";
+export type ButtonWidth = CommonButtonWidth | "stretch";
+export interface DefaultButtonProps extends Omit<CommonButtonProps, "color"> {
+    color?: ButtonColor;
+    label: string | (() => string);
+    icon?: IconDefinition | (() => IconDefinition);
+    width?: ButtonWidth;
+    title?: string | ReactElement<TooltipProps>;
+    menuRef?: Ref<HTMLDivElement>;
+    menuOpenBehavior?: "manual" | "hover" | "click";
+    menuOpen?: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+}
+export interface SelectableButtonProps extends Omit<DefaultButtonProps, "color" | "selectable" | "label" | "icon">, CommonSelectableButtonProps {
+    color?: Exclude<DefaultButtonProps["color"], "text">;
+    label: string | ((selected: boolean) => string);
+    icon?: IconDefinition | ((selected: boolean) => IconDefinition);
+}
+export type ButtonProps<As extends ElementType = "button"> = PolymorphicComponent<"Button", As, "button", DefaultButtonProps | SelectableButtonProps>;
+export default function Button<As extends ElementType = "button">(props: ButtonProps<As>): import('react').JSX.Element;

package/dist/components/Button/default/index.js

@@ -0,0 +1,22 @@
+import "../../Icon/Icon.js";
+import { OrderedCollectionChild as e, useOrderedCollection as t } from "../../misc/OrderedCollection/index.js";
+import "../../misc/Polymorphic.js";
+import n from "./render.js";
+import './style.css';/* empty css           */
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+//#region lib/components/Button/default/index.tsx
+function a(a) {
+	let o = r(4);
+	if (t()) {
+		let t;
+		return o[0] === a ? t = o[1] : (t = /* @__PURE__ */ i(e, {
+			name: "Button",
+			content: a
+		}), o[0] = a, o[1] = t), t;
+	}
+	let s;
+	return o[2] === a ? s = o[3] : (s = /* @__PURE__ */ i(n, { ...a }), o[2] = a, o[3] = s), s;
+}
+//#endregion
+export { a as default };

package/dist/components/Button/default/render.cjs

@@ -0,0 +1 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../Theme/Theme.cjs"),ee=require("../context.cjs"),te=require("../../Icon/Icon.cjs"),ne=require("../../misc/Polymorphic.cjs"),re=require("../../misc/StateLayer/index.cjs"),n=require("../../misc/Transitionable/index.cjs"),ie=require("../../Menu/Menu.cjs");require("../../Menu/index.cjs");const ae=require("../../misc/FloatingElement/index.cjs"),oe=require("../../Tooltip/Tooltip.cjs");require("../../Tooltip/index.cjs");const se=require("../../types.cjs"),ce=require("../group/render.cjs"),le=require("../index.cjs");let ue=require("react/compiler-runtime"),r=require("classnames");r=e.__toESM(r,1);let de=require("react"),i=require("react/jsx-runtime"),a=require("react-dom-event-hooks");var o=[`color`,`size`,`shape`,`disabled`,`emphasized`,`selectable`,`selected`,`onSelected`],fe=[...o,`label`,`icon`,`menuRef`,`menuOpenBehavior`,`menuOpen`,`onMenuOpen`,`onMenuClose`,`tooltip`,`width`];function s(e){let o=(0,ue.c)(136),{label:s,icon:c,menuOpenBehavior:pe,menuRef:me,menuOpen:l,onMenuOpen:he,onMenuClose:ge}=e,u=pe===void 0?`hover`:pe,{popoversContainer:_e}=t.useTheme(`IconButton`),d;o[0]===Symbol.for(`react.memo_cache_sentinel`)?(d={allowedPlacements:[`top-start`,`top-end`,`bottom-start`,`bottom-end`]},o[0]=d):d=o[0];let ve=d,ye=(0,de.useId)(),f=e.id??ye,p=ee.useButtonContext(),m=ce.useButtonGroupContext(),h;o[1]!==p||o[2]!==e.color?(h=e.color??p?.getColor(`default`)??`filled`,o[1]=p,o[2]=e.color,o[3]=h):h=o[3];let be=h,g;o[4]!==p||o[5]!==e.shape?(g=p?.getShape(`default`)??e.shape??`round`,o[4]=p,o[5]=e.shape,o[6]=g):g=o[6];let xe=g,_;o[7]!==p||o[8]!==e.width?(_=p?.getWidth(`default`)??e.width??`default`,o[7]=p,o[8]=e.width,o[9]=_):_=o[9];let Se=`width-${_}`,Ce=m?m.size:e.size,v;o[10]===Ce?v=o[11]:(v=se.getComponentSizeName(Ce),o[10]=Ce,o[11]=v);let y=v,[we,Te]=(0,de.useState)(l??!1),b=l??we,x;o[12]!==l||o[13]!==ge||o[14]!==he?(x=e=>{l===void 0&&Te(e),e?he?.():ge?.()},o[12]=l,o[13]=ge,o[14]=he,o[15]=x):x=o[15];let S=x,C;o[16]!==b||o[17]!==u||o[18]!==e.children||o[19]!==S?(C=t=>{e.children&&u!==`manual`&&(u===`click`?(t.stopPropagation(),S(!b)):S(!0))},o[16]=b,o[17]=u,o[18]=e.children,o[19]=S,o[20]=C):C=o[20];let Ee=(0,a.useElementEventListener)(u===`click`?`click`:`pointerenter`,C),w;o[21]!==u||o[22]!==e.children||o[23]!==S?(w=()=>u===`hover`&&e.children?S(!1):null,o[21]=u,o[22]=e.children,o[23]=S,o[24]=w):w=o[24];let De=(0,a.useElementEventListener)(`pointerleave`,w),T;o[25]!==u||o[26]!==e.children||o[27]!==S?(T=()=>{e.children&&u!==`manual`&&S(!0)},o[25]=u,o[26]=e.children,o[27]=S,o[28]=T):T=o[28];let Oe=(0,a.useElementEventListener)(`pointerenter`,T),E;o[29]!==u||o[30]!==e.children||o[31]!==S?(E=()=>u===`hover`&&e.children?S(!1):null,o[29]=u,o[30]=e.children,o[31]=S,o[32]=E):E=o[32];let ke=(0,a.useElementEventListener)(`pointerleave`,E),{saveRef:Ae,ref:D}=(0,a.useConcatElementRef)(Ee,De),{saveRef:je,ref:Me}=(0,a.useConcatElementRef)(me,Oe,ke),O;o[33]!==m||o[34]!==f||o[35]!==D?(O=e=>{D.current&&m?.onPressed(f,D.current,e)},o[33]=m,o[34]=f,o[35]=D,o[36]=O):O=o[36];let[Ne,k]=le.useCommonButtonProps(f,e,O),A;if(o[37]!==be||o[38]!==m||o[39]!==f||o[40]!==e.disabled||o[41]!==e.emphasized||o[42]!==e.selectable||o[43]!==e.selected||o[44]!==k||o[45]!==xe||o[46]!==y||o[47]!==Se){if(A={},A.Button=!0,A.CommonButton=!0,A[be]=!0,A[xe]=!0,A[y]=!0,A[Se]=!0,A.disabled=e.disabled,A.emphasized=e.emphasized,A.selectable=m?.selectable??e.selectable,m?.selectable){let e;o[49]!==m.selected||o[50]!==f||o[51]!==k?(e=m.selected.get(f)??k,o[49]=m.selected,o[50]=f,o[51]=k,o[52]=e):e=o[52],A.selected=e}else!m&&e.selectable&&(A.selected=e.selected??k);o[37]=be,o[38]=m,o[39]=f,o[40]=e.disabled,o[41]=e.emphasized,o[42]=e.selectable,o[43]=e.selected,o[44]=k,o[45]=xe,o[46]=y,o[47]=Se,o[48]=A}else A=o[48];let j=A,M;o[53]!==m?.selectable||o[54]!==m?.selected||o[55]!==c||o[56]!==f||o[57]!==e.selectable||o[58]!==e.selected||o[59]!==k?(M=()=>{let t;return t=e.selectable?typeof c==`function`?c?.((m?.selectable?m?.selected.get(f):e.selected)??k):c:typeof c==`function`?c():c,t},o[53]=m?.selectable,o[54]=m?.selected,o[55]=c,o[56]=f,o[57]=e.selectable,o[58]=e.selected,o[59]=k,o[60]=M):M=o[60],m?.selectable,m?.selected;let N;o[61]===M?N=o[62]:(N=M(),o[61]=M,o[62]=N);let Pe=N,P;o[63]===Pe?P=o[64]:(P=te.convertIconDefinition(Pe),o[63]=Pe,o[64]=P);let F=P,I;o[65]!==m?.selectable||o[66]!==m?.selected||o[67]!==f||o[68]!==s||o[69]!==e.selectable||o[70]!==e.selected||o[71]!==k?(I=()=>{let t;return t=e.selectable?typeof s==`function`?s?.((m?.selectable?m?.selected.get(f):e.selected)??k):s:typeof s==`function`?s():s,t},o[65]=m?.selectable,o[66]=m?.selected,o[67]=f,o[68]=s,o[69]=e.selectable,o[70]=e.selected,o[71]=k,o[72]=I):I=o[72],m?.selectable,m?.selected;let L;o[73]===I?L=o[74]:(L=I(),o[73]=I,o[74]=L);let R=L,z;if(o[75]!==j||o[76]!==F||o[77]!==R||o[78]!==Ne||o[79]!==e){z={...e,...Ne};let t;o[81]!==j||o[82]!==F||o[83]!==R||o[84]!==e.className?(t=(0,r.default)(j,{icon:F,label:R},e.className),o[81]=j,o[82]=F,o[83]=R,o[84]=e.className,o[85]=t):t=o[85],z.className=t,z[`aria-label`]=R,z.role=`button`,delete z.title,o[75]=j,o[76]=F,o[77]=R,o[78]=Ne,o[79]=e,o[80]=z}else z=o[80];let Fe=z,B;o[86]===D?B=o[87]:(B=e=>e.forEach(e=>D.current?.style.setProperty(`--md-comp-button-container-width`,`${e.contentRect.width}px`)),o[86]=D,o[87]=B);let{saveRef:Ie}=(0,a.useResizeObserver)(B),V;o[88]!==b||o[89]!==Me||o[90]!==D||o[91]!==S?(V=e=>{e.target instanceof Node&&b&&(!e.target.parentElement?.parentElement?.classList.contains(`selectable`)||!D.current?.contains(e.target)&&!Me.current?.contains(e.target))&&S(!1)},o[88]=b,o[89]=Me,o[90]=D,o[91]=S,o[92]=V):V=o[92],(0,a.useWindowEventListener)(`click`,V);let H;o[93]===y?H=o[94]:(H=(0,r.default)(`ButtonContainer`,y),o[93]=y,o[94]=H);let U;o[95]===e.disabled?U=o[96]:(U=(0,i.jsx)(re.default,{disabled:e.disabled}),o[95]=e.disabled,o[96]=U);let W;o[97]===e.title?W=o[98]:(W=typeof e.title==`string`?(0,i.jsx)(oe.default,{variant:`plain`,text:e.title}):e.title,o[97]=e.title,o[98]=W);let Le=!e.selectable||j.selected,G;o[99]===F?G=o[100]:(G=(0,i.jsx)(n.default,{value:F,className:`icon`}),o[99]=F,o[100]=G);let K;o[101]===R?K=o[102]:(K=(0,i.jsx)(n.default,{value:R,className:`label`}),o[101]=R,o[102]=K);let q;o[103]!==G||o[104]!==K?(q=(0,i.jsxs)(`div`,{className:`container`,children:[G,K]}),o[103]=G,o[104]=K,o[105]=q):q=o[105];let J;o[106]===F?J=o[107]:(J=(0,i.jsx)(n.default,{static:!0,value:F,className:`icon`}),o[106]=F,o[107]=J);let Y;o[108]===R?Y=o[109]:(Y=(0,i.jsx)(n.default,{static:!0,value:R,className:`label`}),o[108]=R,o[109]=Y);let X;o[110]!==Ie||o[111]!==J||o[112]!==Y?(X=(0,i.jsxs)(`div`,{ref:Ie,className:`container size-ref`,children:[J,Y]}),o[110]=Ie,o[111]=J,o[112]=Y,o[113]=X):X=o[113];let Z;o[114]!==Le||o[115]!==q||o[116]!==X?(Z=(0,i.jsxs)(te.IconProvider,{fill:Le,children:[q,X]}),o[114]=Le,o[115]=q,o[116]=X,o[117]=Z):Z=o[117];let Q;o[118]!==e.as||o[119]!==e.disabled||o[120]!==Fe||o[121]!==U||o[122]!==W||o[123]!==Z?(Q=(0,i.jsxs)(ne.default,{name:`Button`,as:e.as,base:`button`,props:Fe,excludePropsName:fe,disabled:e.disabled,children:[U,W,Z]}),o[118]=e.as,o[119]=e.disabled,o[120]=Fe,o[121]=U,o[122]=W,o[123]=Z,o[124]=Q):Q=o[124];let $;o[125]!==b||o[126]!==_e||o[127]!==e.children||o[128]!==e.density||o[129]!==je?($=e.children&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`menu-hover`}),(0,i.jsx)(ae.default,{root:_e,flip:ve,autoUpdate:!0,placement:`bottom-start`,open:b,children:(0,i.jsx)(ie.default,{ref:je,density:e.density,className:(0,r.default)(`sub-component`,{visible:b}),children:e.children})})]}),o[125]=b,o[126]=_e,o[127]=e.children,o[128]=e.density,o[129]=je,o[130]=$):$=o[130];let Re;return o[131]!==Ae||o[132]!==H||o[133]!==Q||o[134]!==$?(Re=(0,i.jsxs)(`div`,{ref:Ae,className:H,children:[Q,$]}),o[131]=Ae,o[132]=H,o[133]=Q,o[134]=$,o[135]=Re):Re=o[135],Re}exports.CommonButtonNativeProps=o,exports.default=s;

package/dist/components/Button/default/render.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+export declare const CommonButtonNativeProps: string[];
+export default function ButtonRender<As extends React.ElementType = "button">(props: ButtonProps<As>): import('react').JSX.Element;

package/dist/components/Button/default/render.js

@@ -0,0 +1,203 @@
+import { useTheme as e } from "../../Theme/Theme.js";
+import { useButtonContext as ee } from "../context.js";
+import { IconProvider as te, convertIconDefinition as ne } from "../../Icon/Icon.js";
+import re from "../../misc/Polymorphic.js";
+import ie from "../../misc/StateLayer/index.js";
+import t from "../../misc/Transitionable/index.js";
+import ae from "../../Menu/Menu.js";
+import "../../Menu/index.js";
+import oe from "../../misc/FloatingElement/index.js";
+import se from "../../Tooltip/Tooltip.js";
+import "../../Tooltip/index.js";
+import { getComponentSizeName as ce } from "../../types.js";
+import { useButtonGroupContext as le } from "../group/render.js";
+import { useCommonButtonProps as ue } from "../index.js";
+import { c as de } from "react/compiler-runtime";
+import fe from "classnames";
+import { useId as pe, useState as me } from "react";
+import { Fragment as he, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useConcatElementRef as ge, useElementEventListener as i, useResizeObserver as _e, useWindowEventListener as ve } from "react-dom-event-hooks";
+//#region lib/components/Button/default/render.tsx
+var a = [
+	"color",
+	"size",
+	"shape",
+	"disabled",
+	"emphasized",
+	"selectable",
+	"selected",
+	"onSelected"
+], ye = [
+	...a,
+	"label",
+	"icon",
+	"menuRef",
+	"menuOpenBehavior",
+	"menuOpen",
+	"onMenuOpen",
+	"onMenuClose",
+	"tooltip",
+	"width"
+];
+function o(a) {
+	let o = de(136), { label: s, icon: c, menuOpenBehavior: be, menuRef: xe, menuOpen: l, onMenuOpen: Se, onMenuClose: Ce } = a, u = be === void 0 ? "hover" : be, { popoversContainer: we } = e("IconButton"), d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (d = { allowedPlacements: [
+		"top-start",
+		"top-end",
+		"bottom-start",
+		"bottom-end"
+	] }, o[0] = d) : d = o[0];
+	let Te = d, Ee = pe(), f = a.id ?? Ee, p = ee(), m = le(), h;
+	o[1] !== p || o[2] !== a.color ? (h = a.color ?? p?.getColor("default") ?? "filled", o[1] = p, o[2] = a.color, o[3] = h) : h = o[3];
+	let De = h, Oe;
+	o[4] !== p || o[5] !== a.shape ? (Oe = p?.getShape("default") ?? a.shape ?? "round", o[4] = p, o[5] = a.shape, o[6] = Oe) : Oe = o[6];
+	let ke = Oe, g;
+	o[7] !== p || o[8] !== a.width ? (g = p?.getWidth("default") ?? a.width ?? "default", o[7] = p, o[8] = a.width, o[9] = g) : g = o[9];
+	let Ae = `width-${g}`, je = m ? m.size : a.size, _;
+	o[10] === je ? _ = o[11] : (_ = ce(je), o[10] = je, o[11] = _);
+	let v = _, [Me, Ne] = me(l ?? !1), y = l ?? Me, b;
+	o[12] !== l || o[13] !== Ce || o[14] !== Se ? (b = (e) => {
+		l === void 0 && Ne(e), e ? Se?.() : Ce?.();
+	}, o[12] = l, o[13] = Ce, o[14] = Se, o[15] = b) : b = o[15];
+	let x = b, S;
+	o[16] !== y || o[17] !== u || o[18] !== a.children || o[19] !== x ? (S = (e) => {
+		a.children && u !== "manual" && (u === "click" ? (e.stopPropagation(), x(!y)) : x(!0));
+	}, o[16] = y, o[17] = u, o[18] = a.children, o[19] = x, o[20] = S) : S = o[20];
+	let Pe = i(u === "click" ? "click" : "pointerenter", S), C;
+	o[21] !== u || o[22] !== a.children || o[23] !== x ? (C = () => u === "hover" && a.children ? x(!1) : null, o[21] = u, o[22] = a.children, o[23] = x, o[24] = C) : C = o[24];
+	let Fe = i("pointerleave", C), w;
+	o[25] !== u || o[26] !== a.children || o[27] !== x ? (w = () => {
+		a.children && u !== "manual" && x(!0);
+	}, o[25] = u, o[26] = a.children, o[27] = x, o[28] = w) : w = o[28];
+	let Ie = i("pointerenter", w), T;
+	o[29] !== u || o[30] !== a.children || o[31] !== x ? (T = () => u === "hover" && a.children ? x(!1) : null, o[29] = u, o[30] = a.children, o[31] = x, o[32] = T) : T = o[32];
+	let Le = i("pointerleave", T), { saveRef: Re, ref: E } = ge(Pe, Fe), { saveRef: ze, ref: Be } = ge(xe, Ie, Le), D;
+	o[33] !== m || o[34] !== f || o[35] !== E ? (D = (e) => {
+		E.current && m?.onPressed(f, E.current, e);
+	}, o[33] = m, o[34] = f, o[35] = E, o[36] = D) : D = o[36];
+	let [Ve, O] = ue(f, a, D), k;
+	if (o[37] !== De || o[38] !== m || o[39] !== f || o[40] !== a.disabled || o[41] !== a.emphasized || o[42] !== a.selectable || o[43] !== a.selected || o[44] !== O || o[45] !== ke || o[46] !== v || o[47] !== Ae) {
+		if (k = {}, k.Button = !0, k.CommonButton = !0, k[De] = !0, k[ke] = !0, k[v] = !0, k[Ae] = !0, k.disabled = a.disabled, k.emphasized = a.emphasized, k.selectable = m?.selectable ?? a.selectable, m?.selectable) {
+			let e;
+			o[49] !== m.selected || o[50] !== f || o[51] !== O ? (e = m.selected.get(f) ?? O, o[49] = m.selected, o[50] = f, o[51] = O, o[52] = e) : e = o[52], k.selected = e;
+		} else !m && a.selectable && (k.selected = a.selected ?? O);
+		o[37] = De, o[38] = m, o[39] = f, o[40] = a.disabled, o[41] = a.emphasized, o[42] = a.selectable, o[43] = a.selected, o[44] = O, o[45] = ke, o[46] = v, o[47] = Ae, o[48] = k;
+	} else k = o[48];
+	let A = k, j;
+	o[53] !== m?.selectable || o[54] !== m?.selected || o[55] !== c || o[56] !== f || o[57] !== a.selectable || o[58] !== a.selected || o[59] !== O ? (j = () => {
+		let e;
+		return e = a.selectable ? typeof c == "function" ? c?.((m?.selectable ? m?.selected.get(f) : a.selected) ?? O) : c : typeof c == "function" ? c() : c, e;
+	}, o[53] = m?.selectable, o[54] = m?.selected, o[55] = c, o[56] = f, o[57] = a.selectable, o[58] = a.selected, o[59] = O, o[60] = j) : j = o[60], m?.selectable, m?.selected;
+	let M;
+	o[61] === j ? M = o[62] : (M = j(), o[61] = j, o[62] = M);
+	let He = M, N;
+	o[63] === He ? N = o[64] : (N = ne(He), o[63] = He, o[64] = N);
+	let P = N, F;
+	o[65] !== m?.selectable || o[66] !== m?.selected || o[67] !== f || o[68] !== s || o[69] !== a.selectable || o[70] !== a.selected || o[71] !== O ? (F = () => {
+		let e;
+		return e = a.selectable ? typeof s == "function" ? s?.((m?.selectable ? m?.selected.get(f) : a.selected) ?? O) : s : typeof s == "function" ? s() : s, e;
+	}, o[65] = m?.selectable, o[66] = m?.selected, o[67] = f, o[68] = s, o[69] = a.selectable, o[70] = a.selected, o[71] = O, o[72] = F) : F = o[72], m?.selectable, m?.selected;
+	let I;
+	o[73] === F ? I = o[74] : (I = F(), o[73] = F, o[74] = I);
+	let L = I, R;
+	if (o[75] !== A || o[76] !== P || o[77] !== L || o[78] !== Ve || o[79] !== a) {
+		R = {
+			...a,
+			...Ve
+		};
+		let e;
+		o[81] !== A || o[82] !== P || o[83] !== L || o[84] !== a.className ? (e = fe(A, {
+			icon: P,
+			label: L
+		}, a.className), o[81] = A, o[82] = P, o[83] = L, o[84] = a.className, o[85] = e) : e = o[85], R.className = e, R["aria-label"] = L, R.role = "button", delete R.title, o[75] = A, o[76] = P, o[77] = L, o[78] = Ve, o[79] = a, o[80] = R;
+	} else R = o[80];
+	let Ue = R, z;
+	o[86] === E ? z = o[87] : (z = (e) => e.forEach((e) => E.current?.style.setProperty("--md-comp-button-container-width", `${e.contentRect.width}px`)), o[86] = E, o[87] = z);
+	let { saveRef: We } = _e(z), B;
+	o[88] !== y || o[89] !== Be || o[90] !== E || o[91] !== x ? (B = (e) => {
+		e.target instanceof Node && y && (!e.target.parentElement?.parentElement?.classList.contains("selectable") || !E.current?.contains(e.target) && !Be.current?.contains(e.target)) && x(!1);
+	}, o[88] = y, o[89] = Be, o[90] = E, o[91] = x, o[92] = B) : B = o[92], ve("click", B);
+	let V;
+	o[93] === v ? V = o[94] : (V = fe("ButtonContainer", v), o[93] = v, o[94] = V);
+	let H;
+	o[95] === a.disabled ? H = o[96] : (H = /* @__PURE__ */ n(ie, { disabled: a.disabled }), o[95] = a.disabled, o[96] = H);
+	let U;
+	o[97] === a.title ? U = o[98] : (U = typeof a.title == "string" ? /* @__PURE__ */ n(se, {
+		variant: "plain",
+		text: a.title
+	}) : a.title, o[97] = a.title, o[98] = U);
+	let Ge = !a.selectable || A.selected, W;
+	o[99] === P ? W = o[100] : (W = /* @__PURE__ */ n(t, {
+		value: P,
+		className: "icon"
+	}), o[99] = P, o[100] = W);
+	let G;
+	o[101] === L ? G = o[102] : (G = /* @__PURE__ */ n(t, {
+		value: L,
+		className: "label"
+	}), o[101] = L, o[102] = G);
+	let K;
+	o[103] !== W || o[104] !== G ? (K = /* @__PURE__ */ r("div", {
+		className: "container",
+		children: [W, G]
+	}), o[103] = W, o[104] = G, o[105] = K) : K = o[105];
+	let q;
+	o[106] === P ? q = o[107] : (q = /* @__PURE__ */ n(t, {
+		static: !0,
+		value: P,
+		className: "icon"
+	}), o[106] = P, o[107] = q);
+	let J;
+	o[108] === L ? J = o[109] : (J = /* @__PURE__ */ n(t, {
+		static: !0,
+		value: L,
+		className: "label"
+	}), o[108] = L, o[109] = J);
+	let Y;
+	o[110] !== We || o[111] !== q || o[112] !== J ? (Y = /* @__PURE__ */ r("div", {
+		ref: We,
+		className: "container size-ref",
+		children: [q, J]
+	}), o[110] = We, o[111] = q, o[112] = J, o[113] = Y) : Y = o[113];
+	let X;
+	o[114] !== Ge || o[115] !== K || o[116] !== Y ? (X = /* @__PURE__ */ r(te, {
+		fill: Ge,
+		children: [K, Y]
+	}), o[114] = Ge, o[115] = K, o[116] = Y, o[117] = X) : X = o[117];
+	let Z;
+	o[118] !== a.as || o[119] !== a.disabled || o[120] !== Ue || o[121] !== H || o[122] !== U || o[123] !== X ? (Z = /* @__PURE__ */ r(re, {
+		name: "Button",
+		as: a.as,
+		base: "button",
+		props: Ue,
+		excludePropsName: ye,
+		disabled: a.disabled,
+		children: [
+			H,
+			U,
+			X
+		]
+	}), o[118] = a.as, o[119] = a.disabled, o[120] = Ue, o[121] = H, o[122] = U, o[123] = X, o[124] = Z) : Z = o[124];
+	let Q;
+	o[125] !== y || o[126] !== we || o[127] !== a.children || o[128] !== a.density || o[129] !== ze ? (Q = a.children && /* @__PURE__ */ r(he, { children: [/* @__PURE__ */ n("div", { className: "menu-hover" }), /* @__PURE__ */ n(oe, {
+		root: we,
+		flip: Te,
+		autoUpdate: !0,
+		placement: "bottom-start",
+		open: y,
+		children: /* @__PURE__ */ n(ae, {
+			ref: ze,
+			density: a.density,
+			className: fe("sub-component", { visible: y }),
+			children: a.children
+		})
+	})] }), o[125] = y, o[126] = we, o[127] = a.children, o[128] = a.density, o[129] = ze, o[130] = Q) : Q = o[130];
+	let $;
+	return o[131] !== Re || o[132] !== V || o[133] !== Z || o[134] !== Q ? ($ = /* @__PURE__ */ r("div", {
+		ref: Re,
+		className: V,
+		children: [Z, Q]
+	}), o[131] = Re, o[132] = V, o[133] = Z, o[134] = Q, o[135] = $) : $ = o[135], $;
+}
+//#endregion
+export { a as CommonButtonNativeProps, o as default };

package/dist/components/Button/default/style.css

@@ -0,0 +1 @@
+.ButtonContainer{vertical-align:middle;box-sizing:border-box;border:none;justify-content:center;align-items:center;min-width:48px;min-height:48px;padding:0;text-decoration:none;display:inline-flex;position:relative}.ButtonContainer>.menu-hover{width:100%;top:calc(var(--md-comp-button-container-height) + max(0px, (48px - var(--md-comp-button-container-height)) / 2));height:4px;position:absolute}.ButtonContainer>.menu-hover:has(+.Menu.visible){height:4px}.ButtonContainer>.Menu{z-index:1000;top:calc(var(--md-comp-button-container-height) + max(0px, (48px - var(--md-comp-button-container-height)) / 2) + 4px);position:absolute}.ButtonContainer>.Menu>.MenuGroup{width:auto}.CommonButton{border-radius:inherit;vertical-align:middle;box-sizing:border-box;transition:width var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), min-width var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), height var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), min-height var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), font var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), margin var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), padding var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), gap var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), border-radius var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), background-color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), box-shadow var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), outline var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), opacity var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);border:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex;position:relative}.CommonButton>.container{justify-content:center;align-items:center;gap:inherit;transition:inherit;display:inline-flex}.CommonButton>.container.size-ref{gap:var(--md-comp-button-gap-space);visibility:hidden;transition:unset;position:absolute}.CommonButton.disabled{cursor:default}.CommonButton:not(.disabled){cursor:pointer}.CommonButton:focus{outline-width:3px}.Button{font-family:var(--md-comp-button-label-text-font);font-weight:var(--md-comp-button-label-text-weight);font-size:var(--md-comp-button-label-text-size);letter-spacing:var(--md-comp-button-label-text-tracking);line-height:var(--md-comp-button-label-text-line-height);font-variation-settings:"wght" var(--md-comp-button-label-text-wght), "GRAD" var(--md-comp-button-label-text-grad), "wdth" var(--md-comp-button-label-text-wdth), "ROND" var(--md-comp-button-label-text-rond), "opsz" var(--md-comp-button-label-text-opsz), "CRSV" var(--md-comp-button-label-text-crsv), "slnt" var(--md-comp-button-label-text-slnt), "FILL" var(--md-comp-button-label-text-fill), "HEXP" var(--md-comp-button-label-text-hexp);--md-comp-icon-color:var(--md-comp-button-icon-color);--md-comp-state-hover-state-layer-opacity:var(--md-comp-button-hovered-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-button-focused-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-button-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-button-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-button-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-button-pressed-state-layer-color);--md-comp-state-focus-indicator-color:var(--md-comp-button-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-button-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-button-focus-indicator-outline-offset);width:calc(var(--md-comp-button-leading-space) + var(--md-comp-button-container-width) + var(--md-comp-button-trailing-space) + var(--button-width-extra,0px));min-width:calc(var(--md-comp-button-leading-space) + var(--md-comp-button-container-width) + var(--md-comp-button-trailing-space) + var(--button-width-extra,0px));height:var(--md-comp-button-container-height);min-height:var(--md-comp-button-container-height);gap:var(--md-comp-button-gap-space,0px);padding-left:var(--md-comp-button-leading-space);padding-right:var(--md-comp-button-trailing-space);background-color:var(--md-comp-button-container-color);color:var(--md-comp-button-label-text-color);box-shadow:var(--md-comp-button-container-elevation)}.Button,.Button:focus:not(:focus-visible){outline:solid var(--md-comp-button-outline-width,0px) rgba(from var(--md-comp-button-outline-color,transparent) r g b/var(--md-comp-button-outline-opacity,0));outline-offset:calc(-1 * var(--md-comp-button-outline-width,0px))}.Button.icon.label{--md-comp-button-gap-space:var(--md-comp-button-icon-label-space)}.Button>.container>.icon{--md-comp-icon-size:var(--md-comp-button-icon-size)}.Button.selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-button-unselected-icon-color);--md-comp-state-hover-state-layer-color:var(--md-comp-button-unselected-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-button-unselected-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-button-unselected-pressed-state-layer-color);--md-comp-button-container-color:var(--md-comp-button-unselected-container-color);--md-comp-button-container-opacity:var(--md-comp-button-unselected-container-opacity);--md-comp-button-label-text-color:var(--md-comp-button-unselected-label-text-color)}.Button.selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-button-selected-icon-color);--md-comp-state-hover-state-layer-color:var(--md-comp-button-selected-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-button-selected-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-button-selected-pressed-state-layer-color);--md-comp-button-container-color:var(--md-comp-button-selected-container-color);--md-comp-button-container-opacity:var(--md-comp-button-selected-container-opacity);--md-comp-button-label-text-color:var(--md-comp-button-selected-label-text-color);outline-offset:0px;outline:0 solid #0000}.Button.disabled{--md-comp-icon-color:var(--md-comp-button-disabled-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-disabled-icon-opacity,var(--md-comp-button-icon-opacity,1));background-color:rgba(from var(--md-comp-button-disabled-container-color,var(--md-comp-button-container-color)) r g b/var(--md-comp-button-disabled-container-opacity,var(--md-comp-button-container-opacity,1)));color:rgba(from var(--md-comp-button-disabled-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-disabled-label-text-opacity,var(--md-comp-button-label-text-opacity,1)));box-shadow:var(--md-comp-button-disabled-container-elevation,var(--md-comp-button-container-elevation));outline:solid var(--md-comp-button-disabled-outline-width,var(--md-comp-button-outline-width,0px)) rgba(from var(--md-comp-button-disabled-outline-color,var(--md-comp-button-outline-color,transparent)) r g b/var(--md-comp-button-disabled-outline-opacity,var(--md-comp-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-button-disabled-outline-width,var(--md-comp-button-outline-width,0px)));cursor:default}.Button:hover:not(.disabled,:focus-visible,:active,.dragged){--md-comp-icon-color:var(--md-comp-button-hovered-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-hovered-icon-opacity,var(--md-comp-button-icon-opacity,1));background-color:rgba(from var(--md-comp-button-hovered-container-color,var(--md-comp-button-container-color)) r g b/var(--md-comp-button-hovered-container-opacity,var(--md-comp-button-container-opacity,1)));color:rgba(from var(--md-comp-button-hovered-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-hovered-label-text-opacity,var(--md-comp-button-label-text-opacity,1)));box-shadow:var(--md-comp-button-hovered-container-elevation,var(--md-comp-button-container-elevation));outline:solid var(--md-comp-button-hovered-outline-width,var(--md-comp-button-outline-width,0px)) rgba(from var(--md-comp-button-hovered-outline-color,var(--md-comp-button-outline-color,transparent)) r g b/var(--md-comp-button-hovered-outline-opacity,var(--md-comp-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-button-hovered-outline-width,var(--md-comp-button-outline-width,0px)))}.Button:hover:not(.disabled,:focus-visible,:active,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-button-unselected-hovered-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-unselected-hovered-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-unselected-hovered-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-unselected-hovered-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button:hover:not(.disabled,:focus-visible,:active,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-button-selected-hovered-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-selected-hovered-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-selected-hovered-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-selected-hovered-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button:focus-visible:not(.disabled,:active,.dragged){--md-comp-icon-color:var(--md-comp-button-focused-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-focused-icon-opacity,var(--md-comp-button-icon-opacity,1));background-color:rgba(from var(--md-comp-button-focused-container-color,var(--md-comp-button-container-color)) r g b/var(--md-comp-button-focused-container-opacity,var(--md-comp-button-container-opacity,1)));color:rgba(from var(--md-comp-button-focused-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-focused-label-text-opacity,var(--md-comp-button-label-text-opacity,1)));box-shadow:var(--md-comp-button-focused-container-elevation,var(--md-comp-button-container-elevation));outline:solid var(--md-comp-button-focused-outline-width,var(--md-comp-button-outline-width,0px)) rgba(from var(--md-comp-button-focused-outline-color,var(--md-comp-button-outline-color,transparent)) r g b/var(--md-comp-button-focused-outline-opacity,var(--md-comp-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-button-focused-outline-width,var(--md-comp-button-outline-width,0px)))}.Button:focus-visible:not(.disabled,:active,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-button-unselected-focused-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-unselected-focused-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-unselected-focused-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-unselected-focused-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button:focus-visible:not(.disabled,:active,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-button-selected-focused-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-selected-focused-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-selected-focused-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-selected-focused-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button:active:not(.disabled,.dragged){--md-comp-icon-color:var(--md-comp-button-pressed-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-pressed-icon-opacity,var(--md-comp-button-icon-opacity,1));background-color:rgba(from var(--md-comp-button-pressed-container-color,var(--md-comp-button-container-color)) r g b/var(--md-comp-button-pressed-container-opacity,var(--md-comp-button-container-opacity,1)));color:rgba(from var(--md-comp-button-pressed-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-pressed-label-text-opacity,var(--md-comp-button-label-text-opacity,1)));box-shadow:var(--md-comp-button-pressed-container-elevation,var(--md-comp-button-container-elevation));outline:solid var(--md-comp-button-pressed-outline-width,var(--md-comp-button-outline-width,0px)) rgba(from var(--md-comp-button-pressed-outline-color,var(--md-comp-button-outline-color,transparent)) r g b/var(--md-comp-button-pressed-outline-opacity,var(--md-comp-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-button-pressed-outline-width,var(--md-comp-button-outline-width,0px)))}.Button:active:not(.disabled,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-button-unselected-pressed-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-unselected-pressed-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-unselected-pressed-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-unselected-pressed-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button:active:not(.disabled,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-button-selected-pressed-icon-color,var(--md-comp-button-icon-color));--md-comp-icon-opacity:var(--md-comp-button-selected-pressed-icon-opacity,var(--md-comp-button-icon-opacity,1));color:rgba(from var(--md-comp-button-selected-pressed-label-text-color,var(--md-comp-button-label-text-color)) r g b/var(--md-comp-button-selected-pressed-label-text-opacity,var(--md-comp-button-label-text-opacity,1)))}.Button.elevated{--md-comp-button-container-color:var(--md-comp-button-elevated-container-color);--md-comp-button-icon-color:var(--md-comp-button-elevated-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-elevated-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-elevated-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-elevated-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-elevated-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-elevated-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-elevated-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-elevated-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-elevated-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-elevated-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-elevated-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-elevated-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-elevated-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-elevated-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-elevated-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-elevated-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-elevated-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-elevated-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-elevated-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-elevated-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-elevated-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-elevated-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-elevated-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-elevated-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-elevated-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-elevated-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-elevated-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-elevated-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-elevated-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-elevated-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-elevated-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-elevated-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-elevated-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-elevated-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-elevated-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-elevated-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-elevated-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-elevated-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-elevated-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-elevated-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-elevated-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-elevated-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-elevated-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-elevated-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-elevated-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-elevated-disabled-container-elevation)}.Button.filled{--md-comp-button-container-color:var(--md-comp-button-filled-container-color);--md-comp-button-icon-color:var(--md-comp-button-filled-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-filled-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-filled-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-filled-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-filled-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-filled-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-filled-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-filled-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-filled-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-filled-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-filled-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-filled-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-filled-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-filled-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-filled-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-filled-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-filled-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-filled-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-filled-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-filled-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-filled-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-filled-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-filled-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-filled-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-filled-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-filled-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-filled-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-filled-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-filled-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-filled-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-filled-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-filled-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-filled-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-filled-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-filled-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-filled-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-filled-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-filled-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-filled-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-filled-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-filled-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-filled-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-filled-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-filled-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-filled-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-filled-disabled-container-elevation)}.Button.tonal{--md-comp-button-container-color:var(--md-comp-button-tonal-container-color);--md-comp-button-icon-color:var(--md-comp-button-tonal-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-tonal-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-tonal-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-tonal-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-tonal-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-tonal-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-tonal-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-tonal-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-tonal-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-tonal-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-tonal-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-tonal-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-tonal-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-tonal-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-tonal-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-tonal-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-tonal-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-tonal-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-tonal-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-tonal-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-tonal-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-tonal-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-tonal-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-tonal-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-tonal-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-tonal-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-tonal-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-tonal-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-tonal-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-tonal-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-tonal-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-tonal-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-tonal-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-tonal-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-tonal-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-tonal-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-tonal-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-tonal-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-tonal-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-tonal-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-tonal-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-tonal-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-tonal-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-tonal-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-tonal-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-tonal-disabled-container-elevation)}.Button.tertiary{--md-comp-button-container-color:var(--md-comp-button-tertiary-container-color);--md-comp-button-icon-color:var(--md-comp-button-tertiary-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-tertiary-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-tertiary-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-tertiary-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-tertiary-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-tertiary-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-tertiary-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-tertiary-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-tertiary-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-tertiary-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-tertiary-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-tertiary-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-tertiary-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-tertiary-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-tertiary-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-tertiary-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-tertiary-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-tertiary-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-tertiary-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-tertiary-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-tertiary-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-tertiary-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-tertiary-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-tertiary-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-tertiary-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-tertiary-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-tertiary-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-tertiary-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-tertiary-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-tertiary-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-tertiary-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-tertiary-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-tertiary-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-tertiary-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-tertiary-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-tertiary-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-tertiary-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-tertiary-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-tertiary-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-tertiary-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-tertiary-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-tertiary-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-tertiary-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-tertiary-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-tertiary-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-tertiary-disabled-container-elevation)}.Button.success{--md-comp-button-container-color:var(--md-comp-button-success-container-color);--md-comp-button-icon-color:var(--md-comp-button-success-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-success-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-success-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-success-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-success-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-success-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-success-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-success-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-success-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-success-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-success-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-success-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-success-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-success-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-success-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-success-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-success-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-success-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-success-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-success-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-success-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-success-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-success-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-success-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-success-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-success-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-success-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-success-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-success-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-success-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-success-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-success-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-success-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-success-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-success-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-success-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-success-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-success-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-success-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-success-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-success-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-success-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-success-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-success-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-success-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-success-disabled-container-elevation)}.Button.error{--md-comp-button-container-color:var(--md-comp-button-error-container-color);--md-comp-button-icon-color:var(--md-comp-button-error-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-error-label-text-color);--md-comp-button-container-elevation:var(--md-comp-button-error-container-elevation);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-error-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-error-hovered-state-layer-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-error-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-error-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-error-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-error-focused-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-error-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-error-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-error-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-error-pressed-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-error-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-error-pressed-icon-color);--md-comp-button-unselected-container-color:var(--md-comp-button-error-unselected-container-color);--md-comp-button-unselected-icon-color:var(--md-comp-button-error-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-error-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-error-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-error-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-error-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-error-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-error-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-error-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-error-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-error-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-error-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-error-selected-container-color);--md-comp-button-selected-icon-color:var(--md-comp-button-error-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-error-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-error-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-error-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-error-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-error-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-error-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-error-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-error-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-error-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-error-selected-pressed-icon-color);--md-comp-button-disabled-container-color:var(--md-comp-button-error-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-error-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-error-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-error-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-error-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-error-disabled-label-text-opacity);--md-comp-button-disabled-container-elevation:var(--md-comp-button-error-disabled-container-elevation)}.Button.outlined{--md-comp-button-container-color:transparent;--md-comp-button-container-opacity:0;--md-comp-button-outline-color:var(--md-comp-button-outlined-outline-color);--md-comp-button-outline-opacity:1;--md-comp-button-icon-color:var(--md-comp-button-outlined-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-outlined-label-text-color);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-outlined-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-outlined-hovered-state-layer-color);--md-comp-button-hovered-outline-color:var(--md-comp-button-outlined-hovered-outline-color);--md-comp-button-hovered-label-text-color:var(--md-comp-button-outlined-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-outlined-hovered-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-outlined-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-outlined-focused-state-layer-color);--md-comp-button-focused-outline-color:var(--md-comp-button-outlined-focused-outline-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-outlined-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-outlined-focused-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-outlined-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-outlined-pressed-state-layer-color);--md-comp-button-pressed-outline-color:var(--md-comp-button-outlined-pressed-outline-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-outlined-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-outlined-pressed-icon-color);--md-comp-button-unselected-container-color:transparent;--md-comp-button-unselected-container-opacity:0;--md-comp-button-unselected-icon-color:var(--md-comp-button-outlined-unselected-icon-color);--md-comp-button-unselected-label-text-color:var(--md-comp-button-outlined-unselected-label-text-color);--md-comp-button-unselected-hovered-state-layer-color:var(--md-comp-button-outlined-unselected-hovered-state-layer-color);--md-comp-button-unselected-hovered-outline-color:var(--md-comp-button-outlined-unselected-hovered-outline-color);--md-comp-button-unselected-hovered-label-text-color:var(--md-comp-button-outlined-unselected-hovered-label-text-color);--md-comp-button-unselected-hovered-icon-color:var(--md-comp-button-outlined-unselected-hovered-icon-color);--md-comp-button-unselected-focused-state-layer-color:var(--md-comp-button-outlined-unselected-focused-state-layer-color);--md-comp-button-unselected-focused-outline-color:var(--md-comp-button-outlined-unselected-focused-outline-color);--md-comp-button-unselected-focused-label-text-color:var(--md-comp-button-outlined-unselected-focused-label-text-color);--md-comp-button-unselected-focused-icon-color:var(--md-comp-button-outlined-unselected-focused-icon-color);--md-comp-button-unselected-pressed-state-layer-color:var(--md-comp-button-outlined-unselected-pressed-state-layer-color);--md-comp-button-unselected-pressed-outline-color:var(--md-comp-button-outlined-unselected-pressed-outline-color);--md-comp-button-unselected-pressed-label-text-color:var(--md-comp-button-outlined-unselected-pressed-label-text-color);--md-comp-button-unselected-pressed-icon-color:var(--md-comp-button-outlined-unselected-pressed-icon-color);--md-comp-button-selected-container-color:var(--md-comp-button-outlined-selected-container-color);--md-comp-button-selected-container-opacity:1;--md-comp-button-selected-icon-color:var(--md-comp-button-outlined-selected-icon-color);--md-comp-button-selected-label-text-color:var(--md-comp-button-outlined-selected-label-text-color);--md-comp-button-selected-hovered-state-layer-color:var(--md-comp-button-outlined-selected-hovered-state-layer-color);--md-comp-button-selected-hovered-label-text-color:var(--md-comp-button-outlined-selected-hovered-label-text-color);--md-comp-button-selected-hovered-icon-color:var(--md-comp-button-outlined-selected-hovered-icon-color);--md-comp-button-selected-focused-state-layer-color:var(--md-comp-button-outlined-selected-focused-state-layer-color);--md-comp-button-selected-focused-label-text-color:var(--md-comp-button-outlined-selected-focused-label-text-color);--md-comp-button-selected-focused-icon-color:var(--md-comp-button-outlined-selected-focused-icon-color);--md-comp-button-selected-pressed-state-layer-color:var(--md-comp-button-outlined-selected-pressed-state-layer-color);--md-comp-button-selected-pressed-label-text-color:var(--md-comp-button-outlined-selected-pressed-label-text-color);--md-comp-button-selected-pressed-icon-color:var(--md-comp-button-outlined-selected-pressed-icon-color);--md-comp-button-disabled-outline-color:var(--md-comp-button-outlined-unselected-disabled-outline-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-outlined-disabled-container-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-outlined-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-outlined-disabled-label-text-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-outlined-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-outlined-disabled-icon-opacity)}.Button.outlined.selected{--md-comp-button-disabled-container-color:var(--md-comp-button-outlined-selected-disabled-container-color);--md-comp-button-disabled-outline-color:var(--md-comp-button-outlined-disabled-outline-color);--md-comp-button-disabled-outline-width:0px}.Button.text{--md-comp-button-container-color:transparent;--md-comp-button-container-opacity:0;--md-comp-button-icon-color:var(--md-comp-button-text-icon-color);--md-comp-button-label-text-color:var(--md-comp-button-text-label-text-color);--md-comp-button-disabled-container-color:var(--md-comp-button-text-disabled-container-color);--md-comp-button-disabled-container-opacity:var(--md-comp-button-text-disabled-container-opacity);--md-comp-button-disabled-icon-color:var(--md-comp-button-text-disabled-icon-color);--md-comp-button-disabled-icon-opacity:var(--md-comp-button-text-disabled-icon-opacity);--md-comp-button-disabled-label-text-color:var(--md-comp-button-text-disabled-label-text-color);--md-comp-button-disabled-label-text-opacity:var(--md-comp-button-text-disabled-label-text-opacity);--md-comp-button-hovered-label-text-color:var(--md-comp-button-text-hovered-label-text-color);--md-comp-button-hovered-icon-color:var(--md-comp-button-text-hovered-icon-color);--md-comp-button-hovered-state-layer-opacity:var(--md-comp-button-text-hovered-state-layer-opacity);--md-comp-button-hovered-state-layer-color:var(--md-comp-button-text-hovered-state-layer-color);--md-comp-button-focused-label-text-color:var(--md-comp-button-text-focused-label-text-color);--md-comp-button-focused-icon-color:var(--md-comp-button-text-focused-icon-color);--md-comp-button-focused-state-layer-opacity:var(--md-comp-button-text-focused-state-layer-opacity);--md-comp-button-focused-state-layer-color:var(--md-comp-button-text-focused-state-layer-color);--md-comp-button-pressed-label-text-color:var(--md-comp-button-text-pressed-label-text-color);--md-comp-button-pressed-icon-color:var(--md-comp-button-text-pressed-icon-color);--md-comp-button-pressed-state-layer-opacity:var(--md-comp-button-text-pressed-state-layer-opacity);--md-comp-button-pressed-state-layer-color:var(--md-comp-button-text-pressed-state-layer-color)}:not(.ButtonGroup)>.Button.width-stretch{width:100%}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button.disabled.round:not(.selected){border-radius:var(--md-comp-button-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button.disabled.square:not(.selected){border-radius:var(--md-comp-button-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button.disabled.round.selected{border-radius:var(--md-comp-button-selected-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button.disabled.square.selected{border-radius:var(--md-comp-button-selected-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button:not(.disabled):not(:active).round:not(.selected){border-radius:var(--md-comp-button-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button:not(.disabled):not(:active).square:not(.selected){border-radius:var(--md-comp-button-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button:not(.disabled):not(:active).round.selected{border-radius:var(--md-comp-button-selected-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button:not(.disabled):not(:active).square.selected{border-radius:var(--md-comp-button-selected-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.Button:not(.disabled):active{border-radius:var(--md-comp-button-pressed-container-shape)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.extra-small:has(>.Button){--md-comp-button-container-height:var(--md-comp-button-xsmall-container-height);--md-comp-button-outline-width:var(--md-comp-button-xsmall-outlined-outline-width);--md-comp-button-label-text-font:var(--md-comp-button-xsmall-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-xsmall-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-xsmall-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-xsmall-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-xsmall-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-xsmall-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-xsmall-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-xsmall-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-xsmall-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-xsmall-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-xsmall-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-xsmall-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-xsmall-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-xsmall-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-xsmall-icon-size);--md-comp-button-leading-space:var(--md-comp-button-xsmall-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-xsmall-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-xsmall-trailing-space);--md-comp-button-container-shape-round:var(--md-comp-button-xsmall-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-xsmall-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-xsmall-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-xsmall-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-xsmall-selected-container-shape-square);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-xsmall-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-xsmall-pressed-container-corner-size-motion-spring-easing)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.small:has(>.Button){--md-comp-button-container-height:var(--md-comp-button-small-container-height);--md-comp-button-outline-width:var(--md-comp-button-small-outlined-outline-width);--md-comp-button-label-text-font:var(--md-comp-button-small-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-small-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-small-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-small-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-small-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-small-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-small-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-small-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-small-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-small-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-small-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-small-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-small-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-small-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-small-icon-size);--md-comp-button-leading-space:var(--md-comp-button-small-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-small-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-small-trailing-space);--md-comp-button-container-shape-round:var(--md-comp-button-small-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-small-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-small-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-small-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-small-selected-container-shape-square);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-small-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-small-pressed-container-corner-size-motion-spring-easing)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.medium:has(>.Button){--md-comp-button-container-height:var(--md-comp-button-medium-container-height);--md-comp-button-outline-width:var(--md-comp-button-medium-outlined-outline-width);--md-comp-button-label-text-font:var(--md-comp-button-medium-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-medium-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-medium-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-medium-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-medium-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-medium-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-medium-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-medium-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-medium-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-medium-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-medium-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-medium-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-medium-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-medium-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-medium-icon-size);--md-comp-button-leading-space:var(--md-comp-button-medium-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-medium-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-medium-trailing-space);--md-comp-button-container-shape-round:var(--md-comp-button-medium-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-medium-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-medium-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-medium-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-medium-selected-container-shape-square);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-medium-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-medium-pressed-container-corner-size-motion-spring-easing)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.large:has(>.Button){--md-comp-button-container-height:var(--md-comp-button-large-container-height);--md-comp-button-outline-width:var(--md-comp-button-large-outlined-outline-width);--md-comp-button-label-text-font:var(--md-comp-button-large-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-large-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-large-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-large-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-large-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-large-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-large-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-large-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-large-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-large-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-large-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-large-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-large-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-large-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-large-icon-size);--md-comp-button-leading-space:var(--md-comp-button-large-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-large-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-large-trailing-space);--md-comp-button-container-shape-round:var(--md-comp-button-large-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-large-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-large-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-large-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-large-selected-container-shape-square);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-large-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-large-pressed-container-corner-size-motion-spring-easing)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.extra-large:has(>.Button){--md-comp-button-container-height:var(--md-comp-button-xlarge-container-height);--md-comp-button-outline-width:var(--md-comp-button-xlarge-outlined-outline-width);--md-comp-button-label-text-font:var(--md-comp-button-xlarge-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-xlarge-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-xlarge-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-xlarge-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-xlarge-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-xlarge-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-xlarge-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-xlarge-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-xlarge-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-xlarge-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-xlarge-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-xlarge-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-xlarge-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-xlarge-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-xlarge-icon-size);--md-comp-button-leading-space:var(--md-comp-button-xlarge-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-xlarge-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-xlarge-trailing-space);--md-comp-button-container-shape-round:var(--md-comp-button-xlarge-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-xlarge-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-xlarge-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-xlarge-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-xlarge-selected-container-shape-square);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-xlarge-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-xlarge-pressed-container-corner-size-motion-spring-easing)}

package/dist/components/Button/group/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./render.cjs");exports.default=e.default;

package/dist/components/Button/group/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './render';
+export type { ButtonGroupProps, ConnectedButtonGroupProps, StandardButtonGroupProps } from './render';

package/dist/components/Button/group/index.js

@@ -0,0 +1 @@
+export { default } from "./render.js";

package/dist/components/Button/group/render.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/index.cjs"),n=require("../../misc/OrderedCollection/index.cjs"),r=require("../../misc/Transitionable/index.cjs"),i=require("../../types.cjs"),a=require("../icon/render.cjs");;/* empty css             */const o=require("../default/render.cjs");let s=require("classnames");s=e.__toESM(s,1);let c=require("react"),l=require("react/jsx-runtime");var u=[`type`,`align`,`size`,`shape`,`selectable`,`selected`,`onSelected`,`required`,`requiredMessage`,`children`];function d(e){let t={...e};return u.forEach(e=>delete t[e]),t}function f(e){return typeof e==`object`&&e?.selectable}var p=(0,c.createContext)(null),m=()=>(0,c.useContext)(p);function h(e){let{onSelected:u}=e,m=(0,c.useId)(),[h,g]=(0,c.useState)([]),[_,v]=(0,c.useState)(),[y,b]=(0,c.useState)([]),x=(0,c.useMemo)(()=>[`Button`,`IconButton`],[]),S={},C=(0,c.useMemo)(()=>({size:e.size,selectable:!!e.selectable,required:!!(e.selectable&&e.required),get selected(){return h.reduce((e,t)=>e.set(t.id,y.includes(t.id)),new Map)},onSelected:(t,n)=>{let r;e.selectable&&(v(void 0),e.selectable===`single`?(r=n?[t]:[],u?.(n?t:void 0)):(r=[...y],n?r.push(t):r=r.filter(e=>e!==t),u?.(r)),b(r))},onPressed:(t,n,r)=>{let i,a=null,o=null;e.type!==`connected`&&(n?.previousElementSibling instanceof HTMLElement&&(a=n.previousElementSibling),n?.nextElementSibling instanceof HTMLElement&&(o=n.nextElementSibling),r?(i=n.getBoundingClientRect().width/100*15,!a&&o?(n.style.setProperty(`--button-width-extra`,`${i/2}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&o?(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&!o&&(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i/2}px`))):(a?.style.removeProperty(`--button-width-extra`),n.style.removeProperty(`--button-width-extra`),o?.style.removeProperty(`--button-width-extra`)))}}),[h,u,e.required,e.selectable,e.size,e.type,y]);return(0,c.useEffect)(()=>{e.selectable&&(e.selectable===`single`?b(e.selected?[e.selected]:[]):b(e.selected??[]))},[e.selectable,e.selected]),S.ButtonGroup=!0,S[e.type??`standard`]=!0,e.type!==`connected`&&(S[`align-`+(e.align??`left`)]=!0),S[e.shape??`round`]=!0,S[i.getComponentSizeName(e.size)]=!0,f(e)&&(S.selectable=!0,S[e.selectable]=!0),(0,l.jsxs)(`div`,{...d(e),className:(0,s.default)(S,e.className),children:[(0,l.jsx)(`div`,{className:`container`,children:(0,l.jsxs)(p,{value:C,children:[h.map(e=>{switch(e.orderedCollectionName){case`Button`:return(0,l.jsx)(o.default,{...e},e.id);case`IconButton`:return(0,l.jsx)(a.default,{...e},e.id)}}),(0,l.jsx)(n.default,{childName:x,onChildrenChange:g,compareChild:t.shallowEqual,children:e.children})]})}),e.selectable&&e.required&&(0,l.jsx)(r.default,{value:_,className:`error`}),(0,l.jsx)(`div`,{style:(0,c.useMemo)(()=>({display:`none`}),[]),children:e.selectable&&e.required&&h.map((t,n)=>(0,l.jsx)(`input`,{type:`radio`,name:`group_${m}`,required:!n&&!y.length,defaultChecked:y.includes(t.id),onInvalid:t=>{v((f(e)?e.requiredMessage:void 0)??t.currentTarget.validationMessage),t.preventDefault()}},t.id))})]})}exports.ButtonGroupContext=p,exports.default=h,exports.useButtonGroupContext=m;

package/dist/components/Button/group/render.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { CommonButtonProps } from '../types';
+interface BaseButtonGroupProps extends Pick<CommonButtonProps, "size" | "shape">, Omit<React.ButtonHTMLAttributes<HTMLElement>, "type"> {
+    selectable?: false;
+    children?: React.ReactNode;
+}
+export interface BaseButtonGroupSelectable {
+    required?: boolean;
+    requiredMessage?: string;
+}
+export interface BaseButtonGroupSingleSelection extends BaseButtonGroupSelectable {
+    selectable: "single";
+    selected?: string;
+    onSelected?: (id: string | undefined) => void;
+}
+export interface BaseButtonGroupMultipleSelection extends BaseButtonGroupSelectable {
+    selectable: "multiple";
+    selected?: string[];
+    onSelected?: (ids: string[]) => void;
+}
+export interface StandardButtonGroupProps extends BaseButtonGroupProps {
+    type?: "standard";
+    align?: "left" | "center" | "right";
+}
+export interface StandardButtonGroupSingleSelectionProps extends Omit<StandardButtonGroupProps, "selectable">, BaseButtonGroupSingleSelection {
+}
+export interface StandardButtonGroupMultipleSelectionProps extends Omit<StandardButtonGroupProps, "selectable">, BaseButtonGroupMultipleSelection {
+}
+export interface ConnectedButtonGroupProps extends BaseButtonGroupProps {
+    type: "connected";
+}
+export interface ConnectedButtonGroupSingleSelectionProps extends Omit<ConnectedButtonGroupProps, "selectable">, BaseButtonGroupSingleSelection {
+}
+export interface ConnectedButtonGroupMultipleSelectionProps extends Omit<ConnectedButtonGroupProps, "selectable">, BaseButtonGroupMultipleSelection {
+}
+type ButtonGroupSelectionProps = StandardButtonGroupSingleSelectionProps | StandardButtonGroupMultipleSelectionProps | ConnectedButtonGroupSingleSelectionProps | ConnectedButtonGroupMultipleSelectionProps;
+export type ButtonGroupProps = StandardButtonGroupProps | ConnectedButtonGroupProps | ButtonGroupSelectionProps;
+export interface ButtonGroupContext {
+    size: CommonButtonProps["size"];
+    selectable: boolean;
+    required: boolean;
+    readonly selected: Map<string, boolean>;
+    onSelected: (id: string, selected: boolean) => void;
+    onPressed: (id: string, ref: HTMLElement, pressed: boolean) => void;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupContext | null>;
+export declare const useButtonGroupContext: () => ButtonGroupContext | null;
+export default function ButtonGroup(props: ButtonGroupProps): React.JSX.Element;
+export {};