toolbar is now centered on screen and in editor / preview mode

Author: warmfire540

.github/dependabot.yaml

@@ -14,7 +14,7 @@ updates:
     groups:
       all-dependencies:
         patterns:
-          - "*" # This pattern matches all dependencies
+          - '*' # This pattern matches all dependencies
         update-types:
-          - "minor"
-          - "patch"
+          - 'minor'
+          - 'patch'

.github/workflows/pull_request.yaml

@@ -67,7 +67,7 @@ jobs:
           github-token: '${{ secrets.GITHUB_TOKEN }}'
 
       - name: Enable auto-merge for Dependabot PRs
-        if: steps.metadata.outputs.update-type == 'version-update:semver-patch'
+        if: steps.metadata.outputs.update-type == 'version-update:semver-patch' || steps.metadata.outputs.update-type == 'version-update:semver-minor'
         run: gh pr merge --auto --merge "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}

.github/workflows/release-cd.yaml

@@ -97,12 +97,12 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
-      - name: Get Last PR Title
-        id: get-pr-title
+      - name: Get Last PR Title and Description
+        id: get-pr-info
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
-          PR_TITLE=$(gh api graphql -f query='
+          PR_DATA=$(gh api graphql -f query='
             query {
               repository(owner: "${{ github.repository_owner }}", name: "${{ github.event.repository.name }}") {
                 commit: object(expression: "${{ github.sha }}") {
@@ -111,23 +111,35 @@ jobs:
                       edges {
                         node {
                           title
+                          body
                         }
                       }
                     }
                   }
                 }
               }
             }
-          ' --jq '.data.repository.commit.associatedPullRequests.edges[0].node.title')
+          ')
+          PR_TITLE=$(echo "$PR_DATA" | jq -r '.data.repository.commit.associatedPullRequests.edges[0].node.title')
+          PR_BODY=$(echo "$PR_DATA" | jq -r '.data.repository.commit.associatedPullRequests.edges[0].node.body')
           echo "pr_title=$PR_TITLE" >> $GITHUB_OUTPUT
+          echo "pr_body<<EOF" >> $GITHUB_OUTPUT
+          echo "$PR_BODY" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
       - uses: ncipollo/release-action@v1
         with:
           makeLatest: true
           artifacts: 'dist/**'
           generateReleaseNotes: true
           tag: ${{ needs.bump-version.outputs.newTag }}
-          body: ${{ steps.create-release-notes.outputs.release-notes }}
-          name: '${{ needs.bump-version.outputs.newTag }} - ${{ steps.get-pr-title.outputs.pr_title }}'
+          body: |
+            ${{ steps.get-pr-info.outputs.pr_body }}
+
+
+            ---
+
+            ${{ steps.create-release-notes.outputs.release-notes }}
+          name: '${{ needs.bump-version.outputs.newTag }} - ${{ steps.get-pr-info.outputs.pr_title }}'
 
   update-main:
     name: 'Update main branch with release changes'

README.md

@@ -315,7 +315,6 @@ The card will automatically:
 Common issues and solutions:
 
 1. **Chips not appearing:**
-
    - Verify entities have the "status" label
    - Check entity states match their `on_state` attribute or `on`
    - Ensure the card is properly loaded in resources

package.json

@@ -17,12 +17,12 @@
     "test": "TS_NODE_PROJECT='./tsconfig.test.json' mocha",
     "test:coverage": "nyc npm run test",
     "test:watch": "TS_NODE_PROJECT='./tsconfig.test.json' mocha --watch",
-    "update": "npx npm-check-updates -u && npm i"
+    "update": "npx npm-check-updates -u && yarn install"
   },
   "devDependencies": {
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@open-wc/testing": "^4.0.0",
-    "@parcel/transformer-inline-string": "^2.15.2",
+    "@parcel/transformer-inline-string": "^2.15.4",
     "@testing-library/dom": "^10.4.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/chai": "^5.2.2",
@@ -31,12 +31,12 @@
     "@types/sinon": "^17.0.4",
     "chai": "^5.2.0",
     "jsdom": "^26.1.0",
-    "mocha": "^11.6.0",
+    "mocha": "^11.7.1",
     "nyc": "^17.1.0",
-    "parcel": "^2.15.2",
-    "prettier": "3.5.3",
+    "parcel": "^2.15.4",
+    "prettier": "3.6.2",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "sinon": "^20.0.0",
+    "sinon": "^21.0.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.8.3"

src/card.ts

@@ -5,9 +5,9 @@ import { Task } from '@lit/task';
 import type { Config } from '@type/config';
 import type { HomeAssistant } from '@type/homeassistant';
 import { CSSResult, html, LitElement, type TemplateResult } from 'lit';
-import { state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { version } from '../package.json';
-import { chipStyles, styles } from './styles';
+import { styles } from './styles';
 const equal = require('fast-deep-equal');
 
 /**
@@ -41,7 +41,7 @@ export default class ToolbarStatusChips extends LitElement {
    * @state Marks this as a reactive property that will trigger updates
    */
   @state()
-  private _slug: string | undefined;
+  private readonly _slug: string | undefined;
 
   /**
    * Reference to the current Home Assistant instance
@@ -52,9 +52,32 @@ export default class ToolbarStatusChips extends LitElement {
   /**
    * Flag indicating whether the card is in edit mode
    * Used by the Home Assistant card editor
+   * @property Marks this as a reactive property that reflects to attribute
    */
+  @property({
+    type: Boolean,
+    attribute: 'edit-mode',
+    reflect: true,
+  })
   public editMode: boolean = false;
 
+  /**
+   * Flag indicating whether the card is in preview mode
+   * Used by the Home Assistant card editor
+   * @property Marks this as a reactive property that reflects to attribute
+   */
+  @property({
+    type: Boolean,
+    attribute: true,
+    reflect: true,
+  })
+  get preview() {
+    return (
+      (this as HTMLElement).parentElement?.classList.contains('preview') ??
+      false
+    );
+  }
+
   /**
    * Creates an instance of ToolbarStatusChips
    * Extracts the current URL slug and logs version information
@@ -78,13 +101,11 @@ export default class ToolbarStatusChips extends LitElement {
    * @returns {TemplateResult} The rendered HTML template
    */
   override render(): TemplateResult {
-    const styles = chipStyles(this.isEditing);
     return this._entities.length
       ? this._createChipsTask.render({
           initial: () => html``,
           pending: () => html``,
-          complete: (value) =>
-            html`<div id="chips" style="${styles}">${value}</div>`,
+          complete: (value) => html`${value}`,
           error: (error) => html`${error}`,
         })
       : html``;
@@ -114,7 +135,7 @@ export default class ToolbarStatusChips extends LitElement {
    * @returns {string | undefined} The area ID to use for filtering
    */
   get area() {
-    return this._config.area || this._slug;
+    return this._config.area ?? this._slug;
   }
 
   /**
@@ -144,20 +165,7 @@ export default class ToolbarStatusChips extends LitElement {
    * @returns {string} The path identifier for the status/home view
    */
   get statusPath() {
-    return this._config.status_path || 'home';
-  }
-
-  /**
-   * Determines if the card is currently in editing mode
-   * True if editMode is explicitly set or if parent has 'preview' class
-   * @returns {boolean} Whether the card is being edited
-   */
-  get isEditing(): boolean {
-    return (
-      this.editMode ||
-      (this as HTMLElement).parentElement?.classList.contains('preview') ||
-      false
-    );
+    return this._config.status_path ?? 'home';
   }
 
   /*
@@ -183,7 +191,7 @@ export default class ToolbarStatusChips extends LitElement {
   set hass(hass: HomeAssistant) {
     // get entities with the status label
     let entities = Object.values(hass.entities).filter((entity) =>
-      entity.labels.includes(this.soloLabel || 'status'),
+      entity.labels.includes(this.soloLabel ?? 'status'),
     );
 
     // filter entities by additional label if provided or area if not on the status page
@@ -290,7 +298,7 @@ export default class ToolbarStatusChips extends LitElement {
         return;
       }
 
-      var stack = helpers.createCardElement({
+      const stack = helpers.createCardElement({
         type: 'horizontal-stack',
         cards,
       });

src/entity.ts

@@ -62,18 +62,18 @@ export class ChipEntity {
       case StateValidation.Pass:
         return 'var(--green-color)';
       case StateValidation.Warning:
-        return this.attributes.on_color || 'var(--amber-color)';
+        return this.attributes.on_color ?? 'var(--amber-color)';
       default:
         // Non-numeric fail or below warning threshold
-        return this.attributes.on_color || 'var(--red-color)';
+        return this.attributes.on_color ?? 'var(--red-color)';
     }
   }
 
   /**
    * Indicates whether an optional entity should be excluded when inactive from the status path.
    */
   get excludeOnStatusPath(): boolean {
-    return this.attributes.exclude_on_status_path || false;
+    return this.attributes.exclude_on_status_path ?? false;
   }
 
   /**
@@ -109,36 +109,62 @@ export class ChipEntity {
    */
   private validateState(): StateValidation {
     if (!this.isNumeric(this.state)) {
-      if (this.attributes.on_state) {
-        if (this.state === this.attributes.on_state) {
-          return StateValidation.Error;
-        }
-      } else {
-        if (this.state && ['on', 'true'].includes(this.state.toLowerCase())) {
-          return StateValidation.Error;
-        }
-      }
-      return StateValidation.Pass;
+      return this.validateNonNumericState();
+    }
+
+    return this.validateNumericState();
+  }
+
+  /**
+   * Validates non-numeric state values
+   */
+  private validateNonNumericState(): StateValidation {
+    if (this.attributes.on_state) {
+      return this.state === this.attributes.on_state
+        ? StateValidation.Error
+        : StateValidation.Pass;
+    }
+
+    if (this.state && ['on', 'true'].includes(this.state.toLowerCase())) {
+      return StateValidation.Error;
     }
 
+    return StateValidation.Pass;
+  }
+
+  /**
+   * Validates numeric state values
+   */
+  private validateNumericState(): StateValidation {
     const numericState = parseFloat(this.state!);
 
-    // Check if threshold attributes exist
-    if (
-      this.attributes.numeric_state_pass_threshold === undefined &&
-      this.attributes.numeric_state_warning_threshold === undefined
-    ) {
-      // Fallback logic: Pass if 0, Error if > 0
-      return numericState === 0 ? StateValidation.Pass : StateValidation.Error;
+    if (this.hasThresholds()) {
+      return this.validateWithThresholds(numericState);
     }
 
+    return numericState === 0 ? StateValidation.Pass : StateValidation.Error;
+  }
+
+  /**
+   * Checks if threshold attributes are defined
+   */
+  private hasThresholds(): boolean {
+    return (
+      this.attributes.numeric_state_pass_threshold !== undefined ||
+      this.attributes.numeric_state_warning_threshold !== undefined
+    );
+  }
+
+  /**
+   * Validates numeric state using defined thresholds
+   */
+  private validateWithThresholds(numericState: number): StateValidation {
     if (numericState > this.attributes.numeric_state_pass_threshold) {
       return StateValidation.Pass;
     }
     if (numericState > this.attributes.numeric_state_warning_threshold) {
       return StateValidation.Warning;
     }
-
     return StateValidation.Error;
   }
 }

src/styles.ts

@@ -1,35 +1,24 @@
 import { css } from 'lit';
-import type { DirectiveResult } from 'lit-html/directive';
-import {
-  type StyleMapDirective,
-  styleMap,
-} from 'lit-html/directives/style-map.js';
 
 export const styles = css`
-  #chips {
+  :host {
     --stack-card-gap: 0;
+    width: fit-content;
+    position: fixed;
+    top: 10px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 5;
   }
-`;
 
-export const chipStyles = (
-  editMode: boolean,
-): DirectiveResult<typeof StyleMapDirective> => {
-  return styleMap(
-    editMode
-      ? {
-          position: 'inherit',
-          display: 'flex',
-          transform: 'none',
-          justifyContent: 'center',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-        }
-      : {
-          position: 'fixed',
-          top: '10px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          zIndex: '5',
-        },
-  );
-};
+  /* Styles for edit mode or preview mode */
+  :host([edit-mode]),
+  :host([preview]) {
+    position: inherit;
+    display: flex !important;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+`;