Implement chips

lovelace/button_card_templates/v3/primitives/v3_chip.yaml

@@ -0,0 +1,47 @@
+v3_chip:
+  variables:
+    state_size: 14px
+    background_color: 'var(--v3-background)'
+  show_name: false
+  show_icon: true
+  show_state: true
+  hold_action:
+    action: more-info
+  styles:
+    grid:
+      - grid-template-areas: '"i s"'
+      - grid-template-rows: 1fr
+    card:
+      - width: "[[[ return this.___config.show_state ? 'auto' : '38px' ]]]"
+      - height: 38px
+      - font-size: 19px
+      - border-radius: 20px
+      - padding: "[[[ return this.___config.show_state ? '0 10px' : '0' ]]]"
+      - box-shadow: none
+      - --ha-card-background: "[[[ return variables.background_color ]]]"
+      - border: 2px solid transparent
+    state:
+      - align-self: center
+      - text-overflow: initial
+      - font-weight: bold
+      - font-size: "[[[ return variables.state_size ]]]"
+      - padding-left: 7px
+    icon:
+      - position: initial
+      - width: 100%
+      - height: auto
+      - justify-self: center
+      - align-self: center
+      - --mdc-icon-size: 20px
+    entity_picture:
+      - width: auto
+      - height: 38px
+  state:
+    - value: 'on'
+      styles:
+        card:
+          - background-color: white
+          - color: black
+          - border: 2px solid white
+        icon:
+          - color: var(--primary-color)

lovelace/button_card_templates/v3/primitives/v3_chip_name.yaml

@@ -0,0 +1,30 @@
+v3_chip_name:
+  template: v3_chip
+  show_state: false
+  show_entity_picture: false
+  show_icon: true
+  show_name: true
+  hold_action:
+    action: more-info
+  styles:
+    card:
+      - width: "[[[ return this.___config.show_name ? 'auto' : '38px' ]]]"
+      - padding: "[[[ return this.___config.show_name ? '0 10px' : '0' ]]]"
+      - border: 2px solid transparent
+    grid:
+      - grid-template-areas: '"i n"'
+      - grid-template-rows: 1fr
+    icon:
+      - position: initial
+      - width: 100%
+      - height: auto
+      - justify-self: center
+      - align-self: center
+      - --mdc-icon-size: 20px
+    name:
+      - align-self: center
+      - text-overflow: initial
+      - font-weight: bold
+      - font-size: "[[[ return variables.state_size ]]]"
+      - padding-left: 7px
+      - width: auto

lovelace/button_card_templates/v3/v3_chip_entity_count.yaml

@@ -0,0 +1,15 @@
+v3_chip_entity_count:
+  variables:
+    entity_type:
+  template: v3_chip_name
+  name: "[[[ return `${entity.state} open ${variables.entity_type}${entity.state > 1 ? 's' : ''}` ]]]"
+  state:
+    - value: 0
+      operator: '!='
+      styles:
+        card:
+          - background-color: white
+        icon:
+          - color: var(--primary-color)
+        name:
+          - color: black

lovelace/button_card_templates/v3/v3_chip_person.yaml

@@ -0,0 +1,13 @@
+v3_chip_person:
+  template: v3_chip
+  show_state: false
+  show_entity_picture: true
+  show_name: false
+  hold_action:
+    action: more-info
+  state:
+    - value: 'off'
+      styles:
+        card:
+          - filter: grayscale(100%)
+          - border-color: black