@universal-material/web 3.0.78 → 3.0.80

package/custom-elements.json

@@ -583,6 +583,255 @@
         }
       ]
     },
+    {
+      "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    --u-current-bg-color: var(--u-card-elevated-bg-color, var(var(--u-color-surface-container-low, rgb(247, 242, 250))));\n    background-color: var(--u-current-bg-color);\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    --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n    background-color: var(--u-current-bg-color);\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/button/button-base.styles.ts",
@@ -2588,320 +2837,71 @@
               },
               "default": "false",
               "description": "Whether the button is disabled or not.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL that the link button points to.",
-              "fieldName": "href",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
-              "fieldName": "target",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "UmButtonBase",
-            "module": "/src/button/button-base.js"
-          },
-          "tagName": "u-icon-button",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmIconButton",
-          "declaration": {
-            "name": "UmIconButton",
-            "module": "src/button/icon-button.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-icon-button",
-          "declaration": {
-            "name": "UmIconButton",
-            "module": "src/button/icon-button.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",
-              "attribute": "wide",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
             {
-              "name": "wide",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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    --u-current-bg-color: var(--u-card-elevated-bg-color, var(var(--u-color-surface-container-low, rgb(247, 242, 250))));\n    background-color: var(--u-current-bg-color);\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    --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n    background-color: var(--u-current-bg-color);\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": [
+              "description": "The URL that the link button points to.",
+              "fieldName": "href",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "variant",
+              "name": "target",
               "type": {
-                "text": "UmCardVariant"
+                "text": "string | undefined"
               },
-              "default": "'filled'",
-              "description": "The Card variant to render.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
             {
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "UmCardVariant"
+                "text": "string | undefined"
               },
-              "default": "'filled'",
-              "description": "The Card variant to render.",
-              "fieldName": "variant"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UmButtonBase",
+            "module": "/src/button/button-base.js"
           },
-          "tagName": "u-card",
+          "tagName": "u-icon-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmCard",
+          "name": "UmIconButton",
           "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
+            "name": "UmIconButton",
+            "module": "src/button/icon-button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-card",
+          "name": "u-icon-button",
           "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
+            "name": "UmIconButton",
+            "module": "src/button/icon-button.ts"
           }
         }
       ]
@@ -5126,63 +5126,6 @@
         }
       ]
     },
-    {
-      "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/dialog/confirm-dialog-builder.ts",
@@ -6055,6 +5998,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/field/field-base.styles.ts",
@@ -7190,7 +7190,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_menu-item-icon-size);\n    line-height: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_menu-item-icon-size);\n    height: var(--_menu-item-icon-size);\n    font-size: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`"
         }
       ],
       "exports": [
@@ -13614,6 +13614,15 @@
               "name": "value",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "'text'",
+              "attribute": "type"
+            },
             {
               "kind": "field",
               "name": "prefixText",
@@ -14088,6 +14097,14 @@
               "name": "value",
               "fieldName": "value"
             },
+            {
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "'text'",
+              "fieldName": "type"
+            },
             {
               "name": "prefix-text",
               "type": {

package/menu/menu-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ClB,CAAC"}
+{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmDlB,CAAC"}

package/menu/menu-item.styles.js

@@ -24,8 +24,12 @@ export const styles = css `
   }
 
   .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_menu-item-icon-size);
+    height: var(--_menu-item-icon-size);
     font-size: var(--_menu-item-icon-size);
-    line-height: var(--_menu-item-icon-size);
     color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
 

package/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_menu-item-icon-size);\n    line-height: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n"]}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_menu-item-icon-size);\n    height: var(--_menu-item-icon-size);\n    font-size: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n"]}

package/package.json

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

package/text-field/text-field.d.ts

@@ -6,6 +6,7 @@ export declare class UmTextField extends UmTextFieldBase {
     static styles: CSSResultGroup;
     get value(): string;
     set value(value: string);
+    type: string;
     prefixText: string | undefined;
     suffixText: string | undefined;
     autocomplete: 'on' | 'off' | string | undefined;

package/text-field/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IACvC,cAAc,EAAG,MAAM,CAAC;IAE5C,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CA6BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEW,IAAI,EAAE,MAAM,CAAU;IACI,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IACvC,cAAc,EAAG,MAAM,CAAC;IAE5C,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CA8BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/text-field/text-field.js

@@ -10,11 +10,16 @@ import { live } from 'lit/directives/live.js';
 import { styles } from './text-field.styles.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
 let UmTextField = class UmTextField extends UmTextFieldBase {
+    constructor() {
+        super(...arguments);
+        this.#value = '';
+        this.type = 'text';
+    }
     static { this.styles = [
         UmTextFieldBase.styles,
         styles
     ]; }
-    #value = '';
+    #value;
     get value() {
         return this.#value;
     }
@@ -33,6 +38,7 @@ let UmTextField = class UmTextField extends UmTextFieldBase {
       </slot>
       <div class="input">
         <input
+          type=${this.type}
           part="input"
           id=${this.id || nothing}
           aria-labelledby="label"
@@ -57,6 +63,9 @@ let UmTextField = class UmTextField extends UmTextFieldBase {
 __decorate([
     property()
 ], UmTextField.prototype, "value", null);
+__decorate([
+    property()
+], UmTextField.prototype, "type", void 0);
 __decorate([
     property({ attribute: 'prefix-text' })
 ], UmTextField.prototype, "prefixText", void 0);

package/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;aAE9B,WAAM,GAAmB;QACvC,eAAe,CAAC,MAAM;QACtB,MAAM;KACP,AAHqB,CAGpB;IAEF,MAAM,GAAW,EAAE,CAAC;IAGpB,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IASQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;;eAKhB,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,WAAW,IAAI,OAAO;uBAC5B,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;;gBAGpB,IAAI,CAAC,UAAU;cACjB,CAAC;IACb,CAAC;IAED,YAAY;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAChC,CAAC;;AAhDD;IADC,QAAQ,EAAE;wCAGV;AAOqC;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC1C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAiD;AACvC;IAAnC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAkC;AAE5C;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAxB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2DvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  #value: string = '';\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n  set value(value: string) {\n    this.#value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n  @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n  @property({reflect: true}) autocomplete: 'on' | 'off' | string | undefined;\n  @property({reflect: true}) override autocapitalize!: string;\n\n  @query('input') input!: HTMLInputElement;\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder || nothing}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role}\n          .value=${live(this.#value)}\n          @input=${this.#handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>`;\n  }\n\n  #handleInput() {\n    this.value = this.input.value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QAOL,WAAM,GAAW,EAAE,CAAC;QAYR,SAAI,GAAW,MAAM,CAAC;IA0CpC,CAAC;aA3DiB,WAAM,GAAmB;QACvC,eAAe,CAAC,MAAM;QACtB,MAAM;KACP,AAHqB,CAGpB;IAEF,MAAM,CAAc;IAGpB,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAUQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;iBAId,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,WAAW,IAAI,OAAO;uBAC5B,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;;gBAGpB,IAAI,CAAC,UAAU;cACjB,CAAC;IACb,CAAC;IAED,YAAY;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAChC,CAAC;;AAlDD;IADC,QAAQ,EAAE;wCAGV;AAOW;IAAX,QAAQ,EAAE;yCAAuB;AACI;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC1C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAiD;AACvC;IAAnC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAkC;AAE5C;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAzB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6DvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  #value: string = '';\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n  set value(value: string) {\n    this.#value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @property() type: string = 'text';\n  @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n  @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n  @property({reflect: true}) autocomplete: 'on' | 'off' | string | undefined;\n  @property({reflect: true}) override autocapitalize!: string;\n\n  @query('input') input!: HTMLInputElement;\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          type=${this.type}\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder || nothing}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role}\n          .value=${live(this.#value)}\n          @input=${this.#handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>`;\n  }\n\n  #handleInput() {\n    this.value = this.input.value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}