diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 0000000..3eb1314
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
index 0cccd58..c2c6b60 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,11 @@ node_modules
 dist
 
 # no need to include @material/web bundled in the repo
-md-web
\ No newline at end of file
+# md-web
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
diff --git a/Cargo.lock b/Cargo.lock
index 01c4993..b228a6a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1,6 +1,6 @@
 # This file is automatically @generated by Cargo.
 # It is not intended for manual editing.
-version = 3
+version = 4
 
 [[package]]
 name = "addr2line"
@@ -59,6 +59,12 @@ version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf4b9d6a944f767f8e5e0db018570623c85f3d925ac718db4e06d0187adb21c1"
 
+[[package]]
+name = "boolinator"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
+
 [[package]]
 name = "builder"
 version = "0.1.0"
@@ -722,6 +728,15 @@ version = "0.4.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "90ed8c1e510134f979dbc4f070f87d4313098b704861a105fe34231c70a3901c"
 
+[[package]]
+name = "matdemo"
+version = "0.1.0"
+dependencies = [
+ "material-yew",
+ "wasm-bindgen",
+ "yew",
+]
+
 [[package]]
 name = "material-yew"
 version = "0.1.0"
@@ -1236,6 +1251,7 @@ dependencies = [
  "quote",
  "syn 2.0.58",
  "textwrap",
+ "wasm-bindgen",
  "yew",
  "yew-router",
 ]
@@ -1346,7 +1362,8 @@ dependencies = [
 [[package]]
 name = "yew"
 version = "0.21.0"
-source = "git+https://github.com/yewstack/yew#e9739fc9ce4944ba93c77a32072551ab771a2cda"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
 dependencies = [
  "console_error_panic_hook",
  "futures",
@@ -1370,8 +1387,10 @@ dependencies = [
 [[package]]
 name = "yew-macro"
 version = "0.21.0"
-source = "git+https://github.com/yewstack/yew#e9739fc9ce4944ba93c77a32072551ab771a2cda"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
 dependencies = [
+ "boolinator",
  "once_cell",
  "prettyplease",
  "proc-macro-error",
@@ -1383,7 +1402,8 @@ dependencies = [
 [[package]]
 name = "yew-router"
 version = "0.18.0"
-source = "git+https://github.com/yewstack/yew#e9739fc9ce4944ba93c77a32072551ab771a2cda"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ca1d5052c96e6762b4d6209a8aded597758d442e6c479995faf0c7b5538e0c6"
 dependencies = [
  "gloo 0.10.0",
  "js-sys",
@@ -1401,7 +1421,8 @@ dependencies = [
 [[package]]
 name = "yew-router-macro"
 version = "0.18.0"
-source = "git+https://github.com/yewstack/yew#e9739fc9ce4944ba93c77a32072551ab771a2cda"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42bfd190a07ca8cfde7cd4c52b3ac463803dc07323db8c34daa697e86365978c"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/Cargo.toml b/Cargo.toml
index 2a9814c..32b2247 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -9,16 +9,18 @@ edition = "2021"
 indexmap = "2.0.2"
 js-sys = "0.3.64"
 wasm-bindgen = "0.2.87"
-yew = { git = "https://github.com/yewstack/yew", features = ["csr"] }
+yew = { version = "0.21", features = ["csr"] }
 
 [dependencies.web-sys]
 version = "0.3.64"
 features = [
-    "HtmlFormElement"
+    "HtmlFormElement",
+    "CustomEvent"
 ]
 
 [workspace]
 members = [
     "build",
-    "usages"
+    "usages",
+    "matdemo"
 ]
diff --git a/build/README.md b/build/README.md
index a05c1cd..18d3217 100644
--- a/build/README.md
+++ b/build/README.md
@@ -5,8 +5,8 @@ Generates Rust wrapper for a component from material-web.
 ## Updating material web submodule
 
 1. Update the submodule to the latest version: `git submodule update --recursive --remote build/material-web`
-2. Checkout the new tag: `cd build/material-web && git checkout v1.4.0`
-3. Update the submodule reference in the main repository: `git add build/material-web && git commit -m "pin build/material web to v1.4.0"`
+2. Checkout the new tag: `cd build/material-web && git checkout v2.4.0`
+3. Update the submodule reference in the main repository: `git add build/material-web && git commit -m "pin build/material web to v2.4.0"`
 4. Update build/package.json with the tag used in step 2
 5. Run `npm install` in the build directory
 6. Run `npm run build` in the build directory
diff --git a/build/index.html b/build/index.html
index 40245e0..2358b74 100644
--- a/build/index.html
+++ b/build/index.html
@@ -6,7 +6,7 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
-
+    <link data-trunk rel="rust" data-bin="usages" />
     <script type="module">
         import "/dist/core.js"
         import "/dist/elevated-button.js"
diff --git a/build/material-web b/build/material-web
index ffc08d1..2206d7f 160000
--- a/build/material-web
+++ b/build/material-web
@@ -1 +1 @@
-Subproject commit ffc08d19088ca7b244c55aefbfb3aae92eac8e0c
+Subproject commit 2206d7f01ccdcc80f1df7af17261cc6e74cd6ac6
diff --git a/build/package-lock.json b/build/package-lock.json
index 50b3270..de738a2 100644
--- a/build/package-lock.json
+++ b/build/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@material/web": "1.4.0"
+        "@material/web": "2.4.0"
       },
       "devDependencies": {
         "@rollup/plugin-node-resolve": "^15.2.2",
@@ -30,11 +30,11 @@
       }
     },
     "node_modules/@material/web": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.4.0.tgz",
-      "integrity": "sha512-+rnQLUc/vsu7vnkr8XxbEhNVEcdkaYxNjykZ18w/nUMrYTEvAi4TRQJAYeEUXMwRcO3mEXBsCKOtHZ+cbmxTLw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-2.4.0.tgz",
+      "integrity": "sha512-2jYiPIYOuP2UcWXal4VdKRlkpBX02U3rgXMWp0yFQbJaOmK8MOIA3BsyuooM3VOYI+VCO70BeH1x43y5cBLvZQ==",
       "dependencies": {
-        "lit": "^2.7.4 || ^3.0.0",
+        "lit": "^2.8.0 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
@@ -465,11 +465,11 @@
       }
     },
     "@material/web": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.4.0.tgz",
-      "integrity": "sha512-+rnQLUc/vsu7vnkr8XxbEhNVEcdkaYxNjykZ18w/nUMrYTEvAi4TRQJAYeEUXMwRcO3mEXBsCKOtHZ+cbmxTLw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-2.4.0.tgz",
+      "integrity": "sha512-2jYiPIYOuP2UcWXal4VdKRlkpBX02U3rgXMWp0yFQbJaOmK8MOIA3BsyuooM3VOYI+VCO70BeH1x43y5cBLvZQ==",
       "requires": {
-        "lit": "^2.7.4 || ^3.0.0",
+        "lit": "^2.8.0 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
diff --git a/build/package.json b/build/package.json
index c014a54..dffa32e 100644
--- a/build/package.json
+++ b/build/package.json
@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@material/web": "1.4.0"
+    "@material/web": "2.4.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.2",
diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs
index d100126..3650854 100644
--- a/build/rollup.config.mjs
+++ b/build/rollup.config.mjs
@@ -8,6 +8,11 @@ const config = {
         "./rollup_inputs/fab.js",
         "./rollup_inputs/chip.js",
         "./rollup_inputs/icon-button.js",
+        "./rollup_inputs/chips.js",
+        "./rollup_inputs/field.js",
+        "./rollup_inputs/select.js",
+        "./rollup_inputs/tabs.js",
+        "./rollup_inputs/textfield.js",
         "@material/web/checkbox/checkbox.js",
         "@material/web/radio/radio.js",
         "@material/web/menu/menu.js",
@@ -19,6 +24,10 @@ const config = {
         "@material/web/progress/linear-progress.js",
         "@material/web/slider/slider.js",
         "@material/web/switch/switch.js",
+        // Added new components below
+        "@material/web/dialog/dialog.js",
+        "@material/web/divider/divider.js",
+        "@material/web/ripple/ripple.js",
     ],
     plugins: [nodeResolve()],
     output: {
diff --git a/build/rollup_inputs/chips.js b/build/rollup_inputs/chips.js
new file mode 100644
index 0000000..1e22fda
--- /dev/null
+++ b/build/rollup_inputs/chips.js
@@ -0,0 +1,2 @@
+import "@material/web/chips/chip.js";
+import "@material/web/chips/chip-set.js";
\ No newline at end of file
diff --git a/build/rollup_inputs/divider.js b/build/rollup_inputs/divider.js
new file mode 100644
index 0000000..ac92e6a
--- /dev/null
+++ b/build/rollup_inputs/divider.js
@@ -0,0 +1 @@
+import '@material/web/divider/divider.js';
\ No newline at end of file
diff --git a/build/rollup_inputs/field.js b/build/rollup_inputs/field.js
new file mode 100644
index 0000000..c514ce6
--- /dev/null
+++ b/build/rollup_inputs/field.js
@@ -0,0 +1,2 @@
+import "@material/web/field/filled-field.js";
+import "@material/web/field/outlined-field.js";
\ No newline at end of file
diff --git a/build/rollup_inputs/select.js b/build/rollup_inputs/select.js
new file mode 100644
index 0000000..fec70d2
--- /dev/null
+++ b/build/rollup_inputs/select.js
@@ -0,0 +1,2 @@
+import "@material/web/select/filled-select.js";
+import "@material/web/select/outlined-select.js";
\ No newline at end of file
diff --git a/build/rollup_inputs/tabs.js b/build/rollup_inputs/tabs.js
new file mode 100644
index 0000000..8b02cc3
--- /dev/null
+++ b/build/rollup_inputs/tabs.js
@@ -0,0 +1,2 @@
+import "@material/web/tabs/tabs.js";
+import "@material/web/tabs/tab.js";
\ No newline at end of file
diff --git a/build/rollup_inputs/textfield.js b/build/rollup_inputs/textfield.js
new file mode 100644
index 0000000..ea38b03
--- /dev/null
+++ b/build/rollup_inputs/textfield.js
@@ -0,0 +1,2 @@
+import "@material/web/textfield/filled-text-field.js";
+import "@material/web/textfield/outlined-text-field.js";
\ No newline at end of file
diff --git a/matdemo/Cargo.toml b/matdemo/Cargo.toml
new file mode 100644
index 0000000..9001fa7
--- /dev/null
+++ b/matdemo/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "matdemo"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+material-yew = { path = ".." }
+wasm-bindgen = "0.2"
+
+
+[profile.release]
+lto = true
+codegen-units = 1
+opt-level = "z"
diff --git a/matdemo/README.md b/matdemo/README.md
new file mode 100644
index 0000000..21f0fe7
--- /dev/null
+++ b/matdemo/README.md
@@ -0,0 +1,32 @@
+# matdemo
+
+A demo web application for Material Yew components.
+
+## Prerequisites
+- [Rust](https://rustup.rs/) (with wasm32 target)
+- [Trunk](https://trunkrs.dev/) (`cargo install trunk`)
+
+## Build and Run
+
+1. Install Trunk if you haven't:
+   ```bash
+   cargo install trunk
+   ```
+2. Add the wasm32 target if needed:
+   ```bash
+   rustup target add wasm32-unknown-unknown
+   ```
+3. Build and serve the app:
+   ```bash
+   trunk serve --open
+   ```
+   This will open the demo at http://localhost:8080
+
+## Project Structure
+- `src/main.rs`: App entry point
+- `src/pages.rs`: Demo pages for each component
+- `index.html`: Main HTML file
+- `Trunk.toml`: Trunk configuration
+
+## Notes
+- The demo showcases all available Material Yew components with simple usage examples.
diff --git a/matdemo/Trunk.toml b/matdemo/Trunk.toml
new file mode 100644
index 0000000..b51699b
--- /dev/null
+++ b/matdemo/Trunk.toml
@@ -0,0 +1,7 @@
+[static]
+dir = "../md-web"
+mount = "/md-web"
+
+[serve]
+port = 8080
+open = true
diff --git a/matdemo/index.html b/matdemo/index.html
new file mode 100644
index 0000000..5b0902d
--- /dev/null
+++ b/matdemo/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Material Yew Demo</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <!-- Material Web v3 theme and typography -->
+    <link rel="stylesheet" href="https://unpkg.com/@material/web@latest/all.css" />
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module">import init from './matdemo.js'; init();</script>
+</body>
+</html>
diff --git a/matdemo/src/main.rs b/matdemo/src/main.rs
new file mode 100644
index 0000000..801f70b
--- /dev/null
+++ b/matdemo/src/main.rs
@@ -0,0 +1,18 @@
+use yew::prelude::*;
+use material_yew::*;
+
+mod pages;
+
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+        <>
+            <h1>{ "Material Yew Component Demos" }</h1>
+            <pages::DemoPages />
+        </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
diff --git a/matdemo/src/pages.rs b/matdemo/src/pages.rs
new file mode 100644
index 0000000..9b80e6d
--- /dev/null
+++ b/matdemo/src/pages.rs
@@ -0,0 +1,103 @@
+
+use yew::prelude::*;
+use material_yew::*;
+
+#[function_component(DemoPages)]
+pub fn demo_pages() -> Html {
+    html! {
+        <div>
+            <h2>{ "Button" }</h2>
+            <Button variant={ButtonVariants::Filled}>{ "Click me!" }</Button>
+
+            <h2>{ "Checkbox" }</h2>
+            <Checkbox />
+
+            <h2>{ "Chip" }</h2>
+            <Chip variant={ChipVariants::Assist} label={"Demo Chip"} />
+
+            <h2>{ "Chips" }</h2>
+            <Chips label={Some("Chips Group".to_string())} />
+
+            <h2>{ "Circular Progress" }</h2>
+            <CircularProgress value={50} max={100} />
+
+            <h2>{ "Color" }</h2>
+            <Color value={Some("#2196f3".to_string())} />
+
+            <h2>{ "Dialog" }</h2>
+            <Dialog open={false} heading={Some("Dialog Heading".to_string())}>{ "Dialog content here." }</Dialog>
+
+            <h2>{ "Divider" }</h2>
+            <Divider />
+
+            <h2>{ "Elevation" }</h2>
+            <Elevation level={Some(3)} />
+
+            <h2>{ "FAB" }</h2>
+            <Fab variant={FabVariants::Standard} label={"Add"} />
+
+            <h2>{ "Field" }</h2>
+            <Field label={Some("Field Label".to_string())}>{ "Field content" }</Field>
+
+            <h2>{ "Focus" }</h2>
+            <Focus>{ "Focusable content" }</Focus>
+
+            <h2>{ "Icon" }</h2>
+            <Icon icon={Some("star".to_string())} />
+
+            <h2>{ "Icon Button" }</h2>
+            <IconButton variant={IconButtonVariants::Standard}>{ "favorite" }</IconButton>
+
+            <h2>{ "Linear Progress" }</h2>
+            <LinearProgress value={50} max={100} />
+
+            <h2>{ "List" }</h2>
+            <List>
+                <ListItem>{ "Item 1" }</ListItem>
+                <ListItem>{ "Item 2" }</ListItem>
+            </List>
+
+            <h2>{ "List Item" }</h2>
+            <ListItem>{ "Standalone List Item" }</ListItem>
+
+            <h2>{ "Menu" }</h2>
+            <Menu>
+                <MenuItem>{ "Menu Item 1" }</MenuItem>
+                <MenuItem>{ "Menu Item 2" }</MenuItem>
+            </Menu>
+
+            <h2>{ "Menu Item" }</h2>
+            <MenuItem>{ "Standalone Menu Item" }</MenuItem>
+
+            <h2>{ "Progress" }</h2>
+            <Progress progress={Some(0.7)} />
+
+            <h2>{ "Radio" }</h2>
+            <Radio />
+
+            <h2>{ "Ripple" }</h2>
+            <Ripple>{ "Rippled content" }</Ripple>
+
+            <h2>{ "Select" }</h2>
+            <Select label={Some("Select Label".to_string())}>
+                <MenuItem>{ "Option 1" }</MenuItem>
+                <MenuItem>{ "Option 2" }</MenuItem>
+            </Select>
+
+            <h2>{ "Slider" }</h2>
+            <Slider />
+
+            <h2>{ "Sub Menu" }</h2>
+            <SubMenu>{ "Sub Menu Content" }</SubMenu>
+
+            <h2>{ "Switch" }</h2>
+            <Switch selected={true} />
+
+            <h2>{ "Tabs" }</h2>
+            <Tabs active_index={Some(0)}>{ "Tab content" }</Tabs>
+
+            <h2>{ "TextField" }</h2>
+            <TextField label={Some("Text Field".to_string())} />
+        </div>
+    }
+}
diff --git a/md-web/button.js b/md-web/button.js
new file mode 100644
index 0000000..6fe539c
--- /dev/null
+++ b/md-web/button.js
@@ -0,0 +1,292 @@
+export const __dummy_loader = () => {};
+
+import { ab as Button, x, i, ac as styles$5, ad as styles$6, _ as __decorate, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An elevated button component.
+ */
+class ElevatedButton extends Button {
+    renderElevationOrOutline() {
+        return x `<md-elevation part="elevation"></md-elevation>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/elevated-styles.css.
+const styles$4 = i `:host{--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-elevated-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-elevated-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-elevated-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-elevated-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-elevated-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-elevated-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-elevated-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-elevated-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-elevated-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-elevated-button-icon-size, 18px);--_pressed-icon-color: var(--md-elevated-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-elevated-button-leading-space, 24px);--_trailing-space: var(--md-elevated-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-elevated-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-elevated-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-elevated-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-elevated-button-with-trailing-icon-trailing-space, 16px)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdElevatedButton = class MdElevatedButton extends ElevatedButton {
+};
+MdElevatedButton.styles = [
+    styles$5,
+    styles$6,
+    styles$4,
+];
+MdElevatedButton = __decorate([
+    e('md-elevated-button')
+], MdElevatedButton);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A filled button component.
+ */
+class FilledButton extends Button {
+    renderElevationOrOutline() {
+        return x `<md-elevation part="elevation"></md-elevation>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/filled-styles.css.
+const styles$3 = i `:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-filled-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-color: var(--md-filled-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-button-leading-space, 24px);--_trailing-space: var(--md-filled-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-button-with-trailing-icon-trailing-space, 16px)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledButton = class MdFilledButton extends FilledButton {
+};
+MdFilledButton.styles = [
+    styles$5,
+    styles$6,
+    styles$3,
+];
+MdFilledButton = __decorate([
+    e('md-filled-button')
+], MdFilledButton);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A filled tonal button component.
+ */
+class FilledTonalButton extends Button {
+    renderElevationOrOutline() {
+        return x `<md-elevation part="elevation"></md-elevation>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/filled-tonal-styles.css.
+const styles$2 = i `:host{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-filled-tonal-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-tonal-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-tonal-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-tonal-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_container-shape-start-start: var(--md-filled-tonal-button-container-shape-start-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-button-container-shape-start-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-button-container-shape-end-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-button-container-shape-end-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton {
+};
+MdFilledTonalButton.styles = [
+    styles$5,
+    styles$6,
+    styles$2,
+];
+MdFilledTonalButton = __decorate([
+    e('md-filled-tonal-button')
+], MdFilledTonalButton);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An outlined button component.
+ */
+class OutlinedButton extends Button {
+    renderElevationOrOutline() {
+        return x `<div class="outline"></div>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/outlined-styles.css.
+const styles$1 = i `:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}.outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}:host(:active) .outline{border-color:var(--_pressed-outline-color)}:host(:is([disabled],[soft-disabled])) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])) .background{border-color:GrayText}:host(:is([disabled],[soft-disabled])) .outline{opacity:1}}.outline,md-ripple{border-width:var(--_outline-width)}md-ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Use an outlined button for actions that need attention but
+ * aren’t the primary action, such as “See all” or “Add to cart.” This is also
+ * the button to use for giving someone the opportunity to change their mind or
+ * escape a flow.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedButton = class MdOutlinedButton extends OutlinedButton {
+};
+MdOutlinedButton.styles = [styles$5, styles$1];
+MdOutlinedButton = __decorate([
+    e('md-outlined-button')
+], MdOutlinedButton);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A text button component.
+ */
+class TextButton extends Button {
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/text-styles.css.
+const styles = i `:host{--_container-height: var(--md-text-button-container-height, 40px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-text-button-container-shape-start-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-text-button-container-shape-start-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-text-button-container-shape-end-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-text-button-container-shape-end-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdTextButton = class MdTextButton extends TextButton {
+};
+MdTextButton.styles = [styles$5, styles];
+MdTextButton = __decorate([
+    e('md-text-button')
+], MdTextButton);
diff --git a/md-web/checkbox.js b/md-web/checkbox.js
new file mode 100644
index 0000000..22d0666
--- /dev/null
+++ b/md-web/checkbox.js
@@ -0,0 +1,218 @@
+export const __dummy_loader = () => {};
+
+import { m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, s, _ as __decorate, n, t, c as i, d as isActivationClick, f as dispatchActivationClick, o, x, A, r as redispatchEvent, g as getFormValue, h as getFormState, j as createValidator, k as CheckboxValidator, p as getValidityAnchor, q as mixinElementInternals, i as i$1, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const checkboxBaseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(s))));
+/**
+ * A checkbox component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ */
+class Checkbox extends checkboxBaseClass {
+    constructor() {
+        super();
+        /**
+         * Whether or not the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Whether or not the checkbox is indeterminate.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+         */
+        this.indeterminate = false;
+        /**
+         * When true, require the checkbox to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
+        /**
+         * The value of the checkbox that is submitted with a form when selected.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+         */
+        this.value = 'on';
+        this.prevChecked = false;
+        this.prevDisabled = false;
+        this.prevIndeterminate = false;
+        {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event) || !this.input) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.input);
+            });
+        }
+    }
+    update(changed) {
+        if (changed.has('checked') ||
+            changed.has('disabled') ||
+            changed.has('indeterminate')) {
+            this.prevChecked = changed.get('checked') ?? this.checked;
+            this.prevDisabled = changed.get('disabled') ?? this.disabled;
+            this.prevIndeterminate =
+                changed.get('indeterminate') ?? this.indeterminate;
+        }
+        super.update(changed);
+    }
+    render() {
+        const prevNone = !this.prevChecked && !this.prevIndeterminate;
+        const prevChecked = this.prevChecked && !this.prevIndeterminate;
+        const prevIndeterminate = this.prevIndeterminate;
+        const isChecked = this.checked && !this.indeterminate;
+        const isIndeterminate = this.indeterminate;
+        const containerClasses = o({
+            'disabled': this.disabled,
+            'selected': isChecked || isIndeterminate,
+            'unselected': !isChecked && !isIndeterminate,
+            'checked': isChecked,
+            'indeterminate': isIndeterminate,
+            'prev-unselected': prevNone,
+            'prev-checked': prevChecked,
+            'prev-indeterminate': prevIndeterminate,
+            'prev-disabled': this.prevDisabled,
+        });
+        // Needed for closure conformance
+        const { ariaLabel, ariaInvalid } = this;
+        // Note: <input> needs to be rendered before the <svg> for
+        // form.reportValidity() to work in Chrome.
+        return x `
+      <div class="container ${containerClasses}">
+        <input
+          type="checkbox"
+          id="input"
+          aria-checked=${isIndeterminate ? 'mixed' : A}
+          aria-label=${ariaLabel || A}
+          aria-invalid=${ariaInvalid || A}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          .indeterminate=${this.indeterminate}
+          .checked=${this.checked}
+          @input=${this.handleInput}
+          @change=${this.handleChange} />
+
+        <div class="outline"></div>
+        <div class="background"></div>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
+        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
+        <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
+          <rect class="mark short" />
+          <rect class="mark long" />
+        </svg>
+      </div>
+    `;
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = target.indeterminate;
+        // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+    }
+    handleChange(event) {
+        // <input> 'change' event is not composed, re-dispatch it.
+        redispatchEvent(this, event);
+    }
+    [getFormValue]() {
+        if (!this.checked || this.indeterminate) {
+            return null;
+        }
+        return this.value;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    formResetCallback() {
+        // The checked property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.checked = this.hasAttribute('checked');
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new CheckboxValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.input;
+    }
+}
+/** @nocollapse */
+Checkbox.shadowRootOptions = {
+    ...s.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    n()
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    t()
+], Checkbox.prototype, "prevChecked", void 0);
+__decorate([
+    t()
+], Checkbox.prototype, "prevDisabled", void 0);
+__decorate([
+    t()
+], Checkbox.prototype, "prevIndeterminate", void 0);
+__decorate([
+    i('input')
+], Checkbox.prototype, "input", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./checkbox/internal/checkbox-styles.css.
+const styles = i$1 `:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}
+`;
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Checkboxes allow users to select one or more items from a set.
+ * Checkboxes can turn an option on or off.
+ *
+ * @description
+ * Use checkboxes to:
+ * - Select one or more options from a list
+ * - Present a list containing sub-selections
+ * - Turn an item on or off in a desktop environment
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdCheckbox = class MdCheckbox extends Checkbox {
+};
+MdCheckbox.styles = [styles];
+MdCheckbox = __decorate([
+    e('md-checkbox')
+], MdCheckbox);
+
+export { MdCheckbox };
diff --git a/md-web/chip.js b/md-web/chip.js
new file mode 100644
index 0000000..2d71829
--- /dev/null
+++ b/md-web/chip.js
@@ -0,0 +1,364 @@
+export const __dummy_loader = () => {};
+
+import { i, a4 as styles$4, a5 as styles$5, _ as __decorate, a6 as AssistChip, e, n, c as i$1, a7 as MultiActionChip, x, A, a8 as renderRemoveButton, r as redispatchEvent, a9 as styles$6, aa as styles$7 } from './core.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/assist-styles.css.
+const styles$3 = i `:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-assist-chip-leading-space, 16px);--_trailing-space: var(--md-assist-chip-trailing-space, 16px);--_icon-label-space: var(--md-assist-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-assist-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdAssistChip = class MdAssistChip extends AssistChip {
+};
+MdAssistChip.styles = [styles$4, styles$5, styles$3];
+MdAssistChip = __decorate([
+    e('md-assist-chip')
+], MdAssistChip);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A filter chip component.
+ *
+ * @fires remove {Event} Dispatched when the remove button is clicked.
+ */
+class FilterChip extends MultiActionChip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.removable = false;
+        this.selected = false;
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when a filter chip has a `slot="selected-icon"` to avoid
+         * a Flash Of Unstyled Content.
+         */
+        this.hasSelectedIcon = false;
+    }
+    get primaryId() {
+        return 'button';
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            elevated: this.elevated,
+            selected: this.selected,
+            'has-trailing': this.removable,
+            'has-icon': this.hasIcon || this.selected,
+        };
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        return x `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || A}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.softDisabled || A}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        @click=${this.handleClickOnChild}
+        >${content}</button
+      >
+    `;
+    }
+    renderLeadingIcon() {
+        if (!this.selected) {
+            return super.renderLeadingIcon();
+        }
+        return x `
+      <slot name="selected-icon">
+        <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+          <path
+            d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+        </svg>
+      </slot>
+    `;
+    }
+    renderTrailingAction(focusListener) {
+        if (this.removable) {
+            return renderRemoveButton({
+                focusListener,
+                ariaLabel: this.ariaLabelRemove,
+                disabled: this.disabled || this.softDisabled,
+            });
+        }
+        return A;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return x `<md-elevation part="elevation"></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
+    handleClickOnChild(event) {
+        if (this.disabled || this.softDisabled) {
+            return;
+        }
+        // Store prevValue to revert in case `chip.selected` is changed during an
+        // event listener.
+        const prevValue = this.selected;
+        this.selected = !this.selected;
+        const preventDefault = !redispatchEvent(this, event);
+        if (preventDefault) {
+            // We should not do `this.selected = !this.selected`, since a client
+            // click listener could change its value. Instead, always revert to the
+            // original value.
+            this.selected = prevValue;
+            return;
+        }
+    }
+}
+__decorate([
+    n({ type: Boolean })
+], FilterChip.prototype, "elevated", void 0);
+__decorate([
+    n({ type: Boolean })
+], FilterChip.prototype, "removable", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], FilterChip.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'has-selected-icon' })
+], FilterChip.prototype, "hasSelectedIcon", void 0);
+__decorate([
+    i$1('.primary.action')
+], FilterChip.prototype, "primaryAction", void 0);
+__decorate([
+    i$1('.trailing.action')
+], FilterChip.prototype, "trailingAction", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/filter-styles.css.
+const styles$2 = i `:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-filter-chip-leading-space, 16px);--_trailing-space: var(--md-filter-chip-trailing-space, 16px);--_icon-label-space: var(--md-filter-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-filter-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-filter-chip-with-trailing-icon-trailing-space, 8px)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilterChip = class MdFilterChip extends FilterChip {
+};
+MdFilterChip.styles = [
+    styles$4,
+    styles$5,
+    styles$6,
+    styles$7,
+    styles$2,
+];
+MdFilterChip = __decorate([
+    e('md-filter-chip')
+], MdFilterChip);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An input chip component.
+ *
+ * @fires remove {Event} Dispatched when the remove button is clicked.
+ */
+class InputChip extends MultiActionChip {
+    constructor() {
+        super(...arguments);
+        this.avatar = false;
+        this.href = '';
+        this.target = '';
+        this.removeOnly = false;
+        this.selected = false;
+    }
+    get primaryId() {
+        if (this.href) {
+            return 'link';
+        }
+        if (this.removeOnly) {
+            return '';
+        }
+        return 'button';
+    }
+    get rippleDisabled() {
+        // Link chips cannot be disabled
+        return !this.href && (this.disabled || this.softDisabled);
+    }
+    get primaryAction() {
+        // Don't use @query() since a remove-only input chip still has a span that
+        // has "primary action" classes.
+        if (this.removeOnly) {
+            return null;
+        }
+        return this.renderRoot.querySelector('.primary.action');
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            avatar: this.avatar,
+            // Link chips cannot be disabled
+            disabled: !this.href && (this.disabled || this.softDisabled),
+            link: !!this.href,
+            selected: this.selected,
+            'has-trailing': true,
+        };
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        if (this.href) {
+            return x `
+        <a
+          class="primary action"
+          id="link"
+          aria-label=${ariaLabel || A}
+          href=${this.href}
+          target=${this.target || A}
+          >${content}</a
+        >
+      `;
+        }
+        if (this.removeOnly) {
+            return x `
+        <span class="primary action" aria-label=${ariaLabel || A}>
+          ${content}
+        </span>
+      `;
+        }
+        return x `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || A}
+        aria-disabled=${this.softDisabled || A}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        type="button"
+        >${content}</button
+      >
+    `;
+    }
+    renderTrailingAction(focusListener) {
+        return renderRemoveButton({
+            focusListener,
+            ariaLabel: this.ariaLabelRemove,
+            disabled: !this.href && (this.disabled || this.softDisabled),
+            tabbable: this.removeOnly,
+        });
+    }
+}
+__decorate([
+    n({ type: Boolean })
+], InputChip.prototype, "avatar", void 0);
+__decorate([
+    n()
+], InputChip.prototype, "href", void 0);
+__decorate([
+    n()
+], InputChip.prototype, "target", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'remove-only' })
+], InputChip.prototype, "removeOnly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], InputChip.prototype, "selected", void 0);
+__decorate([
+    i$1('.trailing.action')
+], InputChip.prototype, "trailingAction", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/input-styles.css.
+const styles$1 = i `:host{--_container-height: var(--md-input-chip-container-height, 32px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 9999px));--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-input-chip-leading-space, 16px);--_trailing-space: var(--md-input-chip-trailing-space, 16px);--_icon-label-space: var(--md-input-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-input-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-input-chip-with-trailing-icon-trailing-space, 8px)}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdInputChip = class MdInputChip extends InputChip {
+};
+MdInputChip.styles = [
+    styles$4,
+    styles$6,
+    styles$7,
+    styles$1,
+];
+MdInputChip = __decorate([
+    e('md-input-chip')
+], MdInputChip);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A suggestion chip component.
+ */
+class SuggestionChip extends AssistChip {
+}
+// Note: assist and suggestion chips are functionally identical with different
+// tokens.
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/suggestion-styles.css.
+const styles = i `:host{--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-suggestion-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-suggestion-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-suggestion-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-suggestion-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-suggestion-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-suggestion-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-suggestion-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-suggestion-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-suggestion-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px);--_container-shape-start-start: var(--md-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-suggestion-chip-leading-space, 16px);--_trailing-space: var(--md-suggestion-chip-trailing-space, 16px);--_icon-label-space: var(--md-suggestion-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-suggestion-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
+};
+MdSuggestionChip.styles = [styles$4, styles$5, styles];
+MdSuggestionChip = __decorate([
+    e('md-suggestion-chip')
+], MdSuggestionChip);
diff --git a/md-web/chips.js b/md-web/chips.js
new file mode 100644
index 0000000..e8a122a
--- /dev/null
+++ b/md-web/chips.js
@@ -0,0 +1,155 @@
+export const __dummy_loader = () => {};
+
+import '@material/web/chips/chip.js';
+import { _ as __decorate, l, s, C as Chip, x, i, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A chip set component.
+ */
+class ChipSet extends s {
+    get chips() {
+        return this.childElements.filter((child) => child instanceof Chip);
+    }
+    constructor() {
+        super();
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        {
+            this.addEventListener('focusin', this.updateTabIndices.bind(this));
+            this.addEventListener('update-focus', this.updateTabIndices.bind(this));
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.internals.role = 'toolbar';
+        }
+    }
+    render() {
+        return x `<slot @slotchange=${this.updateTabIndices}></slot>`;
+    }
+    handleKeyDown(event) {
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        const isHome = event.key === 'Home';
+        const isEnd = event.key === 'End';
+        // Ignore non-navigation keys
+        if (!isLeft && !isRight && !isHome && !isEnd) {
+            return;
+        }
+        const { chips } = this;
+        // Don't try to select another chip if there aren't any.
+        if (chips.length < 2) {
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        if (isHome || isEnd) {
+            const index = isHome ? 0 : chips.length - 1;
+            chips[index].focus({ trailing: isEnd });
+            this.updateTabIndices();
+            return;
+        }
+        // Check if moving forwards or backwards
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft : isRight;
+        const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
+        if (!focusedChip) {
+            // If there is not already a chip focused, select the first or last chip
+            // based on the direction we're traveling.
+            const nextChip = forwards ? chips[0] : chips[chips.length - 1];
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            return;
+        }
+        const currentIndex = chips.indexOf(focusedChip);
+        let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;
+        // Search for the next sibling that is not disabled to select.
+        // If we return to the host index, there is nothing to select.
+        while (nextIndex !== currentIndex) {
+            if (nextIndex >= chips.length) {
+                // Return to start if moving past the last item.
+                nextIndex = 0;
+            }
+            else if (nextIndex < 0) {
+                // Go to end if moving before the first item.
+                nextIndex = chips.length - 1;
+            }
+            // Check if the next sibling is disabled. If so,
+            // move the index and continue searching.
+            //
+            // Some toolbar items may be focusable when disabled for increased
+            // visibility.
+            const nextChip = chips[nextIndex];
+            if (nextChip.disabled && !nextChip.alwaysFocusable) {
+                if (forwards) {
+                    nextIndex++;
+                }
+                else {
+                    nextIndex--;
+                }
+                continue;
+            }
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            break;
+        }
+    }
+    updateTabIndices() {
+        // The chip that should be focusable is either the chip that currently has
+        // focus or the first chip that can be focused.
+        const { chips } = this;
+        let chipToFocus;
+        for (const chip of chips) {
+            const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
+            const chipIsFocused = chip.matches(':focus-within');
+            if (chipIsFocused && isChipFocusable) {
+                // Found the first chip that is actively focused. This overrides the
+                // first focusable chip found.
+                chipToFocus = chip;
+                continue;
+            }
+            if (isChipFocusable && !chipToFocus) {
+                chipToFocus = chip;
+            }
+            // Disable non-focused chips. If we disable all of them, we'll grant focus
+            // to the first focusable child that was found.
+            chip.tabIndex = -1;
+        }
+        if (chipToFocus) {
+            chipToFocus.tabIndex = 0;
+        }
+    }
+}
+__decorate([
+    l()
+], ChipSet.prototype, "childElements", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/chip-set-styles.css.
+const styles = i `:host{display:flex;flex-wrap:wrap;gap:8px}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdChipSet = class MdChipSet extends ChipSet {
+};
+MdChipSet.styles = [styles];
+MdChipSet = __decorate([
+    e('md-chip-set')
+], MdChipSet);
diff --git a/md-web/circular-progress.js b/md-web/circular-progress.js
new file mode 100644
index 0000000..a4fb20f
--- /dev/null
+++ b/md-web/circular-progress.js
@@ -0,0 +1,87 @@
+export const __dummy_loader = () => {};
+
+import { P as Progress, x, i, _ as __decorate, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A circular progress component.
+ */
+class CircularProgress extends Progress {
+    renderIndicator() {
+        if (this.indeterminate) {
+            return this.renderIndeterminateContainer();
+        }
+        return this.renderDeterminateContainer();
+    }
+    // Determinate mode is rendered with an svg so the progress arc can be
+    // easily animated via stroke-dashoffset.
+    renderDeterminateContainer() {
+        const dashOffset = (1 - this.value / this.max) * 100;
+        // note, dash-array/offset are relative to Setting `pathLength` but
+        // Chrome seems to render this inaccurately and using a large viewbox helps.
+        return x `
+      <svg viewBox="0 0 4800 4800">
+        <circle class="track" pathLength="100"></circle>
+        <circle
+          class="active-track"
+          pathLength="100"
+          stroke-dashoffset=${dashOffset}></circle>
+      </svg>
+    `;
+    }
+    // Indeterminate mode rendered with 2 bordered-divs. The borders are
+    // clipped into half circles by their containers. The divs are then carefully
+    // animated to produce changes to the spinner arc size.
+    // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
+    // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
+    renderIndeterminateContainer() {
+        return x ` <div class="spinner">
+      <div class="left">
+        <div class="circle"></div>
+      </div>
+      <div class="right">
+        <div class="circle"></div>
+      </div>
+    </div>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./progress/internal/circular-progress-styles.css.
+const styles = i `:host{--_active-indicator-color: var(--md-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 10);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;width:var(--_size);height:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.progress{flex:1;align-self:stretch;margin:4px}.progress,.spinner,.left,.right,.circle,svg,.track,.active-track{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.active-track{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.progress.indeterminate{animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media(forced-colors: active){.active-track{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdCircularProgress = class MdCircularProgress extends CircularProgress {
+};
+MdCircularProgress.styles = [styles];
+MdCircularProgress = __decorate([
+    e('md-circular-progress')
+], MdCircularProgress);
+
+export { MdCircularProgress };
diff --git a/md-web/core.js b/md-web/core.js
new file mode 100644
index 0000000..d277d6b
--- /dev/null
+++ b/md-web/core.js
@@ -0,0 +1,7865 @@
+export const __dummy_loader = () => {};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$a=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return {kind:t,elements:s,finisher(n){customElements.define(e,n);}}})(e,n);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i$6=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}},e$9=(i,e,n)=>{e.constructor.createProperty(n,i);};function n$7(n){return (t,o)=>void 0!==o?e$9(n,t,o):i$6(n,t)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function t$3(t){return n$7({...t,state:!0})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$8=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n);}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n);}};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function i$5(i,n){return o$8({descriptor:o=>{const t={get(){var o,n;return null!==(n=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==n?n:null},enumerable:!0,configurable:!0};if(n){const n="symbol"==typeof o?Symbol():"__"+o;t.get=function(){var o,t;return void 0===this[n]&&(this[n]=null!==(t=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==t?t:null),this[n]};}return t}})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e$8(e){return o$8({descriptor:r=>({get(){var r,o;return null!==(o=null===(r=this.renderRoot)||void 0===r?void 0:r.querySelectorAll(e))&&void 0!==o?o:[]},enumerable:!0,configurable:!0})})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e$7(e){return o$8({descriptor:r=>({async get(){var r;return await this.updateComplete,null===(r=this.renderRoot)||void 0===r?void 0:r.querySelector(e)},enumerable:!0,configurable:!0})})}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var n$6;const e$6=null!=(null===(n$6=window.HTMLSlotElement)||void 0===n$6?void 0:n$6.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));function l$5(n){const{slot:l,selector:t}=null!=n?n:{};return o$8({descriptor:o=>({get(){var o;const r="slot"+(l?`[name=${l}]`:":not([name])"),i=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(r),s=null!=i?e$6(i,n):[];return t?s.filter((o=>o.matches(t))):s},enumerable:!0,configurable:!0})})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function o$7(o,n,r){let l,s=o;return "object"==typeof o?(s=o.slot,l=o):l={flatten:n},r?l$5({slot:s,flatten:n,selector:r}):o$8({descriptor:e=>({get(){var e,t;const o="slot"+(s?`[name=${s}]`:":not([name])"),n=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(o);return null!==(t=null==n?void 0:n.assignedNodes(l))&&void 0!==t?t:[]},enumerable:!0,configurable:!0})})}
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=window,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$5=Symbol(),n$5=new WeakMap;let o$6 = class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$5)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new o$6("string"==typeof t?t:t+"",void 0,s$5),i$4=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$6(n,t,s$5)},S$1=(s,n)=>{e$5?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$2.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$1=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var s$4;const e$4=window,r$1=e$4.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$5=e$4.reactiveElementPolyfillSupport,n$4={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$3=(t,i)=>i!==t&&(i==i||t==t),l$4={attribute:!0,type:String,converter:n$4,reflect:!1,hasChanged:a$3},d$1="finalized";let u$1 = class u extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$4){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$4}static finalize(){if(this.hasOwnProperty(d$1))return !1;this[d$1]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$4){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$4).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$4;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$3)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}};u$1[d$1]=!0,u$1.elementProperties=new Map,u$1.elementStyles=[],u$1.shadowRootOptions={mode:"open"},null==o$5||o$5({ReactiveElement:u$1}),(null!==(s$4=e$4.reactiveElementVersions)&&void 0!==s$4?s$4:e$4.reactiveElementVersions=[]).push("1.6.3");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t$1;const i$3=window,s$3=i$3.trustedTypes,e$3=s$3?s$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$4="$lit$",n$3=`lit$${(Math.random()+"").slice(9)}$`,l$3="?"+n$3,h=`<${l$3}>`,r=document,u=()=>r.createComment(""),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,c=Array.isArray,v=t=>c(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),a$2="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a$2}(?:([^\\s"'>=/]+)(${a$2}*=${a$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,w=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=w(1),T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$3?e$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?"<svg>":"",u=f;for(let i=0;i<s;i++){const s=t[i];let d,c,v=-1,a=0;for(;a<s.length&&(u.lastIndex=a,c=u.exec(s),null!==c);)a=u.lastIndex,u===f?"!--"===c[1]?u=_:void 0!==c[1]?u=m:void 0!==c[2]?(y.test(c[2])&&(l=RegExp("</"+c[2],"g")),u=p):void 0!==c[3]&&(u=p):u===p?">"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o$4+s.slice(v)+n$3+w):s+n$3+(-2===v?(e.push(void 0),i):w);}return [P(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(h=C.nextNode())&&v.length<c;){if(1===h.nodeType){if(h.hasAttributes()){const t=[];for(const i of h.getAttributeNames())if(i.endsWith(o$4)||i.startsWith(n$3)){const s=f[d++];if(t.push(i),void 0!==s){const t=h.getAttribute(s.toLowerCase()+o$4).split(n$3),i=/([.?@])?(.*)/.exec(s);v.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?H:"?"===i[1]?L:"@"===i[1]?z:k});}else v.push({type:6,index:r});}for(const i of t)h.removeAttribute(i);}if(y.test(h.tagName)){const t=h.textContent.split(n$3),i=t.length-1;if(i>0){h.textContent=s$3?s$3.emptyScript:"";for(let s=0;s<i;s++)h.append(t[s],u()),C.nextNode(),v.push({type:2,index:++r});h.append(t[i],u());}}}else if(8===h.nodeType)if(h.data===l$3)v.push({type:2,index:r});else {let t=-1;for(;-1!==(t=h.data.indexOf(n$3,t+1));)v.push({type:7,index:r}),t+=n$3.length-1;}r++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){var o,n,l,h;if(i===T)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=S(t,r._$AS(t,i.values),r,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:r).importNode(s,!0);C.currentNode=o;let n=C.nextNode(),l=0,h=0,u=e[0];for(;void 0!==u;){if(l===u.index){let i;2===u.type?i=new R(n,n.nextSibling,this,t):1===u.type?i=new u.ctor(n,u.name,u.strings,this,t):6===u.type&&(i=new Z(n,this,t)),this._$AV.push(i),u=e[++h];}l!==(null==u?void 0:u.index)&&(n=C.nextNode(),l++);}return C.currentNode=r,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{constructor(t,i,s,e){var o;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),d(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):v(t)?this.T(t):this._(t);}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t));}_(t){this._$AH!==A&&d(this._$AH)?this._$AA.nextSibling.data=t:this.$(r.createTextNode(t)),this._$AH=t;}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=N.createElement(P(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else {const t=new M(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t;}}_$AC(t){let i=E.get(t.strings);return void 0===i&&E.set(t.strings,i=new N(t)),i}T(t){c(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new R(this.k(u()),this.k(u()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class k{constructor(t,i,s,e,o){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=S(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=S(this,e[s+l],i,l),h===T&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===A?t=A:t!==A&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}const I=s$3?s$3.emptyScript:"";class L extends k{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==A?this.element.setAttribute(this.name,I):this.element.removeAttribute(this.name);}}class z extends k{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=S(this,t,i,0))&&void 0!==s?s:A)===T)return;const e=this._$AH,o=t===A&&e!==A||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==A&&(e===A||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const B=i$3.litHtmlPolyfillSupport;null==B||B(N,R),(null!==(t$1=i$3.litHtmlVersions)&&void 0!==t$1?t$1:i$3.litHtmlVersions=[]).push("2.8.0");const D=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new R(i.insertBefore(u(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var l$2,o$3;let s$2 = class s extends u$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return T}};s$2.finalized=!0,s$2._$litElement$=!0,null===(l$2=globalThis.litElementHydrateSupport)||void 0===l$2||l$2.call(globalThis,{LitElement:s$2});const n$2=globalThis.litElementPolyfillSupport;null==n$2||n$2({LitElement:s$2});(null!==(o$3=globalThis.litElementVersions)&&void 0!==o$3?o$3:globalThis.litElementVersions=[]).push("3.3.3");
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$2=!1;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A component for elevation.
+ */
+class Elevation extends s$2 {
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    render() {
+        return x `<span class="shadow"></span>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./elevation/internal/elevation-styles.css.
+const styles$j = i$4 `:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}:host{display:flex;pointer-events:none;transition-property:box-shadow,opacity}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity;--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000))}.shadow::before{box-shadow:0px 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))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px 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);opacity:.15}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The `<md-elevation>` custom element with default styles.
+ *
+ * Elevation is the relative distance between two surfaces along the z-axis.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdElevation = class MdElevation extends Elevation {
+};
+MdElevation.styles = [styles$j];
+MdElevation = __decorate([
+    e$a('md-elevation')
+], MdElevation);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController');
+let FOR_ATTRIBUTE_OBSERVER;
+{
+    /**
+     * A global `MutationObserver` that reacts to `for` attribute changes on
+     * `Attachable` elements. If the `for` attribute changes, the controller will
+     * re-attach to the new referenced element.
+     */
+    FOR_ATTRIBUTE_OBSERVER = new MutationObserver((records) => {
+        for (const record of records) {
+            // When a control's `for` attribute changes, inform its
+            // `AttachableController` to update to a new control.
+            record.target[ATTACHABLE_CONTROLLER]?.hostConnected();
+        }
+    });
+}
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+    get htmlFor() {
+        return this.host.getAttribute('for');
+    }
+    set htmlFor(htmlFor) {
+        if (htmlFor === null) {
+            this.host.removeAttribute('for');
+        }
+        else {
+            this.host.setAttribute('for', htmlFor);
+        }
+    }
+    get control() {
+        if (this.host.hasAttribute('for')) {
+            if (!this.htmlFor || !this.host.isConnected) {
+                return null;
+            }
+            return this.host.getRootNode().querySelector(`#${this.htmlFor}`);
+        }
+        return this.currentControl || this.host.parentElement;
+    }
+    set control(control) {
+        if (control) {
+            this.attach(control);
+        }
+        else {
+            this.detach();
+        }
+    }
+    /**
+     * Creates a new controller for an `Attachable` element.
+     *
+     * @param host The `Attachable` element.
+     * @param onControlChange A callback with two parameters for the previous and
+     *     next control. An `Attachable` element may perform setup or teardown
+     *     logic whenever the control changes.
+     */
+    constructor(host, onControlChange) {
+        this.host = host;
+        this.onControlChange = onControlChange;
+        this.currentControl = null;
+        host.addController(this);
+        host[ATTACHABLE_CONTROLLER] = this;
+        FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] });
+    }
+    attach(control) {
+        if (control === this.currentControl) {
+            return;
+        }
+        this.setCurrentControl(control);
+        // When imperatively attaching, remove the `for` attribute so
+        // that the attached control is used instead of a referenced one.
+        this.host.removeAttribute('for');
+    }
+    detach() {
+        this.setCurrentControl(null);
+        // When imperatively detaching, add an empty `for=""` attribute. This will
+        // ensure the control is `null` rather than the `parentElement`.
+        this.host.setAttribute('for', '');
+    }
+    /** @private */
+    hostConnected() {
+        this.setCurrentControl(this.control);
+    }
+    /** @private */
+    hostDisconnected() {
+        this.setCurrentControl(null);
+    }
+    setCurrentControl(control) {
+        this.onControlChange(this.currentControl, control);
+        this.currentControl = control;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Events that the focus ring listens to.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown'];
+/**
+ * A focus ring component.
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
+ */
+class FocusRing extends s$2 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Makes the focus ring visible.
+         */
+        this.visible = false;
+        /**
+         * Makes the focus ring animate inwards instead of outwards.
+         */
+        this.inward = false;
+        this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
+    }
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
+    }
+    get control() {
+        return this.attachableController.control;
+    }
+    set control(control) {
+        this.attachableController.control = control;
+    }
+    attach(control) {
+        this.attachableController.attach(control);
+    }
+    detach() {
+        this.attachableController.detach();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    /** @private */
+    handleEvent(event) {
+        if (event[HANDLED_BY_FOCUS_RING]) {
+            // This ensures the focus ring does not activate when multiple focus rings
+            // are used within a single component.
+            return;
+        }
+        switch (event.type) {
+            default:
+                return;
+            case 'focusin':
+                this.visible = this.control?.matches(':focus-visible') ?? false;
+                break;
+            case 'focusout':
+            case 'pointerdown':
+                this.visible = false;
+                break;
+        }
+        event[HANDLED_BY_FOCUS_RING] = true;
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS$1) {
+            prev?.removeEventListener(event, this);
+            next?.addEventListener(event, this);
+        }
+    }
+    update(changed) {
+        if (changed.has('visible')) {
+            // This logic can be removed once the `:has` selector has been introduced
+            // to Firefox. This is necessary to allow correct submenu styles.
+            this.dispatchEvent(new Event('visibility-changed'));
+        }
+        super.update(changed);
+    }
+}
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], FocusRing.prototype, "visible", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], FocusRing.prototype, "inward", void 0);
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./focus/internal/focus-ring-styles.css.
+const styles$i = i$4 `:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {
+};
+MdFocusRing.styles = [styles$i];
+MdFocusRing = __decorate([
+    e$a('md-focus-ring')
+], MdFocusRing);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o$1=e$2(class extends i$2{constructor(t$1){var i;if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||(null===(i=t$1.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(i,[s]){var r,o;if(void 0===this.it){this.it=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!(null===(r=this.nt)||void 0===r?void 0:r.has(t))&&this.it.add(t);return this.render(s)}const e=i.element.classList;this.it.forEach((t=>{t in s||(e.remove(t),this.it.delete(t));}));for(const t in s){const i=!!s[t];i===this.it.has(t)||(null===(o=this.nt)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.it.add(t)):(e.remove(t),this.it.delete(t)));}return T}});
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+const EASING = {
+    STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
+    STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
+    STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
+    EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
+    EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
+    EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
+};
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+function createAnimationSignal() {
+    // The current animation's AbortController
+    let animationAbortController = null;
+    return {
+        start() {
+            // Tell the previous animation to cancel.
+            animationAbortController?.abort();
+            // Set up a new AbortController for the current animation.
+            animationAbortController = new AbortController();
+            // Provide the AbortSignal so that the caller can check aborted status
+            // and add listeners.
+            return animationAbortController.signal;
+        },
+        finish() {
+            animationAbortController = null;
+        },
+    };
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const PRESS_GROW_MS = 450;
+const MINIMUM_PRESS_MS = 225;
+const INITIAL_ORIGIN_SCALE = 0.2;
+const PADDING = 10;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+const PRESS_PSEUDO = '::after';
+const ANIMATION_FILL = 'forwards';
+/**
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+var State;
+(function (State) {
+    /**
+     * Initial state of the control, no touch in progress.
+     *
+     * Transitions:
+     *   - on touch down: transition to `TOUCH_DELAY`.
+     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["INACTIVE"] = 0] = "INACTIVE";
+    /**
+     * Touch down has been received, waiting to determine if it's a swipe or
+     * scroll.
+     *
+     * Transitions:
+     *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+     */
+    State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
+    /**
+     * A touch has been deemed to be a press
+     *
+     * Transitions:
+     *  - on up: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["HOLDING"] = 2] = "HOLDING";
+    /**
+     * The user touch has finished, transition into rest state.
+     *
+     * Transitions:
+     *   - on click end press; transition to `INACTIVE`.
+     */
+    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(State || (State = {}));
+/**
+ * Events that the ripple listens to.
+ */
+const EVENTS = [
+    'click',
+    'contextmenu',
+    'pointercancel',
+    'pointerdown',
+    'pointerenter',
+    'pointerleave',
+    'pointerup',
+];
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
+/**
+ * A ripple component.
+ */
+class Ripple extends s$2 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the ripple.
+         */
+        this.disabled = false;
+        this.hovered = false;
+        this.pressed = false;
+        this.rippleSize = '';
+        this.rippleScale = '';
+        this.initialSize = 0;
+        this.state = State.INACTIVE;
+        this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
+    }
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
+    }
+    get control() {
+        return this.attachableController.control;
+    }
+    set control(control) {
+        this.attachableController.control = control;
+    }
+    attach(control) {
+        this.attachableController.attach(control);
+    }
+    detach() {
+        this.attachableController.detach();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    render() {
+        const classes = {
+            'hovered': this.hovered,
+            'pressed': this.pressed,
+        };
+        return x `<div class="surface ${o$1(classes)}"></div>`;
+    }
+    update(changedProps) {
+        if (changedProps.has('disabled') && this.disabled) {
+            this.hovered = false;
+            this.pressed = false;
+        }
+        super.update(changedProps);
+    }
+    /**
+     * TODO(b/269799771): make private
+     * @private only public for slider
+     */
+    handlePointerenter(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = true;
+    }
+    /**
+     * TODO(b/269799771): make private
+     * @private only public for slider
+     */
+    handlePointerleave(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = false;
+        // release a held mouse or pen press that moves outside the element
+        if (this.state !== State.INACTIVE) {
+            this.endPressAnimation();
+        }
+    }
+    handlePointerup(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        if (this.state === State.HOLDING) {
+            this.state = State.WAITING_FOR_CLICK;
+            return;
+        }
+        if (this.state === State.TOUCH_DELAY) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(this.rippleStartEvent);
+            return;
+        }
+    }
+    async handlePointerdown(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.rippleStartEvent = event;
+        if (!this.isTouch(event)) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(event);
+            return;
+        }
+        // Wait for a hold after touch delay
+        this.state = State.TOUCH_DELAY;
+        await new Promise((resolve) => {
+            setTimeout(resolve, TOUCH_DELAY_MS);
+        });
+        if (this.state !== State.TOUCH_DELAY) {
+            return;
+        }
+        this.state = State.HOLDING;
+        this.startPressAnimation(event);
+    }
+    handleClick() {
+        // Click is a MouseEvent in Firefox and Safari, so we cannot use
+        // `shouldReactToEvent`
+        if (this.disabled) {
+            return;
+        }
+        if (this.state === State.WAITING_FOR_CLICK) {
+            this.endPressAnimation();
+            return;
+        }
+        if (this.state === State.INACTIVE) {
+            // keyboard synthesized click event
+            this.startPressAnimation();
+            this.endPressAnimation();
+        }
+    }
+    handlePointercancel(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    handleContextmenu() {
+        if (this.disabled) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    determineRippleSize() {
+        const { height, width } = this.getBoundingClientRect();
+        const maxDim = Math.max(height, width);
+        const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+        // `?? 1` may be removed once `currentCSSZoom` is widely available.
+        const zoom = this.currentCSSZoom ?? 1;
+        const initialSize = Math.floor((maxDim * INITIAL_ORIGIN_SCALE) / zoom);
+        const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+        const maxRadius = hypotenuse + PADDING;
+        this.initialSize = initialSize;
+        // The dimensions may be altered by CSS `zoom`, which needs to be
+        // compensated for in the final scale() value.
+        const maybeZoomedScale = (maxRadius + softEdgeSize) / initialSize;
+        this.rippleScale = `${maybeZoomedScale / zoom}`;
+        this.rippleSize = `${initialSize}px`;
+    }
+    getNormalizedPointerEventCoords(pointerEvent) {
+        const { scrollX, scrollY } = window;
+        const { left, top } = this.getBoundingClientRect();
+        const documentX = scrollX + left;
+        const documentY = scrollY + top;
+        const { pageX, pageY } = pointerEvent;
+        // `?? 1` may be removed once `currentCSSZoom` is widely available.
+        const zoom = this.currentCSSZoom ?? 1;
+        return {
+            x: (pageX - documentX) / zoom,
+            y: (pageY - documentY) / zoom,
+        };
+    }
+    getTranslationCoordinates(positionEvent) {
+        const { height, width } = this.getBoundingClientRect();
+        // `?? 1` may be removed once `currentCSSZoom` is widely available.
+        const zoom = this.currentCSSZoom ?? 1;
+        // end in the center
+        const endPoint = {
+            x: (width / zoom - this.initialSize) / 2,
+            y: (height / zoom - this.initialSize) / 2,
+        };
+        let startPoint;
+        if (positionEvent instanceof PointerEvent) {
+            startPoint = this.getNormalizedPointerEventCoords(positionEvent);
+        }
+        else {
+            startPoint = {
+                x: width / zoom / 2,
+                y: height / zoom / 2,
+            };
+        }
+        // center around start point
+        startPoint = {
+            x: startPoint.x - this.initialSize / 2,
+            y: startPoint.y - this.initialSize / 2,
+        };
+        return { startPoint, endPoint };
+    }
+    startPressAnimation(positionEvent) {
+        if (!this.mdRoot) {
+            return;
+        }
+        this.pressed = true;
+        this.growAnimation?.cancel();
+        this.determineRippleSize();
+        const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
+        const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+        const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+        this.growAnimation = this.mdRoot.animate({
+            top: [0, 0],
+            left: [0, 0],
+            height: [this.rippleSize, this.rippleSize],
+            width: [this.rippleSize, this.rippleSize],
+            transform: [
+                `translate(${translateStart}) scale(1)`,
+                `translate(${translateEnd}) scale(${this.rippleScale})`,
+            ],
+        }, {
+            pseudoElement: PRESS_PSEUDO,
+            duration: PRESS_GROW_MS,
+            easing: EASING.STANDARD,
+            fill: ANIMATION_FILL,
+        });
+    }
+    async endPressAnimation() {
+        this.rippleStartEvent = undefined;
+        this.state = State.INACTIVE;
+        const animation = this.growAnimation;
+        let pressAnimationPlayState = Infinity;
+        if (typeof animation?.currentTime === 'number') {
+            pressAnimationPlayState = animation.currentTime;
+        }
+        else if (animation?.currentTime) {
+            pressAnimationPlayState = animation.currentTime.to('ms').value;
+        }
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.pressed = false;
+            return;
+        }
+        await new Promise((resolve) => {
+            setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        });
+        if (this.growAnimation !== animation) {
+            // A new press animation was started. The old animation was canceled and
+            // should not finish the pressed state.
+            return;
+        }
+        this.pressed = false;
+    }
+    /**
+     * Returns `true` if
+     *  - the ripple element is enabled
+     *  - the pointer is primary for the input type
+     *  - the pointer is the pointer that started the interaction, or will start
+     * the interaction
+     *  - the pointer is a touch, or the pointer state has the primary button
+     * held, or the pointer is hovering
+     */
+    shouldReactToEvent(event) {
+        if (this.disabled || !event.isPrimary) {
+            return false;
+        }
+        if (this.rippleStartEvent &&
+            this.rippleStartEvent.pointerId !== event.pointerId) {
+            return false;
+        }
+        if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+            return !this.isTouch(event);
+        }
+        const isPrimaryButton = event.buttons === 1;
+        return this.isTouch(event) || isPrimaryButton;
+    }
+    isTouch({ pointerType }) {
+        return pointerType === 'touch';
+    }
+    /** @private */
+    async handleEvent(event) {
+        if (FORCED_COLORS?.matches) {
+            // Skip event logic since the ripple is `display: none`.
+            return;
+        }
+        switch (event.type) {
+            case 'click':
+                this.handleClick();
+                break;
+            case 'contextmenu':
+                this.handleContextmenu();
+                break;
+            case 'pointercancel':
+                this.handlePointercancel(event);
+                break;
+            case 'pointerdown':
+                await this.handlePointerdown(event);
+                break;
+            case 'pointerenter':
+                this.handlePointerenter(event);
+                break;
+            case 'pointerleave':
+                this.handlePointerleave(event);
+                break;
+            case 'pointerup':
+                this.handlePointerup(event);
+                break;
+        }
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS) {
+            prev?.removeEventListener(event, this);
+            next?.addEventListener(event, this);
+        }
+    }
+}
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Ripple.prototype, "disabled", void 0);
+__decorate([
+    t$3()
+], Ripple.prototype, "hovered", void 0);
+__decorate([
+    t$3()
+], Ripple.prototype, "pressed", void 0);
+__decorate([
+    i$5('.surface')
+], Ripple.prototype, "mdRoot", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./ripple/internal/ripple-styles.css.
+const styles$h = i$4 `:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {
+};
+MdRipple.styles = [styles$h];
+MdRipple = __decorate([
+    e$a('md-ripple')
+], MdRipple);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+const ARIA_PROPERTIES = [
+    'role',
+    'ariaAtomic',
+    'ariaAutoComplete',
+    'ariaBusy',
+    'ariaChecked',
+    'ariaColCount',
+    'ariaColIndex',
+    'ariaColSpan',
+    'ariaCurrent',
+    'ariaDisabled',
+    'ariaExpanded',
+    'ariaHasPopup',
+    'ariaHidden',
+    'ariaInvalid',
+    'ariaKeyShortcuts',
+    'ariaLabel',
+    'ariaLevel',
+    'ariaLive',
+    'ariaModal',
+    'ariaMultiLine',
+    'ariaMultiSelectable',
+    'ariaOrientation',
+    'ariaPlaceholder',
+    'ariaPosInSet',
+    'ariaPressed',
+    'ariaReadOnly',
+    'ariaRequired',
+    'ariaRoleDescription',
+    'ariaRowCount',
+    'ariaRowIndex',
+    'ariaRowSpan',
+    'ariaSelected',
+    'ariaSetSize',
+    'ariaSort',
+    'ariaValueMax',
+    'ariaValueMin',
+    'ariaValueNow',
+    'ariaValueText',
+];
+/**
+ * Accessibility Object Model aria attributes.
+ */
+const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
+/**
+ * Checks if an attribute is one of the AOM aria attributes.
+ *
+ * @example
+ * isAriaAttribute('aria-label'); // true
+ *
+ * @param attribute The attribute to check.
+ * @return True if the attribute is an aria attribute, or false if not.
+ */
+function isAriaAttribute(attribute) {
+    return ARIA_ATTRIBUTES.includes(attribute);
+}
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+function ariaPropertyToAttribute(property) {
+    return property
+        .replace('aria', 'aria-')
+        // IDREF attributes also include an "Element" or "Elements" suffix
+        .replace(/Elements?/g, '')
+        .toLowerCase();
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Private symbols
+const privateIgnoreAttributeChangesFor = Symbol('privateIgnoreAttributeChangesFor');
+/**
+ * Mixes in aria delegation for elements that delegate focus and aria to inner
+ * shadow root elements.
+ *
+ * This mixin fixes invalid aria announcements with shadow roots, caused by
+ * duplicate aria attributes on both the host and the inner shadow root element.
+ *
+ * Note: this mixin **does not yet support** ID reference attributes, such as
+ * `aria-labelledby` or `aria-controls`.
+ *
+ * @example
+ * ```ts
+ * class MyButton extends mixinDelegatesAria(LitElement) {
+ *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};
+ *
+ *   render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ * ```html
+ * <my-button aria-label="Plus one">+1</my-button>
+ * ```
+ *
+ * Use `ARIAMixinStrict` for lit analyzer strict types, such as the "role"
+ * attribute.
+ *
+ * @example
+ * ```ts
+ * return html`
+ *   <button role=${(this as ARIAMixinStrict).role || nothing}>
+ *     <slot></slot>
+ *   </button>
+ * `;
+ * ```
+ *
+ * In the future, updates to the Accessibility Object Model (AOM) will provide
+ * built-in aria delegation features that will replace this mixin.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with aria delegation mixed in.
+ */
+function mixinDelegatesAria(base) {
+    var _a;
+    class WithDelegatesAriaElement extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = new Set();
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (!isAriaAttribute(name)) {
+                super.attributeChangedCallback(name, oldValue, newValue);
+                return;
+            }
+            if (this[privateIgnoreAttributeChangesFor].has(name)) {
+                return;
+            }
+            // Don't trigger another `attributeChangedCallback` once we remove the
+            // aria attribute from the host. We check the explicit name of the
+            // attribute to ignore since `attributeChangedCallback` can be called
+            // multiple times out of an expected order when hydrating an element with
+            // multiple attributes.
+            this[privateIgnoreAttributeChangesFor].add(name);
+            this.removeAttribute(name);
+            this[privateIgnoreAttributeChangesFor].delete(name);
+            const dataProperty = ariaAttributeToDataProperty(name);
+            if (newValue === null) {
+                delete this.dataset[dataProperty];
+            }
+            else {
+                this.dataset[dataProperty] = newValue;
+            }
+            this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);
+        }
+        getAttribute(name) {
+            if (isAriaAttribute(name)) {
+                return super.getAttribute(ariaAttributeToDataAttribute(name));
+            }
+            return super.getAttribute(name);
+        }
+        removeAttribute(name) {
+            super.removeAttribute(name);
+            if (isAriaAttribute(name)) {
+                super.removeAttribute(ariaAttributeToDataAttribute(name));
+                // Since `aria-*` attributes are already removed`, we need to request
+                // an update because `attributeChangedCallback` will not be called.
+                this.requestUpdate();
+            }
+        }
+    }
+    _a = privateIgnoreAttributeChangesFor;
+    setupDelegatesAriaProperties(WithDelegatesAriaElement);
+    return WithDelegatesAriaElement;
+}
+/**
+ * Overrides the constructor's native `ARIAMixin` properties to ensure that
+ * aria properties reflect the values that were shifted to a data attribute.
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+function setupDelegatesAriaProperties(ctor) {
+    for (const ariaProperty of ARIA_PROPERTIES) {
+        // The casing between ariaProperty and the dataProperty may be different.
+        // ex: aria-haspopup -> ariaHasPopup
+        const ariaAttribute = ariaPropertyToAttribute(ariaProperty);
+        // ex: aria-haspopup -> data-aria-haspopup
+        const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);
+        // ex: aria-haspopup -> dataset.ariaHaspopup
+        const dataProperty = ariaAttributeToDataProperty(ariaAttribute);
+        // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`
+        // attributes are added to the `static observedAttributes` array. This
+        // triggers `attributeChangedCallback` for the delegates aria mixin to
+        // handle.
+        ctor.createProperty(ariaProperty, {
+            attribute: ariaAttribute,
+            noAccessor: true,
+        });
+        ctor.createProperty(Symbol(dataAttribute), {
+            attribute: dataAttribute,
+            noAccessor: true,
+        });
+        // Re-define the `ARIAMixin` properties to handle data attribute shifting.
+        // It is safe to use `Object.defineProperty` here because the properties
+        // are native and not renamed.
+        // tslint:disable-next-line:ban-unsafe-reflection
+        Object.defineProperty(ctor.prototype, ariaProperty, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return this.dataset[dataProperty] ?? null;
+            },
+            set(value) {
+                const prevValue = this.dataset[dataProperty] ?? null;
+                if (value === prevValue) {
+                    return;
+                }
+                if (value === null) {
+                    delete this.dataset[dataProperty];
+                }
+                else {
+                    this.dataset[dataProperty] = value;
+                }
+                this.requestUpdate(ariaProperty, prevValue);
+            },
+        });
+    }
+}
+function ariaAttributeToDataAttribute(ariaAttribute) {
+    // aria-haspopup -> data-aria-haspopup
+    return `data-${ariaAttribute}`;
+}
+function ariaAttributeToDataProperty(ariaAttribute) {
+    // aria-haspopup -> dataset.ariaHaspopup
+    return ariaAttribute.replace(/-\w/, (dashLetter) => dashLetter[1].toUpperCase());
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A unique symbol used for protected access to an instance's
+ * `ElementInternals`.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends mixinElementInternals(LitElement) {
+ *   constructor() {
+ *     super();
+ *     this[internals].role = 'button';
+ *   }
+ * }
+ * ```
+ */
+const internals = Symbol('internals');
+// Private symbols
+const privateInternals = Symbol('privateInternals');
+/**
+ * Mixes in an attached `ElementInternals` instance.
+ *
+ * This mixin is only needed when other shared code needs access to a
+ * component's `ElementInternals`, such as form-associated mixins.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `WithElementInternals` mixed in.
+ */
+function mixinElementInternals(base) {
+    class WithElementInternalsElement extends base {
+        get [internals]() {
+            // Create internals in getter so that it can be used in methods called on
+            // construction in `ReactiveElement`, such as `requestUpdate()`.
+            if (!this[privateInternals]) {
+                // Cast needed for closure
+                this[privateInternals] = this.attachInternals();
+            }
+            return this[privateInternals];
+        }
+    }
+    return WithElementInternalsElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Sets up an element's constructor to enable form submission. The element
+ * instance should be form associated and have a `type` property.
+ *
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends mixinElementInternals(LitElement) {
+ *   static {
+ *     setupFormSubmitter(MyElement);
+ *   }
+ *
+ *   static formAssociated = true;
+ *
+ *   type: FormSubmitterType = 'submit';
+ * }
+ * ```
+ *
+ * @param ctor The form submitter element's constructor.
+ */
+function setupFormSubmitter(ctor) {
+    ctor.addInitializer((instance) => {
+        const submitter = instance;
+        submitter.addEventListener('click', async (event) => {
+            const { type, [internals]: elementInternals } = submitter;
+            const { form } = elementInternals;
+            if (!form || type === 'button') {
+                return;
+            }
+            // Wait a full task for event bubbling to complete.
+            await new Promise((resolve) => {
+                setTimeout(resolve);
+            });
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (type === 'reset') {
+                form.reset();
+                return;
+            }
+            // form.requestSubmit(submitter) does not work with form associated custom
+            // elements. This patches the dispatched submit event to add the correct
+            // `submitter`.
+            // See https://github.com/WICG/webcomponents/issues/814
+            form.addEventListener('submit', (submitEvent) => {
+                Object.defineProperty(submitEvent, 'submitter', {
+                    configurable: true,
+                    enumerable: true,
+                    get: () => submitter,
+                });
+            }, { capture: true, once: true });
+            elementInternals.setFormValue(submitter.value);
+            form.requestSubmit();
+        });
+    });
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Dispatches a click event to the given element that triggers a native action,
+ * but is not composed and therefore is not seen outside the element.
+ *
+ * This is useful for responding to an external click event on the host element
+ * that should trigger an internal action like a button click.
+ *
+ * Note, a helper is provided because setting this up correctly is a bit tricky.
+ * In particular, calling `click` on an element creates a composed event, which
+ * is not desirable, and a manually dispatched event must specifically be a
+ * `MouseEvent` to trigger a native action.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function dispatchActivationClick(element) {
+    const event = new MouseEvent('click', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+}
+/**
+ * Returns true if the click event should trigger an activation behavior. The
+ * behavior is defined by the element and is whatever it should do when
+ * clicked.
+ *
+ * Typically when an element needs to handle a click, the click is generated
+ * from within the element and an event listener within the element implements
+ * the needed behavior; however, it's possible to fire a click directly
+ * at the element that the element should handle. This method helps
+ * distinguish these "external" clicks.
+ *
+ * An "external" click can be triggered in a number of ways: via a click
+ * on an associated label for a form  associated element, calling
+ * `element.click()`, or calling
+ * `element.dispatchEvent(new MouseEvent('click', ...))`.
+ *
+ * Also works around Firefox issue
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
+ * events for a microtask after called.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function isActivationClick(event) {
+    // Event must start at the event target.
+    if (event.currentTarget !== event.target) {
+        return false;
+    }
+    // Event must not be retargeted from shadowRoot.
+    if (event.composedPath()[0] !== event.target) {
+        return false;
+    }
+    // Target must not be disabled; this should only occur for a synthetically
+    // dispatched click.
+    if (event.target.disabled) {
+        return false;
+    }
+    // This is an activation if the event should not be squelched.
+    return !squelchEvent(event);
+}
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+function squelchEvent(event) {
+    const squelched = isSquelchingEvents;
+    if (squelched) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    squelchEventsForMicrotask();
+    return squelched;
+}
+// Ignore events for one microtask only.
+let isSquelchingEvents = false;
+async function squelchEventsForMicrotask() {
+    isSquelchingEvents = true;
+    // Need to pause for just one microtask.
+    // tslint:disable-next-line
+    await null;
+    isSquelchingEvents = false;
+}
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(s$2));
+/**
+ * A button component.
+ */
+class Button extends buttonBaseClass {
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this[internals].form;
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not the button is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether or not the button is "soft-disabled" (disabled but still
+         * focusable).
+         *
+         * Use this when a button needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.softDisabled = false;
+        /**
+         * The URL that the link button points to.
+         */
+        this.href = '';
+        /**
+         * The filename to use when downloading the linked resource.
+         * If not specified, the browser will determine a filename.
+         * This is only applicable when the button is used as a link (`href` is set).
+         */
+        this.download = '';
+        /**
+         * Where to display the linked `href` URL for a link button. Common options
+         * include `_blank` to open in a new tab.
+         */
+        this.target = '';
+        /**
+         * Whether to render the icon at the inline end of the label rather than the
+         * inline start.
+         *
+         * _Note:_ Link buttons cannot have trailing icons.
+         */
+        this.trailingIcon = false;
+        /**
+         * Whether to display the icon or not.
+         */
+        this.hasIcon = false;
+        /**
+         * The default behavior of the button. May be "button", "reset", or "submit"
+         * (default).
+         */
+        this.type = 'submit';
+        /**
+         * The value added to a form with the button's name when the button submits a
+         * form.
+         */
+        this.value = '';
+        {
+            this.addEventListener('click', this.handleClick.bind(this));
+        }
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    render() {
+        const isRippleDisabled = this.disabled || this.softDisabled;
+        const buttonOrLink = this.href ? this.renderLink() : this.renderButton();
+        // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use
+        // the same ID for different elements, so we change the ID instead.
+        const buttonId = this.href ? 'link' : 'button';
+        return x `
+      ${this.renderElevationOrOutline?.()}
+      <div class="background"></div>
+      <md-focus-ring part="focus-ring" for=${buttonId}></md-focus-ring>
+      <md-ripple
+        part="ripple"
+        for=${buttonId}
+        ?disabled="${isRippleDisabled}"></md-ripple>
+      ${buttonOrLink}
+    `;
+    }
+    renderButton() {
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+        return x `<button
+      id="button"
+      class="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled || A}
+      aria-label="${ariaLabel || A}"
+      aria-haspopup="${ariaHasPopup || A}"
+      aria-expanded="${ariaExpanded || A}">
+      ${this.renderContent()}
+    </button>`;
+    }
+    renderLink() {
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+        return x `<a
+      id="link"
+      class="button"
+      aria-label="${ariaLabel || A}"
+      aria-haspopup="${ariaHasPopup || A}"
+      aria-expanded="${ariaExpanded || A}"
+      aria-disabled=${this.disabled || this.softDisabled || A}
+      tabindex="${this.disabled && !this.softDisabled ? -1 : A}"
+      href=${this.href}
+      download=${this.download || A}
+      target=${this.target || A}
+      >${this.renderContent()}
+    </a>`;
+    }
+    renderContent() {
+        const icon = x `<slot
+      name="icon"
+      @slotchange="${this.handleSlotChange}"></slot>`;
+        return x `
+      <span class="touch"></span>
+      ${this.trailingIcon ? A : icon}
+      <span class="label"><slot></slot></span>
+      ${this.trailingIcon ? icon : A}
+    `;
+    }
+    handleClick(event) {
+        // If the button is soft-disabled or a disabled link, we need to explicitly
+        // prevent the click from propagating to other event listeners as well as
+        // prevent the default action.
+        if (this.softDisabled || (this.disabled && this.href)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        if (!isActivationClick(event) || !this.buttonElement) {
+            return;
+        }
+        this.focus();
+        dispatchActivationClick(this.buttonElement);
+    }
+    handleSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
+}
+(() => {
+    setupFormSubmitter(Button);
+})();
+/** @nocollapse */
+Button.formAssociated = true;
+/** @nocollapse */
+Button.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], Button.prototype, "softDisabled", void 0);
+__decorate([
+    n$7()
+], Button.prototype, "href", void 0);
+__decorate([
+    n$7()
+], Button.prototype, "download", void 0);
+__decorate([
+    n$7()
+], Button.prototype, "target", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'trailing-icon', reflect: true })
+], Button.prototype, "trailingIcon", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-icon', reflect: true })
+], Button.prototype, "hasIcon", void 0);
+__decorate([
+    n$7()
+], Button.prototype, "type", void 0);
+__decorate([
+    n$7({ reflect: true })
+], Button.prototype, "value", void 0);
+__decorate([
+    i$5('.button')
+], Button.prototype, "buttonElement", void 0);
+__decorate([
+    l$5({ slot: 'icon', flatten: true })
+], Button.prototype, "assignedIcons", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/shared-elevation-styles.css.
+const styles$g = i$4 `md-elevation{transition-duration:280ms}:host(:is([disabled],[soft-disabled])) md-elevation{transition:none}md-elevation{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}:host(:focus-within) md-elevation{--md-elevation-level: var(--_focus-container-elevation)}:host(:hover) md-elevation{--md-elevation-level: var(--_hover-container-elevation)}:host(:active) md-elevation{--md-elevation-level: var(--_pressed-container-elevation)}:host(:is([disabled],[soft-disabled])) md-elevation{--md-elevation-level: var(--_disabled-container-elevation)}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./button/internal/shared-styles.css.
+const styles$f = i$4 `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:8px;min-height:var(--_container-height);outline:none;padding-block:calc((var(--_container-height) - max(var(--_label-text-line-height),var(--_icon-size)))/2);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);place-content:center;place-items:center;position:relative;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-overflow:ellipsis;text-wrap:nowrap;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){cursor:default;pointer-events:none}.button{border-radius:inherit;cursor:inherit;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;min-width:calc(64px - var(--_leading-space) - var(--_trailing-space));width:100%;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding:0;gap:inherit;text-transform:inherit}.button::-moz-focus-inner{padding:0;border:0}:host(:hover) .button{color:var(--_hover-label-text-color)}:host(:focus-within) .button{color:var(--_focus-label-text-color)}:host(:active) .button{color:var(--_pressed-label-text-color)}.background{background:var(--_container-color);border-radius:inherit;inset:0;position:absolute}.label{overflow:hidden}:is(.button,.label,.label slot),.label ::slotted(*){text-overflow:inherit}:host(:is([disabled],[soft-disabled])) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}:host(:is([disabled],[soft-disabled])) .background{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.background{border:1px solid CanvasText}:host(:is([disabled],[soft-disabled])){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-color: GrayText;--_disabled-label-text-opacity: 1}}:host([has-icon]:not([trailing-icon])){padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}:host([has-icon][trailing-icon]){padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;flex-shrink:0;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus-within) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host(:is([disabled],[soft-disabled])) ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}:host([touch-target=none]) .touch{display:none}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const fabBaseClass = mixinDelegatesAria(s$2);
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+class SharedFab extends fabBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the FAB.
+         *
+         * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
+         * have different sizes.
+         */
+        this.size = 'medium';
+        /**
+         * The text to display on the FAB.
+         */
+        this.label = '';
+        /**
+         * Lowers the FAB's elevation.
+         */
+        this.lowered = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return x `
+      <button
+        class="fab ${o$1(this.getRenderClasses())}"
+        aria-label=${ariaLabel || A}>
+        <md-elevation part="elevation"></md-elevation>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <md-ripple class="ripple"></md-ripple>
+        ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}
+      </button>
+    `;
+    }
+    getRenderClasses() {
+        const isExtended = !!this.label;
+        return {
+            'lowered': this.lowered,
+            'small': this.size === 'small' && !isExtended,
+            'large': this.size === 'large' && !isExtended,
+            'extended': isExtended,
+        };
+    }
+    renderTouchTarget() {
+        return x `<div class="touch-target"></div>`;
+    }
+    renderLabel() {
+        return this.label ? x `<span class="label">${this.label}</span>` : '';
+    }
+    renderIcon() {
+        const { ariaLabel } = this;
+        return x `<span class="icon">
+      <slot
+        name="icon"
+        aria-hidden=${ariaLabel || this.label
+            ? 'true'
+            : A}>
+        <span></span>
+      </slot>
+    </span>`;
+    }
+}
+/** @nocollapse */
+SharedFab.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ reflect: true })
+], SharedFab.prototype, "size", void 0);
+__decorate([
+    n$7()
+], SharedFab.prototype, "label", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], SharedFab.prototype, "lowered", void 0);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+class Fab extends SharedFab {
+    constructor() {
+        super(...arguments);
+        /**
+         * The FAB color variant to render.
+         */
+        this.variant = 'surface';
+    }
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'primary': this.variant === 'primary',
+            'secondary': this.variant === 'secondary',
+            'tertiary': this.variant === 'tertiary',
+        };
+    }
+}
+__decorate([
+    n$7()
+], Fab.prototype, "variant", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./fab/internal/forced-colors-styles.css.
+const styles$e = i$4 `@media(forced-colors: active){.fab{border:1px solid ButtonText}.fab.extended{padding-inline-start:15px;padding-inline-end:19px}md-focus-ring{--md-focus-ring-outward-offset: 3px}}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./fab/internal/shared-styles.css.
+const styles$d = i$4 `:host{--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([size=medium][touch-target=wrapper]){margin:max(0px,48px - var(--_container-height))}:host([size=large][touch-target=wrapper]){margin:max(0px,48px - var(--_large-container-height))}.fab,.icon,.icon ::slotted(*){display:flex}.fab{align-items:center;justify-content:center;vertical-align:middle;padding:0;position:relative;height:var(--_container-height);transition-property:background-color;border-width:0px;outline:none;z-index:0;text-transform:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);background-color:var(--_container-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color)}.fab.extended{width:inherit;box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px}.fab:not(.extended){width:var(--_container-width)}.fab.large{width:var(--_large-container-width);height:var(--_large-container-height)}.fab.large .icon ::slotted(*){width:var(--_large-icon-size);height:var(--_large-icon-size);font-size:var(--_large-icon-size)}.fab.large,.fab.large .ripple{border-start-start-radius:var(--_large-container-shape-start-start);border-start-end-radius:var(--_large-container-shape-start-end);border-end-start-radius:var(--_large-container-shape-end-start);border-end-end-radius:var(--_large-container-shape-end-end)}.fab.large md-focus-ring{--md-focus-ring-shape-start-start: var(--_large-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_large-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_large-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_large-container-shape-end-start)}.fab:focus{--md-elevation-level: var(--_focus-container-elevation)}.fab:hover{--md-elevation-level: var(--_hover-container-elevation)}.fab:active{--md-elevation-level: var(--_pressed-container-elevation)}.fab.lowered{background-color:var(--_lowered-container-color);--md-elevation-level: var(--_lowered-container-elevation)}.fab.lowered:focus{--md-elevation-level: var(--_lowered-focus-container-elevation)}.fab.lowered:hover{--md-elevation-level: var(--_lowered-hover-container-elevation)}.fab.lowered:active{--md-elevation-level: var(--_lowered-pressed-container-elevation)}.fab .label{color:var(--_label-text-color)}.fab:hover .fab .label{color:var(--_hover-label-text-color)}.fab:focus .fab .label{color:var(--_focus-label-text-color)}.fab:active .fab .label{color:var(--_pressed-label-text-color)}.label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}.fab.extended .icon ::slotted(*){margin-inline-end:12px}.ripple{overflow:hidden}.ripple,md-elevation{z-index:-1}.touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}:host([touch-target=none]) .touch-target{display:none}md-elevation,.fab{transition-duration:280ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}.fab,.ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.icon ::slotted(*){width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const chipBaseClass = mixinDelegatesAria(s$2);
+/**
+ * A chip component.
+ *
+ * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles
+ */
+class Chip extends chipBaseClass {
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    get rippleDisabled() {
+        return this.disabled || this.softDisabled;
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not the chip is disabled.
+         *
+         * Disabled chips are not focusable, unless `always-focusable` is set.
+         */
+        this.disabled = false;
+        /**
+         * Whether or not the chip is "soft-disabled" (disabled but still
+         * focusable).
+         *
+         * Use this when a chip needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.softDisabled = false;
+        /**
+         * When true, allow disabled chips to be focused with arrow keys.
+         *
+         * Add this when a chip needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         *
+         * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`.
+         */
+        this.alwaysFocusable = false;
+        // TODO(b/350810013): remove the label property.
+        /**
+         * The label of the chip.
+         *
+         * @deprecated Set text as content of the chip instead.
+         */
+        this.label = '';
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of
+         * Unstyled Content.
+         */
+        this.hasIcon = false;
+        {
+            this.addEventListener('click', this.handleClick.bind(this));
+        }
+    }
+    focus(options) {
+        if (this.disabled && !this.alwaysFocusable) {
+            return;
+        }
+        super.focus(options);
+    }
+    render() {
+        return x `
+      <div class="container ${o$1(this.getContainerClasses())}">
+        ${this.renderContainerContent()}
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('disabled') && changed.get('disabled') !== undefined) {
+            this.dispatchEvent(new Event('update-focus', { bubbles: true }));
+        }
+    }
+    getContainerClasses() {
+        return {
+            'disabled': this.disabled || this.softDisabled,
+            'has-icon': this.hasIcon,
+        };
+    }
+    renderContainerContent() {
+        return x `
+      ${this.renderOutline()}
+      <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
+      <md-ripple
+        for=${this.primaryId}
+        ?disabled=${this.rippleDisabled}></md-ripple>
+      ${this.renderPrimaryAction(this.renderPrimaryContent())}
+    `;
+    }
+    renderOutline() {
+        return x `<span class="outline"></span>`;
+    }
+    renderLeadingIcon() {
+        return x `<slot name="icon" @slotchange=${this.handleIconChange}></slot>`;
+    }
+    renderPrimaryContent() {
+        return x `
+      <span class="leading icon" aria-hidden="true">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">
+        <span class="label-text" id="label">
+          ${this.label ? this.label : x `<slot></slot>`}
+        </span>
+      </span>
+      <span class="touch"></span>
+    `;
+    }
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    handleClick(event) {
+        // If the chip is soft-disabled or disabled + always-focusable, we need to
+        // explicitly prevent the click from propagating to other event listeners
+        // as well as prevent the default action.
+        if (this.softDisabled || (this.disabled && this.alwaysFocusable)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+    }
+}
+/** @nocollapse */
+Chip.shadowRootOptions = {
+    ...s$2.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Chip.prototype, "disabled", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], Chip.prototype, "softDisabled", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'always-focusable' })
+], Chip.prototype, "alwaysFocusable", void 0);
+__decorate([
+    n$7()
+], Chip.prototype, "label", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true, attribute: 'has-icon' })
+], Chip.prototype, "hasIcon", void 0);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An assist chip component.
+ */
+class AssistChip extends Chip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.href = '';
+        /**
+         * The filename to use when downloading the linked resource.
+         * If not specified, the browser will determine a filename.
+         * This is only applicable when the chip is used as a link (`href` is set).
+         */
+        this.download = '';
+        this.target = '';
+    }
+    get primaryId() {
+        return this.href ? 'link' : 'button';
+    }
+    get rippleDisabled() {
+        // Link chips cannot be disabled
+        return !this.href && (this.disabled || this.softDisabled);
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            // Link chips cannot be disabled
+            disabled: !this.href && (this.disabled || this.softDisabled),
+            elevated: this.elevated,
+            link: !!this.href,
+        };
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        if (this.href) {
+            return x `
+        <a
+          class="primary action"
+          id="link"
+          aria-label=${ariaLabel || A}
+          href=${this.href}
+          download=${this.download || A}
+          target=${this.target || A}
+          >${content}</a
+        >
+      `;
+        }
+        return x `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || A}
+        aria-disabled=${this.softDisabled || A}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        type="button"
+        >${content}</button
+      >
+    `;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return x `<md-elevation part="elevation"></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
+}
+__decorate([
+    n$7({ type: Boolean })
+], AssistChip.prototype, "elevated", void 0);
+__decorate([
+    n$7()
+], AssistChip.prototype, "href", void 0);
+__decorate([
+    n$7()
+], AssistChip.prototype, "download", void 0);
+__decorate([
+    n$7()
+], AssistChip.prototype, "target", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/elevated-styles.css.
+const styles$c = i$4 `.elevated{--md-elevation-level: var(--_elevated-container-elevation);--md-elevation-shadow-color: var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level: var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level: var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level: var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level: var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/shared-styles.css.
+const styles$b = i$4 `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host(:is([disabled],[soft-disabled])){pointer-events:none}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{min-width:0;padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space)}.has-icon .primary.action{padding-inline-start:var(--_with-leading-icon-leading-space)}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);font-weight:var(--_label-text-weight);height:100%;line-height:var(--_label-text-line-height);overflow:hidden;user-select:none}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}.leading.icon ::slotted(*),.leading.icon svg{margin-inline-end:var(--_icon-label-space)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button{text-transform:inherit}a,button:not(:disabled,[aria-disabled=true]){cursor:inherit}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+function redispatchEvent(element, event) {
+    // For bubbling events in SSR light DOM (or composed), stop their propagation
+    // and dispatch the copy.
+    if (event.bubbles && (!element.shadowRoot || event.composed)) {
+        event.stopPropagation();
+    }
+    const copy = Reflect.construct(event.constructor, [event.type, event]);
+    const dispatched = element.dispatchEvent(copy);
+    if (!dispatched) {
+        event.preventDefault();
+    }
+    return dispatched;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const ARIA_LABEL_REMOVE = 'aria-label-remove';
+/**
+ * A chip component with multiple actions.
+ */
+class MultiActionChip extends Chip {
+    get ariaLabelRemove() {
+        if (this.hasAttribute(ARIA_LABEL_REMOVE)) {
+            return this.getAttribute(ARIA_LABEL_REMOVE);
+        }
+        const { ariaLabel } = this;
+        // TODO(b/350810013): remove `this.label` when label property is removed.
+        if (ariaLabel || this.label) {
+            return `Remove ${ariaLabel || this.label}`;
+        }
+        return null;
+    }
+    set ariaLabelRemove(ariaLabel) {
+        const prev = this.ariaLabelRemove;
+        if (ariaLabel === prev) {
+            return;
+        }
+        if (ariaLabel === null) {
+            this.removeAttribute(ARIA_LABEL_REMOVE);
+        }
+        else {
+            this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel);
+        }
+        this.requestUpdate();
+    }
+    constructor() {
+        super();
+        this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);
+        {
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+        }
+    }
+    focus(options) {
+        const isFocusable = this.alwaysFocusable || !this.disabled;
+        if (isFocusable && options?.trailing && this.trailingAction) {
+            this.trailingAction.focus(options);
+            return;
+        }
+        super.focus(options);
+    }
+    renderContainerContent() {
+        return x `
+      ${super.renderContainerContent()}
+      ${this.renderTrailingAction(this.handleTrailingActionFocus)}
+    `;
+    }
+    handleKeyDown(event) {
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        // Ignore non-navigation keys.
+        if (!isLeft && !isRight) {
+            return;
+        }
+        if (!this.primaryAction || !this.trailingAction) {
+            // Does not have multiple actions.
+            return;
+        }
+        // Check if moving forwards or backwards
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft : isRight;
+        const isPrimaryFocused = this.primaryAction?.matches(':focus-within');
+        const isTrailingFocused = this.trailingAction?.matches(':focus-within');
+        if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) {
+            // Moving outside of the chip, it will be handled by the chip set.
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        // Don't let the chip set handle this navigation event.
+        event.stopPropagation();
+        const actionToFocus = forwards ? this.trailingAction : this.primaryAction;
+        actionToFocus.focus();
+    }
+    handleTrailingActionFocus() {
+        const { primaryAction, trailingAction } = this;
+        if (!primaryAction || !trailingAction) {
+            return;
+        }
+        // Temporarily turn off the primary action's focusability. This allows
+        // shift+tab from the trailing action to move to the previous chip rather
+        // than the primary action in the same chip.
+        primaryAction.tabIndex = -1;
+        trailingAction.addEventListener('focusout', () => {
+            primaryAction.tabIndex = 0;
+        }, { once: true });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** @protected */
+function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false, }) {
+    // When an aria-label is not provided, we use two spans with aria-labelledby
+    // to create the "Remove <textContent>" label for the remove button. The first
+    // is this #remove-label span, the second is the chip's #label slot span.
+    return x `
+    <span id="remove-label" hidden aria-hidden="true">Remove</span>
+    <button
+      class="trailing action"
+      aria-label=${ariaLabel || A}
+      aria-labelledby=${!ariaLabel ? 'remove-label label' : A}
+      tabindex=${!tabbable ? -1 : A}
+      @click=${handleRemoveClick}
+      @focus=${focusListener}>
+      <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
+      <md-ripple ?disabled=${disabled}></md-ripple>
+      <span class="trailing icon" aria-hidden="true">
+        <slot name="remove-trailing-icon">
+          <svg viewBox="0 96 960 960">
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+          </svg>
+        </slot>
+      </span>
+      <span class="touch"></span>
+    </button>
+  `;
+}
+function handleRemoveClick(event) {
+    if (this.disabled || this.softDisabled) {
+        return;
+    }
+    event.stopPropagation();
+    const preventDefault = !this.dispatchEvent(new Event('remove', { cancelable: true }));
+    if (preventDefault) {
+        return;
+    }
+    this.remove();
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/selectable-styles.css.
+const styles$a = i$4 `.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}:where(.selected)::before{background:var(--_selected-container-color)}:where(.selected) .outline{border-width:var(--_selected-outline-width)}:where(.selected.disabled)::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}:where(.selected) .label{color:var(--_selected-label-text-color)}:where(.selected:hover) .label{color:var(--_selected-hover-label-text-color)}:where(.selected:focus) .label{color:var(--_selected-focus-label-text-color)}:where(.selected:active) .label{color:var(--_selected-pressed-label-text-color)}:where(.selected) .leading.icon{color:var(--_selected-leading-icon-color)}:where(.selected:hover) .leading.icon{color:var(--_selected-hover-leading-icon-color)}:where(.selected:focus) .leading.icon{color:var(--_selected-focus-leading-icon-color)}:where(.selected:active) .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){:where(.selected:not(.elevated))::before{border:1px solid CanvasText}:where(.selected) .outline{border-width:1px}}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./chips/internal/trailing-icon-styles.css.
+const styles$9 = i$4 `.trailing.action{align-items:center;justify-content:center;padding-inline-start:var(--_icon-label-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.trailing.action :is(md-ripple,md-focus-ring){border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.trailing.action md-focus-ring{inset:unset}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:where(:hover) .trailing.icon{color:var(--_hover-trailing-icon-color)}:where(:focus) .trailing.icon{color:var(--_focus-trailing-icon-color)}:where(:active) .trailing.icon{color:var(--_pressed-trailing-icon-color)}:where(.disabled) .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}:where(.selected) .trailing.icon{color:var(--_selected-trailing-icon-color)}:where(.selected:hover) .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}:where(.selected:focus) .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}:where(.selected:active) .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}@media(forced-colors: active){.trailing.icon{color:ButtonText}:where(.disabled) .trailing.icon{color:GrayText;opacity:1}}
+`;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e$1=Symbol.for(""),l$1=t=>{if((null==t?void 0:t.r)===e$1)return null==t?void 0:t._$litStatic$},i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,l)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[l+1]),t[0]),r:e$1}),s$1=new Map,a$1=t=>(r,...e)=>{const o=e.length;let i,a;const n=[],u=[];let c,$=0,f=!1;for(;$<o;){for(c=r[$];$<o&&void 0!==(a=e[$],i=l$1(a));)c+=i+r[++$],f=!0;$!==o&&u.push(a),n.push(c),$++;}if($===o&&n.push(r[o]),f){const t=n.join("$$lit$$");void 0===(r=s$1.get(t))&&(n.raw=n,s$1.set(t,r=n)),e=u;}return t(r,...e)},n$1=a$1(x);
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Returns `true` if the given element is in a right-to-left direction.
+ *
+ * @param el Element to determine direction from
+ * @param shouldCheck Optional. If `false`, return `false` without checking
+ *     direction. Determining the direction of `el` is somewhat expensive, so
+ *     this parameter can be used as a conditional guard. Defaults to `true`.
+ */
+function isRtl(el, shouldCheck = true) {
+    return (shouldCheck &&
+        getComputedStyle(el).getPropertyValue('direction').trim() === 'rtl');
+}
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const iconButtonBaseClass = mixinDelegatesAria(mixinElementInternals(s$2));
+/**
+ * A button for rendering icons.
+ *
+ * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles
+ * --composed
+ * @fires change {Event} Dispatched when a toggle button toggles --bubbles
+ */
+class IconButton extends iconButtonBaseClass {
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this[internals].form;
+    }
+    /**
+     * The labels this element is associated with.
+     */
+    get labels() {
+        return this[internals].labels;
+    }
+    constructor() {
+        super();
+        /**
+         * Disables the icon button and makes it non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * "Soft-disables" the icon button (disabled but still focusable).
+         *
+         * Use this when an icon button needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.softDisabled = false;
+        /**
+         * Flips the icon if it is in an RTL context at startup.
+         */
+        this.flipIconInRtl = false;
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+         */
+        this.href = '';
+        /**
+         * The filename to use when downloading the linked resource.
+         * If not specified, the browser will determine a filename.
+         * This is only applicable when the icon button is used as a link (`href` is set).
+         */
+        this.download = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
+         */
+        this.target = '';
+        /**
+         * The `aria-label` of the button when the button is toggleable and selected.
+         */
+        this.ariaLabelSelected = '';
+        /**
+         * When true, the button will toggle between selected and unselected
+         * states
+         */
+        this.toggle = false;
+        /**
+         * Sets the selected state. When false, displays the default icon. When true,
+         * displays the selected icon, or the default icon If no `slot="selected"`
+         * icon is provided.
+         */
+        this.selected = false;
+        /**
+         * The default behavior of the button. May be "button", "reset", or "submit"
+         * (default).
+         */
+        this.type = 'submit';
+        /**
+         * The value added to a form with the button's name when the button submits a
+         * form.
+         */
+        this.value = '';
+        this.flipIcon = isRtl(this, this.flipIconInRtl);
+        {
+            this.addEventListener('click', this.handleClick.bind(this));
+        }
+    }
+    willUpdate() {
+        // Link buttons cannot be disabled or soft-disabled.
+        if (this.href) {
+            this.disabled = false;
+            this.softDisabled = false;
+        }
+    }
+    render() {
+        const tag = this.href ? i$1 `div` : i$1 `button`;
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+        const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;
+        const ariaPressedValue = !this.toggle ? A : this.selected;
+        let ariaLabelValue = A;
+        if (!this.href) {
+            ariaLabelValue =
+                hasToggledAriaLabel && this.selected
+                    ? this.ariaLabelSelected
+                    : ariaLabel;
+        }
+        return n$1 `<${tag}
+        class="icon-button ${o$1(this.getRenderClasses())}"
+        id="button"
+        aria-label="${ariaLabelValue || A}"
+        aria-haspopup="${(!this.href && ariaHasPopup) || A}"
+        aria-expanded="${(!this.href && ariaExpanded) || A}"
+        aria-pressed="${ariaPressedValue}"
+        aria-disabled=${(!this.href && this.softDisabled) || A}
+        ?disabled="${!this.href && this.disabled}"
+        @click="${this.handleClickOnChild}">
+        ${this.renderFocusRing()}
+        ${this.renderRipple()}
+        ${!this.selected ? this.renderIcon() : A}
+        ${this.selected ? this.renderSelectedIcon() : A}
+        ${this.href ? this.renderLink() : this.renderTouchTarget()}
+  </${tag}>`;
+    }
+    renderLink() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return x `
+      <a
+        class="link"
+        id="link"
+        href="${this.href}"
+        download="${this.download || A}"
+        target="${this.target || A}"
+        aria-label="${ariaLabel || A}">
+        ${this.renderTouchTarget()}
+      </a>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'flip-icon': this.flipIcon,
+            'selected': this.toggle && this.selected,
+        };
+    }
+    renderIcon() {
+        return x `<span class="icon"><slot></slot></span>`;
+    }
+    renderSelectedIcon() {
+        // Use default slot as fallback to not require specifying multiple icons
+        return x `<span class="icon icon--selected"
+      ><slot name="selected"><slot></slot></slot
+    ></span>`;
+    }
+    renderTouchTarget() {
+        return x `<span class="touch"></span>`;
+    }
+    renderFocusRing() {
+        // TODO(b/310046938): use the same id for both elements
+        return x `<md-focus-ring
+      part="focus-ring"
+      for=${this.href ? 'link' : 'button'}></md-focus-ring>`;
+    }
+    renderRipple() {
+        const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);
+        // TODO(b/310046938): use the same id for both elements
+        return x `<md-ripple
+      for=${this.href ? 'link' : A}
+      ?disabled="${isRippleDisabled}"></md-ripple>`;
+    }
+    connectedCallback() {
+        this.flipIcon = isRtl(this, this.flipIconInRtl);
+        super.connectedCallback();
+    }
+    /** Handles a click on this element. */
+    handleClick(event) {
+        // If the icon button is soft-disabled, we need to explicitly prevent the
+        // click from propagating to other event listeners as well as prevent the
+        // default action.
+        if (!this.href && this.softDisabled) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+    }
+    /**
+     * Handles a click on the child <div> or <button> element within this
+     * element's shadow DOM.
+     */
+    async handleClickOnChild(event) {
+        // Allow the event to propagate
+        await 0;
+        if (!this.toggle ||
+            this.disabled ||
+            this.softDisabled ||
+            event.defaultPrevented) {
+            return;
+        }
+        this.selected = !this.selected;
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        // Bubbles but does not compose to mimic native browser <input> & <select>
+        // Additionally, native change event is not an InputEvent.
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+}
+(() => {
+    setupFormSubmitter(IconButton);
+})();
+/** @nocollapse */
+IconButton.formAssociated = true;
+/** @nocollapse */
+IconButton.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], IconButton.prototype, "softDisabled", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'flip-icon-in-rtl' })
+], IconButton.prototype, "flipIconInRtl", void 0);
+__decorate([
+    n$7()
+], IconButton.prototype, "href", void 0);
+__decorate([
+    n$7()
+], IconButton.prototype, "download", void 0);
+__decorate([
+    n$7()
+], IconButton.prototype, "target", void 0);
+__decorate([
+    n$7({ attribute: 'aria-label-selected' })
+], IconButton.prototype, "ariaLabelSelected", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], IconButton.prototype, "toggle", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], IconButton.prototype, "selected", void 0);
+__decorate([
+    n$7()
+], IconButton.prototype, "type", void 0);
+__decorate([
+    n$7({ reflect: true })
+], IconButton.prototype, "value", void 0);
+__decorate([
+    t$3()
+], IconButton.prototype, "flipIcon", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./iconbutton/internal/shared-styles.css.
+const styles$8 = i$4 `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{display:grid;height:100%;outline:none;place-items:center;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A field component.
+ */
+class Field extends s$2 {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.error = false;
+        this.focused = false;
+        this.label = '';
+        this.noAsterisk = false;
+        this.populated = false;
+        this.required = false;
+        this.resizable = false;
+        this.supportingText = '';
+        this.errorText = '';
+        this.count = -1;
+        this.max = -1;
+        /**
+         * Whether or not the field has leading content.
+         */
+        this.hasStart = false;
+        /**
+         * Whether or not the field has trailing content.
+         */
+        this.hasEnd = false;
+        this.isAnimating = false;
+        /**
+         * When set to true, the error text's `role="alert"` will be removed, then
+         * re-added after an animation frame. This will re-announce an error message
+         * to screen readers.
+         */
+        this.refreshErrorAlert = false;
+        this.disableTransitions = false;
+    }
+    get counterText() {
+        // Count and max are typed as number, but can be set to null when Lit removes
+        // their attributes. These getters coerce back to a number for calculations.
+        const countAsNumber = this.count ?? -1;
+        const maxAsNumber = this.max ?? -1;
+        // Counter does not show if count is negative, or max is negative or 0.
+        if (countAsNumber < 0 || maxAsNumber <= 0) {
+            return '';
+        }
+        return `${countAsNumber} / ${maxAsNumber}`;
+    }
+    get supportingOrErrorText() {
+        return this.error && this.errorText ? this.errorText : this.supportingText;
+    }
+    /**
+     * Re-announces the field's error supporting text to screen readers.
+     *
+     * Error text announces to screen readers anytime it is visible and changes.
+     * Use the method to re-announce the message when the text has not changed,
+     * but announcement is still needed (such as for `reportValidity()`).
+     */
+    reannounceError() {
+        this.refreshErrorAlert = true;
+    }
+    update(props) {
+        // Client-side property updates
+        const isDisabledChanging = props.has('disabled') && props.get('disabled') !== undefined;
+        if (isDisabledChanging) {
+            this.disableTransitions = true;
+        }
+        // When disabling, remove focus styles if focused.
+        if (this.disabled && this.focused) {
+            props.set('focused', true);
+            this.focused = false;
+        }
+        // Animate if focused or populated change.
+        this.animateLabelIfNeeded({
+            wasFocused: props.get('focused'),
+            wasPopulated: props.get('populated'),
+        });
+        super.update(props);
+    }
+    render() {
+        const floatingLabel = this.renderLabel(/*isFloating*/ true);
+        const restingLabel = this.renderLabel(/*isFloating*/ false);
+        const outline = this.renderOutline?.(floatingLabel);
+        const classes = {
+            'disabled': this.disabled,
+            'disable-transitions': this.disableTransitions,
+            'error': this.error && !this.disabled,
+            'focused': this.focused,
+            'with-start': this.hasStart,
+            'with-end': this.hasEnd,
+            'populated': this.populated,
+            'resizable': this.resizable,
+            'required': this.required,
+            'no-label': !this.label,
+        };
+        return x `
+      <div class="field ${o$1(classes)}">
+        <div class="container-overflow">
+          ${this.renderBackground?.()}
+          <slot name="container"></slot>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
+          <div class="container">
+            <div class="start">
+              <slot name="start"></slot>
+            </div>
+            <div class="middle">
+              <div class="label-wrapper">
+                ${restingLabel} ${outline ? A : floatingLabel}
+              </div>
+              <div class="content">
+                <slot></slot>
+              </div>
+            </div>
+            <div class="end">
+              <slot name="end"></slot>
+            </div>
+          </div>
+        </div>
+        ${this.renderSupportingText()}
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('supportingText') ||
+            changed.has('errorText') ||
+            changed.has('count') ||
+            changed.has('max')) {
+            this.updateSlottedAriaDescribedBy();
+        }
+        if (this.refreshErrorAlert) {
+            // The past render cycle removed the role="alert" from the error message.
+            // Re-add it after an animation frame to re-announce the error.
+            requestAnimationFrame(() => {
+                this.refreshErrorAlert = false;
+            });
+        }
+        if (this.disableTransitions) {
+            requestAnimationFrame(() => {
+                this.disableTransitions = false;
+            });
+        }
+    }
+    renderSupportingText() {
+        const { supportingOrErrorText, counterText } = this;
+        if (!supportingOrErrorText && !counterText) {
+            return A;
+        }
+        // Always render the supporting text span so that our `space-around`
+        // container puts the counter at the end.
+        const start = x `<span>${supportingOrErrorText}</span>`;
+        // Conditionally render counter so we don't render the extra `gap`.
+        // TODO(b/244473435): add aria-label and announcements
+        const end = counterText
+            ? x `<span class="counter">${counterText}</span>`
+            : A;
+        // Announce if there is an error and error text visible.
+        // If refreshErrorAlert is true, do not announce. This will remove the
+        // role="alert" attribute. Another render cycle will happen after an
+        // animation frame to re-add the role.
+        const shouldErrorAnnounce = this.error && this.errorText && !this.refreshErrorAlert;
+        const role = shouldErrorAnnounce ? 'alert' : A;
+        return x `
+      <div class="supporting-text" role=${role}>${start}${end}</div>
+      <slot
+        name="aria-describedby"
+        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>
+    `;
+    }
+    updateSlottedAriaDescribedBy() {
+        for (const element of this.slottedAriaDescribedBy) {
+            D(x `${this.supportingOrErrorText} ${this.counterText}`, element);
+            element.setAttribute('hidden', '');
+        }
+    }
+    renderLabel(isFloating) {
+        if (!this.label) {
+            return A;
+        }
+        let visible;
+        if (isFloating) {
+            // Floating label is visible when focused/populated or when animating.
+            visible = this.focused || this.populated || this.isAnimating;
+        }
+        else {
+            // Resting label is visible when unfocused. It is never visible while
+            // animating.
+            visible = !this.focused && !this.populated && !this.isAnimating;
+        }
+        const classes = {
+            'hidden': !visible,
+            'floating': isFloating,
+            'resting': !isFloating,
+        };
+        // Add '*' if a label is present and the field is required
+        const labelText = `${this.label}${this.required && !this.noAsterisk ? '*' : ''}`;
+        return x `
+      <span class="label ${o$1(classes)}" aria-hidden=${!visible}
+        >${labelText}</span
+      >
+    `;
+    }
+    animateLabelIfNeeded({ wasFocused, wasPopulated, }) {
+        if (!this.label) {
+            return;
+        }
+        wasFocused ??= this.focused;
+        wasPopulated ??= this.populated;
+        const wasFloating = wasFocused || wasPopulated;
+        const shouldBeFloating = this.focused || this.populated;
+        if (wasFloating === shouldBeFloating) {
+            return;
+        }
+        this.isAnimating = true;
+        this.labelAnimation?.cancel();
+        // Only one label is visible at a time for clearer text rendering.
+        // The floating label is visible and used during animation. At the end of
+        // the animation, it will either remain visible (if floating) or hide and
+        // the resting label will be shown.
+        //
+        // We don't use forward filling because if the dimensions of the text field
+        // change (leading icon removed, density changes, etc), then the animation
+        // will be inaccurate.
+        //
+        // Re-calculating the animation each time will prevent any visual glitches
+        // from appearing.
+        // TODO(b/241113345): use animation tokens
+        this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD });
+        this.labelAnimation?.addEventListener('finish', () => {
+            // At the end of the animation, update the visible label.
+            this.isAnimating = false;
+        });
+    }
+    getLabelKeyframes() {
+        const { floatingLabelEl, restingLabelEl } = this;
+        if (!floatingLabelEl || !restingLabelEl) {
+            return [];
+        }
+        const { x: floatingX, y: floatingY, height: floatingHeight, } = floatingLabelEl.getBoundingClientRect();
+        const { x: restingX, y: restingY, height: restingHeight, } = restingLabelEl.getBoundingClientRect();
+        const floatingScrollWidth = floatingLabelEl.scrollWidth;
+        const restingScrollWidth = restingLabelEl.scrollWidth;
+        // Scale by width ratio instead of font size since letter-spacing will scale
+        // incorrectly. Using the width we can better approximate the adjusted
+        // scale and compensate for tracking and overflow.
+        // (use scrollWidth instead of width to account for clipped labels)
+        const scale = restingScrollWidth / floatingScrollWidth;
+        const xDelta = restingX - floatingX;
+        // The line-height of the resting and floating label are different. When
+        // we move the floating label down to the resting label's position, it won't
+        // exactly match because of this. We need to adjust by half of what the
+        // final scaled floating label's height will be.
+        const yDelta = restingY -
+            floatingY +
+            Math.round((restingHeight - floatingHeight * scale) / 2);
+        // Create the two transforms: floating to resting (using the calculations
+        // above), and resting to floating (re-setting the transform to initial
+        // values).
+        const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;
+        const floatTransform = `translateX(0) translateY(0) scale(1)`;
+        // Constrain the floating labels width to a scaled percentage of the
+        // resting label's width. This will prevent long clipped labels from
+        // overflowing the container.
+        const restingClientWidth = restingLabelEl.clientWidth;
+        const isRestingClipped = restingScrollWidth > restingClientWidth;
+        const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';
+        if (this.focused || this.populated) {
+            return [
+                { transform: restTransform, width },
+                { transform: floatTransform, width },
+            ];
+        }
+        return [
+            { transform: floatTransform, width },
+            { transform: restTransform, width },
+        ];
+    }
+    getSurfacePositionClientRect() {
+        return this.containerEl.getBoundingClientRect();
+    }
+}
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "disabled", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "error", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "focused", void 0);
+__decorate([
+    n$7()
+], Field.prototype, "label", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-asterisk' })
+], Field.prototype, "noAsterisk", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "populated", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "required", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Field.prototype, "resizable", void 0);
+__decorate([
+    n$7({ attribute: 'supporting-text' })
+], Field.prototype, "supportingText", void 0);
+__decorate([
+    n$7({ attribute: 'error-text' })
+], Field.prototype, "errorText", void 0);
+__decorate([
+    n$7({ type: Number })
+], Field.prototype, "count", void 0);
+__decorate([
+    n$7({ type: Number })
+], Field.prototype, "max", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-start' })
+], Field.prototype, "hasStart", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-end' })
+], Field.prototype, "hasEnd", void 0);
+__decorate([
+    l$5({ slot: 'aria-describedby' })
+], Field.prototype, "slottedAriaDescribedBy", void 0);
+__decorate([
+    t$3()
+], Field.prototype, "isAnimating", void 0);
+__decorate([
+    t$3()
+], Field.prototype, "refreshErrorAlert", void 0);
+__decorate([
+    t$3()
+], Field.prototype, "disableTransitions", void 0);
+__decorate([
+    i$5('.label.floating')
+], Field.prototype, "floatingLabelEl", void 0);
+__decorate([
+    i$5('.label.resting')
+], Field.prototype, "restingLabelEl", void 0);
+__decorate([
+    i$5('.container')
+], Field.prototype, "containerEl", void 0);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A filled field component.
+ */
+class FilledField extends Field {
+    renderBackground() {
+        return x ` <div class="background"></div> `;
+    }
+    renderStateLayer() {
+        return x ` <div class="state-layer"></div> `;
+    }
+    renderIndicator() {
+        return x `<div class="active-indicator"></div>`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./field/internal/filled-styles.css.
+const styles$7 = i$4 `@layer styles{:host{--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_bottom-space: var(--md-filled-field-bottom-space, 16px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-filled-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-filled-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-filled-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-space: var(--md-filled-field-content-space, 16px);--_content-weight: var(--md-filled-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-filled-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-filled-field-disabled-leading-content-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-filled-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-filled-field-disabled-trailing-content-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-filled-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-filled-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-filled-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-filled-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-filled-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-filled-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 3px);--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-filled-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-filled-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-content-color: var(--md-filled-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-filled-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-filled-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-filled-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-filled-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-filled-field-leading-space, 16px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-filled-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-filled-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-filled-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-filled-field-top-space, 16px);--_trailing-content-color: var(--md-filled-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-filled-field-trailing-space, 16px);--_with-label-bottom-space: var(--md-filled-field-with-label-bottom-space, 8px);--_with-label-top-space: var(--md-filled-field-with-label-top-space, 8px);--_with-leading-content-leading-space: var(--md-filled-field-with-leading-content-leading-space, 12px);--_with-trailing-content-trailing-space: var(--md-filled-field-with-trailing-content-trailing-space, 12px);--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)))}.background,.state-layer{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color)}.state-layer{visibility:hidden}.field:not(.disabled):hover .state-layer{visibility:visible}.label.floating{position:absolute;top:var(--_with-label-top-space)}.field:not(.with-start) .label-wrapper{margin-inline-start:var(--_leading-space)}.field:not(.with-end) .label-wrapper{margin-inline-end:var(--_trailing-space)}.active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%;z-index:1}.active-indicator::before,.active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.active-indicator::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .active-indicator::after{opacity:1}.field:not(.with-start) .content ::slotted(*){padding-inline-start:var(--_leading-space)}.field:not(.with-end) .content ::slotted(*){padding-inline-end:var(--_trailing-space)}.field:not(.no-label) .content ::slotted(:not(textarea)){padding-bottom:var(--_with-label-bottom-space);padding-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}.field:not(.no-label) .content ::slotted(textarea){margin-bottom:var(--_with-label-bottom-space);margin-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}:hover .active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}.active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}:hover .state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.disabled .active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.disabled .background{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.error .active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.error:hover .active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.error:hover .state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.error .active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}.resizable .container{bottom:var(--_focus-active-indicator-height);clip-path:inset(var(--_focus-active-indicator-height) 0 0 0)}.resizable .container>*{top:var(--_focus-active-indicator-height)}}@layer hcm{@media(forced-colors: active){.disabled .active-indicator::before{border-color:GrayText;opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./field/internal/shared-styles.css.
+const styles$6 = i$4 `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledField = class MdFilledField extends FilledField {
+};
+MdFilledField.styles = [styles$6, styles$7];
+MdFilledField = __decorate([
+    e$a('md-filled-field')
+], MdFilledField);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An outlined field component.
+ */
+class OutlinedField extends Field {
+    renderOutline(floatingLabel) {
+        return x `
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-panel-inactive"></div>
+          <div class="outline-panel-active"></div>
+          <div class="outline-label">${floatingLabel}</div>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./field/internal/outlined-styles.css.
+const styles$5 = i$4 `@layer styles{:host{--_bottom-space: var(--md-outlined-field-bottom-space, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-outlined-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-outlined-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-outlined-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-space: var(--md-outlined-field-content-space, 16px);--_content-weight: var(--md-outlined-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-outlined-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-outlined-field-disabled-leading-content-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-outlined-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-outlined-field-disabled-trailing-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-outlined-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-outlined-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-outlined-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-outlined-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-outlined-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-outlined-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-outlined-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-outlined-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-content-color: var(--md-outlined-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-outlined-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-outlined-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-outlined-field-leading-space, 16px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-outlined-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-outlined-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-outlined-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-outlined-field-top-space, 16px);--_trailing-content-color: var(--md-outlined-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-outlined-field-trailing-space, 16px);--_with-leading-content-leading-space: var(--md-outlined-field-with-leading-content-leading-space, 12px);--_with-trailing-content-trailing-space: var(--md-outlined-field-with-trailing-content-trailing-space, 12px);--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)))}.outline{border-color:var(--_outline-color);border-radius:inherit;display:flex;pointer-events:none;height:100%;position:absolute;width:100%;z-index:1}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - var(--_leading-space) - var(--_trailing-space));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.2, 0, 0, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-panel-active{opacity:1}.outline-label{display:flex;max-width:100%;transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .content ::slotted(*){padding-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-start) .label-wrapper{margin-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .content ::slotted(*){padding-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.field:not(.with-end) .label-wrapper{margin-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}.resizable .container{bottom:var(--_focus-outline-width);inset-inline-end:var(--_focus-outline-width);clip-path:inset(var(--_focus-outline-width) 0 0 var(--_focus-outline-width))}.resizable .container>*{top:var(--_focus-outline-width);inset-inline-start:var(--_focus-outline-width)}.resizable .container:dir(rtl){clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}}@layer hcm{@media(forced-colors: active){.disabled .outline{border-color:GrayText;color:GrayText}.disabled :is(.outline-start,.outline-end,.outline-panel-inactive){opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedField = class MdOutlinedField extends OutlinedField {
+};
+MdOutlinedField.styles = [styles$6, styles$5];
+MdOutlinedField = __decorate([
+    e$a('md-outlined-field')
+], MdOutlinedField);
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const i="important",n=" !"+i,o=e$2(class extends i$2{constructor(t$1){var e;if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||(null===(e=t$1.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ht){this.ht=new Set;for(const t in r)this.ht.add(t);return this.render(r)}this.ht.forEach((t=>{null==r[t]&&(this.ht.delete(t),t.includes("-")?s.removeProperty(t):s[t]="");}));for(const t in r){const e=r[t];if(null!=e){this.ht.add(t);const r="string"==typeof e&&e.endsWith(n);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?i:""):s[t]=e;}}return T}});
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Activates the first non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     first item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+function activateFirstItem(items, isActivatable = (isItemNotDisabled)) {
+    // NOTE: These selector functions are static and not on the instance such
+    // that multiple operations can be chained and we do not have to re-query
+    // the DOM
+    const firstItem = getFirstActivatableItem(items, isActivatable);
+    if (firstItem) {
+        firstItem.tabIndex = 0;
+        firstItem.focus();
+    }
+    return firstItem;
+}
+/**
+ * Activates the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     last item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+function activateLastItem(items, isActivatable = (isItemNotDisabled)) {
+    const lastItem = getLastActivatableItem(items, isActivatable);
+    if (lastItem) {
+        lastItem.tabIndex = 0;
+        lastItem.focus();
+    }
+    return lastItem;
+}
+/**
+ * Deactivates the currently active item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to deactivate the
+ *     active item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the deleselcted activated item including the item and
+ *     the index of the item or `null` if none are deactivated.
+ * @nocollapse
+ */
+function deactivateActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    const activeItem = getActiveItem(items, isActivatable);
+    if (activeItem) {
+        activeItem.item.tabIndex = -1;
+    }
+    return activeItem;
+}
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+function getActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.tabIndex === 0 && isActivatable(item)) {
+            return {
+                item,
+                index: i,
+            };
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the first non-disabled item of a given array of items. This
+ * the first item that is not disabled.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+function getFirstActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (const item of items) {
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+function getLastActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the next non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the next item at the end of the list is the first
+ *     item. Defaults to true.
+ * @return The next activatable item or `null` if none are activatable.
+ */
+function getNextItem(items, index, isActivatable = (isItemNotDisabled), wrap = true) {
+    for (let i = 1; i < items.length; i++) {
+        const nextIndex = (i + index) % items.length;
+        if (nextIndex < index && !wrap) {
+            // Return if the index loops back to the beginning and not wrapping.
+            return null;
+        }
+        const item = items[nextIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Retrieves the previous non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the previous item at the beginning of the list is
+ *     the last item. Defaults to true.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+function getPrevItem(items, index, isActivatable = (isItemNotDisabled), wrap = true) {
+    for (let i = 1; i < items.length; i++) {
+        const prevIndex = (index - i + items.length) % items.length;
+        if (prevIndex > index && !wrap) {
+            // Return if the index loops back to the end and not wrapping.
+            return null;
+        }
+        const item = items[prevIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+function activateNextItem(items, activeItemRecord, isActivatable = (isItemNotDisabled), wrap = true) {
+    if (activeItemRecord) {
+        const next = getNextItem(items, activeItemRecord.index, isActivatable, wrap);
+        if (next) {
+            next.tabIndex = 0;
+            next.focus();
+        }
+        return next;
+    }
+    else {
+        return activateFirstItem(items, isActivatable);
+    }
+}
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+function activatePreviousItem(items, activeItemRecord, isActivatable = (isItemNotDisabled), wrap = true) {
+    if (activeItemRecord) {
+        const prev = getPrevItem(items, activeItemRecord.index, isActivatable, wrap);
+        if (prev) {
+            prev.tabIndex = 0;
+            prev.focus();
+        }
+        return prev;
+    }
+    else {
+        return activateLastItem(items, isActivatable);
+    }
+}
+/**
+ * Creates an event that requests the parent md-list to deactivate all other
+ * items.
+ */
+function createDeactivateItemsEvent() {
+    return new Event('deactivate-items', { bubbles: true, composed: true });
+}
+/**
+ * Creates an event that requests the menu to set `tabindex=0` on the item and
+ * focus it. We use this pattern because List keeps track of what element is
+ * active in the List by maintaining tabindex. We do not want list items
+ * to set tabindex on themselves or focus themselves so that we can organize all
+ * that logic in the parent List and Menus, and list item stays as dumb as
+ * possible.
+ */
+function createRequestActivationEvent() {
+    return new Event('request-activation', { bubbles: true, composed: true });
+}
+/**
+ * The default `isActivatable` function, which checks if an item is not
+ * disabled.
+ *
+ * @param item The item to check.
+ * @return true if `item.disabled` is `false.
+ */
+function isItemNotDisabled(item) {
+    return !item.disabled;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// TODO: move this file to List and make List use this
+/**
+ * Default keys that trigger navigation.
+ */
+// tslint:disable:enforce-name-casing Following Enum style
+const NavigableKeys = {
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowUp: 'ArrowUp',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+};
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+class ListController {
+    constructor(config) {
+        /**
+         * Handles keyboard navigation. Should be bound to the node that will act as
+         * the List.
+         */
+        this.handleKeydown = (event) => {
+            const key = event.key;
+            if (event.defaultPrevented || !this.isNavigableKey(key)) {
+                return;
+            }
+            // do not use this.items directly in upcoming calculations so we don't
+            // re-query the DOM unnecessarily
+            const items = this.items;
+            if (!items.length) {
+                return;
+            }
+            const activeItemRecord = getActiveItem(items, this.isActivatable);
+            event.preventDefault();
+            const isRtl = this.isRtl();
+            const inlinePrevious = isRtl
+                ? NavigableKeys.ArrowRight
+                : NavigableKeys.ArrowLeft;
+            const inlineNext = isRtl
+                ? NavigableKeys.ArrowLeft
+                : NavigableKeys.ArrowRight;
+            let nextActiveItem = null;
+            switch (key) {
+                // Activate the next item
+                case NavigableKeys.ArrowDown:
+                case inlineNext:
+                    nextActiveItem = activateNextItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+                    break;
+                // Activate the previous item
+                case NavigableKeys.ArrowUp:
+                case inlinePrevious:
+                    nextActiveItem = activatePreviousItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+                    break;
+                // Activate the first item
+                case NavigableKeys.Home:
+                    nextActiveItem = activateFirstItem(items, this.isActivatable);
+                    break;
+                // Activate the last item
+                case NavigableKeys.End:
+                    nextActiveItem = activateLastItem(items, this.isActivatable);
+                    break;
+            }
+            if (nextActiveItem &&
+                activeItemRecord &&
+                activeItemRecord.item !== nextActiveItem) {
+                // If a new item was activated, remove the tabindex of the previous
+                // activated item.
+                activeItemRecord.item.tabIndex = -1;
+            }
+        };
+        /**
+         * Listener to be bound to the `deactivate-items` item event.
+         */
+        this.onDeactivateItems = () => {
+            const items = this.items;
+            for (const item of items) {
+                this.deactivateItem(item);
+            }
+        };
+        /**
+         * Listener to be bound to the `request-activation` item event..
+         */
+        this.onRequestActivation = (event) => {
+            this.onDeactivateItems();
+            const target = event.target;
+            this.activateItem(target);
+            target.focus();
+        };
+        /**
+         * Listener to be bound to the `slotchange` event for the slot that renders
+         * the items.
+         */
+        this.onSlotchange = () => {
+            const items = this.items;
+            // Whether we have encountered an item that has been activated
+            let encounteredActivated = false;
+            for (const item of items) {
+                const isActivated = !item.disabled && item.tabIndex > -1;
+                if (isActivated && !encounteredActivated) {
+                    encounteredActivated = true;
+                    item.tabIndex = 0;
+                    continue;
+                }
+                // Deactivate the rest including disabled
+                item.tabIndex = -1;
+            }
+            if (encounteredActivated) {
+                return;
+            }
+            const firstActivatableItem = getFirstActivatableItem(items, this.isActivatable);
+            if (!firstActivatableItem) {
+                return;
+            }
+            firstActivatableItem.tabIndex = 0;
+        };
+        const { isItem, getPossibleItems, isRtl, deactivateItem, activateItem, isNavigableKey, isActivatable, wrapNavigation, } = config;
+        this.isItem = isItem;
+        this.getPossibleItems = getPossibleItems;
+        this.isRtl = isRtl;
+        this.deactivateItem = deactivateItem;
+        this.activateItem = activateItem;
+        this.isNavigableKey = isNavigableKey;
+        this.isActivatable = isActivatable;
+        this.wrapNavigation = wrapNavigation ?? (() => true);
+    }
+    /**
+     * The items being managed by the list. Additionally, attempts to see if the
+     * object has a sub-item in the `.item` property.
+     */
+    get items() {
+        const maybeItems = this.getPossibleItems();
+        const items = [];
+        for (const itemOrParent of maybeItems) {
+            const isItem = this.isItem(itemOrParent);
+            // if the item is a list item, add it to the list of items
+            if (isItem) {
+                items.push(itemOrParent);
+                continue;
+            }
+            // If the item exposes an `item` property check if it is a list item.
+            const subItem = itemOrParent.item;
+            if (subItem && this.isItem(subItem)) {
+                items.push(subItem);
+            }
+        }
+        return items;
+    }
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activateNextItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+    }
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activatePreviousItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Creates an event that closes any parent menus.
+ */
+function createCloseMenuEvent(initiator, reason) {
+    return new CustomEvent('close-menu', {
+        bubbles: true,
+        composed: true,
+        detail: { initiator, reason, itemPath: [initiator] },
+    });
+}
+/**
+ * Creates a default close menu event used by md-menu.
+ */
+const createDefaultCloseMenuEvent = (createCloseMenuEvent);
+/**
+ * Creates an event that requests the given item be selected.
+ */
+function createDeactivateTypeaheadEvent() {
+    return new Event('deactivate-typeahead', { bubbles: true, composed: true });
+}
+/**
+ * Creates an event that requests the typeahead functionality of containing menu
+ * be activated.
+ */
+function createActivateTypeaheadEvent() {
+    return new Event('activate-typeahead', { bubbles: true, composed: true });
+}
+/**
+ * Keys that are used to navigate menus.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const NavigableKey = {
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
+    RIGHT: 'ArrowRight',
+    LEFT: 'ArrowLeft',
+};
+/**
+ * Keys that are used for selection in menus.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const SelectionKey = {
+    SPACE: 'Space',
+    ENTER: 'Enter',
+};
+/**
+ * Default close `Reason` kind values.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const CloseReason = {
+    CLICK_SELECTION: 'click-selection',
+    KEYDOWN: 'keydown',
+};
+/**
+ * Keys that can close menus.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const KeydownCloseKey = {
+    ESCAPE: 'Escape',
+    SPACE: SelectionKey.SPACE,
+    ENTER: SelectionKey.ENTER,
+};
+/**
+ * Determines whether the given key code is a key code that should close the
+ * menu.
+ *
+ * @param code The KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to close the
+ * menu.
+ */
+function isClosableKey(code) {
+    return Object.values(KeydownCloseKey).some((value) => value === code);
+}
+/**
+ * Determines whether the given key code is a key code that should select a menu
+ * item.
+ *
+ * @param code They KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to select a
+ * menu item.
+ */
+function isSelectableKey(code) {
+    return Object.values(SelectionKey).some((value) => value === code);
+}
+/**
+ * Determines whether a target element is contained inside another element's
+ * composed tree.
+ *
+ * @param target The potential contained element.
+ * @param container The potential containing element of the target.
+ * @returns Whether the target element is contained inside the container's
+ * composed subtree
+ */
+function isElementInSubtree(target, container) {
+    // Dispatch a composed, bubbling event to check its path to see if the
+    // newly-focused element is contained in container's subtree
+    const focusEv = new Event('md-contains', { bubbles: true, composed: true });
+    let composedPath = [];
+    const listener = (ev) => {
+        composedPath = ev.composedPath();
+    };
+    container.addEventListener('md-contains', listener);
+    target.dispatchEvent(focusEv);
+    container.removeEventListener('md-contains', listener);
+    const isContained = composedPath.length > 0;
+    return isContained;
+}
+/**
+ * Element to focus on when menu is first opened.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const FocusState = {
+    NONE: 'none',
+    LIST_ROOT: 'list-root',
+    FIRST_ITEM: 'first-item',
+    LAST_ITEM: 'last-item',
+};
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An enum of supported Menu corners
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const Corner = {
+    END_START: 'end-start',
+    END_END: 'end-end',
+    START_START: 'start-start',
+    START_END: 'start-end',
+};
+/**
+ * Given a surface, an anchor, corners, and some options, this surface will
+ * calculate the position of a surface to align the two given corners and keep
+ * the surface inside the window viewport. It also provides a StyleInfo map that
+ * can be applied to the surface to handle visiblility and position.
+ */
+class SurfacePositionController {
+    /**
+     * @param host The host to connect the controller to.
+     * @param getProperties A function that returns the properties for the
+     * controller.
+     */
+    constructor(host, getProperties) {
+        this.host = host;
+        this.getProperties = getProperties;
+        // The current styles to apply to the surface.
+        this.surfaceStylesInternal = {
+            'display': 'none',
+        };
+        // Previous values stored for change detection. Open change detection is
+        // calculated separately so initialize it here.
+        this.lastValues = {
+            isOpen: false,
+        };
+        this.host.addController(this);
+    }
+    /**
+     * The StyleInfo map to apply to the surface via Lit's stylemap
+     */
+    get surfaceStyles() {
+        return this.surfaceStylesInternal;
+    }
+    /**
+     * Calculates the surface's new position required so that the surface's
+     * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the
+     * surface inside the window viewport. This positioning also respects RTL by
+     * checking `getComputedStyle()` on the surface element.
+     */
+    async position() {
+        const { surfaceEl, anchorEl, anchorCorner: anchorCornerRaw, surfaceCorner: surfaceCornerRaw, positioning, xOffset, yOffset, disableBlockFlip, disableInlineFlip, repositionStrategy, } = this.getProperties();
+        const anchorCorner = anchorCornerRaw.toLowerCase().trim();
+        const surfaceCorner = surfaceCornerRaw.toLowerCase().trim();
+        if (!surfaceEl || !anchorEl) {
+            return;
+        }
+        // Store these before we potentially resize the window with the next set of
+        // lines
+        const windowInnerWidth = window.innerWidth;
+        const windowInnerHeight = window.innerHeight;
+        const div = document.createElement('div');
+        div.style.opacity = '0';
+        div.style.position = 'fixed';
+        div.style.display = 'block';
+        div.style.inset = '0';
+        document.body.appendChild(div);
+        const scrollbarTestRect = div.getBoundingClientRect();
+        div.remove();
+        // Calculate the widths of the scrollbars in the inline and block directions
+        // to account for window-relative calculations.
+        const blockScrollbarHeight = window.innerHeight - scrollbarTestRect.bottom;
+        const inlineScrollbarWidth = window.innerWidth - scrollbarTestRect.right;
+        // Paint the surface transparently so that we can get the position and the
+        // rect info of the surface.
+        this.surfaceStylesInternal = {
+            'display': 'block',
+            'opacity': '0',
+        };
+        // Wait for it to be visible.
+        this.host.requestUpdate();
+        await this.host.updateComplete;
+        // Safari has a bug that makes popovers render incorrectly if the node is
+        // made visible + Animation Frame before calling showPopover().
+        // https://bugs.webkit.org/show_bug.cgi?id=264069
+        // also the cast is required due to differing TS types in Google and OSS.
+        if (surfaceEl.popover &&
+            surfaceEl.isConnected) {
+            surfaceEl.showPopover();
+        }
+        const surfaceRect = surfaceEl.getSurfacePositionClientRect
+            ? surfaceEl.getSurfacePositionClientRect()
+            : surfaceEl.getBoundingClientRect();
+        const anchorRect = anchorEl.getSurfacePositionClientRect
+            ? anchorEl.getSurfacePositionClientRect()
+            : anchorEl.getBoundingClientRect();
+        const [surfaceBlock, surfaceInline] = surfaceCorner.split('-');
+        const [anchorBlock, anchorInline] = anchorCorner.split('-');
+        // LTR depends on the direction of the SURFACE not the anchor.
+        const isLTR = getComputedStyle(surfaceEl).direction === 'ltr';
+        /*
+         * For more on inline and block dimensions, see MDN article:
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+         *
+         * ┌───── inline/blockDocumentOffset  inlineScrollbarWidth
+         * │       │                                    │
+         * │     ┌─▼─────┐                              │Document
+         * │    ┌┼───────┴──────────────────────────────┼────────┐
+         * │    ││                                      │        │
+         * └──► ││ ┌───── inline/blockWindowOffset      │        │
+         *      ││ │       │                            ▼        │
+         *      ││ │     ┌─▼───┐                 Window┌┐        │
+         *      └┤ │    ┌┼─────┴───────────────────────┼│        │
+         *       │ │    ││                             ││        │
+         *       │ └──► ││  ┌──inline/blockAnchorOffset││        │
+         *       │      ││  │     │                    ││        │
+         *       │      └┤  │  ┌──▼───┐                ││        │
+         *       │       │  │ ┌┼──────┤                ││        │
+         *       │       │  └─►│Anchor│                ││        │
+         *       │       │    └┴──────┘                ││        │
+         *       │       │                             ││        │
+         *       │       │     ┌───────────────────────┼┼────┐   │
+         *       │       │     │ Surface               ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │      ┌┼─────┼───────────────────────┼│    │   │
+         *       │   ┌─►┴──────┼────────────────────────┘    ├┐  │
+         *       │   │         │ inline/blockOOBCorrection   ││  │
+         *       │   │         │                         │   ││  │
+         *       │   │         │                         ├──►├│  │
+         *       │   │         │                         │   ││  │
+         *       │   │         └────────────────────────┐▼───┼┘  │
+         *       │  blockScrollbarHeight                └────┘   │
+         *       │                                               │
+         *       └───────────────────────────────────────────────┘
+         */
+        // Calculate the block positioning properties
+        let { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty } = this.calculateBlock({
+            surfaceRect,
+            anchorRect,
+            anchorBlock,
+            surfaceBlock,
+            yOffset,
+            positioning,
+            windowInnerHeight,
+            blockScrollbarHeight,
+        });
+        // If the surface should be out of bounds in the block direction, flip the
+        // surface and anchor corner block values and recalculate
+        if (blockOutOfBoundsCorrection && !disableBlockFlip) {
+            const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';
+            const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';
+            const flippedBlock = this.calculateBlock({
+                surfaceRect,
+                anchorRect,
+                anchorBlock: flippedAnchorBlock,
+                surfaceBlock: flippedSurfaceBlock,
+                yOffset,
+                positioning,
+                windowInnerHeight,
+                blockScrollbarHeight,
+            });
+            // In the case that the flipped verion would require less out of bounds
+            // correcting, use the flipped corner block values
+            if (blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection) {
+                blockInset = flippedBlock.blockInset;
+                blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;
+                surfaceBlockProperty = flippedBlock.surfaceBlockProperty;
+            }
+        }
+        // Calculate the inline positioning properties
+        let { inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty } = this.calculateInline({
+            surfaceRect,
+            anchorRect,
+            anchorInline,
+            surfaceInline,
+            xOffset,
+            positioning,
+            isLTR,
+            windowInnerWidth,
+            inlineScrollbarWidth,
+        });
+        // If the surface should be out of bounds in the inline direction, flip the
+        // surface and anchor corner inline values and recalculate
+        if (inlineOutOfBoundsCorrection && !disableInlineFlip) {
+            const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';
+            const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';
+            const flippedInline = this.calculateInline({
+                surfaceRect,
+                anchorRect,
+                anchorInline: flippedAnchorInline,
+                surfaceInline: flippedSurfaceInline,
+                xOffset,
+                positioning,
+                isLTR,
+                windowInnerWidth,
+                inlineScrollbarWidth,
+            });
+            // In the case that the flipped verion would require less out of bounds
+            // correcting, use the flipped corner inline values
+            if (Math.abs(inlineOutOfBoundsCorrection) >
+                Math.abs(flippedInline.inlineOutOfBoundsCorrection)) {
+                inlineInset = flippedInline.inlineInset;
+                inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;
+                surfaceInlineProperty = flippedInline.surfaceInlineProperty;
+            }
+        }
+        // If we are simply repositioning the surface back inside the viewport,
+        // subtract the out of bounds correction values from the positioning.
+        if (repositionStrategy === 'move') {
+            blockInset = blockInset - blockOutOfBoundsCorrection;
+            inlineInset = inlineInset - inlineOutOfBoundsCorrection;
+        }
+        this.surfaceStylesInternal = {
+            'display': 'block',
+            'opacity': '1',
+            [surfaceBlockProperty]: `${blockInset}px`,
+            [surfaceInlineProperty]: `${inlineInset}px`,
+        };
+        // In the case that we are resizing the surface to stay inside the viewport
+        // we need to set height and width on the surface.
+        if (repositionStrategy === 'resize') {
+            // Add a height property to the styles if there is block height correction
+            if (blockOutOfBoundsCorrection) {
+                this.surfaceStylesInternal['height'] = `${surfaceRect.height - blockOutOfBoundsCorrection}px`;
+            }
+            // Add a width property to the styles if there is block height correction
+            if (inlineOutOfBoundsCorrection) {
+                this.surfaceStylesInternal['width'] = `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;
+            }
+        }
+        this.host.requestUpdate();
+    }
+    /**
+     * Calculates the css property, the inset, and the out of bounds correction
+     * for the surface in the block direction.
+     */
+    calculateBlock(config) {
+        const { surfaceRect, anchorRect, anchorBlock, surfaceBlock, yOffset, positioning, windowInnerHeight, blockScrollbarHeight, } = config;
+        // We use number booleans to multiply values rather than `if` / ternary
+        // statements because it _heavily_ cuts down on nesting and readability
+        const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
+        const relativeToDocument = positioning === 'document' ? 1 : 0;
+        const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;
+        const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;
+        const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;
+        // Whether or not to apply the height of the anchor
+        const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;
+        // The absolute block position of the anchor relative to window
+        const blockTopLayerOffset = isSurfaceBlockStart * anchorRect.top +
+            isSurfaceBlockEnd *
+                (windowInnerHeight - anchorRect.bottom - blockScrollbarHeight);
+        const blockDocumentOffset = isSurfaceBlockStart * window.scrollY - isSurfaceBlockEnd * window.scrollY;
+        // If the surface's block would be out of bounds of the window, move it back
+        // in
+        const blockOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerHeight -
+            blockTopLayerOffset -
+            blockAnchorOffset -
+            surfaceRect.height));
+        // The block logical value of the surface
+        const blockInset = relativeToWindow * blockTopLayerOffset +
+            relativeToDocument * blockDocumentOffset +
+            blockAnchorOffset;
+        const surfaceBlockProperty = surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';
+        return { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty };
+    }
+    /**
+     * Calculates the css property, the inset, and the out of bounds correction
+     * for the surface in the inline direction.
+     */
+    calculateInline(config) {
+        const { isLTR: isLTRBool, surfaceInline, anchorInline, anchorRect, surfaceRect, xOffset, positioning, windowInnerWidth, inlineScrollbarWidth, } = config;
+        // We use number booleans to multiply values rather than `if` / ternary
+        // statements because it _heavily_ cuts down on nesting and readability
+        const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
+        const relativeToDocument = positioning === 'document' ? 1 : 0;
+        const isLTR = isLTRBool ? 1 : 0;
+        const isRTL = isLTRBool ? 0 : 1;
+        const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;
+        const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0;
+        const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0;
+        // Whether or not to apply the width of the anchor
+        const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;
+        // The inline position of the anchor relative to window in LTR
+        const inlineTopLayerOffsetLTR = isSurfaceInlineStart * anchorRect.left +
+            isSurfaceInlineEnd *
+                (windowInnerWidth - anchorRect.right - inlineScrollbarWidth);
+        // The inline position of the anchor relative to window in RTL
+        const inlineTopLayerOffsetRTL = isSurfaceInlineStart *
+            (windowInnerWidth - anchorRect.right - inlineScrollbarWidth) +
+            isSurfaceInlineEnd * anchorRect.left;
+        // The inline position of the anchor relative to window
+        const inlineTopLayerOffset = isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;
+        // The inline position of the anchor relative to window in LTR
+        const inlineDocumentOffsetLTR = isSurfaceInlineStart * window.scrollX -
+            isSurfaceInlineEnd * window.scrollX;
+        // The inline position of the anchor relative to window in RTL
+        const inlineDocumentOffsetRTL = isSurfaceInlineEnd * window.scrollX -
+            isSurfaceInlineStart * window.scrollX;
+        // The inline position of the anchor relative to window
+        const inlineDocumentOffset = isLTR * inlineDocumentOffsetLTR + isRTL * inlineDocumentOffsetRTL;
+        // If the surface's inline would be out of bounds of the window, move it
+        // back in
+        const inlineOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerWidth -
+            inlineTopLayerOffset -
+            inlineAnchorOffset -
+            surfaceRect.width));
+        // The inline logical value of the surface
+        const inlineInset = relativeToWindow * inlineTopLayerOffset +
+            inlineAnchorOffset +
+            relativeToDocument * inlineDocumentOffset;
+        let surfaceInlineProperty = surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
+        // There are cases where the element is RTL but the root of the page is not.
+        // In these cases we want to not use logical properties.
+        if (positioning === 'document' || positioning === 'fixed') {
+            if ((surfaceInline === 'start' && isLTRBool) ||
+                (surfaceInline === 'end' && !isLTRBool)) {
+                surfaceInlineProperty = 'left';
+            }
+            else {
+                surfaceInlineProperty = 'right';
+            }
+        }
+        return {
+            inlineInset,
+            inlineOutOfBoundsCorrection,
+            surfaceInlineProperty,
+        };
+    }
+    hostUpdate() {
+        this.onUpdate();
+    }
+    hostUpdated() {
+        this.onUpdate();
+    }
+    /**
+     * Checks whether the properties passed into the controller have changed since
+     * the last positioning. If so, it will reposition if the surface is open or
+     * close it if the surface should close.
+     */
+    async onUpdate() {
+        const props = this.getProperties();
+        let hasChanged = false;
+        for (const [key, value] of Object.entries(props)) {
+            // tslint:disable-next-line
+            hasChanged = hasChanged || value !== this.lastValues[key];
+            if (hasChanged)
+                break;
+        }
+        const openChanged = this.lastValues.isOpen !== props.isOpen;
+        const hasAnchor = !!props.anchorEl;
+        const hasSurface = !!props.surfaceEl;
+        if (hasChanged && hasAnchor && hasSurface) {
+            // Only update isOpen, because if it's closed, we do not want to waste
+            // time on a useless reposition calculation. So save the other "dirty"
+            // values until next time it opens.
+            this.lastValues.isOpen = props.isOpen;
+            if (props.isOpen) {
+                // We are going to do a reposition, so save the prop values for future
+                // dirty checking.
+                this.lastValues = props;
+                await this.position();
+                props.onOpen();
+            }
+            else if (openChanged) {
+                await props.beforeClose();
+                this.close();
+                props.onClose();
+            }
+        }
+    }
+    /**
+     * Hides the surface.
+     */
+    close() {
+        this.surfaceStylesInternal = {
+            'display': 'none',
+        };
+        this.host.requestUpdate();
+        const surfaceEl = this.getProperties().surfaceEl;
+        // The following type casts are required due to differing TS types in Google
+        // and open source.
+        if (surfaceEl?.popover &&
+            surfaceEl?.isConnected) {
+            surfaceEl.hidePopover();
+        }
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Indicies to access the TypeaheadRecord tuple type.
+ */
+const TYPEAHEAD_RECORD = {
+    INDEX: 0,
+    ITEM: 1,
+    TEXT: 2,
+};
+/**
+ * This controller listens to `keydown` events and searches the header text of
+ * an array of `MenuItem`s with the corresponding entered keys within the buffer
+ * time and activates the item.
+ *
+ * @example
+ * ```ts
+ * const typeaheadController = new TypeaheadController(() => ({
+ *   typeaheadBufferTime: 50,
+ *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
+ * }));
+ * html`
+ *   <div
+ *       @keydown=${typeaheadController.onKeydown}
+ *       tabindex="0"
+ *       class="activeItemText">
+ *     <!-- focusable element that will receive keydown events -->
+ *     Apple
+ *   </div>
+ *   <div>
+ *     <md-menu-item active header="Apple"></md-menu-item>
+ *     <md-menu-item header="Apricot"></md-menu-item>
+ *     <md-menu-item header="Banana"></md-menu-item>
+ *     <md-menu-item header="Olive"></md-menu-item>
+ *     <md-menu-item header="Orange"></md-menu-item>
+ *   </div>
+ * `;
+ * ```
+ */
+class TypeaheadController {
+    /**
+     * @param getProperties A function that returns the options of the typeahead
+     * controller:
+     *
+     * {
+     *   getItems: A function that returns an array of menu items to be searched.
+     *   typeaheadBufferTime: The maximum time between each keystroke to keep the
+     *       current type buffer alive.
+     * }
+     */
+    constructor(getProperties) {
+        this.getProperties = getProperties;
+        /**
+         * Array of tuples that helps with indexing.
+         */
+        this.typeaheadRecords = [];
+        /**
+         * Currently-typed text since last buffer timeout
+         */
+        this.typaheadBuffer = '';
+        /**
+         * The timeout id from the current buffer's setTimeout
+         */
+        this.cancelTypeaheadTimeout = 0;
+        /**
+         * If we are currently "typing"
+         */
+        this.isTypingAhead = false;
+        /**
+         * The record of the last active item.
+         */
+        this.lastActiveRecord = null;
+        /**
+         * Apply this listener to the element that will receive `keydown` events that
+         * should trigger this controller.
+         *
+         * @param event The native browser `KeyboardEvent` from the `keydown` event.
+         */
+        this.onKeydown = (event) => {
+            if (this.isTypingAhead) {
+                this.typeahead(event);
+            }
+            else {
+                this.beginTypeahead(event);
+            }
+        };
+        /**
+         * Ends the current typeahead and clears the buffer.
+         */
+        this.endTypeahead = () => {
+            this.isTypingAhead = false;
+            this.typaheadBuffer = '';
+            this.typeaheadRecords = [];
+        };
+    }
+    get items() {
+        return this.getProperties().getItems();
+    }
+    get active() {
+        return this.getProperties().active;
+    }
+    /**
+     * Sets up typingahead
+     */
+    beginTypeahead(event) {
+        if (!this.active) {
+            return;
+        }
+        // We don't want to typeahead if the _beginning_ of the typeahead is a menu
+        // navigation, or a selection. We will handle "Space" only if it's in the
+        // middle of a typeahead
+        if (event.code === 'Space' ||
+            event.code === 'Enter' ||
+            event.code.startsWith('Arrow') ||
+            event.code === 'Escape') {
+            return;
+        }
+        this.isTypingAhead = true;
+        // Generates the record array data structure which is the index, the element
+        // and a normalized header.
+        this.typeaheadRecords = this.items.map((el, index) => [
+            index,
+            el,
+            el.typeaheadText.trim().toLowerCase(),
+        ]);
+        this.lastActiveRecord =
+            this.typeaheadRecords.find((record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0) ?? null;
+        if (this.lastActiveRecord) {
+            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
+        }
+        this.typeahead(event);
+    }
+    /**
+     * Performs the typeahead. Based on the normalized items and the current text
+     * buffer, finds the _next_ item with matching text and activates it.
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive, Orange, Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Olive
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive (active), Orange, Cucumber
+     * buffer: 'o'
+     * user types: l
+     *
+     * activates Olive
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive (active), Orange, Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Orange
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive, Orange (active), Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Olive
+     */
+    typeahead(event) {
+        if (event.defaultPrevented)
+            return;
+        clearTimeout(this.cancelTypeaheadTimeout);
+        // Stop typingahead if one of the navigation or selection keys (except for
+        // Space) are pressed
+        if (event.code === 'Enter' ||
+            event.code.startsWith('Arrow') ||
+            event.code === 'Escape') {
+            this.endTypeahead();
+            if (this.lastActiveRecord) {
+                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
+            }
+            return;
+        }
+        // If Space is pressed, prevent it from selecting and closing the menu
+        if (event.code === 'Space') {
+            event.preventDefault();
+        }
+        // Start up a new keystroke buffer timeout
+        this.cancelTypeaheadTimeout = setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
+        this.typaheadBuffer += event.key.toLowerCase();
+        const lastActiveIndex = this.lastActiveRecord
+            ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
+            : -1;
+        const numRecords = this.typeaheadRecords.length;
+        /**
+         * Sorting function that will resort the items starting with the given index
+         *
+         * @example
+         *
+         * this.typeaheadRecords =
+         * 0: [0, <reference>, 'apple']
+         * 1: [1, <reference>, 'apricot']
+         * 2: [2, <reference>, 'banana']
+         * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
+         * 4: [4, <reference>, 'orange']
+         * 5: [5, <reference>, 'strawberry']
+         *
+         * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
+         *                                       - rebaseIndexOnActive(b)) ===
+         * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
+         * 1: [4, <reference>, 'orange']
+         * 2: [5, <reference>, 'strawberry']
+         * 3: [0, <reference>, 'apple']
+         * 4: [1, <reference>, 'apricot']
+         * 5: [2, <reference>, 'banana']
+         */
+        const rebaseIndexOnActive = (record) => {
+            return ((record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+                numRecords);
+        };
+        // records filtered and sorted / rebased around the last active index
+        const matchingRecords = this.typeaheadRecords
+            .filter((record) => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+            record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer))
+            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
+        // Just leave if there's nothing that matches. Native select will just
+        // choose the first thing that starts with the next letter in the alphabet
+        // but that's out of scope and hard to localize
+        if (matchingRecords.length === 0) {
+            clearTimeout(this.cancelTypeaheadTimeout);
+            if (this.lastActiveRecord) {
+                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
+            }
+            this.endTypeahead();
+            return;
+        }
+        const isNewQuery = this.typaheadBuffer.length === 1;
+        let nextRecord;
+        // This is likely the case that someone is trying to "tab" through different
+        // entries that start with the same letter
+        if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
+            nextRecord = matchingRecords[1] ?? matchingRecords[0];
+        }
+        else {
+            nextRecord = matchingRecords[0];
+        }
+        if (this.lastActiveRecord) {
+            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
+        }
+        this.lastActiveRecord = nextRecord;
+        nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;
+        nextRecord[TYPEAHEAD_RECORD.ITEM].focus();
+        return;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The default value for the typeahead buffer time in Milliseconds.
+ */
+const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
+const submenuNavKeys = new Set([
+    NavigableKeys.ArrowDown,
+    NavigableKeys.ArrowUp,
+    NavigableKeys.Home,
+    NavigableKeys.End,
+]);
+const menuNavKeys = new Set([
+    NavigableKeys.ArrowLeft,
+    NavigableKeys.ArrowRight,
+    ...submenuNavKeys,
+]);
+/**
+ * Gets the currently focused element on the page.
+ *
+ * @param activeDoc The document or shadowroot from which to start the search.
+ *    Defaults to `window.document`
+ * @return Returns the currently deeply focused element or `null` if none.
+ */
+function getFocusedElement(activeDoc = document) {
+    let activeEl = activeDoc.activeElement;
+    // Check for activeElement in the case that an element with a shadow root host
+    // is currently focused.
+    while (activeEl && activeEl?.shadowRoot?.activeElement) {
+        activeEl = activeEl.shadowRoot.activeElement;
+    }
+    return activeEl;
+}
+/**
+ * @fires opening {Event} Fired before the opening animation begins
+ * @fires opened {Event} Fired once the menu is open, after any animations
+ * @fires closing {Event} Fired before the closing animation begins
+ * @fires closed {Event} Fired once the menu is closed, after any animations
+ */
+class Menu extends s$2 {
+    /**
+     * Whether the menu is animating upwards or downwards when opening. This is
+     * helpful for calculating some animation calculations.
+     */
+    get openDirection() {
+        const menuCornerBlock = this.menuCorner.split('-')[0];
+        return menuCornerBlock === 'start' ? 'DOWN' : 'UP';
+    }
+    /**
+     * The element which the menu should align to. If `anchor` is set to a
+     * non-empty idref string, then `anchorEl` will resolve to the element with
+     * the given id in the same root node. Otherwise, `null`.
+     */
+    get anchorElement() {
+        if (this.anchor) {
+            return this.getRootNode().querySelector(`#${this.anchor}`);
+        }
+        return this.currentAnchorElement;
+    }
+    set anchorElement(element) {
+        this.currentAnchorElement = element;
+        this.requestUpdate('anchorElement');
+    }
+    constructor() {
+        super();
+        /**
+         * The ID of the element in the same root node in which the menu should align
+         * to. Overrides setting `anchorElement = elementReference`.
+         *
+         * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
+         * to an HTMLElement in order for menu to open.
+         */
+        this.anchor = '';
+        /**
+         * Whether the positioning algorithm should calculate relative to the parent
+         * of the anchor element (`absolute`), relative to the window (`fixed`), or
+         * relative to the document (`document`). `popover` will use the popover API
+         * to render the menu in the top-layer. If your browser does not support the
+         * popover API, it will fall back to `fixed`.
+         *
+         * __Examples for `position = 'fixed'`:__
+         *
+         * - If there is no `position:relative` in the given parent tree and the
+         *   surface is `position:absolute`
+         * - If the surface is `position:fixed`
+         * - If the surface is in the "top layer"
+         * - The anchor and the surface do not share a common `position:relative`
+         *   ancestor
+         *
+         * When using `positioning=fixed`, in most cases, the menu should position
+         * itself above most other `position:absolute` or `position:fixed` elements
+         * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
+         *
+         * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
+         * the window instead.
+         *
+         * __Examples for `position = 'document'`:__
+         *
+         * - There is no parent that creates a relative positioning context e.g.
+         *   `position: relative`, `position: absolute`, `transform: translate(x, y)`,
+         *   etc.
+         * - You put the effort into hoisting the menu to the top of the DOM like the
+         *   end of the `<body>` to render over everything or in a top-layer.
+         * - You are reusing a single `md-menu` element that dynamically renders
+         *   content.
+         *
+         * __Examples for `position = 'popover'`:__
+         *
+         * - Your browser supports `popover`.
+         * - Most cases. Once popover is in browsers, this will become the default.
+         */
+        this.positioning = 'absolute';
+        /**
+         * Skips the opening and closing animations.
+         */
+        this.quick = false;
+        /**
+         * Displays overflow content like a submenu. Not required in most cases when
+         * using `positioning="popover"`.
+         *
+         * __NOTE__: This may cause adverse effects if you set
+         * `md-menu {max-height:...}`
+         * and have items overflowing items in the "y" direction.
+         */
+        this.hasOverflow = false;
+        /**
+         * Opens the menu and makes it visible. Alternative to the `.show()` and
+         * `.close()` methods
+         */
+        this.open = false;
+        /**
+         * Offsets the menu's inline alignment from the anchor by the given number in
+         * pixels. This value is direction aware and will follow the LTR / RTL
+         * direction.
+         *
+         * e.g. LTR: positive -> right, negative -> left
+         *      RTL: positive -> left, negative -> right
+         */
+        this.xOffset = 0;
+        /**
+         * Offsets the menu's block alignment from the anchor by the given number in
+         * pixels.
+         *
+         * e.g. positive -> down, negative -> up
+         */
+        this.yOffset = 0;
+        /**
+         * Disable the `flip` behavior that usually happens on the horizontal axis
+         * when the surface would render outside the viewport.
+         */
+        this.noHorizontalFlip = false;
+        /**
+         * Disable the `flip` behavior that usually happens on the vertical axis when
+         * the surface would render outside the viewport.
+         */
+        this.noVerticalFlip = false;
+        /**
+         * The max time between the keystrokes of the typeahead menu behavior before
+         * it clears the typeahead buffer.
+         */
+        this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+        /**
+         * The corner of the anchor which to align the menu in the standard logical
+         * property style of <block>-<inline> e.g. `'end-start'`.
+         *
+         * NOTE: This value may not be respected by the menu positioning algorithm
+         * if the menu would render outisde the viewport.
+         * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
+         */
+        this.anchorCorner = Corner.END_START;
+        /**
+         * The corner of the menu which to align the anchor in the standard logical
+         * property style of <block>-<inline> e.g. `'start-start'`.
+         *
+         * NOTE: This value may not be respected by the menu positioning algorithm
+         * if the menu would render outisde the viewport.
+         * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
+         */
+        this.menuCorner = Corner.START_START;
+        /**
+         * Keeps the user clicks outside the menu.
+         *
+         * NOTE: clicking outside may still cause focusout to close the menu so see
+         * `stayOpenOnFocusout`.
+         */
+        this.stayOpenOnOutsideClick = false;
+        /**
+         * Keeps the menu open when focus leaves the menu's composed subtree.
+         *
+         * NOTE: Focusout behavior will stop propagation of the focusout event. Set
+         * this property to true to opt-out of menu's focusout handling altogether.
+         */
+        this.stayOpenOnFocusout = false;
+        /**
+         * After closing, does not restore focus to the last focused element before
+         * the menu was opened.
+         */
+        this.skipRestoreFocus = false;
+        /**
+         * The element that should be focused by default once opened.
+         *
+         * NOTE: When setting default focus to 'LIST_ROOT', remember to change
+         * `tabindex` to `0` and change md-menu's display to something other than
+         * `display: contents` when necessary.
+         */
+        this.defaultFocus = FocusState.FIRST_ITEM;
+        /**
+         * Turns off navigation wrapping. By default, navigating past the end of the
+         * menu items will wrap focus back to the beginning and vice versa. Use this
+         * for ARIA patterns that do not wrap focus, like combobox.
+         */
+        this.noNavigationWrap = false;
+        this.typeaheadActive = true;
+        /**
+         * Whether or not the current menu is a submenu and should not handle specific
+         * navigation keys.
+         *
+         * @export
+         */
+        this.isSubmenu = false;
+        /**
+         * The event path of the last window pointerdown event.
+         */
+        this.pointerPath = [];
+        /**
+         * Whether or not the menu is repositoining due to window / document resize
+         */
+        this.isRepositioning = false;
+        this.openCloseAnimationSignal = createAnimationSignal();
+        this.listController = new ListController({
+            isItem: (maybeItem) => {
+                return maybeItem.hasAttribute('md-menu-item');
+            },
+            getPossibleItems: () => this.slotItems,
+            isRtl: () => getComputedStyle(this).direction === 'rtl',
+            deactivateItem: (item) => {
+                item.selected = false;
+                item.tabIndex = -1;
+            },
+            activateItem: (item) => {
+                item.selected = true;
+                item.tabIndex = 0;
+            },
+            isNavigableKey: (key) => {
+                if (!this.isSubmenu) {
+                    return menuNavKeys.has(key);
+                }
+                const isRtl = getComputedStyle(this).direction === 'rtl';
+                // we want md-submenu to handle the submenu's left/right arrow exit
+                // key so it can close the menu instead of navigate the list.
+                // Therefore we need to include all keys but left/right arrow close
+                // key
+                const arrowOpen = isRtl
+                    ? NavigableKeys.ArrowLeft
+                    : NavigableKeys.ArrowRight;
+                if (key === arrowOpen) {
+                    return true;
+                }
+                return submenuNavKeys.has(key);
+            },
+            wrapNavigation: () => !this.noNavigationWrap,
+        });
+        /**
+         * The element that was focused before the menu opened.
+         */
+        this.lastFocusedElement = null;
+        /**
+         * Handles typeahead navigation through the menu.
+         */
+        this.typeaheadController = new TypeaheadController(() => {
+            return {
+                getItems: () => this.items,
+                typeaheadBufferTime: this.typeaheadDelay,
+                active: this.typeaheadActive,
+            };
+        });
+        this.currentAnchorElement = null;
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        /**
+         * Handles positioning the surface and aligning it to the anchor as well as
+         * keeping it in the viewport.
+         */
+        this.menuPositionController = new SurfacePositionController(this, () => {
+            return {
+                anchorCorner: this.anchorCorner,
+                surfaceCorner: this.menuCorner,
+                surfaceEl: this.surfaceEl,
+                anchorEl: this.anchorElement,
+                positioning: this.positioning === 'popover' ? 'document' : this.positioning,
+                isOpen: this.open,
+                xOffset: this.xOffset,
+                yOffset: this.yOffset,
+                disableBlockFlip: this.noVerticalFlip,
+                disableInlineFlip: this.noHorizontalFlip,
+                onOpen: this.onOpened,
+                beforeClose: this.beforeClose,
+                onClose: this.onClosed,
+                // We can't resize components that have overflow like menus with
+                // submenus because the overflow-y will show menu items / content
+                // outside the bounds of the menu. Popover API fixes this because each
+                // submenu is hoisted to the top-layer and are not considered overflow
+                // content.
+                repositionStrategy: this.hasOverflow && this.positioning !== 'popover'
+                    ? 'move'
+                    : 'resize',
+            };
+        });
+        this.onWindowResize = () => {
+            if (this.isRepositioning ||
+                (this.positioning !== 'document' &&
+                    this.positioning !== 'fixed' &&
+                    this.positioning !== 'popover')) {
+                return;
+            }
+            this.isRepositioning = true;
+            this.reposition();
+            this.isRepositioning = false;
+        };
+        this.handleFocusout = async (event) => {
+            const anchorEl = this.anchorElement;
+            // Do not close if we focused out by clicking on the anchor element. We
+            // can't assume anchor buttons can be the related target because of iOS does
+            // not focus buttons.
+            if (this.stayOpenOnFocusout ||
+                !this.open ||
+                this.pointerPath.includes(anchorEl)) {
+                return;
+            }
+            if (event.relatedTarget) {
+                // Don't close the menu if we are switching focus between menu,
+                // md-menu-item, and md-list or if the anchor was click focused, but check
+                // if length of pointerPath is 0 because that means something was at least
+                // clicked (shift+tab case).
+                if (isElementInSubtree(event.relatedTarget, this) ||
+                    (this.pointerPath.length !== 0 &&
+                        isElementInSubtree(event.relatedTarget, anchorEl))) {
+                    return;
+                }
+            }
+            else if (this.pointerPath.includes(this)) {
+                // If menu tabindex == -1 and the user clicks on the menu or a divider, we
+                // want to keep the menu open.
+                return;
+            }
+            const oldRestoreFocus = this.skipRestoreFocus;
+            // allow focus to continue to the next focused object rather than returning
+            this.skipRestoreFocus = true;
+            this.close();
+            // await for close
+            await this.updateComplete;
+            // return to previous behavior
+            this.skipRestoreFocus = oldRestoreFocus;
+        };
+        /**
+         * Saves the last focused element focuses the new element based on
+         * `defaultFocus`, and animates open.
+         */
+        this.onOpened = async () => {
+            this.lastFocusedElement = getFocusedElement();
+            const items = this.items;
+            const activeItemRecord = getActiveItem(items);
+            if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {
+                activeItemRecord.item.tabIndex = -1;
+            }
+            let animationAborted = !this.quick;
+            if (this.quick) {
+                this.dispatchEvent(new Event('opening'));
+            }
+            else {
+                animationAborted = !!(await this.animateOpen());
+            }
+            // This must come after the opening animation or else it may focus one of
+            // the items before the animation has begun and causes the list to slide
+            // (block-padding-of-the-menu)px at the end of the animation
+            switch (this.defaultFocus) {
+                case FocusState.FIRST_ITEM:
+                    const first = getFirstActivatableItem(items);
+                    if (first) {
+                        first.tabIndex = 0;
+                        first.focus();
+                        await first.updateComplete;
+                    }
+                    break;
+                case FocusState.LAST_ITEM:
+                    const last = getLastActivatableItem(items);
+                    if (last) {
+                        last.tabIndex = 0;
+                        last.focus();
+                        await last.updateComplete;
+                    }
+                    break;
+                case FocusState.LIST_ROOT:
+                    this.focus();
+                    break;
+                default:
+                case FocusState.NONE:
+                    // Do nothing.
+                    break;
+            }
+            if (!animationAborted) {
+                this.dispatchEvent(new Event('opened'));
+            }
+        };
+        /**
+         * Animates closed.
+         */
+        this.beforeClose = async () => {
+            this.open = false;
+            if (!this.skipRestoreFocus) {
+                this.lastFocusedElement?.focus?.();
+            }
+            if (!this.quick) {
+                await this.animateClose();
+            }
+        };
+        /**
+         * Focuses the last focused element.
+         */
+        this.onClosed = () => {
+            if (this.quick) {
+                this.dispatchEvent(new Event('closing'));
+                this.dispatchEvent(new Event('closed'));
+            }
+        };
+        this.onWindowPointerdown = (event) => {
+            this.pointerPath = event.composedPath();
+        };
+        /**
+         * We cannot listen to window click because Safari on iOS will not bubble a
+         * click event on window if the item clicked is not a "clickable" item such as
+         * <body>
+         */
+        this.onDocumentClick = (event) => {
+            if (!this.open) {
+                return;
+            }
+            const path = event.composedPath();
+            if (!this.stayOpenOnOutsideClick &&
+                !path.includes(this) &&
+                !path.includes(this.anchorElement)) {
+                this.open = false;
+            }
+        };
+        {
+            this.internals.role = 'menu';
+            this.addEventListener('keydown', this.handleKeydown);
+            // Capture so that we can grab the event before it reaches the menu item
+            // istelf. Specifically useful for the case where typeahead encounters a
+            // space and we don't want the menu item to close the menu.
+            this.addEventListener('keydown', this.captureKeydown, { capture: true });
+            this.addEventListener('focusout', this.handleFocusout);
+        }
+    }
+    /**
+     * The menu items associated with this menu. The items must be `MenuItem`s and
+     * have both the `md-menu-item` and `md-list-item` attributes.
+     */
+    get items() {
+        return this.listController.items;
+    }
+    willUpdate(changed) {
+        if (!changed.has('open')) {
+            return;
+        }
+        if (this.open) {
+            this.removeAttribute('aria-hidden');
+            return;
+        }
+        this.setAttribute('aria-hidden', 'true');
+    }
+    update(changed) {
+        if (changed.has('open')) {
+            if (this.open) {
+                this.setUpGlobalEventListeners();
+            }
+            else {
+                this.cleanUpGlobalEventListeners();
+            }
+        }
+        // Firefox does not support popover. Fall-back to using fixed.
+        if (changed.has('positioning') &&
+            this.positioning === 'popover' &&
+            // type required for Google JS conformance
+            !this.showPopover) {
+            this.positioning = 'fixed';
+        }
+        super.update(changed);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.open) {
+            this.setUpGlobalEventListeners();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanUpGlobalEventListeners();
+    }
+    getBoundingClientRect() {
+        if (!this.surfaceEl) {
+            return super.getBoundingClientRect();
+        }
+        return this.surfaceEl.getBoundingClientRect();
+    }
+    getClientRects() {
+        if (!this.surfaceEl) {
+            return super.getClientRects();
+        }
+        return this.surfaceEl.getClientRects();
+    }
+    render() {
+        return this.renderSurface();
+    }
+    /**
+     * Renders the positionable surface element and its contents.
+     */
+    renderSurface() {
+        return x `
+      <div
+        class="menu ${o$1(this.getSurfaceClasses())}"
+        style=${o(this.menuPositionController.surfaceStyles)}
+        popover=${this.positioning === 'popover' ? 'manual' : A}>
+        ${this.renderElevation()}
+        <div class="items">
+          <div class="item-padding"> ${this.renderMenuItems()} </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Renders the menu items' slot
+     */
+    renderMenuItems() {
+        return x `<slot
+      @close-menu=${this.onCloseMenu}
+      @deactivate-items=${this.onDeactivateItems}
+      @request-activation=${this.onRequestActivation}
+      @deactivate-typeahead=${this.handleDeactivateTypeahead}
+      @activate-typeahead=${this.handleActivateTypeahead}
+      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+      @close-on-focusout=${this.handleCloseOnFocusout}
+      @slotchange=${this.listController.onSlotchange}></slot>`;
+    }
+    /**
+     * Renders the elevation component.
+     */
+    renderElevation() {
+        return x `<md-elevation part="elevation"></md-elevation>`;
+    }
+    getSurfaceClasses() {
+        return {
+            open: this.open,
+            fixed: this.positioning === 'fixed',
+            'has-overflow': this.hasOverflow,
+        };
+    }
+    captureKeydown(event) {
+        if (event.target === this &&
+            !event.defaultPrevented &&
+            isClosableKey(event.code)) {
+            event.preventDefault();
+            this.close();
+        }
+        this.typeaheadController.onKeydown(event);
+    }
+    /**
+     * Performs the opening animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     *
+     * @return A promise that resolve to `true` if the animation was aborted,
+     *     `false` if it was not aborted.
+     */
+    async animateOpen() {
+        const surfaceEl = this.surfaceEl;
+        const slotEl = this.slotEl;
+        if (!surfaceEl || !slotEl)
+            return true;
+        const openDirection = this.openDirection;
+        this.dispatchEvent(new Event('opening'));
+        // needs to be imperative because we don't want to mix animation and Lit
+        // render timing
+        surfaceEl.classList.toggle('animating', true);
+        const signal = this.openCloseAnimationSignal.start();
+        const height = surfaceEl.offsetHeight;
+        const openingUpwards = openDirection === 'UP';
+        const children = this.items;
+        const FULL_DURATION = 500;
+        const SURFACE_OPACITY_DURATION = 50;
+        const ITEM_OPACITY_DURATION = 250;
+        // We want to fit every child fade-in animation within the full duration of
+        // the animation.
+        const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;
+        const surfaceHeightAnimation = surfaceEl.animate([{ height: '0px' }, { height: `${height}px` }], {
+            duration: FULL_DURATION,
+            easing: EASING.EMPHASIZED,
+        });
+        // When we are opening upwards, we want to make sure the last item is always
+        // in view, so we need to translate it upwards the opposite direction of the
+        // height animation
+        const upPositionCorrectionAnimation = slotEl.animate([
+            { transform: openingUpwards ? `translateY(-${height}px)` : '' },
+            { transform: '' },
+        ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED });
+        const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 0 }, { opacity: 1 }], SURFACE_OPACITY_DURATION);
+        const childrenAnimations = [];
+        for (let i = 0; i < children.length; i++) {
+            // If we are animating upwards, then reverse the children list.
+            const directionalIndex = openingUpwards ? children.length - 1 - i : i;
+            const child = children[directionalIndex];
+            const animation = child.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: ITEM_OPACITY_DURATION,
+                delay: DELAY_BETWEEN_ITEMS * i,
+            });
+            // Make them all initially hidden and then clean up at the end of each
+            // animation.
+            child.classList.toggle('md-menu-hidden', true);
+            animation.addEventListener('finish', () => {
+                child.classList.toggle('md-menu-hidden', false);
+            });
+            childrenAnimations.push([child, animation]);
+        }
+        let resolveAnimation = (value) => { };
+        const animationFinished = new Promise((resolve) => {
+            resolveAnimation = resolve;
+        });
+        signal.addEventListener('abort', () => {
+            surfaceHeightAnimation.cancel();
+            upPositionCorrectionAnimation.cancel();
+            surfaceOpacityAnimation.cancel();
+            childrenAnimations.forEach(([child, animation]) => {
+                child.classList.toggle('md-menu-hidden', false);
+                animation.cancel();
+            });
+            resolveAnimation(true);
+        });
+        surfaceHeightAnimation.addEventListener('finish', () => {
+            surfaceEl.classList.toggle('animating', false);
+            this.openCloseAnimationSignal.finish();
+            resolveAnimation(false);
+        });
+        return await animationFinished;
+    }
+    /**
+     * Performs the closing animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     */
+    animateClose() {
+        let resolve;
+        // This promise blocks the surface position controller from setting
+        // display: none on the surface which will interfere with this animation.
+        const animationEnded = new Promise((res) => {
+            resolve = res;
+        });
+        const surfaceEl = this.surfaceEl;
+        const slotEl = this.slotEl;
+        if (!surfaceEl || !slotEl) {
+            resolve(false);
+            return animationEnded;
+        }
+        const openDirection = this.openDirection;
+        const closingDownwards = openDirection === 'UP';
+        this.dispatchEvent(new Event('closing'));
+        // needs to be imperative because we don't want to mix animation and Lit
+        // render timing
+        surfaceEl.classList.toggle('animating', true);
+        const signal = this.openCloseAnimationSignal.start();
+        const height = surfaceEl.offsetHeight;
+        const children = this.items;
+        const FULL_DURATION = 150;
+        const SURFACE_OPACITY_DURATION = 50;
+        // The surface fades away at the very end
+        const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
+        const ITEM_OPACITY_DURATION = 50;
+        const ITEM_OPACITY_INITIAL_DELAY = 50;
+        const END_HEIGHT_PERCENTAGE = 0.35;
+        // We want to fit every child fade-out animation within the full duration of
+        // the animation.
+        const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
+            children.length;
+        // The mock has the animation shrink to 35%
+        const surfaceHeightAnimation = surfaceEl.animate([
+            { height: `${height}px` },
+            { height: `${height * END_HEIGHT_PERCENTAGE}px` },
+        ], {
+            duration: FULL_DURATION,
+            easing: EASING.EMPHASIZED_ACCELERATE,
+        });
+        // When we are closing downwards, we want to make sure the last item is
+        // always in view, so we need to translate it upwards the opposite direction
+        // of the height animation
+        const downPositionCorrectionAnimation = slotEl.animate([
+            { transform: '' },
+            {
+                transform: closingDownwards
+                    ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
+                    : '',
+            },
+        ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE });
+        const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 1 }, { opacity: 0 }], { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY });
+        const childrenAnimations = [];
+        for (let i = 0; i < children.length; i++) {
+            // If the animation is closing upwards, then reverse the list of
+            // children so that we animate in the opposite direction.
+            const directionalIndex = closingDownwards ? i : children.length - 1 - i;
+            const child = children[directionalIndex];
+            const animation = child.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: ITEM_OPACITY_DURATION,
+                delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i,
+            });
+            // Make sure the items stay hidden at the end of each child animation.
+            // We clean this up at the end of the overall animation.
+            animation.addEventListener('finish', () => {
+                child.classList.toggle('md-menu-hidden', true);
+            });
+            childrenAnimations.push([child, animation]);
+        }
+        signal.addEventListener('abort', () => {
+            surfaceHeightAnimation.cancel();
+            downPositionCorrectionAnimation.cancel();
+            surfaceOpacityAnimation.cancel();
+            childrenAnimations.forEach(([child, animation]) => {
+                animation.cancel();
+                child.classList.toggle('md-menu-hidden', false);
+            });
+            resolve(false);
+        });
+        surfaceHeightAnimation.addEventListener('finish', () => {
+            surfaceEl.classList.toggle('animating', false);
+            childrenAnimations.forEach(([child]) => {
+                child.classList.toggle('md-menu-hidden', false);
+            });
+            this.openCloseAnimationSignal.finish();
+            this.dispatchEvent(new Event('closed'));
+            resolve(true);
+        });
+        return animationEnded;
+    }
+    handleKeydown(event) {
+        // At any key event, the pointer interaction is done so we need to clear our
+        // cached pointerpath. This handles the case where the user clicks on the
+        // anchor, and then hits shift+tab
+        this.pointerPath = [];
+        this.listController.handleKeydown(event);
+    }
+    setUpGlobalEventListeners() {
+        document.addEventListener('click', this.onDocumentClick, { capture: true });
+        window.addEventListener('pointerdown', this.onWindowPointerdown);
+        document.addEventListener('resize', this.onWindowResize, { passive: true });
+        window.addEventListener('resize', this.onWindowResize, { passive: true });
+    }
+    cleanUpGlobalEventListeners() {
+        document.removeEventListener('click', this.onDocumentClick, {
+            capture: true,
+        });
+        window.removeEventListener('pointerdown', this.onWindowPointerdown);
+        document.removeEventListener('resize', this.onWindowResize);
+        window.removeEventListener('resize', this.onWindowResize);
+    }
+    onCloseMenu() {
+        this.close();
+    }
+    onDeactivateItems(event) {
+        event.stopPropagation();
+        this.listController.onDeactivateItems();
+    }
+    onRequestActivation(event) {
+        event.stopPropagation();
+        this.listController.onRequestActivation(event);
+    }
+    handleDeactivateTypeahead(event) {
+        // stopPropagation so that this does not deactivate any typeaheads in menus
+        // nested above it e.g. md-sub-menu
+        event.stopPropagation();
+        this.typeaheadActive = false;
+    }
+    handleActivateTypeahead(event) {
+        // stopPropagation so that this does not activate any typeaheads in menus
+        // nested above it e.g. md-sub-menu
+        event.stopPropagation();
+        this.typeaheadActive = true;
+    }
+    handleStayOpenOnFocusout(event) {
+        event.stopPropagation();
+        this.stayOpenOnFocusout = true;
+    }
+    handleCloseOnFocusout(event) {
+        event.stopPropagation();
+        this.stayOpenOnFocusout = false;
+    }
+    close() {
+        this.open = false;
+        const maybeSubmenu = this.slotItems;
+        maybeSubmenu.forEach((item) => {
+            item.close?.();
+        });
+    }
+    show() {
+        this.open = true;
+    }
+    /**
+     * Activates the next item in the menu. If at the end of the menu, the first
+     * item will be activated.
+     *
+     * @return The activated menu item or `null` if there are no items.
+     */
+    activateNextItem() {
+        return this.listController.activateNextItem() ?? null;
+    }
+    /**
+     * Activates the previous item in the menu. If at the start of the menu, the
+     * last item will be activated.
+     *
+     * @return The activated menu item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        return this.listController.activatePreviousItem() ?? null;
+    }
+    /**
+     * Repositions the menu if it is open.
+     *
+     * Useful for the case where document or window-positioned menus have their
+     * anchors moved while open.
+     */
+    reposition() {
+        if (this.open) {
+            this.menuPositionController.position();
+        }
+    }
+}
+__decorate([
+    i$5('.menu')
+], Menu.prototype, "surfaceEl", void 0);
+__decorate([
+    i$5('slot')
+], Menu.prototype, "slotEl", void 0);
+__decorate([
+    n$7()
+], Menu.prototype, "anchor", void 0);
+__decorate([
+    n$7()
+], Menu.prototype, "positioning", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Menu.prototype, "quick", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-overflow' })
+], Menu.prototype, "hasOverflow", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Menu.prototype, "open", void 0);
+__decorate([
+    n$7({ type: Number, attribute: 'x-offset' })
+], Menu.prototype, "xOffset", void 0);
+__decorate([
+    n$7({ type: Number, attribute: 'y-offset' })
+], Menu.prototype, "yOffset", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-horizontal-flip' })
+], Menu.prototype, "noHorizontalFlip", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-vertical-flip' })
+], Menu.prototype, "noVerticalFlip", void 0);
+__decorate([
+    n$7({ type: Number, attribute: 'typeahead-delay' })
+], Menu.prototype, "typeaheadDelay", void 0);
+__decorate([
+    n$7({ attribute: 'anchor-corner' })
+], Menu.prototype, "anchorCorner", void 0);
+__decorate([
+    n$7({ attribute: 'menu-corner' })
+], Menu.prototype, "menuCorner", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'stay-open-on-outside-click' })
+], Menu.prototype, "stayOpenOnOutsideClick", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'stay-open-on-focusout' })
+], Menu.prototype, "stayOpenOnFocusout", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'skip-restore-focus' })
+], Menu.prototype, "skipRestoreFocus", void 0);
+__decorate([
+    n$7({ attribute: 'default-focus' })
+], Menu.prototype, "defaultFocus", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-navigation-wrap' })
+], Menu.prototype, "noNavigationWrap", void 0);
+__decorate([
+    l$5({ flatten: true })
+], Menu.prototype, "slotItems", void 0);
+__decorate([
+    t$3()
+], Menu.prototype, "typeaheadActive", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./menu/internal/menu-styles.css.
+const styles$4 = i$4 `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       id="anchor"
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
+ *   -->
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenu = class MdMenu extends Menu {
+};
+MdMenu.styles = [styles$4];
+MdMenu = __decorate([
+    e$a('md-menu')
+], MdMenu);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used to create a constraint validation `Validator`.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const createValidator = Symbol('createValidator');
+/**
+ * A symbol property used to return an anchor for constraint validation popups.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const getValidityAnchor = Symbol('getValidityAnchor');
+// Private symbol members, used to avoid name clashing.
+const privateValidator = Symbol('privateValidator');
+const privateSyncValidity = Symbol('privateSyncValidity');
+const privateCustomValidationMessage = Symbol('privateCustomValidationMessage');
+/**
+ * Mixes in constraint validation APIs for an element.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+ * for more details.
+ *
+ * Implementations must provide a validator to cache and compute its validity,
+ * along with a shadow root element to anchor validation popups to.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinConstraintValidation(
+ *   mixinFormAssociated(mixinElementInternals(LitElement))
+ * );
+ *
+ * class MyCheckbox extends baseClass {
+ *   \@property({type: Boolean}) checked = false;
+ *   \@property({type: Boolean}) required = false;
+ *
+ *   [createValidator]() {
+ *     return new CheckboxValidator(() => this);
+ *   }
+ *
+ *   [getValidityAnchor]() {
+ *     return this.renderRoot.querySelector('.root');
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `ConstraintValidation` mixed in.
+ */
+function mixinConstraintValidation(base) {
+    var _a;
+    class ConstraintValidationElement extends base {
+        constructor() {
+            super(...arguments);
+            /**
+             * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+             * Replace with this[internals].validity.customError when resolved.
+             */
+            this[_a] = '';
+        }
+        get validity() {
+            this[privateSyncValidity]();
+            return this[internals].validity;
+        }
+        get validationMessage() {
+            this[privateSyncValidity]();
+            return this[internals].validationMessage;
+        }
+        get willValidate() {
+            this[privateSyncValidity]();
+            return this[internals].willValidate;
+        }
+        checkValidity() {
+            this[privateSyncValidity]();
+            return this[internals].checkValidity();
+        }
+        reportValidity() {
+            this[privateSyncValidity]();
+            return this[internals].reportValidity();
+        }
+        setCustomValidity(error) {
+            this[privateCustomValidationMessage] = error;
+            this[privateSyncValidity]();
+        }
+        requestUpdate(name, oldValue, options) {
+            super.requestUpdate(name, oldValue, options);
+            this[privateSyncValidity]();
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            // Sync the validity again when the element first renders, since the
+            // validity anchor is now available.
+            //
+            // Elements that `delegatesFocus: true` to an `<input>` will throw an
+            // error in Chrome and Safari when a form tries to submit or call
+            // `form.reportValidity()`:
+            // "An invalid form control with name='' is not focusable"
+            //
+            // The validity anchor MUST be provided in `internals.setValidity()` and
+            // MUST be the `<input>` element rendered.
+            //
+            // See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde
+            // for a reproduction.
+            this[privateSyncValidity]();
+        }
+        [(_a = privateCustomValidationMessage, privateSyncValidity)]() {
+            if (!this[privateValidator]) {
+                this[privateValidator] = this[createValidator]();
+            }
+            const { validity, validationMessage: nonCustomValidationMessage } = this[privateValidator].getValidity();
+            const customError = !!this[privateCustomValidationMessage];
+            const validationMessage = this[privateCustomValidationMessage] || nonCustomValidationMessage;
+            this[internals].setValidity({ ...validity, customError }, validationMessage, this[getValidityAnchor]() ?? undefined);
+        }
+        [createValidator]() {
+            throw new Error('Implement [createValidator]');
+        }
+        [getValidityAnchor]() {
+            throw new Error('Implement [getValidityAnchor]');
+        }
+    }
+    return ConstraintValidationElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+const getFormValue = Symbol('getFormValue');
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+const getFormState = Symbol('getFormState');
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add
+ * values to `<form>` elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current
+ * value of the element, as well as reset and restore callbacks.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ * ```
+ *
+ * Elements may optionally provide a `[formState]` if their values do not
+ * represent the state of the component.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends base {
+ *   \@property()
+ *   value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ * ```
+ *
+ * IMPORTANT: Requires declares for lit-analyzer
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ * class MyControl extends base {
+ *   // Writable mixin properties for lit-html binding, needed for lit-analyzer
+ *   declare disabled: boolean;
+ *   declare name: string;
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into. The base class must use
+ *     `mixinElementInternals()`.
+ * @return The provided class with `FormAssociated` mixed in.
+ */
+function mixinFormAssociated(base) {
+    class FormAssociatedElement extends base {
+        get form() {
+            return this[internals].form;
+        }
+        get labels() {
+            return this[internals].labels;
+        }
+        // Use @property for the `name` and `disabled` properties to add them to the
+        // `observedAttributes` array and trigger `attributeChangedCallback()`.
+        //
+        // We don't use Lit's default getter/setter (`noAccessor: true`) because
+        // the attributes need to be updated synchronously to work with synchronous
+        // form APIs, and Lit updates attributes async by default.
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(name) {
+            // Note: setting name to null or empty does not remove the attribute.
+            this.setAttribute('name', name);
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
+        set disabled(disabled) {
+            this.toggleAttribute('disabled', disabled);
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        attributeChangedCallback(name, old, value) {
+            // Manually `requestUpdate()` for `name` and `disabled` when their
+            // attribute or property changes.
+            // The properties update their attributes, so this callback is invoked
+            // immediately when the properties are set. We call `requestUpdate()` here
+            // instead of letting Lit set the properties from the attribute change.
+            // That would cause the properties to re-set the attribute and invoke this
+            // callback again in a loop. This leads to stale state when Lit tries to
+            // determine if a property changed or not.
+            if (name === 'name' || name === 'disabled') {
+                // Disabled's value is only false if the attribute is missing and null.
+                const oldValue = name === 'disabled' ? old !== null : old;
+                // Trigger a lit update when the attribute changes.
+                this.requestUpdate(name, oldValue);
+                return;
+            }
+            super.attributeChangedCallback(name, old, value);
+        }
+        requestUpdate(name, oldValue, options) {
+            super.requestUpdate(name, oldValue, options);
+            // If any properties change, update the form value, which may have changed
+            // as well.
+            // Update the form value synchronously in `requestUpdate()` rather than
+            // `update()` or `updated()`, which are async. This is necessary to ensure
+            // that form data is updated in time for synchronous event listeners.
+            this[internals].setFormValue(this[getFormValue](), this[getFormState]());
+        }
+        [getFormValue]() {
+            // Closure does not allow abstract symbol members, so a default
+            // implementation is needed.
+            throw new Error('Implement [getFormValue]');
+        }
+        [getFormState]() {
+            return this[getFormValue]();
+        }
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+    }
+    /** @nocollapse */
+    FormAssociatedElement.formAssociated = true;
+    __decorate([
+        n$7({ noAccessor: true })
+    ], FormAssociatedElement.prototype, "name", null);
+    __decorate([
+        n$7({ type: Boolean, noAccessor: true })
+    ], FormAssociatedElement.prototype, "disabled", null);
+    return FormAssociatedElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used for a callback when validity has been reported.
+ */
+const onReportValidity = Symbol('onReportValidity');
+// Private symbol members, used to avoid name clashing.
+const privateCleanupFormListeners = Symbol('privateCleanupFormListeners');
+const privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');
+const privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity');
+const privateCallOnReportValidity = Symbol('privateCallOnReportValidity');
+/**
+ * Mixes in a callback for constraint validation when validity should be
+ * styled and reported to the user.
+ *
+ * This is commonly used in text-field-like controls that display error styles
+ * and error messages.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinOnReportValidity(
+ *   mixinConstraintValidation(
+ *     mixinFormAssociated(mixinElementInternals(LitElement)),
+ *   ),
+ * );
+ *
+ * class MyField extends baseClass {
+ *   \@property({type: Boolean}) error = false;
+ *   \@property() errorMessage = '';
+ *
+ *   [onReportValidity](invalidEvent: Event | null) {
+ *     this.error = !!invalidEvent;
+ *     this.errorMessage = this.validationMessage;
+ *
+ *     // Optionally prevent platform popup from displaying
+ *     invalidEvent?.preventDefault();
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `OnReportValidity` mixed in.
+ */
+function mixinOnReportValidity(base) {
+    var _a, _b, _c;
+    class OnReportValidityElement extends base {
+        // Mixins must have a constructor with `...args: any[]`
+        // tslint:disable-next-line:no-any
+        constructor(...args) {
+            super(...args);
+            /**
+             * Used to clean up event listeners when a new form is associated.
+             */
+            this[_a] = new AbortController();
+            /**
+             * Used to determine if an invalid event should report validity. Invalid
+             * events from `checkValidity()` do not trigger reporting.
+             */
+            this[_b] = false;
+            /**
+             * Used to determine if the control is reporting validity from itself, or
+             * if a `<form>` is causing the validity report. Forms have different
+             * control focusing behavior.
+             */
+            this[_c] = false;
+            this.addEventListener('invalid', (invalidEvent) => {
+                // Listen for invalid events dispatched by a `<form>` when it tries to
+                // submit and the element is invalid. We ignore events dispatched when
+                // calling `checkValidity()` as well as untrusted events, since the
+                // `reportValidity()` and `<form>`-dispatched events are always
+                // trusted.
+                if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {
+                    return;
+                }
+                this.addEventListener('invalid', () => {
+                    // A normal bubbling phase event listener. By adding it here, we
+                    // ensure it's the last event listener that is called during the
+                    // bubbling phase.
+                    this[privateCallOnReportValidity](invalidEvent);
+                }, { once: true });
+            }, {
+                // Listen during the capture phase, which will happen before the
+                // bubbling phase. That way, we can add a final event listener that
+                // will run after other event listeners, and we can check if it was
+                // default prevented. This works because invalid does not bubble.
+                capture: true,
+            });
+        }
+        checkValidity() {
+            this[privateDoNotReportInvalid] = true;
+            const valid = super.checkValidity();
+            this[privateDoNotReportInvalid] = false;
+            return valid;
+        }
+        reportValidity() {
+            this[privateIsSelfReportingValidity] = true;
+            const valid = super.reportValidity();
+            // Constructor's invalid listener will handle reporting invalid events.
+            if (valid) {
+                this[privateCallOnReportValidity](null);
+            }
+            this[privateIsSelfReportingValidity] = false;
+            return valid;
+        }
+        [(_a = privateCleanupFormListeners, _b = privateDoNotReportInvalid, _c = privateIsSelfReportingValidity, privateCallOnReportValidity)](invalidEvent) {
+            // Since invalid events do not bubble to parent listeners, and because
+            // our invalid listeners are added lazily after other listeners, we can
+            // reliably read `defaultPrevented` synchronously without worrying
+            // about waiting for another listener that could cancel it.
+            const wasCanceled = invalidEvent?.defaultPrevented;
+            if (wasCanceled) {
+                return;
+            }
+            this[onReportValidity](invalidEvent);
+            // If an implementation calls invalidEvent.preventDefault() to stop the
+            // platform popup from displaying, focusing is also prevented, so we need
+            // to manually focus.
+            const implementationCanceledFocus = !wasCanceled && invalidEvent?.defaultPrevented;
+            if (!implementationCanceledFocus) {
+                return;
+            }
+            // The control should be focused when:
+            // - `control.reportValidity()` is called (self-reporting).
+            // - a form is reporting validity for its controls and this is the first
+            //   invalid control.
+            if (this[privateIsSelfReportingValidity] ||
+                isFirstInvalidControlInForm(this[internals].form, this)) {
+                this.focus();
+            }
+        }
+        [onReportValidity](invalidEvent) {
+            throw new Error('Implement [onReportValidity]');
+        }
+        formAssociatedCallback(form) {
+            // can't use super.formAssociatedCallback?.() due to closure
+            if (super.formAssociatedCallback) {
+                super.formAssociatedCallback(form);
+            }
+            // Clean up previous form listeners.
+            this[privateCleanupFormListeners].abort();
+            if (!form) {
+                return;
+            }
+            this[privateCleanupFormListeners] = new AbortController();
+            // Add a listener that fires when the form runs constraint validation and
+            // the control is valid, so that it may remove its error styles.
+            //
+            // This happens on `form.reportValidity()` and `form.requestSubmit()`
+            // (both when the submit fails and passes).
+            addFormReportValidListener(this, form, () => {
+                this[privateCallOnReportValidity](null);
+            }, this[privateCleanupFormListeners].signal);
+        }
+    }
+    return OnReportValidityElement;
+}
+/**
+ * Add a listener that fires when a form runs constraint validation on a control
+ * and it is valid. This is needed to clear previously invalid styles.
+ *
+ * @param control The control of the form to listen for valid events.
+ * @param form The control's form that can run constraint validation.
+ * @param onControlValid A listener that is called when the form runs constraint
+ *     validation and the control is valid.
+ * @param cleanup A cleanup signal to remove the listener.
+ */
+function addFormReportValidListener(control, form, onControlValid, cleanup) {
+    const validateHooks = getFormValidateHooks(form);
+    // When a form validates its controls, check if an invalid event is dispatched
+    // on the control. If it is not, then inform the control to report its valid
+    // state.
+    let controlFiredInvalid = false;
+    let cleanupInvalidListener;
+    let isNextSubmitFromHook = false;
+    validateHooks.addEventListener('before', () => {
+        isNextSubmitFromHook = true;
+        cleanupInvalidListener = new AbortController();
+        controlFiredInvalid = false;
+        control.addEventListener('invalid', () => {
+            controlFiredInvalid = true;
+        }, {
+            signal: cleanupInvalidListener.signal,
+        });
+    }, { signal: cleanup });
+    validateHooks.addEventListener('after', () => {
+        isNextSubmitFromHook = false;
+        cleanupInvalidListener?.abort();
+        if (controlFiredInvalid) {
+            return;
+        }
+        onControlValid();
+    }, { signal: cleanup });
+    // The above hooks handle imperatively submitting the form, but not
+    // declaratively submitting the form. This happens when:
+    // 1. A non-custom element `<button type="submit">` is clicked.
+    // 2. Enter is pressed on a non-custom element text editable `<input>`.
+    form.addEventListener('submit', () => {
+        // This submit was from `form.requestSubmit()`, which already calls the
+        // listener.
+        if (isNextSubmitFromHook) {
+            return;
+        }
+        onControlValid();
+    }, {
+        signal: cleanup,
+    });
+    // Note: it is a known limitation that we cannot detect if a form tries to
+    // submit declaratively, but fails to do so because an unrelated sibling
+    // control failed its constraint validation.
+    //
+    // Since we cannot detect when that happens, a previously invalid control may
+    // not clear its error styling when it becomes valid again.
+    //
+    // To work around this, call `form.reportValidity()` when submitting a form
+    // declaratively. This can be down on the `<button type="submit">`'s click or
+    // the text editable `<input>`'s 'Enter' keydown.
+}
+const FORM_VALIDATE_HOOKS = new WeakMap();
+/**
+ * Get a hooks `EventTarget` that dispatches 'before' and 'after' events that
+ * fire before a form runs constraint validation and immediately after it
+ * finishes running constraint validation on its controls.
+ *
+ * This happens during `form.reportValidity()` and `form.requestSubmit()`.
+ *
+ * @param form The form to get or set up hooks for.
+ * @return A hooks `EventTarget` to add listeners to.
+ */
+function getFormValidateHooks(form) {
+    if (!FORM_VALIDATE_HOOKS.has(form)) {
+        // Patch form methods to add event listener hooks. These are needed to react
+        // to form behaviors that do not dispatch events, such as a form asking its
+        // controls to report their validity.
+        //
+        // We should only patch the methods once, since multiple controls and other
+        // forces may want to patch this method. We cannot reliably clean it up if
+        // there are multiple patched and re-patched methods referring holding
+        // references to each other.
+        //
+        // Instead, we never clean up the patch but add and clean up event listeners
+        // added to the hooks after the patch.
+        const hooks = new EventTarget();
+        FORM_VALIDATE_HOOKS.set(form, hooks);
+        // Add hooks to support notifying before and after a form has run constraint
+        // validation on its controls.
+        // Note: `form.submit()` does not run constraint validation per spec.
+        for (const methodName of ['reportValidity', 'requestSubmit']) {
+            const superMethod = form[methodName];
+            form[methodName] = function () {
+                hooks.dispatchEvent(new Event('before'));
+                const result = Reflect.apply(superMethod, this, arguments);
+                hooks.dispatchEvent(new Event('after'));
+                return result;
+            };
+        }
+    }
+    return FORM_VALIDATE_HOOKS.get(form);
+}
+/**
+ * Checks if a control is the first invalid control in a form.
+ *
+ * @param form The control's form. When `null`, the control doesn't have a form
+ *     and the method returns true.
+ * @param control The control to check.
+ * @return True if there is no form or if the control is the form's first
+ *     invalid control.
+ */
+function isFirstInvalidControlInForm(form, control) {
+    if (!form) {
+        return true;
+    }
+    let firstInvalidControl;
+    for (const element of form.elements) {
+        if (element.matches(':invalid')) {
+            firstInvalidControl = element;
+            break;
+        }
+    }
+    return firstInvalidControl === control;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A class that computes and caches `ValidityStateFlags` for a component with
+ * a given `State` interface.
+ *
+ * Cached performance before computing validity is important since constraint
+ * validation must be checked frequently and synchronously when properties
+ * change.
+ *
+ * @template State The expected interface of properties relevant to constraint
+ *     validation.
+ */
+class Validator {
+    /**
+     * Creates a new validator.
+     *
+     * @param getCurrentState A callback that returns the current state of
+     *     constraint validation-related properties.
+     */
+    constructor(getCurrentState) {
+        this.getCurrentState = getCurrentState;
+        /**
+         * The current validity state and message. This is cached and returns if
+         * constraint validation state does not change.
+         */
+        this.currentValidity = {
+            validity: {},
+            validationMessage: '',
+        };
+    }
+    /**
+     * Returns the current `ValidityStateFlags` and validation message for the
+     * validator.
+     *
+     * If the constraint validation state has not changed, this will return a
+     * cached result. This is important since `getValidity()` can be called
+     * frequently in response to synchronous property changes.
+     *
+     * @return The current validity and validation message.
+     */
+    getValidity() {
+        const state = this.getCurrentState();
+        const hasStateChanged = !this.prevState || !this.equals(this.prevState, state);
+        if (!hasStateChanged) {
+            return this.currentValidity;
+        }
+        const { validity, validationMessage } = this.computeValidity(state);
+        this.prevState = this.copy(state);
+        this.currentValidity = {
+            validationMessage,
+            validity: {
+                // Change any `ValidityState` instances into `ValidityStateFlags` since
+                // `ValidityState` cannot be easily `{...spread}`.
+                badInput: validity.badInput,
+                customError: validity.customError,
+                patternMismatch: validity.patternMismatch,
+                rangeOverflow: validity.rangeOverflow,
+                rangeUnderflow: validity.rangeUnderflow,
+                stepMismatch: validity.stepMismatch,
+                tooLong: validity.tooLong,
+                tooShort: validity.tooShort,
+                typeMismatch: validity.typeMismatch,
+                valueMissing: validity.valueMissing,
+            },
+        };
+        return this.currentValidity;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+class SelectValidator extends Validator {
+    computeValidity(state) {
+        if (!this.selectControl) {
+            // Lazily create the platform select
+            this.selectControl = document.createElement('select');
+        }
+        D(x `<option value=${state.value}></option>`, this.selectControl);
+        this.selectControl.value = state.value;
+        this.selectControl.required = state.required;
+        return {
+            validity: this.selectControl.validity,
+            validationMessage: this.selectControl.validationMessage,
+        };
+    }
+    equals(prev, next) {
+        return prev.value === next.value && prev.required === next.required;
+    }
+    copy({ value, required }) {
+        return { value, required };
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Given a list of select options, this function will return an array of
+ * SelectOptionRecords that are selected.
+ *
+ * @return An array of SelectOptionRecords describing the options that are
+ * selected.
+ */
+function getSelectedItems(items) {
+    const selectedItemRecords = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.selected) {
+            selectedItemRecords.push([item, i]);
+        }
+    }
+    return selectedItemRecords;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+const VALUE = Symbol('value');
+// Separate variable needed for closure.
+const selectBaseClass = mixinDelegatesAria(mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(s$2)))));
+/**
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ * @fires opening {Event} Fired when the select's menu is about to open.
+ * @fires opened {Event} Fired when the select's menu has finished animations
+ * and opened.
+ * @fires closing {Event} Fired when the select's menu is about to close.
+ * @fires closed {Event} Fired when the select's menu has finished animations
+ * and closed.
+ */
+class Select extends selectBaseClass {
+    /**
+     * The value of the currently selected option.
+     *
+     * Note: For SSR, set `[selected]` on the requested option and `displayText`
+     * rather than setting `value` setting `value` will incur a DOM query.
+     */
+    get value() {
+        return this[VALUE];
+    }
+    set value(value) {
+        this.lastUserSetValue = value;
+        this.select(value);
+    }
+    get options() {
+        // NOTE: this does a DOM query.
+        return (this.menu?.items ?? []);
+    }
+    /**
+     * The index of the currently selected option.
+     *
+     * Note: For SSR, set `[selected]` on the requested option and `displayText`
+     * rather than setting `selectedIndex` setting `selectedIndex` will incur a
+     * DOM query.
+     */
+    get selectedIndex() {
+        // tslint:disable-next-line:enforce-name-casing
+        const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];
+        return index ?? -1;
+    }
+    set selectedIndex(index) {
+        this.lastUserSetSelectedIndex = index;
+        this.selectIndex(index);
+    }
+    /**
+     * Returns an array of selected options.
+     *
+     * NOTE: md-select only supports single selection.
+     */
+    get selectedOptions() {
+        return (this.getSelectedOptions() ?? []).map(([option]) => option);
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
+    constructor() {
+        super();
+        /**
+         * Opens the menu synchronously with no animation.
+         */
+        this.quick = false;
+        /**
+         * Whether or not the select is required.
+         */
+        this.required = false;
+        /**
+         * The error message that replaces supporting text when `error` is true. If
+         * `errorText` is an empty string, then the supporting text will continue to
+         * show.
+         *
+         * This error message overrides the error message displayed by
+         * `reportValidity()`.
+         */
+        this.errorText = '';
+        /**
+         * The floating label for the field.
+         */
+        this.label = '';
+        /**
+         * Disables the asterisk on the floating label, when the select is
+         * required.
+         */
+        this.noAsterisk = false;
+        /**
+         * Conveys additional information below the select, such as how it should
+         * be used.
+         */
+        this.supportingText = '';
+        /**
+         * Gets or sets whether or not the select is in a visually invalid state.
+         *
+         * This error state overrides the error state controlled by
+         * `reportValidity()`.
+         */
+        this.error = false;
+        /**
+         * Whether or not the underlying md-menu should be position: fixed to display
+         * in a top-level manner, or position: absolute.
+         *
+         * position:fixed is useful for cases where select is inside of another
+         * element with stacking context and hidden overflows such as `md-dialog`.
+         */
+        this.menuPositioning = 'popover';
+        /**
+         * Clamps the menu-width to the width of the select.
+         */
+        this.clampMenuWidth = false;
+        /**
+         * The max time between the keystrokes of the typeahead select / menu behavior
+         * before it clears the typeahead buffer.
+         */
+        this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+        /**
+         * Whether or not the text field has a leading icon. Used for SSR.
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        /**
+         * Whether the menu should be aligned to the start or the end of the select's
+         * textbox.
+         */
+        this.menuAlign = 'start';
+        this[_a] = '';
+        /**
+         * Used for initializing select when the user sets the `value` directly.
+         */
+        this.lastUserSetValue = null;
+        /**
+         * Used for initializing select when the user sets the `selectedIndex`
+         * directly.
+         */
+        this.lastUserSetSelectedIndex = null;
+        /**
+         * Used for `input` and `change` event change detection.
+         */
+        this.lastSelectedOption = null;
+        // tslint:disable-next-line:enforce-name-casing
+        this.lastSelectedOptionRecords = [];
+        /**
+         * Whether or not a native error has been reported via `reportValidity()`.
+         */
+        this.nativeError = false;
+        /**
+         * The validation message displayed from a native error via
+         * `reportValidity()`.
+         */
+        this.nativeErrorText = '';
+        this.focused = false;
+        this.open = false;
+        this.defaultFocus = FocusState.NONE;
+        // Have to keep track of previous open because it's state and private and thus
+        // cannot be tracked in PropertyValues<this> map.
+        this.prevOpen = this.open;
+        this.selectWidth = 0;
+        this.addEventListener('focus', this.handleFocus.bind(this));
+        this.addEventListener('blur', this.handleBlur.bind(this));
+    }
+    /**
+     * Selects an option given the value of the option, and updates MdSelect's
+     * value.
+     */
+    select(value) {
+        const optionToSelect = this.options.find((option) => option.value === value);
+        if (optionToSelect) {
+            this.selectItem(optionToSelect);
+        }
+    }
+    /**
+     * Selects an option given the index of the option, and updates MdSelect's
+     * value.
+     */
+    selectIndex(index) {
+        const optionToSelect = this.options[index];
+        if (optionToSelect) {
+            this.selectItem(optionToSelect);
+        }
+    }
+    /**
+     * Reset the select to its default value.
+     */
+    reset() {
+        for (const option of this.options) {
+            option.selected = option.hasAttribute('selected');
+        }
+        this.updateValueAndDisplayText();
+        this.nativeError = false;
+        this.nativeErrorText = '';
+    }
+    /** Shows the picker. If it's already open, this is a no-op. */
+    showPicker() {
+        this.open = true;
+    }
+    [(_a = VALUE, onReportValidity)](invalidEvent) {
+        // Prevent default pop-up behavior.
+        invalidEvent?.preventDefault();
+        const prevMessage = this.getErrorText();
+        this.nativeError = !!invalidEvent;
+        this.nativeErrorText = this.validationMessage;
+        if (prevMessage === this.getErrorText()) {
+            this.field?.reannounceError();
+        }
+    }
+    update(changed) {
+        // In SSR the options will be ready to query, so try to figure out what
+        // the value and display text should be.
+        if (!this.hasUpdated) {
+            this.initUserSelection();
+        }
+        // We have just opened the menu.
+        // We are only able to check for the select's rect in `update()` instead of
+        // having to wait for `updated()` because the menu can never be open on
+        // first render since it is not settable and Lit SSR does not support click
+        // events which would open the menu.
+        if (this.prevOpen !== this.open && this.open) {
+            const selectRect = this.getBoundingClientRect();
+            this.selectWidth = selectRect.width;
+        }
+        this.prevOpen = this.open;
+        super.update(changed);
+    }
+    render() {
+        return x `
+      <span
+        class="select ${o$1(this.getRenderClasses())}"
+        @focusout=${this.handleFocusout}>
+        ${this.renderField()} ${this.renderMenu()}
+      </span>
+    `;
+    }
+    async firstUpdated(changed) {
+        await this.menu?.updateComplete;
+        // If this has been handled on update already due to SSR, try again.
+        if (!this.lastSelectedOptionRecords.length) {
+            this.initUserSelection();
+        }
+        // Case for when the DOM is streaming, there are no children, and a child
+        // has [selected] set on it, we need to wait for DOM to render something.
+        if (!this.lastSelectedOptionRecords.length &&
+            !o$2 &&
+            !this.options.length) {
+            setTimeout(() => {
+                this.updateValueAndDisplayText();
+            });
+        }
+        super.firstUpdated(changed);
+    }
+    getRenderClasses() {
+        return {
+            'disabled': this.disabled,
+            'error': this.error,
+            'open': this.open,
+        };
+    }
+    renderField() {
+        const ariaLabel = this.ariaLabel || this.label;
+        return n$1 `
+      <${this.fieldTag}
+          aria-haspopup="listbox"
+          role="combobox"
+          part="field"
+          id="field"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-label=${ariaLabel || A}
+          aria-describedby="description"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls="listbox"
+          class="field"
+          label=${this.label}
+          ?no-asterisk=${this.noAsterisk}
+          .focused=${this.focused || this.open}
+          .populated=${!!this.displayText}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .error=${this.hasError}
+          ?has-start=${this.hasLeadingIcon}
+          has-end
+          supporting-text=${this.supportingText}
+          error-text=${this.getErrorText()}
+          @keydown=${this.handleKeydown}
+          @click=${this.handleClick}>
+         ${this.renderFieldContent()}
+         <div id="description" slot="aria-describedby"></div>
+      </${this.fieldTag}>`;
+    }
+    renderFieldContent() {
+        return [
+            this.renderLeadingIcon(),
+            this.renderLabel(),
+            this.renderTrailingIcon(),
+        ];
+    }
+    renderLeadingIcon() {
+        return x `
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
+    }
+    renderTrailingIcon() {
+        return x `
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}>
+          <svg height="5" viewBox="7 10 10 5" focusable="false">
+            <polygon
+              class="down"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 10 12 15 17 10"></polygon>
+            <polygon
+              class="up"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 15 12 10 17 15"></polygon>
+          </svg>
+        </slot>
+      </span>
+    `;
+    }
+    renderLabel() {
+        // need to render &nbsp; so that line-height can apply and give it a
+        // non-zero height
+        return x `<div id="label">${this.displayText || x `&nbsp;`}</div>`;
+    }
+    renderMenu() {
+        const ariaLabel = this.label || this.ariaLabel;
+        return x `<div class="menu-wrapper">
+      <md-menu
+        id="listbox"
+        .defaultFocus=${this.defaultFocus}
+        role="listbox"
+        tabindex="-1"
+        aria-label=${ariaLabel || A}
+        stay-open-on-focusout
+        part="menu"
+        exportparts="focus-ring: menu-focus-ring"
+        anchor="field"
+        style=${o({
+            '--__menu-min-width': `${this.selectWidth}px`,
+            '--__menu-max-width': this.clampMenuWidth
+                ? `${this.selectWidth}px`
+                : undefined,
+        })}
+        no-navigation-wrap
+        .open=${this.open}
+        .quick=${this.quick}
+        .positioning=${this.menuPositioning}
+        .typeaheadDelay=${this.typeaheadDelay}
+        .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}
+        .menuCorner=${this.menuAlign === 'start' ? 'start-start' : 'start-end'}
+        @opening=${this.handleOpening}
+        @opened=${this.redispatchEvent}
+        @closing=${this.redispatchEvent}
+        @closed=${this.handleClosed}
+        @close-menu=${this.handleCloseMenu}
+        @request-selection=${this.handleRequestSelection}
+        @request-deselection=${this.handleRequestDeselection}>
+        ${this.renderMenuContent()}
+      </md-menu>
+    </div>`;
+    }
+    renderMenuContent() {
+        return x `<slot></slot>`;
+    }
+    /**
+     * Handles opening the select on keydown and typahead selection when the menu
+     * is closed.
+     */
+    handleKeydown(event) {
+        if (this.open || this.disabled || !this.menu) {
+            return;
+        }
+        const typeaheadController = this.menu.typeaheadController;
+        const isOpenKey = event.code === 'Space' ||
+            event.code === 'ArrowDown' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'End' ||
+            event.code === 'Home' ||
+            event.code === 'Enter';
+        // Do not open if currently typing ahead because the user may be typing the
+        // spacebar to match a word with a space
+        if (!typeaheadController.isTypingAhead && isOpenKey) {
+            event.preventDefault();
+            this.open = true;
+            // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label
+            switch (event.code) {
+                case 'Space':
+                case 'ArrowDown':
+                case 'Enter':
+                    // We will handle focusing last selected item in this.handleOpening()
+                    this.defaultFocus = FocusState.NONE;
+                    break;
+                case 'End':
+                    this.defaultFocus = FocusState.LAST_ITEM;
+                    break;
+                case 'ArrowUp':
+                case 'Home':
+                    this.defaultFocus = FocusState.FIRST_ITEM;
+                    break;
+            }
+            return;
+        }
+        const isPrintableKey = event.key.length === 1;
+        // Handles typing ahead when the menu is closed by delegating the event to
+        // the underlying menu's typeaheadController
+        if (isPrintableKey) {
+            typeaheadController.onKeydown(event);
+            event.preventDefault();
+            const { lastActiveRecord } = typeaheadController;
+            if (!lastActiveRecord) {
+                return;
+            }
+            this.labelEl?.setAttribute?.('aria-live', 'polite');
+            const hasChanged = this.selectItem(lastActiveRecord[TYPEAHEAD_RECORD.ITEM]);
+            if (hasChanged) {
+                this.dispatchInteractionEvents();
+            }
+        }
+    }
+    handleClick() {
+        this.open = !this.open;
+    }
+    handleFocus() {
+        this.focused = true;
+    }
+    handleBlur() {
+        this.focused = false;
+    }
+    /**
+     * Handles closing the menu when the focus leaves the select's subtree.
+     */
+    handleFocusout(event) {
+        // Don't close the menu if we are switching focus between menu,
+        // select-option, and field
+        if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) {
+            return;
+        }
+        this.open = false;
+    }
+    /**
+     * Gets a list of all selected select options as a list item record array.
+     *
+     * @return An array of selected list option records.
+     */
+    getSelectedOptions() {
+        if (!this.menu) {
+            this.lastSelectedOptionRecords = [];
+            return null;
+        }
+        const items = this.menu.items;
+        this.lastSelectedOptionRecords = getSelectedItems(items);
+        return this.lastSelectedOptionRecords;
+    }
+    async getUpdateComplete() {
+        await this.menu?.updateComplete;
+        return super.getUpdateComplete();
+    }
+    /**
+     * Gets the selected options from the DOM, and updates the value and display
+     * text to the first selected option's value and headline respectively.
+     *
+     * @return Whether or not the selected option has changed since last update.
+     */
+    updateValueAndDisplayText() {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        // Used to determine whether or not we need to fire an input / change event
+        // which fire whenever the option element changes (value or selectedIndex)
+        // on user interaction.
+        let hasSelectedOptionChanged = false;
+        if (selectedOptions.length) {
+            const [firstSelectedOption] = selectedOptions[0];
+            hasSelectedOptionChanged =
+                this.lastSelectedOption !== firstSelectedOption;
+            this.lastSelectedOption = firstSelectedOption;
+            this[VALUE] = firstSelectedOption.value;
+            this.displayText = firstSelectedOption.displayText;
+        }
+        else {
+            hasSelectedOptionChanged = this.lastSelectedOption !== null;
+            this.lastSelectedOption = null;
+            this[VALUE] = '';
+            this.displayText = '';
+        }
+        return hasSelectedOptionChanged;
+    }
+    /**
+     * Focuses and activates the last selected item upon opening, and resets other
+     * active items.
+     */
+    async handleOpening(e) {
+        this.labelEl?.removeAttribute?.('aria-live');
+        this.redispatchEvent(e);
+        // FocusState.NONE means we want to handle focus ourselves and focus the
+        // last selected item.
+        if (this.defaultFocus !== FocusState.NONE) {
+            return;
+        }
+        const items = this.menu.items;
+        const activeItem = getActiveItem(items)?.item;
+        let [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];
+        // This is true if the user keys through the list but clicks out of the menu
+        // thus no close-menu event is fired by an item and we can't clean up in
+        // handleCloseMenu.
+        if (activeItem && activeItem !== selectedItem) {
+            activeItem.tabIndex = -1;
+        }
+        // in the case that nothing is selected, focus the first item
+        selectedItem = selectedItem ?? items[0];
+        if (selectedItem) {
+            selectedItem.tabIndex = 0;
+            selectedItem.focus();
+        }
+    }
+    redispatchEvent(e) {
+        redispatchEvent(this, e);
+    }
+    handleClosed(e) {
+        this.open = false;
+        this.redispatchEvent(e);
+    }
+    /**
+     * Determines the reason for closing, and updates the UI accordingly.
+     */
+    handleCloseMenu(event) {
+        const reason = event.detail.reason;
+        const item = event.detail.itemPath[0];
+        this.open = false;
+        let hasChanged = false;
+        if (reason.kind === 'click-selection') {
+            hasChanged = this.selectItem(item);
+        }
+        else if (reason.kind === 'keydown' && isSelectableKey(reason.key)) {
+            hasChanged = this.selectItem(item);
+        }
+        else {
+            // This can happen on ESC being pressed
+            item.tabIndex = -1;
+            item.blur();
+        }
+        // Dispatch interaction events since selection has been made via keyboard
+        // or mouse.
+        if (hasChanged) {
+            this.dispatchInteractionEvents();
+        }
+    }
+    /**
+     * Selects a given option, deselects other options, and updates the UI.
+     *
+     * @return Whether the last selected option has changed.
+     */
+    selectItem(item) {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        selectedOptions.forEach(([option]) => {
+            if (item !== option) {
+                option.selected = false;
+            }
+        });
+        item.selected = true;
+        return this.updateValueAndDisplayText();
+    }
+    /**
+     * Handles updating selection when an option element requests selection via
+     * property / attribute change.
+     */
+    handleRequestSelection(event) {
+        const requestingOptionEl = event.target;
+        // No-op if this item is already selected.
+        if (this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
+            return;
+        }
+        this.selectItem(requestingOptionEl);
+    }
+    /**
+     * Handles updating selection when an option element requests deselection via
+     * property / attribute change.
+     */
+    handleRequestDeselection(event) {
+        const requestingOptionEl = event.target;
+        // No-op if this item is not even in the list of tracked selected items.
+        if (!this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
+            return;
+        }
+        this.updateValueAndDisplayText();
+    }
+    /**
+     * Attempts to initialize the selected option from user-settable values like
+     * SSR, setting `value`, or `selectedIndex` at startup.
+     */
+    initUserSelection() {
+        // User has set `.value` directly, but internals have not yet booted up.
+        if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
+            this.select(this.lastUserSetValue);
+            // User has set `.selectedIndex` directly, but internals have not yet
+            // booted up.
+        }
+        else if (this.lastUserSetSelectedIndex !== null &&
+            !this.lastSelectedOptionRecords.length) {
+            this.selectIndex(this.lastUserSetSelectedIndex);
+            // Regular boot up!
+        }
+        else {
+            this.updateValueAndDisplayText();
+        }
+    }
+    handleIconChange() {
+        this.hasLeadingIcon = this.leadingIcons.length > 0;
+    }
+    /**
+     * Dispatches the `input` and `change` events.
+     */
+    dispatchInteractionEvents() {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    getErrorText() {
+        return this.error ? this.errorText : this.nativeErrorText;
+    }
+    [getFormValue]() {
+        return this.value;
+    }
+    formResetCallback() {
+        this.reset();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    click() {
+        this.field?.click();
+    }
+    [createValidator]() {
+        return new SelectValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.field;
+    }
+}
+/** @nocollapse */
+Select.shadowRootOptions = {
+    ...s$2.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ type: Boolean })
+], Select.prototype, "quick", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Select.prototype, "required", void 0);
+__decorate([
+    n$7({ type: String, attribute: 'error-text' })
+], Select.prototype, "errorText", void 0);
+__decorate([
+    n$7()
+], Select.prototype, "label", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-asterisk' })
+], Select.prototype, "noAsterisk", void 0);
+__decorate([
+    n$7({ type: String, attribute: 'supporting-text' })
+], Select.prototype, "supportingText", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Select.prototype, "error", void 0);
+__decorate([
+    n$7({ attribute: 'menu-positioning' })
+], Select.prototype, "menuPositioning", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'clamp-menu-width' })
+], Select.prototype, "clampMenuWidth", void 0);
+__decorate([
+    n$7({ type: Number, attribute: 'typeahead-delay' })
+], Select.prototype, "typeaheadDelay", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-leading-icon' })
+], Select.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    n$7({ attribute: 'display-text' })
+], Select.prototype, "displayText", void 0);
+__decorate([
+    n$7({ attribute: 'menu-align' })
+], Select.prototype, "menuAlign", void 0);
+__decorate([
+    n$7()
+], Select.prototype, "value", null);
+__decorate([
+    n$7({ type: Number, attribute: 'selected-index' })
+], Select.prototype, "selectedIndex", null);
+__decorate([
+    t$3()
+], Select.prototype, "nativeError", void 0);
+__decorate([
+    t$3()
+], Select.prototype, "nativeErrorText", void 0);
+__decorate([
+    t$3()
+], Select.prototype, "focused", void 0);
+__decorate([
+    t$3()
+], Select.prototype, "open", void 0);
+__decorate([
+    t$3()
+], Select.prototype, "defaultFocus", void 0);
+__decorate([
+    i$5('.field')
+], Select.prototype, "field", void 0);
+__decorate([
+    i$5('md-menu')
+], Select.prototype, "menu", void 0);
+__decorate([
+    i$5('#label')
+], Select.prototype, "labelEl", void 0);
+__decorate([
+    l$5({ slot: 'leading-icon', flatten: true })
+], Select.prototype, "leadingIcons", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./select/internal/shared-styles.css.
+const styles$3 = i$4 `:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu{min-width:var(--__menu-min-width);max-width:var(--__menu-max-width, inherit)}.menu-wrapper{width:0px;height:0px;max-width:inherit}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A divider component.
+ */
+class Divider extends s$2 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indents the divider with equal padding on both sides.
+         */
+        this.inset = false;
+        /**
+         * Indents the divider with padding on the leading side.
+         */
+        this.insetStart = false;
+        /**
+         * Indents the divider with padding on the trailing side.
+         */
+        this.insetEnd = false;
+    }
+}
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Divider.prototype, "inset", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true, attribute: 'inset-start' })
+], Divider.prototype, "insetStart", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true, attribute: 'inset-end' })
+], Divider.prototype, "insetEnd", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./divider/internal/divider-styles.css.
+const styles$2 = i$4 `:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary A divider is a thin line that groups content in lists and
+ * containers.
+ *
+ * @description Dividers can reinforce tapability, such as when used to separate
+ * list items or define tappable regions in an accordion.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdDivider = class MdDivider extends Divider {
+};
+MdDivider.styles = [styles$2];
+MdDivider = __decorate([
+    e$a('md-divider')
+], MdDivider);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A property symbol that indicates whether or not a `Focusable` element can be
+ * focused.
+ */
+const isFocusable = Symbol('isFocusable');
+const privateIsFocusable = Symbol('privateIsFocusable');
+const externalTabIndex = Symbol('externalTabIndex');
+const isUpdatingTabIndex = Symbol('isUpdatingTabIndex');
+const updateTabIndex = Symbol('updateTabIndex');
+/**
+ * Mixes in focusable functionality for a class.
+ *
+ * Elements can enable and disable their focusability with the `isFocusable`
+ * symbol property. Changing `tabIndex` will trigger a lit render, meaning
+ * `this.tabIndex` can be used in template expressions.
+ *
+ * This mixin will preserve externally-set tabindices. If an element turns off
+ * focusability, but a user sets `tabindex="0"`, it will still be focusable.
+ *
+ * To remove user overrides and restore focusability control to the element,
+ * remove the `tabindex` attribute.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `Focusable` mixed in.
+ */
+function mixinFocusable(base) {
+    var _a, _b, _c;
+    class FocusableElement extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = true;
+            this[_b] = null;
+            this[_c] = false;
+        }
+        get [isFocusable]() {
+            return this[privateIsFocusable];
+        }
+        set [isFocusable](value) {
+            if (this[isFocusable] === value) {
+                return;
+            }
+            this[privateIsFocusable] = value;
+            this[updateTabIndex]();
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this[updateTabIndex]();
+        }
+        attributeChangedCallback(name, old, value) {
+            if (name !== 'tabindex') {
+                super.attributeChangedCallback(name, old, value);
+                return;
+            }
+            this.requestUpdate('tabIndex', Number(old ?? -1));
+            if (this[isUpdatingTabIndex]) {
+                // Not an externally-initiated update.
+                return;
+            }
+            if (!this.hasAttribute('tabindex')) {
+                // User removed the attribute, can now use internal tabIndex
+                this[externalTabIndex] = null;
+                this[updateTabIndex]();
+                return;
+            }
+            this[externalTabIndex] = this.tabIndex;
+        }
+        [(_a = privateIsFocusable, _b = externalTabIndex, _c = isUpdatingTabIndex, updateTabIndex)]() {
+            const internalTabIndex = this[isFocusable] ? 0 : -1;
+            const computedTabIndex = this[externalTabIndex] ?? internalTabIndex;
+            this[isUpdatingTabIndex] = true;
+            this.tabIndex = computedTabIndex;
+            this[isUpdatingTabIndex] = false;
+        }
+    }
+    __decorate([
+        n$7({ noAccessor: true })
+    ], FocusableElement.prototype, "tabIndex", void 0);
+    return FocusableElement;
+}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=o=>void 0===o.strings,s={},a=(o,l=s)=>o._$AH=l;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const l=e$2(class extends i$2{constructor(r){if(super(r),r.type!==t.PROPERTY&&r.type!==t.ATTRIBUTE&&r.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!e(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===T||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return T}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return T}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return T;return a(i),t$1}});
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const stringConverter = {
+    fromAttribute(value) {
+        return value ?? '';
+    },
+    toAttribute(value) {
+        return value || null;
+    },
+};
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates `<input>` and
+ * `<textarea>` validation.
+ */
+class TextFieldValidator extends Validator {
+    computeValidity({ state, renderedControl }) {
+        let inputOrTextArea = renderedControl;
+        if (isInputState(state) && !inputOrTextArea) {
+            // Get cached <input> or create it.
+            inputOrTextArea = this.inputControl || document.createElement('input');
+            // Cache the <input> to re-use it next time.
+            this.inputControl = inputOrTextArea;
+        }
+        else if (!inputOrTextArea) {
+            // Get cached <textarea> or create it.
+            inputOrTextArea =
+                this.textAreaControl || document.createElement('textarea');
+            // Cache the <textarea> to re-use it next time.
+            this.textAreaControl = inputOrTextArea;
+        }
+        // Set this variable so we can check it for input-specific properties.
+        const input = isInputState(state)
+            ? inputOrTextArea
+            : null;
+        // Set input's "type" first, since this can change the other properties
+        if (input) {
+            input.type = state.type;
+        }
+        if (inputOrTextArea.value !== state.value) {
+            // Only programmatically set the value if there's a difference. When using
+            // the rendered control, the value will always be up to date. Setting the
+            // property (even if it's the same string) will reset the internal <input>
+            // dirty flag, making minlength and maxlength validation reset.
+            inputOrTextArea.value = state.value;
+        }
+        inputOrTextArea.required = state.required;
+        // The following IDLAttribute properties will always hydrate an attribute,
+        // even if set to a the default value ('' or -1). The presence of the
+        // attribute triggers constraint validation, so we must remove the attribute
+        // when empty.
+        if (input) {
+            const inputState = state;
+            if (inputState.pattern) {
+                input.pattern = inputState.pattern;
+            }
+            else {
+                input.removeAttribute('pattern');
+            }
+            if (inputState.min) {
+                input.min = inputState.min;
+            }
+            else {
+                input.removeAttribute('min');
+            }
+            if (inputState.max) {
+                input.max = inputState.max;
+            }
+            else {
+                input.removeAttribute('max');
+            }
+            if (inputState.step) {
+                input.step = inputState.step;
+            }
+            else {
+                input.removeAttribute('step');
+            }
+        }
+        // Use -1 to represent no minlength and maxlength, which is what the
+        // platform input returns. However, it will throw an error if you try to
+        // manually set it to -1.
+        //
+        // While the type is `number`, it may actually be `null` at runtime.
+        // `null > -1` is true since `null` coerces to `0`, so we default null and
+        // undefined to -1.
+        //
+        // We set attributes instead of properties since setting a property may
+        // throw an out of bounds error in relation to the other property.
+        // Attributes will not throw errors while the state is updating.
+        if ((state.minLength ?? -1) > -1) {
+            inputOrTextArea.setAttribute('minlength', String(state.minLength));
+        }
+        else {
+            inputOrTextArea.removeAttribute('minlength');
+        }
+        if ((state.maxLength ?? -1) > -1) {
+            inputOrTextArea.setAttribute('maxlength', String(state.maxLength));
+        }
+        else {
+            inputOrTextArea.removeAttribute('maxlength');
+        }
+        return {
+            validity: inputOrTextArea.validity,
+            validationMessage: inputOrTextArea.validationMessage,
+        };
+    }
+    equals({ state: prev }, { state: next }) {
+        // Check shared input and textarea properties
+        const inputOrTextAreaEqual = prev.type === next.type &&
+            prev.value === next.value &&
+            prev.required === next.required &&
+            prev.minLength === next.minLength &&
+            prev.maxLength === next.maxLength;
+        if (!isInputState(prev) || !isInputState(next)) {
+            // Both are textareas, all relevant properties are equal.
+            return inputOrTextAreaEqual;
+        }
+        // Check additional input-specific properties.
+        return (inputOrTextAreaEqual &&
+            prev.pattern === next.pattern &&
+            prev.min === next.min &&
+            prev.max === next.max &&
+            prev.step === next.step);
+    }
+    copy({ state }) {
+        // Don't hold a reference to the rendered control when copying since we
+        // don't use it when checking if the state changed.
+        return {
+            state: isInputState(state)
+                ? this.copyInput(state)
+                : this.copyTextArea(state),
+            renderedControl: null,
+        };
+    }
+    copyInput(state) {
+        const { type, pattern, min, max, step } = state;
+        return {
+            ...this.copySharedState(state),
+            type,
+            pattern,
+            min,
+            max,
+            step,
+        };
+    }
+    copyTextArea(state) {
+        return {
+            ...this.copySharedState(state),
+            type: state.type,
+        };
+    }
+    copySharedState({ value, required, minLength, maxLength, }) {
+        return { value, required, minLength, maxLength };
+    }
+}
+function isInputState(state) {
+    return state.type !== 'textarea';
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const textFieldBaseClass = mixinDelegatesAria(mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(s$2)))));
+/**
+ * A text field component.
+ *
+ * @fires select {Event} The native `select` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)
+ * --bubbles
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ */
+class TextField extends textFieldBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Gets or sets whether or not the text field is in a visually invalid state.
+         *
+         * This error state overrides the error state controlled by
+         * `reportValidity()`.
+         */
+        this.error = false;
+        /**
+         * The error message that replaces supporting text when `error` is true. If
+         * `errorText` is an empty string, then the supporting text will continue to
+         * show.
+         *
+         * This error message overrides the error message displayed by
+         * `reportValidity()`.
+         */
+        this.errorText = '';
+        /**
+         * The floating Material label of the textfield component. It informs the user
+         * about what information is requested for a text field. It is aligned with
+         * the input text, is always visible, and it floats when focused or when text
+         * is entered into the textfield. This label also sets accessibilty labels,
+         * but the accessible label is overriden by `aria-label`.
+         *
+         * Learn more about floating labels from the Material Design guidelines:
+         * https://m3.material.io/components/text-fields/guidelines
+         */
+        this.label = '';
+        /**
+         * Disables the asterisk on the floating label, when the text field is
+         * required.
+         */
+        this.noAsterisk = false;
+        /**
+         * Indicates that the user must specify a value for the input before the
+         * owning form can be submitted and will render an error state when
+         * `reportValidity()` is invoked when value is empty. Additionally the
+         * floating label will render an asterisk `"*"` when true.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+         */
+        this.required = false;
+        /**
+         * The current value of the text field. It is always a string.
+         */
+        this.value = '';
+        /**
+         * An optional prefix to display before the input value.
+         */
+        this.prefixText = '';
+        /**
+         * An optional suffix to display after the input value.
+         */
+        this.suffixText = '';
+        /**
+         * Whether or not the text field has a leading icon. Used for SSR.
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Whether or not the text field has a trailing icon. Used for SSR.
+         */
+        this.hasTrailingIcon = false;
+        /**
+         * Conveys additional information below the text field, such as how it should
+         * be used.
+         */
+        this.supportingText = '';
+        /**
+         * Override the input text CSS `direction`. Useful for RTL languages that use
+         * LTR notation for fractions.
+         */
+        this.textDirection = '';
+        /**
+         * The number of rows to display for a `type="textarea"` text field.
+         * Defaults to 2.
+         */
+        this.rows = 2;
+        /**
+         * The number of cols to display for a `type="textarea"` text field.
+         * Defaults to 20.
+         */
+        this.cols = 20;
+        // <input> properties
+        this.inputMode = '';
+        /**
+         * Defines the greatest value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+         */
+        this.max = '';
+        /**
+         * The maximum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+         */
+        this.maxLength = -1;
+        /**
+         * Defines the most negative value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+         */
+        this.min = '';
+        /**
+         * The minimum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+         */
+        this.minLength = -1;
+        /**
+         * When true, hide the spinner for `type="number"` text fields.
+         */
+        this.noSpinner = false;
+        /**
+         * A regular expression that the text field's value must match to pass
+         * constraint validation.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+         */
+        this.pattern = '';
+        /**
+         * Defines the text displayed in the textfield when it has no value. Provides
+         * a brief hint to the user as to the expected type of data that should be
+         * entered into the control. Unlike `label`, the placeholder is not visible
+         * and does not float when the textfield has a value.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Indicates whether or not a user should be able to edit the text field's
+         * value.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+         */
+        this.readOnly = false;
+        /**
+         * Indicates that input accepts multiple email addresses.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
+         */
+        this.multiple = false;
+        /**
+         * Returns or sets the element's step attribute, which works with min and max
+         * to limit the increments at which a numeric or date-time value can be set.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+         */
+        this.step = '';
+        /**
+         * The `<input>` type to use, defaults to "text". The type greatly changes how
+         * the text field behaves.
+         *
+         * Text fields support a limited number of `<input>` types:
+         *
+         * - text
+         * - textarea
+         * - email
+         * - number
+         * - password
+         * - search
+         * - tel
+         * - url
+         *
+         * See
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+         * for more details on each input type.
+         */
+        this.type = 'text';
+        /**
+         * Describes what, if any, type of autocomplete functionality the input
+         * should provide.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+         */
+        this.autocomplete = '';
+        /**
+         * Returns true when the text field has been interacted with. Native
+         * validation errors only display in response to user interactions.
+         */
+        this.dirty = false;
+        this.focused = false;
+        /**
+         * Whether or not a native error has been reported via `reportValidity()`.
+         */
+        this.nativeError = false;
+        /**
+         * The validation message displayed from a native error via
+         * `reportValidity()`.
+         */
+        this.nativeErrorText = '';
+    }
+    /**
+     * Gets or sets the direction in which selection occurred.
+     */
+    get selectionDirection() {
+        return this.getInputOrTextarea().selectionDirection;
+    }
+    set selectionDirection(value) {
+        this.getInputOrTextarea().selectionDirection = value;
+    }
+    /**
+     * Gets or sets the end position or offset of a text selection.
+     */
+    get selectionEnd() {
+        return this.getInputOrTextarea().selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.getInputOrTextarea().selectionEnd = value;
+    }
+    /**
+     * Gets or sets the starting position or offset of a text selection.
+     */
+    get selectionStart() {
+        return this.getInputOrTextarea().selectionStart;
+    }
+    set selectionStart(value) {
+        this.getInputOrTextarea().selectionStart = value;
+    }
+    /**
+     * The text field's value as a number.
+     */
+    get valueAsNumber() {
+        const input = this.getInput();
+        if (!input) {
+            return NaN;
+        }
+        return input.valueAsNumber;
+    }
+    set valueAsNumber(value) {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.valueAsNumber = value;
+        this.value = input.value;
+    }
+    /**
+     * The text field's value as a Date.
+     */
+    get valueAsDate() {
+        const input = this.getInput();
+        if (!input) {
+            return null;
+        }
+        return input.valueAsDate;
+    }
+    set valueAsDate(value) {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.valueAsDate = value;
+        this.value = input.value;
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
+    /**
+     * Selects all the text in the text field.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
+     */
+    select() {
+        this.getInputOrTextarea().select();
+    }
+    setRangeText(...args) {
+        // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
+        // Use spread syntax and type casting to ensure correct usage.
+        this.getInputOrTextarea().setRangeText(...args);
+        this.value = this.getInputOrTextarea().value;
+    }
+    /**
+     * Sets the start and end positions of a selection in the text field.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+     *
+     * @param start The offset into the text field for the start of the selection.
+     * @param end The offset into the text field for the end of the selection.
+     * @param direction The direction in which the selection is performed.
+     */
+    setSelectionRange(start, end, direction) {
+        this.getInputOrTextarea().setSelectionRange(start, end, direction);
+    }
+    /**
+     * Shows the browser picker for an input element of type "date", "time", etc.
+     *
+     * For a full list of supported types, see:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+     */
+    showPicker() {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.showPicker();
+    }
+    /**
+     * Decrements the value of a numeric type text field by `step` or `n` `step`
+     * number of times.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
+     *
+     * @param stepDecrement The number of steps to decrement, defaults to 1.
+     */
+    stepDown(stepDecrement) {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.stepDown(stepDecrement);
+        this.value = input.value;
+    }
+    /**
+     * Increments the value of a numeric type text field by `step` or `n` `step`
+     * number of times.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
+     *
+     * @param stepIncrement The number of steps to increment, defaults to 1.
+     */
+    stepUp(stepIncrement) {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.stepUp(stepIncrement);
+        this.value = input.value;
+    }
+    /**
+     * Reset the text field to its default value.
+     */
+    reset() {
+        this.dirty = false;
+        this.value = this.getAttribute('value') ?? '';
+        this.nativeError = false;
+        this.nativeErrorText = '';
+    }
+    attributeChangedCallback(attribute, newValue, oldValue) {
+        if (attribute === 'value' && this.dirty) {
+            // After user input, changing the value attribute no longer updates the
+            // text field's value (until reset). This matches native <input> behavior.
+            return;
+        }
+        super.attributeChangedCallback(attribute, newValue, oldValue);
+    }
+    render() {
+        const classes = {
+            'disabled': this.disabled,
+            'error': !this.disabled && this.hasError,
+            'textarea': this.type === 'textarea',
+            'no-spinner': this.noSpinner,
+        };
+        return x `
+      <span class="text-field ${o$1(classes)}">
+        ${this.renderField()}
+      </span>
+    `;
+    }
+    updated(changedProperties) {
+        // Keep changedProperties arg so that subclasses may call it
+        // If a property such as `type` changes and causes the internal <input>
+        // value to change without dispatching an event, re-sync it.
+        const value = this.getInputOrTextarea().value;
+        if (this.value !== value) {
+            // Note this is typically inefficient in updated() since it schedules
+            // another update. However, it is needed for the <input> to fully render
+            // before checking its value.
+            this.value = value;
+        }
+    }
+    renderField() {
+        return n$1 `<${this.fieldTag}
+      class="field"
+      count=${this.value.length}
+      ?disabled=${this.disabled}
+      ?error=${this.hasError}
+      error-text=${this.getErrorText()}
+      ?focused=${this.focused}
+      ?has-end=${this.hasTrailingIcon}
+      ?has-start=${this.hasLeadingIcon}
+      label=${this.label}
+      ?no-asterisk=${this.noAsterisk}
+      max=${this.maxLength}
+      ?populated=${!!this.value}
+      ?required=${this.required}
+      ?resizable=${this.type === 'textarea'}
+      supporting-text=${this.supportingText}
+    >
+      ${this.renderLeadingIcon()}
+      ${this.renderInputOrTextarea()}
+      ${this.renderTrailingIcon()}
+      <div id="description" slot="aria-describedby"></div>
+      <slot name="container" slot="container"></slot>
+    </${this.fieldTag}>`;
+    }
+    renderLeadingIcon() {
+        return x `
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
+    }
+    renderTrailingIcon() {
+        return x `
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
+    }
+    renderInputOrTextarea() {
+        const style = { 'direction': this.textDirection };
+        const ariaLabel = this.ariaLabel || this.label || A;
+        // lit-anaylzer `autocomplete` types are too strict
+        // tslint:disable-next-line:no-any
+        const autocomplete = this.autocomplete;
+        // These properties may be set to null if the attribute is removed, and
+        // `null > -1` is incorrectly `true`.
+        const hasMaxLength = (this.maxLength ?? -1) > -1;
+        const hasMinLength = (this.minLength ?? -1) > -1;
+        if (this.type === 'textarea') {
+            return x `
+        <textarea
+          class="input"
+          style=${o(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          autocomplete=${autocomplete || A}
+          name=${this.name || A}
+          ?disabled=${this.disabled}
+          maxlength=${hasMaxLength ? this.maxLength : A}
+          minlength=${hasMinLength ? this.minLength : A}
+          placeholder=${this.placeholder || A}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          rows=${this.rows}
+          cols=${this.cols}
+          .value=${l(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent}></textarea>
+      `;
+        }
+        const prefix = this.renderPrefix();
+        const suffix = this.renderSuffix();
+        // TODO(b/243805848): remove `as unknown as number` and `as any` once lit
+        // analyzer is fixed
+        // tslint:disable-next-line:no-any
+        const inputMode = this.inputMode;
+        return x `
+      <div class="input-wrapper">
+        ${prefix}
+        <input
+          class="input"
+          style=${o(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          autocomplete=${autocomplete || A}
+          name=${this.name || A}
+          ?disabled=${this.disabled}
+          inputmode=${inputMode || A}
+          max=${(this.max || A)}
+          maxlength=${hasMaxLength ? this.maxLength : A}
+          min=${(this.min || A)}
+          minlength=${hasMinLength ? this.minLength : A}
+          pattern=${this.pattern || A}
+          placeholder=${this.placeholder || A}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          ?multiple=${this.multiple}
+          step=${(this.step || A)}
+          type=${this.type}
+          .value=${l(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent} />
+        ${suffix}
+      </div>
+    `;
+    }
+    renderPrefix() {
+        return this.renderAffix(this.prefixText, /* isSuffix */ false);
+    }
+    renderSuffix() {
+        return this.renderAffix(this.suffixText, /* isSuffix */ true);
+    }
+    renderAffix(text, isSuffix) {
+        if (!text) {
+            return A;
+        }
+        const classes = {
+            'suffix': isSuffix,
+            'prefix': !isSuffix,
+        };
+        return x `<span class="${o$1(classes)}">${text}</span>`;
+    }
+    getErrorText() {
+        return this.error ? this.errorText : this.nativeErrorText;
+    }
+    handleFocusChange() {
+        // When calling focus() or reportValidity() during change, it's possible
+        // for blur to be called after the new focus event. Rather than set
+        // `this.focused` to true/false on focus/blur, we always set it to whether
+        // or not the input itself is focused.
+        this.focused = this.inputOrTextarea?.matches(':focus') ?? false;
+    }
+    handleInput(event) {
+        this.dirty = true;
+        this.value = event.target.value;
+    }
+    redispatchEvent(event) {
+        redispatchEvent(this, event);
+    }
+    getInputOrTextarea() {
+        if (!this.inputOrTextarea) {
+            // If the input is not yet defined, synchronously render.
+            // e.g.
+            // const textField = document.createElement('md-outlined-text-field');
+            // document.body.appendChild(textField);
+            // textField.focus(); // synchronously render
+            this.connectedCallback();
+            this.scheduleUpdate();
+        }
+        if (this.isUpdatePending) {
+            // If there are pending updates, synchronously perform them. This ensures
+            // that constraint validation properties (like `required`) are synced
+            // before interacting with input APIs that depend on them.
+            this.scheduleUpdate();
+        }
+        return this.inputOrTextarea;
+    }
+    getInput() {
+        if (this.type === 'textarea') {
+            return null;
+        }
+        return this.getInputOrTextarea();
+    }
+    handleIconChange() {
+        this.hasLeadingIcon = this.leadingIcons.length > 0;
+        this.hasTrailingIcon = this.trailingIcons.length > 0;
+    }
+    [getFormValue]() {
+        return this.value;
+    }
+    formResetCallback() {
+        this.reset();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    focus() {
+        // Required for the case that the user slots a focusable element into the
+        // leading icon slot such as an iconbutton due to how delegatesFocus works.
+        this.getInputOrTextarea().focus();
+    }
+    [createValidator]() {
+        return new TextFieldValidator(() => ({
+            state: this,
+            renderedControl: this.inputOrTextarea,
+        }));
+    }
+    [getValidityAnchor]() {
+        return this.inputOrTextarea;
+    }
+    [onReportValidity](invalidEvent) {
+        // Prevent default pop-up behavior.
+        invalidEvent?.preventDefault();
+        const prevMessage = this.getErrorText();
+        this.nativeError = !!invalidEvent;
+        this.nativeErrorText = this.validationMessage;
+        if (prevMessage === this.getErrorText()) {
+            this.field?.reannounceError();
+        }
+    }
+}
+/** @nocollapse */
+TextField.shadowRootOptions = {
+    ...s$2.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], TextField.prototype, "error", void 0);
+__decorate([
+    n$7({ attribute: 'error-text' })
+], TextField.prototype, "errorText", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "label", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-asterisk' })
+], TextField.prototype, "noAsterisk", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], TextField.prototype, "required", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "value", void 0);
+__decorate([
+    n$7({ attribute: 'prefix-text' })
+], TextField.prototype, "prefixText", void 0);
+__decorate([
+    n$7({ attribute: 'suffix-text' })
+], TextField.prototype, "suffixText", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-leading-icon' })
+], TextField.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'has-trailing-icon' })
+], TextField.prototype, "hasTrailingIcon", void 0);
+__decorate([
+    n$7({ attribute: 'supporting-text' })
+], TextField.prototype, "supportingText", void 0);
+__decorate([
+    n$7({ attribute: 'text-direction' })
+], TextField.prototype, "textDirection", void 0);
+__decorate([
+    n$7({ type: Number })
+], TextField.prototype, "rows", void 0);
+__decorate([
+    n$7({ type: Number })
+], TextField.prototype, "cols", void 0);
+__decorate([
+    n$7({ reflect: true })
+], TextField.prototype, "inputMode", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "max", void 0);
+__decorate([
+    n$7({ type: Number })
+], TextField.prototype, "maxLength", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "min", void 0);
+__decorate([
+    n$7({ type: Number })
+], TextField.prototype, "minLength", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'no-spinner' })
+], TextField.prototype, "noSpinner", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "pattern", void 0);
+__decorate([
+    n$7({ reflect: true, converter: stringConverter })
+], TextField.prototype, "placeholder", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], TextField.prototype, "readOnly", void 0);
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], TextField.prototype, "multiple", void 0);
+__decorate([
+    n$7()
+], TextField.prototype, "step", void 0);
+__decorate([
+    n$7({ reflect: true })
+], TextField.prototype, "type", void 0);
+__decorate([
+    n$7({ reflect: true })
+], TextField.prototype, "autocomplete", void 0);
+__decorate([
+    t$3()
+], TextField.prototype, "dirty", void 0);
+__decorate([
+    t$3()
+], TextField.prototype, "focused", void 0);
+__decorate([
+    t$3()
+], TextField.prototype, "nativeError", void 0);
+__decorate([
+    t$3()
+], TextField.prototype, "nativeErrorText", void 0);
+__decorate([
+    i$5('.input')
+], TextField.prototype, "inputOrTextarea", void 0);
+__decorate([
+    i$5('.field')
+], TextField.prototype, "field", void 0);
+__decorate([
+    l$5({ slot: 'leading-icon' })
+], TextField.prototype, "leadingIcons", void 0);
+__decorate([
+    l$5({ slot: 'trailing-icon' })
+], TextField.prototype, "trailingIcons", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./textfield/internal/shared-styles.css.
+const styles$1 = i$4 `:host{display:inline-flex;outline:none;resize:both;text-align:start;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field,.field{width:100%}.text-field{display:inline-flex}.field{cursor:text}.disabled .field{cursor:default}.text-field,.textarea .field{resize:inherit}slot[name=container]{border-radius:inherit}.icon{color:currentColor;display:flex;align-items:center;justify-content:center;fill:currentColor;position:relative}.icon ::slotted(*){display:flex;position:absolute}[has-start] .icon.leading{font-size:var(--_leading-icon-size);height:var(--_leading-icon-size);width:var(--_leading-icon-size)}[has-end] .icon.trailing{font-size:var(--_trailing-icon-size);height:var(--_trailing-icon-size);width:var(--_trailing-icon-size)}.input-wrapper{display:flex}.input-wrapper>*{all:inherit;padding:0}.input{caret-color:var(--_caret-color);overflow-x:hidden;text-align:inherit}.input::placeholder{color:currentColor;opacity:1}.input::-webkit-calendar-picker-indicator{display:none}.input::-webkit-search-decoration,.input::-webkit-search-cancel-button{display:none}@media(forced-colors: active){.input{background:none}}.no-spinner .input::-webkit-inner-spin-button,.no-spinner .input::-webkit-outer-spin-button{display:none}.no-spinner .input[type=number]{-moz-appearance:textfield}:focus-within .input{caret-color:var(--_focus-caret-color)}.error:focus-within .input{caret-color:var(--_error-focus-caret-color)}.text-field:not(.disabled) .prefix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) .suffix{color:var(--_input-text-suffix-color)}.text-field:not(.disabled) .input::placeholder{color:var(--_input-text-placeholder-color)}.prefix,.suffix{text-wrap:nowrap;width:min-content}.prefix{padding-inline-end:var(--_input-text-prefix-trailing-space)}.suffix{padding-inline-start:var(--_input-text-suffix-leading-space)}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+class CheckboxValidator extends Validator {
+    computeValidity(state) {
+        if (!this.checkboxControl) {
+            // Lazily create the platform input
+            this.checkboxControl = document.createElement('input');
+            this.checkboxControl.type = 'checkbox';
+        }
+        this.checkboxControl.checked = state.checked;
+        this.checkboxControl.required = state.required;
+        return {
+            validity: this.checkboxControl.validity,
+            validationMessage: this.checkboxControl.validationMessage,
+        };
+    }
+    equals(prev, next) {
+        return prev.checked === next.checked && prev.required === next.required;
+    }
+    copy({ checked, required }) {
+        return { checked, required };
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An item layout component.
+ */
+class Item extends s$2 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+         * Content. This attribute is not needed for single line items or items with
+         * three or more lines.
+         */
+        this.multiline = false;
+    }
+    render() {
+        return x `
+      <slot name="container"></slot>
+      <slot class="non-text" name="start"></slot>
+      <div class="text">
+        <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          class="default-slot"
+          @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          name="supporting-text"
+          @slotchange=${this.handleTextSlotChange}></slot>
+      </div>
+      <slot class="non-text" name="trailing-supporting-text"></slot>
+      <slot class="non-text" name="end"></slot>
+    `;
+    }
+    handleTextSlotChange() {
+        // Check if there's more than one text slot with content. If so, the item is
+        // multiline, which has a different min-height than single line items.
+        let isMultiline = false;
+        let slotsWithContent = 0;
+        for (const slot of this.textSlots) {
+            if (slotHasContent(slot)) {
+                slotsWithContent += 1;
+            }
+            if (slotsWithContent > 1) {
+                isMultiline = true;
+                break;
+            }
+        }
+        this.multiline = isMultiline;
+    }
+}
+__decorate([
+    n$7({ type: Boolean, reflect: true })
+], Item.prototype, "multiline", void 0);
+__decorate([
+    e$8('.text slot')
+], Item.prototype, "textSlots", void 0);
+function slotHasContent(slot) {
+    for (const node of slot.assignedNodes({ flatten: true })) {
+        // Assume there's content if there's an element slotted in
+        const isElement = node.nodeType === Node.ELEMENT_NODE;
+        // If there's only text nodes for the default slot, check if there's
+        // non-whitespace.
+        const isTextWithContent = node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/);
+        if (isElement || isTextWithContent) {
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/item/internal/item-styles.css.
+const styles = i$4 `:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An item layout component that can be used inside list items to give them
+ * their customizable structure.
+ *
+ * `<md-item>` does not have any functionality, which must be added by the
+ * component using it.
+ *
+ * All text will wrap unless `white-space: nowrap` is set on the item or any of
+ * its children.
+ *
+ * Slots available:
+ * - `<default>`: The headline, or custom content.
+ * - `headline`: The first line.
+ * - `supporting-text`: Supporting text lines underneath the headline.
+ * - `trailing-supporting-text`: A small text snippet at the end of the item.
+ * - `start`: Any leading content, such as icons, avatars, or checkboxes.
+ * - `end`: Any trailing content, such as icons and buttons.
+ * - `container`: Background container content, intended for adding additional
+ *     styles, such as ripples or focus rings.
+ *
+ * @example
+ * ```html
+ * <md-item>Single line</md-item>
+ *
+ * <md-item>
+ *   <div class="custom-content">...</div>
+ * </md-item>
+ *
+ * <!-- Classic 1 to 3+ line list items -->
+ * <md-item>
+ *   <md-icon slot="start">image</md-icon>
+ *   <div slot="overline">Overline</div>
+ *   <div slot="headline">Headline</div>
+ *   <div="supporting-text">Supporting text</div>
+ *   <div="trailing-supporting-text">Trailing</div>
+ *   <md-icon slot="end">image</md-icon>
+ * </md-item>
+ * ```
+ *
+ * When wrapping `<md-item>`, forward the available slots to use the same slot
+ * structure for the wrapping component (this is what `<md-list-item>` does).
+ *
+ * @example
+ * ```html
+ * <md-item>
+ *   <slot></slot>
+ *   <slot name="overline" slot="overline"></slot>
+ *   <slot name="headline" slot="headline"></slot>
+ *   <slot name="supporting-text" slot="supporting-text"></slot>
+ *   <slot name="trailing-supporting-text"
+ *       slot="trailing-supporting-text"></slot>
+ *   <slot name="start" slot="start"></slot>
+ *   <slot name="end" slot="end"></slot>
+ * </md-item>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdItem = class MdItem extends Item {
+};
+MdItem.styles = [styles];
+MdItem = __decorate([
+    e$a('md-item')
+], MdItem);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const progressBaseClass = mixinDelegatesAria(s$2);
+/**
+ * A progress component.
+ */
+class Progress extends progressBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Progress to display, a fraction between 0 and `max`.
+         */
+        this.value = 0;
+        /**
+         * Maximum progress to display, defaults to 1.
+         */
+        this.max = 1;
+        /**
+         * Whether or not to display indeterminate progress, which gives no indication
+         * to how long an activity will take.
+         */
+        this.indeterminate = false;
+        /**
+         * Whether or not to render indeterminate mode using 4 colors instead of one.
+         */
+        this.fourColor = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return x `
+      <div
+        class="progress ${o$1(this.getRenderClasses())}"
+        role="progressbar"
+        aria-label="${ariaLabel || A}"
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.indeterminate ? A : this.value}
+        >${this.renderIndicator()}</div
+      >
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'indeterminate': this.indeterminate,
+            'four-color': this.fourColor,
+        };
+    }
+}
+__decorate([
+    n$7({ type: Number })
+], Progress.prototype, "value", void 0);
+__decorate([
+    n$7({ type: Number })
+], Progress.prototype, "max", void 0);
+__decorate([
+    n$7({ type: Boolean })
+], Progress.prototype, "indeterminate", void 0);
+__decorate([
+    n$7({ type: Boolean, attribute: 'four-color' })
+], Progress.prototype, "fourColor", void 0);
+
+export { styles$3 as $, A, CloseReason as B, Chip as C, createRequestActivationEvent as D, deactivateActiveItem as E, NavigableKeys as F, i$1 as G, n$1 as H, o as I, styles$d as J, KeydownCloseKey as K, ListController as L, styles$e as M, NavigableKey as N, Fab as O, Progress as P, mixinFocusable as Q, o$7 as R, SelectionKey as S, EASING as T, createDefaultCloseMenuEvent as U, isClosableKey as V, Validator as W, internals as X, e$7 as Y, Select as Z, __decorate as _, mixinConstraintValidation as a, TextField as a0, styles$1 as a1, styles$8 as a2, IconButton as a3, styles$b as a4, styles$c as a5, AssistChip as a6, MultiActionChip as a7, renderRemoveButton as a8, styles$9 as a9, styles$a as aa, Button as ab, styles$f as ac, styles$g as ad, MdRipple as ae, MdMenu as af, FocusState as ag, MdDivider as ah, mixinFormAssociated as b, i$5 as c, isActivationClick as d, e$a as e, dispatchActivationClick as f, getFormValue as g, getFormState as h, i$4 as i, createValidator as j, CheckboxValidator as k, l$5 as l, mixinDelegatesAria as m, n$7 as n, o$1 as o, getValidityAnchor as p, mixinElementInternals as q, redispatchEvent as r, s$2 as s, t$3 as t, Corner as u, createActivateTypeaheadEvent as v, createDeactivateItemsEvent as w, x, createDeactivateTypeaheadEvent as y, getFirstActivatableItem as z };
diff --git a/md-web/dialog.js b/md-web/dialog.js
new file mode 100644
index 0000000..f208ad3
--- /dev/null
+++ b/md-web/dialog.js
@@ -0,0 +1,717 @@
+export const __dummy_loader = () => {};
+
+import { T as EASING, m as mixinDelegatesAria, _ as __decorate, t, n, c as i, s, x, o, A, r as redispatchEvent, i as i$1, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The default dialog open animation.
+ */
+const DIALOG_DEFAULT_OPEN_ANIMATION = {
+    dialog: [
+        [
+            // Dialog slide down
+            [{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }],
+            { duration: 500, easing: EASING.EMPHASIZED },
+        ],
+    ],
+    scrim: [
+        [
+            // Scrim fade in
+            [{ 'opacity': 0 }, { 'opacity': 0.32 }],
+            { duration: 500, easing: 'linear' },
+        ],
+    ],
+    container: [
+        [
+            // Container fade in
+            [{ 'opacity': 0 }, { 'opacity': 1 }],
+            { duration: 50, easing: 'linear', pseudoElement: '::before' },
+        ],
+        [
+            // Container grow
+            // Note: current spec says to grow from 0dp->100% and shrink from
+            // 100%->35%. We change this to 35%->100% to simplify the animation that
+            // is supposed to clip content as it grows. From 0dp it's possible to see
+            // text/actions appear before the container has fully grown.
+            [{ 'height': '35%' }, { 'height': '100%' }],
+            { duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before' },
+        ],
+    ],
+    headline: [
+        [
+            // Headline fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
+            { duration: 250, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+    content: [
+        [
+            // Content fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
+            { duration: 250, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+    actions: [
+        [
+            // Actions fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }],
+            { duration: 300, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+};
+/**
+ * The default dialog close animation.
+ */
+const DIALOG_DEFAULT_CLOSE_ANIMATION = {
+    dialog: [
+        [
+            // Dialog slide up
+            [{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }],
+            { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE },
+        ],
+    ],
+    scrim: [
+        [
+            // Scrim fade out
+            [{ 'opacity': 0.32 }, { 'opacity': 0 }],
+            { duration: 150, easing: 'linear' },
+        ],
+    ],
+    container: [
+        [
+            // Container shrink
+            [{ 'height': '100%' }, { 'height': '35%' }],
+            {
+                duration: 150,
+                easing: EASING.EMPHASIZED_ACCELERATE,
+                pseudoElement: '::before',
+            },
+        ],
+        [
+            // Container fade out
+            [{ 'opacity': '1' }, { 'opacity': '0' }],
+            { delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' },
+        ],
+    ],
+    headline: [
+        [
+            // Headline fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+    content: [
+        [
+            // Content fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+    actions: [
+        [
+            // Actions fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' },
+        ],
+    ],
+};
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const dialogBaseClass = mixinDelegatesAria(s);
+/**
+ * A dialog component.
+ *
+ * @fires open {Event} Dispatched when the dialog is opening before any animations.
+ * @fires opened {Event} Dispatched when the dialog has opened after any animations.
+ * @fires close {Event} Dispatched when the dialog is closing before any animations.
+ * @fires closed {Event} Dispatched when the dialog has closed after any animations.
+ * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
+ * on the scrim or pressing Escape.
+ */
+class Dialog extends dialogBaseClass {
+    // We do not use `delegatesFocus: true` due to a Chromium bug with
+    // selecting text.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open() {
+        return this.isOpen;
+    }
+    set open(open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        this.isOpen = open;
+        if (open) {
+            this.setAttribute('open', '');
+            this.show();
+        }
+        else {
+            this.removeAttribute('open');
+            this.close();
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Skips the opening and closing animations.
+         */
+        this.quick = false;
+        /**
+         * Gets or sets the dialog's return value, usually to indicate which button
+         * a user pressed to close it.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+         */
+        this.returnValue = '';
+        /**
+         * Disables focus trapping, which by default keeps keyboard Tab navigation
+         * within the dialog.
+         *
+         * When disabled, after focusing the last element of a dialog, pressing Tab
+         * again will release focus from the window back to the browser (such as the
+         * URL bar).
+         *
+         * Focus trapping is recommended for accessibility, and should not typically
+         * be disabled. Only turn this off if the use case of a dialog is more
+         * accessible without focus trapping.
+         */
+        this.noFocusTrap = false;
+        /**
+         * Gets the opening animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
+        /**
+         * Gets the closing animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
+        this.isOpen = false;
+        this.isOpening = false;
+        this.isConnectedPromise = this.getIsConnectedPromise();
+        this.isAtScrollTop = false;
+        this.isAtScrollBottom = false;
+        this.nextClickIsFromContent = false;
+        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+        this.hasHeadline = false;
+        this.hasActions = false;
+        this.hasIcon = false;
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224
+        // Chrome v120 has a bug where escape keys do not trigger cancels. If we get
+        // a dialog "close" event that is triggered without a "cancel" after an escape
+        // keydown, then we need to manually trigger our closing logic.
+        //
+        // This bug occurs when pressing escape to close a dialog without first
+        // interacting with the dialog's content.
+        //
+        // Cleanup tracking:
+        // https://github.com/material-components/material-web/issues/5330
+        // This can be removed when full CloseWatcher support added and the above bug
+        // in Chromium is fixed to fire 'cancel' with one escape press and close with
+        // multiple.
+        this.escapePressedWithoutCancel = false;
+        // This TreeWalker is used to walk through a dialog's children to find
+        // focusable elements. TreeWalker is faster than `querySelectorAll('*')`.
+        // We check for isServer because there isn't a "document" during an SSR
+        // run.
+        this.treewalker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
+        {
+            this.addEventListener('submit', this.handleSubmit);
+        }
+    }
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autofocus` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    async show() {
+        this.isOpening = true;
+        // Dialogs can be opened before being attached to the DOM, so we need to
+        // wait until we're connected before calling `showModal()`.
+        await this.isConnectedPromise;
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already opened or if `dialog.close()` was called while awaiting.
+        if (dialog.open || !this.isOpening) {
+            this.isOpening = false;
+            return;
+        }
+        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
+        if (preventOpen) {
+            this.open = false;
+            this.isOpening = false;
+            return;
+        }
+        // All Material dialogs are modal.
+        dialog.showModal();
+        this.open = true;
+        // Reset scroll position if re-opening a dialog with the same content.
+        if (this.scroller) {
+            this.scroller.scrollTop = 0;
+        }
+        // Native modal dialogs ignore autofocus and instead force focus to the
+        // first focusable child. Override this behavior if there is a child with
+        // an autofocus attribute.
+        this.querySelector('[autofocus]')?.focus();
+        await this.animateDialog(this.getOpenAnimation());
+        this.dispatchEvent(new Event('opened'));
+        this.isOpening = false;
+    }
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    async close(returnValue = this.returnValue) {
+        this.isOpening = false;
+        if (!this.isConnected) {
+            // Disconnected dialogs do not fire close events or animate.
+            this.open = false;
+            return;
+        }
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already closed or if `dialog.show()` was called while awaiting.
+        if (!dialog.open || this.isOpening) {
+            this.open = false;
+            return;
+        }
+        const prevReturnValue = this.returnValue;
+        this.returnValue = returnValue;
+        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+        if (preventClose) {
+            this.returnValue = prevReturnValue;
+            return;
+        }
+        await this.animateDialog(this.getCloseAnimation());
+        dialog.close(returnValue);
+        this.open = false;
+        this.dispatchEvent(new Event('closed'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.isConnectedPromiseResolve();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.isConnectedPromise = this.getIsConnectedPromise();
+    }
+    render() {
+        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+        const classes = {
+            'has-headline': this.hasHeadline,
+            'has-actions': this.hasActions,
+            'has-icon': this.hasIcon,
+            'scrollable': scrollable,
+            'show-top-divider': scrollable && !this.isAtScrollTop,
+            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
+        };
+        // The focus trap sentinels are only added after the dialog opens, since
+        // dialog.showModal() will try to autofocus them, even with tabindex="-1".
+        const showFocusTrap = this.open && !this.noFocusTrap;
+        const focusTrap = x `
+      <div
+        class="focus-trap"
+        tabindex="0"
+        aria-hidden="true"
+        @focus=${this.handleFocusTrapFocus}></div>
+    `;
+        const { ariaLabel } = this;
+        return x `
+      <div class="scrim"></div>
+      <dialog
+        class=${o(classes)}
+        aria-label=${ariaLabel || A}
+        aria-labelledby=${this.hasHeadline ? 'headline' : A}
+        role=${this.type === 'alert' ? 'alertdialog' : A}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        @close=${this.handleClose}
+        @keydown=${this.handleKeydown}
+        .returnValue=${this.returnValue || A}>
+        ${showFocusTrap ? focusTrap : A}
+        <div class="container" @click=${this.handleContentClick}>
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline || A}>
+              <slot
+                name="headline"
+                @slotchange=${this.handleHeadlineChange}></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions" @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+        ${showFocusTrap ? focusTrap : A}
+      </dialog>
+    `;
+    }
+    firstUpdated() {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                this.handleAnchorIntersection(entry);
+            }
+        }, { root: this.scroller });
+        this.intersectionObserver.observe(this.topAnchor);
+        this.intersectionObserver.observe(this.bottomAnchor);
+    }
+    handleDialogClick() {
+        if (this.nextClickIsFromContent) {
+            // Avoid doing a layout calculation below if we know the click came from
+            // content.
+            this.nextClickIsFromContent = false;
+            return;
+        }
+        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+        // but Material dialogs do.
+        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleContentClick() {
+        this.nextClickIsFromContent = true;
+    }
+    handleSubmit(event) {
+        const form = event.target;
+        const { submitter } = event;
+        if (form.getAttribute('method') !== 'dialog' || !submitter) {
+            return;
+        }
+        // Close reason is the submitter's value attribute, or the dialog's
+        // `returnValue` if there is no attribute.
+        this.close(submitter.getAttribute('value') ?? this.returnValue);
+    }
+    handleCancel(event) {
+        if (event.target !== this.dialog) {
+            // Ignore any cancel events dispatched by content.
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        const preventDefault = !redispatchEvent(this, event);
+        // We always prevent default on the original dialog event since we'll
+        // animate closing it before it actually closes.
+        event.preventDefault();
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleClose() {
+        if (!this.escapePressedWithoutCancel) {
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        this.dialog?.dispatchEvent(new Event('cancel', { cancelable: true }));
+    }
+    handleKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // An escape key was pressed. If a "close" event fires next without a
+        // "cancel" event first, then we know we're in the Chrome v120 bug.
+        this.escapePressedWithoutCancel = true;
+        // Wait a full task for the cancel/close event listeners to fire, then
+        // reset the flag.
+        setTimeout(() => {
+            this.escapePressedWithoutCancel = false;
+        });
+    }
+    async animateDialog(animation) {
+        // Always cancel the previous animations. Animations can include `fill`
+        // modes that need to be cleared when `quick` is toggled. If not, content
+        // that faded out will remain hidden when a `quick` dialog re-opens after
+        // previously opening and closing without `quick`.
+        this.cancelAnimations?.abort();
+        this.cancelAnimations = new AbortController();
+        if (this.quick) {
+            return;
+        }
+        const { dialog, scrim, container, headline, content, actions } = this;
+        if (!dialog || !scrim || !container || !headline || !content || !actions) {
+            return;
+        }
+        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation;
+        const elementAndAnimation = [
+            [dialog, dialogAnimate ?? []],
+            [scrim, scrimAnimate ?? []],
+            [container, containerAnimate ?? []],
+            [headline, headlineAnimate ?? []],
+            [content, contentAnimate ?? []],
+            [actions, actionsAnimate ?? []],
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                const animation = element.animate(...animateArgs);
+                this.cancelAnimations.signal.addEventListener('abort', () => {
+                    animation.cancel();
+                });
+                animations.push(animation);
+            }
+        }
+        await Promise.all(animations.map((animation) => animation.finished.catch(() => {
+            // Ignore intentional AbortErrors when calling `animation.cancel()`.
+        })));
+    }
+    handleHeadlineChange(event) {
+        const slot = event.target;
+        this.hasHeadline = slot.assignedElements().length > 0;
+    }
+    handleActionsChange(event) {
+        const slot = event.target;
+        this.hasActions = slot.assignedElements().length > 0;
+    }
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements().length > 0;
+    }
+    handleAnchorIntersection(entry) {
+        const { target, isIntersecting } = entry;
+        if (target === this.topAnchor) {
+            this.isAtScrollTop = isIntersecting;
+        }
+        if (target === this.bottomAnchor) {
+            this.isAtScrollBottom = isIntersecting;
+        }
+    }
+    getIsConnectedPromise() {
+        return new Promise((resolve) => {
+            this.isConnectedPromiseResolve = resolve;
+        });
+    }
+    handleFocusTrapFocus(event) {
+        const [firstFocusableChild, lastFocusableChild] = this.getFirstAndLastFocusableChildren();
+        if (!firstFocusableChild || !lastFocusableChild) {
+            // When a dialog does not have focusable children, the dialog itself
+            // receives focus.
+            this.dialog?.focus();
+            return;
+        }
+        // To determine which child to focus, we need to know which focus trap
+        // received focus...
+        const isFirstFocusTrap = event.target === this.firstFocusTrap;
+        const isLastFocusTrap = !isFirstFocusTrap;
+        // ...and where the focus came from (what was previously focused).
+        const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;
+        const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;
+        // Although this is a focus trap, focus can come from outside the trap.
+        // This can happen when elements are programmatically `focus()`'d. It also
+        // happens when focus leaves and returns to the window, such as clicking on
+        // the browser's URL bar and pressing Tab, or switching focus between
+        // iframes.
+        const focusCameFromOutsideDialog = !focusCameFromFirstChild && !focusCameFromLastChild;
+        // Focus the dialog's first child when we reach the end of the dialog and
+        // focus is moving forward. Or, when focus is moving forwards into the
+        // dialog from outside of the window.
+        const shouldFocusFirstChild = (isLastFocusTrap && focusCameFromLastChild) ||
+            (isFirstFocusTrap && focusCameFromOutsideDialog);
+        if (shouldFocusFirstChild) {
+            firstFocusableChild.focus();
+            return;
+        }
+        // Focus the dialog's last child when we reach the beginning of the dialog
+        // and focus is moving backward. Or, when focus is moving backwards into the
+        // dialog from outside of the window.
+        const shouldFocusLastChild = (isFirstFocusTrap && focusCameFromFirstChild) ||
+            (isLastFocusTrap && focusCameFromOutsideDialog);
+        if (shouldFocusLastChild) {
+            lastFocusableChild.focus();
+            return;
+        }
+        // The booleans above are verbose for readability, but code executation
+        // won't actually reach here.
+    }
+    getFirstAndLastFocusableChildren() {
+        if (!this.treewalker) {
+            return [null, null];
+        }
+        let firstFocusableChild = null;
+        let lastFocusableChild = null;
+        // Reset the current node back to the root host element.
+        this.treewalker.currentNode = this.treewalker.root;
+        while (this.treewalker.nextNode()) {
+            // Cast as Element since the TreeWalker filter only accepts Elements.
+            const nextChild = this.treewalker.currentNode;
+            if (!isFocusable(nextChild)) {
+                continue;
+            }
+            if (!firstFocusableChild) {
+                firstFocusableChild = nextChild;
+            }
+            lastFocusableChild = nextChild;
+        }
+        // We set lastFocusableChild immediately after finding a
+        // firstFocusableChild, which means the pair is either both null or both
+        // non-null. Cast since TypeScript does not recognize this.
+        return [firstFocusableChild, lastFocusableChild];
+    }
+}
+__decorate([
+    n({ type: Boolean })
+], Dialog.prototype, "open", null);
+__decorate([
+    n({ type: Boolean })
+], Dialog.prototype, "quick", void 0);
+__decorate([
+    n({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
+__decorate([
+    n()
+], Dialog.prototype, "type", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'no-focus-trap' })
+], Dialog.prototype, "noFocusTrap", void 0);
+__decorate([
+    i('dialog')
+], Dialog.prototype, "dialog", void 0);
+__decorate([
+    i('.scrim')
+], Dialog.prototype, "scrim", void 0);
+__decorate([
+    i('.container')
+], Dialog.prototype, "container", void 0);
+__decorate([
+    i('.headline')
+], Dialog.prototype, "headline", void 0);
+__decorate([
+    i('.content')
+], Dialog.prototype, "content", void 0);
+__decorate([
+    i('.actions')
+], Dialog.prototype, "actions", void 0);
+__decorate([
+    t()
+], Dialog.prototype, "isAtScrollTop", void 0);
+__decorate([
+    t()
+], Dialog.prototype, "isAtScrollBottom", void 0);
+__decorate([
+    i('.scroller')
+], Dialog.prototype, "scroller", void 0);
+__decorate([
+    i('.top.anchor')
+], Dialog.prototype, "topAnchor", void 0);
+__decorate([
+    i('.bottom.anchor')
+], Dialog.prototype, "bottomAnchor", void 0);
+__decorate([
+    i('.focus-trap')
+], Dialog.prototype, "firstFocusTrap", void 0);
+__decorate([
+    t()
+], Dialog.prototype, "hasHeadline", void 0);
+__decorate([
+    t()
+], Dialog.prototype, "hasActions", void 0);
+__decorate([
+    t()
+], Dialog.prototype, "hasIcon", void 0);
+function isFocusable(element) {
+    // Check if the element is a known built-in focusable element:
+    // - <a> and <area> with `href` attributes.
+    // - Form controls that are not disabled.
+    // - `contenteditable` elements.
+    // - Anything with a non-negative `tabindex`.
+    const knownFocusableElements = ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';
+    const notDisabled = ':not(:disabled,[disabled])';
+    const notNegativeTabIndex = ':not([tabindex^="-"])';
+    if (element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)) {
+        return true;
+    }
+    const isCustomElement = element.localName.includes('-');
+    if (!isCustomElement) {
+        return false;
+    }
+    // If a custom element does not have a tabindex, it may still be focusable
+    // if it delegates focus with a shadow root. We also need to check again if
+    // the custom element is a disabled form control.
+    if (!element.matches(notDisabled)) {
+        return false;
+    }
+    return element.shadowRoot?.delegatesFocus ?? false;
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./dialog/internal/dialog-styles.css.
+const styles = i$1 `:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));flex:1;font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Dialogs can require an action, communicate information, or help
+ * users accomplish a task. There are two types of dialogs: basic and
+ * full-screen.
+ *
+ * @description
+ * A dialog is a modal window that appears in front of app content to provide
+ * critical information or ask for a decision. Dialogs disable all app
+ * functionality when they appear, and remain on screen until confirmed,
+ * dismissed, or a required action has been taken.
+ *
+ * Dialogs are purposefully interruptive, so they should be used sparingly.
+ * A less disruptive alternative is to use a menu, which provides options
+ * without interrupting a user’s experience.
+ *
+ * On mobile devices only, complex dialogs should be displayed fullscreen.
+ *
+ * __Example usages:__
+ * - Common use cases for basic dialogs include alerts, quick selection, and
+ * confirmation.
+ * - More complex dialogs may contain actions that require a series of tasks
+ * to complete. One example is creating a calendar entry with the event title,
+ * date, location, and time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdDialog = class MdDialog extends Dialog {
+};
+MdDialog.styles = [styles];
+MdDialog = __decorate([
+    e('md-dialog')
+], MdDialog);
+
+export { MdDialog };
diff --git a/md-web/divider.js b/md-web/divider.js
new file mode 100644
index 0000000..4d026d0
--- /dev/null
+++ b/md-web/divider.js
@@ -0,0 +1,3 @@
+export const __dummy_loader = () => {};
+
+export { ah as MdDivider } from './core.js';
diff --git a/md-web/fab.js b/md-web/fab.js
new file mode 100644
index 0000000..ef18590
--- /dev/null
+++ b/md-web/fab.js
@@ -0,0 +1,113 @@
+export const __dummy_loader = () => {};
+
+import { i, J as styles$2, M as styles$3, _ as __decorate, O as Fab, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./fab/internal/fab-styles.css.
+const styles$1 = i `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var(--md-fab-container-shape-start-start, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-start-end: var(--md-fab-container-shape-start-end, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-end: var(--md-fab-container-shape-end-end, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-start: var(--md-fab-container-shape-end-start, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_large-container-shape-start-start: var(--md-fab-large-container-shape-start-start, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-start-end: var(--md-fab-large-container-shape-start-end, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-end: var(--md-fab-large-container-shape-end-end, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-start: var(--md-fab-large-container-shape-end-start, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_small-container-shape-start-start: var(--md-fab-small-container-shape-start-start, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-start-end: var(--md-fab-small-container-shape-start-end, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-end-end: var(--md-fab-small-container-shape-end-end, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-end-start: var(--md-fab-small-container-shape-end-start, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));cursor:pointer}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab{cursor:inherit}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFab = class MdFab extends Fab {
+};
+MdFab.styles = [styles$2, styles$1, styles$3];
+MdFab = __decorate([
+    e('md-fab')
+], MdFab);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./fab/internal/fab-branded-styles.css.
+const styles = i `:host{--_container-color: var(--md-fab-branded-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-branded-container-elevation, 3);--_container-height: var(--md-fab-branded-container-height, 56px);--_container-shadow-color: var(--md-fab-branded-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-width: var(--md-fab-branded-container-width, 56px);--_focus-container-elevation: var(--md-fab-branded-focus-container-elevation, 3);--_hover-container-elevation: var(--md-fab-branded-hover-container-elevation, 4);--_hover-state-layer-color: var(--md-fab-branded-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-branded-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-fab-branded-icon-size, 36px);--_lowered-container-color: var(--md-fab-branded-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-branded-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-branded-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-branded-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-branded-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-branded-pressed-container-elevation, 3);--_pressed-state-layer-color: var(--md-fab-branded-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-branded-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-branded-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-branded-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-branded-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-fab-branded-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-size: var(--md-fab-branded-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-line-height: var(--md-fab-branded-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-weight: var(--md-fab-branded-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-branded-large-container-height, 96px);--_large-container-width: var(--md-fab-branded-large-container-width, 96px);--_large-icon-size: var(--md-fab-branded-large-icon-size, 48px);--_pressed-label-text-color: var(--md-fab-branded-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-fab-branded-container-shape-start-start, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-start-end: var(--md-fab-branded-container-shape-start-end, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-end: var(--md-fab-branded-container-shape-end-end, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-start: var(--md-fab-branded-container-shape-end-start, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_large-container-shape-start-start: var(--md-fab-branded-large-container-shape-start-start, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-start-end: var(--md-fab-branded-large-container-shape-start-end, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-end: var(--md-fab-branded-large-container-shape-end-end, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-start: var(--md-fab-branded-large-container-shape-end-start, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)))}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small. Branded
+ * FABs are used to specifically call attention to branded logo icons.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdBrandedFab = class MdBrandedFab extends Fab {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'primary': false,
+            'secondary': false,
+            'tertiary': false,
+            'small': false,
+        };
+    }
+};
+MdBrandedFab.styles = [
+    styles$2,
+    styles,
+    styles$3,
+];
+MdBrandedFab = __decorate([
+    e('md-branded-fab')
+], MdBrandedFab);
diff --git a/md-web/field.js b/md-web/field.js
new file mode 100644
index 0000000..1d09100
--- /dev/null
+++ b/md-web/field.js
@@ -0,0 +1,3 @@
+export const __dummy_loader = () => {};
+
+import './core.js';
diff --git a/md-web/icon-button.js b/md-web/icon-button.js
new file mode 100644
index 0000000..6e15251
--- /dev/null
+++ b/md-web/icon-button.js
@@ -0,0 +1,185 @@
+export const __dummy_loader = () => {};
+
+import { i, a2 as styles$4, _ as __decorate, a3 as IconButton, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./iconbutton/internal/standard-styles.css.
+const styles$3 = i `:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:is(:disabled,[aria-disabled=true]){opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdIconButton = class MdIconButton extends IconButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'standard': true,
+        };
+    }
+};
+MdIconButton.styles = [styles$4, styles$3];
+MdIconButton = __decorate([
+    e('md-icon-button')
+], MdIconButton);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./iconbutton/internal/filled-styles.css.
+const styles$2 = i `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledIconButton = class MdFilledIconButton extends IconButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'filled': true,
+            'toggle-filled': this.toggle,
+        };
+    }
+};
+MdFilledIconButton.styles = [styles$4, styles$2];
+MdFilledIconButton = __decorate([
+    e('md-filled-icon-button')
+], MdFilledIconButton);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./iconbutton/internal/filled-tonal-styles.css.
+const styles$1 = i `:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledTonalIconButton = class MdFilledTonalIconButton extends IconButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'filled-tonal': true,
+            'toggle-filled-tonal': this.toggle,
+        };
+    }
+};
+MdFilledTonalIconButton.styles = [styles$4, styles$1];
+MdFilledTonalIconButton = __decorate([
+    e('md-filled-tonal-icon-button')
+], MdFilledTonalIconButton);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./iconbutton/internal/outlined-styles.css.
+const styles = i `:host{--_container-height: var(--md-outlined-icon-button-container-height, 40px);--_container-width: var(--md-outlined-icon-button-container-width, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.outlined:is(:disabled,[aria-disabled=true])::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute;z-index:-1}.outlined.selected::before{border-width:0}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}.selected:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-outline-opacity: 1}.selected::before{border-color:CanvasText;border-width:var(--_outline-width)}.selected:is(:disabled,[aria-disabled=true])::before{border-color:GrayText;opacity:1}}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedIconButton = class MdOutlinedIconButton extends IconButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'outlined': true,
+        };
+    }
+};
+MdOutlinedIconButton.styles = [styles$4, styles];
+MdOutlinedIconButton = __decorate([
+    e('md-outlined-icon-button')
+], MdOutlinedIconButton);
diff --git a/md-web/linear-progress.js b/md-web/linear-progress.js
new file mode 100644
index 0000000..6fce6cd
--- /dev/null
+++ b/md-web/linear-progress.js
@@ -0,0 +1,87 @@
+export const __dummy_loader = () => {};
+
+import { _ as __decorate, n, P as Progress, x, I as o, i, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A linear progress component.
+ */
+class LinearProgress extends Progress {
+    constructor() {
+        super(...arguments);
+        /**
+         * Buffer amount to display, a fraction between 0 and `max`.
+         * If the value is 0 or negative, the buffer is not displayed.
+         */
+        this.buffer = 0;
+    }
+    // Note, the indeterminate animation is rendered with transform %'s
+    // Previously, this was optimized to use px calculated with the resizeObserver
+    // due to a now fixed Chrome bug: crbug.com/389359.
+    renderIndicator() {
+        const progressStyles = {
+            transform: `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`,
+        };
+        const bufferValue = this.buffer ?? 0;
+        const hasBuffer = bufferValue > 0;
+        const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max;
+        const dotStyles = {
+            transform: `scaleX(${dotSize * 100}%)`,
+        };
+        // Only display dots when visible - this prevents invisible infinite
+        // animation.
+        const hideDots = this.indeterminate || !hasBuffer || bufferValue >= this.max || this.value >= this.max;
+        return x `
+      <div class="dots" ?hidden=${hideDots}></div>
+      <div class="inactive-track" style=${o(dotStyles)}></div>
+      <div class="bar primary-bar" style=${o(progressStyles)}>
+        <div class="bar-inner"></div>
+      </div>
+      <div class="bar secondary-bar">
+        <div class="bar-inner"></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: Number })
+], LinearProgress.prototype, "buffer", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./progress/internal/linear-progress-styles.css.
+const styles = i `:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, var(--md-sys-shape-corner-none, 0px));border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Linear progress indicators display progress by animating along the
+ * length of a fixed, visible track.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdLinearProgress = class MdLinearProgress extends LinearProgress {
+};
+MdLinearProgress.styles = [styles];
+MdLinearProgress = __decorate([
+    e('md-linear-progress')
+], MdLinearProgress);
+
+export { MdLinearProgress };
diff --git a/md-web/list-item.js b/md-web/list-item.js
new file mode 100644
index 0000000..37e52a6
--- /dev/null
+++ b/md-web/list-item.js
@@ -0,0 +1,256 @@
+export const __dummy_loader = () => {};
+
+import { m as mixinDelegatesAria, s, _ as __decorate, n, c as i, x, G as i$1, A, H as n$1, o, D as createRequestActivationEvent, i as i$2, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const listItemBaseClass = mixinDelegatesAria(s);
+/**
+ * @fires request-activation {Event} Requests the list to set `tabindex=0` on
+ * the item and focus it. --bubbles --composed
+ */
+class ListItemEl extends listItemBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the item and makes it non-selectable and non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * Sets the behavior of the list item, defaults to "text". Change to "link" or
+         * "button" for interactive items.
+         */
+        this.type = 'text';
+        /**
+         * READONLY. Sets the `md-list-item` attribute on the element.
+         */
+        this.isListItem = true;
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+         */
+        this.href = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+         * set.
+         */
+        this.target = '';
+    }
+    get isDisabled() {
+        return this.disabled && this.type !== 'link';
+    }
+    willUpdate(changed) {
+        if (this.href) {
+            this.type = 'link';
+        }
+        super.willUpdate(changed);
+    }
+    render() {
+        return this.renderListItem(x `
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()} ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `);
+    }
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    renderListItem(content) {
+        const isAnchor = this.type === 'link';
+        let tag;
+        switch (this.type) {
+            case 'link':
+                tag = i$1 `a`;
+                break;
+            case 'button':
+                tag = i$1 `button`;
+                break;
+            default:
+            case 'text':
+                tag = i$1 `li`;
+                break;
+        }
+        const isInteractive = this.type !== 'text';
+        // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
+        // then all are "listitem" roles for correct announcement.
+        const target = isAnchor && !!this.target ? this.target : A;
+        return n$1 `
+      <${tag}
+        id="item"
+        tabindex="${this.isDisabled || !isInteractive ? -1 : 0}"
+        ?disabled=${this.isDisabled}
+        role="listitem"
+        aria-selected=${this.ariaSelected || A}
+        aria-checked=${this.ariaChecked || A}
+        aria-expanded=${this.ariaExpanded || A}
+        aria-haspopup=${this.ariaHasPopup || A}
+        class="list-item ${o(this.getRenderClasses())}"
+        href=${this.href || A}
+        target=${target}
+        @focus=${this.onFocus}
+      >${content}</${tag}>
+    `;
+    }
+    /**
+     * Handles rendering of the ripple element.
+     */
+    renderRipple() {
+        if (this.type === 'text') {
+            return A;
+        }
+        return x ` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.isDisabled}></md-ripple>`;
+    }
+    /**
+     * Handles rendering of the focus ring.
+     */
+    renderFocusRing() {
+        if (this.type === 'text') {
+            return A;
+        }
+        return x ` <md-focus-ring
+      @visibility-changed=${this.onFocusRingVisibilityChanged}
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
+    }
+    onFocusRingVisibilityChanged(e) { }
+    /**
+     * Classes applied to the list item root.
+     */
+    getRenderClasses() {
+        return { 'disabled': this.isDisabled };
+    }
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    renderBody() {
+        return x `
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
+    `;
+    }
+    onFocus() {
+        if (this.tabIndex !== -1) {
+            return;
+        }
+        // Handles the case where the user clicks on the element and then tabs.
+        this.dispatchEvent(createRequestActivationEvent());
+    }
+    focus() {
+        // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
+        // work programmatically like in FF and select-option
+        this.listItemRoot?.focus();
+    }
+    click() {
+        if (!this.listItemRoot) {
+            // If the element has not finished rendering, call super to ensure click
+            // events are dispatched.
+            super.click();
+            return;
+        }
+        // Forward click to the element to ensure link <a>.click() works correctly.
+        this.listItemRoot.click();
+    }
+}
+/** @nocollapse */
+ListItemEl.shadowRootOptions = {
+    ...s.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItemEl.prototype, "disabled", void 0);
+__decorate([
+    n({ reflect: true })
+], ListItemEl.prototype, "type", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'md-list-item', reflect: true })
+], ListItemEl.prototype, "isListItem", void 0);
+__decorate([
+    n()
+], ListItemEl.prototype, "href", void 0);
+__decorate([
+    n()
+], ListItemEl.prototype, "target", void 0);
+__decorate([
+    i('.list-item')
+], ListItemEl.prototype, "listItemRoot", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./list/internal/listitem/list-item-styles.css.
+const styles = i$2 `:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary
+ * Lists are continuous, vertical indexes of text or images. Items are placed
+ * inside the list.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * Acceptable slot child variants are:
+ *
+ * - `img[slot=end]`
+ * - `img[slot=start]`
+ *
+ *  @example
+ * ```html
+ * <md-list-item
+ *     headline="User Name"
+ *     supportingText="user@name.com">
+ *   <md-icon slot="start">account_circle</md-icon>
+ *   <md-icon slot="end">check</md-icon>
+ * </md-list-item>
+ * ```
+ *
+ * @example
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdListItem = class MdListItem extends ListItemEl {
+};
+MdListItem.styles = [styles];
+MdListItem = __decorate([
+    e('md-list-item')
+], MdListItem);
+
+export { MdListItem };
diff --git a/md-web/list.js b/md-web/list.js
new file mode 100644
index 0000000..7ca5f8c
--- /dev/null
+++ b/md-web/list.js
@@ -0,0 +1,112 @@
+export const __dummy_loader = () => {};
+
+import { F as NavigableKeys, _ as __decorate, l, s, L as ListController, x, i, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const NAVIGABLE_KEY_SET = new Set(Object.values(NavigableKeys));
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+class List extends s {
+    /** @export */
+    get items() {
+        return this.listController.items;
+    }
+    constructor() {
+        super();
+        this.listController = new ListController({
+            isItem: (item) => item.hasAttribute('md-list-item'),
+            getPossibleItems: () => this.slotItems,
+            isRtl: () => getComputedStyle(this).direction === 'rtl',
+            deactivateItem: (item) => {
+                item.tabIndex = -1;
+            },
+            activateItem: (item) => {
+                item.tabIndex = 0;
+            },
+            isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),
+            isActivatable: (item) => !item.disabled && item.type !== 'text',
+        });
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        {
+            this.internals.role = 'list';
+            this.addEventListener('keydown', this.listController.handleKeydown);
+        }
+    }
+    render() {
+        return x `
+      <slot
+        @deactivate-items=${this.listController.onDeactivateItems}
+        @request-activation=${this.listController.onRequestActivation}
+        @slotchange=${this.listController.onSlotchange}>
+      </slot>
+    `;
+    }
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem() {
+        return this.listController.activateNextItem();
+    }
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        return this.listController.activatePreviousItem();
+    }
+}
+__decorate([
+    l({ flatten: true })
+], List.prototype, "slotItems", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./list/internal/list-styles.css.
+const styles = i `:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Lists are continuous, vertical indexes of text or images.
+ *
+ * @description
+ * Lists consist of one or more list items, and can contain actions represented
+ * by icons and text. List items come in three sizes: one-line, two-line, and
+ * three-line.
+ *
+ * __Takeaways:__
+ *
+ * - Lists should be sorted in logical ways that make content easy to scan, such
+ *   as alphabetical, numerical, chronological, or by user preference.
+ * - Lists present content in a way that makes it easy to identify a specific
+ *   item in a collection and act on it.
+ * - Lists should present icons, text, and actions in a consistent format.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdList = class MdList extends List {
+};
+MdList.styles = [styles];
+MdList = __decorate([
+    e('md-list')
+], MdList);
+
+export { MdList };
diff --git a/md-web/menu-item.js b/md-web/menu-item.js
new file mode 100644
index 0000000..a5feb3f
--- /dev/null
+++ b/md-web/menu-item.js
@@ -0,0 +1,379 @@
+export const __dummy_loader = () => {};
+
+import { U as createDefaultCloseMenuEvent, B as CloseReason, V as isClosableKey, m as mixinDelegatesAria, s, _ as __decorate, n, c as i, l, R as o, x, G as i$1, A, H as n$1, o as o$1, i as i$2, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A controller that provides most functionality of an element that implements
+ * the MenuItem interface.
+ */
+class MenuItemController {
+    /**
+     * @param host The MenuItem in which to attach this controller to.
+     * @param config The object that configures this controller's behavior.
+     */
+    constructor(host, config) {
+        this.host = host;
+        this.internalTypeaheadText = null;
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onClick = () => {
+            if (this.host.keepOpen)
+                return;
+            this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
+                kind: CloseReason.CLICK_SELECTION,
+            }));
+        };
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onKeydown = (event) => {
+            // Check if the interactive element is an anchor tag. If so, click it.
+            if (this.host.href && event.code === 'Enter') {
+                const interactiveElement = this.getInteractiveElement();
+                if (interactiveElement instanceof HTMLAnchorElement) {
+                    interactiveElement.click();
+                }
+            }
+            if (event.defaultPrevented)
+                return;
+            // If the host has keepOpen = true we should ignore clicks & Space/Enter,
+            // however we always maintain the ability to close a menu with a explicit
+            // `escape` keypress.
+            const keyCode = event.code;
+            if (this.host.keepOpen && keyCode !== 'Escape')
+                return;
+            if (isClosableKey(keyCode)) {
+                event.preventDefault();
+                this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
+                    kind: CloseReason.KEYDOWN,
+                    key: keyCode,
+                }));
+            }
+        };
+        this.getHeadlineElements = config.getHeadlineElements;
+        this.getSupportingTextElements = config.getSupportingTextElements;
+        this.getDefaultElements = config.getDefaultElements;
+        this.getInteractiveElement = config.getInteractiveElement;
+        this.host.addController(this);
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot, and if there are
+     * no slotted elements into headline, then it checks the _default_ slot, and
+     * then the `"supporting-text"` slot if nothing is in _default_.
+     */
+    get typeaheadText() {
+        if (this.internalTypeaheadText !== null) {
+            return this.internalTypeaheadText;
+        }
+        const headlineElements = this.getHeadlineElements();
+        const textParts = [];
+        headlineElements.forEach((headlineElement) => {
+            if (headlineElement.textContent && headlineElement.textContent.trim()) {
+                textParts.push(headlineElement.textContent.trim());
+            }
+        });
+        // If there are no headline elements, check the default slot's text content
+        if (textParts.length === 0) {
+            this.getDefaultElements().forEach((defaultElement) => {
+                if (defaultElement.textContent && defaultElement.textContent.trim()) {
+                    textParts.push(defaultElement.textContent.trim());
+                }
+            });
+        }
+        // If there are no headline nor default slot elements, check the
+        //supporting-text slot's text content
+        if (textParts.length === 0) {
+            this.getSupportingTextElements().forEach((supportingTextElement) => {
+                if (supportingTextElement.textContent &&
+                    supportingTextElement.textContent.trim()) {
+                    textParts.push(supportingTextElement.textContent.trim());
+                }
+            });
+        }
+        return textParts.join(' ');
+    }
+    /**
+     * The recommended tag name to render as the list item.
+     */
+    get tagName() {
+        const type = this.host.type;
+        switch (type) {
+            case 'link':
+                return 'a';
+            case 'button':
+                return 'button';
+            default:
+            case 'menuitem':
+            case 'option':
+                return 'li';
+        }
+    }
+    /**
+     * The recommended role of the menu item.
+     */
+    get role() {
+        return this.host.type === 'option' ? 'option' : 'menuitem';
+    }
+    hostConnected() {
+        this.host.toggleAttribute('md-menu-item', true);
+    }
+    hostUpdate() {
+        if (this.host.href) {
+            this.host.type = 'link';
+        }
+    }
+    /**
+     * Use to set the typeaheadText when it changes.
+     */
+    setTypeaheadText(text) {
+        this.internalTypeaheadText = text;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const menuItemBaseClass = mixinDelegatesAria(s);
+/**
+ * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}
+ * Closes the encapsulating menu on closable interaction. --bubbles --composed
+ */
+class MenuItemEl extends menuItemBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the item and makes it non-selectable and non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * Sets the behavior and role of the menu item, defaults to "menuitem".
+         */
+        this.type = 'menuitem';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+         */
+        this.href = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+         * set.
+         */
+        this.target = '';
+        /**
+         * Keeps the menu open if clicked or keyboard selected.
+         */
+        this.keepOpen = false;
+        /**
+         * Sets the item in the selected visual state when a submenu is opened.
+         */
+        this.selected = false;
+        this.menuItemController = new MenuItemController(this, {
+            getHeadlineElements: () => {
+                return this.headlineElements;
+            },
+            getSupportingTextElements: () => {
+                return this.supportingTextElements;
+            },
+            getDefaultElements: () => {
+                return this.defaultElements;
+            },
+            getInteractiveElement: () => this.listItemRoot,
+        });
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText() {
+        return this.menuItemController.typeaheadText;
+    }
+    set typeaheadText(text) {
+        this.menuItemController.setTypeaheadText(text);
+    }
+    render() {
+        return this.renderListItem(x `
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()} ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `);
+    }
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    renderListItem(content) {
+        const isAnchor = this.type === 'link';
+        let tag;
+        switch (this.menuItemController.tagName) {
+            case 'a':
+                tag = i$1 `a`;
+                break;
+            case 'button':
+                tag = i$1 `button`;
+                break;
+            default:
+            case 'li':
+                tag = i$1 `li`;
+                break;
+        }
+        // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
+        // then all are "menuitem" roles for correct announcement.
+        const target = isAnchor && !!this.target ? this.target : A;
+        return n$1 `
+      <${tag}
+        id="item"
+        tabindex=${this.disabled && !isAnchor ? -1 : 0}
+        role=${this.menuItemController.role}
+        aria-label=${this.ariaLabel || A}
+        aria-selected=${this.ariaSelected || A}
+        aria-checked=${this.ariaChecked || A}
+        aria-expanded=${this.ariaExpanded || A}
+        aria-haspopup=${this.ariaHasPopup || A}
+        class="list-item ${o$1(this.getRenderClasses())}"
+        href=${this.href || A}
+        target=${target}
+        @click=${this.menuItemController.onClick}
+        @keydown=${this.menuItemController.onKeydown}
+      >${content}</${tag}>
+    `;
+    }
+    /**
+     * Handles rendering of the ripple element.
+     */
+    renderRipple() {
+        return x ` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}></md-ripple>`;
+    }
+    /**
+     * Handles rendering of the focus ring.
+     */
+    renderFocusRing() {
+        return x ` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
+    }
+    /**
+     * Classes applied to the list item root.
+     */
+    getRenderClasses() {
+        return {
+            'disabled': this.disabled,
+            'selected': this.selected,
+        };
+    }
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    renderBody() {
+        return x `
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
+    `;
+    }
+    focus() {
+        // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
+        // work programmatically like in FF and select-option
+        this.listItemRoot?.focus();
+    }
+}
+/** @nocollapse */
+MenuItemEl.shadowRootOptions = {
+    ...s.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n({ type: Boolean, reflect: true })
+], MenuItemEl.prototype, "disabled", void 0);
+__decorate([
+    n()
+], MenuItemEl.prototype, "type", void 0);
+__decorate([
+    n()
+], MenuItemEl.prototype, "href", void 0);
+__decorate([
+    n()
+], MenuItemEl.prototype, "target", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'keep-open' })
+], MenuItemEl.prototype, "keepOpen", void 0);
+__decorate([
+    n({ type: Boolean })
+], MenuItemEl.prototype, "selected", void 0);
+__decorate([
+    i('.list-item')
+], MenuItemEl.prototype, "listItemRoot", void 0);
+__decorate([
+    l({ slot: 'headline' })
+], MenuItemEl.prototype, "headlineElements", void 0);
+__decorate([
+    l({ slot: 'supporting-text' })
+], MenuItemEl.prototype, "supportingTextElements", void 0);
+__decorate([
+    o({ slot: '' })
+], MenuItemEl.prototype, "defaultElements", void 0);
+__decorate([
+    n({ attribute: 'typeahead-text' })
+], MenuItemEl.prototype, "typeaheadText", null);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./menu/internal/menuitem/menu-item-styles.css.
+const styles = i$2 `:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item{background-color:var(--md-menu-item-container-color, transparent)}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenuItem = class MdMenuItem extends MenuItemEl {
+};
+MdMenuItem.styles = [styles];
+MdMenuItem = __decorate([
+    e('md-menu-item')
+], MdMenuItem);
+
+export { MdMenuItem };
diff --git a/md-web/menu.js b/md-web/menu.js
new file mode 100644
index 0000000..b137675
--- /dev/null
+++ b/md-web/menu.js
@@ -0,0 +1,3 @@
+export const __dummy_loader = () => {};
+
+export { B as CloseReason, u as Corner, ag as FocusState, af as MdMenu } from './core.js';
diff --git a/md-web/radio.js b/md-web/radio.js
new file mode 100644
index 0000000..21f2506
--- /dev/null
+++ b/md-web/radio.js
@@ -0,0 +1,470 @@
+export const __dummy_loader = () => {};
+
+import { W as Validator, a as mixinConstraintValidation, b as mixinFormAssociated, q as mixinElementInternals, Q as mixinFocusable, _ as __decorate, n, c as i, s, X as internals, x, o, d as isActivationClick, g as getFormValue, h as getFormState, j as createValidator, p as getValidityAnchor, i as i$1, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="radio">` validation.
+ */
+class RadioValidator extends Validator {
+    computeValidity(states) {
+        if (!this.radioElement) {
+            // Lazily create the radio element
+            this.radioElement = document.createElement('input');
+            this.radioElement.type = 'radio';
+            // A name is required for validation to run
+            this.radioElement.name = 'group';
+        }
+        let isRequired = false;
+        let isChecked = false;
+        for (const { checked, required } of states) {
+            if (required) {
+                isRequired = true;
+            }
+            if (checked) {
+                isChecked = true;
+            }
+        }
+        // Firefox v119 doesn't compute grouped radio validation correctly while
+        // they are detached from the DOM, which is why we don't render multiple
+        // virtual <input>s. Instead, we can check the required/checked states and
+        // grab the i18n'd validation message if the value is missing.
+        this.radioElement.checked = isChecked;
+        this.radioElement.required = isRequired;
+        return {
+            validity: {
+                valueMissing: isRequired && !isChecked,
+            },
+            validationMessage: this.radioElement.validationMessage,
+        };
+    }
+    equals(prevGroup, nextGroup) {
+        if (prevGroup.length !== nextGroup.length) {
+            return false;
+        }
+        for (let i = 0; i < prevGroup.length; i++) {
+            const prev = prevGroup[i];
+            const next = nextGroup[i];
+            if (prev.checked !== next.checked || prev.required !== next.required) {
+                return false;
+            }
+        }
+        return true;
+    }
+    copy(states) {
+        // Cast as unknown since typescript does not have enough information to
+        // infer that the array always has at least one element.
+        return states.map(({ checked, required }) => ({
+            checked,
+            required,
+        }));
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyToggle extends LitElement {
+ *   get checked() { return this[CHECKED]; }
+ *   set checked(checked: boolean) {
+ *     const oldValue = this.checked;
+ *     if (oldValue === checked) {
+ *       return;
+ *     }
+ *
+ *     this[CHECKED] = checked;
+ *     this.selectionController.handleCheckedChange();
+ *     this.requestUpdate('checked', oldValue);
+ *   }
+ *
+ *   [CHECKED] = false;
+ *
+ *   private selectionController = new SingleSelectionController(this);
+ *
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
+ *   }
+ * }
+ */
+class SingleSelectionController {
+    /**
+     * All single selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls() {
+        const name = this.host.getAttribute('name');
+        if (!name || !this.root || !this.host.isConnected) {
+            return [this.host];
+        }
+        // Cast as unknown since there is not enough information for typescript to
+        // know that there is always at least one element (the host).
+        return Array.from(this.root.querySelectorAll(`[name="${name}"]`));
+    }
+    constructor(host) {
+        this.host = host;
+        this.focused = false;
+        this.root = null;
+        this.handleFocusIn = () => {
+            this.focused = true;
+            this.updateTabIndices();
+        };
+        this.handleFocusOut = () => {
+            this.focused = false;
+            this.updateTabIndices();
+        };
+        /**
+         * Handles arrow key events from the host. Using the arrow keys will
+         * select and check the next or previous sibling with the host's
+         * `name` attribute.
+         */
+        this.handleKeyDown = (event) => {
+            const isDown = event.key === 'ArrowDown';
+            const isUp = event.key === 'ArrowUp';
+            const isLeft = event.key === 'ArrowLeft';
+            const isRight = event.key === 'ArrowRight';
+            // Ignore non-arrow keys
+            if (!isLeft && !isRight && !isDown && !isUp) {
+                return;
+            }
+            // Don't try to select another sibling if there aren't any.
+            const siblings = this.controls;
+            if (!siblings.length) {
+                return;
+            }
+            // Prevent default interactions on the element for arrow keys,
+            // since this controller will introduce new behavior.
+            event.preventDefault();
+            // Check if moving forwards or backwards
+            const isRtl = getComputedStyle(this.host).direction === 'rtl';
+            const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+            const hostIndex = siblings.indexOf(this.host);
+            let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1;
+            // Search for the next sibling that is not disabled to select.
+            // If we return to the host index, there is nothing to select.
+            while (nextIndex !== hostIndex) {
+                if (nextIndex >= siblings.length) {
+                    // Return to start if moving past the last item.
+                    nextIndex = 0;
+                }
+                else if (nextIndex < 0) {
+                    // Go to end if moving before the first item.
+                    nextIndex = siblings.length - 1;
+                }
+                // Check if the next sibling is disabled. If so,
+                // move the index and continue searching.
+                const nextSibling = siblings[nextIndex];
+                if (nextSibling.hasAttribute('disabled')) {
+                    if (forwards) {
+                        nextIndex++;
+                    }
+                    else {
+                        nextIndex--;
+                    }
+                    continue;
+                }
+                // Uncheck and remove focusability from other siblings.
+                for (const sibling of siblings) {
+                    if (sibling !== nextSibling) {
+                        sibling.checked = false;
+                        sibling.tabIndex = -1;
+                        sibling.blur();
+                    }
+                }
+                // The next sibling should be checked, focused and dispatch a change event
+                nextSibling.checked = true;
+                nextSibling.tabIndex = 0;
+                nextSibling.focus();
+                // Fire a change event since the change is triggered by a user action.
+                // This matches native <input type="radio"> behavior.
+                nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
+                break;
+            }
+        };
+    }
+    hostConnected() {
+        this.root = this.host.getRootNode();
+        this.host.addEventListener('keydown', this.handleKeyDown);
+        this.host.addEventListener('focusin', this.handleFocusIn);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+        if (this.host.checked) {
+            // Uncheck other siblings when attached if already checked. This mimics
+            // native <input type="radio"> behavior.
+            this.uncheckSiblings();
+        }
+        // Update siblings after a microtask to allow other synchronous connected
+        // callbacks to settle before triggering additional Lit updates. This avoids
+        // stack overflow issues when too many elements are being rendered and
+        // connected at the same time.
+        queueMicrotask(() => {
+            // Update for the newly added host.
+            this.updateTabIndices();
+        });
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+        this.host.removeEventListener('focusin', this.handleFocusIn);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+        // Update siblings after a microtask to allow other synchronous disconnected
+        // callbacks to settle before triggering additional Lit updates. This avoids
+        // stack overflow issues when too many elements are being rendered and
+        // connected at the same time.
+        queueMicrotask(() => {
+            // Update for siblings that are still connected.
+            this.updateTabIndices();
+            this.root = null;
+        });
+    }
+    /**
+     * Should be called whenever the host's `checked` property changes
+     * synchronously.
+     */
+    handleCheckedChange() {
+        if (!this.host.checked) {
+            return;
+        }
+        this.uncheckSiblings();
+        this.updateTabIndices();
+    }
+    uncheckSiblings() {
+        for (const sibling of this.controls) {
+            if (sibling !== this.host) {
+                sibling.checked = false;
+            }
+        }
+    }
+    /**
+     * Updates the `tabindex` of the host and its siblings.
+     */
+    updateTabIndices() {
+        // There are three tabindex states for a group of elements:
+        // 1. If any are checked, that element is focusable.
+        const siblings = this.controls;
+        const checkedSibling = siblings.find((sibling) => sibling.checked);
+        // 2. If an element is focused, the others are no longer focusable.
+        if (checkedSibling || this.focused) {
+            const focusable = checkedSibling || this.host;
+            focusable.tabIndex = 0;
+            for (const sibling of siblings) {
+                if (sibling !== focusable) {
+                    sibling.tabIndex = -1;
+                }
+            }
+            return;
+        }
+        // 3. If none are checked or focused, all are focusable.
+        for (const sibling of siblings) {
+            sibling.tabIndex = 0;
+        }
+    }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+const CHECKED = Symbol('checked');
+let maskId = 0;
+// Separate variable needed for closure.
+const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(s))));
+/**
+ * A radio component.
+ *
+ * @fires input {InputEvent} Dispatched when the value changes from user
+ * interaction. --bubbles
+ * @fires change {Event} Dispatched when the value changes from user
+ * interaction. --bubbles --composed
+ */
+class Radio extends radioBaseClass {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[CHECKED];
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
+    }
+    constructor() {
+        super();
+        // Unique maskId is required because of a Safari bug that fail to persist
+        // reference to the mask. This should be removed once the bug is fixed.
+        this.maskId = `cutout${++maskId}`;
+        this[_a] = false;
+        /**
+         * Whether or not the radio is required. If any radio is required in a group,
+         * all radios are implicitly required.
+         */
+        this.required = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.selectionController = new SingleSelectionController(this);
+        this.addController(this.selectionController);
+        {
+            this[internals].role = 'radio';
+            this.addEventListener('click', this.handleClick.bind(this));
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+    }
+    render() {
+        const classes = { 'checked': this.checked };
+        return x `
+      <div class="container ${o(classes)}" aria-hidden="true">
+        <md-ripple
+          part="ripple"
+          .control=${this}
+          ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
+        <svg class="icon" viewBox="0 0 20 20">
+          <mask id="${this.maskId}">
+            <rect width="100%" height="100%" fill="white" />
+            <circle cx="10" cy="10" r="8" fill="black" />
+          </mask>
+          <circle
+            class="outer circle"
+            cx="10"
+            cy="10"
+            r="10"
+            mask="url(#${this.maskId})" />
+          <circle class="inner circle" cx="10" cy="10" r="5" />
+        </svg>
+
+        <div class="touch-target"></div>
+      </div>
+    `;
+    }
+    updated() {
+        this[internals].ariaChecked = String(this.checked);
+    }
+    async handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        // allow event to propagate to user code after a microtask.
+        await 0;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (isActivationClick(event)) {
+            this.focus();
+        }
+        // Per spec, clicking on a radio input always selects it.
+        this.checked = true;
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    }
+    async handleKeydown(event) {
+        // allow event to propagate to user code after a microtask.
+        await 0;
+        if (event.key !== ' ' || event.defaultPrevented) {
+            return;
+        }
+        this.click();
+    }
+    [(_a = CHECKED, getFormValue)]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    formResetCallback() {
+        // The checked property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.checked = this.hasAttribute('checked');
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new RadioValidator(() => {
+            if (!this.selectionController) {
+                // Validation runs on superclass construction, so selection controller
+                // might not actually be ready until this class constructs.
+                return [this];
+            }
+            return this.selectionController.controls;
+        });
+    }
+    [getValidityAnchor]() {
+        return this.container;
+    }
+}
+__decorate([
+    n({ type: Boolean })
+], Radio.prototype, "checked", null);
+__decorate([
+    n({ type: Boolean })
+], Radio.prototype, "required", void 0);
+__decorate([
+    n()
+], Radio.prototype, "value", void 0);
+__decorate([
+    i('.container')
+], Radio.prototype, "container", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./radio/internal/radio-styles.css.
+const styles = i$1 `@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Radio buttons allow users to select one option from a set.
+ *
+ * @description
+ * Radio buttons are the recommended way to allow users to make a single
+ * selection from a list of options.
+ *
+ * Only one radio button can be selected at a time.
+ *
+ * Use radio buttons to:
+ * - Select a single option from a set
+ * - Expose all available options
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRadio = class MdRadio extends Radio {
+};
+MdRadio.styles = [styles];
+MdRadio = __decorate([
+    e('md-radio')
+], MdRadio);
+
+export { MdRadio };
diff --git a/md-web/ripple.js b/md-web/ripple.js
new file mode 100644
index 0000000..b9f2970
--- /dev/null
+++ b/md-web/ripple.js
@@ -0,0 +1,3 @@
+export const __dummy_loader = () => {};
+
+export { ae as MdRipple } from './core.js';
diff --git a/md-web/select.js b/md-web/select.js
new file mode 100644
index 0000000..56bf62c
--- /dev/null
+++ b/md-web/select.js
@@ -0,0 +1,125 @@
+export const __dummy_loader = () => {};
+
+import { Z as Select, G as i, i as i$1, $ as styles$2, _ as __decorate, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+class FilledSelect extends Select {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i `md-filled-field`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./select/internal/filled-select-styles.css.
+const styles$1 = i$1 `:host{--_text-field-active-indicator-color: var(--md-filled-select-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-active-indicator-height: var(--md-filled-select-text-field-active-indicator-height, 1px);--_text-field-container-color: var(--md-filled-select-text-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_text-field-disabled-active-indicator-color: var(--md-filled-select-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-active-indicator-height: var(--md-filled-select-text-field-disabled-active-indicator-height, 1px);--_text-field-disabled-active-indicator-opacity: var(--md-filled-select-text-field-disabled-active-indicator-opacity, 0.38);--_text-field-disabled-container-color: var(--md-filled-select-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-container-opacity: var(--md-filled-select-text-field-disabled-container-opacity, 0.04);--_text-field-disabled-input-text-color: var(--md-filled-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-filled-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-filled-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-filled-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-filled-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-filled-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-supporting-text-color: var(--md-filled-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-filled-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-filled-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-filled-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-active-indicator-color: var(--md-filled-select-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-active-indicator-color: var(--md-filled-select-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-input-text-color: var(--md-filled-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-filled-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-filled-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-supporting-text-color: var(--md-filled-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-filled-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-active-indicator-color: var(--md-filled-select-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-input-text-color: var(--md-filled-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-filled-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-filled-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-state-layer-color: var(--md-filled-select-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-state-layer-opacity: var(--md-filled-select-text-field-error-hover-state-layer-opacity, 0.08);--_text-field-error-hover-supporting-text-color: var(--md-filled-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-filled-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-filled-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-filled-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-filled-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-supporting-text-color: var(--md-filled-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-filled-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-active-indicator-color: var(--md-filled-select-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-active-indicator-height: var(--md-filled-select-text-field-focus-active-indicator-height, 3px);--_text-field-focus-input-text-color: var(--md-filled-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-filled-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-filled-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-supporting-text-color: var(--md-filled-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-filled-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-active-indicator-color: var(--md-filled-select-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-active-indicator-height: var(--md-filled-select-text-field-hover-active-indicator-height, 1px);--_text-field-hover-input-text-color: var(--md-filled-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-filled-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-filled-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-state-layer-color: var(--md-filled-select-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-state-layer-opacity: var(--md-filled-select-text-field-hover-state-layer-opacity, 0.08);--_text-field-hover-supporting-text-color: var(--md-filled-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-filled-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-filled-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-filled-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-filled-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-filled-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-filled-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-filled-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-filled-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-filled-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-filled-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-filled-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-filled-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-filled-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-filled-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-filled-select-text-field-leading-icon-size, 24px);--_text-field-supporting-text-color: var(--md-filled-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-filled-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-filled-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-filled-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-filled-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-filled-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-filled-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-filled-select-text-field-container-shape-start-start, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-filled-select-text-field-container-shape-start-end, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-filled-select-text-field-container-shape-end-end, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_text-field-container-shape-end-start: var(--md-filled-select-text-field-container-shape-end-start, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--md-filled-field-active-indicator-color: var(--_text-field-active-indicator-color);--md-filled-field-active-indicator-height: var(--_text-field-active-indicator-height);--md-filled-field-container-color: var(--_text-field-container-color);--md-filled-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-filled-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-filled-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-filled-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-filled-field-content-color: var(--_text-field-input-text-color);--md-filled-field-content-font: var(--_text-field-input-text-font);--md-filled-field-content-line-height: var(--_text-field-input-text-line-height);--md-filled-field-content-size: var(--_text-field-input-text-size);--md-filled-field-content-weight: var(--_text-field-input-text-weight);--md-filled-field-disabled-active-indicator-color: var(--_text-field-disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height: var(--_text-field-disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity: var(--_text-field-disabled-active-indicator-opacity);--md-filled-field-disabled-container-color: var(--_text-field-disabled-container-color);--md-filled-field-disabled-container-opacity: var(--_text-field-disabled-container-opacity);--md-filled-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-filled-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-filled-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-filled-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-filled-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-filled-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-filled-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color: var(--_text-field-error-active-indicator-color);--md-filled-field-error-content-color: var(--_text-field-error-input-text-color);--md-filled-field-error-focus-active-indicator-color: var(--_text-field-error-focus-active-indicator-color);--md-filled-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-filled-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-filled-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color: var(--_text-field-error-hover-active-indicator-color);--md-filled-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-filled-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-filled-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color: var(--_text-field-error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity: var(--_text-field-error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-filled-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-filled-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-filled-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-filled-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-filled-field-focus-active-indicator-color: var(--_text-field-focus-active-indicator-color);--md-filled-field-focus-active-indicator-height: var(--_text-field-focus-active-indicator-height);--md-filled-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-filled-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-filled-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-filled-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-filled-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color: var(--_text-field-hover-active-indicator-color);--md-filled-field-hover-active-indicator-height: var(--_text-field-hover-active-indicator-height);--md-filled-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-filled-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-filled-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-filled-field-hover-state-layer-color: var(--_text-field-hover-state-layer-color);--md-filled-field-hover-state-layer-opacity: var(--_text-field-hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-filled-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-filled-field-label-text-color: var(--_text-field-label-text-color);--md-filled-field-label-text-font: var(--_text-field-label-text-font);--md-filled-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-filled-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-filled-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-filled-field-label-text-size: var(--_text-field-label-text-size);--md-filled-field-label-text-weight: var(--_text-field-label-text-weight);--md-filled-field-leading-content-color: var(--_text-field-leading-icon-color);--md-filled-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-filled-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-filled-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-filled-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-filled-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-filled-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "filled"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-filled-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-filled-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledSelect = class MdFilledSelect extends FilledSelect {
+};
+MdFilledSelect.styles = [styles$2, styles$1];
+MdFilledSelect = __decorate([
+    e('md-filled-select')
+], MdFilledSelect);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+class OutlinedSelect extends Select {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i `md-outlined-field`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./select/internal/outlined-select-styles.css.
+const styles = i$1 `:host{--_text-field-disabled-input-text-color: var(--md-outlined-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-outlined-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-outlined-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-outlined-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-outlined-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-outlined-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-outline-color: var(--md-outlined-select-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-outline-opacity: var(--md-outlined-select-text-field-disabled-outline-opacity, 0.12);--_text-field-disabled-outline-width: var(--md-outlined-select-text-field-disabled-outline-width, 1px);--_text-field-disabled-supporting-text-color: var(--md-outlined-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-outlined-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-outlined-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-outlined-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-focus-input-text-color: var(--md-outlined-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-outlined-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-outlined-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-outline-color: var(--md-outlined-select-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-supporting-text-color: var(--md-outlined-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-outlined-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-input-text-color: var(--md-outlined-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-outlined-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-outlined-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-outline-color: var(--md-outlined-select-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-supporting-text-color: var(--md-outlined-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-outlined-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-outlined-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-outlined-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-outlined-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-outline-color: var(--md-outlined-select-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-supporting-text-color: var(--md-outlined-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-outlined-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-input-text-color: var(--md-outlined-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-outlined-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-outlined-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-outline-color: var(--md-outlined-select-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-outline-width: var(--md-outlined-select-text-field-focus-outline-width, 3px);--_text-field-focus-supporting-text-color: var(--md-outlined-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-outlined-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-input-text-color: var(--md-outlined-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-outlined-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-outlined-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-outline-color: var(--md-outlined-select-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-outline-width: var(--md-outlined-select-text-field-hover-outline-width, 1px);--_text-field-hover-supporting-text-color: var(--md-outlined-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-outlined-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-outlined-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-outlined-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-outlined-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-outlined-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-outlined-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-outlined-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-outlined-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-outlined-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-outlined-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-outlined-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-outlined-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-outlined-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-outlined-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-outlined-select-text-field-leading-icon-size, 24px);--_text-field-outline-color: var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_text-field-outline-width: var(--md-outlined-select-text-field-outline-width, 1px);--_text-field-supporting-text-color: var(--md-outlined-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-outlined-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-outlined-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-outlined-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-outlined-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-outlined-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-outlined-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-outlined-select-text-field-container-shape-start-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-outlined-select-text-field-container-shape-start-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-outlined-select-text-field-container-shape-end-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-start: var(--md-outlined-select-text-field-container-shape-end-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--md-outlined-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-outlined-field-content-color: var(--_text-field-input-text-color);--md-outlined-field-content-font: var(--_text-field-input-text-font);--md-outlined-field-content-line-height: var(--_text-field-input-text-line-height);--md-outlined-field-content-size: var(--_text-field-input-text-size);--md-outlined-field-content-weight: var(--_text-field-input-text-weight);--md-outlined-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_text-field-disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_text-field-disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_text-field-disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_text-field-error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_text-field-error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_text-field-error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_text-field-error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_text-field-focus-outline-color);--md-outlined-field-focus-outline-width: var(--_text-field-focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_text-field-hover-outline-color);--md-outlined-field-hover-outline-width: var(--_text-field-hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_text-field-label-text-color);--md-outlined-field-label-text-font: var(--_text-field-label-text-font);--md-outlined-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-outlined-field-label-text-size: var(--_text-field-label-text-size);--md-outlined-field-label-text-weight: var(--_text-field-label-text-weight);--md-outlined-field-leading-content-color: var(--_text-field-leading-icon-color);--md-outlined-field-outline-color: var(--_text-field-outline-color);--md-outlined-field-outline-width: var(--_text-field-outline-width);--md-outlined-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-outlined-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-outlined-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "outlined"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-outlined-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-outlined-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedSelect = class MdOutlinedSelect extends OutlinedSelect {
+};
+MdOutlinedSelect.styles = [styles$2, styles];
+MdOutlinedSelect = __decorate([
+    e('md-outlined-select')
+], MdOutlinedSelect);
diff --git a/md-web/slider.js b/md-web/slider.js
new file mode 100644
index 0000000..0da79ac
--- /dev/null
+++ b/md-web/slider.js
@@ -0,0 +1,759 @@
+export const __dummy_loader = () => {};
+
+import { i, m as mixinDelegatesAria, b as mixinFormAssociated, s, _ as __decorate, n as n$1, c as i$1, Y as e, t, d as isActivationClick, f as dispatchActivationClick, x, o, I as o$1, A, r as redispatchEvent, g as getFormValue, q as mixinElementInternals, e as e$1 } from './core.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./slider/internal/forced-colors-styles.css.
+const styles$1 = i `@media(forced-colors: active){:host{--md-slider-active-track-color: CanvasText;--md-slider-disabled-active-track-color: GrayText;--md-slider-disabled-active-track-opacity: 1;--md-slider-disabled-handle-color: GrayText;--md-slider-disabled-inactive-track-color: GrayText;--md-slider-disabled-inactive-track-opacity: 1;--md-slider-focus-handle-color: CanvasText;--md-slider-handle-color: CanvasText;--md-slider-handle-shadow-color: Canvas;--md-slider-hover-handle-color: CanvasText;--md-slider-hover-state-layer-color: Canvas;--md-slider-hover-state-layer-opacity: 1;--md-slider-inactive-track-color: Canvas;--md-slider-label-container-color: Canvas;--md-slider-label-text-color: CanvasText;--md-slider-pressed-handle-color: CanvasText;--md-slider-pressed-state-layer-color: Canvas;--md-slider-pressed-state-layer-opacity: 1;--md-slider-with-overlap-handle-outline-color: CanvasText}.label,.label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}.tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E")}.tickmarks::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}:host([disabled]) .tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E")}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n(n,o,r){return n?o():null==r?void 0:r()}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Disable warning for classMap with destructuring
+// tslint:disable:no-implicit-dictionary-conversion
+// Separate variable needed for closure.
+const sliderBaseClass = mixinDelegatesAria(mixinFormAssociated(mixinElementInternals(s)));
+/**
+ * Slider component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ */
+class Slider extends sliderBaseClass {
+    /**
+     * The HTML name to use in form submission for a range slider's starting
+     * value. Use `name` instead if both the start and end values should use the
+     * same name.
+     */
+    get nameStart() {
+        return this.getAttribute('name-start') ?? this.name;
+    }
+    set nameStart(name) {
+        this.setAttribute('name-start', name);
+    }
+    /**
+     * The HTML name to use in form submission for a range slider's ending value.
+     * Use `name` instead if both the start and end values should use the same
+     * name.
+     */
+    get nameEnd() {
+        return this.getAttribute('name-end') ?? this.nameStart;
+    }
+    set nameEnd(name) {
+        this.setAttribute('name-end', name);
+    }
+    // Note: start aria-* properties are only applied when range=true, which is
+    // why they do not need to handle both cases.
+    get renderAriaLabelStart() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return (this.ariaLabelStart ||
+            (ariaLabel && `${ariaLabel} start`) ||
+            this.valueLabelStart ||
+            String(this.valueStart));
+    }
+    get renderAriaValueTextStart() {
+        return (this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart));
+    }
+    // Note: end aria-* properties are applied for single and range sliders, which
+    // is why it needs to handle `this.range` (while start aria-* properties do
+    // not).
+    get renderAriaLabelEnd() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        if (this.range) {
+            return (this.ariaLabelEnd ||
+                (ariaLabel && `${ariaLabel} end`) ||
+                this.valueLabelEnd ||
+                String(this.valueEnd));
+        }
+        return ariaLabel || this.valueLabel || String(this.value);
+    }
+    get renderAriaValueTextEnd() {
+        if (this.range) {
+            return (this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd));
+        }
+        // Needed for conformance
+        const { ariaValueText } = this;
+        return ariaValueText || this.valueLabel || String(this.value);
+    }
+    constructor() {
+        super();
+        /**
+         * The slider minimum value
+         */
+        this.min = 0;
+        /**
+         * The slider maximum value
+         */
+        this.max = 100;
+        /**
+         * An optional label for the slider's value displayed when range is
+         * false; if not set, the label is the value itself.
+         */
+        this.valueLabel = '';
+        /**
+         * An optional label for the slider's start value displayed when
+         * range is true; if not set, the label is the valueStart itself.
+         */
+        this.valueLabelStart = '';
+        /**
+         * An optional label for the slider's end value displayed when
+         * range is true; if not set, the label is the valueEnd itself.
+         */
+        this.valueLabelEnd = '';
+        /**
+         * Aria label for the slider's start handle displayed when
+         * range is true.
+         */
+        this.ariaLabelStart = '';
+        /**
+         * Aria value text for the slider's start value displayed when
+         * range is true.
+         */
+        this.ariaValueTextStart = '';
+        /**
+         * Aria label for the slider's end handle displayed when
+         * range is true.
+         */
+        this.ariaLabelEnd = '';
+        /**
+         * Aria value text for the slider's end value displayed when
+         * range is true.
+         */
+        this.ariaValueTextEnd = '';
+        /**
+         * The step between values.
+         */
+        this.step = 1;
+        /**
+         * Whether or not to show tick marks.
+         */
+        this.ticks = false;
+        /**
+         * Whether or not to show a value label when activated.
+         */
+        this.labeled = false;
+        /**
+         * Whether or not to show a value range. When false, the slider displays
+         * a slideable handle for the value property; when true, it displays
+         * slideable handles for the valueStart and valueEnd properties.
+         */
+        this.range = false;
+        // handle hover/pressed states are set manually since the handle
+        // does not receive pointer events so that the native inputs are
+        // interaction targets.
+        this.handleStartHover = false;
+        this.handleEndHover = false;
+        this.startOnTop = false;
+        this.handlesOverlapping = false;
+        // used in synthetic events generated to control ripple hover state.
+        this.ripplePointerId = 1;
+        // flag to prevent processing of re-dispatched input event.
+        this.isRedispatchingEvent = false;
+        {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event) || !this.inputEnd) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.inputEnd);
+            });
+        }
+    }
+    focus() {
+        this.inputEnd?.focus();
+    }
+    willUpdate(changed) {
+        this.renderValueStart = changed.has('valueStart')
+            ? this.valueStart
+            : this.inputStart?.valueAsNumber;
+        const endValueChanged = (changed.has('valueEnd') && this.range) || changed.has('value');
+        this.renderValueEnd = endValueChanged
+            ? this.range
+                ? this.valueEnd
+                : this.value
+            : this.inputEnd?.valueAsNumber;
+        // manually handle ripple hover state since the handle is pointer events
+        // none.
+        if (changed.get('handleStartHover') !== undefined) {
+            this.toggleRippleHover(this.rippleStart, this.handleStartHover);
+        }
+        else if (changed.get('handleEndHover') !== undefined) {
+            this.toggleRippleHover(this.rippleEnd, this.handleEndHover);
+        }
+    }
+    updated(changed) {
+        // Validate input rendered value and re-render if necessary. This ensures
+        // the rendred handle stays in sync with the input thumb which is used for
+        // interaction. These can get out of sync if a supplied value does not
+        // map to an exactly stepped value between min and max.
+        if (this.range) {
+            this.renderValueStart = this.inputStart.valueAsNumber;
+        }
+        this.renderValueEnd = this.inputEnd.valueAsNumber;
+        // update values if they are unset
+        // when using a range, default to equi-distant between
+        // min - valueStart - valueEnd - max
+        if (this.range) {
+            const segment = (this.max - this.min) / 3;
+            if (this.valueStart === undefined) {
+                this.inputStart.valueAsNumber = this.min + segment;
+                // read actual value from input
+                const v = this.inputStart.valueAsNumber;
+                this.valueStart = this.renderValueStart = v;
+            }
+            if (this.valueEnd === undefined) {
+                this.inputEnd.valueAsNumber = this.min + 2 * segment;
+                // read actual value from input
+                const v = this.inputEnd.valueAsNumber;
+                this.valueEnd = this.renderValueEnd = v;
+            }
+        }
+        else {
+            this.value ??= this.renderValueEnd;
+        }
+        if (changed.has('range') ||
+            changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') ||
+            this.isUpdatePending) {
+            // Only check if the handle nubs are overlapping, as the ripple touch
+            // target extends subtantially beyond the boundary of the handle nub.
+            const startNub = this.handleStart?.querySelector('.handleNub');
+            const endNub = this.handleEnd?.querySelector('.handleNub');
+            this.handlesOverlapping = isOverlapping(startNub, endNub);
+        }
+        // called to finish the update imediately;
+        // note, this is a no-op unless an update is scheduled
+        this.performUpdate();
+    }
+    render() {
+        const step = this.step === 0 ? 1 : this.step;
+        const range = Math.max(this.max - this.min, step);
+        const startFraction = this.range
+            ? ((this.renderValueStart ?? this.min) - this.min) / range
+            : 0;
+        const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
+        const containerStyles = {
+            // for clipping inputs and active track.
+            '--_start-fraction': String(startFraction),
+            '--_end-fraction': String(endFraction),
+            // for generating tick marks
+            '--_tick-count': String(range / step),
+        };
+        const containerClasses = { ranged: this.range };
+        // optional label values to show in place of the value.
+        const labelStart = this.valueLabelStart || String(this.renderValueStart);
+        const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ||
+            String(this.renderValueEnd);
+        const inputStartProps = {
+            start: true,
+            value: this.renderValueStart,
+            ariaLabel: this.renderAriaLabelStart,
+            ariaValueText: this.renderAriaValueTextStart,
+            ariaMin: this.min,
+            ariaMax: this.valueEnd ?? this.max,
+        };
+        const inputEndProps = {
+            start: false,
+            value: this.renderValueEnd,
+            ariaLabel: this.renderAriaLabelEnd,
+            ariaValueText: this.renderAriaValueTextEnd,
+            ariaMin: this.range ? this.valueStart ?? this.min : this.min,
+            ariaMax: this.max,
+        };
+        const handleStartProps = {
+            start: true,
+            hover: this.handleStartHover,
+            label: labelStart,
+        };
+        const handleEndProps = {
+            start: false,
+            hover: this.handleEndHover,
+            label: labelEnd,
+        };
+        const handleContainerClasses = {
+            hover: this.handleStartHover || this.handleEndHover,
+        };
+        return x ` <div
+      class="container ${o(containerClasses)}"
+      style=${o$1(containerStyles)}>
+      ${n(this.range, () => this.renderInput(inputStartProps))}
+      ${this.renderInput(inputEndProps)} ${this.renderTrack()}
+      <div class="handleContainerPadded">
+        <div class="handleContainerBlock">
+          <div class="handleContainer ${o(handleContainerClasses)}">
+            ${n(this.range, () => this.renderHandle(handleStartProps))}
+            ${this.renderHandle(handleEndProps)}
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
+    renderTrack() {
+        return x `
+      <div class="track"></div>
+      ${this.ticks ? x `<div class="tickmarks"></div>` : A}
+    `;
+    }
+    renderLabel(value) {
+        return x `<div class="label" aria-hidden="true">
+      <span class="labelContent" part="label">${value}</span>
+    </div>`;
+    }
+    renderHandle({ start, hover, label, }) {
+        const onTop = !this.disabled && start === this.startOnTop;
+        const isOverlapping = !this.disabled && this.handlesOverlapping;
+        const name = start ? 'start' : 'end';
+        return x `<div
+      class="handle ${o({
+            [name]: true,
+            hover,
+            onTop,
+            isOverlapping,
+        })}">
+      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
+      <md-ripple
+        for=${name}
+        class=${name}
+        ?disabled=${this.disabled}></md-ripple>
+      <div class="handleNub">
+        <md-elevation part="elevation"></md-elevation>
+      </div>
+      ${n(this.labeled, () => this.renderLabel(label))}
+    </div>`;
+    }
+    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }) {
+        // Slider requires min/max set to the overall min/max for both inputs.
+        // This is reported to screen readers, which is why we need aria-valuemin
+        // and aria-valuemax.
+        const name = start ? `start` : `end`;
+        return x `<input
+      type="range"
+      class="${o({
+            start,
+            end: !start,
+        })}"
+      @focus=${this.handleFocus}
+      @pointerdown=${this.handleDown}
+      @pointerup=${this.handleUp}
+      @pointerenter=${this.handleEnter}
+      @pointermove=${this.handleMove}
+      @pointerleave=${this.handleLeave}
+      @keydown=${this.handleKeydown}
+      @keyup=${this.handleKeyup}
+      @input=${this.handleInput}
+      @change=${this.handleChange}
+      id=${name}
+      .disabled=${this.disabled}
+      .min=${String(this.min)}
+      aria-valuemin=${ariaMin}
+      .max=${String(this.max)}
+      aria-valuemax=${ariaMax}
+      .step=${String(this.step)}
+      .value=${String(value)}
+      .tabIndex=${start ? 1 : 0}
+      aria-label=${ariaLabel || A}
+      aria-valuetext=${ariaValueText} />`;
+    }
+    async toggleRippleHover(ripple, hovering) {
+        const rippleEl = await ripple;
+        if (!rippleEl) {
+            return;
+        }
+        // TODO(b/269799771): improve slider ripple connection
+        if (hovering) {
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
+        }
+        else {
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', {
+                isPrimary: true,
+                pointerId: this.ripplePointerId,
+            }));
+        }
+    }
+    handleFocus(event) {
+        this.updateOnTop(event.target);
+    }
+    startAction(event) {
+        const target = event.target;
+        const fixed = target === this.inputStart ? this.inputEnd : this.inputStart;
+        this.action = {
+            canFlip: event.type === 'pointerdown',
+            flipped: false,
+            target,
+            fixed,
+            values: new Map([
+                [target, target.valueAsNumber],
+                [fixed, fixed?.valueAsNumber],
+            ]),
+        };
+    }
+    finishAction(event) {
+        this.action = undefined;
+    }
+    handleKeydown(event) {
+        this.startAction(event);
+    }
+    handleKeyup(event) {
+        this.finishAction(event);
+    }
+    handleDown(event) {
+        this.startAction(event);
+        this.ripplePointerId = event.pointerId;
+        const isStart = event.target === this.inputStart;
+        // Since handle moves to pointer on down and there may not be a move,
+        // it needs to be considered hovered..
+        this.handleStartHover =
+            !this.disabled && isStart && Boolean(this.handleStart);
+        this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);
+    }
+    async handleUp(event) {
+        if (!this.action) {
+            return;
+        }
+        const { target, values, flipped } = this.action;
+        //  Async here for Firefox because input can be after pointerup
+        //  when value is calmped.
+        await new Promise(requestAnimationFrame);
+        if (target !== undefined) {
+            // Ensure Safari focuses input so label renders.
+            // Ensure any flipped input is focused so the tab order is right.
+            target.focus();
+            // When action is flipped, change must be fired manually since the
+            // real event target did not change.
+            if (flipped && target.valueAsNumber !== values.get(target)) {
+                target.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+        this.finishAction(event);
+    }
+    /**
+     * The move handler tracks handle hovering to facilitate proper ripple
+     * behavior on the slider handle. This is needed because user interaction with
+     * the native input is leveraged to position the handle. Because the separate
+     * displayed handle element has pointer events disabled (to allow interaction
+     * with the input) and the input's handle is a pseudo-element, neither can be
+     * the ripple's interactive element. Therefore the input is the ripple's
+     * interactive element and has a `ripple` directive; however the ripple
+     * is gated on the handle being hovered. In addition, because the ripple
+     * hover state is being specially handled, it must be triggered independent
+     * of the directive. This is done based on the hover state when the
+     * slider is updated.
+     */
+    handleMove(event) {
+        this.handleStartHover = !this.disabled && inBounds(event, this.handleStart);
+        this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd);
+    }
+    handleEnter(event) {
+        this.handleMove(event);
+    }
+    handleLeave() {
+        this.handleStartHover = false;
+        this.handleEndHover = false;
+    }
+    updateOnTop(input) {
+        this.startOnTop = input.classList.contains('start');
+    }
+    needsClamping() {
+        if (!this.action) {
+            return false;
+        }
+        const { target, fixed } = this.action;
+        const isStart = target === this.inputStart;
+        return isStart
+            ? target.valueAsNumber > fixed.valueAsNumber
+            : target.valueAsNumber < fixed.valueAsNumber;
+    }
+    // if start/end start coincident and the first drag input would e.g. move
+    // start > end, avoid clamping and "flip" to use the other input
+    // as the action target.
+    isActionFlipped() {
+        const { action } = this;
+        if (!action) {
+            return false;
+        }
+        const { target, fixed, values } = action;
+        if (action.canFlip) {
+            const coincident = values.get(target) === values.get(fixed);
+            if (coincident && this.needsClamping()) {
+                action.canFlip = false;
+                action.flipped = true;
+                action.target = fixed;
+                action.fixed = target;
+            }
+        }
+        return action.flipped;
+    }
+    // when flipped, apply the drag input to the flipped target and reset
+    // the actual target.
+    flipAction() {
+        if (!this.action) {
+            return false;
+        }
+        const { target, fixed, values } = this.action;
+        const changed = target.valueAsNumber !== fixed.valueAsNumber;
+        target.valueAsNumber = fixed.valueAsNumber;
+        fixed.valueAsNumber = values.get(fixed);
+        return changed;
+    }
+    // clamp such that start does not move beyond end and visa versa.
+    clampAction() {
+        if (!this.needsClamping() || !this.action) {
+            return false;
+        }
+        const { target, fixed } = this.action;
+        target.valueAsNumber = fixed.valueAsNumber;
+        return true;
+    }
+    handleInput(event) {
+        // avoid processing a re-dispatched event
+        if (this.isRedispatchingEvent) {
+            return;
+        }
+        let stopPropagation = false;
+        let redispatch = false;
+        if (this.range) {
+            if (this.isActionFlipped()) {
+                stopPropagation = true;
+                redispatch = this.flipAction();
+            }
+            if (this.clampAction()) {
+                stopPropagation = true;
+                redispatch = false;
+            }
+        }
+        const target = event.target;
+        this.updateOnTop(target);
+        // update value only on interaction
+        if (this.range) {
+            this.valueStart = this.inputStart.valueAsNumber;
+            this.valueEnd = this.inputEnd.valueAsNumber;
+        }
+        else {
+            this.value = this.inputEnd.valueAsNumber;
+        }
+        // control external visibility of input event
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        // ensure event path is correct when flipped.
+        if (redispatch) {
+            this.isRedispatchingEvent = true;
+            redispatchEvent(target, event);
+            this.isRedispatchingEvent = false;
+        }
+    }
+    handleChange(event) {
+        // prevent keyboard triggered changes from dispatching for
+        // clamped values; note, this only occurs for keyboard
+        const changeTarget = event.target;
+        const { target, values } = this.action ?? {};
+        const squelch = target && target.valueAsNumber === values.get(changeTarget);
+        if (!squelch) {
+            redispatchEvent(this, event);
+        }
+        // ensure keyboard triggered change clears action.
+        this.finishAction(event);
+    }
+    [getFormValue]() {
+        if (this.range) {
+            const data = new FormData();
+            data.append(this.nameStart, String(this.valueStart));
+            data.append(this.nameEnd, String(this.valueEnd));
+            return data;
+        }
+        return String(this.value);
+    }
+    formResetCallback() {
+        if (this.range) {
+            const valueStart = this.getAttribute('value-start');
+            this.valueStart = valueStart !== null ? Number(valueStart) : undefined;
+            const valueEnd = this.getAttribute('value-end');
+            this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;
+            return;
+        }
+        const value = this.getAttribute('value');
+        this.value = value !== null ? Number(value) : undefined;
+    }
+    formStateRestoreCallback(state) {
+        if (Array.isArray(state)) {
+            const [[, valueStart], [, valueEnd]] = state;
+            this.valueStart = Number(valueStart);
+            this.valueEnd = Number(valueEnd);
+            this.range = true;
+            return;
+        }
+        this.value = Number(state);
+        this.range = false;
+    }
+}
+/** @nocollapse */
+Slider.shadowRootOptions = {
+    ...s.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    n$1({ type: Number })
+], Slider.prototype, "min", void 0);
+__decorate([
+    n$1({ type: Number })
+], Slider.prototype, "max", void 0);
+__decorate([
+    n$1({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    n$1({ type: Number, attribute: 'value-start' })
+], Slider.prototype, "valueStart", void 0);
+__decorate([
+    n$1({ type: Number, attribute: 'value-end' })
+], Slider.prototype, "valueEnd", void 0);
+__decorate([
+    n$1({ attribute: 'value-label' })
+], Slider.prototype, "valueLabel", void 0);
+__decorate([
+    n$1({ attribute: 'value-label-start' })
+], Slider.prototype, "valueLabelStart", void 0);
+__decorate([
+    n$1({ attribute: 'value-label-end' })
+], Slider.prototype, "valueLabelEnd", void 0);
+__decorate([
+    n$1({ attribute: 'aria-label-start' })
+], Slider.prototype, "ariaLabelStart", void 0);
+__decorate([
+    n$1({ attribute: 'aria-valuetext-start' })
+], Slider.prototype, "ariaValueTextStart", void 0);
+__decorate([
+    n$1({ attribute: 'aria-label-end' })
+], Slider.prototype, "ariaLabelEnd", void 0);
+__decorate([
+    n$1({ attribute: 'aria-valuetext-end' })
+], Slider.prototype, "ariaValueTextEnd", void 0);
+__decorate([
+    n$1({ type: Number })
+], Slider.prototype, "step", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], Slider.prototype, "ticks", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], Slider.prototype, "labeled", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], Slider.prototype, "range", void 0);
+__decorate([
+    i$1('input.start')
+], Slider.prototype, "inputStart", void 0);
+__decorate([
+    i$1('.handle.start')
+], Slider.prototype, "handleStart", void 0);
+__decorate([
+    e('md-ripple.start')
+], Slider.prototype, "rippleStart", void 0);
+__decorate([
+    i$1('input.end')
+], Slider.prototype, "inputEnd", void 0);
+__decorate([
+    i$1('.handle.end')
+], Slider.prototype, "handleEnd", void 0);
+__decorate([
+    e('md-ripple.end')
+], Slider.prototype, "rippleEnd", void 0);
+__decorate([
+    t()
+], Slider.prototype, "handleStartHover", void 0);
+__decorate([
+    t()
+], Slider.prototype, "handleEndHover", void 0);
+__decorate([
+    t()
+], Slider.prototype, "startOnTop", void 0);
+__decorate([
+    t()
+], Slider.prototype, "handlesOverlapping", void 0);
+__decorate([
+    t()
+], Slider.prototype, "renderValueStart", void 0);
+__decorate([
+    t()
+], Slider.prototype, "renderValueEnd", void 0);
+function inBounds({ x, y }, element) {
+    if (!element) {
+        return false;
+    }
+    const { top, left, bottom, right } = element.getBoundingClientRect();
+    return x >= left && x <= right && y >= top && y <= bottom;
+}
+function isOverlapping(elA, elB) {
+    if (!(elA && elB)) {
+        return false;
+    }
+    const a = elA.getBoundingClientRect();
+    const b = elB.getBoundingClientRect();
+    return !(a.top > b.bottom ||
+        a.right < b.left ||
+        a.bottom < b.top ||
+        a.left > b.right);
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./slider/internal/slider-styles.css.
+const styles = i `:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, var(--md-sys-shape-corner-full, 9999px));--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, var(--md-sys-shape-corner-full, 9999px));--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 9999px));--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:var(--md-sys-shape-corner-full, 9999px);color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Sliders allow users to view and select a value (or range) along
+ * a track.
+ *
+ * @description
+ * Changes made with sliders are immediate, allowing the user to make slider
+ * adjustments while determining a selection. Sliders shouldn’t be used to
+ * adjust settings with any delay in providing user feedback. Sliders reflect
+ * the current state of the settings they control.
+ *
+ * __Example usages:__
+ * - Sliders are ideal for adjusting settings such as volume and brightness, or
+ * for applying image filters.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSlider = class MdSlider extends Slider {
+};
+MdSlider.styles = [styles, styles$1];
+MdSlider = __decorate([
+    e$1('md-slider')
+], MdSlider);
+
+export { MdSlider };
diff --git a/md-web/sub-menu.js b/md-web/sub-menu.js
new file mode 100644
index 0000000..1c46169
--- /dev/null
+++ b/md-web/sub-menu.js
@@ -0,0 +1,432 @@
+export const __dummy_loader = () => {};
+
+import { _ as __decorate, n, l, s, u as Corner, x, v as createActivateTypeaheadEvent, w as createDeactivateItemsEvent, y as createDeactivateTypeaheadEvent, N as NavigableKey, S as SelectionKey, z as getFirstActivatableItem, B as CloseReason, K as KeydownCloseKey, D as createRequestActivationEvent, E as deactivateActiveItem, i, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fires deactivate-items {Event} Requests the parent menu to deselect other
+ * items when a submenu opens. --bubbles --composed
+ * @fires request-activation {Event} Requests the parent to make the slotted item
+ * focusable and focus the item. --bubbles --composed
+ * @fires deactivate-typeahead {Event} Requests the parent menu to deactivate
+ * the typeahead functionality when a submenu opens. --bubbles --composed
+ * @fires activate-typeahead {Event} Requests the parent menu to activate the
+ * typeahead functionality when a submenu closes. --bubbles --composed
+ */
+class SubMenu extends s {
+    get item() {
+        return this.items[0] ?? null;
+    }
+    get menu() {
+        return this.menus[0] ?? null;
+    }
+    constructor() {
+        super();
+        /**
+         * The anchorCorner to set on the submenu.
+         */
+        this.anchorCorner = Corner.START_END;
+        /**
+         * The menuCorner to set on the submenu.
+         */
+        this.menuCorner = Corner.START_START;
+        /**
+         * The delay between mouseenter and submenu opening.
+         */
+        this.hoverOpenDelay = 400;
+        /**
+         * The delay between ponterleave and the submenu closing.
+         */
+        this.hoverCloseDelay = 400;
+        /**
+         * READONLY: self-identifies as a menu item and sets its identifying attribute
+         */
+        this.isSubMenu = true;
+        this.previousOpenTimeout = 0;
+        this.previousCloseTimeout = 0;
+        /**
+         * Starts the default 400ms countdown to open the submenu.
+         *
+         * NOTE: We explicitly use mouse events and not pointer events because
+         * pointer events apply to touch events. And if a user were to tap a
+         * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+         * which would open the menu on click, and then set the timeout to close the
+         * menu due to pointerleave.
+         */
+        this.onMouseenter = () => {
+            clearTimeout(this.previousOpenTimeout);
+            clearTimeout(this.previousCloseTimeout);
+            if (this.menu?.open)
+                return;
+            // Open synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverOpenDelay) {
+                this.show();
+            }
+            else {
+                this.previousOpenTimeout = setTimeout(() => {
+                    this.show();
+                }, this.hoverOpenDelay);
+            }
+        };
+        /**
+         * Starts the default 400ms countdown to close the submenu.
+         *
+         * NOTE: We explicitly use mouse events and not pointer events because
+         * pointer events apply to touch events. And if a user were to tap a
+         * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+         * which would open the menu on click, and then set the timeout to close the
+         * menu due to pointerleave.
+         */
+        this.onMouseleave = () => {
+            clearTimeout(this.previousCloseTimeout);
+            clearTimeout(this.previousOpenTimeout);
+            // Close synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverCloseDelay) {
+                this.close();
+            }
+            else {
+                this.previousCloseTimeout = setTimeout(() => {
+                    this.close();
+                }, this.hoverCloseDelay);
+            }
+        };
+        {
+            this.addEventListener('mouseenter', this.onMouseenter);
+            this.addEventListener('mouseleave', this.onMouseleave);
+        }
+    }
+    render() {
+        return x `
+      <slot
+        name="item"
+        @click=${this.onClick}
+        @keydown=${this.onKeydown}
+        @slotchange=${this.onSlotchange}>
+      </slot>
+      <slot
+        name="menu"
+        @keydown=${this.onSubMenuKeydown}
+        @close-menu=${this.onCloseSubmenu}
+        @slotchange=${this.onSlotchange}>
+      </slot>
+    `;
+    }
+    firstUpdated() {
+        // slotchange is not fired if the contents have been SSRd
+        this.onSlotchange();
+    }
+    /**
+     * Shows the submenu.
+     */
+    async show() {
+        const menu = this.menu;
+        if (!menu || menu.open)
+            return;
+        // Ensures that we deselect items when the menu closes and reactivate
+        // typeahead when the menu closes, so that we do not have dirty state of
+        // `sub-menu > menu-item[selected]` when we reopen.
+        //
+        // This cannot happen in `close()` because the menu may close via other
+        // means Additionally, this cannot happen in onCloseSubmenu because
+        // `close-menu` may not be called via focusout of outside click and not
+        // triggered by an item
+        menu.addEventListener('closed', () => {
+            this.item.ariaExpanded = 'false';
+            this.dispatchEvent(createActivateTypeaheadEvent());
+            this.dispatchEvent(createDeactivateItemsEvent());
+            // aria-hidden required so ChromeVox doesn't announce the closed menu
+            menu.ariaHidden = 'true';
+        }, { once: true });
+        // Parent menu is `position: absolute` – this creates a new CSS relative
+        // positioning context (similar to doing `position: relative`), so the
+        // submenu's `<md-menu slot="submenu" positioning="document">` would be
+        // wrong even if we change `md-sub-menu` from `position: relative` to
+        // `position: static` because the submenu it would still be positioning
+        // itself relative to the parent menu.
+        if (menu.positioning === 'document') {
+            menu.positioning = 'absolute';
+        }
+        menu.quick = true;
+        // Submenus are in overflow when not fixed. Can remove once we have native
+        // popup support
+        menu.hasOverflow = true;
+        menu.anchorCorner = this.anchorCorner;
+        menu.menuCorner = this.menuCorner;
+        menu.anchorElement = this.item;
+        menu.defaultFocus = 'first-item';
+        // aria-hidden management required so ChromeVox doesn't announce the closed
+        // menu. Remove it here since we are about to show and focus it.
+        menu.removeAttribute('aria-hidden');
+        // This is required in the case where we have a leaf menu open and and the
+        // user hovers a parent menu's item which is not an md-sub-menu item.
+        // If this were set to true, then the menu would close and focus would be
+        // lost. That means the focusout event would have a `relatedTarget` of
+        // `null` since nothing in the menu would be focused anymore due to the
+        // leaf menu closing. restoring focus ensures that we keep focus in the
+        // submenu tree.
+        menu.skipRestoreFocus = false;
+        // Menu could already be opened because of mouse interaction
+        const menuAlreadyOpen = menu.open;
+        menu.show();
+        this.item.ariaExpanded = 'true';
+        this.item.ariaHasPopup = 'menu';
+        if (menu.id) {
+            this.item.setAttribute('aria-controls', menu.id);
+        }
+        // Deactivate other items. This can be the case if the user has tabbed
+        // around the menu and then mouses over an md-sub-menu.
+        this.dispatchEvent(createDeactivateItemsEvent());
+        this.dispatchEvent(createDeactivateTypeaheadEvent());
+        this.item.selected = true;
+        // This is the case of mouse hovering when already opened via keyboard or
+        // vice versa
+        if (!menuAlreadyOpen) {
+            let open = (value) => { };
+            const opened = new Promise((resolve) => {
+                open = resolve;
+            });
+            menu.addEventListener('opened', open, { once: true });
+            await opened;
+        }
+    }
+    /**
+     * Closes the submenu.
+     */
+    async close() {
+        const menu = this.menu;
+        if (!menu || !menu.open)
+            return;
+        this.dispatchEvent(createActivateTypeaheadEvent());
+        menu.quick = true;
+        menu.close();
+        this.dispatchEvent(createDeactivateItemsEvent());
+        let close = (value) => { };
+        const closed = new Promise((resolve) => {
+            close = resolve;
+        });
+        menu.addEventListener('closed', close, { once: true });
+        await closed;
+    }
+    onSlotchange() {
+        if (!this.item) {
+            return;
+        }
+        // TODO(b/301296618): clean up old aria values on change
+        this.item.ariaExpanded = 'false';
+        this.item.ariaHasPopup = 'menu';
+        if (this.menu?.id) {
+            this.item.setAttribute('aria-controls', this.menu.id);
+        }
+        this.item.keepOpen = true;
+        const menu = this.menu;
+        if (!menu)
+            return;
+        menu.isSubmenu = true;
+        // Required for ChromeVox to not linearly navigate to the menu while closed
+        menu.ariaHidden = 'true';
+    }
+    onClick() {
+        this.show();
+    }
+    /**
+     * On item keydown handles opening the submenu.
+     */
+    async onKeydown(event) {
+        const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);
+        if (event.defaultPrevented)
+            return;
+        const openedWithLR = shouldOpenSubmenu &&
+            (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);
+        if (event.code === SelectionKey.SPACE || openedWithLR) {
+            // prevent space from scrolling and Left + Right from selecting previous /
+            // next items or opening / closing parent menus. Only open the submenu.
+            event.preventDefault();
+            if (openedWithLR) {
+                event.stopPropagation();
+            }
+        }
+        if (!shouldOpenSubmenu) {
+            return;
+        }
+        const submenu = this.menu;
+        if (!submenu)
+            return;
+        const submenuItems = submenu.items;
+        const firstActivatableItem = getFirstActivatableItem(submenuItems);
+        if (firstActivatableItem) {
+            await this.show();
+            firstActivatableItem.tabIndex = 0;
+            firstActivatableItem.focus();
+            return;
+        }
+    }
+    onCloseSubmenu(event) {
+        const { itemPath, reason } = event.detail;
+        itemPath.push(this.item);
+        this.dispatchEvent(createActivateTypeaheadEvent());
+        // Escape should only close one menu not all of the menus unlike space or
+        // click selection which should close all menus.
+        if (reason.kind === CloseReason.KEYDOWN &&
+            reason.key === KeydownCloseKey.ESCAPE) {
+            event.stopPropagation();
+            this.item.dispatchEvent(createRequestActivationEvent());
+            return;
+        }
+        this.dispatchEvent(createDeactivateItemsEvent());
+    }
+    async onSubMenuKeydown(event) {
+        if (event.defaultPrevented)
+            return;
+        const { close: shouldClose, keyCode } = this.isSubmenuCloseKey(event.code);
+        if (!shouldClose)
+            return;
+        // Communicate that it's handled so that we don't accidentally close every
+        // parent menu. Additionally, we want to isolate things like the typeahead
+        // keydowns from bubbling up to the parent menu and confounding things.
+        event.preventDefault();
+        if (keyCode === NavigableKey.LEFT || keyCode === NavigableKey.RIGHT) {
+            // Prevent this from bubbling to parents
+            event.stopPropagation();
+        }
+        await this.close();
+        deactivateActiveItem(this.menu.items);
+        this.item?.focus();
+        this.item.tabIndex = 0;
+        this.item.focus();
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should open
+     * the submenu. This is RTL-aware. By default, left, right, space, or enter.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should open the submenu.
+     */
+    isSubmenuOpenKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NavigableKey.LEFT : NavigableKey.RIGHT;
+        switch (code) {
+            case arrowEnterKey:
+            case SelectionKey.SPACE:
+            case SelectionKey.ENTER:
+                return true;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should close
+     * the submenu. This is RTL-aware. By default right, left, or escape.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should close the submenu.
+     */
+    isSubmenuCloseKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NavigableKey.RIGHT : NavigableKey.LEFT;
+        switch (code) {
+            case arrowEnterKey:
+            case KeydownCloseKey.ESCAPE:
+                return { close: true, keyCode: code };
+            default:
+                return { close: false };
+        }
+    }
+}
+__decorate([
+    n({ attribute: 'anchor-corner' })
+], SubMenu.prototype, "anchorCorner", void 0);
+__decorate([
+    n({ attribute: 'menu-corner' })
+], SubMenu.prototype, "menuCorner", void 0);
+__decorate([
+    n({ type: Number, attribute: 'hover-open-delay' })
+], SubMenu.prototype, "hoverOpenDelay", void 0);
+__decorate([
+    n({ type: Number, attribute: 'hover-close-delay' })
+], SubMenu.prototype, "hoverCloseDelay", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'md-sub-menu' })
+], SubMenu.prototype, "isSubMenu", void 0);
+__decorate([
+    l({ slot: 'item', flatten: true })
+], SubMenu.prototype, "items", void 0);
+__decorate([
+    l({ slot: 'menu', flatten: true })
+], SubMenu.prototype, "menus", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./menu/internal/submenu/sub-menu-styles.css.
+const styles = i `:host{position:relative;display:flex;flex-direction:column}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `Menu` interface and also have the `md-menu`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or
+ * `positioning=fixed` set to `true` in order to display the containing menu
+ * properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       id="anchor"
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSubMenu = class MdSubMenu extends SubMenu {
+};
+MdSubMenu.styles = [styles];
+MdSubMenu = __decorate([
+    e('md-sub-menu')
+], MdSubMenu);
+
+export { MdSubMenu };
diff --git a/md-web/switch.js b/md-web/switch.js
new file mode 100644
index 0000000..af69219
--- /dev/null
+++ b/md-web/switch.js
@@ -0,0 +1,389 @@
+export const __dummy_loader = () => {};
+
+import { m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, _ as __decorate, n, c as i, d as isActivationClick, f as dispatchActivationClick, x, o, A, r as redispatchEvent, g as getFormValue, h as getFormState, j as createValidator, k as CheckboxValidator, p as getValidityAnchor, q as mixinElementInternals, s, i as i$1, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol used to access dispatch hooks on an event.
+ */
+const dispatchHooks = Symbol('dispatchHooks');
+/**
+ * Add a hook for an event that is called after the event is dispatched and
+ * propagates to other event listeners.
+ *
+ * This is useful for behaviors that need to check if an event is canceled.
+ *
+ * The callback is invoked synchronously, which allows for better integration
+ * with synchronous platform APIs (like `<form>` or `<label>` clicking).
+ *
+ * Note: `setupDispatchHooks()` must be called on the element before adding any
+ * other event listeners. Call it in the constructor of an element or
+ * controller.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * class MyController implements ReactiveController {
+ *   constructor(host: ReactiveElement) {
+ *     // setupDispatchHooks() may be called multiple times for the same
+ *     // element and events, making it safe for multiple controllers to use it.
+ *     setupDispatchHooks(host, 'click');
+ *     host.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return;
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @param event The event to add a hook to.
+ * @param callback A hook that is called after the event finishes dispatching.
+ */
+function afterDispatch(event, callback) {
+    const hooks = event[dispatchHooks];
+    if (!hooks) {
+        throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
+    }
+    hooks.addEventListener('after', callback);
+}
+/**
+ * A lookup map of elements and event types that have a dispatch hook listener
+ * set up. Used to ensure we don't set up multiple hook listeners on the same
+ * element for the same event.
+ */
+const ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap();
+/**
+ * Sets up an element to add dispatch hooks to given event types. This must be
+ * called before adding any event listeners that need to use dispatch hooks
+ * like `afterDispatch()`.
+ *
+ * This function is safe to call multiple times with the same element or event
+ * types. Call it in the constructor of elements, mixins, and controllers to
+ * ensure it is set up before external listeners.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', this.listenerUsingAfterDispatch);
+ *   }
+ * }
+ * ```
+ *
+ * @param element The element to set up event dispatch hooks for.
+ * @param eventTypes The event types to add dispatch hooks to.
+ */
+function setupDispatchHooks(element, ...eventTypes) {
+    let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);
+    if (!typesAlreadySetUp) {
+        typesAlreadySetUp = new Set();
+        ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);
+    }
+    for (const eventType of eventTypes) {
+        // Don't register multiple dispatch hook listeners. A second registration
+        // would lead to the second listener re-dispatching a re-dispatched event,
+        // which can cause an infinite loop inside the other one.
+        if (typesAlreadySetUp.has(eventType)) {
+            continue;
+        }
+        // When we re-dispatch the event, it's going to immediately trigger this
+        // listener again. Use a flag to ignore it.
+        let isRedispatching = false;
+        element.addEventListener(eventType, (event) => {
+            if (isRedispatching) {
+                return;
+            }
+            // Do not let the event propagate to any other listener (not just
+            // bubbling listeners with `stopPropagation()`).
+            event.stopImmediatePropagation();
+            // Make a copy.
+            const eventCopy = Reflect.construct(event.constructor, [
+                event.type,
+                event,
+            ]);
+            // Add hooks onto the event.
+            const hooks = new EventTarget();
+            eventCopy[dispatchHooks] = hooks;
+            // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
+            // need to add the hooks to the copy before it's dispatched.
+            isRedispatching = true;
+            const dispatched = element.dispatchEvent(eventCopy);
+            isRedispatching = false;
+            if (!dispatched) {
+                event.preventDefault();
+            }
+            // Synchronously call afterDispatch() hooks.
+            hooks.dispatchEvent(new Event('after'));
+        }, {
+            // Ensure this listener runs before other listeners.
+            // `setupDispatchHooks()` should be called in constructors to also
+            // ensure they run before any other externally-added capture listeners.
+            capture: true,
+        });
+        typesAlreadySetUp.add(eventType);
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const switchBaseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(s))));
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
+class Switch extends switchBaseClass {
+    constructor() {
+        super();
+        /**
+         * Puts the switch in the selected state and sets the form submission value to
+         * the `value` property.
+         */
+        this.selected = false;
+        /**
+         * Shows both the selected and deselected icons.
+         */
+        this.icons = false;
+        /**
+         * Shows only the selected icon, and not the deselected icon. If `true`,
+         * overrides the behavior of the `icons` property.
+         */
+        this.showOnlySelectedIcon = false;
+        /**
+         * When true, require the switch to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
+        /**
+         * The value associated with this switch on form submission. `null` is
+         * submitted when `selected` is `false`.
+         */
+        this.value = 'on';
+        // This click listener does not currently need dispatch hooks since it does
+        // not check `event.defaultPrevented`.
+        this.addEventListener('click', (event) => {
+            if (!isActivationClick(event) || !this.input) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.input);
+        });
+        // Add the aria keyboard interaction pattern for switch and the Enter key.
+        // See https://www.w3.org/WAI/ARIA/apg/patterns/switch/.
+        setupDispatchHooks(this, 'keydown');
+        this.addEventListener('keydown', (event) => {
+            afterDispatch(event, () => {
+                const ignoreEvent = event.defaultPrevented || event.key !== 'Enter';
+                if (ignoreEvent || this.disabled || !this.input) {
+                    return;
+                }
+                this.input.click();
+            });
+        });
+    }
+    render() {
+        return x `
+      <div class="switch ${o(this.getRenderClasses())}">
+        <input
+          id="switch"
+          class="touch"
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel || A}
+          ?checked=${this.selected}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @input=${this.handleInput}
+          @change=${this.handleChange} />
+
+        <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
+        <span class="track"> ${this.renderHandle()} </span>
+      </div>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'selected': this.selected,
+            'unselected': !this.selected,
+            'disabled': this.disabled,
+        };
+    }
+    renderHandle() {
+        const classes = {
+            'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons,
+        };
+        return x `
+      ${this.renderTouchTarget()}
+      <span class="handle-container">
+        <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
+        <span class="handle ${o(classes)}">
+          ${this.shouldShowIcons() ? this.renderIcons() : x ``}
+        </span>
+      </span>
+    `;
+    }
+    renderIcons() {
+        return x `
+      <div class="icons">
+        ${this.renderOnIcon()}
+        ${this.showOnlySelectedIcon ? x `` : this.renderOffIcon()}
+      </div>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    renderOnIcon() {
+        return x `
+      <slot class="icon icon--on" name="on-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
+        </svg>
+      </slot>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    renderOffIcon() {
+        return x `
+      <slot class="icon icon--off" name="off-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
+        </svg>
+      </slot>
+    `;
+    }
+    renderTouchTarget() {
+        return x `<span class="touch"></span>`;
+    }
+    shouldShowIcons() {
+        return this.icons || this.showOnlySelectedIcon;
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.selected = target.checked;
+        // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+    }
+    handleChange(event) {
+        // <input> 'change' event is not composed, re-dispatch it.
+        redispatchEvent(this, event);
+    }
+    [getFormValue]() {
+        return this.selected ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.selected);
+    }
+    formResetCallback() {
+        // The selected property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.selected = this.hasAttribute('selected');
+    }
+    formStateRestoreCallback(state) {
+        this.selected = state === 'true';
+    }
+    [createValidator]() {
+        return new CheckboxValidator(() => ({
+            checked: this.selected,
+            required: this.required,
+        }));
+    }
+    [getValidityAnchor]() {
+        return this.input;
+    }
+}
+/** @nocollapse */
+Switch.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    n({ type: Boolean })
+], Switch.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean })
+], Switch.prototype, "icons", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-only-selected-icon' })
+], Switch.prototype, "showOnlySelectedIcon", void 0);
+__decorate([
+    n({ type: Boolean })
+], Switch.prototype, "required", void 0);
+__decorate([
+    n()
+], Switch.prototype, "value", void 0);
+__decorate([
+    i('input')
+], Switch.prototype, "input", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./switch/internal/switch-styles.css.
+const styles = i$1 `@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}input{appearance:none;height:max(100%,var(--md-switch-touch-target-size, 48px));outline:none;margin:0;position:absolute;width:max(100%,var(--md-switch-touch-target-size, 48px));z-index:1;cursor:inherit;top:50%;left:50%;transform:translate(-50%, -50%)}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Switches toggle the state of a single item on or off.
+ *
+ * @description
+ * There's one type of switch in Material. Use this selection control when the
+ * user needs to toggle a single item on or off.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSwitch = class MdSwitch extends Switch {
+};
+MdSwitch.styles = [styles];
+MdSwitch = __decorate([
+    e('md-switch')
+], MdSwitch);
+
+export { MdSwitch };
diff --git a/md-web/tabs.js b/md-web/tabs.js
new file mode 100644
index 0000000..3ee27ae
--- /dev/null
+++ b/md-web/tabs.js
@@ -0,0 +1,507 @@
+export const __dummy_loader = () => {};
+
+import { Q as mixinFocusable, _ as __decorate, t, R as o, n, c as i, l, s, x, o as o$1, A, T as EASING, i as i$1, e } from './core.js';
+import '@material/web/tabs/tab.js';
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Symbol used by the tab bar to request a tab to animate its indicator from a
+ * previously selected tab.
+ */
+const ANIMATE_INDICATOR = Symbol('animateIndicator');
+// Separate variable needed for closure.
+const tabBaseClass = mixinFocusable(s);
+/**
+ * Tab component.
+ */
+class Tab extends tabBaseClass {
+    /**
+     * @deprecated use `active`
+     */
+    get selected() {
+        return this.active;
+    }
+    set selected(active) {
+        this.active = active;
+    }
+    constructor() {
+        super();
+        /**
+         * The attribute `md-tab` indicates that the element is a tab for the parent
+         * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
+         * component that you have an `md-tab` attribute set.
+         */
+        this.isTab = true;
+        /**
+         * Whether or not the tab is selected.
+         **/
+        this.active = false;
+        /**
+         * In SSR, set this to true when an icon is present.
+         */
+        this.hasIcon = false;
+        /**
+         * In SSR, set this to true when there is no label and only an icon.
+         */
+        this.iconOnly = false;
+        this.fullWidthIndicator = false;
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        {
+            this.internals.role = 'tab';
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+    }
+    render() {
+        const indicator = x `<div class="indicator"></div>`;
+        return x `<div
+      class="button"
+      role="presentation"
+      @click=${this.handleContentClick}>
+      <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
+      <md-elevation part="elevation"></md-elevation>
+      <md-ripple .control=${this}></md-ripple>
+      <div
+        class="content ${o$1(this.getContentClasses())}"
+        role="presentation">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.fullWidthIndicator ? A : indicator}
+      </div>
+      ${this.fullWidthIndicator ? indicator : A}
+    </div>`;
+    }
+    getContentClasses() {
+        return {
+            'has-icon': this.hasIcon,
+            'has-label': !this.iconOnly,
+        };
+    }
+    updated() {
+        this.internals.ariaSelected = String(this.active);
+    }
+    async handleKeydown(event) {
+        // Allow event to bubble.
+        await 0;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Prevent default behavior such as scrolling when pressing spacebar.
+            event.preventDefault();
+            this.click();
+        }
+    }
+    handleContentClick(event) {
+        // Ensure the "click" target is always the tab, and not content, by stopping
+        // propagation of content clicks and re-clicking the host.
+        event.stopPropagation();
+        this.click();
+    }
+    [ANIMATE_INDICATOR](previousTab) {
+        if (!this.indicator) {
+            return;
+        }
+        this.indicator.getAnimations().forEach((a) => {
+            a.cancel();
+        });
+        const frames = this.getKeyframes(previousTab);
+        if (frames !== null) {
+            this.indicator.animate(frames, {
+                duration: 250,
+                easing: EASING.EMPHASIZED,
+            });
+        }
+    }
+    getKeyframes(previousTab) {
+        const reduceMotion = shouldReduceMotion();
+        if (!this.active) {
+            return reduceMotion ? [{ 'opacity': 1 }, { 'transform': 'none' }] : null;
+        }
+        const from = {};
+        const fromRect = previousTab.indicator?.getBoundingClientRect() ?? {};
+        const fromPos = fromRect.left;
+        const fromExtent = fromRect.width;
+        const toRect = this.indicator.getBoundingClientRect();
+        const toPos = toRect.left;
+        const toExtent = toRect.width;
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion &&
+            fromPos !== undefined &&
+            toPos !== undefined &&
+            !isNaN(scale)) {
+            from['transform'] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
+        }
+        else {
+            from['opacity'] = 0;
+        }
+        // note, including `transform: none` avoids quirky Safari behavior
+        // that can hide the animation.
+        return [from, { 'transform': 'none' }];
+    }
+    handleSlotChange() {
+        this.iconOnly = false;
+        // Check if there's any label text or elements. If not, then there is only
+        // an icon.
+        for (const node of this.assignedDefaultNodes) {
+            const hasTextContent = node.nodeType === Node.TEXT_NODE &&
+                !!node.wholeText.match(/\S/);
+            if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+                return;
+            }
+        }
+        this.iconOnly = true;
+    }
+    handleIconSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
+}
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'md-tab' })
+], Tab.prototype, "isTab", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Tab.prototype, "active", void 0);
+__decorate([
+    n({ type: Boolean })
+], Tab.prototype, "selected", null);
+__decorate([
+    n({ type: Boolean, attribute: 'has-icon' })
+], Tab.prototype, "hasIcon", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'icon-only' })
+], Tab.prototype, "iconOnly", void 0);
+__decorate([
+    i('.indicator')
+], Tab.prototype, "indicator", void 0);
+__decorate([
+    t()
+], Tab.prototype, "fullWidthIndicator", void 0);
+__decorate([
+    o({ flatten: true })
+], Tab.prototype, "assignedDefaultNodes", void 0);
+__decorate([
+    l({ slot: 'icon', flatten: true })
+], Tab.prototype, "assignedIcons", void 0);
+function shouldReduceMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fires change {Event} Fired when the selected tab changes. The target's
+ * `activeTabIndex` or `activeTab` provide information about the selection
+ * change. The change event is fired when a user interaction like a space/enter
+ * key or click cause a selection change. The tab selection based on these
+ * actions can be cancelled by calling preventDefault on the triggering
+ * `keydown` or `click` event. --bubbles
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.activeTabIndex === 2)
+ *     takeAction();
+ *   }
+ * });
+ *
+ * // prevent a click from triggering tab selection under some condition
+ * tabs.addEventListener('click', (event: Event) => {
+ *   if (notReady)
+ *     event.preventDefault();
+ *   }
+ * });
+ *
+ */
+class Tabs extends s {
+    /**
+     * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
+     */
+    get activeTab() {
+        return this.tabs.find((tab) => tab.active) ?? null;
+    }
+    set activeTab(tab) {
+        // Ignore setting activeTab to null. As long as there are children, one tab
+        // must be selected.
+        if (tab) {
+            this.activateTab(tab);
+        }
+    }
+    /**
+     * The index of the currently selected tab.
+     *
+     * @export
+     */
+    get activeTabIndex() {
+        return this.tabs.findIndex((tab) => tab.active);
+    }
+    set activeTabIndex(index) {
+        const activateTabAtIndex = () => {
+            const tab = this.tabs[index];
+            // Ignore out-of-bound indices.
+            if (tab) {
+                this.activateTab(tab);
+            }
+        };
+        if (!this.slotElement) {
+            // This is needed to support setting the activeTabIndex via a lit property
+            // binding.
+            //
+            // ```ts
+            // html`
+            //   <md-tabs .activeTabIndex=${1}>
+            //     <md-tab>First</md-tab>
+            //     <md-tab>Second</md-tab>
+            //   </md-tabs>
+            // `;
+            // ```
+            //
+            // It's needed since lit's rendering lifecycle is asynchronous, and the
+            // `<slot>` element hasn't rendered, so `tabs` is empty.
+            this.updateComplete.then(activateTabAtIndex);
+            return;
+        }
+        activateTabAtIndex();
+    }
+    get focusedTab() {
+        return this.tabs.find((tab) => tab.matches(':focus-within'));
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not to automatically select a tab when it is focused.
+         */
+        this.autoActivate = false;
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        {
+            this.internals.role = 'tablist';
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+            this.addEventListener('keyup', this.handleKeyup.bind(this));
+            this.addEventListener('focusout', this.handleFocusout.bind(this));
+        }
+    }
+    /**
+     * Scrolls the toolbar, if overflowing, to the active tab, or the provided
+     * tab.
+     *
+     * @param tabToScrollTo The tab that should be scrolled to. Defaults to the
+     *     active tab.
+     * @return A Promise that resolves after the tab has been scrolled to.
+     */
+    async scrollToTab(tabToScrollTo) {
+        await this.updateComplete;
+        const { tabs } = this;
+        tabToScrollTo ??= this.activeTab;
+        if (!tabToScrollTo ||
+            !tabs.includes(tabToScrollTo) ||
+            !this.tabsScrollerElement) {
+            return;
+        }
+        // wait for tabs to render.
+        for (const tab of this.tabs) {
+            await tab.updateComplete;
+        }
+        const offset = tabToScrollTo.offsetLeft;
+        const extent = tabToScrollTo.offsetWidth;
+        const scroll = this.scrollLeft;
+        const hostExtent = this.offsetWidth;
+        const scrollMargin = 48;
+        const min = offset - scrollMargin;
+        const max = offset + extent - hostExtent + scrollMargin;
+        const to = Math.min(min, Math.max(max, scroll));
+        // When a tab is focused, use 'auto' to use the CSS `scroll-behavior`. The
+        // default behavior is smooth scrolling. However, when there is not a tab
+        // focused on initialization, use 'instant' to immediately bring the focused
+        // tab into view.
+        const behavior = !this.focusedTab ? 'instant' : 'auto';
+        this.tabsScrollerElement.scrollTo({ behavior, top: 0, left: to });
+    }
+    render() {
+        return x `
+      <div class="tabs">
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleTabClick}></slot>
+      </div>
+      <md-divider part="divider"></md-divider>
+    `;
+    }
+    async handleTabClick(event) {
+        const tab = event.target;
+        // Allow event to bubble
+        await 0;
+        if (event.defaultPrevented || !isTab(tab) || tab.active) {
+            return;
+        }
+        this.activateTab(tab);
+    }
+    activateTab(activeTab) {
+        const { tabs } = this;
+        const previousTab = this.activeTab;
+        if (!tabs.includes(activeTab) || previousTab === activeTab) {
+            // Ignore setting activeTab to a tab element that is not a child.
+            return;
+        }
+        for (const tab of tabs) {
+            tab.active = tab === activeTab;
+        }
+        if (previousTab) {
+            // Don't dispatch a change event if activating a tab when no previous tabs
+            // were selected, such as when md-tabs auto-selects the first tab.
+            const defaultPrevented = !this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+            if (defaultPrevented) {
+                for (const tab of tabs) {
+                    tab.active = tab === previousTab;
+                }
+                return;
+            }
+            activeTab[ANIMATE_INDICATOR](previousTab);
+        }
+        this.updateFocusableTab(activeTab);
+        this.scrollToTab(activeTab);
+    }
+    updateFocusableTab(focusableTab) {
+        for (const tab of this.tabs) {
+            tab.tabIndex = tab === focusableTab ? 0 : -1;
+        }
+    }
+    // focus item on keydown and optionally select it
+    async handleKeydown(event) {
+        // Allow event to bubble.
+        await 0;
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        const isHome = event.key === 'Home';
+        const isEnd = event.key === 'End';
+        // Ignore non-navigation keys
+        if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {
+            return;
+        }
+        const { tabs } = this;
+        // Don't try to select another tab if there aren't any.
+        if (tabs.length < 2) {
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        let indexToFocus;
+        if (isHome || isEnd) {
+            indexToFocus = isHome ? 0 : tabs.length - 1;
+        }
+        else {
+            // Check if moving forwards or backwards
+            const isRtl = getComputedStyle(this).direction === 'rtl';
+            const forwards = isRtl ? isLeft : isRight;
+            const { focusedTab } = this;
+            if (!focusedTab) {
+                // If there is not already a tab focused, select the first or last tab
+                // based on the direction we're traveling.
+                indexToFocus = forwards ? 0 : tabs.length - 1;
+            }
+            else {
+                const focusedIndex = this.tabs.indexOf(focusedTab);
+                indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;
+                if (indexToFocus >= tabs.length) {
+                    // Return to start if moving past the last item.
+                    indexToFocus = 0;
+                }
+                else if (indexToFocus < 0) {
+                    // Go to end if moving before the first item.
+                    indexToFocus = tabs.length - 1;
+                }
+            }
+        }
+        const tabToFocus = tabs[indexToFocus];
+        tabToFocus.focus();
+        if (this.autoActivate) {
+            this.activateTab(tabToFocus);
+        }
+        else {
+            this.updateFocusableTab(tabToFocus);
+        }
+    }
+    // scroll to item on keyup.
+    handleKeyup() {
+        this.scrollToTab(this.focusedTab ?? this.activeTab);
+    }
+    handleFocusout() {
+        // restore focus to selected item when blurring the tab bar.
+        if (this.matches(':focus-within')) {
+            return;
+        }
+        const { activeTab } = this;
+        if (activeTab) {
+            this.updateFocusableTab(activeTab);
+        }
+    }
+    handleSlotChange() {
+        const firstTab = this.tabs[0];
+        if (!this.activeTab && firstTab) {
+            // If the active tab was removed, auto-select the first one. There should
+            // always be a selected tab while the bar has children.
+            this.activateTab(firstTab);
+        }
+        // When children shift, ensure the active tab is visible. For example, if
+        // many children are added before the active tab, it'd be pushed off screen.
+        // This ensures it stays visible.
+        this.scrollToTab(this.activeTab);
+    }
+}
+__decorate([
+    l({ flatten: true, selector: '[md-tab]' })
+], Tabs.prototype, "tabs", void 0);
+__decorate([
+    n({ type: Number, attribute: 'active-tab-index' })
+], Tabs.prototype, "activeTabIndex", null);
+__decorate([
+    n({ type: Boolean, attribute: 'auto-activate' })
+], Tabs.prototype, "autoActivate", void 0);
+__decorate([
+    i('.tabs')
+], Tabs.prototype, "tabsScrollerElement", void 0);
+__decorate([
+    i('slot')
+], Tabs.prototype, "slotElement", void 0);
+function isTab(element) {
+    return element instanceof HTMLElement && element.hasAttribute('md-tab');
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./tabs/internal/tabs-styles.css.
+const styles = i$1 `:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;overflow:inherit;scroll-behavior:inherit;scrollbar-width:inherit;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([active]){z-index:1}
+`;
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// TODO(b/267336507): add docs
+/**
+ * @summary Tabs displays a list of selectable tabs.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdTabs = class MdTabs extends Tabs {
+};
+MdTabs.styles = [styles];
+MdTabs = __decorate([
+    e('md-tabs')
+], MdTabs);
diff --git a/md-web/textfield.js b/md-web/textfield.js
new file mode 100644
index 0000000..2e6f5e5
--- /dev/null
+++ b/md-web/textfield.js
@@ -0,0 +1,93 @@
+export const __dummy_loader = () => {};
+
+import { i, a0 as TextField, G as i$1, a1 as styles$2, _ as __decorate, e } from './core.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./textfield/internal/filled-styles.css.
+const styles$1 = i `:host{--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 3px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-filled-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-filled-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-filled-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-filled-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, var(--md-filled-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_icon-input-space: var(--md-filled-text-field-icon-input-space, 16px);--_leading-space: var(--md-filled-text-field-leading-space, 16px);--_trailing-space: var(--md-filled-text-field-trailing-space, 16px);--_top-space: var(--md-filled-text-field-top-space, 16px);--_bottom-space: var(--md-filled-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-filled-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-filled-text-field-input-text-suffix-leading-space, 2px);--_with-label-top-space: var(--md-filled-text-field-with-label-top-space, 8px);--_with-label-bottom-space: var(--md-filled-text-field-with-label-bottom-space, 8px);--_focus-caret-color: var(--md-filled-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-filled-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-filled-text-field-with-trailing-icon-trailing-space, 12px);--md-filled-field-active-indicator-color: var(--_active-indicator-color);--md-filled-field-active-indicator-height: var(--_active-indicator-height);--md-filled-field-bottom-space: var(--_bottom-space);--md-filled-field-container-color: var(--_container-color);--md-filled-field-container-shape-end-end: var(--_container-shape-end-end);--md-filled-field-container-shape-end-start: var(--_container-shape-end-start);--md-filled-field-container-shape-start-end: var(--_container-shape-start-end);--md-filled-field-container-shape-start-start: var(--_container-shape-start-start);--md-filled-field-content-color: var(--_input-text-color);--md-filled-field-content-font: var(--_input-text-font);--md-filled-field-content-line-height: var(--_input-text-line-height);--md-filled-field-content-size: var(--_input-text-size);--md-filled-field-content-space: var(--_icon-input-space);--md-filled-field-content-weight: var(--_input-text-weight);--md-filled-field-disabled-active-indicator-color: var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height: var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity: var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color: var(--_disabled-container-color);--md-filled-field-disabled-container-opacity: var(--_disabled-container-opacity);--md-filled-field-disabled-content-color: var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color: var(--_error-active-indicator-color);--md-filled-field-error-content-color: var(--_error-input-text-color);--md-filled-field-error-focus-active-indicator-color: var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color: var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color: var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity: var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-filled-field-error-label-text-color: var(--_error-label-text-color);--md-filled-field-error-leading-content-color: var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-filled-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color: var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height: var(--_focus-active-indicator-height);--md-filled-field-focus-content-color: var(--_focus-input-text-color);--md-filled-field-focus-label-text-color: var(--_focus-label-text-color);--md-filled-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color: var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height: var(--_hover-active-indicator-height);--md-filled-field-hover-content-color: var(--_hover-input-text-color);--md-filled-field-hover-label-text-color: var(--_hover-label-text-color);--md-filled-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color: var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity: var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-filled-field-label-text-color: var(--_label-text-color);--md-filled-field-label-text-font: var(--_label-text-font);--md-filled-field-label-text-line-height: var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size: var(--_label-text-populated-size);--md-filled-field-label-text-size: var(--_label-text-size);--md-filled-field-label-text-weight: var(--_label-text-weight);--md-filled-field-leading-content-color: var(--_leading-icon-color);--md-filled-field-leading-space: var(--_leading-space);--md-filled-field-supporting-text-color: var(--_supporting-text-color);--md-filled-field-supporting-text-font: var(--_supporting-text-font);--md-filled-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-filled-field-supporting-text-size: var(--_supporting-text-size);--md-filled-field-supporting-text-weight: var(--_supporting-text-weight);--md-filled-field-top-space: var(--_top-space);--md-filled-field-trailing-content-color: var(--_trailing-icon-color);--md-filled-field-trailing-space: var(--_trailing-space);--md-filled-field-with-label-bottom-space: var(--_with-label-bottom-space);--md-filled-field-with-label-top-space: var(--_with-label-top-space);--md-filled-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-filled-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A filled text field component.
+ */
+class FilledTextField extends TextField {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i$1 `md-filled-field`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): Add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledTextField = class MdFilledTextField extends FilledTextField {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i$1 `md-filled-field`;
+    }
+};
+MdFilledTextField.styles = [styles$2, styles$1];
+MdFilledTextField = __decorate([
+    e('md-filled-text-field')
+], MdFilledTextField);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./textfield/internal/outlined-styles.css.
+const styles = i `:host{--_caret-color: var(--md-outlined-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_disabled-input-text-color: var(--md-outlined-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-outlined-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-outlined-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-text-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-text-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-outlined-text-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-caret-color: var(--md-outlined-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-outlined-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-input-text-color: var(--md-outlined-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-outlined-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-outlined-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-input-text-color: var(--md-outlined-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-text-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-input-text-color: var(--md-outlined-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-color: var(--md-outlined-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-text-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-outlined-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-outlined-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-outlined-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-outlined-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-outlined-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-outlined-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-outlined-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-outlined-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-outlined-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-outlined-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-outlined-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-text-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-outlined-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-outlined-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-outlined-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-outlined-text-field-container-shape-start-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-text-field-container-shape-start-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-text-field-container-shape-end-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-text-field-container-shape-end-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_icon-input-space: var(--md-outlined-text-field-icon-input-space, 16px);--_leading-space: var(--md-outlined-text-field-leading-space, 16px);--_trailing-space: var(--md-outlined-text-field-trailing-space, 16px);--_top-space: var(--md-outlined-text-field-top-space, 16px);--_bottom-space: var(--md-outlined-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-outlined-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-outlined-text-field-input-text-suffix-leading-space, 2px);--_focus-caret-color: var(--md-outlined-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-outlined-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-outlined-text-field-with-trailing-icon-trailing-space, 12px);--md-outlined-field-bottom-space: var(--_bottom-space);--md-outlined-field-container-shape-end-end: var(--_container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_container-shape-start-start);--md-outlined-field-content-color: var(--_input-text-color);--md-outlined-field-content-font: var(--_input-text-font);--md-outlined-field-content-line-height: var(--_input-text-line-height);--md-outlined-field-content-size: var(--_input-text-size);--md-outlined-field-content-space: var(--_icon-input-space);--md-outlined-field-content-weight: var(--_input-text-weight);--md-outlined-field-disabled-content-color: var(--_disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_focus-outline-color);--md-outlined-field-focus-outline-width: var(--_focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_hover-outline-color);--md-outlined-field-hover-outline-width: var(--_hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_label-text-color);--md-outlined-field-label-text-font: var(--_label-text-font);--md-outlined-field-label-text-line-height: var(--_label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_label-text-populated-size);--md-outlined-field-label-text-size: var(--_label-text-size);--md-outlined-field-label-text-weight: var(--_label-text-weight);--md-outlined-field-leading-content-color: var(--_leading-icon-color);--md-outlined-field-leading-space: var(--_leading-space);--md-outlined-field-outline-color: var(--_outline-color);--md-outlined-field-outline-width: var(--_outline-width);--md-outlined-field-supporting-text-color: var(--_supporting-text-color);--md-outlined-field-supporting-text-font: var(--_supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_supporting-text-weight);--md-outlined-field-top-space: var(--_top-space);--md-outlined-field-trailing-content-color: var(--_trailing-icon-color);--md-outlined-field-trailing-space: var(--_trailing-space);--md-outlined-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-outlined-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An outlined text field component
+ */
+class OutlinedTextField extends TextField {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i$1 `md-outlined-field`;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): Add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedTextField = class MdOutlinedTextField extends OutlinedTextField {
+    constructor() {
+        super(...arguments);
+        this.fieldTag = i$1 `md-outlined-field`;
+    }
+};
+MdOutlinedTextField.styles = [styles$2, styles];
+MdOutlinedTextField = __decorate([
+    e('md-outlined-text-field')
+], MdOutlinedTextField);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8be84c3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,91 @@
+{
+  "name": "material-yew",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "material-yew",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.55.1",
+        "@types/node": "^24.5.2"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
+      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.2.tgz",
+      "integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~7.12.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.12.0.tgz",
+      "integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f2beab6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "material-yew",
+  "version": "1.0.0",
+  "description": "*Material Yew* is a components library for [Yew framework](https://yew.rs/) which is a wrapper around [Material Web Components](https://github.com/material-components/material-web) exposing Yew components. All modern browsers are supported.",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.55.1",
+    "@types/node": "^24.5.2"
+  }
+}
diff --git a/scripts/env_setup.sh b/scripts/env_setup.sh
new file mode 100755
index 0000000..1f2a4e8
--- /dev/null
+++ b/scripts/env_setup.sh
@@ -0,0 +1,7 @@
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+. "$HOME/.cargo/env"
+
+rustup target add wasm32-unknown-unknown
+
+cargo install trunk
\ No newline at end of file
diff --git a/src/button.rs b/src/button.rs
index fe622fd..f81f91b 100644
--- a/src/button.rs
+++ b/src/button.rs
@@ -1,3 +1,5 @@
+use js_sys::Reflect;
+use wasm_bindgen::JsValue;
 use web_sys::HtmlFormElement as HTMLFormElement;
 use yew::prelude::*;
 
@@ -51,7 +53,7 @@ pub struct Props {
     #[prop_or(Some(AttrValue::Static("")))]
     pub name: Option<AttrValue>,
     ///
-    # [prop_or (Some (wasm_bindgen::JsValue::NULL . into ()))]
+    #[prop_or_default]
     pub form: Option<HTMLFormElement>,
     /// The variant to use.
     pub variant: ButtonVariants,
@@ -62,19 +64,33 @@ pub struct Props {
 
 #[function_component]
 pub fn Button(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/button.js")
-    });
+    let node_ref = use_node_ref();
+
+    {
+        let node_ref = node_ref.clone();
+        let form = props.form.clone();
+        use_effect_with(form, move |form| {
+            let element = node_ref.get().unwrap();
+            let value = form
+                .as_ref()
+                .map(|f| f.into())
+                .unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"form".into(), &value).unwrap();
+            move || {}
+        });
+    }
+
+    crate::import_material_web_module!("/md-web/button.js");
     html! { <@{props.variant.as_tag_name()}
-        disabled={props.disabled.unwrap_or_default()}
-        ~href={crate::js_value_from_string_or_null(props.href.as_ref())}
-        ~target={crate::js_value_from_string_or_null(props.target.as_ref())}
-        ~trailingIcon={crate::js_value_or_null(props.trailing_icon.clone())}
-        ~hasIcon={crate::js_value_or_null(props.has_icon.clone())}
-        ~type={crate::js_value_from_string_or_null(props.typepe.as_ref())}
+        ref={node_ref}
+        disabled={props.disabled.unwrap_or(false)}
+        href={props.href.clone()}
+        target={props.target.clone()}
+        trailingIcon={props.trailing_icon.filter(|&v| v).map(|_| AttrValue::from(""))}
+        hasIcon={props.has_icon.filter(|&v| v).map(|_| AttrValue::from(""))}
+        type={props.typepe.clone()}
         value={props.value.clone().unwrap_or_default()}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
+        name={props.name.clone()}
         onclick={props.onclick.clone()}
     > {props.children.clone()} </@> }
 }
diff --git a/src/checkbox.rs b/src/checkbox.rs
index 82e6e51..0f0e1b4 100644
--- a/src/checkbox.rs
+++ b/src/checkbox.rs
@@ -1,65 +1,86 @@
+use js_sys::Reflect;
 use wasm_bindgen::JsValue;
 use web_sys::{HtmlFormElement as HTMLFormElement, NodeList};
 use yew::prelude::*;
 
 type ValidityState = JsValue;
 
-#[derive(Properties, PartialEq)]
+#[derive(Properties, PartialEq, Clone)]
 pub struct Props {
     /// Whether or not the checkbox is selected.
-    #[prop_or(Some(false))]
+    #[prop_or_default]
     pub checked: Option<bool>,
     /// Whether or not the checkbox is disabled.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// Whether or not the checkbox is indeterminate.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
-    #[prop_or(Some(false))]
+    #[prop_or_default]
     pub indeterminate: Option<bool>,
     /// When true, require the checkbox to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
-    #[prop_or(Some(false))]
-    pub required: Option<bool>,
+    #[prop_or_default]
+    pub required: bool,
     /// The value of the checkbox that is submitted with a form when selected.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
     #[prop_or(Some(AttrValue::Static("on")))]
     pub value: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub form: Option<HTMLFormElement>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub labels: Option<NodeList>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub validitype: Option<ValidityState>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub validation_message: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub will_validate: Option<bool>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onclick: Option<Callback<MouseEvent>>,
 }
 
 #[function_component]
 pub fn Checkbox(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/checkbox.js")
-    });
+    let node_ref = use_node_ref();
+
+    {
+        let node_ref = node_ref.clone();
+        let props = props.clone();
+        use_effect_with(props, move |props| {
+            let element = node_ref.get().unwrap();
+            let form_value = props.form.as_ref().map(|f| f.into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"form".into(), &form_value).unwrap();
+
+            let labels_value = props.labels.as_ref().map(|l| l.into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"labels".into(), &labels_value).unwrap();
+
+            let validity_value = props.validitype.as_ref().map(|v| v.into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"validity".into(), &validity_value).unwrap();
+
+            let validation_message_value = props.validation_message.as_ref().map(|m| m.as_str().into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"validationMessage".into(), &validation_message_value).unwrap();
+
+            let will_validate_value = props.will_validate.map(|v| v.into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"willValidate".into(), &will_validate_value).unwrap();
+
+            move || {}
+        });
+    }
+
+    crate::import_material_web_module!("/md-web/checkbox.js");
     html! { <md-checkbox
-        ~checked={crate::js_value_or_null(props.checked.clone())}
-        disabled={props.disabled.unwrap_or_default()}
-        ~indeterminate={crate::js_value_or_null(props.indeterminate.clone())}
-        required={props.required.unwrap_or_default()}
-        value={props.value.clone().unwrap_or_default()}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
-        ~labels={crate::js_value_or_null(props.labels.clone())}
-        ~validity={crate::js_value_or_null(props.validitype.clone())}
-        ~validationMessage={crate::js_value_from_string_or_null(props.validation_message.as_ref())}
-        ~willValidate={crate::js_value_or_null(props.will_validate.clone())}
+        ref={node_ref}
+        checked={props.checked.filter(|&v| v).map(|_| AttrValue::from(""))}
+        disabled={props.disabled}
+        indeterminate={props.indeterminate.filter(|&v| v).map(|_| AttrValue::from(""))}
+        required={props.required}
+        value={props.value.clone()}
+        name={props.name.clone()}
         onclick={props.onclick.clone()}
     /> }
 }
diff --git a/src/chip.rs b/src/chip.rs
index e87bdfb..580f74a 100644
--- a/src/chip.rs
+++ b/src/chip.rs
@@ -22,40 +22,39 @@ impl ChipVariants {
 #[derive(Properties, PartialEq)]
 pub struct Props {
     ///
-    #[prop_or(Some(false))]
-    pub elevated: Option<bool>,
+    #[prop_or_default]
+    pub elevated: bool,
     ///
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub href: Option<AttrValue>,
     ///
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub target: Option<AttrValue>,
     /// Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless
     /// <code>always-focusable</code> is set.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
-    #[prop_or(Some(false))]
-    pub always_focusable: Option<bool>,
+    #[prop_or_default]
+    pub always_focusable: bool,
     /// The label of the chip.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub label: Option<AttrValue>,
     /// The variant to use.
     pub variant: ChipVariants,
+    #[prop_or_default]
     pub children: Html,
 }
 
 #[function_component]
 pub fn Chip(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/chip.js")
-    });
+    crate::import_material_web_module!("/md-web/chip.js");
     html! { <@{props.variant.as_tag_name()}
-        ~elevated={crate::js_value_or_null(props.elevated.clone())}
-        ~href={crate::js_value_from_string_or_null(props.href.as_ref())}
-        ~target={crate::js_value_from_string_or_null(props.target.as_ref())}
-        disabled={props.disabled.unwrap_or_default()}
-        ~alwaysFocusable={crate::js_value_or_null(props.always_focusable.clone())}
-        ~label={crate::js_value_from_string_or_null(props.label.as_ref())}
+        elevated={props.elevated.then(|| AttrValue::from(""))}
+        href={props.href.clone()}
+        target={props.target.clone()}
+        disabled={props.disabled}
+        always-focusable={props.always_focusable.then(|| AttrValue::from(""))}
+        label={props.label.clone()}
     > {props.children.clone()} </@> }
 }
diff --git a/src/chips.rs b/src/chips.rs
new file mode 100644
index 0000000..a9c1194
--- /dev/null
+++ b/src/chips.rs
@@ -0,0 +1,22 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub label: Option<String>,
+    #[prop_or_default]
+    pub selected: bool,
+    #[prop_or_default]
+    pub disabled: bool,
+}
+
+#[function_component(Chips)]
+pub fn chips(props: &Props) -> Html {
+    html! {
+        <md-chips
+            label={props.label.clone().unwrap_or_default()}
+            selected={props.selected}
+            disabled={props.disabled}
+        />
+    }
+}
diff --git a/src/circular_progress.rs b/src/circular_progress.rs
index aab0465..41e408d 100644
--- a/src/circular_progress.rs
+++ b/src/circular_progress.rs
@@ -2,29 +2,27 @@ use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Progress to display, a fraction between 0 and <code>max</code>.
-    #[prop_or(Some(0))]
-    pub value: Option<usize>,
+    #[prop_or_default]
+    pub value: usize,
     /// Maximum progress to display, defaults to 1.
-    #[prop_or(Some(1))]
-    pub max: Option<usize>,
+    #[prop_or(1)]
+    pub max: usize,
     /// Whether or not to display indeterminate progress, which gives no indication to how long an
     /// activity will take.
-    #[prop_or(Some(false))]
-    pub indeterminate: Option<bool>,
+    #[prop_or_default]
+    pub indeterminate: bool,
     /// Whether or not to render indeterminate mode using 4 colors instead of one.
-    #[prop_or(Some(false))]
-    pub four_color: Option<bool>,
+    #[prop_or_default]
+    pub four_color: bool,
 }
 
 #[function_component]
 pub fn CircularProgress(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/circular-progress.js")
-    });
+    crate::import_material_web_module!("/md-web/circular-progress.js");
     html! { <md-circular-progress
-        // TODO: value={props.value.clone().unwrap_or_default()}
-        ~max={crate::js_value_or_null(props.max.clone())}
-        ~indeterminate={crate::js_value_or_null(props.indeterminate.clone())}
-        ~fourColor={crate::js_value_or_null(props.four_color.clone())}
+        value={props.value.to_string()}
+        max={props.max.to_string()}
+        indeterminate={props.indeterminate.then(|| AttrValue::from(""))}
+        four-color={props.four_color.then(|| AttrValue::from(""))}
     /> }
 }
diff --git a/src/color.rs b/src/color.rs
new file mode 100644
index 0000000..27f3604
--- /dev/null
+++ b/src/color.rs
@@ -0,0 +1,19 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub value: Option<String>,
+    #[prop_or_default]
+    pub disabled: bool,
+}
+
+#[function_component(Color)]
+pub fn color(props: &Props) -> Html {
+    html! {
+        <md-color
+            value={props.value.clone().unwrap_or_default()}
+            disabled={props.disabled}
+        />
+    }
+}
diff --git a/src/dialog.rs b/src/dialog.rs
new file mode 100644
index 0000000..78aacc2
--- /dev/null
+++ b/src/dialog.rs
@@ -0,0 +1,24 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub open: bool,
+    #[prop_or_default]
+    pub heading: Option<String>,
+    #[prop_or_default]
+    pub content: Option<String>,
+    // #[prop_or_default]
+    // pub onclosed: Option<Callback<()>>,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Dialog)]
+pub fn dialog(props: &Props) -> Html {
+    html! {
+        <md-dialog open={props.open} heading={props.heading.clone().unwrap_or_default()}>
+            { for props.children.iter() }
+        </md-dialog>
+    }
+}
diff --git a/src/divider.rs b/src/divider.rs
new file mode 100644
index 0000000..5bf248c
--- /dev/null
+++ b/src/divider.rs
@@ -0,0 +1,20 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub inset: bool,
+    #[prop_or_default]
+    pub vertical: bool,
+}
+
+#[function_component(Divider)]
+pub fn divider(props: &Props) -> Html {
+    crate::import_material_web_module!("/md-web/divider.js");
+    html! {
+        <md-divider
+            inset={props.inset.then(|| AttrValue::from(""))}
+            vertical={props.vertical.then(|| AttrValue::from(""))}
+        />
+    }
+}
diff --git a/src/elevation.rs b/src/elevation.rs
new file mode 100644
index 0000000..a172d17
--- /dev/null
+++ b/src/elevation.rs
@@ -0,0 +1,14 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub level: Option<u8>,
+}
+
+#[function_component(Elevation)]
+pub fn elevation(props: &Props) -> Html {
+    html! {
+    <md-elevation level={props.level.unwrap_or(1).to_string()} />
+    }
+}
diff --git a/src/fab.rs b/src/fab.rs
index 86c92be..7d2ae13 100644
--- a/src/fab.rs
+++ b/src/fab.rs
@@ -18,30 +18,31 @@ impl FabVariants {
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// The FAB color variant to render.
-    #[prop_or(Some(AttrValue::Static("surface")))]
+    #[prop_or_default]
     pub kind: Option<AttrValue>,
     /// The size of the FAB.<br>NOTE: Branded FABs cannot be sized to <code>small</code>, and
     /// Extended FABs do not have different sizes.
-    #[prop_or(Some(AttrValue::Static("medium")))]
+    #[prop_or_default]
     pub size: Option<AttrValue>,
     /// The text to display on the FAB.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub label: Option<AttrValue>,
     /// Lowers the FAB’s elevation.
-    #[prop_or(Some(false))]
-    pub lowered: Option<bool>,
+    #[prop_or_default]
+    pub lowered: bool,
     /// The variant to use.
     pub variant: FabVariants,
+    #[prop_or_default]
     pub children: Html,
 }
 
 #[function_component]
 pub fn Fab(props: &Props) -> Html {
-    use_effect_with((), |_| crate::import_material_web_module!("/md-web/fab.js"));
+    crate::import_material_web_module!("/md-web/fab.js");
     html! { <@{props.variant.as_tag_name()}
-        ~variant={crate::js_value_from_string_or_null(props.kind.as_ref())}
-        ~size={crate::js_value_from_string_or_null(props.size.as_ref())}
-        ~label={crate::js_value_from_string_or_null(props.label.as_ref())}
-        ~lowered={crate::js_value_or_null(props.lowered.clone())}
+        variant={props.kind.clone()}
+        size={props.size.clone()}
+        label={props.label.clone()}
+        lowered={props.lowered.then(|| AttrValue::from(""))}
     > {props.children.clone()} </@> }
 }
diff --git a/src/field.rs b/src/field.rs
new file mode 100644
index 0000000..2220d17
--- /dev/null
+++ b/src/field.rs
@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub label: Option<String>,
+    #[prop_or_default]
+    pub value: Option<String>,
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Field)]
+pub fn field(props: &Props) -> Html {
+    html! {
+        <md-field
+            label={props.label.clone().unwrap_or_default()}
+            value={props.value.clone().unwrap_or_default()}
+            disabled={props.disabled}
+        >
+            { for props.children.iter() }
+        </md-field>
+    }
+}
diff --git a/src/focus.rs b/src/focus.rs
new file mode 100644
index 0000000..3685fbc
--- /dev/null
+++ b/src/focus.rs
@@ -0,0 +1,18 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Focus)]
+pub fn focus(props: &Props) -> Html {
+    html! {
+        <md-focus disabled={props.disabled}>
+            { for props.children.iter() }
+        </md-focus>
+    }
+}
diff --git a/src/icon.rs b/src/icon.rs
new file mode 100644
index 0000000..6a00cad
--- /dev/null
+++ b/src/icon.rs
@@ -0,0 +1,14 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub icon: Option<String>,
+}
+
+#[function_component(Icon)]
+pub fn icon(props: &Props) -> Html {
+    html! {
+        <md-icon>{ props.icon.clone().unwrap_or_default() }</md-icon>
+    }
+}
diff --git a/src/icon_button.rs b/src/icon_button.rs
index dd635f7..bfb26b9 100644
--- a/src/icon_button.rs
+++ b/src/icon_button.rs
@@ -1,6 +1,8 @@
-use web_sys::{HtmlFormElement as HTMLFormElement, NodeList};
+use js_sys::Reflect;
+use wasm_bindgen::JsValue;
+use web_sys::HtmlFormElement;
 use yew::prelude::*;
-#[derive(PartialEq)]
+#[derive(PartialEq, Clone)]
 pub enum IconButtonVariants {
     Standard,
     Filled,
@@ -19,76 +21,88 @@ impl IconButtonVariants {
     }
 }
 
-#[derive(Properties, PartialEq)]
+#[derive(Properties, PartialEq, Clone)]
 pub struct Props {
     /// Disables the icon button and makes it non-interactive.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// Flips the icon if it is in an RTL context at startup.
-    #[prop_or(Some(false))]
-    pub flip_icon_in_rtl: Option<bool>,
+    #[prop_or_default]
+    pub flip_icon_in_rtl: bool,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>href</code> resource attribute.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub href: Option<AttrValue>,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>target</code> attribute.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub target: Option<AttrValue>,
     /// The <code>aria-label</code> of the button when the button is toggleable and selected.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub aria_label_selected: Option<AttrValue>,
     /// When true, the button will toggle between selected and unselected states
-    #[prop_or(Some(false))]
-    pub toggle: Option<bool>,
+    #[prop_or_default]
+    pub toggle: bool,
     /// Sets the selected state. When false, displays the default icon. When true, displays the
     /// selected icon, or the default icon If no <code>slot=&quot;selected&quot;</code> icon is
     /// provided.
-    #[prop_or(Some(false))]
-    pub selected: Option<bool>,
+    #[prop_or_default]
+    pub selected: bool,
     ///
-    #[prop_or(Some(AttrValue::Static("submit")))]
+    #[prop_or_default]
     pub typepe: Option<AttrValue>,
     ///
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub value: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name: Option<AttrValue>,
-    ///
-    #[prop_or(None)]
-    pub form: Option<HTMLFormElement>,
-    ///
-    #[prop_or(None)]
-    pub labels: Option<NodeList>,
+    #[prop_or_default]
+    pub form: Option<HtmlFormElement>,
     /// The variant to use.
     pub variant: IconButtonVariants,
+    #[prop_or_default]
     pub children: Html,
 
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onclick: Option<Callback<MouseEvent>>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub oninput: Option<Callback<InputEvent>>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onchange: Option<Callback<Event>>,
 }
 
 #[function_component]
 pub fn IconButton(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/icon-button.js")
-    });
+    let node_ref = use_node_ref();
+    {
+        let node_ref = node_ref.clone();
+        let props = props.clone();
+        use_effect_with(props, move |props| {
+            let element = node_ref.get().unwrap();
+            let form_value = props.form.as_ref().map(|f| f.into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"form".into(), &form_value).unwrap();
+
+            let type_value = props.typepe.as_ref().map(|t| t.as_str().into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"type".into(), &type_value).unwrap();
+
+            let value_value = props.value.as_ref().map(|v| v.as_str().into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"value".into(), &value_value).unwrap();
+
+            let name_value = props.name.as_ref().map(|n| n.as_str().into()).unwrap_or(JsValue::NULL);
+            Reflect::set(&element, &"name".into(), &name_value).unwrap();
+            move || {}
+        });
+    }
+
+    crate::import_material_web_module!("/md-web/icon-button.js");
     html! { <@{props.variant.as_tag_name()}
-        disabled={props.disabled.unwrap_or_default()}
-        ~flipIconInRtl={crate::js_value_or_null(props.flip_icon_in_rtl.clone())}
-        ~href={crate::js_value_from_string_or_null(props.href.as_ref())}
-        ~target={crate::js_value_from_string_or_null(props.target.as_ref())}
-        ~ariaLabelSelected={crate::js_value_from_string_or_null(props.aria_label_selected.as_ref())}
-        ~toggle={crate::js_value_or_null(props.toggle.clone())}
-        selected={props.selected.unwrap_or_default()}
-        ~type={crate::js_value_from_string_or_null(props.typepe.as_ref())}
-        value={props.value.clone().unwrap_or_default()}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
-        ~labels={crate::js_value_or_null(props.labels.clone())}
+        ref={node_ref}
+        disabled={props.disabled}
+        flip-icon-in-rtl={props.flip_icon_in_rtl.then(|| AttrValue::from(""))}
+        href={props.href.clone()}
+        target={props.target.clone()}
+        aria-label-selected={props.aria_label_selected.clone()}
+        toggle={props.toggle.then(|| AttrValue::from(""))}
+        selected={props.selected}
         onclick={props.onclick.clone()}
         oninput={props.oninput.clone()}
         onchange={props.onchange.clone()}
diff --git a/src/lib.rs b/src/lib.rs
index 39788b4..a0cb06d 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,10 +1,29 @@
-//! ## TODOs
-//!
-//! ### Missing Components
-//! - [`md-chip-set`](https://material-web.dev/components/chip/#mdchipset-lessmd-chip-setgreater)
-//! - [`md-dialog`](https://material-web.dev/components/dialog/)
-//! - [`md-select`](https://material-web.dev/components/select/)
-//! - [`md-sub-menu` events](https://material-web.dev/components/menu/#events-2)
+// ## TODOs
+//
+// ### Missing Components
+// - [`md-chip-set`](https://material-web.dev/components/chip/#mdchipset-lessmd-chip-setgreater)
+// - [`md-dialog`](https://material-web.dev/components/dialog/)
+// - [`md-select`](https://material-web.dev/components/select/)
+// - [`md-sub-menu` events](https://material-web.dev/components/menu/#events-2)
+mod chips;
+mod color;
+mod divider;
+mod field;
+mod focus;
+mod progress;
+mod ripple;
+mod select;
+mod tabs;
+
+pub use chips::Chips;
+pub use color::Color;
+pub use divider::Divider;
+pub use field::Field;
+pub use focus::Focus;
+pub use progress::Progress;
+pub use ripple::Ripple;
+pub use select::Select;
+pub use tabs::Tabs;
 mod button;
 mod checkbox;
 mod chip;
@@ -20,6 +39,10 @@ mod radio;
 mod slider;
 mod sub_menu;
 mod switch;
+mod textfield;
+mod elevation;
+mod icon;
+mod dialog;
 
 pub use button::{Button, ButtonVariants};
 pub use checkbox::Checkbox;
@@ -36,6 +59,10 @@ pub use radio::Radio;
 pub use slider::Slider;
 pub use sub_menu::SubMenu;
 pub use switch::Switch;
+pub use textfield::TextField;
+pub use dialog::Dialog;
+pub use elevation::Elevation;
+pub use icon::Icon;
 use wasm_bindgen::prelude::*;
 use yew::AttrValue;
 
diff --git a/src/linear_progress.rs b/src/linear_progress.rs
index ba1c86c..1ca5eb1 100644
--- a/src/linear_progress.rs
+++ b/src/linear_progress.rs
@@ -2,33 +2,31 @@ use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Buffer amount to display, a fraction between 0 and 1.
-    #[prop_or(Some(1))]
-    pub buffer: Option<usize>,
+    #[prop_or(1)]
+    pub buffer: usize,
     /// Progress to display, a fraction between 0 and <code>max</code>.
-    #[prop_or(Some(0))]
-    pub value: Option<usize>,
+    #[prop_or_default]
+    pub value: usize,
     /// Maximum progress to display, defaults to 1.
-    #[prop_or(Some(1))]
-    pub max: Option<usize>,
+    #[prop_or(1)]
+    pub max: usize,
     /// Whether or not to display indeterminate progress, which gives no indication to how long an
     /// activity will take.
-    #[prop_or(Some(false))]
-    pub indeterminate: Option<bool>,
+    #[prop_or_default]
+    pub indeterminate: bool,
     /// Whether or not to render indeterminate mode using 4 colors instead of one.
-    #[prop_or(Some(false))]
-    pub four_color: Option<bool>,
+    #[prop_or_default]
+    pub four_color: bool,
 }
 
 #[function_component]
 pub fn LinearProgress(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/linear-progress.js")
-    });
+    crate::import_material_web_module!("/md-web/linear-progress.js");
     html! { <md-linear-progress
-        ~buffer={crate::js_value_or_null(props.buffer.clone())}
-        // TODO: value={props.value.clone().unwrap_or_default()}
-        ~max={crate::js_value_or_null(props.max.clone())}
-        ~indeterminate={crate::js_value_or_null(props.indeterminate.clone())}
-        ~fourColor={crate::js_value_or_null(props.four_color.clone())}
+        buffer={props.buffer.to_string()}
+        value={props.value.to_string()}
+        max={props.max.to_string()}
+        indeterminate={props.indeterminate.then(|| AttrValue::from(""))}
+        four-color={props.four_color.then(|| AttrValue::from(""))}
     /> }
 }
diff --git a/src/list_item.rs b/src/list_item.rs
index 7f6531a..16944ab 100644
--- a/src/list_item.rs
+++ b/src/list_item.rs
@@ -2,35 +2,34 @@ use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Disables the item and makes it non-selectable and non-interactive.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// Sets the behavior of the list item, defaults to “text”. Change to “link” or “button” for
     /// interactive items.
-    #[prop_or(Some(AttrValue::Static("text")))]
+    #[prop_or_default]
     pub typepe: Option<AttrValue>,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>href</code> resource attribute.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub href: Option<AttrValue>,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>target</code> attribute when
     /// <code>href</code> is set.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub target: Option<AttrValue>,
+    #[prop_or_default]
     pub children: Html,
 
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onfocus: Option<Callback<FocusEvent>>,
 }
 
 #[function_component]
 pub fn ListItem(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/list-item.js")
-    });
+    crate::import_material_web_module!("/md-web/list-item.js");
     html! { <md-list-item
-        disabled={props.disabled.unwrap_or_default()}
-        ~type={crate::js_value_from_string_or_null(props.typepe.as_ref())}
-        ~href={crate::js_value_from_string_or_null(props.href.as_ref())}
-        ~target={crate::js_value_from_string_or_null(props.target.as_ref())}
+        disabled={props.disabled}
+        type={props.typepe.clone()}
+        href={props.href.clone()}
+        target={props.target.clone()}
         onfocus={props.onfocus.clone()}
     > {props.children.clone()} </md-list-item> }
 }
diff --git a/src/menu.rs b/src/menu.rs
index 52f8324..5b16ade 100644
--- a/src/menu.rs
+++ b/src/menu.rs
@@ -1,3 +1,5 @@
+use wasm_bindgen::{prelude::Closure, JsCast};
+use web_sys::EventTarget;
 use yew::prelude::*;
 
 type TypeaheadController = AttrValue;
@@ -7,7 +9,7 @@ pub struct Props {
     /// setting <code>anchorElement = elementReference</code>.<br><strong>NOTE</strong>: anchor or
     /// anchorElement must either be an HTMLElement or resolve to an HTMLElement in order for menu
     /// to open.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub anchor: Option<AttrValue>,
     /// Whether the positioning algorithm should calculate relative to the parent of the anchor
     /// element (absolute) or relative to the window (fixed).<br>Examples for <code>position =
@@ -19,105 +21,172 @@ pub struct Props {
     /// <code>position:absolute</code> or <code>position:fixed</code> elements when placed inside
     /// of them. e.g. using a menu inside of an <code>md-dialog</code>.<br><strong>NOTE</strong>:
     /// Fixed menus will not scroll with the page and will be fixed to the window instead.
-    #[prop_or(Some(AttrValue::Static("absolute")))]
+    #[prop_or_default]
     pub positioning: Option<AttrValue>,
     /// Skips the opening and closing animations.
-    #[prop_or(Some(false))]
-    pub quick: Option<bool>,
+    #[prop_or_default]
+    pub quick: bool,
     /// Displays overflow content like a submenu.<br><strong>NOTE</strong>: This may cause adverse
     /// effects if you set <code>md-menu {max-height:...}</code> and have items overflowing items
     /// in the “y” direction.
-    #[prop_or(Some(false))]
-    pub has_overflow: Option<bool>,
+    #[prop_or_default]
+    pub has_overflow: bool,
     /// Opens the menu and makes it visible. Alternative to the <code>.show()</code> and
     /// <code>.close()</code> methods
-    #[prop_or(Some(false))]
-    pub open: Option<bool>,
+    #[prop_or_default]
+    pub open: bool,
     /// Offsets the menu’s inline alignment from the anchor by the given number in pixels. This
     /// value is direction aware and will follow the LTR / RTL direction.<br>e.g. LTR: positive
     /// -&gt; right, negative -&gt; left RTL: positive -&gt; left, negative -&gt; right
-    #[prop_or(Some(0))]
-    pub x_offset: Option<usize>,
+    #[prop_or_default]
+    pub x_offset: usize,
     /// Offsets the menu’s block alignment from the anchor by the given number in pixels.<br>e.g.
     /// positive -&gt; down, negative -&gt; up
-    #[prop_or(Some(0))]
-    pub y_offset: Option<usize>,
+    #[prop_or_default]
+    pub y_offset: usize,
     /// The max time between the keystrokes of the typeahead menu behavior before it clears the
     /// typeahead buffer.
-    #[prop_or(Some(200))]
-    pub typepeahead_delay: Option<usize>,
+    #[prop_or(200)]
+    pub typepeahead_delay: usize,
     /// The corner of the anchor which to align the menu in the standard logical property style of
     /// <block>-<inline> e.g. <code>'end-start'</code>.<br>NOTE: This value may not be respected by
     /// the menu positioning algorithm if the menu would render outisde the viewport.
-    #[prop_or(Some(AttrValue::Static("end-start")))]
+    #[prop_or_default]
     pub anchor_corner: Option<AttrValue>,
     /// The corner of the menu which to align the anchor in the standard logical property style of
     /// <block>-<inline> e.g. <code>'start-start'</code>.<br>NOTE: This value may not be respected
     /// by the menu positioning algorithm if the menu would render outisde the viewport.
-    #[prop_or(Some(AttrValue::Static("start-start")))]
+    #[prop_or_default]
     pub menu_corner: Option<AttrValue>,
     /// Keeps the user clicks outside the menu.<br>NOTE: clicking outside may still cause focusout
     /// to close the menu so see <code>stayOpenOnFocusout</code>.
-    #[prop_or(Some(false))]
-    pub stay_open_on_outside_click: Option<bool>,
+    #[prop_or_default]
+    pub stay_open_on_outside_click: bool,
     /// Keeps the menu open when focus leaves the menu’s composed subtree.<br>NOTE: Focusout
     /// behavior will stop propagation of the focusout event. Set this property to true to opt-out
     /// of menu’s focuout handling altogether.
-    #[prop_or(Some(false))]
-    pub stay_open_on_focusout: Option<bool>,
+    #[prop_or_default]
+    pub stay_open_on_focusout: bool,
     /// After closing, does not restore focus to the last focused element before the menu was
     /// opened.
-    #[prop_or(Some(false))]
-    pub skip_restore_focus: Option<bool>,
+    #[prop_or_default]
+    pub skip_restore_focus: bool,
     /// The element that should be focused by default once opened.<br>NOTE: When setting default
     /// focus to ‘LIST_ROOT’, remember to change <code>tabindex</code> to <code>0</code> and change
     /// md-menu’s display to something other than <code>display: contents</code> when necessary.
-    #[prop_or(Some(AttrValue::Static("first-item")))]
+    #[prop_or_default]
     pub default_focus: Option<AttrValue>,
     /// Whether or not the current menu is a submenu and should not handle specific navigation
     /// keys.
-    #[prop_or(Some(false))]
-    pub is_submenu: Option<bool>,
-    /// Handles typeahead navigation through the menu.
-    #[prop_or(Some(AttrValue::Static("function { ... }")))]
-    pub typepeahead_controller: Option<TypeaheadController>,
-    ///
-    # [prop_or (Some (wasm_bindgen :: JsValue :: NULL . into ()))]
-    pub anchor_element: Option<web_sys::HtmlElement>,
+    #[prop_or_default]
+    pub is_submenu: bool,
+    #[prop_or_default]
+    pub onclosing: Callback<Event>,
+    #[prop_or_default]
+    pub onopening: Callback<Event>,
+    #[prop_or_default]
+    pub onopened: Callback<Event>,
+    #[prop_or_default]
+    pub onclosed: Callback<Event>,
+    #[prop_or_default]
     pub children: Html,
-    #[prop_or(None)]
-    pub onopening: Option<Callback<Event>>,
-    #[prop_or(None)]
-    pub onopened: Option<Callback<Event>>,
-    #[prop_or(None)]
-    pub onclosing: Option<Callback<Event>>,
-    #[prop_or(None)]
-    pub onclosed: Option<Callback<Event>>,
 }
 
 #[function_component]
 pub fn Menu(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/menu.js")
-    });
+    let node_ref = use_node_ref();
+
+    {
+        let node_ref = node_ref.clone();
+        let onclosing = props.onclosing.clone();
+        use_effect_with(onclosing, move |onclosing_ref| {
+            let onclosing = onclosing_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onclosing.emit(event));
+            target
+                .add_event_listener_with_callback("closing", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("closing", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onopening = props.onopening.clone();
+        use_effect_with(onopening, move |onopening_ref| {
+            let onopening = onopening_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onopening.emit(event));
+            target
+                .add_event_listener_with_callback("opening", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("opening", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onopened = props.onopened.clone();
+        use_effect_with(onopened, move |onopened_ref| {
+            let onopened = onopened_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onopened.emit(event));
+            target
+                .add_event_listener_with_callback("opened", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("opened", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onclosed = props.onclosed.clone();
+        use_effect_with(onclosed, move |onclosed_ref| {
+            let onclosed = onclosed_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onclosed.emit(event));
+            target
+                .add_event_listener_with_callback("closed", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("closed", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    crate::import_material_web_module!("/md-web/menu.js");
     html! { <md-menu
-       ~anchor={crate::js_value_from_string_or_null(props.anchor.as_ref())}
-       ~positioning={crate::js_value_from_string_or_null(props.positioning.as_ref())}
-       ~quick={crate::js_value_or_null(props.quick.clone())}
-       ~hasOverflow={crate::js_value_or_null(props.has_overflow.clone())}
-       open={props.open.unwrap_or_default()}
-       ~xOffset={crate::js_value_or_null(props.x_offset.clone())}
-       ~yOffset={crate::js_value_or_null(props.y_offset.clone())}
-       ~typeaheadDelay={crate::js_value_or_null(props.typepeahead_delay.clone())}
-       ~anchorCorner={crate::js_value_from_string_or_null(props.anchor_corner.as_ref())}
-       ~menuCorner={crate::js_value_from_string_or_null(props.menu_corner.as_ref())}
-       ~stayOpenOnOutsideClick={crate::js_value_or_null(props.stay_open_on_outside_click.clone())}
-       ~stayOpenOnFocusout={crate::js_value_or_null(props.stay_open_on_focusout.clone())}
-       ~skipRestoreFocus={crate::js_value_or_null(props.skip_restore_focus.clone())}
-       ~defaultFocus={crate::js_value_from_string_or_null(props.default_focus.as_ref())}
-       ~isSubmenu={crate::js_value_or_null(props.is_submenu.clone())}
-       ~typeaheadController={crate::js_value_from_string_or_null(props.typepeahead_controller.as_ref())}
-       ~anchorElement={crate::js_value_or_null(props.anchor_element.clone())}>
+       ref={node_ref}
+       anchor={props.anchor.clone()}
+       positioning={props.positioning.clone()}
+       quick={props.quick.then(|| AttrValue::from(""))}
+       has-overflow={props.has_overflow.then(|| AttrValue::from(""))}
+       open={props.open}
+       x-offset={props.x_offset.to_string()}
+       y-offset={props.y_offset.to_string()}
+       typeahead-delay={props.typepeahead_delay.to_string()}
+       anchor-corner={props.anchor_corner.clone()}
+       menu-corner={props.menu_corner.clone()}
+       stay-open-on-outside-click={props.stay_open_on_outside_click.then(|| AttrValue::from(""))}
+       stay-open-on-focusout={props.stay_open_on_focusout.then(|| AttrValue::from(""))}
+       skip-restore-focus={props.skip_restore_focus.then(|| AttrValue::from(""))}
+       default-focus={props.default_focus.clone()}
+       is-submenu={props.is_submenu.then(|| AttrValue::from(""))}
+    >
         {props.children.clone()}
     </md-menu> }
 }
diff --git a/src/menu_item.rs b/src/menu_item.rs
index ec9b503..b826405 100644
--- a/src/menu_item.rs
+++ b/src/menu_item.rs
@@ -2,43 +2,42 @@ use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Disables the item and makes it non-selectable and non-interactive.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// Sets the behavior and role of the menu item, defaults to “menuitem”.
-    #[prop_or(Some(AttrValue::Static("menuitem")))]
+    #[prop_or_default]
     pub typepe: Option<AttrValue>,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>href</code> resource attribute.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub href: Option<AttrValue>,
     /// Sets the underlying <code>HTMLAnchorElement</code>’s <code>target</code> attribute when
     /// <code>href</code> is set.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub target: Option<AttrValue>,
     /// Keeps the menu open if clicked or keyboard selected.
-    #[prop_or(Some(false))]
-    pub keep_open: Option<bool>,
+    #[prop_or_default]
+    pub keep_open: bool,
     /// Sets the item in the selected visual state when a submenu is opened.
-    #[prop_or(Some(false))]
-    pub selected: Option<bool>,
+    #[prop_or_default]
+    pub selected: bool,
     ///
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub typepeahead_text: Option<AttrValue>,
+    #[prop_or_default]
     pub children: Html,
 }
 
 #[function_component]
 pub fn MenuItem(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/menu-item.js")
-    });
+    crate::import_material_web_module!("/md-web/menu-item.js");
     html! { <md-menu-item
-       disabled={props.disabled.unwrap_or_default()}
-       ~type={crate::js_value_from_string_or_null(props.typepe.as_ref())}
-       ~href={crate::js_value_from_string_or_null(props.href.as_ref())}
-       ~target={crate::js_value_from_string_or_null(props.target.as_ref())}
-       ~keepOpen={crate::js_value_or_null(props.keep_open.clone())}
-       selected={props.selected.unwrap_or_default()}
-       ~typeaheadText={crate::js_value_from_string_or_null(props.typepeahead_text.as_ref())}
+       disabled={props.disabled}
+       type={props.typepe.clone()}
+       href={props.href.clone()}
+       target={props.target.clone()}
+       keep-open={props.keep_open.then(|| AttrValue::from(""))}
+       selected={props.selected}
+       typeahead-text={props.typepeahead_text.clone()}
     >
         {props.children.clone()}
     </md-menu-item> }
diff --git a/src/progress.rs b/src/progress.rs
new file mode 100644
index 0000000..19357bd
--- /dev/null
+++ b/src/progress.rs
@@ -0,0 +1,22 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub progress: Option<f32>,
+    #[prop_or_default]
+    pub indeterminate: bool,
+    #[prop_or_default]
+    pub four_color: bool,
+}
+
+#[function_component(Progress)]
+pub fn progress(props: &Props) -> Html {
+    html! {
+        <md-progress
+            progress={props.progress.unwrap_or(0.0).to_string()}
+            indeterminate={props.indeterminate.then(|| AttrValue::from(""))}
+            four-color={props.four_color.then(|| AttrValue::from(""))}
+        />
+    }
+}
diff --git a/src/radio.rs b/src/radio.rs
index 906b8c5..80a2d4e 100644
--- a/src/radio.rs
+++ b/src/radio.rs
@@ -1,43 +1,34 @@
-use web_sys::{HtmlFormElement as HTMLFormElement, NodeList};
 use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Whether or not the radio is disabled.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// The element value to use in form submission when checked.
-    #[prop_or(Some(AttrValue::Static("on")))]
-    pub value: Option<AttrValue>,
+    #[prop_or_default]
+    pub value: AttrValue,
     ///
-    #[prop_or(None)]
-    pub checked: Option<bool>,
+    #[prop_or_default]
+    pub checked: bool,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name: Option<AttrValue>,
-    ///
-    #[prop_or(None)]
-    pub form: Option<HTMLFormElement>,
-    ///
-    #[prop_or(None)]
-    pub labels: Option<NodeList>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub oninput: Option<Callback<InputEvent>>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onchange: Option<Callback<Event>>,
 }
 
 #[function_component]
 pub fn Radio(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/radio.js")
-    });
+    crate::import_material_web_module!("/md-web/radio.js");
     html! { <md-radio
-        disabled={props.disabled.unwrap_or_default()}
-        value={props.value.clone().unwrap_or_default()}
-        ~checked={crate::js_value_or_null(props.checked.clone())}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
-        ~labels={crate::js_value_or_null(props.labels.clone())}
+        disabled={props.disabled}
+        value={props.value.clone()}
+        checked={props.checked.then(|| AttrValue::from(""))}
+        name={props.name.clone()}
+        // ~form={props.form.clone()}
+        // ~labels={props.labels.clone()}
         oninput={props.oninput.clone()}
         onchange={props.onchange.clone()}
     /> }
diff --git a/src/ripple.rs b/src/ripple.rs
new file mode 100644
index 0000000..e82ae49
--- /dev/null
+++ b/src/ripple.rs
@@ -0,0 +1,23 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub unbounded: bool,
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Ripple)]
+pub fn ripple(props: &Props) -> Html {
+    html! {
+        <md-ripple
+            unbounded={props.unbounded.then(|| AttrValue::from(""))}
+            disabled={props.disabled}
+        >
+            { for props.children.iter() }
+        </md-ripple>
+    }
+}
diff --git a/src/select.rs b/src/select.rs
new file mode 100644
index 0000000..4f9cb19
--- /dev/null
+++ b/src/select.rs
@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub label: Option<String>,
+    #[prop_or_default]
+    pub value: Option<String>,
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Select)]
+pub fn select(props: &Props) -> Html {
+    html! {
+        <md-select
+            label={props.label.clone().unwrap_or_default()}
+            value={props.value.clone().unwrap_or_default()}
+            disabled={props.disabled}
+        >
+            { for props.children.iter() }
+        </md-select>
+    }
+}
diff --git a/src/slider.rs b/src/slider.rs
index 56033ac..afb0137 100644
--- a/src/slider.rs
+++ b/src/slider.rs
@@ -1,108 +1,97 @@
-use web_sys::{HtmlFormElement as HTMLFormElement, NodeList};
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Whether or not the slider is disabled.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// The slider minimum value
-    #[prop_or(Some(0))]
-    pub min: Option<usize>,
+    #[prop_or_default]
+    pub min: usize,
     /// The slider maximum value
-    #[prop_or(Some(100))]
-    pub max: Option<usize>,
+    #[prop_or(100)]
+    pub max: usize,
     /// The slider value displayed when range is false.
-    #[prop_or(None)]
+    #[prop_or_default]
     pub value: Option<usize>,
     /// The slider start value displayed when range is true.
-    #[prop_or(None)]
+    #[prop_or_default]
     pub value_start: Option<usize>,
     /// The slider end value displayed when range is true.
-    #[prop_or(None)]
+    #[prop_or_default]
     pub value_end: Option<usize>,
     /// An optional label for the slider’s value displayed when range is false; if not set, the
     /// label is the value itself.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub value_label: Option<AttrValue>,
     /// An optional label for the slider’s start value displayed when range is true; if not set,
     /// the label is the valueStart itself.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub value_label_start: Option<AttrValue>,
     /// An optional label for the slider’s end value displayed when range is true; if not set, the
     /// label is the valueEnd itself.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub value_label_end: Option<AttrValue>,
     /// Aria label for the slider’s start handle displayed when range is true.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub aria_label_start: Option<AttrValue>,
     /// Aria value text for the slider’s start value displayed when range is true.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub aria_value_text_start: Option<AttrValue>,
     /// Aria label for the slider’s end handle displayed when range is true.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub aria_label_end: Option<AttrValue>,
     /// Aria value text for the slider’s end value displayed when range is true.
-    #[prop_or(Some(AttrValue::Static("")))]
+    #[prop_or_default]
     pub aria_value_text_end: Option<AttrValue>,
     /// The step between values.
-    #[prop_or(Some(1))]
-    pub step: Option<usize>,
+    #[prop_or(1)]
+    pub step: usize,
     /// Whether or not to show tick marks.
-    #[prop_or(Some(false))]
-    pub ticks: Option<bool>,
+    #[prop_or_default]
+    pub ticks: bool,
     /// Whether or not to show a value label when activated.
-    #[prop_or(Some(false))]
-    pub labeled: Option<bool>,
+    #[prop_or_default]
+    pub labeled: bool,
     /// Whether or not to show a value range. When false, the slider displays a slideable handle
     /// for the value property; when true, it displays slideable handles for the valueStart and
     /// valueEnd properties.
-    #[prop_or(Some(false))]
-    pub range: Option<bool>,
+    #[prop_or_default]
+    pub range: bool,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name_start: Option<AttrValue>,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name_end: Option<AttrValue>,
-    ///
-    #[prop_or(None)]
-    pub form: Option<HTMLFormElement>,
-    ///
-    #[prop_or(None)]
-    pub labels: Option<NodeList>,
 }
 
 #[function_component]
 pub fn Slider(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/slider.js")
-    });
+    crate::import_material_web_module!("/md-web/slider.js");
     html! { <md-slider
-        disabled={props.disabled.unwrap_or_default()}
-        ~min={crate::js_value_or_null(props.min.clone())}
-        ~max={crate::js_value_or_null(props.max.clone())}
-        // TODO: ~value={props.value.clone().unwrap_or_default()}
-        ~valueStart={crate::js_value_or_null(props.value_start.clone())}
-        ~valueEnd={crate::js_value_or_null(props.value_end.clone())}
-        ~valueLabel={crate::js_value_from_string_or_null(props.value_label.as_ref())}
-        ~valueLabelStart={crate::js_value_from_string_or_null(props.value_label_start.as_ref())}
-        ~valueLabelEnd={crate::js_value_from_string_or_null(props.value_label_end.as_ref())}
-        ~ariaLabelStart={crate::js_value_from_string_or_null(props.aria_label_start.as_ref())}
-        ~ariaValueTextStart={crate::js_value_from_string_or_null(props.aria_value_text_start.as_ref())}
-        ~ariaLabelEnd={crate::js_value_from_string_or_null(props.aria_label_end.as_ref())}
-        ~ariaValueTextEnd={crate::js_value_from_string_or_null(props.aria_value_text_end.as_ref())}
-        ~step={crate::js_value_or_null(props.step.clone())}
-        ~ticks={crate::js_value_or_null(props.ticks.clone())}
-        ~labeled={crate::js_value_or_null(props.labeled.clone())}
-        ~range={crate::js_value_or_null(props.range.clone())}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~nameStart={crate::js_value_from_string_or_null(props.name_start.as_ref())}
-        ~nameEnd={crate::js_value_from_string_or_null(props.name_end.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
-        ~labels={crate::js_value_or_null(props.labels.clone())}
+        disabled={props.disabled}
+        min={props.min.to_string()}
+        max={props.max.to_string()}
+        value={props.value.map(|v| v.to_string())}
+        value-start={props.value_start.map(|v| v.to_string())}
+        value-end={props.value_end.map(|v| v.to_string())}
+        value-label={props.value_label.clone()}
+        value-label-start={props.value_label_start.clone()}
+        value-label-end={props.value_label_end.clone()}
+        aria-label-start={props.aria_label_start.clone()}
+        aria-value-text-start={props.aria_value_text_start.clone()}
+        aria-label-end={props.aria_label_end.clone()}
+        aria-value-text-end={props.aria_value_text_end.clone()}
+        step={props.step.to_string()}
+        ticks={props.ticks.then(|| AttrValue::from(""))}
+        labeled={props.labeled.then(|| AttrValue::from(""))}
+        range={props.range.then(|| AttrValue::from(""))}
+        name={props.name.clone()}
+        name-start={props.name_start.clone()}
+        name-end={props.name_end.clone()}
     />}
 }
diff --git a/src/sub_menu.rs b/src/sub_menu.rs
index 7ed0109..6699fc6 100644
--- a/src/sub_menu.rs
+++ b/src/sub_menu.rs
@@ -1,44 +1,119 @@
-use wasm_bindgen::JsValue;
+use wasm_bindgen::{prelude::Closure, JsCast};
+use web_sys::EventTarget;
 use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// The anchorCorner to set on the submenu.
-    #[prop_or(Some(AttrValue::Static("Corner.START_END")))]
+    #[prop_or_default]
     pub anchor_corner: Option<AttrValue>,
     /// The menuCorner to set on the submenu.
-    #[prop_or(Some(AttrValue::Static("Corner.START_START")))]
+    #[prop_or_default]
     pub menu_corner: Option<AttrValue>,
     /// The delay between mouseenter and submenu opening.
-    #[prop_or(Some(400))]
-    pub hover_open_delay: Option<usize>,
+    #[prop_or(400)]
+    pub hover_open_delay: usize,
     /// The delay between ponterleave and the submenu closing.
-    #[prop_or(Some(400))]
-    pub hover_close_delay: Option<usize>,
+    #[prop_or(400)]
+    pub hover_close_delay: usize,
     /// READONLY: self-identifies as a menu item and sets its identifying attribute
-    #[prop_or(Some(true))]
-    pub is_sub_menu: Option<bool>,
-    ///
-    # [prop_or (Some (wasm_bindgen :: JsValue :: NULL . into ()))]
-    pub item: Option<JsValue>,
-    ///
-    # [prop_or (Some (wasm_bindgen :: JsValue :: NULL . into ()))]
-    pub menu: Option<JsValue>,
+    #[prop_or(true)]
+    pub is_sub_menu: bool,
+    #[prop_or_default]
+    pub onclosing: Callback<Event>,
+    #[prop_or_default]
+    pub onopening: Callback<Event>,
+    #[prop_or_default]
+    pub onopened: Callback<Event>,
+    #[prop_or_default]
+    pub onclosed: Callback<Event>,
+    #[prop_or_default]
     pub children: Html,
 }
 
 #[function_component]
 pub fn SubMenu(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/sub-menu.js")
-    });
+    let node_ref = use_node_ref();
+    {
+        let node_ref = node_ref.clone();
+        let onclosing = props.onclosing.clone();
+        use_effect_with(onclosing, move |onclosing_ref| {
+            let onclosing = onclosing_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onclosing.emit(event));
+            target
+                .add_event_listener_with_callback("closing", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("closing", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onopening = props.onopening.clone();
+        use_effect_with(onopening, move |onopening_ref| {
+            let onopening = onopening_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onopening.emit(event));
+            target
+                .add_event_listener_with_callback("opening", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("opening", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onopened = props.onopened.clone();
+        use_effect_with(onopened, move |onopened_ref| {
+            let onopened = onopened_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onopened.emit(event));
+            target
+                .add_event_listener_with_callback("opened", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("opened", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+    {
+        let node_ref = node_ref.clone();
+        let onclosed = props.onclosed.clone();
+        use_effect_with(onclosed, move |onclosed_ref| {
+            let onclosed = onclosed_ref.clone();
+            let element = node_ref.get().unwrap();
+            let target = element.dyn_ref::<EventTarget>().unwrap().clone();
+            let listener = Closure::<dyn FnMut(_)>::new(move |event| onclosed.emit(event));
+            target
+                .add_event_listener_with_callback("closed", listener.as_ref().unchecked_ref())
+                .unwrap();
+            move || {
+                target
+                    .remove_event_listener_with_callback("closed", listener.as_ref().unchecked_ref())
+                    .unwrap();
+            }
+        });
+    }
+
+    crate::import_material_web_module!("/md-web/sub-menu.js");
     html! { <md-sub-menu
-       ~anchorCorner={crate::js_value_from_string_or_null(props.anchor_corner.as_ref())}
-       ~menuCorner={crate::js_value_from_string_or_null(props.menu_corner.as_ref())}
-       ~hoverOpenDelay={crate::js_value_or_null(props.hover_open_delay.clone())}
-       ~hoverCloseDelay={crate::js_value_or_null(props.hover_close_delay.clone())}
-       ~isSubMenu={crate::js_value_or_null(props.is_sub_menu.clone())}
-       ~item={crate::js_value_or_null(props.item.clone())}
-       ~menu={crate::js_value_or_null(props.menu.clone())}
+        ref={node_ref}
+       anchor-corner={props.anchor_corner.clone()}
+       menu-corner={props.menu_corner.clone()}
+       hover-open-delay={props.hover_open_delay.to_string()}
+       hover-close-delay={props.hover_close_delay.to_string()}
+       is-sub-menu={props.is_sub_menu.then(|| AttrValue::from(""))}
     >
         {props.children.clone()}
     </md-sub-menu> }
diff --git a/src/switch.rs b/src/switch.rs
index 3236292..910d4a0 100644
--- a/src/switch.rs
+++ b/src/switch.rs
@@ -1,74 +1,56 @@
-use wasm_bindgen::JsValue;
-use web_sys::{HtmlFormElement as HTMLFormElement, NodeList};
 use yew::prelude::*;
 
-type ValidityState = JsValue;
-
 #[derive(Properties, PartialEq)]
 pub struct Props {
     /// Disables the switch and makes it non-interactive.
-    #[prop_or(Some(false))]
-    pub disabled: Option<bool>,
+    #[prop_or_default]
+    pub disabled: bool,
     /// Puts the switch in the selected state and sets the form submission value to the
     /// <code>value</code> property.
-    #[prop_or(Some(false))]
-    pub selected: Option<bool>,
+    #[prop_or_default]
+    pub selected: bool,
     /// Shows both the selected and deselected icons.
-    #[prop_or(Some(false))]
-    pub icons: Option<bool>,
+    #[prop_or_default]
+    pub icons: bool,
     /// Shows only the selected icon, and not the deselected icon. If <code>true</code>, overrides
     /// the behavior of the <code>icons</code> property.
-    #[prop_or(Some(false))]
-    pub show_only_selected_icon: Option<bool>,
+    #[prop_or_default]
+    pub show_only_selected_icon: bool,
     /// When true, require the switch to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
-    #[prop_or(Some(false))]
-    pub required: Option<bool>,
+    #[prop_or_default]
+    pub required: bool,
     /// The value associated with this switch on form submission. <code>null</code> is submitted
     /// when <code>selected</code> is <code>false</code>.
-    #[prop_or(Some(AttrValue::Static("on")))]
-    pub value: Option<AttrValue>,
+    #[prop_or_default]
+    pub value: AttrValue,
     ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub name: Option<AttrValue>,
     ///
-    #[prop_or(None)]
-    pub form: Option<HTMLFormElement>,
-    ///
-    #[prop_or(None)]
-    pub labels: Option<NodeList>,
-    ///
-    #[prop_or(None)]
-    pub validity: Option<ValidityState>,
-    ///
-    #[prop_or(None)]
+    #[prop_or_default]
     pub validation_message: Option<AttrValue>,
     ///
-    #[prop_or(None)]
-    pub will_validate: Option<bool>,
-    #[prop_or(None)]
+    #[prop_or_default]
+    pub will_validate: bool,
+    #[prop_or_default]
     pub oninput: Option<Callback<InputEvent>>,
-    #[prop_or(None)]
+    #[prop_or_default]
     pub onchange: Option<Callback<Event>>,
 }
 
 #[function_component]
 pub fn Switch(props: &Props) -> Html {
-    use_effect_with((), |_| {
-        crate::import_material_web_module!("/md-web/switch.js")
-    });
+    crate::import_material_web_module!("/md-web/switch.js");
     html! { <md-switch
-        disabled={props.disabled.unwrap_or_default()}
-        selected={props.selected.unwrap_or_default()}
-        ~icons={crate::js_value_or_null(props.icons.clone())}
-        ~showOnlySelectedIcon={crate::js_value_or_null(props.show_only_selected_icon.clone())}
-        required={props.required.unwrap_or_default()}
-        value={props.value.clone().unwrap_or_default()}
-        ~name={crate::js_value_from_string_or_null(props.name.as_ref())}
-        ~form={crate::js_value_or_null(props.form.clone())}
-        ~labels={crate::js_value_or_null(props.labels.clone())}
-        ~validity={crate::js_value_or_null(props.validity.clone())}
-        ~validationMessage={crate::js_value_from_string_or_null(props.validation_message.as_ref())}
-        ~willValidate={crate::js_value_or_null(props.will_validate.clone())}
+        disabled={props.disabled}
+        selected={props.selected}
+        icons={props.icons.then(|| AttrValue::from(""))}
+        show-only-selected-icon={props.show_only_selected_icon.then(|| AttrValue::from(""))}
+        required={props.required}
+        value={props.value.clone()}
+        name={props.name.clone()}
+        validation-message={props.validation_message.clone()}
+        will-validate={props.will_validate.then(|| AttrValue::from(""))}
         oninput={props.oninput.clone()}
         onchange={props.onchange.clone()}
     />}
diff --git a/src/tabs.rs b/src/tabs.rs
new file mode 100644
index 0000000..f379c24
--- /dev/null
+++ b/src/tabs.rs
@@ -0,0 +1,18 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub active_index: Option<usize>,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(Tabs)]
+pub fn tabs(props: &Props) -> Html {
+    html! {
+        <md-tabs active-index={props.active_index.map(|i| i.to_string())}>
+            { for props.children.iter() }
+        </md-tabs>
+    }
+}
diff --git a/src/textfield.rs b/src/textfield.rs
new file mode 100644
index 0000000..a8b3c89
--- /dev/null
+++ b/src/textfield.rs
@@ -0,0 +1,43 @@
+use yew::prelude::*;
+use web_sys::HtmlInputElement;
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    #[prop_or_default]
+    pub label: Option<String>,
+    #[prop_or_default]
+    pub value: Option<String>,
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub outlined: bool,
+    #[prop_or_default]
+    pub oninput: Option<Callback<String>>,
+}
+
+#[function_component(TextField)]
+pub fn textfield(props: &Props) -> Html {
+    crate::import_material_web_module!("/md-web/textfield.js");
+    let oninput = props.oninput.clone();
+    let oninput_cb = Callback::from(move |e: InputEvent| {
+        if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
+            if let Some(cb) = &oninput {
+                cb.emit(input.value());
+            }
+        }
+    });
+
+    let tag = if props.outlined {
+        "md-outlined-text-field"
+    } else {
+        "md-filled-text-field"
+    };
+    html! {
+        <@{tag}
+            label={props.label.clone().unwrap_or_default()}
+            value={props.value.clone().unwrap_or_default()}
+            disabled={props.disabled}
+            oninput={oninput_cb}
+        />
+    }
+}
diff --git a/usages/Cargo.toml b/usages/Cargo.toml
index 0bc7e27..99520d4 100644
--- a/usages/Cargo.toml
+++ b/usages/Cargo.toml
@@ -5,14 +5,18 @@ edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
+wasm-bindgen = "0.2.87"
 proc-macro2 = "1.0.79"
 quote = "1.0.36"
 syn = { version = "2.0.58", features = ["full"] }
 textwrap = "0.16.1"
 eyre = "0.6.12"
 
-yew = { git = "https://github.com/yewstack/yew", features = ["csr"] }
-yew-router = { git = "https://github.com/yewstack/yew" }
+yew = { version = "0.21", features = ["csr"] }
+yew-router = "0.18"
 material-yew = { path = "../" }
 prettyplease = "0.2.17"
diff --git a/usages/index.html b/usages/index.html
index 141550e..eb899fd 100644
--- a/usages/index.html
+++ b/usages/index.html
@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-<!--    <link data-trunk rel="copy-dir" href="./build/dist"  data-target-path="md/">-->
-    <link data-trunk rel="rust" data-bin="usages" />
+    <script type="module">
+      import init from './pkg/usages.js';
+      init();
+    </script>
 </head>
 <body>
 
diff --git a/usages/src/main.rs b/usages/src/lib.rs
similarity index 94%
rename from usages/src/main.rs
rename to usages/src/lib.rs
index 385c1e4..9671f56 100644
--- a/usages/src/main.rs
+++ b/usages/src/lib.rs
@@ -37,6 +37,9 @@ fn App() -> Html {
     }
 }
 
-fn main() {
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen(start)]
+pub fn run_app() {
     yew::Renderer::<App>::new().render();
 }
diff --git a/usages/src/usage.rs b/usages/src/usage.rs
index 941dba7..ef9aa54 100644
--- a/usages/src/usage.rs
+++ b/usages/src/usage.rs
@@ -17,10 +17,6 @@ pub fn test_menu(children: Html) -> Html {
             skip_restore_focus={false}
             default_focus={AttrValue::Static("<some default_focus>")}
             is_submenu={false}
-            onopening={Callback :: noop ()}
-            onopened={Callback :: noop ()}
-            onclosing={Callback :: noop ()}
-            onclosed={Callback :: noop ()}
         >
             {children}
         </Menu>