Merge pull request #66 from bramkragten/ha-entity-names

Resolve entity names via hass.formatEntityName
Guard against a hass without formatEntityName
2026-11-03 03:38:45 +00:00 · 2026-09-15 14:47:20 +03:00 · 2026-09-15 12:33:10 +02:00 · 2026-09-14 15:15:03 +02:00 · 2026-09-14 15:08:51 +02:00 · 2024-11-05 22:11:41 +02:00
34 changed files with 6200 additions and 4072 deletions
@@ -2,8 +2,6 @@
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "extends": [
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  "parserOptions": {
    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
@@ -14,7 +12,7 @@
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
    "@typescript-eslint/explicit-function-return-type": [1, { "allowExpressions": true }],
-    "@typescript-eslint/no-namespace": 0
+    "@typescript-eslint/no-namespace": 0,
  },
  "ignorePatterns": ["dist/", "node_modules/", "*.js"]
 }
@@ -1,2 +1,6 @@
 node_modules/
 dist/
+
+devtools/homeassistant/*
+!devtools/homeassistant/configuration.yaml
+!devtools/homeassistant/ui-lovelace.yaml
@@ -1,5 +1,8 @@
 {
  "files.exclude": {
    "dist/**": true
+  },
+  "files.associations": {
+    "*.yaml": "home-assistant"
  }
 }
@@ -76,6 +76,7 @@ entity: input_datetime.alarm_time
 hour_mode: 12
 layout:
  hour_mode: single
+  align_controls: right
 hide:
  name: true
 ```
@@ -89,26 +90,38 @@ type: 'custom:time-picker-card'
 entity: input_datetime.alarm_time
 layout:
  name: inside
-  align_controls: right
+  align_controls: center
 ```

+### Dark theme, embedded layout
+
+![Dark theme embedded](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_embedded.png)
+
+### Dark theme, thin layout
+
+![Dark theme thin layout](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_thin.png)
+
 ### With a custom lovelace theme

 ![Custom theme](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/custom.png)

 ## Options

-| Name        | Type         | Requirement  | Description                                                                                               | Default                  |
-| ----------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------------ |
-| type        | string       | **Required** | `custom:time-picker-card`                                                                                 |                          |
-| entity      | string       | **Required** | [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) entity with `has_time: true` |                          |
-| name        | string       | **Optional** | Card name                                                                                                 | Entity's `friendly_name` |
-| link_values | boolean      | **Optional** | If enabled, will change hour when minutes overflow. E.g. will go from 11:55 to 12:00, instead of 11:00    | `false`                  |
-| hour_mode   | `12` or `24` | **Optional** | Hour format. If `12`, card will show AM/PM picker                                                         | `24`                     |
-| hour_step   | number       | **Optional** | Hour change when clicking arrows                                                                          | `1`                      |
-| minute_step | number       | **Optional** | Minute change when clicking arrows                                                                        | `5`                      |
-| layout      | object       | **Optional** | Card Layout configuration                                                                                 | `none`                   |
-| hide        | object       | **Optional** | Hide object                                                                                               | `none`                   |
+| Name              | Type         | Requirement  | Description                                                                                               | Default                  |
+| ----------------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------------ |
+| type              | string       | **Required** | `custom:time-picker-card`                                                                                 |                          |
+| entity            | string       | **Required** | [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) entity with `has_time: true` |                          |
+| name              | string / list | **Optional** | Card name. Accepts a [structured name](#structured-names) on Home Assistant 2026.4 and later.             | Entity's name |
+| link_values       | boolean      | **Optional** | If enabled, will change hour when minutes overflow. E.g. will go from 11:55 to 12:00, instead of 11:00    | `false`                  |
+| hour_mode         | `12` or `24` | **Optional** | Hour format. If `12`, card will show AM/PM picker                                                         | `24`                     |
+| hour_step         | number       | **Optional** | Hour change when clicking arrows                                                                          | `1`                      |
+| minute_step       | number       | **Optional** | Minute change when clicking arrows                                                                        | `5`                      |
+| delay             | number       | **Optional** | Delay in ms before updating entity                                                                        | `0`                      |
+| layout            | object       | **Optional** | Card Layout configuration                                                                                 | `none`                   |
+| hide              | object       | **Optional** | Hide object                                                                                               | `none`                   |
+| tap_action        | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |
+| double_tap_action | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |
+| hold_action       | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |

 ### Layout Object

@@ -117,26 +130,55 @@ layout:
 | hour_mode      | `single`, `double`        | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` |
 | align_controls | `left`, `center`, `right` | **Optional** | Horizontal alignment of the controls                                                               | `center` |
 | name           | `header`, `inside`        | **Optional** | Whether to show the name as a header or inside the card                                            | `header` |
+| embedded       | boolean                   | **Optional** | Render with embedded style - disables padding, box shadow, and card header                         | `false`  |
+| thin           | boolean                   | **Optional** | Render with reduced paddings                                                                       | `false`  |

 ### Hide Object

-| Name | Type    | Requirement  | Description         | Default |
-| ---- | ------- | ------------ | ------------------- | ------- |
-| name | boolean | **Optional** | Hides the card name | `false` |
+| Name    | Type    | Requirement  | Description                                       | Default |
+| ------- | ------- | ------------ | ------------------------------------------------- | ------- |
+| name    | boolean | **Optional** | Hides the card name                               | `false` |
+| icon    | boolean | **Optional** | Hides the card icon (only with controls "inside") | `false` |
+| seconds | boolean | **Optional** | Hides seconds input                               | `true`  |

 ### Theme Variables

 Time Picker Card will automatically pick up colors from your lovelace theme, but if you want to customize some of them,
 you can use the following variables in your theme's config file:

-| Name                                  | Default                        | Description                            |
-| ------------------------------------- | ------------------------------ | -------------------------------------- |
-| time-picker-elements-background-color | `var(--primary-color)`         | Background color for header and inputs |
-| time-picker-icon-color                | `var(--primary-text-color)`    | Arrow color                            |
-| time-picker-text-color                | `white`                        | Text color                             |
-| time-picker-accent-color              | `var(--primary-color)`         | AM / PM active color                   |
-| time-picker-off-color                 | `var(--disabled-text-color)`   | AM / PM inactive color                 |
-| time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card              |
+| Name                                  | Default                        | Description                                                                                          |
+| ------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| time-picker-elements-background-color | `var(--primary-color)`         | Background color for header and inputs                                                               |
+| time-picker-icon-color                | `var(--primary-text-color)`    | Arrow color                                                                                          |
+| time-picker-text-color                | `white`                        | Text color                                                                                           |
+| time-picker-accent-color              | `var(--primary-color)`         | AM / PM active color                                                                                 |
+| time-picker-off-color                 | `var(--disabled-text-color)`   | AM / PM inactive color                                                                               |
+| time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card                                                                            |
+| time-picker-control-padding           | `8px`                          | Padding for interactive elements. Increase for larger hitboxes of the controls. Example: `10px 12px` |
+
+### Structured names
+
+*Requires Home Assistant 2026.4 or later. On earlier versions a structured `name` falls back to the entity's friendly name.*
+
+Home Assistant composes an entity's display name out of its registry context
+(entity, device, area, floor) rather than one `friendly_name` string. `name` can
+be a list of those parts instead of a plain string, so it keeps following renames
+and matches what the built-in cards show:
+
+```yaml
+type: custom:time-picker-card
+entity: input_datetime.alarm
+name:
+  - type: area
+  - type: entity
+```
+
+Available part types are `entity`, `device`, `parent_device`, `area`, `floor`, and
+`text` (a literal, written as `{type: text, text: 'Alarm'}`). Parts that resolve to
+nothing are dropped. A plain string `name` keeps working exactly as before, and the
+visual editor offers both modes on Home Assistant 2025.11 and later.
+
+See the [Home Assistant developer documentation](https://developers.home-assistant.io/docs/frontend/data#hassformatentitynamestateobj-name-options) for details.

 ## Meta

@@ -147,14 +189,14 @@ you can use the following variables in your theme's config file:
 - [![Twitter][twitter-icon]][twitter-link] [@georgesg92][twitter-link]

 [hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg
-[hacs-link]: https://github.com/custom-components/hacs
+[hacs-link]: https://github.com/hacs/integration
 [downloads-shield]: https://img.shields.io/github/downloads/GeorgeSG/lovelace-time-picker-card/latest/total?color=brightgreen&logo=github
 [downloads-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
 [releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg
 [releases-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
 [ci-shield]: https://img.shields.io/github/workflow/status/GeorgeSG/lovelace-time-picker-card/CI?label=CI&logo=github&
 [ci-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/actions?query=workflow%3ACI
-[maintenance-shield]: https://img.shields.io/maintenance/yes/2020.svg
+[maintenance-shield]: https://img.shields.io/maintenance/yes/2022.svg
 [maintenance-link]: https://github.com/GeorgeSG/lovelace-time-picker-card
 [license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?color=brightgreen
 [license-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE
@@ -0,0 +1,27 @@
+# Configure a default setup of Home Assistant (frontend, api, etc)
+default_config:
+
+homeassistant:
+  packages: !include_dir_named packages/
+
+logger:
+  default: info
+  logs:
+    hacs: debug
+
+lovelace:
+  mode: yaml
+  resources:
+    - type: module
+      url: /hacsfiles/button-card/button-card.js
+    - type: module
+      url: /hacsfiles/lovelace-state-switch/state-switch.js
+    - type: module
+      url: http://127.0.0.1:5000/time-picker-card.js
+  dashboards:
+    lovelace-home:
+      mode: yaml
+      title: Home
+      icon: mdi:home
+      show_in_sidebar: true
+      filename: ui-lovelace.yaml
@@ -0,0 +1,155 @@
+title: Home
+views:
+  - title: dev
+    path: dev
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: markdown
+            content: "# 🕰 Time Picker Card dev"
+          - type: entities
+            entities:
+              - input_datetime.test_date_time
+          - type: horizontal-stack
+            cards:
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: With tap actions
+                hour_mode: 24
+                hour_step: 2
+                tap_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Tap Action"
+                    message: "Debug"
+                double_tap_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Double Tap Action"
+                    message: "Debug"
+                hold_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Hold action"
+                    message: "Debug"
+              - type: custom:time-picker-card
+                name: Hour mode 12, thin, single, hidden name
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single
+                  thin: true
+                hide:
+                  name: true
+          - type: custom:time-picker-card
+            name: delayed
+            entity: input_datetime.test_date_time
+            delay: 1000
+            hour_mode: 12
+            layout:
+              hour_mode: single
+              thin: true
+
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Thin
+            layout:
+              thin: true
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Hidden seconds
+            hide:
+              seconds: false
+
+          - type: horizontal-stack
+            cards:
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Hidden name
+                hour_mode: 12
+                hide:
+                  name: true
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Linked, single hour mode, hidden name
+                link_values: true
+                hour_mode: 12
+                hour_step: 2
+                minute_step: 3
+                layout:
+                  hour_mode: single
+                hide:
+                  name: false
+
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date
+            name: Error
+
+  - title: name inside
+    path: name-inside
+    cards:
+      - type: custom:time-picker-card
+        entity: input_datetime.test_date_time
+        name: Inside, controls right
+        hour_mode: 12
+        layout:
+          name: inside
+          align_controls: right
+      - type: horizontal-stack
+        cards:
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Inside, hidden name
+            layout:
+              name: inside
+            hide:
+              name: true
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Inside, hidden icon
+            layout:
+              name: inside
+            hide:
+              icon: true
+
+  - title: embedded
+    path: embedded
+    cards:
+      - type: vertical-stack
+        cards:
+
+          - type: entities
+            entities:
+              - input_datetime.test_date_time
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Embedded thin
+                hour_mode: 24
+                hour_step: 2
+                layout:
+                  embedded: true
+                  thin: true
+
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Inside
+                hour_mode: 24
+                hour_step: 2
+                layout:
+                  name: inside
+
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single
+                hide:
+                  name: true
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single
@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-babel',
+  testRegex: '/test/.*\\.test?\\.ts$',
+  transformIgnorePatterns: [
+    'node_modules/(?!(testing-library__dom|@open-wc|lit-html|lit-element|pure-lit|lit-element-state-decoupler)/)',
+  ],
+  moduleFileExtensions: ['ts', 'js'],
+};
@@ -1,6 +1,6 @@
 {
  "name": "time-picker-card",
-  "version": "0.1.1",
+  "version": "1.4.0",
  "author": "Georgi Gardev <georgi@gardev.com>",
  "description": "Lovelace time-picker-card",
  "keywords": [
@@ -15,46 +15,36 @@
  "license": "MIT",
  "repository": "git@github.com:GeorgeSG/lovelace-time-picker-card.git",
  "scripts": {
-    "start": "rollup -c --watch",
+    "start": "rollup -c --watch --bundleConfigAsCjs",
    "build": "npm run lint && npm run rollup",
    "lint": "eslint src/*.ts",
-    "rollup": "rollup -c",
-    "test": "./node_modules/karma/bin/karma start ./test/karma.conf.js",
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "test": "jest",
    "release-patch": "npm version patch && git push origin master --tags",
    "release-minor": "npm version minor && git push origin master --tags",
-    "release-major": "npm version major && git push origin master --tags"
+    "release-major": "npm version major && git push origin master --tags",
+    "start:ha": "docker run --rm -p8124:8123 -v $(pwd)/devtools/homeassistant:/config homeassistant/home-assistant:latest"
  },
  "dependencies": {
-    "custom-card-helpers": "^1.6.4",
-    "home-assistant-js-websocket": "^5.1.0",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.2.1"
+    "custom-card-helpers": "^1.9.0",
+    "home-assistant-js-websocket": "^8.0.0",
+    "lit": "^2.8.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@open-wc/testing": "^2.5.16",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^4.0.0",
-    "@types/chai": "^4.2.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "karma": "^5.0.5",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^2.0.1",
-    "karma-rollup-preprocessor": "^7.0.5",
-    "mocha": "^7.1.2",
-    "prettier": "^2.0.5",
-    "rollup": "^1.32.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "sinon": "^9.0.2",
-    "typescript": "^3.8.3"
+    "@el3um4s/rollup-plugin-terser": "^1.0.2",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/jest": "^29.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "eslint": "^8.26.0",
+    "jest": "^29.2.2",
+    "prettier": "^3.3.3",
+    "rollup": "^4.24.4",
+    "rollup-plugin-serve": "^2.0.1",
+    "ts-jest": "^29.0.3",
+    "typescript": "^5.6.3"
  }
 }
@@ -1,15 +1,15 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
 import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import babel from 'rollup-plugin-babel';
+import { terser } from '@el3um4s/rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
 import serve from 'rollup-plugin-serve';

 const dev = process.env.ROLLUP_WATCH;

 const serveOptions = {
  contentBase: ['./dist'],
-  host: '0.0.0.0',
+  host: 'localhost',
  port: 5000,
  allowCrossOrigin: true,
  headers: {
@@ -24,9 +24,9 @@ export default {
    format: 'es',
  },
  plugins: [
+    typescript({ exclude: ['test/**/*'] }),
    nodeResolve(),
    json(),
-    typescript(),
    babel({
      exclude: 'node_modules/**',
    }),
@@ -0,0 +1,207 @@
+import { noChange } from 'lit';
+import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive.js';
+
+import { fireEvent } from 'custom-card-helpers';
+import { ActionHandlerDetail, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
+
+const isTouch =
+  'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+interface ActionHandler extends HTMLElement {
+  holdTime: number;
+  bind(element: Element, options): void;
+}
+
+interface ActionHandlerElement extends HTMLElement {
+  actionHandler?: boolean;
+}
+
+declare global {
+  interface HASSDomEvents {
+    action: ActionHandlerDetail;
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+class ActionHandler extends HTMLElement implements ActionHandler {
+  public holdTime = 500;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public ripple: any;
+
+  protected timer?: number;
+
+  protected held = false;
+
+  private dblClickTimeout?: number;
+
+  constructor() {
+    super();
+    this.ripple = document.createElement('mwc-ripple');
+  }
+
+  public connectedCallback(): void {
+    Object.assign(this.style, {
+      position: 'absolute',
+      width: isTouch ? '100px' : '50px',
+      height: isTouch ? '100px' : '50px',
+      transform: 'translate(-50%, -50%)',
+      pointerEvents: 'none',
+      zIndex: '999',
+    });
+
+    this.appendChild(this.ripple);
+    this.ripple.primary = true;
+
+    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach(
+      (ev) => {
+        document.addEventListener(
+          ev,
+          () => {
+            clearTimeout(this.timer);
+            this.stopAnimation();
+            this.timer = undefined;
+          },
+          { passive: true },
+        );
+      },
+    );
+  }
+
+  public bind(element: ActionHandlerElement, options): void {
+    if (element.actionHandler) {
+      return;
+    }
+    element.actionHandler = true;
+
+    element.addEventListener('contextmenu', (ev: Event) => {
+      const e = ev || window.event;
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      e.cancelBubble = true;
+      e.returnValue = false;
+      return false;
+    });
+
+    const start = (ev: Event): void => {
+      this.held = false;
+      let x;
+      let y;
+      if ((ev as TouchEvent).touches) {
+        x = (ev as TouchEvent).touches[0].pageX;
+        y = (ev as TouchEvent).touches[0].pageY;
+      } else {
+        x = (ev as MouseEvent).pageX;
+        y = (ev as MouseEvent).pageY;
+      }
+
+      this.timer = window.setTimeout(() => {
+        this.startAnimation(x, y);
+        this.held = true;
+      }, this.holdTime);
+    };
+
+    const end = (ev: Event): void => {
+      // Prevent mouse event if touch event
+      ev.preventDefault();
+      if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.stopAnimation();
+      this.timer = undefined;
+      if (this.held) {
+        fireEvent(element, 'action', { action: 'hold' });
+      } else if (options.hasDoubleClick) {
+        if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
+          this.dblClickTimeout = window.setTimeout(() => {
+            this.dblClickTimeout = undefined;
+            fireEvent(element, 'action', { action: 'tap' });
+          }, 250);
+        } else {
+          clearTimeout(this.dblClickTimeout);
+          this.dblClickTimeout = undefined;
+          fireEvent(element, 'action', { action: 'double_tap' });
+        }
+      } else {
+        fireEvent(element, 'action', { action: 'tap' });
+      }
+    };
+
+    const handleEnter = (ev: KeyboardEvent): void => {
+      if (ev.keyCode !== 13) {
+        return;
+      }
+      end(ev);
+    };
+
+    element.addEventListener('touchstart', start, { passive: true });
+    element.addEventListener('touchend', end);
+    element.addEventListener('touchcancel', end);
+
+    element.addEventListener('mousedown', start, { passive: true });
+    element.addEventListener('click', end);
+
+    element.addEventListener('keyup', handleEnter);
+  }
+
+  private startAnimation(x: number, y: number): void {
+    Object.assign(this.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      display: null,
+    });
+    this.ripple.disabled = false;
+    this.ripple.active = true;
+    this.ripple.unbounded = true;
+  }
+
+  private stopAnimation(): void {
+    this.ripple.active = false;
+    this.ripple.disabled = true;
+    this.style.display = 'none';
+  }
+}
+
+customElements.define('action-handler-time-picker-card', ActionHandler);
+
+const getActionHandler = (): ActionHandler => {
+  const body = document.body;
+  if (body.querySelector('action-handler-time-picker-card')) {
+    return body.querySelector('action-handler-time-picker-card') as ActionHandler;
+  }
+
+  const actionhandler = document.createElement('action-handler-time-picker-card');
+  body.appendChild(actionhandler);
+
+  return actionhandler as ActionHandler;
+};
+
+export const actionHandlerBind = (
+  element: ActionHandlerElement,
+  options?: ActionHandlerOptions,
+): void => {
+  const actionhandler: ActionHandler = getActionHandler();
+  if (!actionhandler) {
+    return;
+  }
+  actionhandler.bind(element, options);
+};
+
+export const actionHandler = directive(
+  class extends Directive {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    update(part: AttributePart, [options]: DirectiveParameters<this>) {
+      actionHandlerBind(part.element as ActionHandlerElement, options);
+      return noChange;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
+    render(_options?: ActionHandlerOptions) {}
+  },
+);
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { Layout, Period } from '../types';

 /**
@@ -63,7 +56,7 @@ export class TimePeriodComponent extends LitElement {

      .time-period {
        width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
        background: var(--tpc-off-color);
        color: var(--tpc-text-color);
        text-align: center;
@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
+import { LitElement, TemplateResult, html, CSSResult, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { TimeUnit } from '../models/time-unit';
 import { Direction } from '../types';

@@ -69,7 +62,7 @@ export class TimeUnitComponent extends LitElement {

      .time-picker-icon {
        width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
        text-align: center;
        cursor: pointer;
        color: var(--tpc-icon-color);
@@ -77,7 +70,7 @@ export class TimeUnitComponent extends LitElement {

      .time-input {
        width: 30px;
-        padding: 8px 8px 6px;
+        padding: var(--tpc-control-padding);
        background: var(--tpc-elements-background-color);
        border: 0;
        border-bottom: 2px solid var(--tpc-elements-background-color);
@@ -9,6 +9,8 @@ export const ENTITY_DOMAIN = 'input_datetime';
 // Config defaults
 export const DEFAULT_HOUR_STEP = 1;
 export const DEFAULT_MINUTE_STEP = 5;
-export const DEFAULT_LAYOUT_HOUR_MODE = 'double';
+export const DEFAULT_SECOND_STEP = 5;
+export const DEFAULT_HOUR_MODE = 24;
+export const DEFAULT_LAYOUT_HOUR_MODE: Layout.HourMode = 'double';
 export const DEFAULT_LAYOUT_ALIGN_CONTROLS = Layout.AlignControls.CENTER;
 export const DEFAULT_LAYOUT_NAME = Layout.Name.HEADER;
@@ -1,218 +1,158 @@
-import { computeDomain, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import {
-  DEFAULT_HOUR_STEP,
-  DEFAULT_MINUTE_STEP,
-  ENTITY_DOMAIN,
-  DEFAULT_LAYOUT_ALIGN_CONTROLS,
-  DEFAULT_LAYOUT_NAME,
-} from './const';
-import { TimePickerCardConfig, Layout, HourMode } from './types';
+import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
+import { supportsEntityNameSelector } from './entity-name';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TimePickerCardConfig } from './types';
+
+const NAME_TO_LABEL_MAP = {
+  entity: 'input_datetime entity id',
+  name: 'Name',
+  hour_step: 'Hour step',
+  minute_step: 'Minute step',
+  hour_mode: 'Hour mode',
+  link_values: 'Link values',
+  align_controls: 'Align controls',
+  embedded: 'Embedded?',
+  thin: 'Thin layout?',
+  icon: 'Icon',
+  seconds: 'Seconds',
+};
+
+type FormSchemaEntry = Record<string, unknown>;
+
+// The entity_name selector, which lets users compose a name out of registry
+// parts, was added in HA 2025.11. Older versions fall back to a plain text field.
+const nameSchema = (hass: HomeAssistant): FormSchemaEntry =>
+  supportsEntityNameSelector(hass)
+    ? { name: 'name', selector: { entity_name: {} }, context: { entity: 'entity' } }
+    : { name: 'name', selector: { text: {} } };
+
+const schema = (hass: HomeAssistant): FormSchemaEntry[] => [
+  { name: 'entity', selector: { entity: { domain: 'input_datetime' } } },
+  nameSchema(hass),
+  {
+    type: 'grid',
+    schema: [
+      {
+        name: 'hour_step',
+        type: 'integer',
+        required: true,
+        default: 1,
+        valueMin: 1,
+        valueMax: 24,
+      },
+      {
+        name: 'minute_step',
+        type: 'integer',
+        required: true,
+        default: 5,
+        valueMin: 1,
+        valueMax: 60,
+      },
+      {
+        name: 'hour_mode',
+        type: 'select',
+        options: [
+          [12, '12'],
+          [24, '24'],
+        ],
+      },
+      { name: 'link_values', type: 'boolean' },
+    ],
+  },
+  {
+    type: 'expandable',
+    name: 'layout',
+    title: 'Layout controls',
+    schema: [
+      {
+        name: 'hour_mode',
+        type: 'select',
+        options: [
+          ['single', 'single'],
+          ['double', 'double'],
+        ],
+      },
+      {
+        name: 'align_controls',
+        type: 'select',
+        options: [
+          ['left', 'left'],
+          ['center', 'center'],
+          ['right', 'right'],
+        ],
+      },
+      {
+        name: 'name',
+        type: 'select',
+        options: [
+          ['header', 'header'],
+          ['inside', 'inside'],
+        ],
+      },
+      { name: 'embedded', type: 'boolean' },
+      { name: 'thin', type: 'boolean' },
+    ],
+  },
+  {
+    type: 'expandable',
+    name: 'hide',
+    title: 'Hide controls',
+    schema: [
+      {
+        type: 'grid',
+        name: '',
+        schema: [
+          { name: 'name', type: 'boolean' },
+          { name: 'icon', type: 'boolean' },
+          { name: 'seconds', type: 'boolean' },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'expandable',
+    title: 'Actions',
+    schema: [
+      { name: 'tap_action', selector: { action: {} } },
+      { name: 'double_tap_action', selector: { action: {} } },
+      { name: 'hold_action', selector: { action: {} } },
+    ],
+  },
+];

@customElement('time-picker-card-editor')
 export class TimePickerCardEditor extends LitElement implements LovelaceCardEditor {
-  private static readonly NUMBER_PROPERTIES = ['hour_step', 'minute_step', 'hour_mode'];
  private static readonly CONFIG_CHANGED_EVENT = 'config-changed';

  @property({ type: Object }) hass!: HomeAssistant;
  @property() private config!: TimePickerCardConfig;

-  private get entity(): HassEntity | undefined {
-    return this.hass.states[this.config.entity];
+  private computeLabel({ name }): string {
+    return NAME_TO_LABEL_MAP[name] || name;
  }

-  private get datetimeEntities(): Array<string> {
-    return Object.keys(this.hass.states).filter(
-      (entityId) =>
-        computeDomain(entityId) === ENTITY_DOMAIN &&
-        this.hass.states[entityId].attributes.has_time === true
-    );
+  private valueChanged(ev: CustomEvent): void {
+    const newConfig = { ...this.config, ...ev.detail.value };
+    this.dispatch(newConfig);
  }

  render(): TemplateResult {
-    return html`<div class="card-config">
-      <paper-dropdown-menu
-        style="width: 100%"
-        label="Entity (Required)"
-        .configValue=${'entity'}
-        @value-changed=${this.onValueChange}
-      >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this.datetimeEntities.indexOf(this.config.entity)}
-        >
-          ${this.datetimeEntities.map((entity) => html`<paper-item>${entity}</paper-item>`)}
-        </paper-listbox>
-      </paper-dropdown-menu>
-      <paper-input
-        label="Name (Optional)"
-        .configValue=${'name'}
-        .value=${this.config.name}
-        .placeholder=${this.entity?.attributes.friendly_name}
-        @value-changed=${this.onValueChange}
-      ></paper-input>
-      <div class="side-by-side">
-        <div>
-          <ha-switch
-            style="margin-left: 10px"
-            .checked="${!Boolean(this.config.hide?.name)}"
-            .configValue="${'hide_name'}"
-            @change="${this.onHideNameChange}"
-          ></ha-switch>
-          Show name?
-        </div>
-        <paper-dropdown-menu
-          style="width: 100%"
-          label="Name Position (Optional)"
-          @value-changed=${this.onLayoutNameChange}
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            .selected=${Object.values(Layout.Name).indexOf(
-              this.config.layout?.name ?? DEFAULT_LAYOUT_NAME
-            )}
-          >
-            ${Object.values(Layout.Name).map((name) => html`<paper-item>${name}</paper-item>`)}
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </div>
-      <div class="side-by-side">
-        <paper-input
-          type="number"
-          label="Hour Step (Optional)"
-          .configValue=${'hour_step'}
-          .value=${this.config.hour_step || DEFAULT_HOUR_STEP}
-          @value-changed=${this.onValueChange}
-        ></paper-input>
-        <paper-input
-          type="number"
-          label="Minute Step (Optional)"
-          .configValue=${'minute_step'}
-          .value=${this.config.minute_step || DEFAULT_MINUTE_STEP}
-          @value-changed=${this.onValueChange}
-        ></paper-input>
-      </div>
-      <div class="side-by-side">
-        <div>
-          <ha-switch
-            .checked="${this.config.hour_mode === 12}"
-            .configValue="${'hour_mode'}"
-            @change="${this.onHourModeChange}"
-          ></ha-switch>
-          12-Hour mode
-        </div>
-        ${this.config.hour_mode === 12
-          ? html`<div>
-              <ha-switch
-                .checked="${this.config.layout?.hour_mode === 'single'}"
-                .configValue="${'hour_mode_layout'}"
-                @change="${this.onHourModeLayoutChange}"
-              ></ha-switch>
-              "Single" hour mode layout
-            </div>`
-          : ''}
-      </div>
-      <div class="side-by-side">
-        <paper-dropdown-menu
-          style="width: 100%"
-          label="Align Controls (Optional)"
-          @value-changed=${this.onLayoutAlignChange}
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            .selected=${Object.values(Layout.AlignControls).indexOf(
-              this.config.layout?.align_controls ?? DEFAULT_LAYOUT_ALIGN_CONTROLS
-            )}
-          >
-            ${Object.values(Layout.AlignControls).map((a) => html`<paper-item>${a}</paper-item>`)}
-          </paper-listbox>
-        </paper-dropdown-menu>
-        <div>
-          <ha-switch
-            .checked="${this.config.link_values}"
-            .configValue="${'link_values'}"
-            @change="${this.onLinkValuesChange}"
-          ></ha-switch>
-          Link Values
-        </div>
-      </div>
-    </div>`;
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.config}
+        .schema=${schema(this.hass)}
+        .computeLabel=${this.computeLabel}
+        @value-changed=${this.valueChanged}
+      ></ha-form>
+    `;
  }

  setConfig(config): void {
    this.config = config;
  }

-  private onHourModeChange({ target: { checked } }): void {
-    const hourMode: HourMode = checked ? 12 : 24;
-
-    const newConfig = { ...this.config, hour_mode: hourMode };
-    this.dispatch(newConfig);
-  }
-
-  private onHideNameChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, hide: { name: !checked } };
-    this.dispatch(newConfig);
-  }
-
-  private onLayoutAlignChange({ detail: { value } }: CustomEvent): void {
-    const layout = { ...this.config.layout, align_controls: value };
-    const newConfig = { ...this.config, layout };
-    this.dispatch(newConfig);
-  }
-
-  private onLayoutNameChange({ detail: { value } }: CustomEvent): void {
-    const layout = { ...this.config.layout, name: value };
-    const newConfig = { ...this.config, layout };
-    this.dispatch(newConfig);
-  }
-
-  private onHourModeLayoutChange({ target: { checked } }): void {
-    const hourModeLayout: Layout.HourMode = checked ? 'single' : 'double';
-
-    const newConfig = {
-      ...this.config,
-      layout: { ...this.config.layout, hour_mode: hourModeLayout },
-    };
-    this.dispatch(newConfig);
-  }
-
-  private onLinkValuesChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, link_values: checked };
-    this.dispatch(newConfig);
-  }
-
-  private onValueChange(e: CustomEvent): void {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const property = (e.target as any).configValue;
-    let value = e.detail.value;
-
-    if (TimePickerCardEditor.NUMBER_PROPERTIES.indexOf(property) > -1) {
-      value = parseInt(value);
-
-      if (isNaN(value)) {
-        return;
-      }
-    }
-
-    if (this.config[property] === value) {
-      return;
-    }
-
-    const newConfig = { ...this.config, [property]: value };
-
-    this.dispatch(newConfig);
-  }
-
  private dispatch(config: TimePickerCardConfig): void {
    const event = new CustomEvent(TimePickerCardEditor.CONFIG_CHANGED_EVENT, {
      bubbles: true,
@@ -222,23 +162,4 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit

    this.dispatchEvent(event);
  }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-switch {
-        padding: 16px 0;
-        margin-right: 16px;
-      }
-      .side-by-side {
-        display: flex;
-      }
-      .side-by-side > * {
-        flex: 1;
-        padding-right: 4px;
-      }
-      .suffix {
-        margin: 0 8px;
-      }
-    `;
-  }
 }
@@ -0,0 +1,55 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+import { EntityName } from './types';
+
+// hass.formatEntityName only accepts a card's `name` option (a user string, a
+// structured name, or undefined) from HA 2026.4. Earlier versions expose the
+// same helper with an incompatible signature, so feature detection is not
+// enough - the version has to be checked.
+function atLeastVersion(hass: HomeAssistant, major: number, minor: number): boolean {
+  const [haMajor, haMinor] = (hass.config?.version ?? '').split('.', 2);
+  return Number(haMajor) > major || (Number(haMajor) === major && Number(haMinor) >= minor);
+}
+
+function supportsEntityNames(hass: HomeAssistant): boolean {
+  // A hass can report a recent version without carrying the helper (a test
+  // harness, or a hass that has not finished initialising), and calling it
+  // then throws - so the version gate alone is not enough.
+  if (!hass || typeof (hass as { formatEntityName?: unknown }).formatEntityName !== 'function') {
+    return false;
+  }
+  return atLeastVersion(hass, 2026, 4);
+}
+
+/**
+ * The `entity_name` selector, which lets users compose a name out of registry
+ * parts in the visual editor, was added in HA 2025.11.
+ */
+export function supportsEntityNameSelector(hass: HomeAssistant): boolean {
+  return atLeastVersion(hass, 2025, 11);
+}
+
+type HassWithEntityNames = HomeAssistant & {
+  formatEntityName: (stateObj: HassEntity, name: EntityName | undefined) => string;
+};
+
+/**
+ * Resolves a `name` option against the entity's registry context (entity,
+ * device, area, floor). Falls back to the friendly name on Home Assistant
+ * versions that cannot resolve a structured name.
+ */
+export function computeEntityName(
+  hass: HomeAssistant,
+  stateObj: HassEntity | undefined,
+  name: EntityName | undefined
+): string | undefined {
+  const configuredName = typeof name === 'string' ? name : undefined;
+
+  if (!stateObj) {
+    return configuredName;
+  }
+  if (supportsEntityNames(hass)) {
+    return (hass as HassWithEntityNames).formatEntityName(stateObj, name);
+  }
+  return configuredName ?? stateObj.attributes.friendly_name;
+}
@@ -0,0 +1,26 @@
+import { DEFAULT_SECOND_STEP } from '../const';
+import { TimeUnit } from './time-unit';
+import { Direction } from '../types';
+
+/**
+ * * Represents the second value of a datetime.
+ */
+export class Second extends TimeUnit {
+  private static readonly VALUE_LIMIT = 60;
+
+  minValue = 0;
+  maxValue = Second.VALUE_LIMIT - 1;
+
+  constructor(value: number, step = DEFAULT_SECOND_STEP) {
+    super(value, step, Second.VALUE_LIMIT);
+  }
+
+  /**
+   * Returns true if the seconds will overflow to a different hour when changed in {@param direction}.
+   * @param direction
+   */
+  willOverflow(direction: Direction): boolean {
+    const newValue = direction === Direction.UP ? this.value + this._step : this.value - this._step;
+    return newValue >= this._limit || newValue < 0;
+  }
+}
@@ -1,9 +1,15 @@
+import { Direction } from '../types';
 import { Hour } from './hour';
 import { Minute } from './minute';
-import { Direction } from '../types';
+import { Second } from './second';

 export class Time {
-  constructor(public hour: Hour, public minute: Minute, private _linkValues: boolean = false) {}
+  constructor(
+    public hour: Hour,
+    public minute: Minute,
+    public second: Second,
+    private _linkValues: boolean = false
+  ) {}

  hourStep(direction: Direction): void {
    this.hour.stepUpdate(direction);
@@ -17,7 +23,15 @@ export class Time {
    this.minute.stepUpdate(direction);
  }

+  secondStep(direction: Direction): void {
+    if (this._linkValues && this.second.willOverflow(direction)) {
+      this.minute.stepUpdate(direction, 1);
+    }
+
+    this.second.stepUpdate(direction);
+  }
+
  get value(): string {
-    return `${this.hour.value}:${this.minute.value}`;
+    return `${this.hour.value}:${this.minute.value}:${this.second.value}`;
  }
 }
@@ -1,7 +1,6 @@
-import { html, TemplateResult } from 'lit-element';
-import { TimePickerCardConfig } from './types';
 import { LovelaceCard } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
+import { html, TemplateResult } from 'lit';
+import { TimePickerCardConfig } from './types';

 export class Partial {
  static error(error: string, origConfig: TimePickerCardConfig): TemplateResult {
@@ -14,17 +13,4 @@ export class Partial {

    return html`${errorCard}`;
  }
-
-  static headerName(title: string): TemplateResult {
-    return html`
-      <div class="time-picker-header">
-        ${title}
-      </div>
-    `;
-  }
-
-  static nestedName(name: string, entity: HassEntity): TemplateResult {
-    return html`<state-badge .stateObj=${entity}></state-badge>
-      <div class="entity-name-inside">${name}</div>`;
-  }
 }
@@ -1,31 +1,37 @@
-import { computeDomain, HomeAssistant, LovelaceCard } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+  ActionHandlerEvent,
+  computeDomain,
+  handleAction,
+  hasAction,
+  HomeAssistant,
+  LovelaceCard,
+} from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { actionHandler } from './action-handler-directive';
+import { computeEntityName } from './entity-name';
+import './components/time-period.component';
+import './components/time-unit.component';
 import {
  CARD_SIZE,
  CARD_VERSION,
-  DEFAULT_LAYOUT_HOUR_MODE,
-  ENTITY_DOMAIN,
+  DEFAULT_HOUR_MODE,
+  DEFAULT_HOUR_STEP,
  DEFAULT_LAYOUT_ALIGN_CONTROLS,
+  DEFAULT_LAYOUT_HOUR_MODE,
+  DEFAULT_LAYOUT_NAME,
+  DEFAULT_MINUTE_STEP,
+  ENTITY_DOMAIN,
 } from './const';
+import './editor';
 import { Hour } from './models/hour';
 import { Minute } from './models/minute';
+import { Second } from './models/second';
 import { Time } from './models/time';
 import { Partial } from './partials';
-import { Period, TimePickerCardConfig, Layout } from './types';
-
-import './components/time-period.component';
-import './components/time-unit.component';
-import './editor';
+import { Layout, Period, TimePickerCardConfig, TimePickerHideConfig } from './types';

 console.info(
  `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -47,28 +53,34 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
  @property() private time!: Time;
  @property() private period!: Period;

+  private bounce: number | undefined;
+
  private get entity(): HassEntity | undefined {
    return this.hass.states[this.config.entity];
  }

+  private get isEmbedded(): boolean {
+    return this.config.layout?.embedded === true;
+  }
+
  private get hasNameInHeader(): boolean {
    return (
      Boolean(this.name) &&
      Boolean(this.config.hide?.name) === false &&
-      this.config.layout?.name !== Layout.Name.INSIDE
+      this.config.layout?.name !== Layout.Name.INSIDE &&
+      Boolean(this.config.layout?.embedded) === false // embedded layout disables name in header
    );
  }

  private get hasNameInside(): boolean {
    return (
      Boolean(this.name) &&
-      Boolean(this.config.hide?.name) === false &&
-      this.config.layout?.name === Layout.Name.INSIDE
+      (this.config.layout?.name === Layout.Name.INSIDE || Boolean(this.config.layout?.embedded))
    );
  }

  private get name(): string | undefined {
-    return this.config.name || this.entity?.attributes.friendly_name;
+    return computeEntityName(this.hass, this.entity, this.config.name);
  }

  private get shouldShowPeriod(): boolean {
@@ -79,10 +91,18 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
    return this.config.layout?.align_controls ?? DEFAULT_LAYOUT_ALIGN_CONTROLS;
  }

+  private get haCardClass(): ClassInfo {
+    return {
+      embedded: this.isEmbedded,
+      thin: this.config.layout?.thin === true,
+    };
+  }
+
  private get rowClass(): ClassInfo {
    return {
      'time-picker-row': true,
      'with-header-name': this.hasNameInHeader,
+      embedded: this.isEmbedded,
    };
  }

@@ -93,6 +113,58 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
    };
  }

+  private handleAction(ev: ActionHandlerEvent): void {
+    handleAction(this, this.hass, this.config, ev.detail.action!);
+  }
+
+  private renderHeaderName(title: string): TemplateResult {
+    return html`<div
+      class="time-picker-header"
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    >
+      ${title}
+    </div>`;
+  }
+
+  private renderNestedName(
+    name: string,
+    entity: HassEntity,
+    hide?: TimePickerHideConfig
+  ): TemplateResult {
+    const icon = html`<state-badge
+      class="entity-icon"
+      .stateObj=${entity}
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    ></state-badge>`;
+    const label = html`<div
+      class="entity-name-inside"
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config!.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    >
+      ${name}
+    </div>`;
+
+    const visibleElements = [
+      { element: icon, visible: !hide?.icon },
+      { element: label, visible: !hide?.name },
+    ]
+      .filter(({ visible }) => visible)
+      .map(({ element }) => element);
+
+    return html`${visibleElements}`;
+  }
+
  render(): TemplateResult | null {
    if (!this.entity) {
      return Partial.error('Entity not found', this.config);
@@ -109,31 +181,41 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
      );
    }

-    const { hour, minute } = this.entity!.attributes;
+    const { hour, minute, second } = this.entity!.attributes;
    const hourInstance = new Hour(hour, this.config.hour_step, this.config.hour_mode);
    const minuteInstance = new Minute(minute, this.config.minute_step);
-    this.time = new Time(hourInstance, minuteInstance, this.config.link_values);
+    const secondInstance = new Second(second, this.config.second_step);
+    this.time = new Time(hourInstance, minuteInstance, secondInstance, this.config.link_values);
    this.period = hourInstance.value >= 12 ? Period.PM : Period.AM;

    return html`
-      <ha-card>
-        ${this.hasNameInHeader ? Partial.headerName(this.name!) : ''}
+      <ha-card class=${classMap(this.haCardClass)}>
+        ${this.hasNameInHeader ? this.renderHeaderName(this.name!) : ''}
        <div class=${classMap(this.rowClass)}>
-          ${this.hasNameInside ? Partial.nestedName(this.name!, this.entity) : ''}
+          ${this.hasNameInside
+            ? this.renderNestedName(this.name!, this.entity, this.config.hide)
+            : ''}

          <div class=${classMap(this.contentClass)}>
            <time-unit
              .unit=${this.time.hour}
              @stepChange=${this.onHourStepChange}
-              @update=${this.callHassService}
+              @update=${this.debouncedCallHassService}
            ></time-unit>
            <div class="time-separator">:</div>
            <time-unit
              .unit=${this.time.minute}
              @stepChange=${this.onMinuteStepChange}
-              @update=${this.callHassService}
+              @update=${this.debouncedCallHassService}
            ></time-unit>
-
+            ${this.config.hide?.seconds === false
+              ? html`<div class="time-separator">:</div>
+                  <time-unit
+                    .unit=${this.time.second}
+                    @stepChange=${this.onSecondStepChange}
+                    @update=${this.debouncedCallHassService}
+                  ></time-unit>`
+              : ''}
            ${this.shouldShowPeriod
              ? html`<time-period
                  .period=${this.period}
@@ -169,17 +251,31 @@ export class TimePickerCard extends LitElement implements LovelaceCard {

  private onPeriodToggle(): void {
    this.time.hour.togglePeriod();
-    this.callHassService();
+    this.debouncedCallHassService();
  }

  private onHourStepChange(event: CustomEvent): void {
    this.time.hourStep(event.detail.direction);
-    this.callHassService();
+    this.debouncedCallHassService();
  }

  private onMinuteStepChange(event: CustomEvent): void {
    this.time.minuteStep(event.detail.direction);
-    this.callHassService();
+    this.debouncedCallHassService();
+  }
+
+  private onSecondStepChange(event: CustomEvent): void {
+    this.time.secondStep(event.detail.direction);
+    this.debouncedCallHassService();
+  }
+
+  private debouncedCallHassService(): void {
+    if (this.config.delay) {
+      clearTimeout(this.bounce);
+      this.bounce = setTimeout(() => this.callHassService(), this.config.delay, this);
+    } else {
+      this.callHassService();
+    }
  }

  private callHassService(): Promise<void> {
@@ -201,6 +297,8 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
          var(--primary-color)
        );

+        --tpc-control-padding: var(--time-picker-control-padding, 8px);
+
        --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
        --tpc-text-color: var(--time-picker-text-color, #fff);
        --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));
@@ -209,6 +307,16 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
        --tpc-border-radius: var(--time-picker-border-radius, var(--ha-card-border-radius, 4px));
      }

+      ha-card {
+        overflow: auto;
+      }
+
+      ha-card.embedded {
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+
      .time-picker-header {
        padding: 16px;
        color: var(--tpc-text-color);
@@ -219,6 +327,10 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
        text-align: center;
      }

+      .thin > .time-picker-header {
+        padding: 4px;
+      }
+
      .time-picker-row {
        display: flex;
        flex-direction: row;
@@ -226,6 +338,14 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
        padding: 16px;
      }

+      .thin .time-picker-row {
+        padding: 0 !important ;
+      }
+
+      .time-picker-row.embedded {
+        padding: 0;
+      }
+
      .time-picker-row.with-header-name {
        padding: 8px 16px 16px;
      }
@@ -249,8 +369,13 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
        justify-content: flex-end;
      }

+      .entity-icon {
+        cursor: pointer;
+      }
+
      .entity-name-inside {
        margin-left: 16px;
+        cursor: pointer;
      }
    `;
  }
@@ -262,10 +387,18 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
    const datetimeEntity = entities.find((entityId) => computeDomain(entityId) === ENTITY_DOMAIN);

    return {
-      entity: datetimeEntity || 'input_datetime.example_entity',
-      hour_mode: 24,
-      hour_step: 1,
-      minute_step: 5,
+      entity: datetimeEntity || '',
+      hour_mode: DEFAULT_HOUR_MODE,
+      hour_step: DEFAULT_HOUR_STEP,
+      minute_step: DEFAULT_MINUTE_STEP,
+      layout: {
+        hour_mode: DEFAULT_LAYOUT_HOUR_MODE,
+        align_controls: DEFAULT_LAYOUT_ALIGN_CONTROLS,
+        name: DEFAULT_LAYOUT_NAME,
+      },
+      hide: {
+        seconds: true,
+      },
    };
  }

@@ -1,22 +1,36 @@
-import { LovelaceCardConfig } from 'custom-card-helpers';
+import { ActionConfig, LovelaceCardConfig } from 'custom-card-helpers';

 export interface TimePickerCardConfig extends LovelaceCardConfig {
  entity: string;
-  name?: string;
+  name?: EntityName;
  link_values?: boolean;
  hour_mode?: HourMode;
  hour_step?: number;
  minute_step?: number;
+  second_step?: number;
+  delay?: number;
  layout?: TimePickerLayoutConfig;
  hide?: TimePickerHideConfig;
+  tap_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
 }

+/** A `name` option: a plain string, or name parts resolved from the registry. */
+export type EntityName = string | EntityNameItem | EntityNameItem[];
+
+export type EntityNameItem =
+  | { type: 'entity' | 'device' | 'parent_device' | 'area' | 'floor' }
+  | { type: 'text'; text: string };
+
 export type HourMode = 12 | 24 | undefined;

 export interface TimePickerLayoutConfig {
  align_controls?: Layout.AlignControls;
  name?: Layout.Name;
  hour_mode?: Layout.HourMode;
+  embedded?: boolean;
+  thin?: boolean;
 }

 export namespace Layout {
@@ -36,6 +50,8 @@ export namespace Layout {

 export interface TimePickerHideConfig {
  name?: boolean;
+  icon?: boolean;
+  seconds?: boolean;
 }

 export enum Direction {
@@ -1,17 +0,0 @@
-import { LovelaceCard } from 'custom-card-helpers';
-import { customElement, html, LitElement, TemplateResult } from 'lit-element';
-
-@customElement('hui-error-card')
-export class HuiErrorCard extends LitElement implements LovelaceCard {
-  setConfig(): void {
-    return;
-  }
-
-  render(): TemplateResult {
-    return html``;
-  }
-
-  getCardSize(): number {
-    return 1;
-  }
-}
@@ -1,111 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import { HomeAssistant } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
-import '../../src/time-picker-card';
-import { TimePickerCard } from '../../src/time-picker-card';
-import { TimePickerCardConfig, HourMode } from '../../src/types';
-import './test-error-card';
-
-async function render(config?: {
-  entityId?: string;
-  friendlyName?: string;
-  hasTime?: boolean;
-  hourMode?: HourMode;
-  hideName?: boolean;
-}): Promise<TimePickerCard> {
-  const { entityId, friendlyName, hasTime, hourMode, hideName } = Object.assign(
-    {
-      entityId: 'input_datetime.wake_time',
-      friendlyName: 'Wake Time',
-      hasTime: true,
-      hideName: false,
-    },
-    config
-  );
-
-  const testEntity: HassEntity = {
-    entity_id: entityId,
-    attributes: {
-      friendly_name: friendlyName,
-      has_time: hasTime,
-    },
-    state: '00:10:00',
-    last_changed: '',
-    last_updated: '',
-    context: {
-      id: entityId,
-      user_id: null,
-    },
-  };
-
-  const hass: Partial<HomeAssistant> = {
-    states: {
-      [entityId]: testEntity,
-    },
-  };
-
-  const testConfig: TimePickerCardConfig = {
-    type: 'custom:time-picker-card',
-    entity: entityId,
-    hour_mode: hourMode,
-    hide: {
-      name: hideName,
-    },
-  };
-
-  const card = await fixture<TimePickerCard>(
-    html`<time-picker-card .hass=${hass} .config=${testConfig}></time-picker-card>`
-  );
-
-  card.setConfig(testConfig);
-
-  return card;
-}
-
-function errorCard(): string {
-  return html`<hui-error-card></hui-error-card>`.getHTML();
-}
-
-describe('test', () => {
-  it('renders', async () => {
-    const card = await render();
-    expect(card).shadowDom.to.match('time-picker-card');
-  });
-
-  it('errors if entity is not an input_datetime', async () => {
-    const card = await render({ entityId: 'sensor.test_sensor' });
-    expect(card).shadowDom.to.equal(errorCard());
-  });
-
-  it("errors if entity doesn't have time", async () => {
-    const card = await render({ hasTime: false });
-    expect(card).shadowDom.to.equal(errorCard());
-  });
-
-  it('renders card name', async () => {
-    const card = await render();
-    expect(card.shadowRoot?.innerHTML).to.match(/Wake Time/);
-  });
-
-  it('hides card name', async () => {
-    const card = await render({ hideName: true });
-    expect(card.shadowRoot?.innerHTML).not.to.match(/Wake Time/);
-  });
-
-  it('renders time units', async () => {
-    const card = await render();
-    expect(card.shadowRoot?.innerHTML.match(/<time-unit>/g)!.length).to.equal(2);
-  });
-
-  describe('time-period', () => {
-    it('is not rendered by default', async () => {
-      const card = await render();
-      expect(card.shadowRoot?.innerHTML.match(/<time-period>/g)).to.be.null;
-    });
-
-    it('renders in 12-hour mode', async () => {
-      const card = await render({ hourMode: 12 });
-      expect(card.shadowRoot?.innerHTML.match(/<time-period>/g)!.length).to.equal(1);
-    });
-  });
-});
@@ -1,45 +0,0 @@
-module.exports = function (config) {
-  return config.set({
-    basePath: './',
-    frameworks: ['mocha', 'chai'],
-    files: ['**/*.test.ts'],
-    preprocessors: {
-      '**/*.test.ts': ['rollup'],
-    },
-
-    rollupPreprocessor: {
-      plugins: [
-        require('@rollup/plugin-node-resolve')(),
-        require('@rollup/plugin-json')(),
-        require('@rollup/plugin-typescript')(),
-        require('@rollup/plugin-commonjs')({
-          namedExports: {
-            chai: ['expect'],
-          },
-        }),
-      ],
-      output: {
-        format: 'umd',
-        sourcemap: 'inline',
-      },
-      onwarn: function (message) {
-        if (/Circular dependency/.test(message)) return;
-        console.warn(message);
-      },
-    },
-
-    reporters: ['dots'],
-
-    port: 9876,
-    colors: true,
-    autoWatch: false,
-    singleRun: true,
-
-    concurrency: Infinity,
-    browsers: ['ChromeHeadless'],
-
-    client: {
-      captureConsole: false,
-    },
-  });
-};
@@ -1,165 +1,164 @@
 import { Hour } from '../../src/models/hour';
 import { Direction } from '../../src/types';
 import { DEFAULT_HOUR_STEP } from '../../src/const';
-import { expect } from 'chai';

 describe('Hour', () => {
  let hour: Hour;

-  context('with default config', () => {
+  describe('with default config', () => {
    beforeEach(() => {
      hour = new Hour(2);
    });

    it('returns value', () => {
-      expect(hour.value).to.equal(2);
+      expect(hour.value).toEqual(2);
    });

    it('has correct max value', () => {
-      expect(hour.maxValue).to.equal(23);
+      expect(hour.maxValue).toEqual(23);
    });

    describe('toString', () => {
      it('returns formatted string', () => {
-        expect(hour.toString()).to.equal('02');
+        expect(hour.toString()).toEqual('02');
      });

      it('renders values correctly', () => {
        hour = new Hour(0);
-        expect(hour.toString()).to.equal('00');
+        expect(hour.toString()).toEqual('00');

        hour = new Hour(6);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');

        hour = new Hour(12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');

        hour = new Hour(18);
-        expect(hour.toString()).to.equal('18');
+        expect(hour.toString()).toEqual('18');

        hour = new Hour(23);
-        expect(hour.toString()).to.equal('23');
+        expect(hour.toString()).toEqual('23');
      });
    });

    describe('stepUpdate', () => {
      it('updates up', () => {
        hour.stepUpdate(Direction.UP);
-        expect(hour.value).to.equal(3);
+        expect(hour.value).toEqual(3);
      });

      it('updates down', () => {
        hour.stepUpdate(Direction.DOWN);
-        expect(hour.value).to.equal(1);
+        expect(hour.value).toEqual(1);
      });

      it('goes up from 23 to 0', () => {
        hour = new Hour(23);
        hour.stepUpdate(Direction.UP);
-        expect(hour.value).to.equal(0);
+        expect(hour.value).toEqual(0);
      });

      it('goes down from 0 to 23', () => {
        hour = new Hour(0);
        hour.stepUpdate(Direction.DOWN);
-        expect(hour.value).to.equal(23);
+        expect(hour.value).toEqual(23);
      });
    });

    describe('setStringValue', () => {
      it('sets value from valid string', () => {
        hour.setStringValue('3');
-        expect(hour.value).to.equal(3);
+        expect(hour.value).toEqual(3);
      });

      it("doesn't set value from invalid string", () => {
        hour.setStringValue('test');
-        expect(hour.value).to.equal(2);
+        expect(hour.value).toEqual(2);
      });

      it("doesn't set value from outside of scope", () => {
        hour.setStringValue('24');
-        expect(hour.value).to.equal(2);
+        expect(hour.value).toEqual(2);
      });
    });
  });

-  context('with a different step size', () => {
+  describe('with a different step size', () => {
    beforeEach(() => {
      hour = new Hour(2, 5);
    });

    it('goes up correctly', () => {
      hour.stepUpdate(Direction.UP);
-      expect(hour.value).to.equal(7);
+      expect(hour.value).toEqual(7);

      hour.stepUpdate(Direction.UP);
      hour.stepUpdate(Direction.UP);
      hour.stepUpdate(Direction.UP);
      hour.stepUpdate(Direction.UP);

-      expect(hour.value).to.equal(3);
+      expect(hour.value).toEqual(3);
    });

    it('goes down correclty', () => {
      hour.stepUpdate(Direction.DOWN);
-      expect(hour.value).to.equal(21);
+      expect(hour.value).toEqual(21);
    });
  });

-  context('in 12 hour mode', () => {
+  describe('in 12 hour mode', () => {
    beforeEach(() => {
      hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
    });

    it('has correct max value', () => {
-      expect(hour.maxValue).to.equal(12);
+      expect(hour.maxValue).toEqual(12);
    });

    describe('togglePeriod', () => {
      it('changes values correclty', () => {
        hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
        hour.togglePeriod();
-        expect(hour.value).to.equal(14);
+        expect(hour.value).toEqual(14);

        hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
        hour.togglePeriod();
-        expect(hour.value).to.equal(12);
+        expect(hour.value).toEqual(12);

        hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
        hour.togglePeriod();
-        expect(hour.value).to.equal(11);
+        expect(hour.value).toEqual(11);
      });

      it('has no side effects', () => {
        const value = hour.value;
        hour.togglePeriod();
        hour.togglePeriod();
-        expect(hour.value).to.equal(value);
+        expect(hour.value).toEqual(value);
      });
    });

    describe('toString', () => {
      it('renders values above 12 orrectly', () => {
        hour = new Hour(13, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('01');
+        expect(hour.toString()).toEqual('01');
      });

      it('renders values correctly', () => {
        hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');

        hour = new Hour(6, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');

        hour = new Hour(12, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');

        hour = new Hour(18, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');

        hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('11');
+        expect(hour.toString()).toEqual('11');
      });
    });
  });
@@ -1,119 +1,118 @@
 import { Minute } from '../../src/models/minute';
 import { Direction } from '../../src/types';
-import { expect } from 'chai';

 describe('Minute', () => {
  let minute: Minute;

-  context('with default config', () => {
+  describe('with default config', () => {
    beforeEach(() => {
      minute = new Minute(2);
    });

    it('returns value', () => {
-      expect(minute.value).to.equal(2);
+      expect(minute.value).toEqual(2);
    });

    it('has correct max value', () => {
-      expect(minute.maxValue).to.equal(59);
+      expect(minute.maxValue).toEqual(59);
    });

    describe('toString', () => {
      it('renders values correctly', () => {
        minute = new Minute(0);
-        expect(minute.toString()).to.equal('00');
+        expect(minute.toString()).toEqual('00');

        minute = new Minute(5);
-        expect(minute.toString()).to.equal('05');
+        expect(minute.toString()).toEqual('05');

        minute = new Minute(59);
-        expect(minute.toString()).to.equal('59');
+        expect(minute.toString()).toEqual('59');
      });
    });

    describe('stepUpdate', () => {
      it('updates up', () => {
        minute.stepUpdate(Direction.UP);
-        expect(minute.value).to.equal(7);
+        expect(minute.value).toEqual(7);
      });

      it('updates down', () => {
        minute.stepUpdate(Direction.DOWN);
-        expect(minute.value).to.equal(57);
+        expect(minute.value).toEqual(57);
      });

      it('goes up from 59 to 4', () => {
        minute = new Minute(59);
        minute.stepUpdate(Direction.UP);
-        expect(minute.value).to.equal(4);
+        expect(minute.value).toEqual(4);
      });

      it('goes down from 0 to 55', () => {
        minute = new Minute(0);
        minute.stepUpdate(Direction.DOWN);
-        expect(minute.value).to.equal(55);
+        expect(minute.value).toEqual(55);
      });
    });

    describe('setStringValue', () => {
      it('sets value from valid string', () => {
        minute.setStringValue('3');
-        expect(minute.value).to.equal(3);
+        expect(minute.value).toEqual(3);
      });

      it("doesn't set value from invalid string", () => {
        minute.setStringValue('test');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);
      });

      it("doesn't set value from outside of scope", () => {
        minute.setStringValue('60');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);

        minute.setStringValue('65');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);
      });
    });
  });

-  context('with a different step size', () => {
+  describe('with a different step size', () => {
    beforeEach(() => {
      minute = new Minute(2, 15);
    });

    it('goes up correctly', () => {
      minute.stepUpdate(Direction.UP);
-      expect(minute.value).to.equal(17);
+      expect(minute.value).toEqual(17);

      minute.stepUpdate(Direction.UP);
      minute.stepUpdate(Direction.UP);
      minute.stepUpdate(Direction.UP);
-      expect(minute.value).to.equal(2);
+      expect(minute.value).toEqual(2);

      minute.stepUpdate(Direction.UP);
-      expect(minute.value).to.equal(17);
+      expect(minute.value).toEqual(17);
    });

    it('goes down correclty', () => {
      minute.stepUpdate(Direction.DOWN);
-      expect(minute.value).to.equal(47);
+      expect(minute.value).toEqual(47);
    });
  });

  describe('will overflow', () => {
    it('returns true if the minutes will overflow an hour up', () => {
      minute.setStringValue('59');
-      expect(minute.willOverflow(Direction.UP)).to.be.true;
+      expect(minute.willOverflow(Direction.UP)).toBe(true);
    });

    it('returns true if the minutes will overflow an hour down', () => {
      minute.setStringValue('0');
-      expect(minute.willOverflow(Direction.DOWN)).to.be.true;
+      expect(minute.willOverflow(Direction.DOWN)).toBe(true);
    });

    it('returns true if the minutes will not overflow', () => {
      minute.setStringValue('55');
-      expect(minute.willOverflow(Direction.DOWN)).to.be.false;
+      expect(minute.willOverflow(Direction.DOWN)).toBe(false);
    });
  });
 });
@@ -0,0 +1,118 @@
+import { Second } from '../../src/models/second';
+import { Direction } from '../../src/types';
+
+describe('Second', () => {
+  let second: Second;
+
+  describe('with default config', () => {
+    beforeEach(() => {
+      second = new Second(2);
+    });
+
+    it('returns value', () => {
+      expect(second.value).toEqual(2);
+    });
+
+    it('has correct max value', () => {
+      expect(second.maxValue).toEqual(59);
+    });
+
+    describe('toString', () => {
+      it('renders values correctly', () => {
+        second = new Second(0);
+        expect(second.toString()).toEqual('00');
+
+        second = new Second(5);
+        expect(second.toString()).toEqual('05');
+
+        second = new Second(59);
+        expect(second.toString()).toEqual('59');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        second.stepUpdate(Direction.UP);
+        expect(second.value).toEqual(7);
+      });
+
+      it('updates down', () => {
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).toEqual(57);
+      });
+
+      it('goes up from 59 to 4', () => {
+        second = new Second(59);
+        second.stepUpdate(Direction.UP);
+        expect(second.value).toEqual(4);
+      });
+
+      it('goes down from 0 to 55', () => {
+        second = new Second(0);
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).toEqual(55);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        second.setStringValue('3');
+        expect(second.value).toEqual(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        second.setStringValue('test');
+        expect(second.value).toEqual(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        second.setStringValue('60');
+        expect(second.value).toEqual(2);
+
+        second.setStringValue('65');
+        expect(second.value).toEqual(2);
+      });
+    });
+  });
+
+  describe('with a different step size', () => {
+    beforeEach(() => {
+      second = new Second(2, 15);
+    });
+
+    it('goes up correctly', () => {
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(17);
+
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(2);
+
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(17);
+    });
+
+    it('goes down correclty', () => {
+      second.stepUpdate(Direction.DOWN);
+      expect(second.value).toEqual(47);
+    });
+  });
+
+  describe('will overflow', () => {
+    it('returns true if the Seconds will overflow an hour up', () => {
+      second.setStringValue('59');
+      expect(second.willOverflow(Direction.UP)).toBe(true);
+    });
+
+    it('returns true if the Seconds will overflow an hour down', () => {
+      second.setStringValue('0');
+      expect(second.willOverflow(Direction.DOWN)).toBe(true);
+    });
+
+    it('returns true if the Seconds will not overflow', () => {
+      second.setStringValue('55');
+      expect(second.willOverflow(Direction.DOWN)).toBe(false);
+    });
+  });
+});
Author	SHA1	Message	Date
GeorgeSG	8477d69bfe	Merge pull request #66 from bramkragten/ha-entity-names Resolve entity names via hass.formatEntityName	2026-09-15 14:47:20 +03:00
Bram KragtenandClaude Opus 5	64b83101dd	Guard against a hass without formatEntityName Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-15 12:33:10 +02:00
Bram KragtenandClaude Opus 5	547b34e85a	Add explicit return types to schema helpers Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-14 15:15:03 +02:00
Bram KragtenandClaude Opus 5	1069a8e7e4	Resolve entity names via hass.formatEntityName Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-14 15:08:51 +02:00
Georgi Gardev	36732636d0	Update deps	2024-11-05 22:11:41 +02:00
Georgi Gardev	b5ecab9aca	Modernize dependencies	2024-11-05 20:53:52 +02:00
GeorgeSG	f3b1711721	Merge pull request #52 from GeorgeSG/dependabot/npm_and_yarn/word-wrap-1.2.4	2024-11-05 09:17:44 +02:00
dependabot[bot]	c1f992ea42	Bump word-wrap from 1.2.3 to 1.2.4 Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. - [Release notes](https://github.com/jonschlinkert/word-wrap/releases) - [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4) --- updated-dependencies: - dependency-name: word-wrap dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-07-18 22:02:58 +00:00
GeorgeSG	bbec5940f5	Merge pull request #50 from GeorgeSG/dependabot/npm_and_yarn/json5-2.2.3	2023-01-23 12:52:03 +02:00
dependabot[bot]	b0b4da98d5	Bump json5 from 2.2.1 to 2.2.3 Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v2.2.1...v2.2.3) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-01-09 13:17:24 +00:00
GeorgeSG	479b57df6f	Delete stale.yml	2022-12-06 09:01:49 +02:00
GeorgeSG	b9bf51c59d	Update stale.yml	2022-12-06 09:00:28 +02:00
GeorgeSG	7dc9eaa26a	Create stale.yml	2022-12-05 18:18:38 +02:00
Georgi Gardev	abd21485ef	1.4.0	2022-12-01 15:58:01 +02:00
Georgi Gardev	ff2d7a226d	Add optional delay	2022-12-01 15:58:01 +02:00
Georgi Gardev	7a536c4ef6	1.3.1	2022-12-01 15:58:00 +02:00
Georgi Gardev	05a1048bde	Fix lint issues	2022-12-01 15:58:00 +02:00
Georgi Gardev	2194e049e3	Bring eslint-plugin back	2022-12-01 15:58:00 +02:00
Georgi Gardev	d149617781	1.3.0	2022-12-01 15:58:00 +02:00
Georgi Gardev	4ada7f0dc2	Update visual editor and screenshots	2022-12-01 15:58:00 +02:00
Georgi Gardev	bb0e334c07	Implement editor using ha-form	2022-12-01 15:58:00 +02:00
Georgi Gardev	6cbdc31552	Add thin layout option	2022-12-01 15:58:00 +02:00
Georgi Gardev	65931d4822	Transparent background when embedded	2022-12-01 15:58:00 +02:00
Georgi Gardev	f7daf893b3	Add tap actions	2022-12-01 15:58:00 +02:00
Georgi Gardev	b33fd03c11	Remove border only when embedded	2022-12-01 15:58:00 +02:00
Georgi Gardev	9090fcfc2d	Add dev configurations	2022-12-01 15:58:00 +02:00
Georgi Gardev	aeb0d0150e	Update all dependencies	2022-12-01 15:58:00 +02:00
Georgi Gardev	5cec16dd22	.gitignore homeassistant files	2022-12-01 15:58:00 +02:00
Georgi Gardev	33786c14c0	Add homeassistant docker for development	2022-11-03 10:02:37 +02:00
GeorgeSG	ee129ddb89	Merge pull request #41 from GeorgeSG/dependabot/npm_and_yarn/terser-4.8.1	2022-11-02 17:29:35 +02:00
GeorgeSG	740354b1cf	Merge pull request #44 from OToussaint/patch-1	2022-11-02 17:28:59 +02:00
Olivier Toussaint	835267f89b	Fix issue #43 Fix issue #43 HA 2022.11.0	2022-11-02 10:26:42 +01:00
dependabot[bot]	a606fd1d2e	Bump terser from 4.8.0 to 4.8.1 Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-07-21 01:32:41 +00:00
GeorgeSG	9b4cfeb4e5	Merge pull request #37 from thecatos/hacs-url Update HACS URL	2022-06-02 08:24:11 +03:00
Sven Serlier	f304900617	Update HACS URL	2022-06-02 06:41:49 +02:00
GeorgeSG	ad6f3920e6	Add option to hide icon	2022-05-08 11:17:49 +03:00
GeorgeSG	52e6773a37	Merge pull request #36 from GeorgeSG/dependabot/npm_and_yarn/ansi-regex-3.0.1	2022-05-08 10:18:25 +03:00
dependabot[bot]	6dc770d954	Bump ansi-regex from 3.0.0 to 3.0.1 Bumps [ansi-regex](https://github.com/chalk/ansi-regex) from 3.0.0 to 3.0.1. - [Release notes](https://github.com/chalk/ansi-regex/releases) - [Commits](https://github.com/chalk/ansi-regex/compare/v3.0.0...v3.0.1) --- updated-dependencies: - dependency-name: ansi-regex dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-05-08 07:17:15 +00:00
GeorgeSG	1d88b5ad5b	Merge pull request #28 from GeorgeSG/dependabot/npm_and_yarn/pathval-1.1.1	2022-05-08 10:17:05 +03:00
GeorgeSG	c8c9e4df69	Merge pull request #30 from GeorgeSG/dependabot/npm_and_yarn/ajv-6.12.6	2022-05-08 10:16:59 +03:00
GeorgeSG	a2c61d429b	Merge pull request #32 from GeorgeSG/dependabot/npm_and_yarn/karma-6.3.16	2022-05-08 10:16:41 +03:00
GeorgeSG	2a7a024aa3	Merge pull request #33 from GeorgeSG/dependabot/npm_and_yarn/minimist-1.2.6	2022-05-08 10:16:28 +03:00
dependabot[bot]	80ebf6fde6	Bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-26 16:02:34 +00:00
dependabot[bot]	e9d3a6c72b	Bump karma from 5.2.3 to 6.3.16 Bumps [karma](https://github.com/karma-runner/karma) from 5.2.3 to 6.3.16. - [Release notes](https://github.com/karma-runner/karma/releases) - [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md) - [Commits](https://github.com/karma-runner/karma/compare/v5.2.3...v6.3.16) --- updated-dependencies: - dependency-name: karma dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-02 08:33:43 +00:00
dependabot[bot]	bde447ceb4	Bump ajv from 6.12.2 to 6.12.6 Bumps [ajv](https://github.com/ajv-validator/ajv) from 6.12.2 to 6.12.6. - [Release notes](https://github.com/ajv-validator/ajv/releases) - [Commits](https://github.com/ajv-validator/ajv/compare/v6.12.2...v6.12.6) --- updated-dependencies: - dependency-name: ajv dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-02-13 10:23:36 +00:00
dependabot[bot]	41bce3de6b	Bump pathval from 1.1.0 to 1.1.1 Bumps [pathval](https://github.com/chaijs/pathval) from 1.1.0 to 1.1.1. - [Release notes](https://github.com/chaijs/pathval/releases) - [Changelog](https://github.com/chaijs/pathval/blob/master/CHANGELOG.md) - [Commits](https://github.com/chaijs/pathval/compare/v1.1.0...v1.1.1) --- updated-dependencies: - dependency-name: pathval dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-02-11 01:41:17 +00:00
GeorgeSG	e5c16c2afd	Merge pull request #23 from GeorgeSG/dependabot/npm_and_yarn/path-parse-1.0.7	2021-10-10 21:00:34 +03:00
dependabot[bot]	5d06659370	Bump path-parse from 1.0.6 to 1.0.7 Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2021-08-12 09:52:08 +00:00
GeorgeSG	7f7a82c653	Merge pull request #21 from GeorgeSG/dependabot/npm_and_yarn/glob-parent-5.1.2 Bump glob-parent from 5.1.1 to 5.1.2	2021-06-12 15:05:50 +03:00
dependabot[bot]	9ebf4feb50	Bump glob-parent from 5.1.1 to 5.1.2 Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2. - [Release notes](https://github.com/gulpjs/glob-parent/releases) - [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md) - [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2) --- updated-dependencies: - dependency-name: glob-parent dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2021-06-11 14:38:28 +00:00
GeorgeSG	9aee96ad18	Merge pull request #20 from GeorgeSG/dependabot/npm_and_yarn/lodash-4.17.21 Bump lodash from 4.17.19 to 4.17.21	2021-05-11 16:20:05 +03:00
dependabot[bot]	7e70edfa31	Bump lodash from 4.17.19 to 4.17.21 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.19 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.19...4.17.21) Signed-off-by: dependabot[bot] <support@github.com>	2021-05-11 13:04:45 +00:00
GeorgeSG	31ae5e4097	Merge pull request #19 from GeorgeSG/dependabot/npm_and_yarn/y18n-4.0.1 Bump y18n from 4.0.0 to 4.0.1	2021-04-01 12:04:04 +03:00
dependabot[bot]	27b05d9fcf	Bump y18n from 4.0.0 to 4.0.1 Bumps [y18n](https://github.com/yargs/y18n) from 4.0.0 to 4.0.1. - [Release notes](https://github.com/yargs/y18n/releases) - [Changelog](https://github.com/yargs/y18n/blob/master/CHANGELOG.md) - [Commits](https://github.com/yargs/y18n/commits) Signed-off-by: dependabot[bot] <support@github.com>	2021-03-31 23:20:01 +00:00
GeorgeSG	36d9d19959	Update README	2021-03-31 19:49:53 +03:00
GeorgeSG	8c22fbbeb5	1.2.1	2021-03-31 19:41:36 +03:00
GeorgeSG	def608444e	Fixes #18 : Change overflow to auto to avoid showing scrollbars	2021-03-31 19:41:26 +03:00
GeorgeSG	afe276a9d0	1.2.0	2021-03-27 21:20:54 +02:00
GeorgeSG	c9705e25aa	Implement #12 : CSS variable for control padding	2021-03-27 21:19:00 +02:00
GeorgeSG	f4c8fd283a	Fix #13 : Fix card overflowing in grid	2021-03-27 20:57:50 +02:00
GeorgeSG	ed570dd10a	Merge pull request #14 from GeorgeSG/dependabot/npm_and_yarn/socket.io-2.4.1 Bump socket.io from 2.3.0 to 2.4.1	2021-03-27 20:29:53 +02:00
dependabot[bot]	2a032a0bbc	Bump socket.io from 2.3.0 to 2.4.1 Bumps [socket.io](https://github.com/socketio/socket.io) from 2.3.0 to 2.4.1. - [Release notes](https://github.com/socketio/socket.io/releases) - [Changelog](https://github.com/socketio/socket.io/blob/2.4.1/CHANGELOG.md) - [Commits](https://github.com/socketio/socket.io/compare/2.3.0...2.4.1) Signed-off-by: dependabot[bot] <support@github.com>	2021-01-21 15:09:14 +00:00
GeorgeSG	c3fa2ce6b6	1.1.1	2020-11-22 16:38:06 +02:00
GeorgeSG	f4128145fb	Fix name and seconds being linked together in Visual Editor	2020-11-22 16:37:48 +02:00
GeorgeSG	e8d87e9afb	1.1.0	2020-11-22 13:47:02 +02:00
GeorgeSG	e56dc41dcc	Fix import	2020-11-22 13:41:48 +02:00
GeorgeSG	4b5fc79630	Add embedded layout option	2020-11-22 13:40:19 +02:00
GeorgeSG	6113ec9415	Add seconds config to visual editor	2020-11-22 13:23:20 +02:00
GeorgeSG	f306d95748	Add optional seconds picker	2020-11-22 13:11:16 +02:00
GeorgeSG	fe91b79320	Bump dependencies	2020-11-22 12:35:54 +02:00
GeorgeSG	0b1b87ed6e	Merge pull request #8 from GeorgeSG/dependabot/npm_and_yarn/http-proxy-1.18.1 Bump http-proxy from 1.18.0 to 1.18.1	2020-09-12 14:02:34 +03:00
dependabot[bot]	81a0f1a95a	Bump http-proxy from 1.18.0 to 1.18.1 Bumps [http-proxy](https://github.com/http-party/node-http-proxy) from 1.18.0 to 1.18.1. - [Release notes](https://github.com/http-party/node-http-proxy/releases) - [Changelog](https://github.com/http-party/node-http-proxy/blob/master/CHANGELOG.md) - [Commits](https://github.com/http-party/node-http-proxy/compare/1.18.0...1.18.1) Signed-off-by: dependabot[bot] <support@github.com>	2020-09-11 22:23:04 +00:00
GeorgeSG	526a52f630	1.0.1	2020-07-17 20:24:39 +03:00
GeorgeSG	72d82d7c0a	Merge pull request #7 from GeorgeSG/dependabot/npm_and_yarn/lodash-4.17.19 Bump lodash from 4.17.15 to 4.17.19	2020-07-17 20:24:26 +03:00
dependabot[bot]	21f66a9066	Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-17 17:23:17 +00:00
GeorgeSG	fe93d385e9	1.0.0	2020-07-17 20:22:38 +03:00