[Styling Module] Room Card Plus

[luciotorelli]

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:

1. 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.2.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 sepRaw = (cfg.state_separator ?? '').toString();
              const sep = sepRaw.replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
              const sepGapL = Number(cfg.state_separator_gap_left ?? 6);
              const sepGapR = Number(cfg.state_separator_gap_right ?? 6);
              const joiner = sep
                ? `<span class="room-card-plus-state-sep" style="display:inline-flex; align-items:center; padding-left:${sepGapL}px; padding-right:${sepGapR}px; opacity:0.5; user-select:none;">${sep}</span>`
                : `<span style="display:inline-block; width:${gapPx}px;"></span>`;

              const html =
                `<span class="room-card-plus-state-marker" style="display:none;"></span>` +
                items.map(i => i.html).join(joiner);

              /* 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_separator
          label: Separator between states (e.g. · or |, leave empty for none)
          selector:
            text:
        - name: state_separator_gap_left
          label: Gap left of separator (px)
          default: 6
          selector:
            number:
              min: 0
              max: 24
              step: 1
        - name: state_separator_gap_right
          label: Gap right of separator (px)
          default: 6
          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]

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

[luciotorelli]

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

[DerHerzog7]

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]

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

[luciotorelli]

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]

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]

@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]

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;
  }

[luciotorelli]

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

[luciotorelli]

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]

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

[Mordano]

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!

[luciotorelli]

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]

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]

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]

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]

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]

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.

[luciotorelli]

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

[Dingosworld]

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]

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

[luciotorelli]

This has been fixed, ty!

[xoatrash]

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?

[luciotorelli]

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]

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]

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.

[Dingosworld]

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.

[luciotorelli]

Thanks @xoatrash and @Dingosworld, this is now in! 🎉

You can set an optional separator between Entity States (any character, e.g. · or |), with two independent controls: "Gap left of separator" and "Gap right of separator" (px). That lets you adjust the spacing on each side and avoid the oversized gap from the icon workaround, @xoatrash.

It's in the card editor under State entities. Look for Separator between states plus the two gap fields. Available in v1.2.0, so just update the module. 🙏

@Dingosworld displaying the status across two lines is a separate idea. Noted, and I'll look at it down the line.

[xoatrash]

@luciotorelli

Thank you so much. I'll try this out. :)

EDIT:

I have a little issue with 1.2.0. When I try to import the module manually, it disappears as soon as I save. When importing via store, only 1.1.0 is available.

[jarrah31]

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!

[guentde]

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?

[guentde]

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]

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.

[Nivlac7]

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?

[oschick]

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]

@luciotorelli anyway we could get this PR pushed soon?

[luciotorelli]

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]

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]

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]

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?

[luciotorelli]

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]

Done, Thank you 👍

[Dingosworld]

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?

[rlizzo]

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]

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.

[DerHerzog7]

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

[DerHerzog7]

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]

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

[portbusy]

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!

[misteriks]

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]

@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]

@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]

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?

[luciotorelli]

@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]

@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?

[xoatrash]

@luciotorelli I have the same issue, and I am already on the latest version.
Background color ruse does not work because it gets always overwritten by the background color and opacity in Main Icon Styling & Positioning, even if not value is set. (because it defaults to your coded value)

[titro]

I really tried to use room card but it was too buggy so i created it on my own with raw bubble card and smart sub Button styling

[jorritsmit]

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?

[misteriks]

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

[misteriks]

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

[luciotorelli]

@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]

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

[luciotorelli]

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.

[DerHerzog7]

Ah ok. @luciotorelli any ideas?

[githoss]

@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]

@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]

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]

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]

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

[DerHerzog7]

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

[Mordano]

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

[titro]

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?

[titro]

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
    `

[titro]

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

[xoatrash]

Hi there, it it possible to change the width of the sub-buttons?

[titro]

In my Installation all config regarding sub Buttons are Not working. See my threads above... 🤔

[xoatrash]

It works only by changing it manually like:

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

[titro]

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

[Nildran]

I can't seem to change the roundness of the bottom corner of the left icon's background, even when all the radius are set to 0. I don't understand why. When I move "icon_left" toward the center of the map, the background looks perfectly square (with a radius of 0), but as soon as I move it toward the lower-left corner of the map, a rounded corner reappears. How can I fix this?

Here is a screenshot and the YAML for my map.

type: custom:bubble-card
card_type: button
button_type: name
name: Lab
icon: mdi:ip-network
tap_action:
  action: none
show_name: true
rows: 2.625
modules:
  - room-card-plus
room-card-plus:
  state_multi_gap: 0
  state_icon_gap: 0
  title_em_desktop: 1.3
  ts_pad_top: 20
  title_em_mobile: 1.2
  card_radius: 0
  icon_corner_style: square
  icon_radius: 0
  icon_radius_tl: 0
  icon_radius_tr: 0
  icon_radius_br: 0
  icon_radius_bl: 0
  main_icon_bg_off_opacity: 0
  icon_left: -20

[eddiebeazer]

I had the same problem and I think its because it overrides show_states. So on the button you need show_states to be true. Add this after show_name in your config and then add your state entities. I found this out by accident while I was tinkering last night show_state: true