[Styling Module] Room Card Plus #2113

luciotorelli · 2026-01-10T22:45:34Z

luciotorelli
Jan 10, 2026

Room Card Plus

Version: v1.0.0
Creator: Lucio

Support ❤️ https://buymeacoffee.com/luciotorelli

Important

Unsupported cards:

Cover
Climate
Horizontal buttons stack
Media player
Pop-up
Select
Separator

Important

Don't use the new grouping sub-buttons function from Bubble card as the module has its own "how many sub-butttons per row" setting.

I’ve been templating this room-style Bubble Card for a couple of years and decided to share it as a bubble card module.

Room Card Plus focuses on being highly customizable, either statically or through optional conditions:

Title + state layout controls (positioning, spacing, responsive text sizing)
Main icon customization: icon, color, animation, and background (with optional OFF opacity)
Rule-based styling (or static styling) using conditions for icons, colors, backgrounds, and animations
Sub-button layout tweaks (size, gap, radius, number of columns) to fit any dashboard

My favourite feature: replacing the default state with Entity States.
You can pick one or multiple entities and control what shows (text, icon, or both), with per-entity color, animation, ordering, and conditions — perfect for building compact room summaries.

My recommendation: Use the Bubble Card Button State card, set the grid rows to 2.5 and columns to 6. Although I have tried making sure it will work with bigger sizes. Card Type: Button / Button type: State. Have the main icon tap and card tap open do different actions.

Improvements:

Now there's a "drawer/footer" popup that once enabled, any of the bottom sub-buttons added will show up there.

For any issues feel free to open at https://github.com/luciotorelli/room-card-plus/issues and don't forget to support, please!

🧩 Get this Module

Configure this module via the editor (recommended).

To use this module, copy and paste the following configuration into your
/www/bubble/bubble-modules.yaml file:

  name: Room Card Plus
  version: v1.1.0
  creator: Lucio
  link: https://github.com/Clooos/Bubble-Card/discussions/1919
  supported:
    - button
  description: |
    I've been templating this "room" Bubble Card for a couple of years and  decided to share it as a module.

    Room Card Plus focuses on being customizable with optional conditions:
    • Title + state layout controls (positioning, spacing, responsive text sizing)
    • Main icon customization: icon / color / animation / background (with optional OFF opacity)
    • Rule-based styling (or static styling) using conditions for icon, color, background and animations
    • Sub-button layout tweaks (size, gap, radius, how many columns) to fit any dashboard
    • **Footer Drawer**: optionally move sub-buttons into a slide-up drawer with a center-bottom handle

    My favourite feature: replacing the default state with "Entity States" — you can pick one or multiple entities and control what shows (text, icon, or both), plus per-entity color, animation, ordering, and conditions.

      Support: https://buymeacoffee.com/luciotorelli
  code: |
    code: |2-
          .large .bubble-button-card-container {
            --row-size: ${this.config["room-card-plus"]?.rows || 2.5};
            height: calc(var(--row-height) * var(--row-size) + var(--row-gap) * (var(--row-size) - 1)) !important;
          }

          .bubble-background,
          .large .bubble-container {
            border-radius: ${(this.config["room-card-plus"]?.card_radius ?? 22) + 'px'};
          }

          .large .bubble-container { overflow: clip; }

          .bubble-button-card {
            display: grid;
            grid-template-areas:
              "n n n b"
              "s s . b"
              "s s . b"
              "i i . b";
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            justify-items: right;
            align-items: center;
          }

          .bubble-name-container {
            grid-area: n;
            justify-self: start;

            padding-top: ${(this.config["room-card-plus"]?.ts_pad_top ?? 30) + 'px'} !important;
            padding-left: ${(this.config["room-card-plus"]?.ts_pad_left ?? 20) + 'px'} !important;

            margin: 0 !important;
            padding-right: 0 !important;
            padding-bottom: 0 !important;

            height: ${(this.config["room-card-plus"]?.ts_block_height ?? 52) + 'px'} !important;
            max-width: calc(100% - ${(this.config["room-card-plus"]?.title_max_width_offset ?? 20)}%) !important;

            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            gap: ${(this.config["room-card-plus"]?.ts_gap ?? 1) + 'px'} !important;
            overflow: hidden;
          }

          .bubble-name {
            font-weight: 700;
            font-size: clamp(
              ${(this.config["room-card-plus"]?.title_em_mobile ?? 0.8)}em,
              2vw,
              ${(this.config["room-card-plus"]?.title_em_desktop ?? 1.125)}em
            ) !important;
            line-height: 1.1;
            margin: 0 !important;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .bubble-state {
            grid-area: s;
            font-weight: 700;
            font-size: ${(this.config["room-card-plus"]?.state_size_em ?? 0.95)}em !important;
            line-height: 1.1;
            margin: 0 !important;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          /* Main icon color hook (ONLY used when module sets --bubble-icon-color) */
          .bubble-main-icon-container,
          .bubble-icon-container {
            color: var(--bubble-icon-color) !important;
          }

          @keyframes sc_pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
          @keyframes sc_ping  { 0%{transform:scale(1);opacity:1} 70%{transform:scale(1.25);opacity:.2} 100%{transform:scale(1.3);opacity:0} }
          @keyframes sc_spin  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
          @keyframes sc_bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

          .room-card-plus-state-item {
            display: inline-flex;
            align-items: center;
            gap: ${(this.config["room-card-plus"]?.state_icon_gap ?? 1) + 'px'};
            white-space: nowrap;
          }

          .room-card-plus-state-item ha-icon {
            padding-right: 0;
            vertical-align: middle;
            display: inline-block;
          }

          /* ===== Sub-button container (standard, non-footer mode) ===== */
          .bubble-sub-button-container {
            grid-area: b;

            --slim-sb-size: ${(this.config["room-card-plus"]?.sub_button_size ?? 40) + 'px'};
            --slim-sb-gap: ${(this.config["room-card-plus"]?.sub_button_gap ?? 10) + 'px'};
            --slim-sb-radius: ${(this.config["room-card-plus"]?.sub_button_radius ?? 30) + 'px'};
            --slim-sb-per-col: ${(this.config["room-card-plus"]?.sub_buttons_per_column ?? 3)};
            --slim-sb-col-gap: ${(this.config["room-card-plus"]?.sub_button_column_gap ?? 8) + 'px'};
            --slim-sb-left-shift: ${(this.config["room-card-plus"]?.sub_button_left_shift ?? 6) + 'px'};

            display: grid !important;
            grid-auto-flow: column !important;
            grid-template-rows: repeat(var(--slim-sb-per-col), var(--slim-sb-size)) !important;
            grid-auto-columns: var(--slim-sb-size) !important;

            row-gap: var(--slim-sb-gap) !important;
            column-gap: var(--slim-sb-col-gap) !important;

            align-content: center !important;
            justify-content: end !important;

            right: 0 !important;
            max-height: 95%;
            padding-right: 10px;
            transform: translateX(0);
            z-index: auto !important;
          }

          .bubble-sub-button-container:focus-within { z-index: 99 !important; }

          .bubble-sub-button-container.room-card-plus-two-cols {
            transform: translateX(calc(-1 * var(--slim-sb-left-shift)));
          }

          .bubble-sub-button {
            height: var(--slim-sb-size) !important;
            width: var(--slim-sb-size) !important;
            min-width: var(--slim-sb-size) !important;
            border-radius: var(--slim-sb-radius) !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
          }

          .bubble-sub-button.hidden {
            display: none !important;
          }

          /* Optional on/off color overrides for main (top) sub-buttons */
          ${this.config["room-card-plus"]?.main_sb_off_color ? `
          .bubble-sub-button-container .bubble-sub-button.background-off {
            background-color: ${this.config["room-card-plus"].main_sb_off_color} !important;
          }` : ''}
          ${this.config["room-card-plus"]?.main_sb_on_color ? `
          .bubble-sub-button-container .bubble-sub-button.background-on {
            background-color: ${this.config["room-card-plus"].main_sb_on_color} !important;
          }` : ''}

          .bubble-icon-container {
            grid-area: i;

            width: ${(this.config["room-card-plus"]?.icon_width ?? 100) + 'px'} !important;
            height: ${(this.config["room-card-plus"]?.icon_height ?? 60) + 'px'} !important;

            position: absolute !important;
            left: ${(this.config["room-card-plus"]?.icon_left ?? -12) + 'px'} !important;
            bottom: ${(this.config["room-card-plus"]?.icon_bottom ?? -10) + 'px'} !important;
            top: auto !important;

            /* baseline (JS will override with rules + off-opacity) */
            background-color: ${(this.config["room-card-plus"]?.main_icon_bg_color ?? '#ffc47e')} !important;

            transition: background-color 0.3s ease;
          }

          .bubble-icon-container {
            border-radius: ${(() => {
              const s = this.config["room-card-plus"]?.icon_corner_style ?? 'diagonal';
              const r = (this.config["room-card-plus"]?.icon_radius ?? 32);

              const tl = this.config["room-card-plus"]?.icon_radius_tl;
              const tr = this.config["room-card-plus"]?.icon_radius_tr;
              const br = this.config["room-card-plus"]?.icon_radius_br;
              const bl = this.config["room-card-plus"]?.icon_radius_bl;

              const hasCustom = tl !== undefined || tr !== undefined || br !== undefined || bl !== undefined;
              if (hasCustom) return `${(tl ?? 0)}px ${(tr ?? 0)}px ${(br ?? 0)}px ${(bl ?? 0)}px`;

              if (s === 'square') return `0px`;
              if (s === 'rounded') return `${r}px`;
              return `0px ${r}px 0px ${r}px`;
            })()} !important;
          }

          .bubble-icon {
            width: ${(this.config["room-card-plus"]?.icon_size ?? 50) + 'px'};
            height: ${(this.config["room-card-plus"]?.icon_size ?? 50) + 'px'};
            padding: 0;
            position: relative !important;
            --mdc-icon-size: ${(this.config["room-card-plus"]?.icon_size ?? 50) + 'px'} !important;
            opacity: 0.8 !important;
            color: ${this.config["room-card-plus"]?.icon_color ?? '#1c1c1c'} !important;
            transform: translate(${(this.config["room-card-plus"]?.icon_offset_x ?? 0) + 'px'}, ${(this.config["room-card-plus"]?.icon_offset_y ?? 0) + 'px'});
          }

          /* ===== FOOTER DRAWER STYLES ===== */

          /* Allow drawer to overflow below the card */
          .bubble-container.rcp-footer-overflow {
            overflow: visible !important;
            z-index: 1;
          }

          .bubble-container.rcp-footer-overflow.rcp-drawer-elevated {
            z-index: 999;
          }

          /* When drawer is open, flatten the bottom corners so the drawer
             continues seamlessly — no gap behind rounded corners */
          .bubble-container.rcp-footer-overflow.rcp-drawer-elevated {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
          }

          .rcp-drawer-elevated .bubble-background {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
          }

          /* Clip the card wrapper so the icon doesn't bleed outside the card,
             while the drawer (a sibling of the wrapper) still overflows */
          .bubble-button-card {
            overflow: hidden !important;
          }

          /*
           * IMMEDIATELY hide the bottom sub-button container when footer is enabled.
           * This is a config-driven CSS rule so it applies before JS even runs,
           * preventing bottom sub-buttons from ever affecting the main card layout.
           *
           * Bubble Card adds 'with-bottom-buttons' to the container and 'fixed-top'
           * to the wrapper when bottom sub-buttons exist. These classes change the
           * entire card layout (baseline alignment, flex wrapping, content container).
           * We must forcefully revert ALL of these side-effects.
           */
          ${this.config["room-card-plus"]?.footer_enabled ? `
          .bubble-sub-button-bottom-container {
            display: none !important;
            position: absolute !important;
            visibility: hidden !important;
            pointer-events: none !important;
            height: 0 !important;
            overflow: hidden !important;
          }

          /* Revert 'fixed-top' on wrapper — Bubble adds this when bottom sub-buttons exist */
          .bubble-button-card.fixed-top {
            align-items: center !important;
          }

          /* Revert the content container changes that fixed-top causes */
          .bubble-button-card.fixed-top .bubble-content-container {
            display: contents !important;
            align-items: unset !important;
            align-self: unset !important;
            overflow: unset !important;
            flex-grow: unset !important;
            margin-top: 0 !important;
            min-height: unset !important;
          }

          /* Revert the sub-button container's fixed-top alignment */
          .bubble-sub-button-container.fixed-top {
            align-self: center !important;
          }

          /*
           * When bottom sub-buttons exist, Bubble adds .groups-layout-inline to the
           * container and wraps buttons in a .bubble-sub-button-group child.
           * The container's grid was designed for direct button children — now it has
           * ONE child (the group div) so grid-template-rows for 3 items breaks.
           *
           * Fix: container becomes a simple flex passthrough (still in grid-area b),
           * the GROUP gets the actual column grid layout with all the slim-sb vars.
           */
          .bubble-sub-button-container.groups-layout-inline {
            display: flex !important;
            flex-direction: column !important;
            align-items: end !important;
            justify-content: center !important;
          }

          .bubble-sub-button-container .bubble-sub-button-group {
            display: grid !important;
            grid-auto-flow: column !important;
            grid-template-rows: repeat(var(--slim-sb-per-col), var(--slim-sb-size)) !important;
            grid-auto-columns: var(--slim-sb-size) !important;
            row-gap: var(--slim-sb-gap) !important;
            column-gap: var(--slim-sb-col-gap) !important;
            align-items: center !important;
            justify-content: end !important;
            flex-direction: unset !important;
            margin-top: 0 !important;
          }

          /* Undo the margin-top that fixed-top adds to the sub-button container */
          .fixed-top .bubble-sub-button-container {
            margin-top: 0 !important;
          }
          ` : ''}

          .rcp-footer-handle {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 2px 18px 4px 18px;
            border-radius: 0 0 ${(this.config["room-card-plus"]?.footer_handle_radius ?? 14)}px ${(this.config["room-card-plus"]?.footer_handle_radius ?? 14)}px;
            background: ${this.config["room-card-plus"]?.footer_handle_bg ?? 'transparent'};
            transition: background-color 0.2s ease;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
          }

          .rcp-footer-handle:active {
            opacity: 0.8;
          }

          .rcp-footer-handle ha-icon {
            --mdc-icon-size: ${(this.config["room-card-plus"]?.footer_handle_icon_size ?? 20)}px;
            color: ${this.config["room-card-plus"]?.footer_handle_icon_color ?? 'var(--primary-text-color)'};
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.35s ease;
          }

          .rcp-footer-handle.rcp-drawer-open ha-icon {
            transform: rotate(180deg);
            opacity: 1;
          }

          .rcp-footer-overlay {
            position: fixed;
            inset: 0;
            z-index: 99;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
          }

          .rcp-footer-overlay.rcp-drawer-open {
            opacity: 1;
            pointer-events: auto;
          }

          /* Clip wrapper sits flush at the card bottom edge */
          .rcp-footer-clip {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 100;
            overflow: hidden;
            pointer-events: none;
            max-height: 70vh;
          }

          .rcp-footer-clip.rcp-drawer-open {
            pointer-events: auto;
          }

          /* Drawer slides down into the clip area */
          .rcp-footer-drawer {
            background: ${this.config["room-card-plus"]?.footer_drawer_bg ?? 'var(--card-background-color, rgba(30,30,30,0.95))'};
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 0 0 ${(this.config["room-card-plus"]?.footer_drawer_radius ?? 22)}px ${(this.config["room-card-plus"]?.footer_drawer_radius ?? 22)}px;
            padding: 12px 12px 16px 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.25);
            transform: translateY(-100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
            touch-action: none;
            overflow-y: auto;
          }

          .rcp-footer-drawer.rcp-drawer-open {
            transform: translateY(0);
          }

          .rcp-footer-drawer.rcp-drawer-dragging {
            transition: none;
          }

          .rcp-footer-drawer-grip {
            width: 36px;
            height: 4px;
            border-radius: 2px;
            background: var(--primary-text-color);
            opacity: 0.25;
            margin: 12px auto 0 auto;
          }

          .rcp-footer-drawer-grid {
            display: grid;
            grid-template-columns: repeat(${this.config["room-card-plus"]?.footer_columns ?? 3}, 1fr);
            gap: ${(this.config["room-card-plus"]?.footer_grid_gap ?? 10)}px;
            justify-items: center;
            align-items: start;
          }

          .rcp-footer-drawer-grid .bubble-sub-button {
            height: ${(this.config["room-card-plus"]?.footer_button_size ?? 46)}px !important;
            width: ${(this.config["room-card-plus"]?.footer_button_size ?? 46)}px !important;
            min-width: ${(this.config["room-card-plus"]?.footer_button_size ?? 46)}px !important;
            border-radius: ${(this.config["room-card-plus"]?.footer_button_radius ?? 30)}px !important;
          }

          /* Configurable on/off colors for footer (bottom) sub-buttons */
          .rcp-footer-drawer-grid .bubble-sub-button.background-off {
            background-color: ${this.config["room-card-plus"]?.footer_sb_off_color ?? '#1c1111'} !important;
          }
          ${this.config["room-card-plus"]?.footer_sb_on_color ? `
          .rcp-footer-drawer-grid .bubble-sub-button.background-on {
            background-color: ${this.config["room-card-plus"].footer_sb_on_color} !important;
          }` : ''}

          ${(() => {
            try {
              const cfg = this.config["room-card-plus"] || {};

              const boolVal = (v, def) => {
                if (v === undefined || v === null) return def;
                if (typeof v === 'boolean') return v;
                if (typeof v === 'string') {
                  const s = v.trim().toLowerCase();
                  if (s === 'true') return true;
                  if (s === 'false') return false;
                }
                return def;
              };

              const animToCss = (name, dur=1.2) => {
                const d = Number(dur ?? 1.2);
                const ds = (isNaN(d) || d <= 0) ? 1.2 : d;
                switch (name) {
                  case 'pulse': return `sc_pulse ${ds}s ease-in-out infinite`;
                  case 'ping':  return `sc_ping ${ds}s ease-out infinite`;
                  case 'spin':  return `sc_spin ${ds}s linear infinite`;
                  case 'bounce':return `sc_bounce ${ds}s ease-in-out infinite`;
                  case 'none':
                  default: return '';
                }
              };

              const evalCondFallback = (condObj) => {
                if (!condObj || typeof condObj !== 'object' || !condObj.condition) return false;
                const t = condObj.condition;

                switch (t) {
                  case 'state': {
                    const eid = condObj.entity_id || condObj.entity;
                    if (!eid || !hass.states[eid]) return false;
                    const v = condObj.attribute
                      ? hass.states[eid].attributes?.[condObj.attribute]
                      : hass.states[eid].state;
                    if (v === undefined) return false;
                    return Array.isArray(condObj.state) ? condObj.state.includes(v) : v === condObj.state;
                  }
                  case 'numeric_state': {
                    const eid = condObj.entity_id || condObj.entity;
                    if (!eid || !hass.states[eid]) return false;
                    const raw = condObj.attribute
                      ? hass.states[eid].attributes?.[condObj.attribute]
                      : hass.states[eid].state;
                    const n = parseFloat(raw);
                    if (isNaN(n)) return false;
                    let ok = true;
                    if (condObj.above !== undefined) ok = ok && (n > parseFloat(condObj.above));
                    if (condObj.below !== undefined) ok = ok && (n < parseFloat(condObj.below));
                    return ok;
                  }
                  case 'and':
                    return Array.isArray(condObj.conditions) && condObj.conditions.every(evalCondFallback);
                  case 'or':
                    return Array.isArray(condObj.conditions) && condObj.conditions.some(evalCondFallback);
                  case 'not':
                    if (Array.isArray(condObj.conditions) && condObj.conditions[0]) return !evalCondFallback(condObj.conditions[0]);
                    if (condObj.condition_obj) return !evalCondFallback(condObj.condition_obj);
                    return false;
                  default:
                    return false;
                }
              };

              const checkAllConditions = (cProp) => {
                if (!cProp) return true;
                const arr = [].concat(cProp).filter(Boolean);
                if (typeof checkConditionsMet === 'function') return checkConditionsMet(arr, hass);
                return arr.every(evalCondFallback);
              };

              const toRulesArray = (rules) => {
                if (!rules) return [];
                if (Array.isArray(rules)) return rules.filter(Boolean);
                if (typeof rules === 'object') {
                  return Object.keys(rules)
                    .sort((a,b)=>parseInt(a)-parseInt(b))
                    .map(k => rules[k])
                    .filter(Boolean);
                }
                return [];
              };

              const firstMatch = (rules, keyName) => {
                const arr = toRulesArray(rules);
                for (const r of arr) {
                  if (!r) continue;
                  if (checkAllConditions(r.condition)) {
                    if (r[keyName] !== undefined && r[keyName] !== null && r[keyName] !== '') return r[keyName];
                    if (r.stop !== false) return null;
                  }
                }
                return null;
              };

              const pullEntitiesFrom = (x, set) => {
                if (!x) return;
                const s = JSON.stringify(x);

                const matches1 = s.match(/"entity_id"\s*:\s*"([^"]+)"/g);
                if (matches1) matches1.forEach(m => set.add(m.split('"')[3]));

                const matches2 = s.match(/"entity"\s*:\s*"([^"]+)"/g);
                if (matches2) matches2.forEach(m => set.add(m.split('"')[3]));
              };

              const normalizeColor = (c) => {
                if (!c) return '';
                const s = String(c).trim();
                if (!s) return '';
                if (s.startsWith('#') || s.startsWith('rgb') || s.startsWith('hsl') || s.startsWith('var(')) return s;
                return `var(--${s}-color)`;
              };

              const clamp = (n, a, b) => Math.min(b, Math.max(a, n));

              const hexToRgba = (hex, a) => {
                const h = String(hex).trim().replace('#','');
                if (![3,4,6,8].includes(h.length)) return null;
                const to255 = (s) => parseInt(s, 16);
                let r,g,b;
                if (h.length <= 4) {
                  r = to255(h[0] + h[0]);
                  g = to255(h[1] + h[1]);
                  b = to255(h[2] + h[2]);
                } else {
                  r = to255(h.slice(0,2));
                  g = to255(h.slice(2,4));
                  b = to255(h.slice(4,6));
                }
                return `rgba(${r}, ${g}, ${b}, ${a})`;
              };

              const applyOpacity = (color, a) => {
                const c = String(color).trim();
                if (c.startsWith('#')) {
                  const rgba = hexToRgba(c, a);
                  if (rgba) return rgba;
                }
                return `color-mix(in srgb, ${c} ${Math.round(a*100)}%, transparent)`;
              };

              /* =============================
                 MAIN ICON (icon + color + background)
                 ============================= */

              this._rcp_main_cache ??= { defaultIcon: null, lastState: null, observer: null };

              const mainIconEl = card.querySelector('.bubble-main-icon') || icon || null;
              const mainIconContainer = card.querySelector('.bubble-main-icon-container') || null;
              const iconBgEl = card.querySelector('.bubble-icon-container') || null;

              /* Reusable function to apply all icon/color/animation/background state */
              const applyIconState = (state) => {
                if (!state) return;
                const mel = card.querySelector('.bubble-main-icon') || icon || null;
                const mcont = card.querySelector('.bubble-main-icon-container') || null;
                const bgEl = card.querySelector('.bubble-icon-container') || null;

                if (mel) {
                  if (state.icon) {
                    if (mel.icon !== state.icon) mel.icon = state.icon;
                    if (mel.getAttribute?.('icon') !== state.icon) mel.setAttribute('icon', state.icon);
                  }
                  if (state.color) {
                    card.style.setProperty('--bubble-icon-color', state.color, 'important');
                    card.style.setProperty('--paper-item-icon-color', state.color, 'important');
                    card.style.setProperty('--mdc-icon-button-icon-color', state.color, 'important');
                    mel.style.setProperty('color', state.color, 'important');
                    if (mcont) mcont.style.setProperty('color', state.color, 'important');
                  } else {
                    card.style.setProperty('--bubble-icon-color', 'initial', 'important');
                    card.style.setProperty('--paper-item-icon-color', 'initial', 'important');
                    card.style.setProperty('--mdc-icon-button-icon-color', 'initial', 'important');
                    mel.style.removeProperty('color');
                    if (mcont) mcont.style.removeProperty('color');
                  }
                  if (state.anim) {
                    mel.style.setProperty('animation', state.anim, 'important');
                    mel.style.setProperty('display', 'inline-block', 'important');
                  } else {
                    mel.style.removeProperty('animation');
                  }
                  mel.style.setProperty('--mdc-icon-size', `${state.size}px`, 'important');
                }
                if (bgEl && state.bg) {
                  bgEl.style.setProperty('background-color', state.bg, 'important');
                }
              };

              /* Compute current state */
              let currentIconState = null;

              if (mainIconEl) {
                if (!this._rcp_main_cache.defaultIcon) {
                  const cfgIcon = (this.config?.icon || '').trim();
                  const domIcon = mainIconEl.icon || mainIconEl.getAttribute?.('icon') || '';
                  this._rcp_main_cache.defaultIcon = cfgIcon || domIcon || null;
                }

                const testIcon = (cfg.main_icon_test_icon || '').trim();
                const ruleIcon = firstMatch(cfg.main_icon_icon_rules, 'icon');
                const finalIcon = testIcon || ruleIcon || this._rcp_main_cache.defaultIcon || '';

                const ruleColorRaw = firstMatch(cfg.main_icon_color_rules, 'color');
                const ruleColor = normalizeColor(ruleColorRaw);

                const ruleAnimName = firstMatch(cfg.main_icon_animation_rules, 'animation');
                const ruleAnimDur  = firstMatch(cfg.main_icon_animation_rules, 'duration');
                const ruleAnim = animToCss(ruleAnimName, ruleAnimDur);

                const size = Number(cfg.icon_size ?? 50);

                let bgFinal = null;
                if (iconBgEl) {
                  const bgRuleRaw = firstMatch(cfg.main_icon_bg_color_rules, 'color');
                  const bgBase = normalizeColor(bgRuleRaw || cfg.main_icon_bg_color || '#ffc47e');
                  const offPct = Number(cfg.main_icon_bg_off_opacity ?? 20);
                  const pct = clamp(offPct, 0, 100);
                  const alpha = pct / 100;
                  const ent = this.config?.entity;
                  const st = ent ? hass.states?.[ent]?.state : null;
                  const isOff = (st === 'off' || st === 'unavailable' || st === 'unknown');
                  bgFinal = isOff ? applyOpacity(bgBase, alpha) : bgBase;
                }

                currentIconState = { icon: finalIcon, color: ruleColor, anim: ruleAnim, size, bg: bgFinal };
                this._rcp_main_cache.lastState = currentIconState;
              }

              /* Apply current state */
              applyIconState(currentIconState);

              /* MutationObserver: reapply icon/color/animation when Bubble Card
                 resets the icon element (navigation, popup, re-render).
                 Re-entrancy guard prevents infinite loop (applyIconState sets
                 styles which would trigger the observer again). */
              if (!this._rcp_main_cache.observer && iconBgEl) {
                const mc = this._rcp_main_cache;
                mc._applying = false;
                const obs = new MutationObserver(() => {
                  if (mc._applying || !mc.lastState) return;
                  mc._applying = true;
                  requestAnimationFrame(() => {
                    applyIconState(mc.lastState);
                    mc._applying = false;
                  });
                });
                obs.observe(iconBgEl, { childList: true, subtree: true, attributes: true, attributeFilter: ['icon', 'style'] });
                mc.observer = obs;
              }

              /* =============================
                 STATE ENTITIES
                 ============================= */
              const stateEl = card.querySelector('.bubble-state');
              if (!stateEl) return '';

              const entities = cfg.state_entities || [];
              if (!Array.isArray(entities) || entities.length === 0) return '';

              const watched2 = new Set();
              const mainEnt2 = this.config?.entity;
              if (mainEnt2) watched2.add(mainEnt2);

              entities.forEach(o => {
                if (o?.entity) watched2.add(o.entity);
                pullEntitiesFrom(o?.condition, watched2);
                pullEntitiesFrom(o?.icon_rules, watched2);
                pullEntitiesFrom(o?.color_rules, watched2);
                pullEntitiesFrom(o?.animation_rules, watched2);
              });

              let sig2 = '';
              for (const eid of watched2) {
                const st = hass.states?.[eid];
                if (st) sig2 += st.last_updated;
              }

              const hasMarker = stateEl.querySelector?.('.room-card-plus-state-marker');
              this._sc_state_cache ??= { lastSig: '', lastHtml: '', observer: null };

              const mustRebuild = (!hasMarker);
              if (!mustRebuild && sig2 && sig2 === this._sc_state_cache.lastSig) return '';

              this._sc_state_cache.lastSig = sig2 || 'static_done';

              const gapPx = Number(cfg.state_multi_gap ?? 0);

              const items = [];
              entities.forEach((o, idx) => {
                if (!o?.entity) return;
                const st = hass.states?.[o.entity];
                if (!st) return;
                if (!checkAllConditions(o.condition)) return;

                const raw = o.attribute ? st.attributes?.[o.attribute] : st.state;
                if (raw === undefined || raw === null) return;

                let value = raw;
                const num = parseFloat(raw);
                if (!isNaN(num)) {
                  const d = o.decimals ?? 0;
                  value = d > 0 ? num.toFixed(d) : String(Math.trunc(num));
                }

                const unit = boolVal(o.show_unit, true) ? (st.attributes?.unit_of_measurement || '') : '';
                const showText = boolVal(o.show_text, true);
                const showIcon = boolVal(o.show_icon, false);

                const icon2 = firstMatch(o.icon_rules, 'icon') || st.attributes?.icon || null;
                const color2 = normalizeColor(firstMatch(o.color_rules, 'color') || '');

                const animName2 = firstMatch(o.animation_rules, 'animation');
                const animDur2  = firstMatch(o.animation_rules, 'duration');
                const anim2 = animToCss(animName2, animDur2);

                const isz = Number(o.icon_size ?? 14);

                items.push({
                  order: Number(o.order_priority ?? 100) + (idx / 1000),
                  html: (() => {
                    let html = `<span class="room-card-plus-state-item" style="${anim2 ? `animation:${anim2} !important; display:inline-block;` : ''} ${color2 ? `color:${color2} !important;` : ''}">`;
                    if (showIcon && icon2) {
                      html += `<ha-icon icon="${icon2}"
                                style="padding-right:6px; --mdc-icon-size:${isz}px; vertical-align:middle; display:inline-block; ${color2 ? `color:${color2} !important;` : ''}">
                              </ha-icon>`;
                    }
                    if (showText) {
                      const txt = `${value}${unit ? ' ' + unit : ''}`;
                      html += `<span class="room-card-plus-state-text" style="${color2 ? `color:${color2} !important;` : ''}">${txt}</span>`;
                    }
                    html += `</span>`;
                    return html;
                  })()
                });
              });

              items.sort((a,b) => a.order - b.order);

              const html =
                `<span class="room-card-plus-state-marker" style="display:none;"></span>` +
                items.map(i => i.html).join(`<span style="display:inline-block; width:${gapPx}px;"></span>`);

              /* Force-write if marker was missing (Bubble Card overwrote our content)
                 OR if the HTML actually changed (entity state updated) */
              if (mustRebuild || html !== this._sc_state_cache.lastHtml) {
                this._sc_state_cache.lastHtml = html;
                stateEl.innerHTML = html || '';
              }

              /* MutationObserver: re-apply cached HTML whenever Bubble Card
                 overwrites .bubble-state (navigation, popup, re-render).
                 Only one observer per card lifetime. */
              if (!this._sc_state_cache.observer && stateEl) {
                const cache = this._sc_state_cache;
                const obs = new MutationObserver(() => {
                  if (!cache.lastHtml) return;
                  if (!stateEl.querySelector('.room-card-plus-state-marker')) {
                    stateEl.innerHTML = cache.lastHtml;
                  }
                });
                obs.observe(stateEl, { childList: true, characterData: true, subtree: true });
                cache.observer = obs;
              }

            } catch (e) {
              console.error('[room-card-plus] error:', e);
            }
            return '';
          })()}

          ${(() => {
            try {
              const cfg = this.config["room-card-plus"] || {};
              const perCol = Number(cfg.sub_buttons_per_column ?? 3);
              const cont = card.querySelector('.bubble-sub-button-container');
              if (!cont || !perCol) return '';
              const btns = cont.querySelectorAll('.bubble-sub-button');
              cont.classList.toggle('room-card-plus-two-cols', btns.length > perCol);
            } catch (e) {
              console.error('[room-card-plus] sub-button layout error:', e);
            }
            return '';
          })()}

          ${(() => {
            /* =============================
               FOOTER DRAWER (opens DOWNWARD, uses BOTTOM sub-buttons)
               ============================= */
            try {
              const cfg = this.config["room-card-plus"] || {};

              const boolVal = (v, def) => {
                if (v === undefined || v === null) return def;
                if (typeof v === 'boolean') return v;
                if (typeof v === 'string') {
                  const s = v.trim().toLowerCase();
                  return s === 'true' ? true : s === 'false' ? false : def;
                }
                return def;
              };

              const footerEnabled = boolVal(cfg.footer_enabled, false);

              this._rcp_footer ??= {
                initialized: false,
                isOpen: false,
                handleEl: null,
                clipEl: null,
                drawerEl: null,
                overlayEl: null,
                gridEl: null,
                drawerHeight: 0,
                movedButtons: false
              };

              const fc = this._rcp_footer;

              /* Find the bubble-container (parent that needs overflow:visible) */
              const bubbleContainer = card.closest('.bubble-container') || card.querySelector('.bubble-container') || card;

              /* Bottom sub-buttons container */
              const bottomSubCont = card.querySelector('.bubble-sub-button-bottom-container');

              /* ---- If footer is disabled, tear down and restore ---- */
              if (!footerEnabled) {
                if (fc.initialized) {
                  fc.handleEl?.remove();
                  fc.clipEl?.remove();
                  fc.overlayEl?.remove();
                  bubbleContainer.classList.remove('rcp-footer-overflow', 'rcp-drawer-elevated');
                  fc.initialized = false;
                  fc.isOpen = false;
                  fc.movedButtons = false;
                }
                return '';
              }

              /* ---- Toggle function (declared early so handlers can reference it) ---- */
              const toggleDrawer = (open) => {
                fc.isOpen = open;
                fc.drawerEl.style.transform = '';

                fc.clipEl.classList.toggle('rcp-drawer-open', open);
                fc.drawerEl.classList.toggle('rcp-drawer-open', open);
                fc.handleEl.classList.toggle('rcp-drawer-open', open);
                fc.overlayEl.classList.toggle('rcp-drawer-open', open);

                /* Elevate card z-index while open so drawer appears above sibling cards */
                bubbleContainer.classList.toggle('rcp-drawer-elevated', open);
              };

              /* ---- First-time setup ---- */
              if (!fc.initialized) {
                const container = card.querySelector('.bubble-button-card') || card;

                /* Make the card allow visible overflow */
                bubbleContainer.classList.add('rcp-footer-overflow');

                /* Overlay (fixed backdrop) — appended to outer container */
                const overlay = document.createElement('div');
                overlay.className = 'rcp-footer-overlay';
                overlay.addEventListener('click', () => { toggleDrawer(false); }, { passive: true });
                bubbleContainer.appendChild(overlay);
                fc.overlayEl = overlay;

                /* Handle (center-bottom icon) — appended to outer container */
                const handle = document.createElement('div');
                handle.className = 'rcp-footer-handle';
                const handleIcon = document.createElement('ha-icon');
                handleIcon.setAttribute('icon', cfg.footer_handle_icon || 'mdi:menu');
                handle.appendChild(handleIcon);
                bubbleContainer.appendChild(handle);
                fc.handleEl = handle;

                /* Clip wrapper — appended to outer container */
                const clip = document.createElement('div');
                clip.className = 'rcp-footer-clip';

                /* Drawer panel inside clip */
                const drawer = document.createElement('div');
                drawer.className = 'rcp-footer-drawer';

                const grid = document.createElement('div');
                grid.className = 'rcp-footer-drawer-grid';
                drawer.appendChild(grid);

                const grip = document.createElement('div');
                grip.className = 'rcp-footer-drawer-grip';
                drawer.appendChild(grip);

                clip.appendChild(drawer);
                bubbleContainer.appendChild(clip);
                fc.clipEl = clip;
                fc.drawerEl = drawer;
                fc.gridEl = grid;

                /* ---- Handle: combined click + pull-to-open/close (touch) ---- */

                let handleDrag = null;  /* { startY, moved } */

                handle.addEventListener('touchstart', (e) => {
                  handleDrag = { startY: e.touches[0].clientY, moved: false };

                  /* Measure drawer height for drag calculation */
                  drawer.style.transition = 'none';
                  drawer.classList.add('rcp-drawer-open');
                  fc.drawerHeight = drawer.offsetHeight || 200;
                  if (!fc.isOpen) {
                    drawer.classList.remove('rcp-drawer-open');
                    drawer.style.transform = 'translateY(-100%)';
                  }
                }, { passive: true });

                handle.addEventListener('touchmove', (e) => {
                  if (!handleDrag) return;
                  const currentY = e.touches[0].clientY;
                  const delta = currentY - handleDrag.startY;
                  if (Math.abs(delta) > 5) handleDrag.moved = true;

                  if (!fc.isOpen) {
                    /* Pulling DOWN to open: delta > 0 */
                    const progress = Math.max(0, Math.min(1, delta / fc.drawerHeight));
                    /* -100% → 0%: translate = -100 + progress*100 */
                    drawer.style.transform = `translateY(${-100 + progress * 100}%)`;
                  } else {
                    /* Pulling UP to close: delta < 0 */
                    const progress = Math.max(0, Math.min(1, -delta / fc.drawerHeight));
                    /* 0% → -100% */
                    drawer.style.transform = `translateY(${-progress * 100}%)`;
                  }
                }, { passive: true });

                handle.addEventListener('touchend', (e) => {
                  if (!handleDrag) return;
                  const endY = e.changedTouches[0].clientY;
                  const delta = endY - handleDrag.startY;
                  const wasDrag = handleDrag.moved;
                  handleDrag = null;

                  drawer.style.transition = '';
                  drawer.style.transform = '';

                  if (wasDrag) {
                    /* Determine by drag direction and threshold */
                    if (!fc.isOpen && delta > 40) {
                      toggleDrawer(true);
                    } else if (fc.isOpen && delta < -40) {
                      toggleDrawer(false);
                    } else {
                      /* Snap back to current state */
                      toggleDrawer(fc.isOpen);
                    }
                  }
                  /* If not a drag, let the click handler fire naturally */
                }, { passive: true });

                /* Click handler: toggle on tap (won't fire if drag was detected) */
                handle.addEventListener('click', (e) => {
                  e.stopPropagation();
                  toggleDrawer(!fc.isOpen);
                }, { passive: false });

                /* ---- Drawer body: drag-up-to-close (touch) ---- */
                let drawerDrag = null;

                drawer.addEventListener('touchstart', (e) => {
                  drawerDrag = { startY: e.touches[0].clientY };
                  drawer.classList.add('rcp-drawer-dragging');
                }, { passive: true });

                drawer.addEventListener('touchmove', (e) => {
                  if (!drawerDrag) return;
                  const currentY = e.touches[0].clientY;
                  const delta = drawerDrag.startY - currentY; /* positive = dragging up */
                  if (delta > 0) {
                    drawer.style.transform = `translateY(-${delta}px)`;
                  }
                }, { passive: true });

                drawer.addEventListener('touchend', (e) => {
                  if (!drawerDrag) return;
                  drawer.classList.remove('rcp-drawer-dragging');
                  const delta = drawerDrag.startY - e.changedTouches[0].clientY;
                  drawerDrag = null;

                  if (delta > 60) {
                    toggleDrawer(false);
                  } else {
                    drawer.style.transform = '';
                  }
                }, { passive: true });

                fc.initialized = true;
              }

              /* ---- Move BOTTOM sub-buttons into drawer grid ---- */
              if (bottomSubCont && fc.gridEl) {
                const btns = bottomSubCont.querySelectorAll('.bubble-sub-button');
                const currentCount = fc.gridEl.querySelectorAll('.bubble-sub-button').length;

                if (btns.length > 0 && btns.length !== currentCount) {
                  fc.gridEl.innerHTML = '';
                  btns.forEach(btn => {
                    fc.gridEl.appendChild(btn);
                  });
                  fc.movedButtons = true;
                }
              }

            } catch (e) {
              console.error('[room-card-plus] footer drawer error:', e);
            }
            return '';
          })()}
  editor:
    - type: expandable
      title: Card settings
      icon: mdi:card-bulleted
      schema:
        - name: card_radius
          label: Card radius (px)
          default: 22
          selector:
            number:
              min: 0
              max: 40
              step: 1
    - type: expandable
      title: Title & State size
      icon: mdi:format-size
      schema:
        - name: title_em_mobile
          label: Title size (mobile, em)
          default: 0.8
          selector:
            number:
              min: 0.6
              max: 1.2
              step: 0.05
        - name: title_em_desktop
          label: Title size (desktop, em)
          default: 1.125
          selector:
            number:
              min: 0.8
              max: 1.6
              step: 0.05
        - name: state_size_em
          label: State font size (em)
          default: 0.95
          selector:
            number:
              min: 0.7
              max: 1.6
              step: 0.05
        - name: ts_gap
          label: Gap between title & state (px)
          default: 1
          selector:
            number:
              min: 0
              max: 12
              step: 1
    - type: expandable
      title: Title & State positioning
      icon: mdi:cursor-move
      schema:
        - name: ts_pad_top
          label: Top padding (px)
          default: 30
          selector:
            number:
              min: 0
              max: 40
              step: 1
        - name: ts_pad_left
          label: Left padding (px)
          default: 20
          selector:
            number:
              min: 0
              max: 40
              step: 1
        - name: ts_block_height
          label: Title/State block height (px)
          default: 52
          selector:
            number:
              min: 24
              max: 140
              step: 2
        - name: title_max_width_offset
          label: Text max-width offset (%)
          default: 20
          selector:
            number:
              min: 10
              max: 60
              step: 1
    - type: expandable
      title: State entities
      icon: mdi:information-outline
      schema:
        - name: state_multi_gap
          label: Gap between state entities (px)
          default: 0
          selector:
            number:
              min: 0
              max: 24
              step: 1
        - name: state_icon_gap
          label: Icon ↔ text gap (px) (default)
          default: 1
          selector:
            number:
              min: 0
              max: 16
              step: 1
        - name: state_entities
          label: State entities
          selector:
            object:
              multiple: true
              fields:
                name:
                  label: Name
                  required: true
                  selector:
                    text: {}
                order_priority:
                  label: Order priority (left → right)
                  selector:
                    number:
                      min: 1
                      max: 50
                      step: 1
                      mode: box
                entity:
                  label: Entity
                  required: true
                  selector:
                    entity: {}
                attribute:
                  label: Attribute (optional)
                  selector:
                    attribute: {}
                decimals:
                  label: Decimals (numeric only)
                  default: 0
                  selector:
                    number:
                      min: 0
                      max: 3
                      step: 1
                show_unit:
                  label: Show unit
                  default: true
                  selector:
                    boolean: {}
                condition:
                  label: Condition (optional)
                  selector:
                    condition: {}
                show_icon:
                  label: Show icon
                  default: false
                  selector:
                    boolean: {}
                show_text:
                  label: Show text
                  default: true
                  selector:
                    boolean: {}
                icon_size:
                  label: Icon size (px)
                  default: 14
                  selector:
                    number:
                      min: 10
                      max: 24
                      step: 1
                icon_rules:
                  label: Icon rules (optional)
                  selector:
                    object:
                      multiple: true
                      fields:
                        name:
                          label: Rule name (optional)
                          selector:
                            text: {}
                        condition:
                          label: Condition (optional)
                          selector:
                            condition: {}
                        icon:
                          label: Icon
                          selector:
                            icon: {}
                        stop:
                          label: Stop after match
                          default: true
                          selector:
                            boolean: {}
                color_rules:
                  label: Color rules (optional)
                  selector:
                    object:
                      multiple: true
                      fields:
                        name:
                          label: Rule name (optional)
                          selector:
                            text: {}
                        condition:
                          label: Condition (optional)
                          selector:
                            condition: {}
                        color:
                          label: Color (hex/css or ui_color name)
                          selector:
                            text: {}
                        stop:
                          label: Stop after match
                          default: true
                          selector:
                            boolean: {}
                animation_rules:
                  label: Animation rules (optional)
                  selector:
                    object:
                      multiple: true
                      fields:
                        name:
                          label: Rule name (optional)
                          selector:
                            text: {}
                        condition:
                          label: Condition (optional)
                          selector:
                            condition: {}
                        animation:
                          label: Animation
                          selector:
                            select:
                              options:
                                - label: None
                                  value: none
                                - label: Pulse
                                  value: pulse
                                - label: Ping
                                  value: ping
                                - label: Spin
                                  value: spin
                                - label: Bounce
                                  value: bounce
                        duration:
                          label: Duration (seconds)
                          default: 1.2
                          selector:
                            number:
                              min: 0.3
                              max: 5
                              step: 0.1
                        stop:
                          label: Stop after match
                          default: true
                          selector:
                            boolean: {}
              label_field: name
              description_field: entity
    - type: expandable
      title: Main Icon Styling & Positioning
      icon: mdi:emoticon-outline
      schema:
        - type: constant
          label: "─── Icon Container ───"
        - name: icon_width
          label: Container width (px)
          default: 100
          selector:
            number:
              min: 60
              max: 180
              step: 1
        - name: icon_height
          label: Container height (px)
          default: 60
          selector:
            number:
              min: 40
              max: 140
              step: 1
        - name: icon_corner_style
          label: Corner style
          default: diagonal
          selector:
            select:
              options:
                - label: Diagonal (0 R 0 R)
                  value: diagonal
                - label: Rounded (all corners)
                  value: rounded
                - label: Square
                  value: square
        - name: icon_radius
          label: Corner radius (px)
          default: 32
          selector:
            number:
              min: 0
              max: 60
              step: 1
        - name: icon_radius_tl
          label: Corner radius TL (px) — optional
          selector:
            number:
              min: 0
              max: 60
              step: 1
        - name: icon_radius_tr
          label: Corner radius TR (px) — optional
          selector:
            number:
              min: 0
              max: 60
              step: 1
        - name: icon_radius_br
          label: Corner radius BR (px) — optional
          selector:
            number:
              min: 0
              max: 60
              step: 1
        - name: icon_radius_bl
          label: Corner radius BL (px) — optional
          selector:
            number:
              min: 0
              max: 60
              step: 1
        - name: main_icon_bg_color
          label: Background color (hex/css/ui_color)
          default: '#ffc47e'
          selector:
            text: {}
        - name: main_icon_bg_off_opacity
          label: Background opacity when entity is OFF (%)
          default: 20
          selector:
            number:
              min: 0
              max: 100
              step: 1
        - type: constant
          label: "─── Icon Container Positioning ───"
        - name: icon_left
          label: Container left offset (px)
          default: -12
          selector:
            number:
              min: -80
              max: 40
              step: 1
        - name: icon_bottom
          label: Container bottom offset (px)
          default: -10
          selector:
            number:
              min: -80
              max: 40
              step: 1
        - type: constant
          label: "─── Icon Positioning ───"
        - name: icon_size
          label: Icon size (px)
          default: 50
          selector:
            number:
              min: 24
              max: 80
              step: 1
        - name: icon_offset_x
          label: Horizontal offset (px)
          default: 0
          selector:
            number:
              min: -30
              max: 30
              step: 1
        - name: icon_offset_y
          label: Vertical offset (px)
          default: 0
          selector:
            number:
              min: -30
              max: 30
              step: 1
        - name: icon_color
          label: Icon color (default)
          default: '#1c1c1c'
          selector:
            text: {}
        - name: main_icon_test_icon
          label: Test icon override (forces icon)
          selector:
            icon: {}
    - type: expandable
      title: Main Icon Rules
      icon: mdi:shield-star-outline
      schema:
        - name: main_icon_icon_rules
          label: Icon rules (optional)
          selector:
            object:
              multiple: true
              fields:
                name:
                  label: Rule name (optional)
                  selector:
                    text: {}
                condition:
                  label: Condition (optional)
                  selector:
                    condition: {}
                icon:
                  label: Icon
                  selector:
                    icon: {}
                stop:
                  label: Stop after match
                  default: true
                  selector:
                    boolean: {}
        - name: main_icon_color_rules
          label: Color rules (optional)
          selector:
            object:
              multiple: true
              fields:
                name:
                  label: Rule name (optional)
                  selector:
                    text: {}
                condition:
                  label: Condition (optional)
                  selector:
                    condition: {}
                color:
                  label: Color (hex/css or ui_color name)
                  selector:
                    text: {}
                stop:
                  label: Stop after match
                  default: true
                  selector:
                    boolean: {}
        - name: main_icon_animation_rules
          label: Animation rules (optional)
          selector:
            object:
              multiple: true
              fields:
                name:
                  label: Rule name (optional)
                  selector:
                    text: {}
                condition:
                  label: Condition (optional)
                  selector:
                    condition: {}
                animation:
                  label: Animation
                  selector:
                    select:
                      options:
                        - label: None
                          value: none
                        - label: Pulse
                          value: pulse
                        - label: Ping
                          value: ping
                        - label: Spin
                          value: spin
                        - label: Bounce
                          value: bounce
                duration:
                  label: Duration (seconds)
                  default: 1.2
                  selector:
                    number:
                      min: 0.3
                      max: 5
                      step: 0.1
                stop:
                  label: Stop after match
                  default: true
                  selector:
                    boolean: {}
        - name: main_icon_bg_color_rules
          label: Background color rules (optional)
          selector:
            object:
              multiple: true
              fields:
                name:
                  label: Rule name (optional)
                  selector:
                    text: {}
                condition:
                  label: Condition (optional)
                  selector:
                    condition: {}
                color:
                  label: Background color (hex/css or ui_color name)
                  selector:
                    text: {}
                stop:
                  label: Stop after match
                  default: true
                  selector:
                    boolean: {}
    - type: expandable
      title: Main Sub-button Layout
      icon: mdi:dots-vertical
      schema:
        - name: sub_button_size
          label: Sub-button size (px)
          default: 32
          selector:
            number:
              min: 28
              max: 60
              step: 1
        - name: sub_button_gap
          label: Gap between sub-buttons (px)
          default: 10
          selector:
            number:
              min: 0
              max: 24
              step: 1
        - name: sub_button_radius
          label: Sub-button radius (px)
          default: 30
          selector:
            number:
              min: 0
              max: 30
              step: 1
        - name: sub_buttons_per_column
          label: Buttons per column
          default: 3
          selector:
            number:
              min: 1
              max: 8
              step: 1
        - name: sub_button_column_gap
          label: Column gap (px)
          default: 8
          selector:
            number:
              min: 0
              max: 24
              step: 1
        - name: sub_button_left_shift
          label: Left shift when 2 columns (px)
          default: 6
          selector:
            number:
              min: 0
              max: 30
              step: 1
        - name: main_sb_off_color
          label: Off background color override (hex/css)
          selector:
            text: {}
        - name: main_sb_on_color
          label: On background color override (hex/css)
          selector:
            text: {}
    - type: expandable
      title: Bottom Sub-buttons Layout
      icon: mdi:dots-horizontal
      schema:
        - name: footer_button_size
          label: Button size (px)
          default: 46
          selector:
            number:
              min: 28
              max: 64
              step: 1
        - name: footer_button_radius
          label: Button radius (px)
          default: 30
          selector:
            number:
              min: 0
              max: 32
              step: 1
        - name: footer_columns
          label: Grid columns
          default: 3
          selector:
            number:
              min: 2
              max: 6
              step: 1
        - name: footer_grid_gap
          label: Grid gap (px)
          default: 10
          selector:
            number:
              min: 4
              max: 24
              step: 1
        - name: footer_sb_off_color
          label: Off background color
          default: '#1c1111'
          selector:
            text: {}
        - name: footer_sb_on_color
          label: On background color override (hex/css)
          selector:
            text: {}
    - type: expandable
      title: Footer Drawer
      icon: mdi:arrow-collapse-up
      schema:
        - name: footer_enabled
          label: Enable footer drawer
          default: false
          selector:
            boolean: {}
        - name: footer_handle_icon
          label: Handle icon
          default: mdi:menu
          selector:
            icon: {}
        - name: footer_handle_icon_size
          label: Handle icon size (px)
          default: 20
          selector:
            number:
              min: 14
              max: 32
              step: 1
        - name: footer_handle_icon_color
          label: Handle icon color
          default: var(--primary-text-color)
          selector:
            text: {}
        - name: footer_handle_radius
          label: Handle corner radius (px)
          default: 14
          selector:
            number:
              min: 0
              max: 24
              step: 1
        - name: footer_handle_bg
          label: Handle background color (css)
          default: transparent
          selector:
            text: {}
        - name: footer_drawer_bg
          label: Drawer background color (css)
          default: var(--card-background-color, rgba(30,30,30,0.95))
          selector:
            text: {}
        - name: footer_drawer_radius
          label: Drawer corner radius (px)
          default: 22
          selector:
            number:
              min: 0
              max: 40
              step: 1

✅ Before posting your module

I’ve replaced all lines starting with ->
I’ve updated the unsupported cards above the description and under the unsupported property
I’ve added a screenshot
I’ve chosen a unique your_module_key
I really enjoyed working on this module ❤️

DerHerzog7 · 2026-01-12T10:10:21Z

DerHerzog7
Jan 12, 2026

This is incredible! Thank you so much. This is exactly what I've been looking for.

2 replies

luciotorelli Jan 12, 2026
Author

Thanks, let me know how it works for you or if you have any feedback/FR 😄

DerHerzog7 Jan 14, 2026

Thanks, let me know how it works for you or if you have any feedback/FR 😄

It's awesome. So configurable.
One thing I'd love is to be able to use animated icons in the sub buttons. I know you can do it with the main button.

I'm using a different module for the sub-buttons but including it natively would be awesome.

tommerty · 2026-01-12T11:09:23Z

tommerty
Jan 12, 2026

Thanks so much for this, exactly what I've been looking for <3 I did find a minor bug however, mostly surrounding the "groups" and columns in the latest bubble update, where you can see individual buttons render perfect but if you have them in a group it'll go off center.

Replication

type: custom:bubble-card
card_type: button
button_type: state
modules:
  - room-card-plus
entity: light.kitchen_light_switch_light
name: Kitchen
icon: mdi:fridge
show_state: false
show_attribute: false
grid_options:
  columns: 6
rows: 2.625
sub_button:
  main:
    - name: Group 1
      buttons_layout: column
      group:
        - entity: light.kitchen_light_switch_light
        - entity: light.kitchen_light_switch_light
  bottom: []

Not a deal breaker of course, but just pointing it out and can likely be solved by your amazing customization features, just "default" having this problem.

Thank you again <3

3 replies

luciotorelli Jan 12, 2026
Author

Technically you don't need to use group as you can set how many buttons are displayed per column in the module so for instance if you set it to 4, it will automatically create a second column when you add sub button 5. Is there any other use for the grouping function? I will take a look to see how I could fix it 😄

tommerty Jan 12, 2026

Absolutely I agree you don't need to use it! :D I just by default copy/pasted one over when initially setting it up to test and noticed it and said I'd flag it with you so you're aware 😊

Honestly I've been looking for something like this that works this well for a long time. Going to throw a coffee your way for your efforts ☕ . This has strong wife-approval 😅

luciotorelli Jan 13, 2026
Author

@tommerty Thank you so much ⭐

I was looking for a fix when grouping but the default for groups are inline. (screenshot below)
If I remove the default grid then it would be mandatory for new users to create a group > set it to row in order to get the style we are going for. I think leaving a warning to not use groups for now will be the best "out-of-box" but I will keep an eye once the new group feature matures and in case it becomes the default. Thanks for raising it!

tommerty · 2026-01-12T12:27:53Z

tommerty
Jan 12, 2026

Appears to be some z-index issues on rare occasions, mostly when using the dropdown in a sub button.

Example where it works when using a standard bubble card:

Examples where using a dropdown within the room card its hidden behind others:

I was able to fix this by adding the following to my custom styles:

  .bubble-sub-button-container {
    z-index: 99 !important;
  }

3 replies

luciotorelli Jan 13, 2026
Author

Thanks for sharing the fix, I have updated it 👍 🙏

luciotorelli Jan 13, 2026
Author

Actually z-index: 99 !important; messes up with HA's native pop ups such as more details popup. I changed it for;

.bubble-sub-button-container { z-index: auto !important; }
.bubble-sub-button-container:focus-within { z-index: 99 !important; }

so it should only be behind once the dropdown is opened. If you could give it a try it would be awesome 😄

tommerty Jan 20, 2026

Apologies for the delay as I was away! That works so much better thank you!

Mordano · 2026-01-14T00:52:50Z

Mordano
Jan 14, 2026

First of all: It's an amazing module! Well done! I was tinkering on a very similar one as well, but not even close to how polish this one is! Kudos!

But I have an enhancement idea: Adding the possibility of adding little badges around the room icon. Those badges could be used for indicators (presence detected, a device is on, windows are open, etc.)
At the moment I am (ab)using the additional state entities for this purpose, but I noticed some weird behavior if the content gets too long.
Nonetheless, great work!

5 replies

luciotorelli Jan 14, 2026
Author

Hey @Mordano, thanks mate!

I was actually considering working on a badge module after as the two that I saw doesn't meet all my needs. I will have a look on the options to add to this one.

Could you send a screenshot or share what weird behaviour you are seeing? Maybe I can implement a second row, scrolling effect etc... Just bear in mind you can reduce the state entities size, spacing, position and/or display them based on conditions. I think I didn't have that issue as I have 5 per room and they are all based on conditions aside from temp.

Clooos Jan 14, 2026
Maintainer

Hi @luciotorelli, first I wanted to say that your module looks really nice, definitely the kind I love to see appearing on the Module Store 😄

Second, I saw you were thinking about working on a module similar to my Bubble Badges module (I receive an email for each comment on this whole GitHub, and I've seen the word "badge" in the headline so I was curious). I just wanted to share that this specific module is one of the few that helps me get support on my Patreon. This is what actually allows me to keep working on Bubble Card.

For that reason, it would be a huge help if you could avoid working on a similar module. I truly hope you understand. Keep up the great work! 🙂

luciotorelli Jan 14, 2026
Author

Hey @Clooos, absolutely! 😁 I saw yours and the badgy helper. I was looking for the options to position the badge via the menu and add multiple badges, right now I need both to achieve that. With your permission I can implement the positioning just for myself and share with you if it's something you'd like to update on Patreon? 😉

Clooos Jan 15, 2026
Maintainer

Thank you for your understanding! In fact, he positioning is already in my to-do list (but it is so HUGE), so your help would be more than welcome and a really great contribution 😄

Mordano Jan 16, 2026

Sorry for the late reply @luciotorelli, life got in the way 😄

Could you send a screenshot or share what weird behaviour you are seeing? Maybe I can implement a second row, scrolling effect etc... Just bear in mind you can reduce the state entities size, spacing, position and/or display them based on conditions. I think I didn't have that issue as I have 5 per room and they are all based on conditions aside from temp.

The situation: I had temperature and humidity values shown. When I added icons to those entities, the additional states disappeared completely. I then removed the humidity and added conditional "badges" aka icons, as those didn't exhibit the weird behavior. Unfortunately, I wanted to reproduce the behavior right now to send you a screenshot, but now it works? So... I guess it fixed itself 😅

Dingosworld · 2026-01-14T12:09:36Z

Dingosworld
Jan 14, 2026

I use the sub-buttons as status indicators for devices in a room. However, I can't hide them when the device is inactive. It works fine without the Room Card. Could you check that?

Basically, I just want the sub-button to only show up when a specific device is switched on.

4 replies

luciotorelli Jan 14, 2026
Author

Hey @Dingosworld, what are you using to hide them?

Dingosworld Jan 14, 2026

Hey :-) Basically, I simply configured the sub-button settings of the bubble card so that the icon is always hidden when entity X is off. I do this via the basic "Visibility" settings.

I couldn't find any settings for that in your plugin. Only the option to change the position and appearance of the buttons.

Mordano Jan 16, 2026

I can confirm the visibility options for the sub-buttons have no effect anymore.

luciotorelli Jan 31, 2026
Author

This has been fixed, ty!

xoatrash · 2026-01-15T20:11:15Z

xoatrash
Jan 15, 2026

Awesome, great module. Looking forward to for more features and improvements over time. :)

One thing: Does "Gap between sub-buttons (px)" work for you?

EDIT:
I also noticed, that when the "Visibility" option for subbuttons is set, it will be ignored? Someone can confirm this?

2 replies

luciotorelli Jan 15, 2026
Author

Hey @xoatrash, the last time I tested it has been working (for the gap) but I will take a look. As for the visibility @Dingosworld reported it above, I will try to work on the fixes this weekend 👍

Dingosworld Jan 16, 2026

Thanks @luciotorelli. If you can get this done this weekend, you'd really perfect my homework. I've already tried some "emergency solutions," but they were more of a disaster than anything else :-)

Thanks in advance for your work. I hope you know that you've really created a game-changer with this tool :-)

xoatrash · 2026-01-18T10:59:35Z

xoatrash
Jan 18, 2026

What also would be very useful if you could put a divider between multiple Entity States. Maybe a dot or a line. Something like that.
I tried a workaround by using the Entity States Icon option. It kinda works, but the gap between the icon and the states is too big.

1 reply

Dingosworld Jan 18, 2026

That's right. A "|" would be cool.

It would also be great if it were possible to display the status in two lines.

I don't even know if that's possible. I tried to solve the problem myself with Gemini, but unfortunately that didn't work.

jarrah31 · 2026-01-18T16:31:35Z

jarrah31
Jan 18, 2026

Would you mind posting the yaml behind the buttons in your screenshot from the description please? I'm struggling to get going with the GUI options so need some yaml to see how it should all hang together. Thanks!

0 replies

guentde · 2026-01-21T10:02:51Z

guentde
Jan 21, 2026

thank you for that module, that was something i was looking for! Any chance we get it to work with the slider card? Somehow if i set it to slider the added state entities disappear (unless i check show state in the main card) but then the state entities get overwritten by the state of the slider entity :( can we get that to work somehow or is my configuration buggy?

1 reply

guentde Jan 23, 2026

for anyone interested: i have found a fix myself. Just add another module from the store called "advanced example: get state/attribute from other entitites" and set your State Entities for the Room Card Plus there, works flawlessly and States do not get overwritten by the slider entity. Styles for the state entities still apply from the Room Card

Mordano · 2026-01-28T12:02:54Z

Mordano
Jan 28, 2026

I noticed that the new Slider sub-buttons are not working correctly, as they are going outside the card because of their wider size.
Any plans to mitigate this? :)

I was also trying to tinker around to get the general sub buttons wider. I saw at the same moment that you make them on purpose as a square. Would it be a possible feature to give the option to make them rectangular? Like little pills :) This would also fix the issue with the slider sub buttons.

0 replies

Nivlac7 · 2026-01-29T16:49:18Z

Nivlac7
Jan 29, 2026

Hello,

I started using your styling module and it really looks awesome !

This being said, I have an issue with the icon visibility I would like to use for sub-buttons. Conditional visibility is working with classical bubble cards but as soon as your module is used, it stops working (i.e. icon always visible even if condition is met or not)

Any idea how to fix this?

6 replies

oschick Jan 29, 2026

I fixed that issue here: https://github.com/oschick/room-card-plus/blob/a78cc751613d8b62ddcd132527c724fcce758e48/room-card-plus.yaml
It was just a missing css entry.
Also already did a PR to the dev, but he has not merged it yet.
To use it you can just import my yaml manually.
@Dingosworld, @Mordano Ping for you as you faced the same issue with button hiding

fjfuen Jan 29, 2026

@luciotorelli anyway we could get this PR pushed soon?

luciotorelli Jan 31, 2026
Author

I fixed that issue here: https://github.com/oschick/room-card-plus/blob/a78cc751613d8b62ddcd132527c724fcce758e48/room-card-plus.yaml It was just a missing css entry. Also already did a PR to the dev, but he has not merged it yet. To use it you can just import my yaml manually. @Dingosworld, @Mordano Ping for you as you faced the same issue with button hiding

Thank you so much, sorry for the delay busy week. That has been approved and I updated the discussion yaml too ❤️

silasmariusz Feb 5, 2026

I fixed that issue here: https://github.com/oschick/room-card-plus/blob/a78cc751613d8b62ddcd132527c724fcce758e48/room-card-plus.yaml It was just a missing css entry. Also already did a PR to the dev, but he has not merged it yet. To use it you can just import my yaml manually. @Dingosworld, @Mordano Ping for you as you faced the same issue with button hiding

i wonder how many talent people are here ....

<3

Mordano Feb 16, 2026

I fixed that issue here: https://github.com/oschick/room-card-plus/blob/a78cc751613d8b62ddcd132527c724fcce758e48/room-card-plus.yaml It was just a missing css entry. Also already did a PR to the dev, but he has not merged it yet. To use it you can just import my yaml manually. @Dingosworld, @Mordano Ping for you as you faced the same issue with button hiding

Thank you so much, sorry for the delay busy week. That has been approved and I updated the discussion yaml too ❤️

Hey @luciotorelli,
just FYI: I receive from the Module Store updates for other cards, but for your card no updates seem to appear. If I read your comment correctly, the visibility of the sub-buttons should have been fixed now. But it still misbehaves on my end, until I noticed that the Module Store never showed me an update for your card. Maybe something to look into why this happens. Maybe @Clooos can give a hint on how the Module Store triggers update notifications for modules.

Arbujl · 2026-02-01T09:46:44Z

Arbujl
Feb 1, 2026

Hello @luciotorelli , I love this module; I'm now using it across my entire dashboard. It's exactly what I was looking for. Thank you so much!
I do have a question regarding the icon size in the "Main Icon Style" section of the module; it might be a bug.
When I select an icon size, for example 35px, it's not centered on the map. The centering is from the top left corner, not the center of the icon. Is this normal? Because of this, I can't reduce the icon size, as the centering is incorrect.
Can you do anything?

2 replies

luciotorelli Feb 1, 2026
Author

Hey @Arbujl thanks for reporting! Could you open an issue for tracking, please? https://github.com/luciotorelli/room-card-plus

I will work on a fix :)

Arbujl Feb 1, 2026

Done, Thank you 👍

Dingosworld · 2026-02-07T11:11:49Z

Dingosworld
Feb 7, 2026

Does anyone have a solution, or does it need to be programmed?

I want to display two more status entities (CO₂ and PM2.5) at the marked location. I have the entities, and they provide the values. However, I haven't found a way (even with AI assistance) to insert a second line to display the status across two lines.

Additionally:
Besides RoomCardPlus, I also use the following modules:

Sub-button coloring based on entity condition
Conditional state button coloring

Or is there perhaps another module that I'm not aware of that could provide the solution?

1 reply

rlizzo Feb 26, 2026

I haven't tried it myself yet, but this post by Clooos on his patreon might help you out. https://www.patreon.com/posts/showing-sub-on-116808854

omares · 2026-02-15T15:24:00Z

omares
Feb 15, 2026

Hey, thanks for the module! Is it possible to replicate the same look for the round icon background as the original room card module? I tried, but I wasn't able to achieve it.

3 replies

DerHerzog7 Feb 16, 2026

I'm keen for this too. I tried using the sliders but it didn't really work.

DerHerzog7 Feb 18, 2026

Ok playing around I managed to get this;

Here are the dimensions;

room-card-plus:
icon_left: -25
icon_bottom: -25
icon_corner_style: rounded
icon_radius: 55
icon_radius_tl: 55
icon_radius_tr: 55
icon_radius_br: 55
icon_radius_bl: 55
main_icon_bg_off_opacity: 100
icon_size: 50
icon_width: 100
icon_height: 100

Note I couldn't figure out how to move the icon inside the icon container. I had to use icon size to get it centred which creates its own issues.

@luciotorelli any ideas or updates you can make?

DerHerzog7 Mar 7, 2026

@luciotorelli love all your work! Any idea how to make a round circle easier to implement?

portbusy · 2026-02-24T11:02:58Z

portbusy
Feb 24, 2026

Hi @luciotorelli, awesome module! Been using it in my main dashboard for a while!

I encountered the following behaviour: when I move to a subview and then return to the main view (where the room card lives), the entity state section does not load. I will attach some screenshots as an example:

This is when I land on the home page

This is when I land on the home page after visiting a dashboard subview

Do you think there is a solution for this? Right now, the only solution is to refresh the page forcefully

Thanks a lot!

3 replies

misteriks Mar 5, 2026

To get consistent behavior of the custom state entities I use the button type 'Name / Text (No entity required'.
Also make sure you remove the Entity before selecting this button type, otherwise the state of the main entity my still override the custom state entities.

Then to give the main icon background a color based on state of any of the lights I used a background color rule

luciotorelli Mar 7, 2026
Author

@portbusy Could you try clearing the cache and cookies? I am also using sub views and I can't seem to replicate it on my end.

luciotorelli Mar 8, 2026
Author

@portbusy @misteriks sorry I was able to replicate, this has been fixed. Let me know if it is working for you now. (Get the code again from above as from the store it takes a couple of weeks to update)

rlizzo · 2026-02-26T11:57:32Z

rlizzo
Feb 26, 2026

First, this is amazing! thank you so much for all your hard work.

I'm having an issue with setting conditional icon background color. My intention is to change the icon background color when any of the lights in the room are "on", but as shown in the screenshot below it seems that these rules are not being applied, and that the top level .bubble-main-icon-container, .bubble-icon-container color style is being force applied regardless of the conditional checks.

has anyone else ran into this issue?

2 replies

luciotorelli Mar 8, 2026
Author

@rlizzo This has been fixed. Let me know if it is working for you now. (Get the code again from above as from the store it takes a couple of weeks to update)

Mordano Mar 8, 2026

@rlizzo This has been fixed. Let me know if it is working for you now. (Get the code again from above as from the store it takes a couple of weeks to update)

Hey @luciotorelli,
just FYI: I never receive an update via the Module Store for your module. Other modules show available updates and that more or less instantly whenever they are available. Is this a known issue or just for me somehow?

jorritsmit · 2026-02-27T18:21:46Z

jorritsmit
Feb 27, 2026

Hi! for some reason when i enable the module my card immediately disappears. i cant figure out what i am missing, anyone got any idea?

0 replies

misteriks · 2026-03-02T16:08:37Z

misteriks
Mar 2, 2026

Should the height (and width) of the card auto-change after selecting the Room Card Plus Module?
For me it retains the slider format

2 replies

misteriks Mar 5, 2026

This only seems to happen in the Masonry layout and not in the Sections layout

luciotorelli Mar 7, 2026
Author

@misteriks I have only tested on the sections layout as it uses the row/height settings for it's height. I'd recommend swapping if possible.

misteriks · 2026-03-05T15:39:32Z

misteriks
Mar 5, 2026

Something I noticed. If 'Text scrolling effect' is toggled off then the custom state entities defined in the module settings are no longer shown

0 replies

luciotorelli · 2026-03-07T20:23:30Z

luciotorelli
Mar 7, 2026
Author

Hey everyone, I have updated the card to now have a "footer/drawer" so any bottom sub-buttons card added will show there. For the issues being mentioned above if you could open an issue at https://github.com/luciotorelli/room-card-plus/issues and I will have a look, don't forget to support, please.

10 replies

DerHerzog7 Mar 17, 2026

Ah ok. @luciotorelli any ideas?

githoss Mar 18, 2026

@DerHerzog7 I tried a few things and may have found a workaround/quirk to get this working: sub-button groups. If you want 3 main sub-buttons, try something like this:

sub_button:
  main:
    - name: Row 1
      buttons_layout: inline
      group:
        - entity: light.kitchen_lights_all
    - name: Row 2
      buttons_layout: inline
      group:
        - entity: media_player.burrow_show_kitchen
    - name: Row 3
      buttons_layout: inline
      group:
        - entity: switch.bn_plg_1_socket

Let me know if that works for you. I've also gotten it working with 2 rows of 2 buttons, but you have to set the Room Card Plus module's sub_buttons_per_column: 1.

DerHerzog7 Mar 18, 2026

@DerHerzog7 I tried a few things and may have found a workaround/quirk to get this working: sub-button groups. If you want 3 main sub-buttons, try something like this:
sub_button:

  main:

    - name: Row 1

      buttons_layout: inline

      group:

        - entity: light.kitchen_lights_all

    - name: Row 2

      buttons_layout: inline

      group:

        - entity: media_player.burrow_show_kitchen

    - name: Row 3

      buttons_layout: inline

      group:

        - entity: switch.bn_plg_1_socket
Let me know if that works for you. I've also gotten it working with 2 rows of 2 buttons, but you have to set the Room Card Plus module's sub_buttons_per_column: 1.

I was actually going to message you. Check out Collapsible Sub Buttons module. The author made some edits which actually fixed the drawer issues with room card.

Works great now.

#2277

githoss Mar 19, 2026

Thanks, @DerHerzog7 . I actually tried Collapsible Sub Buttons and really liked it. I just wish it could be triggered by a single tap instead of double. I'm going through the code to see how I can change it to single tap, but I'm no programmer..

DerHerzog7 Mar 19, 2026

Ask the dev. They're super responsive and helpful.

After all this I realised I may have been trying to get the drawer perfect when I am gonna build a pop up anyway, so the drawer becomes redundant.

Are you using the drawer with a pop up? How are you structuring your use case?

Collapsible sub buttons work for quick access to sub functions though.

DerHerzog7 · 2026-03-13T06:15:18Z

DerHerzog7
Mar 13, 2026

Any idea why the main icon isn't updating icon or colour based on conditions? The conditions are passing but nothings changing.

2 replies

DerHerzog7 Mar 13, 2026

Ok so it might be the new purpose-specific triggers and conditions I had enabled in the labs. Turning this off fixed it.

Mordano Mar 20, 2026

I had the same issue today. Disabling and re-enabling the module fixed the issue. Why this is, I can't explain.

titro · 2026-03-15T16:37:43Z

titro
Mar 15, 2026

Any idea why the button sub button layout is not working? If i change size or corne, nothin happens.

And you have a warning, that the sub grouping should not be used.
But i want a grouping with one line a few elements, another line other elements and not "filled up until no space"
Are there negative effects if i use the bubble card group sub button anyway?

0 replies

titro · 2026-03-15T17:59:30Z

titro
Mar 15, 2026

Hey,
i have set up a first version of the card but the width of the title is way too small. i played around with all the values around the title and icons but i do not get the title more to the right or with more width.

`type: custom:bubble-card
card_type: button
button_type: state
sub_button:
main: []
bottom:
- name: Automatically grouped
buttons_layout: inline
group:
- entity: cover.rollade_wohnzimmer_links
fill_width: false
- entity: cover.rollade_wohnzimmer_rechts
fill_width: false
- entity: cover.rollade_wohnzimmer_front
fill_width: false
justify_content: end
- name: Licht
buttons_layout: inline
group:
- entity: light.wohnzimmer_licht_vorne
fill_width: false
show_name: false
show_attribute: false
- entity: light.wohnzimmer_licht_hinten
show_name: false
fill_width: false
show_attribute: false
- entity: switch.m_wohnzimmer_steckdose_4_1_knx_aktor_1_0_10
show_name: false
fill_width: false
show_attribute: false
justify_content: end
bottom_layout: rows
modules:

room-card-plus
room-card-plus:
footer_button_radius: 11
footer_columns: 4
footer_grid_gap: 12
footer_button_size: 42
icon_width: 180
icon_height: 63
icon_corner_style: diagonal
icon_radius: 52
icon_left: -39
icon_size: 30
sub_button_size: 46
sub_button_radius: 13
ts_pad_left: 5
state_entities:
- entity: sensor.erdgeschoss_wohnzimmer_temperature
  name: Temperatur Wohnzimmer
  decimals: 1
  show_unit: true
  show_icon: true
  show_text: true
- name: Luftfeuchtigkeit
  entity: sensor.erdgeschoss_wohnzimmer_humidity
  show_unit: true
  show_icon: true
  title_em_mobile: 0.9
  title_em_desktop: 1.2
  state_size_em: 1
  ts_gap: 7
  title_max_width_offset: 18
  ts_pad_top: 11
  card_radius: 23
  ts_block_height: 66
  icon_radius_tl: 10
  icon_bottom: 0
  grid_options:
  columns: 6
  entity: sensor.erdgeschoss_wohnzimmer_temperature
  show_name: true
  tap_action:
  action: none
  rows: 3.813
  scrolling_effect: false
  show_icon: true
  force_icon: false
  show_last_changed: false
  show_attribute: false
  show_last_updated: false
  name: Wohnzimmer
  icon: mdi:sofa
  `

1 reply

titro Mar 15, 2026

ah . the title is deytroyed if sub button bottom is used. even without groups:

xoatrash · 2026-03-19T19:45:47Z

.bubble-sub-button {
    width: 80px !important;
  }

titro Mar 21, 2026

Yeah something is really wrong with the sub Buttons. No config is working and it crashes the title width...

Uh oh!

[Styling Module] Room Card Plus #2113

Uh oh!

Uh oh!

Room Card Plus

🧩 Get this Module

✅ Before posting your module

Replies: 24 comments · 56 replies

Uh oh!

Uh oh!

luciotorelli Jan 12, 2026 Author

Uh oh!

Uh oh!

Uh oh!

luciotorelli Jan 12, 2026 Author

Uh oh!

Uh oh!

luciotorelli Jan 13, 2026 Author

Uh oh!

Uh oh!

Example where it works when using a standard bubble card:

Examples where using a dropdown within the room card its hidden behind others:

Uh oh!

luciotorelli Jan 13, 2026 Author

Uh oh!

luciotorelli Jan 13, 2026 Author

Uh oh!

Uh oh!

Uh oh!

luciotorelli Jan 14, 2026 Author

Uh oh!

Clooos Jan 14, 2026 Maintainer

Uh oh!

luciotorelli Jan 14, 2026 Author

Uh oh!

Clooos Jan 15, 2026 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

luciotorelli Jan 14, 2026 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

luciotorelli Jan 31, 2026 Author

Uh oh!

Uh oh!

Uh oh!

luciotorelli Jan 15, 2026 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 24 comments 56 replies

luciotorelli Jan 12, 2026
Author

luciotorelli Jan 12, 2026
Author

luciotorelli Jan 13, 2026
Author

luciotorelli Jan 13, 2026
Author

luciotorelli Jan 13, 2026
Author

luciotorelli Jan 14, 2026
Author

Clooos Jan 14, 2026
Maintainer

luciotorelli Jan 14, 2026
Author

Clooos Jan 15, 2026
Maintainer

luciotorelli Jan 14, 2026
Author

luciotorelli Jan 31, 2026
Author

luciotorelli Jan 15, 2026
Author