@rocket.chat/fuselage 0.90.1 → 0.92.0

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

@@ -1,5 +1,5 @@
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { type BoxProps } from '../Box';
 export type IconButtonSize = {
     large?: boolean;
@@ -10,6 +10,14 @@ export type IconButtonSize = {
 };
 export type IconButtonProps = {
     icon: IconName | ReactElement<any>;
+    /**
+     * What to pin to the button's corner, if anything — a `Badge`, as a rule.
+     *
+     * It is hidden from assistive technology, always: `aria-label` replaces a button's contents rather than adding
+     * to them, so a badge inside a labelled button is never read out. What it says has to reach `aria-label`
+     * instead, which is the caller's to write.
+     */
+    badge?: ReactNode;
     primary?: boolean;
     secondary?: boolean;
     info?: boolean;
@@ -18,6 +26,6 @@ export type IconButtonProps = {
     success?: boolean;
     pressed?: boolean;
 } & IconButtonSize & BoxProps;
-declare function IconButton({ icon, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, badge, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/Button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,GAChB,QAAQ,CAAC;AAmBX,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BAqEjB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,GAChB,QAAQ,CAAC;AAmBX,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BA2EjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/PaletteStyleTag/helpers/getPalette.d.ts

@@ -6,61 +6,20 @@ export declare const getTokens: (theme: Themes) => {
         "level-2": "#156ff5";
         "level-3": "#f38c39";
         "level-4": "#ec0d2a";
-    } | {
-        "level-0": "#404754";
-        "level-1": "#6c737a";
-        "level-2": "#2c65ba";
-        "level-3": "#955828";
-        "level-4": "#b43c4c";
     } | {
         "level-0": "#e4e7ea";
         "level-1": "#2f343d";
         "level-2": "#10529e";
         "level-3": "#713607";
         "level-4": "#9b1325";
+    } | {
+        "level-0": "#404754";
+        "level-1": "#6c737a";
+        "level-2": "#2c65ba";
+        "level-3": "#955828";
+        "level-4": "#b43c4c";
     };
     button: {
-        backgroundPrimaryDefault: "#095ad2";
-        backgroundPrimaryHover: "#10529e";
-        backgroundPrimaryPress: "#01336b";
-        backgroundPrimaryFocus: "#095ad2";
-        backgroundPrimaryKeyfocus: "#095ad2";
-        backgroundPrimaryDisabled: "#012247";
-        fontOnPrimary: "#ffffff";
-        fontOnPrimaryDisabled: "#6c727a";
-        backgroundSecondaryDefault: "#353b45";
-        backgroundSecondaryHover: "#404754";
-        backgroundSecondaryPress: "#4c5362";
-        backgroundSecondaryFocus: "#353b45";
-        backgroundSecondaryKeyfocus: "#353b45";
-        backgroundSecondaryDisabled: "#353b45";
-        fontOnSecondary: "#e4e7ea";
-        fontOnSecondaryDisabled: "#6c727a";
-        backgroundSecondaryDangerDefault: "#353b45";
-        backgroundSecondaryDangerHover: "#404754";
-        backgroundSecondaryDangerPress: "#4c5362";
-        backgroundSecondaryDangerFocus: "#353b45";
-        backgroundSecondaryDangerKeyfocus: "#353b45";
-        backgroundSecondaryDangerDisabled: "#353b45";
-        fontOnSecondaryDanger: "#ffc1c9";
-        onSecondaryDangerDisabled: "#6b0513";
-        backgroundDangerDefault: "#bb3e4e";
-        backgroundDangerHover: "#95323f";
-        backgroundDangerPress: "#822c37";
-        backgroundDangerFocus: "#bb3e4e";
-        backgroundDangerKeyfocus: "#bb3e4e";
-        backgroundDangerDisabled: "#3d2126";
-        fontOnDanger: "#ffffff";
-        fontOnDangerDisabled: "#757575";
-        backgroundSuccessDefault: "#1d7256";
-        backgroundSuccessHover: "#175943";
-        backgroundSuccessPress: "#134937";
-        backgroundSuccessFocus: "#1d7256";
-        backgroundSuccessKeyfocus: "#1d7256";
-        backgroundSuccessDisabled: "#1e4b40";
-        fontOnSuccess: "#ffffff";
-        fontOnSuccessDisabled: "#757575";
-    } | {
         backgroundPrimaryDefault: "#156ff5";
         backgroundPrimaryHover: "#095ad2";
         backgroundPrimaryPress: "#10529e";
@@ -142,6 +101,47 @@ export declare const getTokens: (theme: Themes) => {
         backgroundSuccessDisabled: "#c0f6e4";
         fontOnSuccess: "#1f2329";
         fontOnSuccessDisabled: "#ffffff";
+    } | {
+        backgroundPrimaryDefault: "#095ad2";
+        backgroundPrimaryHover: "#10529e";
+        backgroundPrimaryPress: "#01336b";
+        backgroundPrimaryFocus: "#095ad2";
+        backgroundPrimaryKeyfocus: "#095ad2";
+        backgroundPrimaryDisabled: "#012247";
+        fontOnPrimary: "#ffffff";
+        fontOnPrimaryDisabled: "#6c727a";
+        backgroundSecondaryDefault: "#353b45";
+        backgroundSecondaryHover: "#404754";
+        backgroundSecondaryPress: "#4c5362";
+        backgroundSecondaryFocus: "#353b45";
+        backgroundSecondaryKeyfocus: "#353b45";
+        backgroundSecondaryDisabled: "#353b45";
+        fontOnSecondary: "#e4e7ea";
+        fontOnSecondaryDisabled: "#6c727a";
+        backgroundSecondaryDangerDefault: "#353b45";
+        backgroundSecondaryDangerHover: "#404754";
+        backgroundSecondaryDangerPress: "#4c5362";
+        backgroundSecondaryDangerFocus: "#353b45";
+        backgroundSecondaryDangerKeyfocus: "#353b45";
+        backgroundSecondaryDangerDisabled: "#353b45";
+        fontOnSecondaryDanger: "#ffc1c9";
+        onSecondaryDangerDisabled: "#6b0513";
+        backgroundDangerDefault: "#bb3e4e";
+        backgroundDangerHover: "#95323f";
+        backgroundDangerPress: "#822c37";
+        backgroundDangerFocus: "#bb3e4e";
+        backgroundDangerKeyfocus: "#bb3e4e";
+        backgroundDangerDisabled: "#3d2126";
+        fontOnDanger: "#ffffff";
+        fontOnDangerDisabled: "#757575";
+        backgroundSuccessDefault: "#1d7256";
+        backgroundSuccessHover: "#175943";
+        backgroundSuccessPress: "#134937";
+        backgroundSuccessFocus: "#1d7256";
+        backgroundSuccessKeyfocus: "#1d7256";
+        backgroundSuccessDisabled: "#1e4b40";
+        fontOnSuccess: "#ffffff";
+        fontOnSuccessDisabled: "#757575";
     };
     font: {
         white: "#ffffff";
@@ -155,18 +155,6 @@ export declare const getTokens: (theme: Themes) => {
         danger: "#d40c26";
         pureWhite: "#ffffff";
         pureBlack: "#2f343d";
-    } | {
-        white: "#2f343d";
-        disabled: "#60646c";
-        annotation: "#9ea2a8";
-        hint: "#9ea2a8";
-        secondaryInfo: "#9ea2a8";
-        default: "#c1c7d0";
-        titlesLabels: "#f2f3f5";
-        info: "#739ede";
-        danger: "#d88892";
-        pureWhite: "#ffffff";
-        pureBlack: "#1f2329";
     } | {
         white: "#ffffff";
         disabled: "#cbced1";
@@ -179,6 +167,18 @@ export declare const getTokens: (theme: Themes) => {
         danger: "#9b1325";
         pureWhite: "#ffffff";
         pureBlack: "#1f2329";
+    } | {
+        white: "#2f343d";
+        disabled: "#60646c";
+        annotation: "#9ea2a8";
+        hint: "#9ea2a8";
+        secondaryInfo: "#9ea2a8";
+        default: "#c1c7d0";
+        titlesLabels: "#f2f3f5";
+        info: "#739ede";
+        danger: "#d88892";
+        pureWhite: "#ffffff";
+        pureBlack: "#1f2329";
     };
     shadow: {
         highlight: "#d1ebfe";
@@ -187,13 +187,6 @@ export declare const getTokens: (theme: Themes) => {
         "elevation-1": "#2f343d1a";
         "elevation-2x": "#2f343d14";
         "elevation-2y": "#2f343d1f";
-    } | {
-        highlight: "#d1ebfe";
-        danger: "#ffe9ec";
-        "elevation-border": "#2f343d";
-        "elevation-1": "#09090959";
-        "elevation-2x": "#0909094d";
-        "elevation-2y": "#09090973";
     } | {
         highlight: "#d1ebfe";
         danger: "#ffe9ec";
@@ -201,6 +194,13 @@ export declare const getTokens: (theme: Themes) => {
         "elevation-1": "#2f343d1a";
         "elevation-2x": "#2f343d14";
         "elevation-2y": "#2f343d1f";
+    } | {
+        highlight: "#d1ebfe";
+        danger: "#ffe9ec";
+        "elevation-border": "#2f343d";
+        "elevation-1": "#09090959";
+        "elevation-2x": "#0909094d";
+        "elevation-2y": "#09090973";
     };
     status: {
         info: "#d1ebfe";
@@ -219,23 +219,6 @@ export declare const getTokens: (theme: Themes) => {
         "font-on-service-2": "#7f1b9f";
         "service-3": "#5f1477";
         "font-on-service-3": "#ffffff";
-    } | {
-        info: "#a8c3eb";
-        "font-on-info": "#739ede";
-        success: "#c1ebdd";
-        "font-on-success": "#58ad90";
-        danger: "#f7cfd4";
-        "font-on-danger": "#d88892";
-        warning: "#feefbe";
-        "font-on-warning": "#c7aa66";
-        "warning-2": "#3c3625";
-        "font-on-warning-2": "#ffffff";
-        "service-1": "#fce3cf";
-        "font-on-service-1": "#ca9163";
-        "service-2": "#edd0f7";
-        "font-on-service-2": "#c393d2";
-        "service-3": "#5f1477";
-        "font-on-service-3": "#ffffff";
     } | {
         info: "#d1ebfe";
         "font-on-info": "#10529e";
@@ -253,15 +236,25 @@ export declare const getTokens: (theme: Themes) => {
         "font-on-service-2": "#7f1b9f";
         "service-3": "#5f1477";
         "font-on-service-3": "#ffffff";
+    } | {
+        info: "#a8c3eb";
+        "font-on-info": "#739ede";
+        success: "#c1ebdd";
+        "font-on-success": "#58ad90";
+        danger: "#f7cfd4";
+        "font-on-danger": "#d88892";
+        warning: "#feefbe";
+        "font-on-warning": "#c7aa66";
+        "warning-2": "#3c3625";
+        "font-on-warning-2": "#ffffff";
+        "service-1": "#fce3cf";
+        "font-on-service-1": "#ca9163";
+        "service-2": "#edd0f7";
+        "font-on-service-2": "#c393d2";
+        "service-3": "#5f1477";
+        "font-on-service-3": "#ffffff";
     };
     statusBullet: {
-        online: "#1cbf89";
-        away: "#b08c30";
-        busy: "#c75765";
-        disabled: "#cc7f42";
-        offline: "#8b9098";
-        loading: "#8b9098";
-    } | {
         online: "#148660";
         away: "#ac892f";
         busy: "#d40c26";
@@ -275,6 +268,13 @@ export declare const getTokens: (theme: Themes) => {
         disabled: "#bd5a0b";
         offline: "#1f2329";
         loading: "#1f2329";
+    } | {
+        online: "#1cbf89";
+        away: "#b08c30";
+        busy: "#c75765";
+        disabled: "#cc7f42";
+        offline: "#8b9098";
+        loading: "#8b9098";
     };
     stroke: {
         extraLight: "#ebecef";
@@ -286,16 +286,6 @@ export declare const getTokens: (theme: Themes) => {
         highlight: "#156ff5";
         extraLightError: "#ffc1c9";
         error: "#ec0d2a";
-    } | {
-        extraLight: "#333842";
-        light: "#404754";
-        medium: "#4b5362";
-        dark: "#9ea2a8";
-        extraDark: "#cbced1";
-        extraLightHighlight: "#d1ebfe";
-        highlight: "#6292da";
-        extraLightError: "#f49aa6";
-        error: "#bb3e4e";
     } | {
         extraLight: "#ebecef";
         light: "#cbced1";
@@ -306,6 +296,16 @@ export declare const getTokens: (theme: Themes) => {
         highlight: "#156ff5";
         extraLightError: "#ffc1c9";
         error: "#ec0d2a";
+    } | {
+        extraLight: "#333842";
+        light: "#404754";
+        medium: "#4b5362";
+        dark: "#9ea2a8";
+        extraDark: "#cbced1";
+        extraLightHighlight: "#d1ebfe";
+        highlight: "#6292da";
+        extraLightError: "#f49aa6";
+        error: "#bb3e4e";
     };
     surface: {
         light: "#ffffff";
@@ -320,19 +320,6 @@ export declare const getTokens: (theme: Themes) => {
         featuredHover: "#4a105d";
         sidebar: "#e4e7ea";
         overlay: "#2f343d80";
-    } | {
-        light: "#262931";
-        tint: "#1f2329";
-        room: "#1f2329";
-        neutral: "#2d3039";
-        disabled: "#24272e";
-        hover: "#1a1e23";
-        selected: "#4c5362";
-        dark: "#e4e7ea";
-        featured: "#5f1477";
-        featuredHover: "#4a105d";
-        sidebar: "#2f343d";
-        overlay: "#00000099";
     } | {
         light: "#ffffff";
         tint: "#f7f8fa";
@@ -346,6 +333,19 @@ export declare const getTokens: (theme: Themes) => {
         featuredHover: "#4a105d";
         sidebar: "#e4e7ea";
         overlay: "#2f343d80";
+    } | {
+        light: "#262931";
+        tint: "#1f2329";
+        room: "#1f2329";
+        neutral: "#2d3039";
+        disabled: "#24272e";
+        hover: "#1a1e23";
+        selected: "#4c5362";
+        dark: "#e4e7ea";
+        featured: "#5f1477";
+        featuredHover: "#4a105d";
+        sidebar: "#2f343d";
+        overlay: "#00000099";
     };
 };
 export declare const getThemePalette: (theme: Themes) => {

package/dist/components/Sidebar/SidebarGroupTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarGroupTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvE,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,GAAI,4EAU/B,sBAAsB,gCA+BxB,CAAC"}
+{"version":3,"file":"SidebarGroupTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarGroupTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvE,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,GAAI,4EAU/B,sBAAsB,gCAgCxB,CAAC"}

package/dist/components/Sidebar/SidebarItem/SidebarItem.d.ts

@@ -2,8 +2,7 @@ import type { AllHTMLAttributes, ElementType } from 'react';
 export type SidebarItemProps = {
     selected?: boolean;
     level?: number;
-    indent?: boolean;
     is?: ElementType;
 } & AllHTMLAttributes<HTMLAnchorElement>;
-export declare const SidebarItem: ({ selected, level, indent, className, children, is: Tag, ...props }: SidebarItemProps) => import("react").JSX.Element;
+export declare const SidebarItem: ({ selected, level, className, children, is: Tag, ...props }: SidebarItemProps) => import("react").JSX.Element;
 //# sourceMappingURL=SidebarItem.d.ts.map

package/dist/components/Sidebar/SidebarItem/SidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,qEAQzB,gBAAgB,gCAelB,CAAC"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,6DAOzB,gBAAgB,gCAclB,CAAC"}

package/dist/components/Sidebar/hooks/useCollapse.d.ts

@@ -12,7 +12,7 @@ export declare const useCollapse: ({ expanded: propExpanded, defaultExpanded, di
         readonly 'aria-labelledby': string;
     } | {
         readonly 'aria-controls': string;
-        readonly 'aria-expanded': "true" | "false";
+        readonly 'aria-expanded': "false" | "true";
         readonly tabIndex: number | undefined;
         readonly onClick: (e: MouseEvent<HTMLElement>) => void;
         readonly onKeyDown: KeyboardEventHandler;