@iobroker/dm-gui-components 10.0.23 → 10.1.0

package/build/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sourceRoot":"./src/","sources":["StatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { IconButton, Tooltip } from '@mui/material';\n\nimport type { IobTheme } from '@iobroker/gui-components';\n\nimport { useStateOrObject } from './hooks';\nimport type { StatusIndicator as StatusIndicatorConfig, StatusIndicatorLevel } from './protocol/api';\nimport type { StateOrObjectHandler } from './StateOrObjectHandler';\nimport { getIndicatorColor, getTranslation, renderIcon } from './Utils';\n\nconst styles: Record<string, React.CSSProperties> = {\n    tooltip: {\n        pointerEvents: 'none',\n    },\n    content: {\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        lineHeight: 1,\n    },\n    text: {\n        fontSize: 'small',\n        margin: 0,\n        whiteSpace: 'nowrap',\n    },\n    row: {\n        display: 'flex',\n        alignItems: 'center',\n        flexWrap: 'wrap',\n        gap: 8,\n    },\n};\n\n/**\n * Find the first matching level for the given value.\n *\n * A level matches if its `value` equals the current value, if the numeric value lies within\n * `min`/`max` (both inclusive) or if the level defines no condition at all (catch-all).\n */\nfunction findLevel(\n    levels: StatusIndicatorLevel[],\n    value: string | number | boolean | undefined,\n): StatusIndicatorLevel | undefined {\n    for (const level of levels) {\n        if (level.value !== undefined) {\n            if (level.value === value) {\n                return level;\n            }\n            continue;\n        }\n        if (level.min !== undefined || level.max !== undefined) {\n            if (typeof value !== 'number') {\n                continue;\n            }\n            if (level.min !== undefined && value < level.min) {\n                continue;\n            }\n            if (level.max !== undefined && value > level.max) {\n                continue;\n            }\n            return level;\n        }\n        // no condition => catch-all\n        return level;\n    }\n\n    return undefined;\n}\n\ninterface StatusIndicatorProps {\n    indicator: StatusIndicatorConfig;\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n    /** Called when the indicator is clicked. If not provided, the indicator is not clickable */\n    onClick?: () => void;\n    /** If the referenced action opens a URL instead of calling the backend */\n    url?: string;\n    disabled?: boolean;\n    /** Color used if the indicator does not define one itself (e.g. white in the toolbar) */\n    defaultColor?: string;\n}\n\n/**\n * A single custom status indicator.\n *\n * Every visual property may be bound to a state or an object, so the indicator follows its value\n * live. The optional `levels` list maps value ranges to icon, color and text.\n */\nexport default function StatusIndicator(props: StatusIndicatorProps): React.JSX.Element | null {\n    const { indicator, stateOrObjectHandler } = props;\n\n    const value = useStateOrObject<string | number | boolean>(indicator.value, stateOrObjectHandler);\n    const icon = useStateOrObject<string>(indicator.icon, stateOrObjectHandler);\n    const iconOn = useStateOrObject<string>(indicator.iconOn, stateOrObjectHandler);\n    const color = useStateOrObject<string>(indicator.color, stateOrObjectHandler);\n    const colorOn = useStateOrObject<string>(indicator.colorOn, stateOrObjectHandler);\n    const text = useStateOrObject<ioBroker.StringOrTranslated>(indicator.text, stateOrObjectHandler);\n\n    // An indicator without a value is a static icon and is always visible. With a value, it is hidden\n    // while the value is \"empty\" - the numeric 0 counts as a value and stays visible.\n    if (indicator.value !== undefined && indicator.hideIfEmpty !== false) {\n        if (value === undefined || value === null || value === '' || value === false) {\n            return null;\n        }\n    }\n\n    const on = !!value;\n    const level = indicator.levels ? findLevel(indicator.levels, value) : undefined;\n\n    const iconName = level?.icon ?? (on ? (iconOn ?? icon) : icon);\n    const colorName = level?.color ?? (on ? (colorOn ?? color) : color);\n    const resolvedColor = getIndicatorColor(colorName, props.theme) || props.defaultColor;\n\n    const levelText = level?.text ?? text;\n    let label = levelText !== undefined ? getTranslation(levelText) : indicator.showValue ? String(value ?? '') : '';\n    if (label && indicator.unit) {\n        label += ` ${indicator.unit}`;\n    }\n\n    const tooltipSource = level?.tooltip ?? indicator.tooltip;\n    const tooltip = tooltipSource ? getTranslation(tooltipSource) : '';\n\n    // Only fall back to the \"question mark\" icon if the indicator shows nothing else at all\n    const iconElement = iconName || !label ? renderIcon(iconName, resolvedColor) : null;\n\n    const content = (\n        <div style={styles.content}>\n            {iconElement}\n            {label ? <p style={{ ...styles.text, color: resolvedColor }}>{label}</p> : null}\n        </div>\n    );\n\n    let element: React.JSX.Element;\n    if (props.url) {\n        element = (\n            <IconButton\n                size=\"small\"\n                style={{ padding: 2, borderRadius: 4 }}\n                href={props.url}\n                target=\"_blank\"\n                disabled={props.disabled}\n            >\n                {content}\n            </IconButton>\n        );\n    } else if (props.onClick) {\n        element = (\n            <IconButton\n                size=\"small\"\n                style={{ padding: 2, borderRadius: 4 }}\n                disabled={props.disabled}\n                onClick={e => {\n                    // The card itself may react on clicks, so the event must not bubble\n                    e.stopPropagation();\n                    props.onClick?.();\n                }}\n            >\n                {content}\n            </IconButton>\n        );\n    } else {\n        element = content;\n    }\n\n    if (!tooltip) {\n        return element;\n    }\n\n    return (\n        <Tooltip\n            title={<span style={{ whiteSpace: 'pre-line' }}>{tooltip}</span>}\n            slotProps={{ popper: { sx: styles.tooltip } }}\n        >\n            <span style={{ display: 'inline-flex' }}>{element}</span>\n        </Tooltip>\n    );\n}\n\ninterface StatusIndicatorsProps {\n    indicators?: StatusIndicatorConfig[];\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n    /**\n     * Resolves the click handler for an indicator that references an action. Returns `undefined`\n     * if the referenced action does not exist - the indicator stays a pure display element then.\n     */\n    resolveAction?: (actionId: string) => { onClick?: () => void; url?: string; disabled?: boolean } | undefined;\n    disabled?: boolean;\n    defaultColor?: string;\n    style?: React.CSSProperties;\n    /** Additional elements rendered in the same line (e.g. actions with `placement: 'status'`) */\n    children?: React.ReactNode;\n}\n\n/**\n * The line of custom status indicators.\n *\n * The line wraps if it does not fit, so an arbitrary number of indicators can be shown without\n * cutting anything off.\n */\nexport function StatusIndicators(props: StatusIndicatorsProps): React.JSX.Element | null {\n    const indicators = props.indicators?.length\n        ? [...props.indicators].sort((a, b) => (a.order ?? 100) - (b.order ?? 100))\n        : [];\n\n    if (!indicators.length && !props.children) {\n        return null;\n    }\n\n    return (\n        <div style={{ ...styles.row, ...props.style }}>\n            {indicators.map(indicator => {\n                const action = indicator.actionId ? props.resolveAction?.(indicator.actionId) : undefined;\n\n                return (\n                    <StatusIndicator\n                        key={indicator.id}\n                        indicator={indicator}\n                        theme={props.theme}\n                        stateOrObjectHandler={props.stateOrObjectHandler}\n                        onClick={action?.onClick}\n                        url={action?.url}\n                        disabled={props.disabled || action?.disabled}\n                        defaultColor={props.defaultColor}\n                    />\n                );\n            })}\n            {props.children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"StatusIndicator.js","sourceRoot":"./src/","sources":["StatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type { IobTheme } from '@iobroker/gui-components';\n\nimport { useStateOrObject } from './hooks';\nimport type { StatusIndicator as StatusIndicatorConfig, StatusIndicatorLevel } from './protocol/api';\nimport type { StateOrObjectHandler } from './StateOrObjectHandler';\nimport StatusPill from './StatusPill';\nimport { getIndicatorColor, getTranslation, renderIcon } from './Utils';\n\nconst styles: Record<string, React.CSSProperties> = {\n    tooltipText: {\n        whiteSpace: 'pre-line',\n    },\n    row: {\n        display: 'flex',\n        alignItems: 'center',\n        flexWrap: 'wrap',\n        gap: 4,\n    },\n};\n\n/**\n * Find the first matching level for the given value.\n *\n * A level matches if its `value` equals the current value, if the numeric value lies within\n * `min`/`max` (both inclusive) or if the level defines no condition at all (catch-all).\n */\nfunction findLevel(\n    levels: StatusIndicatorLevel[],\n    value: string | number | boolean | undefined,\n): StatusIndicatorLevel | undefined {\n    for (const level of levels) {\n        if (level.value !== undefined) {\n            if (level.value === value) {\n                return level;\n            }\n            continue;\n        }\n        if (level.min !== undefined || level.max !== undefined) {\n            if (typeof value !== 'number') {\n                continue;\n            }\n            if (level.min !== undefined && value < level.min) {\n                continue;\n            }\n            if (level.max !== undefined && value > level.max) {\n                continue;\n            }\n            return level;\n        }\n        // no condition => catch-all\n        return level;\n    }\n\n    return undefined;\n}\n\ninterface StatusIndicatorProps {\n    indicator: StatusIndicatorConfig;\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n    /** Called when the indicator is clicked. If not provided, the indicator is not clickable */\n    onClick?: () => void;\n    /** If the referenced action opens a URL instead of calling the backend */\n    url?: string;\n    disabled?: boolean;\n    /** Color used if the indicator does not define one itself (e.g. white in the toolbar) */\n    defaultColor?: string;\n}\n\n/**\n * A single custom status indicator.\n *\n * Every visual property may be bound to a state or an object, so the indicator follows its value\n * live. The optional `levels` list maps value ranges to icon, color and text.\n */\nexport default function StatusIndicator(props: StatusIndicatorProps): React.JSX.Element | null {\n    const { indicator, stateOrObjectHandler } = props;\n\n    const value = useStateOrObject<string | number | boolean>(indicator.value, stateOrObjectHandler);\n    const icon = useStateOrObject<string>(indicator.icon, stateOrObjectHandler);\n    const iconOn = useStateOrObject<string>(indicator.iconOn, stateOrObjectHandler);\n    const color = useStateOrObject<string>(indicator.color, stateOrObjectHandler);\n    const colorOn = useStateOrObject<string>(indicator.colorOn, stateOrObjectHandler);\n    const text = useStateOrObject<ioBroker.StringOrTranslated>(indicator.text, stateOrObjectHandler);\n\n    // An indicator without a value is a static icon and is always visible. With a value, it is hidden\n    // while the value is \"empty\" - the numeric 0 counts as a value and stays visible.\n    if (indicator.value !== undefined && indicator.hideIfEmpty !== false) {\n        if (value === undefined || value === null || value === '' || value === false) {\n            return null;\n        }\n    }\n\n    const on = !!value;\n    const level = indicator.levels ? findLevel(indicator.levels, value) : undefined;\n\n    const iconName = level?.icon ?? (on ? (iconOn ?? icon) : icon);\n    const colorName = level?.color ?? (on ? (colorOn ?? color) : color);\n    const resolvedColor = getIndicatorColor(colorName, props.theme) || props.defaultColor;\n\n    const levelText = level?.text ?? text;\n    let label = levelText !== undefined ? getTranslation(levelText) : indicator.showValue ? String(value ?? '') : '';\n    if (label && indicator.unit) {\n        label += ` ${indicator.unit}`;\n    }\n\n    const tooltipSource = level?.tooltip ?? indicator.tooltip;\n    const tooltip = tooltipSource ? getTranslation(tooltipSource) : '';\n\n    // An indicator in the color \"error\" or \"warning\" needs attention: its pill is tinted like the built-in ones\n    const tone = colorName === 'error' ? 'err' : colorName === 'warning' ? 'warn' : undefined;\n\n    // Only fall back to the \"question mark\" icon if the indicator shows nothing else at all\n    const iconElement = iconName || !label ? renderIcon(iconName, tone ? undefined : resolvedColor) : null;\n\n    return (\n        <StatusPill\n            tone={tone}\n            color={tone ? undefined : resolvedColor}\n            tooltip={tooltip ? <span style={styles.tooltipText}>{tooltip}</span> : undefined}\n            href={props.url}\n            onClick={props.url ? undefined : props.onClick}\n            disabled={props.disabled}\n        >\n            {iconElement}\n            {label ? <span>{label}</span> : null}\n        </StatusPill>\n    );\n}\n\ninterface StatusIndicatorsProps {\n    indicators?: StatusIndicatorConfig[];\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n    /**\n     * Resolves the click handler for an indicator that references an action. Returns `undefined`\n     * if the referenced action does not exist - the indicator stays a pure display element then.\n     */\n    resolveAction?: (actionId: string) => { onClick?: () => void; url?: string; disabled?: boolean } | undefined;\n    disabled?: boolean;\n    defaultColor?: string;\n    style?: React.CSSProperties;\n    /** Additional elements rendered in the same line (e.g. actions with `placement: 'status'`) */\n    children?: React.ReactNode;\n}\n\n/**\n * The line of custom status indicators.\n *\n * The line wraps if it does not fit, so an arbitrary number of indicators can be shown without\n * cutting anything off.\n */\nexport function StatusIndicators(props: StatusIndicatorsProps): React.JSX.Element | null {\n    const indicators = props.indicators?.length\n        ? [...props.indicators].sort((a, b) => (a.order ?? 100) - (b.order ?? 100))\n        : [];\n\n    if (!indicators.length && !props.children) {\n        return null;\n    }\n\n    return (\n        <div style={{ ...styles.row, ...props.style }}>\n            {indicators.map(indicator => {\n                const action = indicator.actionId ? props.resolveAction?.(indicator.actionId) : undefined;\n\n                return (\n                    <StatusIndicator\n                        key={indicator.id}\n                        indicator={indicator}\n                        theme={props.theme}\n                        stateOrObjectHandler={props.stateOrObjectHandler}\n                        onClick={action?.onClick}\n                        url={action?.url}\n                        disabled={props.disabled || action?.disabled}\n                        defaultColor={props.defaultColor}\n                    />\n                );\n            })}\n            {props.children}\n        </div>\n    );\n}\n"]}

package/build/StatusPill.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type PillTone } from './styles';
+interface StatusPillProps {
+    /** Tints the pill with this color: the value needs attention. Without it the pill is neutral. */
+    tone?: PillTone;
+    tooltip?: React.ReactNode;
+    /** The pill becomes a button */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Opens the URL instead */
+    href?: string;
+    disabled?: boolean;
+    /** Text color (e.g. the color of a custom indicator), if the pill has no tone */
+    color?: string;
+    children: React.ReactNode;
+}
+/** One value of the status line: an icon and an optional short text */
+export default function StatusPill(props: StatusPillProps): React.JSX.Element;
+export {};

package/build/StatusPill.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ButtonBase, Tooltip } from '@mui/material';
+import { toneStyle, useDmStyles } from './styles';
+const tooltipSlotProps = { popper: { sx: { pointerEvents: 'none' } } };
+/** One value of the status line: an icon and an optional short text */
+export default function StatusPill(props) {
+    useDmStyles();
+    const className = `dm-pill${props.tone ? ' dm-pill-tone' : ''}`;
+    const style = props.tone ? toneStyle(props.tone) : props.color ? { color: props.color } : undefined;
+    let pill;
+    if (props.href) {
+        pill = (React.createElement(ButtonBase, { component: "a", className: `${className} dm-pill-btn`, style: style, disabled: props.disabled, href: props.href, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation() }, props.children));
+    }
+    else if (props.onClick) {
+        pill = (React.createElement(ButtonBase, { className: `${className} dm-pill-btn`, style: style, disabled: props.disabled, onClick: (e) => {
+                // The card around may react to clicks too
+                e.stopPropagation();
+                props.onClick(e);
+            } }, props.children));
+    }
+    else {
+        pill = (React.createElement("span", { className: className, style: style }, props.children));
+    }
+    if (!props.tooltip) {
+        return pill;
+    }
+    return (React.createElement(Tooltip, { title: props.tooltip, slotProps: tooltipSlotProps },
+        React.createElement("span", { className: "dm-pill-wrap" }, pill)));
+}
+//# sourceMappingURL=StatusPill.js.map

package/build/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sourceRoot":"./src/","sources":["StatusPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAiB,MAAM,UAAU,CAAC;AAgBjE,MAAM,gBAAgB,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;AAEvE,uEAAuE;AACvE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACrD,WAAW,EAAE,CAAC;IACd,MAAM,SAAS,GAAG,UAAU,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAChE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpG,IAAI,IAAuB,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACb,IAAI,GAAG,CACH,oBAAC,UAAU,IACP,SAAS,EAAC,GAAG,EACb,SAAS,EAAE,GAAG,SAAS,cAAc,EACrC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,IAEpD,KAAK,CAAC,QAAQ,CACN,CAChB,CAAC;IACN,CAAC;SAAM,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QACvB,IAAI,GAAG,CACH,oBAAC,UAAU,IACP,SAAS,EAAE,GAAG,SAAS,cAAc,EACrC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;gBAChD,0CAA0C;gBAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,KAAK,CAAC,OAAQ,CAAC,CAAC,CAAC,CAAC;YACtB,CAAC,IAEA,KAAK,CAAC,QAAQ,CACN,CAChB,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,IAAI,GAAG,CACH,8BACI,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IAEX,KAAK,CAAC,QAAQ,CACZ,CACV,CAAC;IACN,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,oBAAC,OAAO,IACJ,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,SAAS,EAAE,gBAAgB;QAG3B,8BAAM,SAAS,EAAC,cAAc,IAAE,IAAI,CAAQ,CACtC,CACb,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport { ButtonBase, Tooltip } from '@mui/material';\n\nimport { toneStyle, useDmStyles, type PillTone } from './styles';\n\ninterface StatusPillProps {\n    /** Tints the pill with this color: the value needs attention. Without it the pill is neutral. */\n    tone?: PillTone;\n    tooltip?: React.ReactNode;\n    /** The pill becomes a button */\n    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n    /** Opens the URL instead */\n    href?: string;\n    disabled?: boolean;\n    /** Text color (e.g. the color of a custom indicator), if the pill has no tone */\n    color?: string;\n    children: React.ReactNode;\n}\n\nconst tooltipSlotProps = { popper: { sx: { pointerEvents: 'none' } } };\n\n/** One value of the status line: an icon and an optional short text */\nexport default function StatusPill(props: StatusPillProps): React.JSX.Element {\n    useDmStyles();\n    const className = `dm-pill${props.tone ? ' dm-pill-tone' : ''}`;\n    const style = props.tone ? toneStyle(props.tone) : props.color ? { color: props.color } : undefined;\n\n    let pill: React.JSX.Element;\n    if (props.href) {\n        pill = (\n            <ButtonBase\n                component=\"a\"\n                className={`${className} dm-pill-btn`}\n                style={style}\n                disabled={props.disabled}\n                href={props.href}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                onClick={(e: React.MouseEvent) => e.stopPropagation()}\n            >\n                {props.children}\n            </ButtonBase>\n        );\n    } else if (props.onClick) {\n        pill = (\n            <ButtonBase\n                className={`${className} dm-pill-btn`}\n                style={style}\n                disabled={props.disabled}\n                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                    // The card around may react to clicks too\n                    e.stopPropagation();\n                    props.onClick!(e);\n                }}\n            >\n                {props.children}\n            </ButtonBase>\n        );\n    } else {\n        pill = (\n            <span\n                className={className}\n                style={style}\n            >\n                {props.children}\n            </span>\n        );\n    }\n\n    if (!props.tooltip) {\n        return pill;\n    }\n\n    return (\n        <Tooltip\n            title={props.tooltip}\n            slotProps={tooltipSlotProps}\n        >\n            {/* A disabled button gets no mouse events, so the tooltip needs an element around it */}\n            <span className=\"dm-pill-wrap\">{pill}</span>\n        </Tooltip>\n    );\n}\n"]}

package/build/Switch.d.ts

@@ -9,8 +9,11 @@ interface SwitchProps {
     labelOff?: string;
     size?: 'small';
     disabled?: boolean;
+    /** Accessible name */
+    ariaLabel?: string;
 }
 export default class Switch extends Component<SwitchProps> {
+    private toggle;
     render(): React.JSX.Element;
 }
 export {};

package/build/Switch.js

@@ -3,46 +3,56 @@ const WIDTH = 34;
 const HANDLE_SIZE = 20;
 const WIDTH_SMALL = 30;
 const HANDLE_SIZE_SMALL = 15;
+/** The handle overshoots a little, as if it snapped into place */
+const SNAP = 'cubic-bezier(0.3, 1.5, 0.5, 1)';
 export default class Switch extends Component {
+    toggle(e) {
+        if (this.props.disabled) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        this.props.onChange(!this.props.checked);
+    }
     render() {
-        const sw = (React.createElement("div", { style: {
-                width: this.props.size === 'small' ? WIDTH_SMALL : WIDTH,
+        const small = this.props.size === 'small';
+        const width = small ? WIDTH_SMALL : WIDTH;
+        const handle = small ? HANDLE_SIZE_SMALL : HANDLE_SIZE;
+        const primary = this.props.theme.palette.primary.main;
+        const sw = (React.createElement("div", { role: "switch", className: "dm-switch", "aria-checked": this.props.checked, "aria-disabled": this.props.disabled || undefined, "aria-label": this.props.ariaLabel, tabIndex: this.props.disabled ? -1 : 0, style: {
+                width,
                 height: HANDLE_SIZE,
                 display: 'flex',
                 alignItems: 'center',
-                cursor: 'pointer',
+                cursor: this.props.disabled ? 'default' : 'pointer',
                 position: 'relative',
-                opacity: this.props.disabled ? 0.7 : 1,
-            }, onClick: e => {
-                if (this.props.disabled) {
-                    return;
+                opacity: this.props.disabled ? 0.6 : 1,
+                borderRadius: HANDLE_SIZE / 2,
+                outlineOffset: 2,
+                ...this.props.style,
+            }, onClick: e => this.toggle(e), onKeyDown: e => {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    this.toggle(e);
                 }
-                e.stopPropagation();
-                e.preventDefault();
-                this.props.onChange(!this.props.checked);
             } },
             React.createElement("div", { style: {
                     borderRadius: 15,
                     width: '100%',
-                    height: (this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE) * 0.7,
-                    opacity: 0.6,
-                    backgroundColor: this.props.checked
-                        ? this.props.theme.palette.primary.main
-                        : this.props.theme.palette.text.disabled,
+                    height: handle * 0.7,
+                    opacity: this.props.checked ? 0.5 : 0.6,
+                    backgroundColor: this.props.checked ? primary : this.props.theme.palette.text.disabled,
+                    transition: 'background-color 0.25s, opacity 0.25s',
                 } }),
             React.createElement("div", { style: {
                     position: 'absolute',
-                    top: this.props.size === 'small' ? (HANDLE_SIZE - HANDLE_SIZE_SMALL) / 2 : 0,
-                    left: this.props.checked
-                        ? this.props.size === 'small'
-                            ? WIDTH_SMALL - HANDLE_SIZE_SMALL
-                            : WIDTH - HANDLE_SIZE
-                        : 0,
-                    transition: 'left 0.2s',
-                    borderRadius: 50,
-                    width: this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE,
-                    height: this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE,
-                    backgroundColor: this.props.checked ? this.props.theme.palette.primary.main : '#EEE',
+                    top: small ? (HANDLE_SIZE - HANDLE_SIZE_SMALL) / 2 : 0,
+                    left: 0,
+                    transform: `translateX(${this.props.checked ? width - handle : 0}px)`,
+                    transition: `transform 0.3s ${SNAP}, background-color 0.25s`,
+                    borderRadius: '50%',
+                    width: handle,
+                    height: handle,
+                    backgroundColor: this.props.checked ? primary : '#EEE',
                     boxShadow: 'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
                 } })));
         if (this.props.labelOn || this.props.labelOff) {

package/build/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"./src/","sources":["Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAczC,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,SAAsB;IACtD,MAAM;QACF,MAAM,EAAE,GAAG,CACP,6BACI,KAAK,EAAE;gBACH,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK;gBACxD,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACzC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE;gBACT,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACtB,OAAO;gBACX,CAAC;gBACD,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC7C,CAAC;YAED,6BACI,KAAK,EAAE;oBACH,YAAY,EAAE,EAAE;oBAChB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,GAAG;oBAC7E,OAAO,EAAE,GAAG;oBACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;wBAC/B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;wBACvC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;iBAC/C,GACH;YACF,6BACI,KAAK,EAAE;oBACH,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC5E,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;wBACpB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO;4BACzB,CAAC,CAAC,WAAW,GAAG,iBAAiB;4BACjC,CAAC,CAAC,KAAK,GAAG,WAAW;wBACzB,CAAC,CAAC,CAAC;oBACP,UAAU,EAAE,WAAW;oBACvB,YAAY,EAAE,EAAE;oBAChB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;oBACpE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;oBACrE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;oBACpF,SAAS,EACL,+GAA+G;iBACtH,GACH,CACA,CACT,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5C,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;gBACxD,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACnB,EAAE;gBACF,IAAI,CAAC,KAAK,CAAC,OAAO,CACjB,CACT,CAAC;QACN,CAAC;QAED,OAAO,EAAE,CAAC;IACd,CAAC;CACJ","sourcesContent":["import React, { Component } from 'react';\nimport { type IobTheme } from '@iobroker/gui-components';\n\ninterface SwitchProps {\n    checked: boolean;\n    style?: React.CSSProperties;\n    onChange: (checked: boolean) => void;\n    theme: IobTheme;\n    labelOn?: string;\n    labelOff?: string;\n    size?: 'small';\n    disabled?: boolean;\n}\n\nconst WIDTH = 34;\nconst HANDLE_SIZE = 20;\nconst WIDTH_SMALL = 30;\nconst HANDLE_SIZE_SMALL = 15;\n\nexport default class Switch extends Component<SwitchProps> {\n    render(): React.JSX.Element {\n        const sw = (\n            <div\n                style={{\n                    width: this.props.size === 'small' ? WIDTH_SMALL : WIDTH,\n                    height: HANDLE_SIZE,\n                    display: 'flex',\n                    alignItems: 'center',\n                    cursor: 'pointer',\n                    position: 'relative',\n                    opacity: this.props.disabled ? 0.7 : 1,\n                }}\n                onClick={e => {\n                    if (this.props.disabled) {\n                        return;\n                    }\n                    e.stopPropagation();\n                    e.preventDefault();\n                    this.props.onChange(!this.props.checked);\n                }}\n            >\n                <div\n                    style={{\n                        borderRadius: 15,\n                        width: '100%',\n                        height: (this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE) * 0.7,\n                        opacity: 0.6,\n                        backgroundColor: this.props.checked\n                            ? this.props.theme.palette.primary.main\n                            : this.props.theme.palette.text.disabled,\n                    }}\n                />\n                <div\n                    style={{\n                        position: 'absolute',\n                        top: this.props.size === 'small' ? (HANDLE_SIZE - HANDLE_SIZE_SMALL) / 2 : 0,\n                        left: this.props.checked\n                            ? this.props.size === 'small'\n                                ? WIDTH_SMALL - HANDLE_SIZE_SMALL\n                                : WIDTH - HANDLE_SIZE\n                            : 0,\n                        transition: 'left 0.2s',\n                        borderRadius: 50,\n                        width: this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE,\n                        height: this.props.size === 'small' ? HANDLE_SIZE_SMALL : HANDLE_SIZE,\n                        backgroundColor: this.props.checked ? this.props.theme.palette.primary.main : '#EEE',\n                        boxShadow:\n                            'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',\n                    }}\n                />\n            </div>\n        );\n\n        if (this.props.labelOn || this.props.labelOff) {\n            return (\n                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>\n                    {this.props.labelOff}\n                    {sw}\n                    {this.props.labelOn}\n                </div>\n            );\n        }\n\n        return sw;\n    }\n}\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"./src/","sources":["Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport { type IobTheme } from '@iobroker/gui-components';\n\ninterface SwitchProps {\n    checked: boolean;\n    style?: React.CSSProperties;\n    onChange: (checked: boolean) => void;\n    theme: IobTheme;\n    labelOn?: string;\n    labelOff?: string;\n    size?: 'small';\n    disabled?: boolean;\n    /** Accessible name */\n    ariaLabel?: string;\n}\n\nconst WIDTH = 34;\nconst HANDLE_SIZE = 20;\nconst WIDTH_SMALL = 30;\nconst HANDLE_SIZE_SMALL = 15;\n\n/** The handle overshoots a little, as if it snapped into place */\nconst SNAP = 'cubic-bezier(0.3, 1.5, 0.5, 1)';\n\nexport default class Switch extends Component<SwitchProps> {\n    private toggle(e: React.SyntheticEvent): void {\n        if (this.props.disabled) {\n            return;\n        }\n        e.stopPropagation();\n        e.preventDefault();\n        this.props.onChange(!this.props.checked);\n    }\n\n    render(): React.JSX.Element {\n        const small = this.props.size === 'small';\n        const width = small ? WIDTH_SMALL : WIDTH;\n        const handle = small ? HANDLE_SIZE_SMALL : HANDLE_SIZE;\n        const primary = this.props.theme.palette.primary.main;\n\n        const sw = (\n            <div\n                role=\"switch\"\n                className=\"dm-switch\"\n                aria-checked={this.props.checked}\n                aria-disabled={this.props.disabled || undefined}\n                aria-label={this.props.ariaLabel}\n                tabIndex={this.props.disabled ? -1 : 0}\n                style={{\n                    width,\n                    height: HANDLE_SIZE,\n                    display: 'flex',\n                    alignItems: 'center',\n                    cursor: this.props.disabled ? 'default' : 'pointer',\n                    position: 'relative',\n                    opacity: this.props.disabled ? 0.6 : 1,\n                    borderRadius: HANDLE_SIZE / 2,\n                    outlineOffset: 2,\n                    ...this.props.style,\n                }}\n                onClick={e => this.toggle(e)}\n                onKeyDown={e => {\n                    if (e.key === ' ' || e.key === 'Enter') {\n                        this.toggle(e);\n                    }\n                }}\n            >\n                <div\n                    style={{\n                        borderRadius: 15,\n                        width: '100%',\n                        height: handle * 0.7,\n                        opacity: this.props.checked ? 0.5 : 0.6,\n                        backgroundColor: this.props.checked ? primary : this.props.theme.palette.text.disabled,\n                        transition: 'background-color 0.25s, opacity 0.25s',\n                    }}\n                />\n                <div\n                    style={{\n                        position: 'absolute',\n                        top: small ? (HANDLE_SIZE - HANDLE_SIZE_SMALL) / 2 : 0,\n                        left: 0,\n                        transform: `translateX(${this.props.checked ? width - handle : 0}px)`,\n                        transition: `transform 0.3s ${SNAP}, background-color 0.25s`,\n                        borderRadius: '50%',\n                        width: handle,\n                        height: handle,\n                        backgroundColor: this.props.checked ? primary : '#EEE',\n                        boxShadow:\n                            'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',\n                    }}\n                />\n            </div>\n        );\n\n        if (this.props.labelOn || this.props.labelOff) {\n            return (\n                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>\n                    {this.props.labelOff}\n                    {sw}\n                    {this.props.labelOn}\n                </div>\n            );\n        }\n\n        return sw;\n    }\n}\n"]}

package/build/Utils.js

@@ -1,6 +1,26 @@
 import React from 'react';
-import { Add, Article, BatteryAlert, BatteryChargingFull, BatteryFull, Bluetooth, BluetoothDisabled, Delete, Edit, FastForward, FastRewind, Fluorescent, Group, Info, Lightbulb, Link as LinkIcon, LinkOff, NotListedLocation, Pause, Person, PlayArrow, Power, QrCode, QuestionMark, Refresh, Search, Settings, Stop, Visibility, Upgrade, WbIncandescent, Wifi, WifiOff, Launch, } from '@mui/icons-material';
-import { I18n, Icon } from '@iobroker/gui-components';
+import { Add, Article, BatteryAlert, BatteryChargingFull, BatteryFull, Bluetooth, BluetoothDisabled, Edit, FastForward, FastRewind, Fluorescent, Group, Info, Lightbulb, Link as LinkIcon, LinkOff, NotListedLocation, Pause, Person, PlayArrow, Power, QrCode, QuestionMark, Refresh, Search, Settings, Stop, Visibility, Upgrade, WbIncandescent, Wifi, WifiOff, Launch, } from '@mui/icons-material';
+import { I18n, Icon, IconPlayPause, IconTrash } from '@iobroker/gui-components';
+/**
+ * Class of an action symbol that shows what its button does while the mouse is over the button
+ * (see `styles.ts`): the gear turns, the pen writes, the lamp glows...
+ */
+const HOVER = {
+    spin: 'dm-ani dm-ani-spin',
+    gear: 'dm-ani dm-ani-gear',
+    turn: 'dm-ani dm-ani-turn',
+    pen: 'dm-ani dm-ani-pen',
+    hop: 'dm-ani dm-ani-hop',
+    search: 'dm-ani dm-ani-search',
+    nudge: 'dm-ani dm-ani-nudge',
+    launch: 'dm-ani dm-ani-launch',
+    glow: 'dm-ani dm-ani-glow',
+    tick: 'dm-ani dm-ani-tick',
+};
+/** An MUI icon with the given hover animation */
+function animated(IconComponent, hover, color) {
+    return (React.createElement(IconComponent, { className: hover, style: { color } }));
+}
 /**
  * Get Icon by font-awesome name. Do not use these names, use names from getIconByName
  *
@@ -31,19 +51,20 @@ function getFaIcon(icon, color) {
         .map(s => s.trim())
         .filter(s => s !== 'fa-solid');
     if (iconStyle.includes('fa-trash-can') || iconStyle.includes('fa-trash')) {
-        return React.createElement(Delete, { style: { color } });
+        // The lid opens while the mouse is over the button
+        return React.createElement(IconTrash, { style: { color } });
     }
     if (iconStyle.includes('fa-pen')) {
-        return React.createElement(Edit, { style: { color } });
+        return animated(Edit, HOVER.pen, color);
     }
     if (iconStyle.includes('fa-redo-alt')) {
-        return React.createElement(Refresh, { style: { color } });
+        return animated(Refresh, HOVER.spin, color);
     }
     if (iconStyle.includes('fa-plus')) {
-        return React.createElement(Add, { style: { color } });
+        return animated(Add, HOVER.turn, color);
     }
     if (iconStyle.includes('fa-qrcode') || iconStyle.includes('qrcode')) {
-        return React.createElement(QrCode, { style: { color } });
+        return animated(QrCode, HOVER.tick, color);
     }
     if (iconStyle.includes('fa-wifi')) {
         return React.createElement(Wifi, { style: { color } });
@@ -58,10 +79,10 @@ function getFaIcon(icon, color) {
         return React.createElement(BluetoothDisabled, { style: { color } });
     }
     if (iconStyle.includes('fa-eye')) {
-        return React.createElement(Visibility, { style: { color } });
+        return animated(Visibility, HOVER.tick, color);
     }
     if (iconStyle.includes('fa-search')) {
-        return React.createElement(Search, { style: { color } });
+        return animated(Search, HOVER.search, color);
     }
     if (iconStyle.includes('fa-unlink')) {
         return React.createElement(LinkOff, { style: { color } });
@@ -70,10 +91,10 @@ function getFaIcon(icon, color) {
         return React.createElement(LinkIcon, { style: { color } });
     }
     if (iconStyle.includes('fa-search-location')) {
-        return React.createElement(NotListedLocation, { style: { color } });
+        return animated(NotListedLocation, HOVER.hop, color);
     }
     if (iconStyle.includes('fa-play')) {
-        return React.createElement(PlayArrow, { style: { color } });
+        return animated(PlayArrow, HOVER.nudge, color);
     }
     if (iconStyle.includes('fa-stop')) {
         return React.createElement(Stop, { style: { color } });
@@ -120,93 +141,90 @@ function getFaIcon(icon, color) {
  * @param noDefaultIcon if true, no "question mark" icon will be returned for unknown names
  */
 function getIconByName(name, altName, color, noDefaultIcon) {
-    if (name === 'edit' || name === 'rename' || altName === 'edit' || altName === 'rename') {
-        return React.createElement(Edit, { style: { color } });
+    const is = (...names) => names.includes(name) || (!!altName && names.includes(altName));
+    if (is('edit', 'rename')) {
+        return animated(Edit, HOVER.pen, color);
     }
-    if (name === 'delete' || altName === 'delete') {
-        return React.createElement(Delete, { style: { color } });
+    if (is('delete')) {
+        // The lid opens while the mouse is over the button
+        return React.createElement(IconTrash, { style: { color } });
     }
-    if (name === 'refresh' || altName === 'refresh') {
-        return React.createElement(Refresh, { style: { color } });
+    if (is('refresh')) {
+        return animated(Refresh, HOVER.spin, color);
     }
-    if (name === 'newDevice' ||
-        name === 'new' ||
-        name === 'add' ||
-        altName === 'newDevice' ||
-        altName === 'new' ||
-        altName === 'add') {
-        return React.createElement(Add, { style: { color } });
+    if (is('newDevice', 'new', 'add')) {
+        return animated(Add, HOVER.turn, color);
     }
-    if (name === 'discover' || name === 'search' || altName === 'discover' || altName === 'search') {
-        return React.createElement(Search, { style: { color } });
+    if (is('discover', 'search')) {
+        return animated(Search, HOVER.search, color);
     }
-    if (name === 'unpairDevice' || name === 'unpair' || altName === 'unpairDevice' || altName === 'unpair') {
+    if (is('unpairDevice', 'unpair')) {
         return React.createElement(LinkOff, { style: { color } });
     }
-    if (name === 'pairDevice' || name === 'pair' || altName === 'pairDevice' || altName === 'pair') {
+    if (is('pairDevice', 'pair')) {
         return React.createElement(LinkIcon, { style: { color } });
     }
-    if (name === 'identify' || altName === 'identify') {
-        return React.createElement(NotListedLocation, { style: { color } });
+    if (is('identify')) {
+        return animated(NotListedLocation, HOVER.hop, color);
     }
-    if (name === 'play' || altName === 'play') {
-        return React.createElement(PlayArrow, { style: { color } });
+    if (is('play')) {
+        return animated(PlayArrow, HOVER.nudge, color);
     }
-    if (name === 'stop' || altName === 'stop') {
+    if (is('stop')) {
         return React.createElement(Stop, { style: { color } });
     }
-    if (name === 'pause' || altName === 'pause') {
+    if (is('pause')) {
         return React.createElement(Pause, { style: { color } });
     }
-    if (name === 'forward' || name === 'next' || altName === 'forward' || altName === 'next') {
-        return React.createElement(FastForward, { style: { color } });
+    if (is('forward', 'next')) {
+        return animated(FastForward, HOVER.nudge, color);
     }
-    if (name === 'rewind' || name === 'previous' || altName === 'rewind' || altName === 'previous') {
+    if (is('rewind', 'previous')) {
         return React.createElement(FastRewind, { style: { color } });
     }
-    if (name === 'lamp' || name === 'light' || altName === 'lamp' || altName === 'light') {
-        return React.createElement(Lightbulb, { style: { color } });
+    if (is('lamp', 'light')) {
+        return animated(Lightbulb, HOVER.glow, color);
     }
-    if (name === 'backlight' || altName === 'backlight') {
-        return React.createElement(Fluorescent, { style: { color } });
+    if (is('backlight')) {
+        return animated(Fluorescent, HOVER.glow, color);
     }
-    if (name === 'dimmer' || altName === 'dimmer') {
-        return React.createElement(WbIncandescent, { style: { color } });
+    if (is('dimmer')) {
+        return animated(WbIncandescent, HOVER.glow, color);
     }
-    if (name === 'socket' || altName === 'socket') {
+    if (is('socket')) {
         return React.createElement(Power, { style: { color } });
     }
-    if (name === 'settings' || altName === 'settings') {
-        return React.createElement(Settings, { style: { color } });
+    if (is('settings')) {
+        return animated(Settings, HOVER.gear, color);
     }
-    if (name === 'users' || name === 'group' || altName === 'users' || altName === 'group') {
+    if (is('users', 'group')) {
         return React.createElement(Group, { style: { color } });
     }
-    if (name === 'user' || altName === 'user') {
+    if (is('user')) {
         return React.createElement(Person, { style: { color } });
     }
-    if (name === 'update' || altName === 'update') {
-        return React.createElement(Upgrade, { style: { color } });
+    if (is('update')) {
+        return animated(Upgrade, HOVER.hop, color);
     }
-    if (name === 'qrcode' || altName === 'qrcode') {
-        return React.createElement(QrCode, { style: { color } });
+    if (is('qrcode')) {
+        return animated(QrCode, HOVER.tick, color);
     }
-    if (name === 'info' || altName === 'info') {
-        return React.createElement(Info, { style: { color } });
+    if (is('info')) {
+        return animated(Info, HOVER.tick, color);
     }
-    if (name === 'lines' || altName === 'lines') {
+    if (is('lines')) {
         return React.createElement(Article, { style: { color } });
     }
-    if (name === 'web' || altName === 'web') {
-        return React.createElement(Launch, { style: { color } });
+    if (is('web')) {
+        return animated(Launch, HOVER.launch, color);
     }
-    if (name === 'battery' || altName === 'battery') {
+    if (is('battery')) {
         return React.createElement(BatteryFull, { style: { color } });
     }
-    if (name === 'batteryLow' || name === 'batteryAlert' || altName === 'batteryLow' || altName === 'batteryAlert') {
+    if (is('batteryLow', 'batteryAlert')) {
         return React.createElement(BatteryAlert, { style: { color } });
     }
-    if (name === 'batteryCharging' || altName === 'batteryCharging') {
+    if (is('batteryCharging')) {
         return React.createElement(BatteryChargingFull, { style: { color } });
     }
     if (noDefaultIcon) {
@@ -227,6 +245,20 @@ export function renderControlIcon(action, colors, value, noDefaultIcon) {
             color = colors.secondary;
         }
     }
+    // A play or pause toggle shows what a click does: play while it is stopped, pause while it runs.
+    // The symbol morphs from one into the other.
+    const isPlayPause = 'type' in action &&
+        action.type === 'icon' &&
+        !action.iconOn &&
+        (action.id === 'play' ||
+            action.id === 'pause' ||
+            action.icon === 'play' ||
+            action.icon === 'pause' ||
+            action.icon === 'fa-play' ||
+            action.icon === 'fa-pause');
+    if (isPlayPause) {
+        return (React.createElement(IconPlayPause, { running: !!value, style: { color } }));
+    }
     if (action.icon?.startsWith('fa-') || action.icon?.startsWith('fas')) {
         return getFaIcon(action.icon, color);
     }