@universal-material/web 3.0.35 → 3.0.36

package/custom-elements.json

@@ -2536,255 +2536,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-content.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n\n  slot {\n    border-radius: inherit;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/card/card-content.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-content.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCardContent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasContent",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "has-content",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "has-content",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hasContent"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card-content",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmCardContent",
-          "declaration": {
-            "name": "UmCardContent",
-            "module": "src/card/card-content.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-card-content",
-          "declaration": {
-            "name": "UmCardContent",
-            "module": "src/card/card-content.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-media.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    aspect-ratio: 1;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([wide]) {\n    aspect-ratio: 16/9;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/card/card-media.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-media.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCardMedia",
-          "members": [
-            {
-              "kind": "field",
-              "name": "wide",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "wide",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "wide",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "wide"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card-media",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmCardMedia",
-          "declaration": {
-            "name": "UmCardMedia",
-            "module": "src/card/card-media.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-card-media",
-          "declaration": {
-            "name": "UmCardMedia",
-            "module": "src/card/card-media.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  u-card-content,\n  slot {\n    border-radius: inherit;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/card/card.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCard",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "UmCardVariant"
-              },
-              "default": "'filled'",
-              "description": "The Card variant to render.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "UmCardVariant"
-              },
-              "default": "'filled'",
-              "description": "The Card variant to render.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmCard",
-          "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-card",
-          "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/checkbox-list-item.ts",
@@ -3027,6 +2778,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -3104,6 +2863,16 @@
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "name": "change",
               "type": {
@@ -3349,6 +3118,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -3384,86 +3161,265 @@
               }
             },
             {
-              "name": "disabled",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "name": "checked",
+              "fieldName": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UmSelectionControl",
+            "module": "/src/shared/selection-control/selection-control.js"
+          },
+          "tagName": "u-checkbox",
+          "customElement": true,
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCheckbox",
+          "declaration": {
+            "name": "UmCheckbox",
+            "module": "src/checkbox/checkbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-checkbox",
+          "declaration": {
+            "name": "UmCheckbox",
+            "module": "src/checkbox/checkbox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-content.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n\n  slot {\n    border-radius: inherit;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/card/card-content.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-content.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmCardContent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "has-content",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "has-content",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hasContent"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-card-content",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCardContent",
+          "declaration": {
+            "name": "UmCardContent",
+            "module": "src/card/card-content.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-card-content",
+          "declaration": {
+            "name": "UmCardContent",
+            "module": "src/card/card-content.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-media.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    aspect-ratio: 1;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([wide]) {\n    aspect-ratio: 16/9;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/card/card-media.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-media.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmCardMedia",
+          "members": [
+            {
+              "kind": "field",
+              "name": "wide",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
+              "attribute": "wide",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "name": "value",
+              "name": "wide",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "name": "checked",
-              "fieldName": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "fieldName": "wide"
             }
           ],
           "superclass": {
-            "name": "UmSelectionControl",
-            "module": "/src/shared/selection-control/selection-control.js"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "u-checkbox",
-          "customElement": true,
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            }
-          ]
+          "tagName": "u-card-media",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmCheckbox",
+          "name": "UmCardMedia",
           "declaration": {
-            "name": "UmCheckbox",
-            "module": "src/checkbox/checkbox.ts"
+            "name": "UmCardMedia",
+            "module": "src/card/card-media.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-checkbox",
+          "name": "u-card-media",
           "declaration": {
-            "name": "UmCheckbox",
-            "module": "src/checkbox/checkbox.ts"
+            "name": "UmCardMedia",
+            "module": "src/card/card-media.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elevation/elevation.styles.ts",
+      "path": "src/card/card.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_level: var(--u-elevation-level, 0);\n    --_shadow-color: var(--u-color-shadow, rgb(0, 0, 0));\n    -webkit-tap-highlight-color: transparent;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :host::before, :host::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    transition: box-shadow 150ms ease-in-out;\n  }\n  :host::before {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);\n    opacity: 0.3;\n  }\n  :host::after {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);\n    opacity: 0.15;\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  u-card-content,\n  slot {\n    border-radius: inherit;\n  }\n`"
         }
       ],
       "exports": [
@@ -3472,43 +3428,66 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/elevation/elevation.styles.ts"
+            "module": "src/card/card.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/elevation/elevation.ts",
+      "path": "src/card/card.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmElevation",
-          "members": [],
+          "name": "UmCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "UmCardVariant"
+              },
+              "default": "'filled'",
+              "description": "The Card variant to render.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "UmCardVariant"
+              },
+              "default": "'filled'",
+              "description": "The Card variant to render.",
+              "fieldName": "variant"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "u-elevation",
+          "tagName": "u-card",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmElevation",
+          "name": "UmCard",
           "declaration": {
-            "name": "UmElevation",
-            "module": "src/elevation/elevation.ts"
+            "name": "UmCard",
+            "module": "src/card/card.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-elevation",
+          "name": "u-card",
           "declaration": {
-            "name": "UmElevation",
-            "module": "src/elevation/elevation.ts"
+            "name": "UmCard",
+            "module": "src/card/card.ts"
           }
         }
       ]
@@ -3817,6 +3796,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elevation/elevation.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    --_level: var(--u-elevation-level, 0);\n    --_shadow-color: var(--u-color-shadow, rgb(0, 0, 0));\n    -webkit-tap-highlight-color: transparent;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :host::before, :host::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    transition: box-shadow 150ms ease-in-out;\n  }\n  :host::before {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);\n    opacity: 0.3;\n  }\n  :host::after {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);\n    opacity: 0.15;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/elevation/elevation.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elevation/elevation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmElevation",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-elevation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmElevation",
+          "declaration": {
+            "name": "UmElevation",
+            "module": "src/elevation/elevation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-elevation",
+          "declaration": {
+            "name": "UmElevation",
+            "module": "src/elevation/elevation.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/list/list-item.styles.ts",
@@ -5605,6 +5641,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -5671,6 +5715,16 @@
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "name": "change",
               "type": {
@@ -5926,6 +5980,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -5994,6 +6056,16 @@
           "tagName": "u-radio",
           "customElement": true,
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "name": "change",
               "type": {
@@ -6993,6 +7065,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -7047,6 +7127,16 @@
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "name": "change",
               "type": {
@@ -7262,6 +7352,14 @@
             {
               "kind": "method",
               "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmSelectionControl",
                 "module": "src/shared/selection-control/selection-control.ts"
@@ -7322,6 +7420,16 @@
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "name": "change",
               "type": {
@@ -8297,10 +8405,24 @@
             },
             {
               "kind": "method",
-              "name": "#handleClick"
+              "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent"
+              }
+            },
             {
               "name": "change",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.35",
+  "version": "3.0.36",
   "description": "Material web components",
   "type": "module",
   "keywords": [

package/shared/selection-control/selection-control-list-item.js

@@ -5,12 +5,12 @@ export const mixinSelectionControlListItem = (base) => {
     class SelectionControlListItem extends base {
         render() {
             return html `
-        <u-list-item ?selectable=${!this.disabled}>
-          <slot></slot>
-          <div slot="trailing">
-            ${super.render()}
-          </div>
-        </u-list-item>`;
+          <u-list-item ?selectable=${!this.disabled}>
+            <label for="input"><slot></slot></label>
+            <div slot="trailing">
+              ${super.render()}
+            </div>
+          </u-list-item>`;
         }
     }
     SelectionControlListItem.styles = [

package/shared/selection-control/selection-control-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAehE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QASzC,MAAM;YACb,OAAO,IAAI,CAAA;mCACkB,CAAC,IAAI,CAAC,QAAQ;;;cAGnC,KAAK,CAAC,MAAM,EAAE;;uBAEL,CAAC;QACpB,CAAC;;IAhBM,+BAAM,GAAG;QACb,IAAqC,CAAC,MAAM,IAAI,EAAE;QACnD,GAAG,CAAA;;;QAGD;KACH,CAAC;IAaJ,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAA","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\n\nimport { UmSelectionControl } from './selection-control.js';\n\nexport type MixinBase<ExpectedBase = object> = abstract new (\n  // Mixins must have a constructor with `...args: any[]`\n  // @ts-ignore\n  ...args: any[]\n) => ExpectedBase;\n\nexport type MixinReturn<MixinBase, MixinClass = object> =\n// Mixins must have a constructor with `...args: any[]`\n// tslint:disable-next-line:no-any\n  (abstract new (...args: any[]) => MixinClass) & MixinBase;\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n  // @ts-ignore\n  abstract class SelectionControlListItem extends base {\n    static styles = [\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ];\n\n    override render(): HTMLTemplateResult {\n      return html`\n        <u-list-item ?selectable=${!this.disabled}>\n          <slot></slot>\n          <div slot=\"trailing\">\n            ${super.render()}\n          </div>\n        </u-list-item>`;\n    }\n  }\n\n  return SelectionControlListItem;\n}\n"]}
+{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAehE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QASzC,MAAM;YACb,OAAO,IAAI,CAAA;qCACoB,CAAC,IAAI,CAAC,QAAQ;;;gBAGnC,KAAK,CAAC,MAAM,EAAE;;yBAEL,CAAC;QACtB,CAAC;;IAhBM,+BAAM,GAAG;QACb,IAAqC,CAAC,MAAM,IAAI,EAAE;QACnD,GAAG,CAAA;;;QAGD;KACH,CAAC;IAaJ,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAA","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\n\nimport { UmSelectionControl } from './selection-control.js';\n\nexport type MixinBase<ExpectedBase = object> = abstract new (\n  // Mixins must have a constructor with `...args: any[]`\n  // @ts-ignore\n  ...args: any[]\n) => ExpectedBase;\n\nexport type MixinReturn<MixinBase, MixinClass = object> =\n// Mixins must have a constructor with `...args: any[]`\n// tslint:disable-next-line:no-any\n  (abstract new (...args: any[]) => MixinClass) & MixinBase;\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n  // @ts-ignore\n  abstract class SelectionControlListItem extends base {\n    static styles = [\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ];\n\n    override render(): HTMLTemplateResult {\n      return html`\n          <u-list-item ?selectable=${!this.disabled}>\n            <label for=\"input\"><slot></slot></label>\n            <div slot=\"trailing\">\n              ${super.render()}\n            </div>\n          </u-list-item>`;\n    }\n  }\n\n  return SelectionControlListItem;\n}\n"]}

package/shared/selection-control/selection-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAKzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGQ,OAAO,CADzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IAED,SAAS;IAKA,iBAAiB;IAKjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAoBhD"}
+{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAKzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGQ,OAAO,CADzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IAED,SAAS;IAKA,iBAAiB;IAKjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CA0BhD"}

package/shared/selection-control/selection-control.js

@@ -60,17 +60,22 @@ export class UmSelectionControl extends LitElement {
       <div class="container">
         ${this.renderRipple ? ripple : nothing}
         <input
+          id="input"
           type=${this.inputType}
           class="focus-ring"
-          ?name=${this.name}
+          .name=${this.name}
           .checked=${__classPrivateFieldGet(this, _UmSelectionControl_checked, "f")}
           .disabled=${this.disabled} />
         <div class="indicator-container">${this.renderIndicator()}</div>
       </div>`;
     }
 }
-_UmSelectionControl_checked = new WeakMap(), _UmSelectionControl_instances = new WeakSet(), _UmSelectionControl_handleClick = function _UmSelectionControl_handleClick() {
+_UmSelectionControl_checked = new WeakMap(), _UmSelectionControl_instances = new WeakSet(), _UmSelectionControl_handleClick = function _UmSelectionControl_handleClick(e) {
+    if (e.defaultPrevented) {
+        return;
+    }
     this.checked = this.inputType === 'radio' || !this.checked;
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
     this.dispatchEvent(new Event('change', { bubbles: true }));
 };
 UmSelectionControl.formAssociated = true;

package/shared/selection-control/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;IASzD,2BAA2B;IAC3B,oBAAoB;IAEpB,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAcD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,mCAAS,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACxB,uBAAA,IAAI,+BAAY,KAAK,MAAA,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAhCE,SAAI,GAAuB,EAAE,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QAU3D,sCAAW,KAAK,EAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAavB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAA;IACtD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;iBAE7B,IAAI,CAAC,SAAS;;kBAEb,IAAI,CAAC,IAAI;qBACN,uBAAA,IAAI,mCAAS;sBACZ,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;aACpD,CAAC;IACZ,CAAC;;;IAGC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;AArEe,iCAAc,GAAG,IAAI,AAAP,CAAQ;AAI1B;IAAX,QAAQ,EAAE;gDAA+B;AACA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAkB;AAC3C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAkB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAGzB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n  static readonly formAssociated = true;\n\n  protected readonly elementInternals: ElementInternals;\n\n  @property() name: string | undefined = '';\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @query('input') input!: HTMLInputElement;\n\n  // eslint-disable-next-line\n  // #value: any = '';\n\n  get form(): HTMLFormElement | null {\n    return this.elementInternals.form;\n  }\n\n  #checked = false;\n  protected inputType: 'checkbox' | 'radio' = 'checkbox';\n  protected renderRipple = true;\n\n  protected abstract renderIndicator(): HTMLTemplateResult;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @property({type: Boolean})\n  get checked() {\n    return this.#checked;\n  }\n  set checked(value: boolean) {\n    this.#checked = value;\n    this.elementInternals.setFormValue(value ? this.value : null);\n  }\n\n  protected constructor() {\n    super();\n    this.elementInternals = this.attachInternals();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick)\n  }\n\n  protected override render(): HTMLTemplateResult {\n    const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n    return html`\n      <div class=\"container\">\n        ${this.renderRipple ? ripple : nothing}\n        <input\n          type=${this.inputType}\n          class=\"focus-ring\"\n          ?name=${this.name}\n          .checked=${this.#checked}\n          .disabled=${this.disabled} />\n        <div class=\"indicator-container\">${this.renderIndicator()}</div>\n      </div>`;\n  }\n\n  #handleClick() {\n    this.checked = this.inputType === 'radio' || !this.checked;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}
+{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;IASzD,2BAA2B;IAC3B,oBAAoB;IAEpB,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAcD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,mCAAS,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACxB,uBAAA,IAAI,+BAAY,KAAK,MAAA,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAhCE,SAAI,GAAuB,EAAE,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QAU3D,sCAAW,KAAK,EAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAavB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAA;IACtD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;iBAG7B,IAAI,CAAC,SAAS;;kBAEb,IAAI,CAAC,IAAI;qBACN,uBAAA,IAAI,mCAAS;sBACZ,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;aACpD,CAAC;IACZ,CAAC;;uKAEY,CAAQ;IACnB,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACvB,OAAO;IACT,CAAC;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC7E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;AA3Ee,iCAAc,GAAG,IAAI,AAAP,CAAQ;AAI1B;IAAX,QAAQ,EAAE;gDAA+B;AACA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAkB;AAC3C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAkB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAGzB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n  static readonly formAssociated = true;\n\n  protected readonly elementInternals: ElementInternals;\n\n  @property() name: string | undefined = '';\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @query('input') input!: HTMLInputElement;\n\n  // eslint-disable-next-line\n  // #value: any = '';\n\n  get form(): HTMLFormElement | null {\n    return this.elementInternals.form;\n  }\n\n  #checked = false;\n  protected inputType: 'checkbox' | 'radio' = 'checkbox';\n  protected renderRipple = true;\n\n  protected abstract renderIndicator(): HTMLTemplateResult;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @property({type: Boolean})\n  get checked() {\n    return this.#checked;\n  }\n  set checked(value: boolean) {\n    this.#checked = value;\n    this.elementInternals.setFormValue(value ? this.value : null);\n  }\n\n  protected constructor() {\n    super();\n    this.elementInternals = this.attachInternals();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick)\n  }\n\n  protected override render(): HTMLTemplateResult {\n    const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n    return html`\n      <div class=\"container\">\n        ${this.renderRipple ? ripple : nothing}\n        <input\n          id=\"input\"\n          type=${this.inputType}\n          class=\"focus-ring\"\n          .name=${this.name}\n          .checked=${this.#checked}\n          .disabled=${this.disabled} />\n        <div class=\"indicator-container\">${this.renderIndicator()}</div>\n      </div>`;\n  }\n\n  #handleClick(e: Event) {\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    this.checked = this.inputType === 'radio' || !this.checked;\n    this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}