Skip to content

LCARdS 2026.06.16.1

Choose a tag to compare

View all tags
@github-actions github-actions released this 17 Jun 00:33
2026.06.16.1
2f54eb8
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

A larger release with some new structural features to assist in creating dashboards, as well as some important fixes (keep those issues coming!)

It's early days for these two new layout features, you will likely find bugs or tweaks needed - please report them in an issue if you do!

New Features

LCARdS Dashboard Layout View (lcards-layout-view)

A new Lovelace view type (custom:lcards-layout-view), inspired by lovelace-custom-layout (which I use heavily throughout my system) This view renders a fully configurable CSS Grid and provides a built-in WYSIWYG grid editor directly on the dashboard.

image

Layout editing:

  • Add, resize, reorder, and delete rows and columns directly on the live grid
  • Draw, rename, and delete named grid areas by painting cells
  • Set gap, grid height, margins, and overflow per view
  • Responsive mediaquery grid overrides that switch layouts at specific breakpoints

Card placement:

  • Cards are assigned to a named area via view_layout.grid-area — the editor injects this automatically on add
  • Placement controls per card: alignment, margin, and overflow — set inline without leaving the dashboard
  • Full support for HA's native card Visibility conditions (delegated to hui-card)

Per-area surfaces (layout.areas — LCARdS extension):

Areas are first-class card-independent styled surfaces. Configurable settings to style background colours, background image, borders, and other CSS properties for card placements.

Schema compatibility: The layout block is intentionally compatible with lovelace-layout-card's custom:grid-layout schema, making it possible to transition existing configurations. Per-area surfaces and the in-view editor are LCARdS-only extensions.

LCARdS Layout Card (lcards-layout-card)

The card version of the LCARdS layout view: (custom:lcards-layout-card) embeds the same customizable CSS Grid inside any area of lcards-layout-view (or any other card container or dashboard.)
It shares the same layout schema as the view, so the same configuration patterns and per-area surface settings apply at the card level.

Like the WYSIWYG editing of the dashboard version, the card ships with Layout Studio — a full editor dialog accessible from the card's editor panel

image

LCARdS Shell Dashboard (Preview)

Screencast_20260616_182219

Included is a new dashboard strategy (custom:lcards-shell-strategy) which registers in HA's New Dashboard picker.
This dashboard is built on the new LCARdS layout dashboard view lcards-layout-view and card lcards-layout-card. It serves as an example of how to put these to use in a real dashboard scenario.

The shell includes a collapsible top header bar, a left sidebar with page navigation, a dynamic room selector, and a right sidebar — all wired to helper entities you configure in the strategy's setup dialog:

Preview note: The Shell Strategy is a proof-of-concept and testing vehicle for the layout primitives. It requires auto-entities (HACS) for the dynamic room light list.
Edit the dashboard and Take Control to get access to the full underlying YAML that was generated.

Custom State Bucket Mapping (state_classification)

Cards that use state-based colours (lcards-button, lcards-elbow, lcards-slider) now support a top-level state_classification key that controls how raw entity states map into the buckets like active / inactive / default or any other custom style bucket you create. You can also direct which bucket catches any fall-through values.

For example, when a person is at a custom zone, the entity state is the zone name (e.g. "work", "downtown"). Before, all such zone names fell into the inactive bucket (the person is not home so it was considered inactive where you would maybe expect it to fall through to the default bucket.) Now, you can direct these via the else: key within state_classification.

type: custom:lcards-button
entity: person.jay
state_classification:
  else: default        # unmapped zone names → "default" bucket
style:
  card:
    color:
      background:
        home: var(--lcars-green)
        not_home: var(--lcars-mango)
        default: var(--lcars-blue)    # custom zones not explicitly defined now land here

You can now also override builtin bucket values, or create your own buckets. Please see the (documentation) for details.

Elbow: Arc Radius Modes & Editor Overhaul (fix #361)

The lcards-elbow card has been uplifted with many improvements for the control of overall elbow style, and the editing UX.

  • config fields for arcs now accept keyword modes in addition to raw pixel values. Giving full control on how the arcs are derived from the shape of the card and the elbow arms.
  • Clamping mode of the arcs is configurable. You can now override the default camp protection that would recalculate arcs when they would not fit within the card's dimensions.
  • Full card editor uplift for elbow arcs:
    • reorganized sections for settings
    • live preview showing how the selected settings drive arc calculations, and show before/after values if clamping was applied.
  • Reference diagram updated for clarity
image

Enhancements & Fixes

  • Position Names Canonicalized (fix #367): The 9-point position system used throughout now uses consistent hyphenated names everywhere: center-left and center-right. Internal alias normalizer handles any existing configs automatically — no YAML changes required.
  • Animation Lifecycle Fix (TriggerManager Lifecycle Guard) (fix #365): animations will now properly stop when using on_entity_change while etc.
  • lcards-select-menu now accepts explicit height configuration alongside its existing grid layout options, giving more precise control when using the select menu in fixed-height grid areas.
  • Font Asset autoload: fixed font autoloading issue. Font definitions now support an autoLoad property in the AssetManager. When set, the font is loaded automatically at LCARdS initialization without requiring explicit activation. Core fonts like Antonio have been autoloaded at startup in case they are not available via HA theme.
  • CI: CSS Variable Deprecation Warnings: Build-time CSS variable validator (which runs as part of npm run build) now reports deprecation warnings for any --lcars-* or --lcards-* variables that have been renamed or removed from the upstream themes.

Full Changelog: 2026.06.01.1...2026.06.16.1

Assets 3
Loading