[Bug]: Home Assistant 2025.5.0 deprecated mwc-tab components

[Scags104]

Description

As seen in the image below. My tabs have now grown so large they take up the whole screen. I have tried clearing cache etc but seems to be a bug with the latest beta.

Environment

- OS: Windows/Android App
- Browser: Firefox
- Home Assistant Version: Home Assistant 2025.5.0b0       
- Tabbed Card Version: 0.4.0 alpha 2

Reproducible configuration

type: custom:tabbed-card
styles:
  "--mdc-theme-primary": rgb(var(--my-blue))
  "--mdc-tab-text-label-color-default": rgb(var(--my-grey))
tabs:
  - card:
      square: false
      type: grid
      columns: 4
      cards:
        - type: custom:button-card
          template: button_single
          name: mail
          entity: sensor.mail_usps_mail
        - type: custom:button-card
          template: button_single
          name: delivering
          entity: sensor.mail_usps_delivering
        - type: custom:button-card
          template: button_single
          name: delivered
          entity: sensor.mail_usps_delivered
        - type: custom:button-card
          template: button_single
          name: images
          entity: camera.mail_usps_camera
    attributes:
      stacked: true
      label: USPS
      icon: si:usps
  - card:
      square: false
      type: grid
      columns: 3
      cards:
        - type: custom:button-card
          template: button_single
          name: hub
          entity: sensor.mail_amazon_hub_packages
        - type: custom:button-card
          template: button_single
          name: delivered
          entity: sensor.mail_amazon_packages_delivered
        - type: custom:button-card
          template: button_single
          name: images
          entity: camera.mail_amazon_delivery_camera
    attributes:
      stacked: true
      label: Amazon
      icon: si:amazon
  - card:
      square: false
      type: grid
      columns: 3
      cards:
        - type: custom:button-card
          template: button_single
          name: delivering
          entity: sensor.mail_ups_delivering
        - type: custom:button-card
          template: button_single
          name: delivered
          entity: sensor.mail_ups_delivered
    attributes:
      stacked: true
      label: UPS
      icon: si:ups
  - card:
      square: false
      type: grid
      columns: 3
      cards:
        - type: custom:button-card
          template: button_single
          name: delivering
          entity: sensor.mail_fedex_delivering
        - type: custom:button-card
          template: button_single
          name: delivered
          entity: sensor.mail_fedex_delivered
    attributes:
      stacked: true
      icon: si:fedex
      label: FedEx

Additional context

No response

[ildar170975]

Have you tried with a grid card w/o tab-card?
And please do not assign issues to a particular person, this is like obliging.

[Scags104]

Have you tried with a grid card w/o tab-card? And please do not assign issues to a particular person, this is like obliging.

I don't understand your meaning. All my grid cards are working fine, some of my tabbed cards are in grids, some are not, both are reacting the same.

I don't believe I did assign to anyone and rather was part of the issue creation workflow? Maybe a rouge click?

[Scags104]

see changelog

Theming & Typography

In this release, we’ve made foundational updates to our theming system, which include backwards incompatible changes:

Polymer Components Removed: Legacy Polymer-based components have been fully removed. As a result, all related paper-* CSS variables have also been removed.
    Some variables have been migrated to new theme tokens.
    Others were outdated and have been removed entirely.

New Typography Variables: We’ve introduced a new set of typography CSS variables to lay the groundwork for a more consistent and modern UI.
    These are part of an ongoing refactor and are not yet in use everywhere. More adoption will follow in future releases.

If you’re maintaining custom cards or themes, please update any usage of the following variables accordingly.

✅ New tokens

--ha-font-family-body
--ha-font-family-heading
--ha-font-family-code
--ha-font-family-longform
--ha-font-size-scale
--ha-font-size-2xs
--ha-font-size-xs
--ha-font-size-s
--ha-font-size-m
--ha-font-size-l
--ha-font-size-xl
--ha-font-size-2xl
--ha-font-size-3xl
--ha-font-size-4xl
--ha-font-weight-light
--ha-font-weight-normal
--ha-font-weight-medium
--ha-font-weight-bold
--ha-font-weight-body
--ha-font-weight-heading
--ha-font-weight-action
--ha-line-height-condensed
--ha-line-height-normal
--ha-line-height-expanded
--ha-font-smoothing

CSS

❌ Removed tokens

--paper-font-common-nowrap_-text-overflow
--paper-font-display1-letter-spacing
--paper-font-headline-letter-spacing
--paper-font-common-base-font-family
--paper-font-common-base--webkit-font-smoothing
--paper-font-common-code-font-family
--paper-font-common-code--webkit-font-smoothing
--paper-font-common-nowrap-white-space
--paper-font-common-nowrap-overflow
--paper-font-title-overflow
--paper-font-title-text-overflow
--paper-font-title-text-overflow
--paper-font-title-white-space
--paper-item-body-two-line-min-height
--paper-time-input-justify-content
--paper-item-body-three-line-min-height
--paper-item-icon-width
--paper-card-header-color
--paper-dialog-color
--paper-font-headline-white-space
--paper-font-headline-overflow
--paper-font-headline-text-overflow
--paper-font-subhead-white-space
--paper-font-subhead-overflow
--paper-font-subhead-_text-overflow
--paper-item-icon-active-color
--paper-listbox-background-color

CSS

🔄 Migrated tokens

--code-font-family → --ha-font-family-code
--paper-font-title_--webkit-font-smoothing → --ha-font-smoothing
--paper-font-headline--webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1--webkit-font-smoothing → --ha-font-smoothing
--paper-font-subhead--webkit-font-smoothing → --ha-font-smoothing
--paper-font-body1--webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1-font-family → --ha-font-family-body
--paper-font-display1-font-size → --ha-font-size-4xl
--paper-font-display1-font-weight → --ha-font-weight-normal
--paper-font-display1-line-height → --ha-line-height-condensed
--paper-font-headline-font-family → --ha-font-family-body
--paper-font-headline-font-size → --ha-font-size-2xl
--paper-font-headline-font-weight → --ha-font-weight-normal
--paper-font-headline-line-height → --ha-line-height-condensed
--paper-font-title-font-family → --ha-font-family-body
--paper-font-title-font-size → --ha-font-size-xl
--paper-font-title-font-weight → --ha-font-weight-medium
--paper-font-title-line-height → --ha-line-height-normal
--paper-font-subhead-font-family → --ha-font-family-body
--paper-font-subhead-font-size → --ha-font-size-l
--paper-font-subhead-font-weight → --ha-font-weight-normal
--paper-font-subhead-line-height → --ha-line-height-normal
--paper-font-body1-font-family → --ha-font-family-body
--paper-font-body1-font-size → --ha-font-size-m
--paper-font-body1-font-weight → --ha-font-weight-normal
--paper-font-body1-_line-height → --ha-line-height-normal
--paper-item-icon-color → --state-icon-color

[Mariusthvdb]

I have completely different but just as disastrous effects....

so yeah a lot of work to be done... ;-(

se also https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/2023?u=mariusthvdb for impact in the Core tabs

I did find a way to set an active tab indicator color, but icon color wont change anymore. And, icon size change causes a positional change in the tab

I remember seeing that in Tabbed card too and fixing it with a specific setting, but given the complete failure of the tabs now in tabbed-card, we seems to be in bigger trouble than that

fwiw, this is my style section:

style:
  .: |
    mwc-tab:hover {
      --mdc-theme-primary: var(--power-color);
      --mdc-tab-color-default: var(--power-color);
    }
    mwc-tab-bar {
      background: {{'var(--lovelace-background)'
                    if is_state('binary_sensor.donker_thema','on')
                    else 'var(--primary-color)'}};
    }

  mwc-tab:
    $:
      mwc-tab-indicator $: |
       .mdc-tab-indicator__content--underline {
          border-color: var(--active-color);
        }

      .: |
        .mdc-tab {
          min-width: 80px;
        }
        .material-icons {
          display: contents !important;
        }

        .mdc-tab--active {
          --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
          /*background: var(--text-color-off) !important;*/
        }

[ildar170975]

I don't believe I did assign to anyone and rather was part of the issue creation workflow? Maybe a rouge click?

Sorry, did not mean to attack you, you could be right , that could be a part of an automatic workflow.
Will check this card in a week for variables.

[Mariusthvdb]

From dev in Discord #beta

The frontend project is moving over to shoelace, which will become possibly web awesome. Over the years, we moved from polymer to material 2 and started some work on material 3. Google has put the material 3 library in maintainance mode since the start of 2024 and it is not moving anywhere since then. This month release removed all polymer components, most notably the sidebar and dashboard tabs.
Into a bigger picture, the first set of css vars being introduced now shows a start of something structural since now it's not easy to see what css var is needed to tweak stuff around.
The reason for tabbed-card being broken is that it relies on mwc-tab, which was completely replaced by shoelace in this release. The mwc-tab component it relies on is never imported in the tabbed-card, so it became non existant and therefore broken.

[kinghat]

thanks for bringing this to my attention. i would have found out when 2025.5.0 is released 😅 ill try and come up with something.

i think the issues are just default assigning to me.

[Mariusthvdb]

fwiw, as a long time user, I am really sorry this card is completely borked now. Hope it can be fixed at anytime.
However, since it is a rather important view in my config, I had to find a replacement, and to my surprise, I found one that is working just beautifully and more importantly, all in core.....

I had 5 tabbed cards for 5 floors. After creating 5 input_selects in the UI, and changing the yaml to use those as conditionals I have a 1-1 replacement that is super fast.

my tabs were in includes, so I only had to replace the 'tabbed' system. The tabbed icons are replaced by the inline Tile card, and the rest is identical.:

type: vertical-stack
# remove the gap to really glue them together
card_mod:
  style: |
    div#root {
      row-gap: 0;
    }
cards:
  - type: tile
    card_mod: !include /config/dashboard/card_mods/tile_input_select.yaml
    features:
      - type: select-options
    features_position: inline
    vertical: false
    entity: input_select.woongedeelte_tabs
    hide_state: true

  - type: conditional
    conditions:
      - condition: state
        entity: input_select.woongedeelte_tabs
        state: Bijkeuken
    card: !include /config/dashboard/includes/plattegrond/include_tab_bijkeuken.yaml

  - type: conditional
    conditions:
      - condition: state
        entity: input_select.woongedeelte_tabs
        state: Keuken
    card: !include /config/dashboard/includes/plattegrond/include_tab_keuken.yaml

  - type: conditional
    conditions:
      - condition: state
        entity: input_select.woongedeelte_tabs
        state: Eetkamer
    card: !include /config/dashboard/includes/plattegrond/include_tab_eetkamer.yaml

  - type: conditional
    conditions:
      - condition: state
        entity: input_select.woongedeelte_tabs
        state: Woonkamer
    card: !include /config/dashboard/includes/plattegrond/include_tab_woonkamer.yaml

[kinghat]

ive been trying to import the mwc-* tab components back in as a quick fix but have been getting what seems like a dependency issue that i cant track down. ha didnt switch everything away from mwc components so when i import them back in there is a clash somewhere:

if anyone has any ideas on how to get the import of mwc-tab and mwc-tab-bar working on main i would appreciate it. that way it can be a temp hold off till the component is migrated to the new shoelace component.

i would suggest not upgrading to ha 2025.5.0 until then. sorry i couldnt figure this one out in time for the release yall.

[Scags104]

@kinghat spitballing here. Can you not add it as a dependency to your package.json?

"dependencies": { "@material/mwc-tab": "^0.27.0", "@material/mwc-tab-bar": "^0.27.0", "custom-card-helpers": "^1.9.0", "lit": "^2.6.1" }

[kinghat]

@kinghat spitballing here. Can you not add it as a dependency to your package.json?

"dependencies": { "@material/mwc-tab": "^0.27.0", "@material/mwc-tab-bar": "^0.27.0", "custom-card-helpers": "^1.9.0", "lit": "^2.6.1" }

ya thats all fine. even digging into the lock file and recreating it i cant find a mismatch. let me push my branch.

pushed branch: https://github.com/kinghat/tabbed-card/tree/fix/issue-162/tab-component-deprecation

[storm1er]

I did the 2025.5 since it's official, is it possible to have a release or pre-release of this branch?

In my case, the UI is completely broken :(