diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a2212e8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,45 @@
+# MNotes
+
+A modern Markdown note-taking application with Material Design 3 styling. MNotes allows you to create, edit, and organize your notes with a clean and intuitive interface.
+
+## Features
+
+- **Markdown Support**: Write notes using Markdown syntax with real-time preview
+- **Material Design 3**: Beautiful and responsive UI following Material Design principles
+- **Theme Customization**: Choose between light, dark, and sepia themes with customizable primary colors
+- **GitHub Integration**: Save your notes directly to GitHub repositories
+- **Local Storage**: Notes are automatically saved to your browser's local storage
+- **Search Functionality**: Quickly find notes using the built-in search
+- **Keyboard Shortcuts**: Boost your productivity with keyboard shortcuts
+- **Auto-save**: Never lose your work with automatic saving
+- **Export**: Download your notes as Markdown files
+
+## Getting Started
+
+Simply open the `index.html` file in your web browser to start using MNotes. No installation or server required!
+
+## Keyboard Shortcuts
+
+- `Ctrl+S` / `Cmd+S`: Save current note
+- `Ctrl+P` / `Cmd+P`: Toggle markdown preview
+- `Ctrl+B` / `Cmd+B`: Bold text
+- `Ctrl+I` / `Cmd+I`: Italic text
+
+## Technology
+
+MNotes is built using pure HTML, CSS, and JavaScript, with no framework dependencies. It utilizes the Material Web Components library for UI elements.
+
+## Credits
+
+- **Jakub Ruzicka / korozelife** ([@thejakubruzicka](https://github.com/thejakubruzicka)) - Main idea
+- **mxnticek** ([@VlastikYoutubeKo](https://github.com/VlastikYoutubeKo)) - Adding some features
+- **Gemini AI** (Google AI) - Rough example of the app
+- **Claude AI** - Finishing touches of the app
+
+## License
+
+This project is open source and available under the MIT License.
+
+## Version
+
+Current version: 1.0.0
\ No newline at end of file
diff --git a/components-wiki/button.md b/components-wiki/button.md
new file mode 100644
index 0000000..f11f9fe
--- /dev/null
+++ b/components-wiki/button.md
@@ -0,0 +1,834 @@
+<!-- catalog-only-start --><!-- ---
+name: Buttons
+dirname: button
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Buttons
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-button -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/button/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Buttons](https://m3.material.io/components/buttons)<!-- {.external} --> help people
+initiate actions, from sending an email, to sharing a document, to liking a
+post.
+
+There are five types of common buttons: elevated, filled, filled tonal,
+outlined, and text.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    alt="A phone showing a payment screen with a green filled button that says 'Make
+payment'"
+    title="There are 5 types of common buttons"
+    src="images/button/hero.webp">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/buttons) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/button)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Types
+
+<!-- no-catalog-start -->
+
+![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      class="types-image"
+      style="justify-content:center;"
+      title="Elevated, filled, filled tonal, outlined, and text buttons"
+      aria-label="The 5 types of common buttons">
+    <style>
+      .types-image .wrapper,
+      .types-image .wrapper > * {
+        display: flex;
+        padding: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+      .types-image .wrapper > * {
+        flex-direction: column;
+        align-items: center;
+        padding-inline: 16px;
+      }
+      .types-image span {
+        display: inline-flex;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        padding: 8px;
+        margin-block-start: 8px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+    <div class="wrapper">
+      <div>
+        <md-elevated-button has-icon>
+          <md-icon slot="icon">add</md-icon>
+          Elevated
+        </md-elevated-button>
+        <span>1</span>
+      </div>
+      <div>
+        <md-filled-button>Filled</md-filled-button>
+        <span>2</span>
+      </div>
+      <div>
+        <md-filled-tonal-button>Tonal</md-filled-tonal-button>
+        <span>3</span>
+      </div>
+      <div>
+        <md-outlined-button>Outlined</md-outlined-button>
+        <span>4</span>
+      </div>
+      <div>
+        <md-text-button>Text</md-text-button>
+        <span>5</span>
+      </div>
+    </div>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+1.  [Elevated button](#elevated-button)
+1.  [Filled button](#filled-button)
+1.  [Filled tonal button](#filled-tonal-button)
+1.  [Outlined button](#outlined-button)
+1.  [Text button](#text-button)
+
+## Usage
+
+Buttons have label text that describes the action that will occur if a user taps
+a button.
+
+<!-- no-catalog-start -->
+
+![An outlined button with the text "Back" next to a filled button with the text
+"Complete"](images/button/usage.webp "Outlined and filled buttons.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Outlined and filled buttons."
+      aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
+    <md-outlined-button>Back</md-outlined-button>
+    <md-filled-button>Complete</md-filled-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-outlined-button>Back</md-outlined-button>
+<md-filled-button>Complete</md-filled-button>
+```
+
+### Icon
+
+An icon may optionally be added to a button to help communicate the button's
+action and help draw attention.
+
+<!-- no-catalog-start -->
+
+![A tonal button with a right arrow send icon with text 'send' and a text button
+with the text 'open' with a trailing icon arrow
+box](images/button/usage-icon.webp "Slot in icons to the appropriate slots")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Outlined and filled buttons."
+      aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
+    <md-filled-tonal-button>
+      Send
+      <svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
+    </md-filled-tonal-button>
+
+    <md-text-button trailing-icon>
+      Open
+      <svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg>
+    </md-text-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-filled-tonal-button>
+  Send
+  <svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
+</md-filled-tonal-button>
+
+<md-text-button trailing-icon>
+  Open
+  <svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg>
+</md-text-button>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to buttons whose labels need a more descriptive label.
+
+```html
+<md-elevated-button aria-label="Add a new contact">Add</md-elevated-button>
+```
+
+### Focusable and disabled
+
+By default, disabled buttons are not focusable with the keyboard, while
+"soft-disabled" buttons are. Some use cases encourage focusability of disabled
+toolbar items to increase their discoverability.
+
+See the
+[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
+for guidance on when this is recommended.
+
+```html
+<div role="toolbar">
+  <md-text-button>Copy</md-text-button>
+  <md-text-button>Cut</md-text-button>
+  <!--
+    This button is disabled but kept focusable to improve its discoverability
+    in the toolbar.
+  -->
+  <md-text-button soft-disabled>Paste</md-text-button>
+</div>
+```
+
+## Elevated button
+
+<!-- go/md-elevated-button -->
+
+[Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e)<!-- {.external} -->
+are essentially filled tonal buttons with a shadow. To prevent shadow creep,
+only use them when absolutely necessary, such as when the button requires visual
+separation from a patterned background.
+
+<!-- no-catalog-start -->
+
+![An elevated button](images/button/usage-elevated-button.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      aria-label="An elevated button.">
+    <md-elevated-button>Elevated</md-elevated-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-elevated-button>Elevated</md-elevated-button>
+```
+
+## Filled button
+
+<!-- go/md-filled-button -->
+
+[Filled buttons](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe)<!-- {.external} -->
+have the most visual impact after the FAB, and should be used for important,
+final actions that complete a flow, like Save, Join now, or Confirm.
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      aria-label="A filled button.">
+    <md-filled-button>Filled</md-filled-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-filled-button>Filled</md-filled-button>
+```
+
+## Filled tonal button
+
+<!-- go/md-filled-tonal-button -->
+
+A
+[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b)<!-- {.external} -->
+is an alternative middle ground between filled and outlined buttons. They're
+useful in contexts where a lower-priority button requires slightly more emphasis
+than an outline would give, such as "Next" in an onboarding flow.
+
+<!-- no-catalog-start -->
+
+![A filled tonal button](images/button/usage-filled-tonal-button.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      aria-label="A tonal button.">
+    <md-filled-tonal-button>Tonal</md-filled-tonal-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-filled-tonal-button>Tonal</md-filled-tonal-button>
+```
+
+## Outlined button
+
+<!-- go/md-outlined-button -->
+
+[Outlined buttons](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05)<!-- {.external} -->
+are medium-emphasis buttons. They contain actions that are important, but aren’t
+the primary action in an app.
+
+<!-- no-catalog-start -->
+
+![An outlined button](images/button/usage-outlined-button.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      aria-label="An outlined button.">
+    <md-outlined-button>Outlined</md-outlined-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-outlined-button>Outlined</md-outlined-button>
+```
+
+## Text button
+
+<!-- go/md-text-button -->
+
+[Text buttons](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb)<!-- {.external} -->
+are used for the lowest priority actions, especially when presenting multiple
+options.
+
+<!-- no-catalog-start -->
+
+![A text button](images/button/usage-text-button.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      aria-label="A text button.">
+    <md-text-button>Text</md-text-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-text-button>Text</md-text-button>
+```
+
+## Theming
+
+Button supports [Material theming](../theming/README.md) and can be customized
+in terms of color, typography, and shape.
+
+### Elevated button tokens
+
+Token                                   | Default value
+--------------------------------------- | -------------------------------------
+`--md-elevated-button-container-color`  | `--md-sys-color-surface`
+`--md-elevated-button-container-shape`  | `--md-sys-shape-corner-full`
+`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
+`--md-elevated-button-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)
+    <!-- {.external} -->
+
+### Elevated button example
+
+<!-- no-catalog-start -->
+
+![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp "Elevated button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Elevated button theming example."
+      aria-label="Image of an elevated button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-elevated-button-container-shape: 0px;
+        --md-elevated-button-label-text-font: system-ui;
+        --md-sys-color-surface-container-low: #FAFDFC;
+        --md-sys-color-primary: #191C1C;
+      }
+    </style>
+
+    <md-elevated-button>Elevated</md-elevated-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-elevated-button-container-shape: 0px;
+  --md-elevated-button-label-text-font: system-ui;
+  --md-sys-color-surface-container-low: #FAFDFC;
+  --md-sys-color-primary: #191C1C;
+}
+</style>
+
+<md-elevated-button>Elevated</md-elevated-button>
+```
+
+### Filled button tokens
+
+Token                                 | Default value
+------------------------------------- | -------------------------------------
+`--md-filled-button-container-color`  | `--md-sys-color-primary`
+`--md-filled-button-container-shape`  | `--md-sys-shape-corner-full`
+`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
+`--md-filled-button-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)
+    <!-- {.external} -->
+
+### Filled button example
+
+<!-- no-catalog-start -->
+
+![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp "Filled button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Filled button theming example."
+      aria-label="Image of a filled button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-filled-button-container-shape: 0px;
+        --md-filled-button-label-text-font: system-ui;
+        --md-sys-color-primary: #006A6A;
+        --md-sys-color-on-primary: #FFFFFF;
+      }
+    </style>
+
+    <md-filled-button>Filled</md-filled-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-filled-button-container-shape: 0px;
+  --md-filled-button-label-text-font: system-ui;
+  --md-sys-color-primary: #006A6A;
+  --md-sys-color-on-primary: #FFFFFF;
+}
+</style>
+
+<md-filled-button>Filled</md-filled-button>
+```
+
+### Filled tonal button tokens
+
+Token                                       | Default value
+------------------------------------------- | -------------
+`--md-filled-tonal-button-container-color`  | `--md-sys-color-secondary-container`
+`--md-filled-tonal-button-container-shape`  | `--md-sys-shape-corner-full`
+`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
+`--md-filled-tonal-button-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
+    <!-- {.external} -->
+
+### Filled tonal button example
+
+<!-- no-catalog-start -->
+
+![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp "Filled tonal button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Tonal button theming example."
+      aria-label="Image of a tonal button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-filled-tonal-button-container-shape: 0px;
+        --md-filled-tonal-button-label-text-font: system-ui;
+        --md-sys-color-secondary-container: #CCE8E7;
+        --md-sys-color-on-secondary-container: #051F1F;
+      }
+    </style>
+
+    <md-filled-tonal-button>Tonal</md-filled-tonal-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-filled-tonal-button-container-shape: 0px;
+  --md-filled-tonal-button-label-text-font: system-ui;
+  --md-sys-color-secondary-container: #CCE8E7;
+  --md-sys-color-on-secondary-container: #051F1F;
+}
+</style>
+
+<md-filled-tonal-button>Tonal</md-filled-tonal-button>
+```
+
+### Outlined button tokens
+
+Token                                   | Default value
+--------------------------------------- | -------------------------------------
+`--md-outlined-button-outline-color`    | `--md-sys-color-outline`
+`--md-outlined-button-container-shape`  | `--md-sys-shape-corner-full`
+`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
+`--md-outlined-button-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)
+    <!-- {.external} -->
+
+### Outlined button example
+
+<!-- no-catalog-start -->
+
+![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp "Outlined button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Outlined button theming example."
+      aria-label="Image of a outlined button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-outlined-button-container-shape: 0px;
+        --md-outlined-button-label-text-font: system-ui;
+        --md-sys-color-primary: #006A6A;
+        --md-sys-color-outline: #6F7979;
+      }
+    </style>
+
+    <md-outlined-button>Outlined</md-outlined-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-outlined-button-container-shape: 0px;
+  --md-outlined-button-label-text-font: system-ui;
+  --md-sys-color-primary: #006A6A;
+  --md-sys-color-outline: #6F7979;
+}
+</style>
+
+<md-outlined-button>Outlined</md-outlined-button>
+```
+
+### Text button tokens
+
+Token                               | Default value
+----------------------------------- | -------------------------------------
+`--md-text-button-label-text-color` | `--md-sys-color-primary`
+`--md-text-button-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)
+    <!-- {.external} -->
+
+### Text button example
+
+<!-- no-catalog-start -->
+
+![Image of a text button with a different theme applied](images/button/theming-text-button.webp "Text button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Text button theming example."
+      aria-label="Image of a text button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-text-button-label-text-font: system-ui;
+        --md-sys-color-primary: #006A6A;
+      }
+    </style>
+
+    <md-text-button>Text</md-text-button>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-text-button-label-text-font: system-ui;
+  --md-sys-color-primary: #006A6A;
+}
+</style>
+
+<md-text-button>Text</md-text-button>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdElevatedButton <code>&lt;md-elevated-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>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. |
+| `href` | `href` | `string` | `''` | The URL that the link button points to. |
+| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdFilledButton <code>&lt;md-filled-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>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. |
+| `href` | `href` | `string` | `''` | The URL that the link button points to. |
+| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdFilledTonalButton <code>&lt;md-filled-tonal-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>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. |
+| `href` | `href` | `string` | `''` | The URL that the link button points to. |
+| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdOutlinedButton <code>&lt;md-outlined-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>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. |
+| `href` | `href` | `string` | `''` | The URL that the link button points to. |
+| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdTextButton <code>&lt;md-text-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>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. |
+| `href` | `href` | `string` | `''` | The URL that the link button points to. |
+| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/checkbox.md b/components-wiki/checkbox.md
new file mode 100644
index 0000000..4bc35ae
--- /dev/null
+++ b/components-wiki/checkbox.md
@@ -0,0 +1,210 @@
+<!-- catalog-only-start --><!-- ---
+name: Checkbox
+dirname: checkbox
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Checkbox
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: {
+  owner: 'lizmitchell'
+  reviewed: '2025-05-20'
+}
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-checkbox -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/checkbox/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Checkboxes](https://m3.material.io/components/checkbox)<!-- {.external} --> allow users
+to select one or more items from a set. Checkboxes can turn an option on or off.
+
+There's one type of checkbox in Material. Use this selection control when the
+user needs to select one or more options from a list.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    src="images/checkbox/hero.webp"
+    alt="A list of burger additions represented with checkboxes"
+    title="Checkboxes in a list of items.">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/checkbox) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/checkbox)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Checkboxes may be standalone, pre-checked, or indeterminate.
+
+<!-- no-catalog-start -->
+
+![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp "Unselected, selected, and indeterminate checkboxes.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/checkbox/usage.html" -->
+
+```html
+<md-checkbox touch-target="wrapper"></md-checkbox>
+<md-checkbox touch-target="wrapper" checked></md-checkbox>
+<md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
+```
+
+### Label
+
+Associate a label with a checkbox using the `<label>` element.
+
+<!-- no-catalog-start -->
+
+![Two checkboxes with labels](images/checkbox/usage-label.webp "Labeled checkboxes.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/checkbox/usage-label.html" -->
+
+```html
+<label>
+  <md-checkbox touch-target="wrapper"></md-checkbox>
+  Checkbox one
+</label>
+
+<md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
+<label for="checkbox-two">Checkbox two</label>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to checkboxes without labels or checkboxes whose labels need to be
+more descriptive.
+
+```html
+<md-checkbox aria-label="Select all checkboxes"></md-checkbox>
+
+<label>
+  <md-checkbox aria-label="Agree to terms and conditions"></md-checkbox>
+  Agree
+</label>
+```
+
+> Note: checkboxes are not automatically labelled by `<label>` elements and
+> always need an `aria-label`. See b/294081528.
+
+## Theming
+
+Checkbox supports [Material theming](../theming/README.md) and can be customized
+in terms of color and shape.
+
+### Tokens
+
+Token                                    | Default value
+---------------------------------------- | -----------------------------------
+`--md-checkbox-outline-color`            | `--md-sys-color-on-surface-variant`
+`--md-checkbox-selected-container-color` | `--md-sys-color-primary`
+`--md-checkbox-selected-icon-color`      | `--md-sys-color-on-primary`
+`--md-checkbox-container-shape`          | `2px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-checkbox.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+
+![Image of a checkbox with a different theme applied](images/checkbox/theming.webp "Checkbox theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/checkbox/theming.html" -->
+
+```html
+<style>
+  :root {
+    /* System tokens */
+    --md-sys-color-primary: #006a6a;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-on-surface-variant: #3f4948;
+
+    /* Component tokens */
+    --md-checkbox-container-shape: 0px;
+  }
+</style>
+
+<md-checkbox touch-target="wrapper"></md-checkbox>
+<md-checkbox touch-target="wrapper" checked></md-checkbox>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdCheckbox <code>&lt;md-checkbox&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `checked` | `checked` | `boolean` | `false` | Whether or not the checkbox is selected. |
+| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not the checkbox is indeterminate.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes |
+| `required` | `required` | `boolean` | `false` | 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 |
+| `value` | `value` | `string` | `'on'` | 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 |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/chip.md b/components-wiki/chip.md
new file mode 100644
index 0000000..0144df0
--- /dev/null
+++ b/components-wiki/chip.md
@@ -0,0 +1,626 @@
+<!-- catalog-only-start --><!-- ---
+name: Chips
+dirname: chips
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Chips
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-chips -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/chip/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Chips](https://m3.material.io/components/chips)<!-- {.external} --> help people enter
+information, make selections, filter content, or trigger actions.
+
+While buttons are expected to appear consistently and with familiar calls to
+action, chips should appear dynamically as a group of multiple interactive
+elements.
+
+</catalog-component-header-title>
+
+<img class="hero" src="images/chips/hero.webp" alt="Two collections of filter chips, with some options selected and some unselected."
+title="Filter chips">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/chips) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/chips)
+    <!-- {.external} -->
+
+## Types
+
+1.  [Assist chip](#assist-chip)
+1.  [Filter chip](#filter-chip)
+1.  [Input chip](#input-chip)
+1.  [Suggestion chip](#suggestion-chip)
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Choose the type of chip based on its purpose and author.
+
+-   **Assist** chips are common actions, such as adding an event to a calendar.
+-   **Filter** chips are tags used to filter content, such as shopping
+    categories.
+-   **Input** chips are pieces of information entered by a user, such as event
+    attendees.
+-   **Suggestion** chips represent dynamic suggestions for user input, such as
+    text message replies.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-chip-set>
+  <md-assist-chip label="Assist"></md-assist-chip>
+  <md-filter-chip label="Filter"></md-filter-chip>
+  <md-input-chip label="Input"></md-input-chip>
+  <md-suggestion-chip label="Suggestion"></md-suggestion-chip>
+</md-chip-set>
+```
+
+### Chip sets
+
+<!-- go/md-chip-set -->
+
+Chips should always appear in a set. Chip sets are
+[toolbars](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role)<!-- {.external} -->
+that can display any type of chip or other toolbar items.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<h3>New event</h3>
+<md-chip-set>
+  <md-filter-chip label="All day"></md-filter-chip>
+  <md-assist-chip label="Add to calendar"></md-assist-chip>
+  <md-assist-chip label="Set a reminder"></md-assist-chip>
+</md-chip-set>
+```
+
+### Icons
+
+All chips may display an optional icon. Input chips can specify if an avatar
+picture is displayed.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<md-chip-set>
+  <md-assist-chip label="Add to calendar">
+    <md-icon slot="icon">event</md-icon>
+  </md-assist-chip>
+
+  <md-input-chip label="Ping Qiang" avatar>
+    <img slot="icon" src="...">
+  </md-input-chip>
+</md-chip-set>
+```
+
+### Elevated
+
+Assist, filter, and suggestion chips can be elevated if the placement requires
+protection, such as on top of an image.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<div>
+  <img src="...">
+  <md-chip-set>
+    <md-suggestion-chip label="Share" elevated></md-suggestion-chip>
+    <md-suggestion-chip label="Favorite" elevated></md-suggestion-chip>
+  </md-chip-set>
+</div>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to chip sets or reference a label with
+[`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)<!-- {.external} -->.
+Add an `aria-label` to chips whose labels need to be more descriptive.
+
+```html
+<h3 id="dates-label">Dates</h3>
+<md-chip-set aria-labelledby="dates-label">
+  <md-filter-chip label="Mon" aria-label="Monday"></md-filter-chip>
+  <md-filter-chip label="Tue" aria-label="Tuesday"></md-filter-chip>
+  <md-filter-chip label="Wed" aria-label="Wednesday"></md-filter-chip>
+</md-chip-set>
+```
+
+### Focusable and disabled
+
+By default, disabled chips are not focusable with the keyboard, while
+"soft-disabled" chips are. Some use cases encourage focusability of disabled
+toolbar items to increase their discoverability.
+
+See the
+[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
+for guidance on when this is recommended.
+
+```html
+<md-chip-set aria-label="Actions">
+  <!--
+    Disabled until text is selected. Since both are disabled by default, keep
+    them focusable so that screen readers can discover the actions available.
+  -->
+  <md-assist-chip label="Copy" soft-disabled></md-assist-chip>
+  <md-assist-chip label="Paste" soft-disabled></md-assist-chip>
+</md-chip-set>
+<md-outlined-text-field type="textarea"></md-outlined-text-field>
+```
+
+## Assist chip
+
+<!-- go/md-assist-chip -->
+
+[Assist chips](https://m3.material.io/components/chips/guidelines#5dd1928c-1476-4029-bdc5-fde66fc0dcb1)<!-- {.external} -->
+represent smart or automated actions that can span multiple apps, such as
+opening a calendar event from the home screen.
+
+Assist chips function as though the user asked an assistant to complete the
+action. They should appear dynamically and contextually in a UI.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<h3>A restaraunt location</h3>
+<md-chip-set>
+  <md-assist-chip label="Add to my itinerary">
+    <md-icon slot="icon">calendar</md-icon>
+  </md-assist-chip>
+  <md-assist-chip label="12 mins from hotel">
+    <md-icon slot="icon">map</md-icon>
+  </md-assist-chip>
+</md-chip-set>
+```
+
+## Filter chip
+
+<!-- go/md-filter-chip -->
+
+[Filter chips](https://m3.material.io/components/chips/guidelines#8d453d50-8d8e-43aa-9ae3-87ed134d2e64)<!-- {.external} -->
+use tags or descriptive words to filter content. They can be a good alternative
+to toggle buttons or checkboxes.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<h3>Choose where to share</h3>
+<md-chip-set>
+  <md-filter-chip label="Docs"></md-filter-chip>
+  <md-filter-chip label="Slides" selected></md-filter-chip>
+  <md-filter-chip label="Sheets" selected></md-filter-chip>
+  <md-filter-chip label="Images"></md-filter-chip>
+</md-chip-set>
+```
+
+### Removable
+
+Filter chips can optionally be removable from the chip set. Removable chips have
+a trailing remove icon.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<h3>Colors</h3>
+<md-chip-set>
+  <md-filter-chip label="Red" removable selected></md-filter-chip>
+  <md-filter-chip label="Yellow" removable></md-filter-chip>
+  <md-filter-chip label="Blue" removable></md-filter-chip>
+  <md-filter-chip label="Green" removable></md-filter-chip>
+</md-chip-set>
+```
+
+## Input chip
+
+<!-- go/md-input-chip -->
+
+[Input chips](https://m3.material.io/components/chips/guidelines#4d2d5ef5-3fcd-46e9-99f2-067747b2393f)<!-- {.external} -->
+represent discrete pieces of information entered by a user, such as Gmail
+contacts or filter options within a search field.
+
+Input chips whose icons are user images may add the `avatar` attribute to
+display the image in a larger circle.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<md-outlined-text-field label="Attendees" type="email"></md-outlined-text-field>
+
+<md-chip-set>
+  <md-input-chip label="Ping Qiang" avatar>
+    <img slot="icon" src="...">
+  </md-input-chip>
+  <md-input-chip label="Thea Schröder" avatar>
+    <img slot="icon" src="...">
+  </md-input-chip>
+</md-chip-set>
+```
+
+### Remove-only
+
+All input chips are removable. If an input chip does not have an action
+associated with clicking on it, it may be marked as `remove-only`.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<h3>Favorite movies</h3>
+<md-chip-set>
+  <md-input-chip label="Star Wars" remove-only></md-input-chip>
+  <md-input-chip label="Star Trek" remove-only></md-input-chip>
+</md-chip-set>
+```
+
+## Suggestion chip
+
+<!-- go/md-suggestion-chip -->
+
+[Suggestion chips](https://m3.material.io/components/chips/guidelines#36d7bb16-a9bf-4cf6-a73d-8e05510d66a7)<!-- {.external} -->
+help narrow a user’s intent by presenting dynamically generated suggestions,
+such as possible responses or search filters.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
+<!-- catalog-only-end -->
+
+```html
+<h3>Suggested reply</h3>
+<md-chip-set>
+  <md-suggestion-chip label="I agree"></md-suggestion-chip>
+  <md-suggestion-chip label="Looks good to me"></md-suggestion-chip>
+  <md-suggestion-chip label="Thank you"></md-suggestion-chip>
+</md-chip-set>
+```
+
+## Theming
+
+Chips support [Material theming](../theming/README.md) and can be customized in
+terms of color, typography, and shape.
+
+### Assist chip tokens
+
+Token                               | Default value
+----------------------------------- | -------------------------------------
+`--md-assist-chip-outline-color`    | `--md-sys-color-outline`
+`--md-assist-chip-container-shape`  | `--md-sys-shape-corner-small`
+`--md-assist-chip-icon-size`        | `18px`
+`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
+`--md-assist-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)
+    <!-- {.external} -->
+
+### Assist chip example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/theming.html" -->
+
+```html
+<style>
+:root {
+  --md-assist-chip-container-shape: 0px;
+  --md-assist-chip-label-text-font: system-ui;
+  --md-sys-color-outline: #6F7979;
+  --md-sys-color-on-surface: #191C1C;
+}
+</style>
+
+<md-assist-chip label="Assist"></md-assist-chip>
+```
+
+### Filter chip tokens
+
+Token                                       | Default value
+------------------------------------------- | -------------
+`--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`
+`--md-filter-chip-outline-color`            | `--md-sys-color-outline`
+`--md-filter-chip-container-shape`          | `--md-sys-shape-corner-small`
+`--md-filter-chip-icon-size`                | `18px`
+`--md-filter-chip-label-text-color`         | `--md-sys-color-on-surface`
+`--md-filter-chip-label-text-font`          | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)
+    <!-- {.external} -->
+
+### Filter chip example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/theming.html" -->
+
+```html
+<style>
+:root {
+  --md-filter-chip-container-shape: 0px;
+  --md-filter-chip-label-text-font: system-ui;
+  --md-sys-color-outline: #6f7979;
+  --md-sys-color-on-surface: #191c1c;
+  --md-sys-color-secondary-container: #cce8e7;
+}
+</style>
+
+<md-filter-chip label="Filter"></md-filter-chip>
+```
+
+### Input chip tokens
+
+Token                              | Default value
+---------------------------------- | -------------------------------------
+`--md-input-chip-outline-color`    | `--md-sys-color-outline`
+`--md-input-chip-container-shape`  | `--md-sys-shape-corner-small`
+`--md-input-chip-icon-size`        | `18px`
+`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
+`--md-input-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)
+    <!-- {.external} -->
+
+### Input chip example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/theming.html" -->
+
+```html
+<style>
+:root {
+  --md-input-chip-container-shape: 0px;
+  --md-input-chip-label-text-font: system-ui;
+  --md-sys-color-outline: #6f7979;
+  --md-sys-color-on-surface: #191c1c;
+}
+</style>
+
+<md-input-chip label="Input"></md-input-chip>
+```
+
+### Suggestion chip tokens
+
+Token                                   | Default value
+--------------------------------------- | -------------------------------------
+`--md-suggestion-chip-outline-color`    | `--md-sys-color-outline`
+`--md-suggestion-chip-container-shape`  | `--md-sys-shape-corner-small`
+`--md-suggestion-chip-icon-size`        | `18px`
+`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
+`--md-suggestion-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)
+    <!-- {.external} -->
+
+### Suggestion chip example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/theming.html" -->
+
+```html
+<style>
+:root {
+  --md-suggestion-chip-container-shape: 0px;
+  --md-suggestion-chip-label-text-font: system-ui;
+  --md-sys-color-outline: #6f7979;
+  --md-sys-color-on-surface: #191c1c;
+}
+</style>
+
+<md-suggestion-chip label="Suggestion"></md-suggestion-chip>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdChipSet <code>&lt;md-chip-set&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `chips` |  | `Chip[]` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdAssistChip <code>&lt;md-assist-chip&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `elevated` | `elevated` | `boolean` | `false` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>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. |
+| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | 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. |
+| `label` | `label` | `string` | `''` | The label of the chip. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdFilterChip <code>&lt;md-filter-chip&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `elevated` | `elevated` | `boolean` | `false` |  |
+| `removable` | `removable` | `boolean` | `false` |  |
+| `selected` | `selected` | `boolean` | `false` |  |
+| `hasSelectedIcon` | `has-selected-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a filter chip has a `slot="selected-icon"` to avoid a Flash Of Unstyled Content. |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>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. |
+| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | 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. |
+| `label` | `label` | `string` | `''` | The label of the chip. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
+| `handleTrailingActionFocus` |  | `() => void` | `undefined` |  |
+| `ariaLabelRemove` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
+| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdInputChip <code>&lt;md-input-chip&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `avatar` | `avatar` | `boolean` | `false` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `removeOnly` | `remove-only` | `boolean` | `false` |  |
+| `selected` | `selected` | `boolean` | `false` |  |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>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. |
+| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | 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. |
+| `label` | `label` | `string` | `''` | The label of the chip. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
+| `handleTrailingActionFocus` |  | `() => void` | `undefined` |  |
+| `ariaLabelRemove` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |
+| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdSuggestionChip <code>&lt;md-suggestion-chip&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `elevated` | `elevated` | `boolean` | `false` |  |
+| `href` | `href` | `string` | `''` |  |
+| `target` | `target` | `string` | `''` |  |
+| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>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. |
+| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | 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. |
+| `label` | `label` | `string` | `''` | The label of the chip. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/dialog.md b/components-wiki/dialog.md
new file mode 100644
index 0000000..cce2ce3
--- /dev/null
+++ b/components-wiki/dialog.md
@@ -0,0 +1,262 @@
+<!-- catalog-only-start --><!-- ---
+name: Dialogs
+dirname: dialog
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Dialogs
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-dialog -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/dialog/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Dialogs](https://m3.material.io/components/dialogs)<!-- {.external} --> provide
+important prompts in a user flow.
+
+</catalog-component-header-title>
+
+<img class="hero" src="images/dialog/hero.webp" alt="A dialog displaying phone ringtone options."
+title="A dialog">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/dialogs) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/dialog)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Dialogs behave like
+[`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)<!-- {.external} -->
+elements, and can be closed with a `<form method="dialog">` element.
+
+Dialogs have three optional sections: the headline title, the main content, and
+action buttons.
+
+```html
+<md-dialog>
+  <div slot="headline">
+    Dialog title
+  </div>
+  <form slot="content" id="form-id" method="dialog">
+    A simple dialog with free-form content.
+  </form>
+  <div slot="actions">
+    <md-text-button form="form-id">Ok</md-text-button>
+  </div>
+</md-dialog>
+```
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+> Tip: use `margin`, `height`, and `width` CSS properties to control the
+> dialog's size and position.
+
+### Opening and closing
+
+Dialogs are opened and closed by setting the `open` attribute or property.
+
+```html
+<md-dialog open>
+  <div slot="content">
+    A dialog that is opened by default.
+  </div>
+</md-dialog>
+```
+
+Dialogs are also opened and closed by calling `dialog.show()` and
+`dialog.close()`.
+
+Both return a Promise that resolves after the dialog's animation finishes.
+
+```ts
+closeButton.addEventListener('click', async () => {
+  await dialog.close();
+});
+```
+
+### Return value
+
+A button's value attribute will set the dialog's `returnValue` property to
+identify which button closed it.
+
+```html
+<md-dialog open>
+  <form slot="content" id="form-id" method="dialog">...</form>
+  <div slot="actions">
+    <md-text-button form="form-id" value="cancel">Cancel</md-text-button>
+    <md-text-button form="form-id" value="ok">Ok</md-text-button>
+  </div>
+</md-dialog>
+```
+
+```ts
+dialog.addEventListener('close', () => {
+  const cancelClicked = dialog.returnValue === 'cancel';
+  const okClicked = dialog.returnValue === 'ok';
+});
+```
+
+## Accessibility
+
+Dialogs are labelled by their headlines. Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to dialogs without a headline.
+
+```html
+<md-dialog aria-label="Error message">
+  <div slot="content">An error occurred, details ...</div>
+</md-dialog>
+```
+
+### Alerts
+
+Add a
+[`type="alert"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)
+attribute to dialogs that need to communicate an important message and require a
+user's response.
+
+Common examples include error messages that require confirmation and other
+action confirmation prompts.
+
+```html
+<md-dialog type="alert">
+  <div slot="headline">Confirm deletion</div>
+  <form slot="content" id="form-id" method="dialog">
+    Are you sure you wish to delete this item?
+  </form>
+  <div slot="actions">
+    <md-text-button form="form-id" value="cancel">Cancel</md-text-button>
+    <md-text-button form="form-id" value="delete">Delete</md-text-button>
+  </div>
+</md-dialog>
+```
+
+## Theming
+
+Dialogs supports [Material theming](../theming/README.md) and can be customized
+in terms of color, typography, and shape.
+
+### Tokens
+
+Token                               | Default value
+----------------------------------- | ---------------------------------------
+`--md-dialog-container-color`       | `--md-sys-color-surface-container-high`
+`--md-dialog-headline-color`        | `--md-sys-color-on-surface`
+`--md-dialog-headline-font`         | `--md-sys-typescale-headline-small-font`
+`--md-dialog-supporting-text-color` | `--md-sys-color-on-surface-variant`
+`--md-dialog-supporting-text-font`  | `--md-sys-typescale-body-medium-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-dialog.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<style>
+:root {
+  /* System tokens */
+  --md-sys-color-surface-container-highest: #dde4e3;
+  --md-sys-color-on-surface: #161d1d;
+  --md-sys-color-on-surface-variant: #3f4948;
+  --md-sys-typescale-body-medium: system-ui 16px/24px;
+  --md-sys-typescale-headline-small: system-ui 24px/32px;
+
+  /* Component tokens */
+  --md-dialog-container-shape: 0px;
+}
+</style>
+
+<md-dialog>
+  <div slot="headline">Title</div>
+  <div slot="content">Dialog content</div>
+</md-dialog>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdDialog <code>&lt;md-dialog&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |
+| `returnValue` |  | `string` | `''` | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue |
+| `type` | `type` | `string` | `undefined` | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog. |
+| `noFocusTrap` | `no-focus-trap` | `boolean` | `false` | Disables focus trapping, which by default keeps keyboard Tab navigation within the dialog.<br>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).<br>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. |
+| `open` | `open` | `boolean` | `undefined` |  |
+| `getOpenAnimation` |  | `() => DialogAnimation` | `function { ... }` | Gets the opening animation for a dialog. Set to a new function to customize the animation. |
+| `getCloseAnimation` |  | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `show` | _None_ | `Promise<void>` | Opens the dialog and fires a cancelable `open` event. After a dialog's animation, an `opened` event is fired.<br>Add an `autofocus` attribute to a child of the dialog that should receive focus after opening. |
+| `close` | `returnValue` | `Promise<void>` | Closes the dialog and fires a cancelable `close` event. After a dialog's animation, a `closed` event is fired. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `Event` | No | No | Dispatched when the dialog is opening before any animations. |
+| `opened` | `Event` | No | No | Dispatched when the dialog has opened after any animations. |
+| `close` | `Event` | No | No | Dispatched when the dialog is closing before any animations. |
+| `closed` | `Event` | No | No | Dispatched when the dialog has closed after any animations. |
+| `cancel` | `Event` | No | No | Dispatched when the dialog has been canceled by clicking on the scrim or pressing Escape. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/divider.md b/components-wiki/divider.md
new file mode 100644
index 0000000..9e778fb
--- /dev/null
+++ b/components-wiki/divider.md
@@ -0,0 +1,140 @@
+# Divider
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-divider -->
+
+<!-- [TOC] -->
+
+A [divider](https://m3.material.io/components/divider)<!-- {.external} --> is a thin line
+that groups content in lists and containers.
+
+Dividers can reinforce tapability, such as when used to separate list items or
+define tappable regions in an accordion.
+
+![Screenshot of five stacked dividers](images/divider/hero.webp "Dividers separating items in a list.")
+
+*   [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/divider)
+    <!-- {.external} -->
+
+## Usage
+
+Use full width dividers to separate larger sections of unrelated content.
+
+![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example")
+
+```html
+<section>
+  <p>Lorem ipsum...</p>
+  <md-divider></md-divider>
+  <p>Lorem ipsum...</p>
+</section>
+```
+
+### Inset dividers
+
+Use inset dividers to separate related content within a section.
+
+![A list of design system names separated by an inset divider](images/divider/usage-inset.webp "Inset divider example")
+
+```html
+<section>
+  <p>Material 2</p>
+  <md-divider inset></md-divider>
+  <p>Material 3</p>
+</section>
+```
+
+Inset dividers are equally indented from both sides of the screen by default.
+Use `inset-start` or `inset-end` to change this.
+
+![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp "Leading inset divider example")
+
+```html
+<section>
+  <p>Material 2</p>
+  <md-divider inset-start></md-divider>
+  <p>Material 3</p>
+</section>
+```
+
+## Accessibility
+
+Dividers are decorative by default and not announced by assistive technology.
+
+Add a
+[`role="separator"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)<!-- {.external} -->
+attribute to non-decorative dividers that should be announced.
+
+```html
+<ul>
+  <li>Item one</li>
+  <md-divider inset></md-divider>
+  <li>Item two</li>
+  <md-divider role="separator"></md-divider>
+  <li>Item three</li>
+  <md-divider inset></md-divider>
+  <li>Item four</li>
+</ul>
+```
+
+## Theming
+
+Divider supports [theming](../theming/README.md) and can be customized with CSS
+custom property tokens.
+
+### Tokens
+
+Token                    | Default value
+------------------------ | --------------------------------
+`--md-divider-color`     | `--md-sys-color-outline-variant`
+`--md-divider-thickness` | `1px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss)
+    <!-- {.external} -->
+
+### Example
+
+![A customized divider with a different color and thickness](images/divider/theming.webp "Divider theming example.")
+
+```html
+<style>
+:root {
+  --md-sys-color-outline-variant: #BEC9C8;
+  --md-divider-thickness: 2px;
+}
+</style>
+
+<section>
+  <p>Lorem ipsum...</p>
+  <md-divider></md-divider>
+  <p>Lorem ipsum...</p>
+</section>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdDivider <code>&lt;md-divider&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. |
+| `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. |
+| `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/elevation.md b/components-wiki/elevation.md
new file mode 100644
index 0000000..34dc169
--- /dev/null
+++ b/components-wiki/elevation.md
@@ -0,0 +1,125 @@
+# Elevation
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-elevation -->
+
+<!-- [TOC] -->
+
+[Elevation](https://m3.material.io/styles/elevation)<!-- {.external} --> is the relative
+distance between two surfaces along the z-axis.
+
+Material's elevation system is deliberately limited to just a handful of levels.
+This creative constraint means you need to make thoughtful decisions about your
+UI’s elevation story.
+
+![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.webp "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.")
+
+*   [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/elevation)
+    <!-- {.external} -->
+
+## Usage
+
+Elevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom
+property. The elevation will automatically fill the nearest `position: relative`
+element's size and shape.
+
+![A rounded square with a drop shadow beneath it.](images/elevation/usage.webp "A surface with an elevation shadow.")
+
+```html
+<style>
+  .surface {
+    position: relative;
+    border-radius: 16px;
+    height: 64px;
+    width: 64px;
+
+    --md-elevation-level: 3;
+  }
+</style>
+<div class="surface">
+  <md-elevation></md-elevation>
+  <!-- Content -->
+</div>
+```
+
+### Animation
+
+Shadows may be animated between levels by adding `transition-duration` and
+`transition-easing-function` CSS properties.
+
+![A rounded square with a drop shadow beneath it. After a moment, the square
+lowers into the background and the shadow disappears, then
+repeats.](images/elevation/usage-animation.gif "Animating between elevations.")
+
+```html
+<style>
+  .surface {
+    /* ... */
+    transition-duration: 250ms;
+    transition-timing-function: ease-in-out;
+
+    --md-elevation-level: 3;
+  }
+
+  .surface:active {
+    --md-elevation-level: 0;
+  }
+</style>
+<div class="surface">
+  <md-elevation></md-elevation>
+  <!-- Content -->
+</div>
+```
+
+## Accessibility
+
+Elevation is a visual component and does not have accessibility concerns.
+
+## Theming
+
+Elevation supports [Material theming](../theming/README.md) and can be
+customized in terms of color.
+
+### Tokens
+
+Token                         | Default value
+----------------------------- | -----------------------
+`--md-elevation-level`        | `0`
+`--md-elevation-shadow-color` | `--md-sys-color-shadow`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevation.scss)
+    <!-- {.external} -->
+
+### Example
+
+![Image of an elevation surface with a different theme applied](images/elevation/theming.webp "Elevation theming example.")
+
+```html
+<style>
+  .surface {
+    position: relative;
+    border-radius: 16px;
+    height: 64px;
+    width: 64px;
+  }
+
+  :root {
+    --md-elevation-level: 5;
+    --md-sys-color-shadow: #006A6A;
+  }
+</style>
+<div class="surface">
+  <md-elevation></md-elevation>
+  <!-- Content -->
+</div>
+```
+
+<!-- auto-generated API docs start -->
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/fab.md b/components-wiki/fab.md
new file mode 100644
index 0000000..a28a679
--- /dev/null
+++ b/components-wiki/fab.md
@@ -0,0 +1,522 @@
+<!-- catalog-only-start --><!-- ---
+name: Floating action button (FAB)
+dirname: fab
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Floating action buttons (FAB)
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-fab -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/fab/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[FAB](https://m3.material.io/components/floating-action-button)<!-- {.external} -->
+represents the most important action on a screen. It puts key actions within
+reach.
+
+[Extended FABs](https://m3.material.io/components/extended-fab) help people take
+primary actions. They're wider than FABs to accommodate a text label and larger
+target area.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    alt="A phone showing a payment screen with a green filled button that says 'Make
+payment'"
+    src="images/fab/hero.webp">
+
+</catalog-component-header>
+
+*   Design articles
+    *   [FAB](https://m3.material.io/components/floating-action-button)
+        <!-- {.external} -->
+    *   [Extended FAB](https://m3.material.io/components/extended-fab)
+        <!-- {.external} -->
+*   API Documentation (*coming soon*)
+*   [Source code](https://github.com/material-components/material-web/tree/main/fab)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Types
+
+<!-- no-catalog-start -->
+
+![The 3 sizes of FAB](images/fab/fabs.webp "There are three sizes of floating action buttons: FAB, small FAB, and large FAB")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/fabs.html" -->
+
+1.  [FAB](#fab)
+2.  [Small FAB](#sizes)
+3.  [Large FAB](#sizes)
+
+### Extended FAB
+
+<!-- no-catalog-start -->
+
+![2 examples of extended FABs](images/fab/extended-fabs.webp "There are two types of extended FABs with and without icon")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/extended-fabs.html" -->
+
+*   [Extended FAB with both icon and label text](#extended)
+*   [API Documentation](#api)
+*   [Extended FAB without icon](#without-icon)
+
+## Usage
+
+FABs should have an icon, such as a font `md-icon`, an `svg`, or an `img`.
+
+<!-- no-catalog-start -->
+
+![A standard surface fab](images/fab/usage-fab.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-fab.html" -->
+
+```html
+<md-fab aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+### Lowered
+
+FABs can be set to a lower elevation with the `lowered` attribute.
+
+<!-- no-catalog-start -->
+
+![A standard fab with an edit icon and lowered in elevation](images/fab/usage-lowered.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-lowered.html" -->
+
+```html
+<md-fab lowered aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+## Accessibility
+
+Icon-only FABs must include an `aria-label` that describes its action. Otherwise
+if `aria-label` is not provided, the FAB will default to announcing its visible
+contents.
+
+```html
+<md-fab aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+Extended FABs use their `label` for accessibility. Add an `aria-label` for
+additional context if needed. By supplying the `label` attribute, the extended
+FAB will make sure that the icon is not announced.
+
+```html
+<md-fab label="Edit" aria-label="Edit Comment">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+## FAB
+
+FABs should display a clear and understandable icon.
+
+<!-- no-catalog-start -->
+
+![A standard surface fab](images/fab/usage-fab.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-fab.html" -->
+
+```html
+<md-fab aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+### Extended
+
+FABs may be extended with a label for additional emphasis. Extended FABs can
+omit their icon.
+
+<!-- no-catalog-start -->
+
+![An extended FAB with an edit icon and the visible text edit](images/fab/usage-extended.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-extended.html" -->
+
+```html
+<md-fab label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+#### Without icon
+
+Extended FABs are the only FABs that can be used without an icon.
+
+<!-- no-catalog-start -->
+
+![An extended FAB with a visible label saying reroute](images/fab/usage-without-icon.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-without-icon.html" -->
+
+```html
+<md-fab label="Reroute"></md-fab>
+```
+
+### Colors
+
+FAB colors may be changed with the `variant` attribute. It can be set to
+"surface" (default), "primary", "secondary", or "tertiary".
+
+<!-- no-catalog-start -->
+
+![Three fabs with edit icons next to each other but the first is primary
+colored, second is secondary, and the last is tertiary
+colored.](images/fab/usage-color.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-color.html" -->
+
+```html
+<md-fab variant="primary" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+<md-fab variant="secondary" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+<md-fab variant="tertiary" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+### Sizes
+
+FABs may be small, medium (default), or large by setting the `size` attribute.
+Small FABs can optionally further reduce their touch target.
+
+<!-- no-catalog-start -->
+
+![Four surface fabs side by side with edit icons of visual size size small,
+small, medium, and large](images/fab/usage-sizes.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-sizes.html" -->
+
+```html
+<md-fab size="small" touch-target="none" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+<md-fab size="small" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+<md-fab aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+<md-fab size="large" aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+## Branded FAB
+
+<!-- no-catalog-start -->
+
+<!-- go/md-branded-fab -->
+
+<!-- no-catalog-end -->
+
+Branded FABs use a brightly colored logo for their icon. Unlike [FAB](#fab),
+branded FABs do not have color variants.
+
+<!-- no-catalog-start -->
+
+![A branded FAB with a google-colored plus icon.](images/fab/usage-branded.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-branded.html" -->
+
+```html
+<md-branded-fab size="small" aria-label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+```
+
+### Extended
+
+Branded FABs may be extended with a label for additional emphasis. Unlike
+[FAB](#fab), branded FABs should always display their logo icon.
+
+<!-- no-catalog-start -->
+
+![An extended branded fab with a google-colored plus icon and the visible text
+Add](images/fab/usage-branded-extended.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-branded-extended.html" -->
+
+```html
+<md-branded-fab label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+```
+
+### Sizes
+
+Branded FABs may be medium (default) or large by setting the `size` attribute.
+
+<!-- no-catalog-start -->
+
+![Two branded FABs next to each other with a google-branded plus icon. A medium
+sized one and a large one.](images/fab/usage-branded-sizes.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/usage-branded-sizes.html" -->
+
+```html
+<md-branded-fab aria-label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+<md-branded-fab size="large" aria-label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+```
+
+## Theming
+
+FAB supports [Material theming](../theming/README.md) and can be customized in
+terms of color, typography, and shape.
+
+### FAB tokens
+
+Token                              | Default value
+---------------------------------- | ---------------------------------------
+`--md-fab-container-color`         | `--md-sys-color-surface-container-high`
+`--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low`
+`--md-fab-container-shape`         | `--md-sys-shape-corner-large`
+`--md-fab-icon-color`              | `--md-sys-color-primary`
+`--md-fab-icon-size`               | `24px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab.scss)
+    <!-- {.external} -->
+
+### FAB example
+
+<!-- no-catalog-start -->
+
+![Image of a fab with a different theme applied](images/fab/theming-fab.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/theming-fab.html" -->
+
+```html
+<style>
+  :root {
+    --md-sys-color-surface-container-high: #e3e9e9;
+    --md-sys-color-primary: #006a6a;
+    --md-fab-container-shape: 0px;
+    --md-fab-icon-size: 36px;
+    background-color: #f4fbfa;
+  }
+</style>
+<md-fab aria-label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+#### Sizes tokens
+
+Token                            | Default value
+-------------------------------- | -------------
+`--md-fab-small-container-shape` | `--md-sys-shape-corner-medium`
+`--md-fab-small-icon-size`       | `24px`
+`--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large`
+`--md-fab-large-icon-size`       | `36px`
+
+#### Extended FAB tokens
+
+Token                      | Default value
+-------------------------- | -------------------------------------
+`--md-fab-label-text-font` | `--md-sys-typescale-label-large-font`
+
+#### Extended FAB example
+
+<!-- no-catalog-start -->
+
+![Image of an extended FAB with a different theme applied](images/fab/theming-extended.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/theming-extended.html" -->
+
+```html
+<style>
+  :root {
+    --md-sys-color-surface-container-high: #e3e9e9;
+    --md-sys-color-on-surface: #161d1d;
+    --md-sys-color-primary: #006a6a;
+    --md-fab-container-shape: 0px;
+    --md-fab-icon-size: 36px;
+    background-color: #f4fbfa;
+  }
+</style>
+<md-fab label="Edit">
+  <md-icon slot="icon">edit</md-icon>
+</md-fab>
+```
+
+### Branded FAB tokens
+
+Token                              | Default value
+---------------------------------- | ---------------------------------------
+`--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
+`--md-fab-branded-container-shape` | `--md-sys-shape-corner-large`
+`--md-fab-branded-icon-size`       | `36px`
+`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)
+    <!-- {.external} -->
+
+### Branded FAB example
+
+<!-- no-catalog-start -->
+
+![Image of two branded fabs, one regular, one extended with the visible label
+Add with a different theme applied](images/fab/theming-branded.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/fab/theming-branded.html" -->
+
+```html
+<style>
+  :root {
+    --md-sys-color-surface-container-high: #e3e9e9;
+    --md-sys-color-on-surface: #161d1d;
+    --md-fab-branded-icon-size: 48px;
+    --md-fab-branded-container-shape: 0px;
+    background-color: #f4fbfa;
+  }
+</style>
+<md-branded-fab size="small" aria-label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+<md-branded-fab size="small" label="Add">
+  <svg slot="icon" viewBox="0 0 36 36">
+    <path fill="#34A853" d="M16 16v14h4V20z"></path>
+    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+    <path fill="none" d="M0 0h36v36H0z"></path>
+  </svg>
+</md-branded-fab>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdFab <code>&lt;md-fab&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
+| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
+| `label` | `label` | `string` | `''` | The text to display on the FAB. |
+| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdBrandedFab <code>&lt;md-branded-fab&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
+| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
+| `label` | `label` | `string` | `''` | The text to display on the FAB. |
+| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/figures/checkbox/theming.html b/components-wiki/figures/checkbox/theming.html
new file mode 100644
index 0000000..d4471c8
--- /dev/null
+++ b/components-wiki/figures/checkbox/theming.html
@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center; align-items: center"
+    class="styled-example"
+    aria-label="Image of a checkbox with a different theme applied"
+  >
+    <style>
+      .styled-example {
+        background-color: white;
+        border-radius: 28px;
+        /* System tokens */
+        --md-sys-color-primary: #006a6a;
+        --md-sys-color-on-primary: #ffffff;
+        --md-sys-color-on-surface-variant: #3f4948;
+        /* Component tokens */
+        --md-checkbox-container-shape: 0px;
+      }
+    </style>
+    <md-checkbox touch-target="wrapper"></md-checkbox>
+    <md-checkbox touch-target="wrapper" checked></md-checkbox>
+  </figure>
+</div>
diff --git a/components-wiki/figures/checkbox/usage-label.html b/components-wiki/figures/checkbox/usage-label.html
new file mode 100644
index 0000000..8d679a1
--- /dev/null
+++ b/components-wiki/figures/checkbox/usage-label.html
@@ -0,0 +1,13 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center; align-items: center"
+    aria-label="Two checkboxes with labels"
+  >
+    <label style="display: flex; align-items: center">
+      <md-checkbox touch-target="wrapper"></md-checkbox>
+      Checkbox one
+    </label>
+    <md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
+    <label for="checkbox-two">Checkbox two</label>
+  </figure>
+</div>
diff --git a/components-wiki/figures/checkbox/usage.html b/components-wiki/figures/checkbox/usage.html
new file mode 100644
index 0000000..31d4898
--- /dev/null
+++ b/components-wiki/figures/checkbox/usage.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;"
+      aria-label="Three checkboxes in a row that are unselected, selected, and indeterminate">
+    <md-checkbox touch-target="wrapper"></md-checkbox>
+    <md-checkbox touch-target="wrapper" checked></md-checkbox>
+    <md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/extended-fabs.html b/components-wiki/figures/fab/extended-fabs.html
new file mode 100644
index 0000000..03c6c87
--- /dev/null
+++ b/components-wiki/figures/fab/extended-fabs.html
@@ -0,0 +1,25 @@
+<div class="figure-wrapper">
+  <figure
+      class="types-image"
+      style="justify-content:center;"
+      title="There are two types of extended FABs with and without icon"
+      aria-label="2 examples of extended FABs">
+    <div class="wrapper">
+      <div>
+        <div class="fab-wrapper">
+          <md-fab label="navigate" variant="primary">
+            <md-icon slot="icon">navigation</md-icon>
+          </md-fab>
+        </div>
+        <span>1</span>
+      </div>
+      <div>
+        <div class="fab-wrapper">
+          <md-fab variant="surface" label="reroute">
+          </md-fab>
+        </div>
+        <span>2</span>
+      </div>
+    </div>
+  </figure>
+</div>
diff --git a/components-wiki/figures/fab/fabs.html b/components-wiki/figures/fab/fabs.html
new file mode 100644
index 0000000..3288186
--- /dev/null
+++ b/components-wiki/figures/fab/fabs.html
@@ -0,0 +1,65 @@
+<div class="figure-wrapper">
+  <figure
+      class="types-image"
+      style="justify-content:center;"
+      title="There are three sizes of floating action buttons: FAB, small FAB, and large FAB"
+      aria-label="The 3 sizes of FAB">
+    <style>
+      .types-image .wrapper,
+      .types-image .wrapper > * {
+        display: flex;
+        padding: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+      .types-image .wrapper > * {
+        flex-direction: column;
+        align-items: center;
+        padding-inline: 16px;
+      }
+      .types-image span {
+        display: inline-flex;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        padding: 8px;
+        margin-block-start: 8px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+      }
+      .types-image .fab-wrapper {
+        height: 96px;
+        display: flex;
+        align-items: center;
+      }
+    </style>
+    <div class="wrapper">
+      <div>
+        <div class="fab-wrapper">
+          <md-fab variant="primary" aria-label="Accessibility">
+            <md-icon slot="icon">accessible_forward</md-icon>
+          </md-fab>
+        </div>
+        <span>1</span>
+      </div>
+      <div>
+        <div class="fab-wrapper">
+          <md-fab variant="tertiary" size="small" aria-label="Edit">
+            <md-icon slot="icon">edit</md-icon>
+          </md-fab>
+        </div>
+        <span>2</span>
+      </div>
+      <div>
+        <div class="fab-wrapper">
+          <md-fab size="large" aria-label="Color Palette">
+            <md-icon slot="icon">palette</md-icon>
+          </md-fab>
+        </div>
+        <span>3</span>
+      </div>
+    </div>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/theming-branded.html b/components-wiki/figures/fab/theming-branded.html
new file mode 100644
index 0000000..d92e01e
--- /dev/null
+++ b/components-wiki/figures/fab/theming-branded.html
@@ -0,0 +1,33 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example branded"
+      aria-label="Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied"
+      style="padding-block: 16px;gap: 16px;display: flex;">
+    <style>
+      .styled-example.branded {
+        --md-sys-color-on-surface: #161d1d;
+        --md-fab-branded-label-text-font: system-ui;
+        --md-fab-branded-icon-size: 48px;
+        --md-fab-branded-container-shape: 0px;
+      }
+    </style>
+    <md-branded-fab size="small" aria-label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+    <md-branded-fab size="small" label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+  </figure>
+</div>
diff --git a/components-wiki/figures/fab/theming-extended.html b/components-wiki/figures/fab/theming-extended.html
new file mode 100644
index 0000000..e0fc8e2
--- /dev/null
+++ b/components-wiki/figures/fab/theming-extended.html
@@ -0,0 +1,17 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example extended"
+      aria-label="Image of an extended FAB with a different theme applied"
+      style="padding-block: 16px;">
+    <style>
+      .styled-example.extended {
+        --md-fab-label-text-font: system-ui;
+        --md-fab-icon-size: 36px;
+        --md-fab-container-shape: 0px;
+      }
+    </style>
+    <md-fab label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
diff --git a/components-wiki/figures/fab/theming-fab.html b/components-wiki/figures/fab/theming-fab.html
new file mode 100644
index 0000000..52f0e4a
--- /dev/null
+++ b/components-wiki/figures/fab/theming-fab.html
@@ -0,0 +1,21 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example fab"
+      aria-label="Image of a fab with a different theme applied"
+      style="padding-block: 16px;">
+    <style>
+      .styled-example {
+        --md-sys-color-surface-container-high: #e3e9e9;
+        --md-sys-color-primary: #006a6a;
+        background-color: #f4fbfa;
+      }
+      .styled-example.fab {
+        --md-fab-icon-size: 36px;
+        --md-fab-container-shape: 0px;
+      }
+    </style>
+    <md-fab aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-branded-extended.html b/components-wiki/figures/fab/usage-branded-extended.html
new file mode 100644
index 0000000..5a67c42
--- /dev/null
+++ b/components-wiki/figures/fab/usage-branded-extended.html
@@ -0,0 +1,15 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="An extended branded fab with a google-colored plus icon and the visible text Add"
+      style="padding-block: 16px;">
+    <md-branded-fab label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-branded-sizes.html b/components-wiki/figures/fab/usage-branded-sizes.html
new file mode 100644
index 0000000..905f70b
--- /dev/null
+++ b/components-wiki/figures/fab/usage-branded-sizes.html
@@ -0,0 +1,25 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one."
+    style="padding-block: 16px; gap: 16px; display: flex"
+  >
+    <md-branded-fab aria-label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+    <md-branded-fab size="large" aria-label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+  </figure>
+</div>
diff --git a/components-wiki/figures/fab/usage-branded.html b/components-wiki/figures/fab/usage-branded.html
new file mode 100644
index 0000000..44646a0
--- /dev/null
+++ b/components-wiki/figures/fab/usage-branded.html
@@ -0,0 +1,15 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="A branded FAB with a google-colored plus icon."
+      style="padding-block: 16px;">
+    <md-branded-fab size="small" aria-label="Add">
+      <svg slot="icon" viewBox="0 0 36 36">
+        <path fill="#34A853" d="M16 16v14h4V20z"></path>
+        <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
+        <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
+        <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
+        <path fill="none" d="M0 0h36v36H0z"></path>
+      </svg>
+    </md-branded-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-color.html b/components-wiki/figures/fab/usage-color.html
new file mode 100644
index 0000000..6d35b23
--- /dev/null
+++ b/components-wiki/figures/fab/usage-color.html
@@ -0,0 +1,15 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored."
+      style="padding-block: 16px;gap: 16px;display: flex;">
+    <md-fab variant="primary" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+    <md-fab variant="secondary" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+    <md-fab variant="tertiary" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-extended.html b/components-wiki/figures/fab/usage-extended.html
new file mode 100644
index 0000000..7ce6c09
--- /dev/null
+++ b/components-wiki/figures/fab/usage-extended.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="An extended FAB with an edit icon and the visible text edit"
+      style="padding-block: 16px;">
+    <md-fab label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-fab.html b/components-wiki/figures/fab/usage-fab.html
new file mode 100644
index 0000000..8c89bf8
--- /dev/null
+++ b/components-wiki/figures/fab/usage-fab.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="A standard surface fab"
+      style="padding-block: 16px;">
+    <md-fab aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-lowered.html b/components-wiki/figures/fab/usage-lowered.html
new file mode 100644
index 0000000..83a1946
--- /dev/null
+++ b/components-wiki/figures/fab/usage-lowered.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="A standard fab with an edit icon and lowered in elevation"
+      style="padding-block: 16px;">
+    <md-fab lowered aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/fab/usage-sizes.html b/components-wiki/figures/fab/usage-sizes.html
new file mode 100644
index 0000000..f8b6767
--- /dev/null
+++ b/components-wiki/figures/fab/usage-sizes.html
@@ -0,0 +1,19 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Four surface fabs side by side with edit icons of visual size size small, small, medium, and large"
+    style="padding-block: 16px; gap: 16px; display: flex"
+  >
+    <md-fab size="small" touch-target="none" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+    <md-fab size="small" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+    <md-fab aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+    <md-fab size="large" aria-label="Edit">
+      <md-icon slot="icon">edit</md-icon>
+    </md-fab>
+  </figure>
+</div>
diff --git a/components-wiki/figures/fab/usage-without-icon.html b/components-wiki/figures/fab/usage-without-icon.html
new file mode 100644
index 0000000..7a0d176
--- /dev/null
+++ b/components-wiki/figures/fab/usage-without-icon.html
@@ -0,0 +1,7 @@
+<div class="figure-wrapper">
+  <figure
+      aria-label="An extended FAB with a visible label saying reroute"
+      style="padding-block: 16px;">
+    <md-fab label="Reroute"></md-fab>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/iconbutton/buttons.html b/components-wiki/figures/iconbutton/buttons.html
new file mode 100644
index 0000000..c85267f
--- /dev/null
+++ b/components-wiki/figures/iconbutton/buttons.html
@@ -0,0 +1,66 @@
+<div class="figure-wrapper">
+  <figure
+      class="types-image"
+      style="justify-content:center;"
+      title="1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)"
+      aria-label="Side by side view of standard and contained icon buttons">
+    <style>
+      .types-image .wrapper,
+      .types-image .wrapper > * {
+        display: flex;
+        padding: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+      .types-image .wrapper > * {
+        flex-direction: column;
+        align-items: center;
+        padding-inline: 16px;
+      }
+      .types-image span {
+        display: inline-flex;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        padding: 8px;
+        margin-block-start: 8px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+      }
+      .types-image .wrapper > div > div {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+    <div class="wrapper">
+      <div>
+        <div>
+          <md-icon-button>
+            <md-icon>favorite</md-icon>
+          </md-icon-button>
+          <md-icon-button toggle selected>
+            <md-icon slot="selected" class="filled">bookmark</md-icon>
+            <md-icon class="filled">bookmark</md-icon>
+          </md-icon-button>
+        </div>
+        <span>1</span>
+      </div>
+      <div>
+        <div>
+          <md-filled-icon-button>
+            <md-icon>videocam</md-icon>
+          </md-filled-icon-button>
+          <md-filled-tonal-icon-button>
+            <md-icon>settings</md-icon>
+          </md-filled-tonal-icon-button>
+          <md-outlined-icon-button>
+            <md-icon>more_vert</md-icon>
+          </md-outlined-icon-button>
+        </div>
+        <span>2</span>
+      </div>
+    </div>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/theming-filled-tonal.html b/components-wiki/figures/iconbutton/theming-filled-tonal.html
new file mode 100644
index 0000000..c96f3ea
--- /dev/null
+++ b/components-wiki/figures/iconbutton/theming-filled-tonal.html
@@ -0,0 +1,20 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example tonal"
+      title="Filled tonal icon button theming example."
+      aria-label="Image of a filled tonal icon button with a different theme applied">
+    <style>
+      .styled-example.tonal {
+        --md-filled-tonal-icon-button-container-width: 80px;
+        --md-filled-tonal-icon-button-container-height: 80px;
+        --md-filled-tonal-icon-button-container-shape: 0px;
+        --md-filled-tonal-icon-button-icon-size: 40px;
+        --md-sys-color-secondary-container: #006A6A;
+        padding-block: 8px;
+      }
+      </style>
+      <md-filled-tonal-icon-button>
+        <md-icon>check</md-icon>
+      </md-filled-tonal-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/theming-filled.html b/components-wiki/figures/iconbutton/theming-filled.html
new file mode 100644
index 0000000..e44c3f2
--- /dev/null
+++ b/components-wiki/figures/iconbutton/theming-filled.html
@@ -0,0 +1,20 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example filled red"
+      title="Filled icon button theming example."
+      aria-label="Image of a filled icon button with a different theme applied">
+    <style>
+      .styled-example.filled {
+        --md-filled-icon-button-container-width: 80px;
+        --md-filled-icon-button-container-height: 80px;
+        --md-filled-icon-button-icon-size: 40px;
+        --md-filled-icon-button-container-shape: 0px;
+        --md-sys-color-primary: #dc362e;
+        padding-block: 8px;
+      }
+      </style>
+      <md-filled-icon-button>
+        <md-icon>check</md-icon>
+      </md-filled-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/theming-outlined.html b/components-wiki/figures/iconbutton/theming-outlined.html
new file mode 100644
index 0000000..96d0757
--- /dev/null
+++ b/components-wiki/figures/iconbutton/theming-outlined.html
@@ -0,0 +1,21 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example outlined"
+      title="Outlined icon button theming example."
+      aria-label="Image of an outlined icon button with a different theme applied">
+    <style>
+      .styled-example.outlined > * {
+        --md-outlined-icon-button-container-width: 80px;
+        --md-outlined-icon-button-container-height: 80px;
+        --md-outlined-icon-button-container-shape: 0px;
+        --md-outlined-icon-button-icon-size: 40px;
+        --md-outlined-icon-button-unselected-outline-width: 4px;
+        --md-sys-color-outline: #006A6A;
+        padding-block: 8px;
+      }
+      </style>
+      <md-outlined-icon-button>
+        <md-icon>check</md-icon>
+      </md-outlined-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/theming-standard.html b/components-wiki/figures/iconbutton/theming-standard.html
new file mode 100644
index 0000000..5fa2074
--- /dev/null
+++ b/components-wiki/figures/iconbutton/theming-standard.html
@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example standard red"
+      title="Standard icon button theming example."
+      aria-label="Image of a standard icon button with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+      }
+      .styled-example.red {
+        background-color: #fff8f6;
+      }
+      .styled-example.standard {
+        --md-icon-button-icon-size: 32px;
+        --md-sys-color-on-surface-variant: #dc362e;
+      }
+      </style>
+      <md-icon-button>
+        <md-icon>check</md-icon>
+      </md-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/usage-filled-tonal.html b/components-wiki/figures/iconbutton/usage-filled-tonal.html
new file mode 100644
index 0000000..a94aea5
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage-filled-tonal.html
@@ -0,0 +1,10 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Filled Tonal Icon Button"
+      aria-label="A filled tonal icon button with a check icon">
+    <md-filled-tonal-icon-button>
+      <md-icon>check</md-icon>
+    </md-filled-tonal-icon-button>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/iconbutton/usage-filled.html b/components-wiki/figures/iconbutton/usage-filled.html
new file mode 100644
index 0000000..f22cc29
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage-filled.html
@@ -0,0 +1,10 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Filled Icon Button"
+      aria-label="A circular button with a check icon">
+    <md-filled-icon-button>
+      <md-icon>check</md-icon>
+    </md-filled-icon-button>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/iconbutton/usage-outlined.html b/components-wiki/figures/iconbutton/usage-outlined.html
new file mode 100644
index 0000000..2a16336
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage-outlined.html
@@ -0,0 +1,10 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Outlined Icon button"
+      aria-label="An outlined circular icon button with a check icon">
+    <md-outlined-icon-button>
+      <md-icon>check</md-icon>
+    </md-outlined-icon-button>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/iconbutton/usage-standard.html b/components-wiki/figures/iconbutton/usage-standard.html
new file mode 100644
index 0000000..c92962f
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage-standard.html
@@ -0,0 +1,10 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Standard Icon Button with Check icon"
+      aria-label="A check icon">
+    <md-icon-button>
+      <md-icon>check</md-icon>
+    </md-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/usage-toggle.html b/components-wiki/figures/iconbutton/usage-toggle.html
new file mode 100644
index 0000000..9c8927d
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage-toggle.html
@@ -0,0 +1,42 @@
+<div class="figure-wrapper">
+  <figure
+      style="gap:8px;flex-direction:column;padding-block:8px;"
+      aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
+    <div style="display:flex;gap:8px;">
+      <md-icon-button toggle>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-icon-button>
+      <md-filled-icon-button toggle>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-filled-icon-button>
+      <md-filled-tonal-icon-button toggle>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-filled-tonal-icon-button>
+      <md-outlined-icon-button toggle>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-outlined-icon-button>
+    </div>
+    <div style="display:flex;gap:8px;">
+      <md-icon-button toggle selected>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-icon-button>
+      <md-filled-icon-button toggle selected>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-filled-icon-button>
+      <md-filled-tonal-icon-button toggle selected>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-filled-tonal-icon-button>
+      <md-outlined-icon-button toggle selected>
+        <md-icon>close</md-icon>
+        <md-icon slot="selected">check</md-icon>
+      </md-outlined-icon-button>
+    </div>
+  </figure>
+</div>
diff --git a/components-wiki/figures/iconbutton/usage.html b/components-wiki/figures/iconbutton/usage.html
new file mode 100644
index 0000000..8121567
--- /dev/null
+++ b/components-wiki/figures/iconbutton/usage.html
@@ -0,0 +1,19 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;gap: 8px;"
+      title="Icon buttons can be used within other components, such as a bottom app bar"
+      aria-label="A row of icon buttons">
+    <md-icon-button>
+      <md-icon>check</md-icon>
+    </md-icon-button>
+    <md-filled-icon-button>
+      <md-icon>check</md-icon>
+    </md-filled-icon-button>
+    <md-filled-tonal-icon-button>
+      <md-icon>check</md-icon>
+    </md-filled-tonal-icon-button>
+    <md-outlined-icon-button>
+      <md-icon>check</md-icon>
+    </md-outlined-icon-button>
+  </figure>
+</div>
diff --git a/components-wiki/figures/list/theming-icon.html b/components-wiki/figures/list/theming-icon.html
new file mode 100644
index 0000000..f86d258
--- /dev/null
+++ b/components-wiki/figures/list/theming-icon.html
@@ -0,0 +1,39 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example icon"
+      aria-label="Image of a list and icon list items of food names with a different theme applied"
+      style="padding-block: 16px;">
+    <style>
+      .styled-example.icon md-list {
+        --md-list-container-color: #f4fbfa;
+        --md-list-item-label-text-color: #161d1d;
+        --md-list-item-supporting-text-color: #3f4948;
+        --md-list-item-trailing-supporting-text-color: #3f4948;
+        --md-list-item-leading-icon-color: #006a6a;
+        --md-list-item-trailing-icon-color: #006a6a;
+        --md-list-item-leading-icon-size: 20px;
+        --md-list-item-trailing-icon-size: 20px;
+      }
+      .styled-example.icon md-list .unhealthy {
+        --md-list-item-trailing-icon-color: #ba1a1a;
+      }
+    </style>
+    <md-list>
+      <md-list-item>
+        <div slot="headline">Eggs</div>
+        <md-icon slot="start">egg</md-icon>
+        <md-icon slot="end">recommend</md-icon>
+      </md-list-item>
+      <md-list-item class="unhealthy">
+        <div slot="headline">Ice Cream</div>
+        <md-icon slot="start">icecream</md-icon>
+        <md-icon slot="end">dangerous</md-icon>
+      </md-list-item>
+      <md-list-item>
+        <div slot="headline">Orange</div>
+        <md-icon slot="start">nutrition</md-icon>
+        <md-icon slot="end">recommend</md-icon>
+      </md-list-item>
+    </md-list>
+  </figure>
+</div>
\ No newline at end of file
diff --git a/components-wiki/figures/list/theming-image.html b/components-wiki/figures/list/theming-image.html
new file mode 100644
index 0000000..8c70909
--- /dev/null
+++ b/components-wiki/figures/list/theming-image.html
@@ -0,0 +1,35 @@
+<div class="figure-wrapper">
+  <figure
+    class="styled-example image"
+    aria-label="Image of a list and image list items of cats with a different theme applied"
+    style="padding-block: 16px"
+  >
+    <style>
+      .styled-example.image md-list {
+        --md-list-container-color: #f4fbfa;
+        --md-list-item-label-text-color: #161d1d;
+        --md-list-item-supporting-text-color: #3f4948;
+        --md-list-item-trailing-supporting-text-color: #3f4948;
+      }
+      .styled-example.image md-list img {
+        height: 50px;
+        width: 100px;
+        border-radius: 25px;
+      }
+    </style>
+    <md-list>
+      <md-list-item>
+        <div slot="headline">Wide Cat</div>
+        <img loading="lazy" slot="start" src="https://placekitten.com/200/100">
+      </md-list-item>
+      <md-list-item>
+        <div slot="headline">Round kitty cat</div>
+        <img loading="lazy" slot="start" src="https://placekitten.com/202/101">
+      </md-list-item>
+      <md-list-item>
+        <div slot="headline">Softe cate</div>
+        <img loading="lazy" slot="start" src="https://placekitten.com/212/106">
+      </md-list-item>
+    </md-list>
+  </figure>
+</div>
diff --git a/components-wiki/figures/list/theming-list.html b/components-wiki/figures/list/theming-list.html
new file mode 100644
index 0000000..2fb7a70
--- /dev/null
+++ b/components-wiki/figures/list/theming-list.html
@@ -0,0 +1,42 @@
+<div class="figure-wrapper">
+  <figure
+      class="styled-example list"
+      aria-label="Image of a list and list items of foods with their inventory stock number with a different theme applied"
+      style="padding-block: 16px;">
+    <style>
+      .styled-example {
+        background-color: #f4fbfa;
+      }
+      .styled-example.list md-list {
+        --md-list-container-color: #f4fbfa;
+        --md-list-item-label-text-color: #161d1d;
+        --md-list-item-supporting-text-color: #3f4948;
+        --md-list-item-trailing-supporting-text-color: #3f4948;
+        --md-list-item-label-text-font: system-ui;
+        --md-list-item-supporting-text-font: system-ui;
+        --md-list-item-trailing-supporting-text-font: system-ui;
+      }
+      .styled-example.list md-list [slot="trailing-supporting-text"] {
+        width: 30px;
+        text-align: end;
+      }
+    </style>
+    <md-list>
+      <md-list-item type="button">
+        <div slot="headline">Apple</div>
+        <div slot="supporting-text">In stock</div>
+        <div slot="trailing-supporting-text">+100</div>
+      </md-list-item>
+      <md-list-item type="button">
+        <div slot="headline">Banana</div>
+        <div slot="supporting-text">In stock</div>
+        <div slot="trailing-supporting-text">56</div>
+      </md-list-item>
+      <md-list-item type="button">
+        <div slot="headline">Cucumber</div>
+        <div slot="supporting-text">Low stock</div>
+        <div slot="trailing-supporting-text">5</div>
+      </md-list-item>
+    </md-list>
+  </figure>
+</div>
diff --git a/components-wiki/figures/list/usage-icon.html b/components-wiki/figures/list/usage-icon.html
new file mode 100644
index 0000000..023e6af
--- /dev/null
+++ b/components-wiki/figures/list/usage-icon.html
@@ -0,0 +1,31 @@
+<div class="figure-wrapper">
+  <figure aria-label="A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.">
+    <md-list style="max-width: 300px">
+      <md-list-item>
+        Lit
+        <svg  slot="start" style="height: 24px" viewBox="0 0 160 200">
+          <path
+            fill="currentColor"
+            d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
+          />
+        </svg>
+      </md-list-item>
+      <md-divider></md-divider>
+      <md-list-item>
+        Polymer
+        <md-icon slot="start">polymer</md-icon>
+      </md-list-item>
+      <md-divider></md-divider>
+      <md-list-item>
+        Angular
+        <svg slot="start" style="height: 24px" viewBox="0 0 250 250">
+          <polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 	" />
+          <path
+            d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
+              l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"
+          />
+        </svg>
+      </md-list-item>
+    </md-list>
+  </figure>
+</div>
diff --git a/components-wiki/figures/list/usage-image.html b/components-wiki/figures/list/usage-image.html
new file mode 100644
index 0000000..1b59d9b
--- /dev/null
+++ b/components-wiki/figures/list/usage-image.html
@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="A list with three image items. The first item is a square picture of a cat and the text Cat. The second is a picture of a kitten with the text Kitty Cat. The third item is a square image of an older kitten with the text Cate."
+  >
+    <md-list style="max-width: 300px">
+      <md-list-item>
+        Cat
+        <img slot="start" style="width: 56px" src="https://placekitten.com/112/112" />
+      </md-list-item>
+      <md-divider></md-divider>
+      <md-list-item>
+        Kitty Cat
+        <img slot="start" style="width: 56px" src="https://placekitten.com/114/114" />
+      </md-list-item>
+      <md-divider></md-divider>
+      <md-list-item>
+        Cate
+        <img slot="start" style="width: 56px" src="https://placekitten.com/116/116" />
+      </md-list-item>
+    </md-list>
+  </figure>
+</div>
diff --git a/components-wiki/figures/list/usage.html b/components-wiki/figures/list/usage.html
new file mode 100644
index 0000000..f20cfc0
--- /dev/null
+++ b/components-wiki/figures/list/usage.html
@@ -0,0 +1,30 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
+  >
+  <md-list style="max-width: 300px;">
+    <md-list-item>
+      Fruits
+    </md-list-item>
+    <md-divider></md-divider>
+    <md-list-item>
+      Apple
+    </md-list-item>
+    <md-list-item>
+      Banana
+    </md-list-item>
+    <md-list-item>
+      <div slot="headline">Cucumber</div>
+      <div slot="supporting-text">Cucumbers are long green fruits that are just as long as this multi-line description</div>
+    </md-list-item>
+    <md-list-item
+        interactive
+        href="https://google.com/search?q=buy+kiwis&tbm=shop"
+        target="_blank">
+      <div slot="headline">Shop for Kiwis</div>
+      <div slot="supporting-text">This will link you out in a new tab</div>
+      <md-icon slot="end">open_in_new</md-icon>
+    </md-list-item>
+  </md-list>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/theming.html b/components-wiki/figures/menu/theming.html
new file mode 100644
index 0000000..f242c18
--- /dev/null
+++ b/components-wiki/figures/menu/theming.html
@@ -0,0 +1,50 @@
+<div class="figure-wrapper">
+  <figure
+    class="styled-example menu"
+    aria-label="A green, filled button with the text Themed menu. Interact with the button to open the green themed menu with 0 border-radius."
+    style="padding-block: 16px"
+  >
+    <style>
+      .styled-example {
+        background-color: #f4fbfa;
+      }
+      .styled-example md-filled-button {
+        --md-sys-color-primary: #006a6a;
+        --md-sys-color-on-primary: #ffffff;
+      }
+      .styled-example.menu md-menu {
+        --md-menu-container-color: #f4fbfa;
+        --md-menu-container-shape: 0px;
+        --md-sys-color-on-surface: #161d1d;
+        --md-sys-typescale-body-large-font: system-ui;
+      }
+      .styled-example.menu md-menu-item {
+        border-radius: 28px;
+      }
+      .styled-example.menu md-menu-item::part(focus-ring) {
+        border-radius: 28px;
+      }
+    </style>
+    <span style="position: relative">
+      <md-filled-button id="theming-anchor">Themed menu</md-filled-button>
+      <md-menu id="theming-menu" anchor="theming-anchor">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#theming-anchor");
+      const menuEl = document.body.querySelector("#theming-menu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/usage-document.html b/components-wiki/figures/menu/usage-document.html
new file mode 100644
index 0000000..77803b5
--- /dev/null
+++ b/components-wiki/figures/menu/usage-document.html
@@ -0,0 +1,30 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says open document menu. Interact with the button to open a document menu."
+  >
+    <div>
+      <div style="margin: 16px">
+        <md-filled-button id="usage-document-anchor">Open document menu</md-filled-button>
+      </div>
+      <md-menu positioning="document" id="usage-document" anchor="usage-document-anchor">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </div>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-document-anchor");
+      const menuEl = document.body.querySelector("#usage-document");
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/usage-fixed.html b/components-wiki/figures/menu/usage-fixed.html
new file mode 100644
index 0000000..b692f0e
--- /dev/null
+++ b/components-wiki/figures/menu/usage-fixed.html
@@ -0,0 +1,30 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says open fixed menu. Interact with the button to open a fixed menu."
+  >
+    <div>
+      <div style="margin: 16px">
+        <md-filled-button id="usage-fixed-anchor">Open fixed menu</md-filled-button>
+      </div>
+      <md-menu positioning="fixed" id="usage-fixed" anchor="usage-fixed-anchor">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </div>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-fixed-anchor");
+      const menuEl = document.body.querySelector("#usage-fixed");
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/usage-popover.html b/components-wiki/figures/menu/usage-popover.html
new file mode 100644
index 0000000..6c0652e
--- /dev/null
+++ b/components-wiki/figures/menu/usage-popover.html
@@ -0,0 +1,30 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says open popover menu. Interact with the button to open a popover menu."
+  >
+    <div>
+      <div style="margin: 16px">
+        <md-filled-button id="usage-popover-anchor">Open popover menu</md-filled-button>
+      </div>
+      <md-menu positioning="popover" id="usage-popover" anchor="usage-popover-anchor">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </div>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-popover-anchor");
+      const menuEl = document.body.querySelector("#usage-popover");
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/usage-submenu.html b/components-wiki/figures/menu/usage-submenu.html
new file mode 100644
index 0000000..c68486f
--- /dev/null
+++ b/components-wiki/figures/menu/usage-submenu.html
@@ -0,0 +1,63 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
+  >
+    <span style="position: relative">
+      <md-filled-button id="usage-submenu-anchor"> Menu with Submenus </md-filled-button>
+      <!-- Note the has-overflow attribute -->
+      <md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
+        <md-sub-menu>
+          <md-menu-item slot="item">
+            <div slot="headline">Fruits with A</div>
+            <!-- Arrow icons are helpful affordances -->
+            <md-icon slot="end">arrow_right</md-icon>
+          </md-menu-item>
+          <!-- Submenu must be slotted into sub-menu's menu slot -->
+          <md-menu slot="menu">
+            <md-menu-item>
+              <div slot="headline">Apricot</div>
+            </md-menu-item>
+            <md-menu-item>
+              <div slot="headline">Avocado</div>
+            </md-menu-item>
+            <!-- Nest as many as you want and control menu anchoring -->
+            <md-sub-menu menu-corner="start-end" anchor-corner="start-start">
+              <md-menu-item slot="item">
+                <div slot="headline">Apples</div>
+                <!-- Arrow icons are helpful affordances -->
+                <md-icon slot="start">
+                  arrow_left
+                </md-icon>
+              </md-menu-item>
+              <md-menu slot="menu">
+                <md-menu-item>
+                  <div slot="headline">Fuji</div>
+                </md-menu-item>
+                <md-menu-item>
+                  <div slot="headline" style="white-space: nowrap;">Granny Smith</div>
+                </md-menu-item>
+                <md-menu-item>
+                  <div slot="headline" style="white-space: nowrap;">Red Delicious</div>
+                </md-menu-item>
+              </md-menu>
+            </md-sub-menu>
+          </md-menu>
+        </md-sub-menu>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-submenu-anchor");
+      const menuEl = document.body.querySelector("#usage-submenu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/menu/usage.html b/components-wiki/figures/menu/usage.html
new file mode 100644
index 0000000..da1e519
--- /dev/null
+++ b/components-wiki/figures/menu/usage.html
@@ -0,0 +1,58 @@
+<div class="figure-wrapper">
+  <style>
+    main > .figure-wrapper {
+      /* prevent scrolling bars on menu open */
+      overflow: visible;
+      /* unset page styles */
+      --md-list-item-container-shape: 0px;
+    }
+  </style>
+  <figure
+    style="justify-content: center"
+    aria-label="Two filled buttons next to each other. The first one says set with idref and the other says set with element ref. Interact with them to open their respective menus."
+  >
+    <span style="position: relative; margin-inline-end: 8px">
+      <md-filled-button id="usage-anchor">Set with idref</md-filled-button>
+      <md-menu id="usage-menu" anchor="usage-anchor">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-anchor");
+      const menuEl = document.body.querySelector("#usage-menu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+    <span style="position: relative">
+      <md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button>
+      <md-menu id="usage-menu-2">
+        <md-menu-item>
+          <div slot="headline">Apple</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Banana</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Cucumber</div>
+        </md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-anchor-2");
+      const menuEl = document.body.querySelector("#usage-menu-2");
+      menuEl.anchorElement = anchorEl;
+      anchorEl.addEventListener("click", () => {
+        menuEl.open = !menuEl.open;
+      });
+    </script>
+  </figure>
+</div>
diff --git a/components-wiki/figures/select/theming-filled.html b/components-wiki/figures/select/theming-filled.html
new file mode 100644
index 0000000..07c16aa
--- /dev/null
+++ b/components-wiki/figures/select/theming-filled.html
@@ -0,0 +1,28 @@
+<div class="figure-wrapper">
+  <figure
+    class="styled-example filled"
+    title="Filled select theming example"
+    aria-label="Image of a filled select with a different theme applied"
+  >
+    <style>
+      .styled-example.filled {
+        --md-filled-select-text-field-container-shape: 0px;
+        --md-filled-select-text-field-container-color: #f7faf9;
+        --md-filled-select-text-field-input-text-color: #005353;
+        --md-filled-select-text-field-input-text-font: system-ui;
+      }
+      .styled-example.filled md-filled-select::part(menu) {
+        --md-menu-container-color: #f4fbfa;
+        --md-menu-container-shape: 0px;
+      }
+    </style>
+    <md-filled-select>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="tomato">
+        <div slot="headline">Tomato</div>
+      </md-select-option>
+    </md-filled-select>
+  </figure>
+</div>
diff --git a/components-wiki/figures/select/theming-outlined.html b/components-wiki/figures/select/theming-outlined.html
new file mode 100644
index 0000000..27caf67
--- /dev/null
+++ b/components-wiki/figures/select/theming-outlined.html
@@ -0,0 +1,34 @@
+<div class="figure-wrapper">
+  <figure
+    class="styled-example outlined"
+    title="Outlined select theming example"
+    aria-label="Image of an outlined select with a different theme applied"
+  >
+    <style>
+      .figure-wrapper figure {
+        padding-block: 16px;
+      }
+      .styled-example {
+        background-color: #f4fbfa;
+      }
+      .styled-example.outlined {
+        --md-outlined-select-text-field-outline-color: #6e7979;
+        --md-outlined-select-text-field-container-shape: 0px;
+        --md-outlined-select-text-field-input-text-color: #005353;
+        --md-outlined-select-text-field-input-text-font: system-ui;
+      }
+      .styled-example.outlined md-outlined-select::part(menu) {
+        --md-menu-container-color: #f4fbfa;
+        --md-menu-container-shape: 0px;
+      }
+    </style>
+    <md-outlined-select>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="tomato">
+        <div slot="headline">Tomato</div>
+      </md-select-option>
+    </md-outlined-select>
+  </figure>
+</div>
diff --git a/components-wiki/figures/select/usage.html b/components-wiki/figures/select/usage.html
new file mode 100644
index 0000000..89f2b61
--- /dev/null
+++ b/components-wiki/figures/select/usage.html
@@ -0,0 +1,34 @@
+<div class="figure-wrapper">
+  <style>
+    main > .figure-wrapper {
+      /* prevent scrolling bars on dropdown menu open */
+      overflow: visible;
+      /* unset page styles */
+      --md-list-item-container-shape: 0px;
+    }
+  </style>
+  <figure
+    style="justify-content: center; gap: 8px"
+    title="Example usage of an outlined dropdown menu and a filled dropdown menu."
+    aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
+  >
+    <md-outlined-select>
+      <md-select-option aria-label="blank"></md-select-option>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="apricot">
+        <div slot="headline">Apricot</div>
+      </md-select-option>
+    </md-outlined-select>
+    <md-filled-select>
+      <md-select-option aria-label="blank"></md-select-option>
+      <md-select-option value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="apricot">
+        <div slot="headline">Apricot</div>
+      </md-select-option>
+    </md-filled-select>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/theming-filled.html b/components-wiki/figures/textfield/theming-filled.html
new file mode 100644
index 0000000..c04a338
--- /dev/null
+++ b/components-wiki/figures/textfield/theming-filled.html
@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <style>
+    figure.themed {
+      background-color: #f4fbfa;
+    }
+    figure.themed.filled {
+      --md-filled-text-field-container-shape: 0px;
+      --md-sys-typescale-body-large: 400 1rem system-ui;
+      --md-sys-color-primary: #006a6a;
+      --md-sys-color-surface-container-highest: #e0e3e2;
+      --md-filled-text-field-label-text-color: #3f4948;
+      --md-filled-text-field-input-text-color: #161d1d;
+    }
+  </style>
+  <figure
+    class="themed filled"
+    aria-label="A filled text field with the label filled themed to a greenish color"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Filled" value="Value"> </md-filled-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/theming-outlined.html b/components-wiki/figures/textfield/theming-outlined.html
new file mode 100644
index 0000000..95e87a5
--- /dev/null
+++ b/components-wiki/figures/textfield/theming-outlined.html
@@ -0,0 +1,18 @@
+<div class="figure-wrapper">
+  <style>
+    figure.themed.outlined {
+      --md-outlined-text-field-container-shape: 0px;
+      --md-sys-typescale-body-large: 400 1rem system-ui;
+      --md-sys-color-primary: #006a6a;
+      --md-outlined-text-field-label-text-color: #3f4948;
+      --md-outlined-text-field-input-text-color: #161d1d;
+    }
+  </style>
+  <figure
+    class="themed outlined"
+    aria-label="An outlined text field with the label outlined themed to a greenish color"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-char-counter.html b/components-wiki/figures/textfield/usage-char-counter.html
new file mode 100644
index 0000000..f85bf87
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-char-counter.html
@@ -0,0 +1,8 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="An outlined textfield with a floating label that says Title and a filled value that says Short and the text 5 / 10 under the field at the end"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Title" value="Short" maxlength="10"></md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-icons.html b/components-wiki/figures/textfield/usage-icons.html
new file mode 100644
index 0000000..2b6769e
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-icons.html
@@ -0,0 +1,19 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field placeholder="Search for messages" has-leading-icon>
+      <md-icon slot="leading-icon">search</md-icon>
+    </md-outlined-text-field>
+    <md-outlined-text-field label="Password" type="password" has-trailing-icon>
+      <md-icon-button toggle slot="trailing-icon">
+        <md-icon>visibility</md-icon>
+        <md-icon slot="selected">visibility_off</md-icon>
+      </md-icon-button>
+    </md-outlined-text-field>
+    <md-outlined-text-field label="Username" error error-text="Username not available" has-trailing-icon>
+      <md-icon slot="trailing-icon">error</md-icon>
+    </md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-label.html b/components-wiki/figures/textfield/usage-label.html
new file mode 100644
index 0000000..5c4e3f1
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-label.html
@@ -0,0 +1,11 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Three outlined textfields next to each other. the first has a label of Favorite food, the second one a placeholder of email@domain.com and there is a label that says First name and an empty outlined textfield next to it"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Favorite food"></md-outlined-text-field>
+    <md-outlined-text-field placeholder="email@domain.com"></md-outlined-text-field>
+    <div>First name</div>
+    <md-outlined-text-field aria-label="First name"></md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-prefix.html b/components-wiki/figures/textfield/usage-prefix.html
new file mode 100644
index 0000000..1e0dfbb
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-prefix.html
@@ -0,0 +1,14 @@
+<div class="figure-wrapper textarea">
+  <figure
+    aria-label="An outlined textfield with a floating label that says Dollar amount, a prefix dollar sign, the number zero as a value and a suffix of decimal zero zero at the end of the field"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field
+      label="Dollar amount"
+      type="number"
+      value="0"
+      prefix-text="$"
+      suffix-text=".00"
+    ></md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-supporting-text.html b/components-wiki/figures/textfield/usage-supporting-text.html
new file mode 100644
index 0000000..d39b1a1
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-supporting-text.html
@@ -0,0 +1,17 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field
+      label="Comments"
+      supporting-text="Provide comments for the issue"
+    ></md-filled-text-field>
+    <md-filled-text-field
+      label="Name"
+      required
+      supporting-text="*required"
+      error-text="Please fill out this field"
+    ></md-filled-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-textarea.html b/components-wiki/figures/textfield/usage-textarea.html
new file mode 100644
index 0000000..46e86fb
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-textarea.html
@@ -0,0 +1,13 @@
+<div class="figure-wrapper textarea">
+  <figure
+    aria-label="A filled textarea that is vertically larger and has a label that says Vertical resize"
+    style="padding-block: 16px; gap: 16px"
+  >
+  <style>
+    .figure-wrapper.textarea md-filled-text-field {
+      resize: vertical;
+    }
+  </style>
+  <md-filled-text-field type="textarea" label="Vertical resize" rows="3"></md-filled-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage-type.html b/components-wiki/figures/textfield/usage-type.html
new file mode 100644
index 0000000..7f1517e
--- /dev/null
+++ b/components-wiki/figures/textfield/usage-type.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Two filled textfields next to each other. The first has a label of Username and the outlined one has a label of Password"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Username" type="email"></md-filled-text-field>
+    <md-filled-text-field label="Password" type="password"></md-filled-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/figures/textfield/usage.html b/components-wiki/figures/textfield/usage.html
new file mode 100644
index 0000000..2774fbc
--- /dev/null
+++ b/components-wiki/figures/textfield/usage.html
@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="A filled textfield next to an outlined textfield. Both have a value of Value prefilled"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Label" value="Value"></md-filled-text-field>
+    <md-outlined-text-field label="Label" value="Value"></md-outlined-text-field>
+  </figure>
+</div>
diff --git a/components-wiki/focus-ring.md b/components-wiki/focus-ring.md
new file mode 100644
index 0000000..85b93f0
--- /dev/null
+++ b/components-wiki/focus-ring.md
@@ -0,0 +1,174 @@
+# Focus ring
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-focus-ring -->
+
+<!-- [TOC] -->
+
+Focus rings are accessible outlines for components to show keyboard focus.
+
+Focus rings follow the same heuristics as
+[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)<!-- {.external} -->
+to determine when they are visible.
+
+![Three elements with a focus ring that moves between them.](images/focus/hero.gif "A focus ring moving across elements.")
+
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/focus)
+    <!-- {.external} -->
+
+## Usage
+
+Focus rings display on keyboard navigation. They may be attached to a control in
+one of three ways.
+
+![An element with a focus ring.](images/focus/usage.gif "A focus ring.")
+
+1.  Attached to the parent element
+
+    ```html
+    <button style="position: relative">
+      <md-focus-ring style="--md-focus-ring-shape: 8px"></md-focus-ring>
+    </button>
+    ```
+
+1.  Attached to a referenced element
+
+    ```html
+    <div style="position: relative">
+      <md-focus-ring for="control" style="--md-focus-ring-shape: 8px"></md-focus-ring>
+      <input id="control">
+    </div>
+    ```
+
+1.  Attached imperatively
+
+    ```html
+    <div style="position: relative">
+      <md-focus-ring id="ring" style="--md-focus-ring-shape: 8px"></md-focus-ring>
+      <button id="ring-control"></button>
+    </div>
+    <script>
+      const focusRing = document.querySelector('#ring');
+      const control = document.querySelector('#ring-control');
+      focusRing.attach(control);
+    </script>
+    ```
+
+> Note: focus rings must be placed within a `position: relative` container.
+
+### Inward
+
+Focus rings can be changed to animate inwards by adding an `inward` attribute.
+This is useful for components like list items.
+
+![An element with a focus ring that animates inward.](images/focus/usage-inward.gif "A focus ring animating inward.")
+
+```html
+<button style="position: relative">
+  <md-focus-ring inward style="--md-focus-ring-shape: 8px"></md-focus-ring>
+</button>
+```
+
+### Animation
+
+The focus ring animation may be customized or disabled using CSS custom
+properties.
+
+![An element with a focus ring that does not animate.](images/focus/usage-animation.gif "A focus ring with disabled animations.")
+
+```html
+<style>
+  md-focus-ring {
+    --md-focus-ring-duration: 0s; /* disabled animation */
+  }
+</style>
+```
+
+## Accessibility
+
+Focus rings are visual components and do not have assistive technology
+requirements.
+
+## Theming
+
+Focus rings supports [Material theming](../theming/README.md) and can be
+customized in terms of color and shape.
+
+### Tokens
+
+Token                   | Default value
+----------------------- | --------------------------
+`--md-focus-ring-color` | `--md-sys-color-secondary`
+`--md-focus-ring-shape` | `--md-sys-shape-corner-full`
+`--md-focus-ring-width` | `3px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)
+    <!-- {.external} -->
+
+### Example
+
+![Image of a focus ring with a different theme applied](images/focus/theming.gif "Focus ring theming example.")
+
+```html
+<style>
+md-focus-ring {
+  --md-focus-ring-shape: 0px;
+  --md-focus-ring-width: 2px;
+  --md-focus-ring-active-width: 4px;
+  --md-sys-color-secondary: #4A6363;
+}
+</style>
+
+<button>
+  <md-focus-ring></md-focus-ring>
+</button>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdFocusRing <code>&lt;md-focus-ring&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `visible` | `visible` | `boolean` | `false` | Makes the focus ring visible. |
+| `inward` | `inward` | `boolean` | `false` | Makes the focus ring animate inwards instead of outwards. |
+| `htmlFor` |  | `string` | `undefined` |  |
+| `control` |  | `HTMLElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `attach` | `control` | `void` |  |
+| `detach` | _None_ | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `visibility-changed` | `Event` | No | No | Fired whenever `visible` changes. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/icon-button.md b/components-wiki/icon-button.md
new file mode 100644
index 0000000..969ed40
--- /dev/null
+++ b/components-wiki/icon-button.md
@@ -0,0 +1,600 @@
+<!-- catalog-only-start --><!-- ---
+name: Icon Buttons
+dirname: iconbutton
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Icon Buttons
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-icon-button -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/icon-button/).**
+<!-- external-only-end -->
+
+[Icon buttons](https://m3.material.io/components/icon-buttons)<!-- {.external} --> help
+people take supplementary actions with a single tap.
+
+</catalog-component-header-title>
+<img
+    class="hero"
+    alt="The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot."
+    src="images/iconbutton/hero.webp">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/icon-buttons) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/iconbutton)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname, previewHeight=700 %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Types
+
+<!-- no-catalog-start -->
+
+![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.webp "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/buttons.html" -->
+
+1.  [Icon Button](#icon-button)
+2.  [Filled Icon Button](#filled-icon-button)
+3.  [Filled Tonal Icon Button](#filled-tonal-icon-button)
+4.  [Outlined Icon Button](#outlined-icon-button)
+
+## Usage
+
+Use icon buttons to display actions in a compact layout. Icon buttons can
+represent opening actions such as opening an overflow menu or search, or
+represent binary actions that can be toggled on and off, such as favorite or
+bookmark.
+
+Icon buttons can be grouped together or they can stand alone.
+
+To use icons by name, see the [Icon](icon.md#usage) documentation for loading
+the icon font.
+
+<!-- no-catalog-start -->
+
+![A row of icon buttons](images/iconbutton/usage.webp "Icon buttons can be used within other components, such as a bottom app bar")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage.html" -->
+
+```html
+<md-icon-button>
+  <md-icon>check</md-icon>
+</md-icon-button>
+<md-filled-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-icon-button>
+<md-filled-tonal-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-tonal-icon-button>
+<md-outlined-icon-button>
+  <md-icon>check</md-icon>
+</md-outlined-icon-button>
+```
+
+### Links
+
+Add an
+[`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)<!-- {.external} -->
+and optionally a
+[`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)<!-- {.external} -->
+attribute to turn the icon button into a link.
+
+```html
+<md-icon-button href="https://google.com">
+  <md-icon>check</md-icon>
+</md-icon-button>
+```
+
+### Toggle
+
+<!-- no-catalog-start -->
+
+![Two rows of toggling icon buttons, the top row is unselected and the bottom
+row is
+selected](images/iconbutton/usage-toggle.webp "Unselected and Selected Icon Button")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage-toggle.html" -->
+
+Toggle icon buttons allow a single choice to be selected or deselected, such as
+adding or removing something from favorites.
+
+Add a second icon in the `slot="selected"` slot to change the icon when
+selected. Toggle icon buttons can be pre-selected by adding the `selected`
+attribute.
+
+```html
+<div>
+  <md-icon-button toggle>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-icon-button>
+  <md-filled-icon-button toggle>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-filled-icon-button>
+  <md-filled-tonal-icon-button toggle>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-filled-tonal-icon-button>
+  <md-outlined-icon-button toggle>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-outlined-icon-button>
+</div>
+<div>
+  <md-icon-button toggle selected>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-icon-button>
+  <md-filled-icon-button toggle selected>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-filled-icon-button>
+  <md-filled-tonal-icon-button toggle selected>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-filled-tonal-icon-button>
+  <md-outlined-icon-button toggle selected>
+    <md-icon>close</md-icon>
+    <md-icon slot="selected">check</md-icon>
+  </md-outlined-icon-button>
+</div>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to icon buttons whose labels need a more descriptive label.
+
+```html
+<md-icon-button aria-label="Search for Contact">
+  <md-icon>search</md-icon>
+</md-icon-button>
+```
+
+### Toggle
+
+Add an `aria-label-selected` attribute to toggle buttons whose labels need a
+more descriptive label when selected.
+
+```html
+<md-icon-button toggle
+  aria-label="Unselected"
+  aria-label-selected="Selected">
+  <md-icon>close</md-icon>
+  <md-icon slot="selected">check</md-icon>
+</md-icon-button>
+```
+
+### Focusable and disabled
+
+By default, disabled icon buttons are not focusable with the keyboard, while
+"soft-disabled" icon buttons are. Some use cases encourage focusability of
+disabled toolbar items to increase their discoverability.
+
+See the
+[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->
+for guidance on when this is recommended.
+
+```html
+<div role="toolbar">
+  <md-icon-button aria-label="Copy">
+    <md-icon>copy</md-icon>
+  </md-icon-button>
+  <md-icon-button aria-label="Cut">
+    <md-icon>cut</md-icon>
+  </md-icon-button>
+  <!--
+    This icon button is disabled but kept focusable to improve its
+    discoverability in the toolbar.
+  -->
+  <md-icon-button aria-label="Paste" soft-disabled>
+    <md-icon>paste</md-icon>
+  </md-icon-button>
+</div>
+```
+
+## Icon Button
+
+Standard icon buttons do not have a background or outline, and have the lowest
+emphasis of the icon buttons.
+
+<!-- no-catalog-start -->
+
+![A check icon](images/iconbutton/usage-standard.webp "Standard Icon Button with Check icon")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
+
+```html
+<md-icon-button>
+  <md-icon>check</md-icon>
+</md-icon-button>
+```
+
+## Filled Icon Button
+
+<!-- go/md-filled-icon-button -->
+
+<!-- no-catalog-start -->
+
+![A circular button with a check icon](images/iconbutton/usage-filled.webp "Filled Icon Button")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage-filled.html" -->
+
+Filled icon buttons have higher visual impact and are best for high emphasis
+actions.
+
+```html
+<md-filled-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-icon-button>
+```
+
+## Filled Tonal Icon Button
+
+<!-- go/md-filled-tonal-icon-button -->
+
+<!-- no-catalog-start -->
+
+![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.webp "Filled Tonal Icon Button")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage-filled-tonal.html" -->
+
+Filled tonal icon buttons are a middle ground between filled and outlined icon
+buttons. They're useful in contexts where the button requires slightly more
+emphasis than an outline would give, such as a secondary action paired with a
+high emphasis action.
+
+```html
+<md-filled-tonal-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-tonal-icon-button>
+```
+
+## Outlined Icon Button
+
+<!-- go/md-outlined-icon-button -->
+
+<!-- no-catalog-start -->
+
+![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.webp "Outlined Icon button")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/usage-outlined.html" -->
+
+Outlined icon buttons are medium-emphasis buttons. They're useful when an icon
+button needs more emphasis than a standard icon button but less than a filled or
+filled tonal icon button.
+
+```html
+<md-outlined-icon-button>
+  <md-icon>check</md-icon>
+</md-outlined-icon-button>
+```
+
+## Theming
+
+Icon Button supports [Material theming](../theming/README.md) and can be
+customized in terms of color, and shape.
+
+### Icon Button tokens
+
+Token                                | Default value
+------------------------------------ | -----------------------------------
+`--md-icon-button-icon-color`        | `--md-sys-color-on-surface-variant`
+`--md-icon-button-state-layer-shape` | `--md-sys-shape-corner-full`
+`--md-icon-button-icon-size`         | `24px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
+    <!-- {.external} -->
+
+### Icon Button example
+
+<!-- no-catalog-start -->
+
+![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.webp "Standard icon button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/theming-standard.html" -->
+
+```html
+<style>
+:root {
+  --md-icon-button-icon-size: 32px;
+  --md-sys-color-on-surface-variant: #dc362e;
+  background-color: #fff8f6;
+}
+</style>
+
+<md-icon-button>
+  <md-icon>check</md-icon>
+</md-icon-button>
+```
+
+### Filled Icon Button tokens
+
+Token                                              | Default value
+-------------------------------------------------- | -------------
+`--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
+`--md-filled-icon-button-container-shape`          | `--md-sys-shape-corner-full`
+`--md-filled-icon-button-container-width`          | `40px`
+`--md-filled-icon-button-container-height`         | `40px`
+`--md-filled-icon-button-icon-size`                | `24px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss)
+    <!-- {.external} -->
+
+### Filled Icon Button example
+
+<!-- no-catalog-start -->
+
+![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.webp "Filled icon button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/theming-filled.html" -->
+
+```html
+<style>
+:root {
+  --md-filled-icon-button-container-width: 80px;
+  --md-filled-icon-button-container-height: 80px;
+  --md-filled-icon-button-icon-size: 40px;
+  --md-filled-icon-button-container-shape: 0px;
+  --md-sys-color-primary: #dc362e;
+  background-color: #fff8f6;
+}
+</style>
+<md-filled-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-icon-button>
+```
+
+### Filled Tonal Icon Button tokens
+
+Token                                                    | Default value
+-------------------------------------------------------- | -------------
+`--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
+`--md-filled-tonal-icon-button-container-shape`          | `--md-sys-shape-corner-full`
+`--md-filled-tonal-icon-button-container-width`          | `40px`
+`--md-filled-tonal-icon-button-container-height`         | `40px`
+`--md-filled-tonal-icon-button-icon-size`                | `24px`
+
+### Filled Tonal Icon Button example
+
+<!-- no-catalog-start -->
+
+![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.webp "Filled tonal icon button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/theming-filled-tonal.html" -->
+
+```html
+<style>
+:root {
+  --md-filled-tonal-icon-button-container-width: 80px;
+  --md-filled-tonal-icon-button-container-height: 80px;
+  --md-filled-tonal-icon-button-container-shape: 0px;
+  --md-filled-tonal-icon-button-icon-size: 40px;
+  --md-sys-color-secondary-container: #006A6A;
+}
+</style>
+<md-filled-tonal-icon-button>
+  <md-icon>check</md-icon>
+</md-filled-tonal-icon-button>
+```
+
+### Outlined Icon Button tokens
+
+Token                                        | Default value
+-------------------------------------------- | ----------------------------
+`--md-outlined-icon-button-outline-color`    | `--md-sys-color-outline`
+`--md-outlined-icon-button-outline-width`    | `1px`
+`--md-outlined-icon-button-container-shape`  | `--md-sys-shape-corner-full`
+`--md-outlined-icon-button-container-width`  | `40px`
+`--md-outlined-icon-button-container-height` | `40px`
+`--md-outlined-icon-button-icon-size`        | `24px`
+
+### Outlined Icon Button example
+
+<!-- no-catalog-start -->
+
+![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.webp "Outlined icon button theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/iconbutton/theming-outlined.html" -->
+
+```html
+<style>
+:root {
+  --md-outlined-icon-button-container-width: 80px;
+  --md-outlined-icon-button-container-height: 80px;
+  --md-outlined-icon-button-container-shape: 0px;
+  --md-outlined-icon-button-icon-size: 40px;
+  --md-outlined-icon-button-outline-width: 4px;
+  --md-sys-color-outline: #006A6A;
+}
+</style>
+<md-outlined-icon-button>
+  <md-icon>check</md-icon>
+</md-outlined-icon-button>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdIconButton <code>&lt;md-icon-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>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. |
+| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
+| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
+| `selected` | `selected` | `boolean` | `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. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+| `labels` |  | `NodeList` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
+| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdFilledIconButton <code>&lt;md-filled-icon-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>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. |
+| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
+| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
+| `selected` | `selected` | `boolean` | `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. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+| `labels` |  | `NodeList` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
+| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdFilledTonalIconButton <code>&lt;md-filled-tonal-icon-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>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. |
+| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
+| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
+| `selected` | `selected` | `boolean` | `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. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+| `labels` |  | `NodeList` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
+| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdOutlinedIconButton <code>&lt;md-outlined-icon-button&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>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. |
+| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
+| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
+| `selected` | `selected` | `boolean` | `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. |
+| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
+| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
+| `name` |  | `string` | `undefined` |  |
+| `form` |  | `HTMLFormElement` | `undefined` |  |
+| `labels` |  | `NodeList` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |
+| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/icon.md b/components-wiki/icon.md
new file mode 100644
index 0000000..44b9c53
--- /dev/null
+++ b/components-wiki/icon.md
@@ -0,0 +1,204 @@
+# Icon
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'dfreedm' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-icon -->
+
+<!-- [TOC] -->
+
+[Icons](https://m3.material.io/styles/icons/overview)<!-- {.external} --> can be used to
+represent common actions. Material Symbols are a set of variable icon fonts
+created at seven weights across three different styles.
+
+![Array of icons with various stylistic attributes](images/icon/hero.gif)
+
+*   [Design article](https://m3.material.io/styles/icons) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/icon)
+    <!-- {.external} -->
+
+## Usage
+
+Icons can be specified by name, unicode code point, or have an `<svg>` child
+element.
+
+![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.webp "Example icons")
+
+```html
+<md-icon>settings</md-icon>
+<md-icon>&#xe834</md-icon>
+<md-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M10 40V24H4L24 6l10 8.85V9h4v9.55L44 24h-6v16H26.5V28h-5v12Zm3-3h5.5V25h11v12H35V19.95l-11-10-11 10Zm5.5-12h11-11Zm1.25-5.5h8.5q0-1.65-1.275-2.725Q25.7 15.7 24 15.7q-1.7 0-2.975 1.075Q19.75 17.85 19.75 19.5Z"/></svg></md-icon>
+```
+
+The full range of icons can be found on the
+[Material Symbols](https://fonts.google.com/icons)<!-- {.external} --> font page.
+
+Material Symbols icons are available in three styles: **outlined**, **rounded**,
+and **sharp**.
+
+In addition, Material Symbols have four adjustable stylistic variable font
+attributes called axes. An axis is a typographic term referring to the attribute
+of a symbol that can be altered to create visual variations.
+
+Each style symbol contains four axes: **weight**, **fill**, **grade**, and
+**optical size**.
+
+The `weight` and `optical size` attributes are handled automatically, but the
+`fill` and `grade` attributes are custom to the Material Symbols font, and must
+be set with the
+[`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)<!-- {.external} -->
+property.
+
+### Outlined
+
+Outlined symbols use stroke and fill attributes for a light, clean style that
+works well in dense UIs. The stroke weight of outlined icons can be adjusted to
+complement or contrast the weight of your typography.
+
+Load the font with
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
+```
+
+### Rounded
+
+![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.webp "Rounded Icons")
+
+Rounded symbols use a corner radius that pairs well with brands that use heavier
+typography, curved logos, or circular elements to express their style.
+
+Load the font with
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded" rel="stylesheet">
+```
+
+To use Rounded icons, set `--md-icon-font` to `'Material Symbols Rounded'`.
+
+### Sharp
+
+![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.webp "Sharp Icons")
+
+Sharp symbols display corners with straight edges, for a crisp style that
+remains legible even at smaller scales. These rectangular shapes can support
+brand styles that aren’t well-reflected by rounded shapes.
+
+Load the font with
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp" rel="stylesheet">
+```
+
+To use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.
+
+### Fill
+
+![Filed settings, checkbox, and house icons](images/icon/usage_filled.webp "Filled Icons")
+
+Filled Icons gives you the ability to transition from a more outlined style to a
+reversed or more filled style.
+
+A fill attribute can be used to convey a state of transition, such as unfilled
+and filled states. Values range from `0` to `1`, with `1` being completely
+filled. Along with weight, fill is a primary attribute that impacts the overall
+look of a symbol.
+
+All styles of Material Symbols can be filled by setting
+`font-variation-settings` to `'FILL' 1`.
+
+## Accessibility
+
+Icons are mostly intended to be used inside of other components that have
+accessibility settings.
+
+If used on their own, Icons should be given an accessible name if they are
+focusable. If you use icons by name, they will be announced by screen readers
+without any extra steps.
+
+If using codepoints, wrap the codepoint in a `<span>` with an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute.
+
+```html
+<md-icon tabindex="-1"><span aria-label="home">&#xe88a</span></md-icon>
+```
+
+If using SVG icons, add an `aria-label` attribute to the SVG element.
+
+```html
+<md-icon tabindex="-1"><svg aria-label="paper airplane" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg></md-icon>
+```
+
+## Theming
+
+### Tokens
+
+Token            | Default value
+---------------- | -----------------------------
+`--md-icon-font` | `'Material Symbols Outlined'`
+`--md-icon-size` | `24px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)
+    <!-- {.external} -->
+
+### Example
+
+![Image of icons with a different theme applied](images/icon/theming.webp "Icon theming example.")
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+
+<style>
+md-icon {
+  color: #006A6A;
+  --md-icon-size: 48px;
+}
+.rounded {
+  --md-icon-font: 'Material Symbols Rounded';
+}
+.sharp {
+  --md-icon-font: 'Material Symbols Sharp';
+}
+md-icon[filled] {
+  font-variation-settings: 'FILL' 1;
+}
+</style>
+
+<h3>Outlined</h3>
+<span>
+  <md-icon>settings</md-icon>
+  <md-icon>check_box</md-icon>
+  <md-icon>house</md-icon>
+  <md-icon filled>settings</md-icon>
+  <md-icon filled>check_box</md-icon>
+  <md-icon filled>house</md-icon>
+</span>
+<h3>Rounded</h3>
+<span class="rounded">
+  <md-icon>settings</md-icon>
+  <md-icon>check_box</md-icon>
+  <md-icon>house</md-icon>
+  <md-icon filled>settings</md-icon>
+  <md-icon filled>check_box</md-icon>
+  <md-icon filled>house</md-icon>
+</span>
+<h3>Sharp</h3>
+<span class="sharp">
+  <md-icon>settings</md-icon>
+  <md-icon>check_box</md-icon>
+  <md-icon>house</md-icon>
+  <md-icon filled>settings</md-icon>
+  <md-icon filled>check_box</md-icon>
+  <md-icon filled>house</md-icon>
+</span>
+```
+
+<!-- auto-generated API docs start -->
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/images/button/hero.webp b/components-wiki/images/button/hero.webp
new file mode 100644
index 0000000..d0103c9
Binary files /dev/null and b/components-wiki/images/button/hero.webp differ
diff --git a/components-wiki/images/button/theming-elevated-button.webp b/components-wiki/images/button/theming-elevated-button.webp
new file mode 100644
index 0000000..7dbb5a1
Binary files /dev/null and b/components-wiki/images/button/theming-elevated-button.webp differ
diff --git a/components-wiki/images/button/theming-filled-button.webp b/components-wiki/images/button/theming-filled-button.webp
new file mode 100644
index 0000000..6c87508
Binary files /dev/null and b/components-wiki/images/button/theming-filled-button.webp differ
diff --git a/components-wiki/images/button/theming-filled-tonal-button.webp b/components-wiki/images/button/theming-filled-tonal-button.webp
new file mode 100644
index 0000000..4133983
Binary files /dev/null and b/components-wiki/images/button/theming-filled-tonal-button.webp differ
diff --git a/components-wiki/images/button/theming-outlined-button.webp b/components-wiki/images/button/theming-outlined-button.webp
new file mode 100644
index 0000000..4d9ec26
Binary files /dev/null and b/components-wiki/images/button/theming-outlined-button.webp differ
diff --git a/components-wiki/images/button/theming-text-button.webp b/components-wiki/images/button/theming-text-button.webp
new file mode 100644
index 0000000..25558ed
Binary files /dev/null and b/components-wiki/images/button/theming-text-button.webp differ
diff --git a/components-wiki/images/button/types.webp b/components-wiki/images/button/types.webp
new file mode 100644
index 0000000..86df09c
Binary files /dev/null and b/components-wiki/images/button/types.webp differ
diff --git a/components-wiki/images/button/usage-elevated-button.webp b/components-wiki/images/button/usage-elevated-button.webp
new file mode 100644
index 0000000..45c80a4
Binary files /dev/null and b/components-wiki/images/button/usage-elevated-button.webp differ
diff --git a/components-wiki/images/button/usage-filled-button.webp b/components-wiki/images/button/usage-filled-button.webp
new file mode 100644
index 0000000..410977f
Binary files /dev/null and b/components-wiki/images/button/usage-filled-button.webp differ
diff --git a/components-wiki/images/button/usage-filled-tonal-button.webp b/components-wiki/images/button/usage-filled-tonal-button.webp
new file mode 100644
index 0000000..89559b6
Binary files /dev/null and b/components-wiki/images/button/usage-filled-tonal-button.webp differ
diff --git a/components-wiki/images/button/usage-icon.webp b/components-wiki/images/button/usage-icon.webp
new file mode 100644
index 0000000..4d49560
Binary files /dev/null and b/components-wiki/images/button/usage-icon.webp differ
diff --git a/components-wiki/images/button/usage-outlined-button.webp b/components-wiki/images/button/usage-outlined-button.webp
new file mode 100644
index 0000000..5affb32
Binary files /dev/null and b/components-wiki/images/button/usage-outlined-button.webp differ
diff --git a/components-wiki/images/button/usage-text-button.webp b/components-wiki/images/button/usage-text-button.webp
new file mode 100644
index 0000000..250332c
Binary files /dev/null and b/components-wiki/images/button/usage-text-button.webp differ
diff --git a/components-wiki/images/button/usage.webp b/components-wiki/images/button/usage.webp
new file mode 100644
index 0000000..12a189d
Binary files /dev/null and b/components-wiki/images/button/usage.webp differ
diff --git a/components-wiki/images/checkbox/hero.webp b/components-wiki/images/checkbox/hero.webp
new file mode 100644
index 0000000..7b3ecd1
Binary files /dev/null and b/components-wiki/images/checkbox/hero.webp differ
diff --git a/components-wiki/images/checkbox/theming.webp b/components-wiki/images/checkbox/theming.webp
new file mode 100644
index 0000000..4d87121
Binary files /dev/null and b/components-wiki/images/checkbox/theming.webp differ
diff --git a/components-wiki/images/checkbox/usage-label.webp b/components-wiki/images/checkbox/usage-label.webp
new file mode 100644
index 0000000..683b529
Binary files /dev/null and b/components-wiki/images/checkbox/usage-label.webp differ
diff --git a/components-wiki/images/checkbox/usage.webp b/components-wiki/images/checkbox/usage.webp
new file mode 100644
index 0000000..49b6a92
Binary files /dev/null and b/components-wiki/images/checkbox/usage.webp differ
diff --git a/components-wiki/images/chips/hero.webp b/components-wiki/images/chips/hero.webp
new file mode 100644
index 0000000..36b213b
Binary files /dev/null and b/components-wiki/images/chips/hero.webp differ
diff --git a/components-wiki/images/dialog/hero.webp b/components-wiki/images/dialog/hero.webp
new file mode 100644
index 0000000..f11d4b0
Binary files /dev/null and b/components-wiki/images/dialog/hero.webp differ
diff --git a/components-wiki/images/divider/hero.webp b/components-wiki/images/divider/hero.webp
new file mode 100644
index 0000000..1363d04
Binary files /dev/null and b/components-wiki/images/divider/hero.webp differ
diff --git a/components-wiki/images/divider/theming.webp b/components-wiki/images/divider/theming.webp
new file mode 100644
index 0000000..bddb1b8
Binary files /dev/null and b/components-wiki/images/divider/theming.webp differ
diff --git a/components-wiki/images/divider/usage-inset-start.webp b/components-wiki/images/divider/usage-inset-start.webp
new file mode 100644
index 0000000..5793500
Binary files /dev/null and b/components-wiki/images/divider/usage-inset-start.webp differ
diff --git a/components-wiki/images/divider/usage-inset.webp b/components-wiki/images/divider/usage-inset.webp
new file mode 100644
index 0000000..82c1642
Binary files /dev/null and b/components-wiki/images/divider/usage-inset.webp differ
diff --git a/components-wiki/images/divider/usage.webp b/components-wiki/images/divider/usage.webp
new file mode 100644
index 0000000..54ea584
Binary files /dev/null and b/components-wiki/images/divider/usage.webp differ
diff --git a/components-wiki/images/elevation/hero.webp b/components-wiki/images/elevation/hero.webp
new file mode 100644
index 0000000..c5f3787
Binary files /dev/null and b/components-wiki/images/elevation/hero.webp differ
diff --git a/components-wiki/images/elevation/theming.webp b/components-wiki/images/elevation/theming.webp
new file mode 100644
index 0000000..e447808
Binary files /dev/null and b/components-wiki/images/elevation/theming.webp differ
diff --git a/components-wiki/images/elevation/usage-animation.gif b/components-wiki/images/elevation/usage-animation.gif
new file mode 100644
index 0000000..4cde422
Binary files /dev/null and b/components-wiki/images/elevation/usage-animation.gif differ
diff --git a/components-wiki/images/elevation/usage.webp b/components-wiki/images/elevation/usage.webp
new file mode 100644
index 0000000..1cfe3c5
Binary files /dev/null and b/components-wiki/images/elevation/usage.webp differ
diff --git a/components-wiki/images/fab/extended-fabs.webp b/components-wiki/images/fab/extended-fabs.webp
new file mode 100644
index 0000000..48f2c70
Binary files /dev/null and b/components-wiki/images/fab/extended-fabs.webp differ
diff --git a/components-wiki/images/fab/fabs.webp b/components-wiki/images/fab/fabs.webp
new file mode 100644
index 0000000..c334941
Binary files /dev/null and b/components-wiki/images/fab/fabs.webp differ
diff --git a/components-wiki/images/fab/hero.webp b/components-wiki/images/fab/hero.webp
new file mode 100644
index 0000000..84bb51d
Binary files /dev/null and b/components-wiki/images/fab/hero.webp differ
diff --git a/components-wiki/images/fab/small-fabs.webp b/components-wiki/images/fab/small-fabs.webp
new file mode 100644
index 0000000..a93d62a
Binary files /dev/null and b/components-wiki/images/fab/small-fabs.webp differ
diff --git a/components-wiki/images/fab/theming-branded.webp b/components-wiki/images/fab/theming-branded.webp
new file mode 100644
index 0000000..e8378e2
Binary files /dev/null and b/components-wiki/images/fab/theming-branded.webp differ
diff --git a/components-wiki/images/fab/theming-extended.webp b/components-wiki/images/fab/theming-extended.webp
new file mode 100644
index 0000000..a7fa88b
Binary files /dev/null and b/components-wiki/images/fab/theming-extended.webp differ
diff --git a/components-wiki/images/fab/theming-fab.webp b/components-wiki/images/fab/theming-fab.webp
new file mode 100644
index 0000000..242368e
Binary files /dev/null and b/components-wiki/images/fab/theming-fab.webp differ
diff --git a/components-wiki/images/fab/usage-branded-extended.webp b/components-wiki/images/fab/usage-branded-extended.webp
new file mode 100644
index 0000000..bcaf184
Binary files /dev/null and b/components-wiki/images/fab/usage-branded-extended.webp differ
diff --git a/components-wiki/images/fab/usage-branded-sizes.webp b/components-wiki/images/fab/usage-branded-sizes.webp
new file mode 100644
index 0000000..1b5d54a
Binary files /dev/null and b/components-wiki/images/fab/usage-branded-sizes.webp differ
diff --git a/components-wiki/images/fab/usage-branded.webp b/components-wiki/images/fab/usage-branded.webp
new file mode 100644
index 0000000..e0dd417
Binary files /dev/null and b/components-wiki/images/fab/usage-branded.webp differ
diff --git a/components-wiki/images/fab/usage-color.webp b/components-wiki/images/fab/usage-color.webp
new file mode 100644
index 0000000..b079527
Binary files /dev/null and b/components-wiki/images/fab/usage-color.webp differ
diff --git a/components-wiki/images/fab/usage-extended.webp b/components-wiki/images/fab/usage-extended.webp
new file mode 100644
index 0000000..eebce87
Binary files /dev/null and b/components-wiki/images/fab/usage-extended.webp differ
diff --git a/components-wiki/images/fab/usage-fab.webp b/components-wiki/images/fab/usage-fab.webp
new file mode 100644
index 0000000..e5d7413
Binary files /dev/null and b/components-wiki/images/fab/usage-fab.webp differ
diff --git a/components-wiki/images/fab/usage-lowered.webp b/components-wiki/images/fab/usage-lowered.webp
new file mode 100644
index 0000000..8ff90e2
Binary files /dev/null and b/components-wiki/images/fab/usage-lowered.webp differ
diff --git a/components-wiki/images/fab/usage-sizes.webp b/components-wiki/images/fab/usage-sizes.webp
new file mode 100644
index 0000000..7f70e32
Binary files /dev/null and b/components-wiki/images/fab/usage-sizes.webp differ
diff --git a/components-wiki/images/fab/usage-without-icon.webp b/components-wiki/images/fab/usage-without-icon.webp
new file mode 100644
index 0000000..402feee
Binary files /dev/null and b/components-wiki/images/fab/usage-without-icon.webp differ
diff --git a/components-wiki/images/focus/hero.gif b/components-wiki/images/focus/hero.gif
new file mode 100644
index 0000000..8cdc134
Binary files /dev/null and b/components-wiki/images/focus/hero.gif differ
diff --git a/components-wiki/images/focus/theming.gif b/components-wiki/images/focus/theming.gif
new file mode 100644
index 0000000..016ec98
Binary files /dev/null and b/components-wiki/images/focus/theming.gif differ
diff --git a/components-wiki/images/focus/usage-animation.gif b/components-wiki/images/focus/usage-animation.gif
new file mode 100644
index 0000000..343b95a
Binary files /dev/null and b/components-wiki/images/focus/usage-animation.gif differ
diff --git a/components-wiki/images/focus/usage-inward.gif b/components-wiki/images/focus/usage-inward.gif
new file mode 100644
index 0000000..8262638
Binary files /dev/null and b/components-wiki/images/focus/usage-inward.gif differ
diff --git a/components-wiki/images/focus/usage.gif b/components-wiki/images/focus/usage.gif
new file mode 100644
index 0000000..6f732e1
Binary files /dev/null and b/components-wiki/images/focus/usage.gif differ
diff --git a/components-wiki/images/icon/hero.gif b/components-wiki/images/icon/hero.gif
new file mode 100644
index 0000000..f2a6b76
Binary files /dev/null and b/components-wiki/images/icon/hero.gif differ
diff --git a/components-wiki/images/icon/theming.webp b/components-wiki/images/icon/theming.webp
new file mode 100644
index 0000000..a1b8f7b
Binary files /dev/null and b/components-wiki/images/icon/theming.webp differ
diff --git a/components-wiki/images/icon/usage.webp b/components-wiki/images/icon/usage.webp
new file mode 100644
index 0000000..f04014f
Binary files /dev/null and b/components-wiki/images/icon/usage.webp differ
diff --git a/components-wiki/images/icon/usage_filled.webp b/components-wiki/images/icon/usage_filled.webp
new file mode 100644
index 0000000..c198b6f
Binary files /dev/null and b/components-wiki/images/icon/usage_filled.webp differ
diff --git a/components-wiki/images/icon/usage_rounded.webp b/components-wiki/images/icon/usage_rounded.webp
new file mode 100644
index 0000000..89101ee
Binary files /dev/null and b/components-wiki/images/icon/usage_rounded.webp differ
diff --git a/components-wiki/images/icon/usage_sharp.webp b/components-wiki/images/icon/usage_sharp.webp
new file mode 100644
index 0000000..60924de
Binary files /dev/null and b/components-wiki/images/icon/usage_sharp.webp differ
diff --git a/components-wiki/images/iconbutton/buttons.webp b/components-wiki/images/iconbutton/buttons.webp
new file mode 100644
index 0000000..e0b79ef
Binary files /dev/null and b/components-wiki/images/iconbutton/buttons.webp differ
diff --git a/components-wiki/images/iconbutton/hero.webp b/components-wiki/images/iconbutton/hero.webp
new file mode 100644
index 0000000..25912cb
Binary files /dev/null and b/components-wiki/images/iconbutton/hero.webp differ
diff --git a/components-wiki/images/iconbutton/theming-filled-tonal.webp b/components-wiki/images/iconbutton/theming-filled-tonal.webp
new file mode 100644
index 0000000..0c6760d
Binary files /dev/null and b/components-wiki/images/iconbutton/theming-filled-tonal.webp differ
diff --git a/components-wiki/images/iconbutton/theming-filled.webp b/components-wiki/images/iconbutton/theming-filled.webp
new file mode 100644
index 0000000..39cb489
Binary files /dev/null and b/components-wiki/images/iconbutton/theming-filled.webp differ
diff --git a/components-wiki/images/iconbutton/theming-outlined.webp b/components-wiki/images/iconbutton/theming-outlined.webp
new file mode 100644
index 0000000..0c15f99
Binary files /dev/null and b/components-wiki/images/iconbutton/theming-outlined.webp differ
diff --git a/components-wiki/images/iconbutton/theming-standard.webp b/components-wiki/images/iconbutton/theming-standard.webp
new file mode 100644
index 0000000..333bfba
Binary files /dev/null and b/components-wiki/images/iconbutton/theming-standard.webp differ
diff --git a/components-wiki/images/iconbutton/usage-filled-tonal.webp b/components-wiki/images/iconbutton/usage-filled-tonal.webp
new file mode 100644
index 0000000..7cbe240
Binary files /dev/null and b/components-wiki/images/iconbutton/usage-filled-tonal.webp differ
diff --git a/components-wiki/images/iconbutton/usage-filled.webp b/components-wiki/images/iconbutton/usage-filled.webp
new file mode 100644
index 0000000..77d310f
Binary files /dev/null and b/components-wiki/images/iconbutton/usage-filled.webp differ
diff --git a/components-wiki/images/iconbutton/usage-outlined.webp b/components-wiki/images/iconbutton/usage-outlined.webp
new file mode 100644
index 0000000..910520d
Binary files /dev/null and b/components-wiki/images/iconbutton/usage-outlined.webp differ
diff --git a/components-wiki/images/iconbutton/usage-standard.webp b/components-wiki/images/iconbutton/usage-standard.webp
new file mode 100644
index 0000000..39cdc3f
Binary files /dev/null and b/components-wiki/images/iconbutton/usage-standard.webp differ
diff --git a/components-wiki/images/iconbutton/usage-toggle.webp b/components-wiki/images/iconbutton/usage-toggle.webp
new file mode 100644
index 0000000..c1248c6
Binary files /dev/null and b/components-wiki/images/iconbutton/usage-toggle.webp differ
diff --git a/components-wiki/images/iconbutton/usage.webp b/components-wiki/images/iconbutton/usage.webp
new file mode 100644
index 0000000..f3d90ae
Binary files /dev/null and b/components-wiki/images/iconbutton/usage.webp differ
diff --git a/components-wiki/images/list/hero.webp b/components-wiki/images/list/hero.webp
new file mode 100644
index 0000000..afa798c
Binary files /dev/null and b/components-wiki/images/list/hero.webp differ
diff --git a/components-wiki/images/list/theming-icon.webp b/components-wiki/images/list/theming-icon.webp
new file mode 100644
index 0000000..5888174
Binary files /dev/null and b/components-wiki/images/list/theming-icon.webp differ
diff --git a/components-wiki/images/list/theming-image.webp b/components-wiki/images/list/theming-image.webp
new file mode 100644
index 0000000..881591b
Binary files /dev/null and b/components-wiki/images/list/theming-image.webp differ
diff --git a/components-wiki/images/list/theming-list.webp b/components-wiki/images/list/theming-list.webp
new file mode 100644
index 0000000..23cd727
Binary files /dev/null and b/components-wiki/images/list/theming-list.webp differ
diff --git a/components-wiki/images/list/usage-icon.webp b/components-wiki/images/list/usage-icon.webp
new file mode 100644
index 0000000..39238a1
Binary files /dev/null and b/components-wiki/images/list/usage-icon.webp differ
diff --git a/components-wiki/images/list/usage-image.webp b/components-wiki/images/list/usage-image.webp
new file mode 100644
index 0000000..94b58d4
Binary files /dev/null and b/components-wiki/images/list/usage-image.webp differ
diff --git a/components-wiki/images/list/usage.webp b/components-wiki/images/list/usage.webp
new file mode 100644
index 0000000..d7c6d79
Binary files /dev/null and b/components-wiki/images/list/usage.webp differ
diff --git a/components-wiki/images/menu/hero.webp b/components-wiki/images/menu/hero.webp
new file mode 100644
index 0000000..692c78c
Binary files /dev/null and b/components-wiki/images/menu/hero.webp differ
diff --git a/components-wiki/images/menu/theming.webp b/components-wiki/images/menu/theming.webp
new file mode 100644
index 0000000..8be8dc7
Binary files /dev/null and b/components-wiki/images/menu/theming.webp differ
diff --git a/components-wiki/images/menu/usage-document.webp b/components-wiki/images/menu/usage-document.webp
new file mode 100644
index 0000000..8a50cf8
Binary files /dev/null and b/components-wiki/images/menu/usage-document.webp differ
diff --git a/components-wiki/images/menu/usage-fixed.webp b/components-wiki/images/menu/usage-fixed.webp
new file mode 100644
index 0000000..5a25838
Binary files /dev/null and b/components-wiki/images/menu/usage-fixed.webp differ
diff --git a/components-wiki/images/menu/usage-popover.webp b/components-wiki/images/menu/usage-popover.webp
new file mode 100644
index 0000000..0a86a82
Binary files /dev/null and b/components-wiki/images/menu/usage-popover.webp differ
diff --git a/components-wiki/images/menu/usage-submenu.webp b/components-wiki/images/menu/usage-submenu.webp
new file mode 100644
index 0000000..b4fee9b
Binary files /dev/null and b/components-wiki/images/menu/usage-submenu.webp differ
diff --git a/components-wiki/images/menu/usage.webp b/components-wiki/images/menu/usage.webp
new file mode 100644
index 0000000..1992cc6
Binary files /dev/null and b/components-wiki/images/menu/usage.webp differ
diff --git a/components-wiki/images/progress/hero.webp b/components-wiki/images/progress/hero.webp
new file mode 100644
index 0000000..4b25c52
Binary files /dev/null and b/components-wiki/images/progress/hero.webp differ
diff --git a/components-wiki/images/progress/theming-circular.webp b/components-wiki/images/progress/theming-circular.webp
new file mode 100644
index 0000000..0768c29
Binary files /dev/null and b/components-wiki/images/progress/theming-circular.webp differ
diff --git a/components-wiki/images/progress/theming-linear.webp b/components-wiki/images/progress/theming-linear.webp
new file mode 100644
index 0000000..6d80f50
Binary files /dev/null and b/components-wiki/images/progress/theming-linear.webp differ
diff --git a/components-wiki/images/radio/hero.webp b/components-wiki/images/radio/hero.webp
new file mode 100644
index 0000000..f91d0f5
Binary files /dev/null and b/components-wiki/images/radio/hero.webp differ
diff --git a/components-wiki/images/ripple/hero.gif b/components-wiki/images/ripple/hero.gif
new file mode 100644
index 0000000..ab85c43
Binary files /dev/null and b/components-wiki/images/ripple/hero.gif differ
diff --git a/components-wiki/images/ripple/theming.gif b/components-wiki/images/ripple/theming.gif
new file mode 100644
index 0000000..2f0bbb5
Binary files /dev/null and b/components-wiki/images/ripple/theming.gif differ
diff --git a/components-wiki/images/ripple/usage-unbounded.gif b/components-wiki/images/ripple/usage-unbounded.gif
new file mode 100644
index 0000000..5e5da90
Binary files /dev/null and b/components-wiki/images/ripple/usage-unbounded.gif differ
diff --git a/components-wiki/images/ripple/usage.gif b/components-wiki/images/ripple/usage.gif
new file mode 100644
index 0000000..fa4c416
Binary files /dev/null and b/components-wiki/images/ripple/usage.gif differ
diff --git a/components-wiki/images/select/hero.webp b/components-wiki/images/select/hero.webp
new file mode 100644
index 0000000..4fdd15e
Binary files /dev/null and b/components-wiki/images/select/hero.webp differ
diff --git a/components-wiki/images/select/theming-filled.webp b/components-wiki/images/select/theming-filled.webp
new file mode 100644
index 0000000..aae4799
Binary files /dev/null and b/components-wiki/images/select/theming-filled.webp differ
diff --git a/components-wiki/images/select/theming-outlined.webp b/components-wiki/images/select/theming-outlined.webp
new file mode 100644
index 0000000..5bcb944
Binary files /dev/null and b/components-wiki/images/select/theming-outlined.webp differ
diff --git a/components-wiki/images/select/usage.webp b/components-wiki/images/select/usage.webp
new file mode 100644
index 0000000..79553ef
Binary files /dev/null and b/components-wiki/images/select/usage.webp differ
diff --git a/components-wiki/images/slider/hero.webp b/components-wiki/images/slider/hero.webp
new file mode 100644
index 0000000..230323a
Binary files /dev/null and b/components-wiki/images/slider/hero.webp differ
diff --git a/components-wiki/images/slider/theming.webp b/components-wiki/images/slider/theming.webp
new file mode 100644
index 0000000..1ad491e
Binary files /dev/null and b/components-wiki/images/slider/theming.webp differ
diff --git a/components-wiki/images/switch/hero.webp b/components-wiki/images/switch/hero.webp
new file mode 100644
index 0000000..7c5bd97
Binary files /dev/null and b/components-wiki/images/switch/hero.webp differ
diff --git a/components-wiki/images/tabs/hero.webp b/components-wiki/images/tabs/hero.webp
new file mode 100644
index 0000000..20c4868
Binary files /dev/null and b/components-wiki/images/tabs/hero.webp differ
diff --git a/components-wiki/images/tabs/scrollable.webp b/components-wiki/images/tabs/scrollable.webp
new file mode 100644
index 0000000..74cc16b
Binary files /dev/null and b/components-wiki/images/tabs/scrollable.webp differ
diff --git a/components-wiki/images/tabs/theming.webp b/components-wiki/images/tabs/theming.webp
new file mode 100644
index 0000000..c07b5bd
Binary files /dev/null and b/components-wiki/images/tabs/theming.webp differ
diff --git a/components-wiki/images/tabs/usage.webp b/components-wiki/images/tabs/usage.webp
new file mode 100644
index 0000000..43f1105
Binary files /dev/null and b/components-wiki/images/tabs/usage.webp differ
diff --git a/components-wiki/images/textfield/hero.webp b/components-wiki/images/textfield/hero.webp
new file mode 100644
index 0000000..32291a2
Binary files /dev/null and b/components-wiki/images/textfield/hero.webp differ
diff --git a/components-wiki/images/textfield/theming-filled.webp b/components-wiki/images/textfield/theming-filled.webp
new file mode 100644
index 0000000..cc69a7d
Binary files /dev/null and b/components-wiki/images/textfield/theming-filled.webp differ
diff --git a/components-wiki/images/textfield/theming-outlined.webp b/components-wiki/images/textfield/theming-outlined.webp
new file mode 100644
index 0000000..75aa8a9
Binary files /dev/null and b/components-wiki/images/textfield/theming-outlined.webp differ
diff --git a/components-wiki/images/textfield/usage-char-counter.webp b/components-wiki/images/textfield/usage-char-counter.webp
new file mode 100644
index 0000000..3f6ca51
Binary files /dev/null and b/components-wiki/images/textfield/usage-char-counter.webp differ
diff --git a/components-wiki/images/textfield/usage-icons.webp b/components-wiki/images/textfield/usage-icons.webp
new file mode 100644
index 0000000..1b4c3ef
Binary files /dev/null and b/components-wiki/images/textfield/usage-icons.webp differ
diff --git a/components-wiki/images/textfield/usage-label.webp b/components-wiki/images/textfield/usage-label.webp
new file mode 100644
index 0000000..7244ac0
Binary files /dev/null and b/components-wiki/images/textfield/usage-label.webp differ
diff --git a/components-wiki/images/textfield/usage-prefix.webp b/components-wiki/images/textfield/usage-prefix.webp
new file mode 100644
index 0000000..b477834
Binary files /dev/null and b/components-wiki/images/textfield/usage-prefix.webp differ
diff --git a/components-wiki/images/textfield/usage-supporting-text.webp b/components-wiki/images/textfield/usage-supporting-text.webp
new file mode 100644
index 0000000..ec56be8
Binary files /dev/null and b/components-wiki/images/textfield/usage-supporting-text.webp differ
diff --git a/components-wiki/images/textfield/usage-textarea.webp b/components-wiki/images/textfield/usage-textarea.webp
new file mode 100644
index 0000000..753802b
Binary files /dev/null and b/components-wiki/images/textfield/usage-textarea.webp differ
diff --git a/components-wiki/images/textfield/usage-type.webp b/components-wiki/images/textfield/usage-type.webp
new file mode 100644
index 0000000..95e57b4
Binary files /dev/null and b/components-wiki/images/textfield/usage-type.webp differ
diff --git a/components-wiki/images/textfield/usage.webp b/components-wiki/images/textfield/usage.webp
new file mode 100644
index 0000000..c75ab9e
Binary files /dev/null and b/components-wiki/images/textfield/usage.webp differ
diff --git a/components-wiki/list.md b/components-wiki/list.md
new file mode 100644
index 0000000..3278a22
--- /dev/null
+++ b/components-wiki/list.md
@@ -0,0 +1,430 @@
+<!-- catalog-only-start --><!-- ---
+name: Lists
+dirname: list
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Lists
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-list -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/list/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Lists](https://m3.material.io/components/lists)<!-- {.external} --> are continuous,
+vertical indexes of text and images
+
+</catalog-component-header-title>
+
+<img class="hero" src="images/list/hero.webp" alt="CImage of a mobile phone screen with a Recipies page and a list recipies in a material list. The first item is Fresh baked breads with an image of someone holding bread on the left and a horizontal three dot menu on the right. Then Tacos with an image of tacos and the same three dot menu">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/lists) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/list)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname, previewHeight=600, editorHeight=600 %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+`<md-list>` is a container composed of `<md-list-item>`s of different types.
+
+<!-- no-catalog-start -->
+
+![Three items in a list. The first item says Apple as its headline. The second
+one says Banana in its headline as well as Banana is a yellow fruit as its sub
+header. The third list item says Cucumber in its headline and Cucumbers are long
+green fruits that are just as long as this multi-line description as its sub
+header which is on two lines.](images/list/usage.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/usage.html" -->
+
+```html
+<md-list style="max-width: 300px;">
+  <md-list-item>
+    Fruits
+  </md-list-item>
+  <md-divider></md-divider>
+  <md-list-item>
+    Apple
+</md-list-item>
+  <md-list-item>
+    Banana
+  </md-list-item>
+  <md-list-item>
+    <div slot="headline">Cucumber</div>
+    <div slot="supporting-text">Cucumbers are long green fruits that are just as long as this multi-line description</div>
+  </md-list-item>
+  <md-list-item
+      type="link"
+      href="https://google.com/search?q=buy+kiwis&tbm=shop"
+      target="_blank">
+    <div slot="headline">Shop for Kiwis</div>
+    <div slot="supporting-text">This will link you out in a new tab</div>
+    <md-icon slot="end">open_in_new</md-icon>
+  </md-list-item>
+</md-list>
+```
+
+## Icon Items
+
+Icons can be slotted into list-items' `start` or `end` slot.
+
+<!-- no-catalog-start -->
+
+![A list with three items and dividers separating each item. The first item has
+the Lit logo and the text Lit. The second item has the Polymer logo and the text
+Polymer. The third item has the Angular logo and the text
+Angular.](images/list/usage-icon.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/usage-icon.html" -->
+
+```html
+<md-list style="max-width: 300px">
+  <md-list-item>
+    Lit
+    <svg  slot="start" style="height: 24px" viewBox="0 0 160 200">
+      <path
+        fill="currentColor"
+        d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
+      />
+    </svg>
+  </md-list-item>
+  <md-divider></md-divider>
+  <md-list-item>
+    Polymer
+    <md-icon slot="start">polymer</md-icon>
+  </md-list-item>
+  <md-divider></md-divider>
+  <md-list-item>
+    Angular
+    <svg slot="start" style="height: 24px" viewBox="0 0 250 250">
+      <polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5   " />
+      <path
+        d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
+          l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"
+      />
+    </svg>
+  </md-list-item>
+</md-list>
+```
+
+## Image Items
+
+Images should be slotted into list-items' `start` slot.
+
+<!-- no-catalog-start -->
+
+![A list with three image items. The first item is a square picture of a cat and
+the text Cat. The second is a picture of a kitten with the text Kitty Cat. The
+third item is a square image of an older kitten with the text
+Cate.](images/list/usage-image.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/usage-image.html" -->
+
+```html
+<md-list style="max-width: 300px;">
+  <md-list-item>
+    Cat
+    <img slot="start" style="width: 56px" src="https://placekitten.com/112/112">
+  </md-list-item>
+  <md-divider></md-divider>
+  <md-list-item>
+    Kitty Cat
+    <img slot="start" style="width: 56px" src="https://placekitten.com/114/114">
+  </md-list-item>
+  <md-divider></md-divider>
+  <md-list-item>
+    Cate
+    <img slot="start" style="width: 56px" src="https://placekitten.com/116/116">
+  </md-list-item>
+</md-list>
+```
+
+## Accessibility
+
+List can have its `role` and `tabindex` set via the `role` and `tabindex`
+attributes, and list items can have their `role` and `tabindex` set via the
+`type` and `tabindex` attributes respectively.
+
+> NOTE: List item has a limited set of `type`s that can be set on it. This is to
+> ensure that your list remains accessible with all other properties and options
+> presented to it. See the `ListItemType` TypeScript type exported by list item
+> for the current accepted values.
+
+By default these values are set to
+[`role="list"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role)<!-- {.external} -->
+and `tabindex="-1"` for list, and
+[`role="listitem"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role)<!-- {.external} -->
+and `tabindex="0"` for list items.
+
+## Theming
+
+List and List Item supports
+[Material theming](https://github.com/material-components/material-web/blob/main/docs/theming/README.md)<!-- {.external} -->
+and can be customized in terms of color, typography, and shape.
+
+### List & List Item
+
+Token                                           | Default value
+----------------------------------------------- | -------------
+`--md-list-container-color`                     | `--md-sys-color-surface`
+`--md-list-item-container-shape`                | `--md-sys-shape-corner-none`
+`--md-list-item-label-text-color`               | `--md-sys-color-on-surface`
+`--md-list-item-supporting-text-color`          | `--md-sys-color-on-surface-variant`
+`--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`
+`--md-list-item-label-text-font`                | `--md-sys-typescale-label-large-font`
+`--md-list-item-supporting-text-font`           | `--md-sys-typescale-body-medium-font`
+`--md-list-item-trailing-supporting-text-font`  | `--md-sys-typescale-label-small-font`
+
+*   [All List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)
+    <!-- {.external} -->
+*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
+    <!-- {.external} -->
+
+### List & List Item Example
+
+<!-- no-catalog-start -->
+
+![Image of a list and list items of foods with their inventory stock number with
+a different theme applied](images/list/theming-list.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/theming-list.html" -->
+
+```html
+<style>
+  :root {
+    --md-list-container-color: #f4fbfa;
+    --md-list-item-label-text-color: #161d1d;
+    --md-list-item-supporting-text-color: #3f4948;
+    --md-list-item-trailing-supporting-text-color: #3f4948;
+    --md-list-item-label-text-font: system-ui;
+    --md-list-item-supporting-text-font: system-ui;
+    --md-list-item-trailing-supporting-text-font: system-ui;
+  }
+  [slot="trailing-supporting-text"] {
+    width: 30px;
+    text-align: end;
+  }
+</style>
+<md-list>
+  <md-list-item type="button">
+    <div slot="headline">Apple</div>
+    <div slot="supporting-text">In stock</div>
+    <div slot="trailing-supporting-text">+100</div>
+  </md-list-item>
+  <md-list-item type="button">
+    <div slot="headline">Banana</div>
+    <div slot="supporting-text">In stock</div>
+    <div slot="trailing-supporting-text">56</div>
+  </md-list-item>
+  <md-list-item type="button">
+    <div slot="headline">Cucumber</div>
+    <div slot="supporting-text">Low stock</div>
+    <div slot="trailing-supporting-text">5</div>
+  </md-list-item>
+</md-list>
+```
+
+### Icon List Item
+
+Token                                | Default value
+------------------------------------ | -----------------------------------
+`--md-list-item-leading-icon-color`  | `--md-sys-color-on-surface-variant`
+`--md-list-item-trailing-icon-color` | `--md-sys-color-on-surface-variant`
+`--md-list-item-leading-icon-size`   | `18px`
+`--md-list-item-trailing-icon-size`  | `24px`
+
+*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
+    <!-- {.external} -->
+
+### Icon List Item Example
+
+<!-- no-catalog-start -->
+
+![Image of a list and icon list items of food names with a different theme
+applied](images/list/theming-icon.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/theming-icon.html" -->
+
+```html
+<style>
+  :root {
+    background-color: #f4fbfa;
+    --md-list-container-color: #f4fbfa;
+    --md-list-item-label-text-color: #161d1d;
+    --md-list-item-leading-icon-color: #006a6a;
+    --md-list-item-trailing-icon-color: #006a6a;
+    --md-list-item-leading-icon-size: 20px;
+    --md-list-item-trailing-icon-size: 20px;
+  }
+  md-list-item.unhealthy {
+    --md-list-item-trailing-icon-color: #ba1a1a;
+  }
+</style>
+<md-list>
+  <md-list-item>
+    <div slot="headline">Eggs</div>
+    <md-icon slot="start">egg</md-icon>
+    <md-icon slot="end">recommend</md-icon>
+  </md-list-item>
+  <md-list-item class="unhealthy">
+    <div slot="headline">Ice Cream</div>
+    <md-icon slot="start">icecream</md-icon>
+    <md-icon slot="end">dangerous</md-icon>
+  </md-list-item>
+  <md-list-item>
+    <div slot="headline">Orange</div>
+    <md-icon slot="start">nutrition</md-icon>
+    <md-icon slot="end">recommend</md-icon>
+  </md-list-item>
+</md-list>
+```
+
+### Avatar List Item
+
+Token                                       | Default value
+------------------------------------------- | -------------
+`--md-list-item-leading-avatar-label-color` | `--md-sys-color-on-primary-container`
+`--md-list-item-leading-avatar-label-font`  | `--md-sys-typescale-title-medium-font`
+`--md-list-item-leading-avatar-color`       | `--md-sys-color-primary-container`
+`--md-list-item-leading-avatar-size`        | `40px`
+`--md-list-item-leading-avatar-shape`       | `--md-sys-shape-corner-full`
+
+*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
+    <!-- {.external} -->
+
+### Image List Item
+
+Token                                 | Default value
+------------------------------------- | -------------
+`--md-list-item-leading-image-height` | `56px`
+`--md-list-item-leading-image-width`  | `56px`
+`--md-list-item-leading-image-shape`  | `--md-sys-shape-corner-none`
+
+*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
+    <!-- {.external} -->
+
+### Image List Item Example
+
+<!-- no-catalog-start -->
+
+![Image of a list and image list items of cats with a different theme applied](images/list/theming-image.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/list/theming-image.html" -->
+
+```html
+<style>
+  :root {
+    background-color: #f4fbfa;
+    --md-list-container-color: #f4fbfa;
+    --md-list-item-label-text-color: #161d1d;
+    --md-list-item-leading-image-height: 50px;
+    --md-list-item-leading-image-width: 100px;
+    --md-list-item-leading-image-shape: 25px;
+  }
+  img {
+    width: 40px;
+  }
+</style>
+<md-list>
+  <md-list-item headline="Wide Cat">
+    <img slot="start" src="https://placekitten.com/200/100">
+  </md-list-item>
+  <md-list-item headline="Round kitty cat">
+    <img slot="start" src="https://placekitten.com/202/101">
+  </md-list-item>
+  <md-list-item headline="Softe cate">
+    <img slot="start" src="https://placekitten.com/212/106">
+  </md-list-item>
+</md-list>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdList <code>&lt;md-list&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `items` |  | `ListItem[]` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `activateNextItem` | _None_ | `ListItem` | Activates the next item in the list. If at the end of the list, the first item will be activated. |
+| `activatePreviousItem` | _None_ | `ListItem` | Activates the previous item in the list. If at the start of the list, the last item will be activated. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdListItem <code>&lt;md-list-item&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |
+| `type` | `type` | `string` | `'text'` | Sets the behavior of the list item, defaults to "text". Change to "link" or "button" for interactive items. |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `request-activation` | `Event` | Yes | Yes | Requests the list to set `tabindex=0` on the item and focus it. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/menu.md b/components-wiki/menu.md
new file mode 100644
index 0000000..32bacf4
--- /dev/null
+++ b/components-wiki/menu.md
@@ -0,0 +1,643 @@
+<!-- catalog-only-start --><!-- ---
+name: Menus
+dirname: menu
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Menus
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-menu -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/menu/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Menus](https://m3.material.io/components/menus)<!-- {.external} --> display a list of
+choices on a temporary surface.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    alt="A phone showing a vertical threedot, pressed, icon button and a menu floating below it with the following visible items: Revert, Settings, and Send Feedback"
+    src="images/menu/hero.webp">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/menus) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/menu)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname,previewHeight=1000,editorHeight=700 %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+When opened, menus position themselves to an anchor. Thus, either `anchor` or
+`anchorElement` must be supplied to `md-menu` before opening. Additionally, a
+shared parent of `position:relative` should be present around the menu and it's
+anchor, because the default menu is positioned relative to the anchor element.
+
+Menus also render menu items such as `md-menu-item` and handle keyboard
+navigation between `md-menu-item`s as well as typeahead functionality.
+Additionally, `md-menu` interacts with `md-menu-item`s to help you determine how
+a menu was closed. Listen for and inspect the `close-menu` custom event's
+`details` to determine what action and items closed the menu.
+
+<!-- no-catalog-start -->
+
+!["Two filled buttons next to each other. The first one says set with idref and
+the other says set with element ref. There is an opened menu anchored to the
+bottom of the right button with the items: Apple, Banana,
+Cucumber."](images/menu/usage.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/usage.html" -->
+
+```html
+<!-- Note the position: relative style -->
+<span style="position: relative">
+  <md-filled-button id="usage-anchor">Set with idref</md-filled-button>
+  <md-menu id="usage-menu" anchor="usage-anchor">
+    <md-menu-item>
+      <div slot="headline">Apple</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Banana</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Cucumber</div>
+    </md-menu-item>
+  </md-menu>
+</span>
+
+<script type="module">
+  // This example uses anchor as an ID reference
+  const anchorEl = document.body.querySelector('#usage-anchor');
+  const menuEl = document.body.querySelector('#usage-menu');
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+
+<span style="position: relative">
+  <md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button>
+  <md-menu id="usage-menu-2">
+    <md-menu-item>
+      <div slot="headline">Apple</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Banana</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Cucumber</div>
+    </md-menu-item>
+  </md-menu>
+</span>
+
+<script type="module">
+  // This example uses MdMenu.prototype.anchorElement to set the anchor as an
+  // HTMLElement reference.
+  const anchorEl = document.body.querySelector('#usage-anchor-2');
+  const menuEl = document.body.querySelector('#usage-menu-2');
+  menuEl.anchorElement = anchorEl;
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+```
+
+### Submenus
+
+You can compose `<md-menu>`s inside of an `<md-sub-menu>`'s `menu` slot, but
+first the `has-overflow` attribute must be set on the root `<md-menu>` to
+disable overflow scrolling and display the nested submenus.
+
+<!-- no-catalog-start -->
+
+!["A filled button that says menu with submenus. There is a menu anchored to the
+bottom of it with the first item selected that says fruits with A followed by a
+right arrow. To the right is anchored a submenu with 3 items, Apricot, Avocado,
+Apples. The Apples item is selected and has a left arrow before the text and
+another submenu anchored to it on the left. That menu has three items, Fuji,
+Granny Smith, and Red Delicious."](images/menu/usage-submenu.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/usage-submenu.html" -->
+
+```html
+<!-- Note the position: relative style -->
+<span style="position: relative">
+  <md-filled-button id="usage-submenu-anchor">
+    Menu with Submenus
+  </md-filled-button>
+  <!-- Note the has-overflow attribute -->
+  <md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
+    <md-sub-menu>
+      <md-menu-item slot="item">
+      <div slot="headline">Fruits with A</div>
+        <!-- Arrow icons are helpful affordances -->
+        <md-icon slot="end">arrow_right</md-icon>
+      </md-menu-item>
+      <!-- Submenu must be slotted into sub-menu's menu slot -->
+      <md-menu slot="menu">
+        <md-menu-item>
+          <div slot="headline">Apricot</div>
+        </md-menu-item>
+        <md-menu-item>
+          <div slot="headline">Avocado</div>
+        </md-menu-item>
+
+        <!-- Nest as many as you want and control menu anchoring -->
+        <md-sub-menu
+            menu-corner="start-end"
+            anchor-corner="start-start">
+          <md-menu-item slot="item">
+            <div slot="headline">Apples</div>
+            <!-- Arrow icons are helpful affordances -->
+            <md-icon slot="start">
+              arrow_left
+            </md-icon>
+          </md-menu-item>
+          <md-menu slot="menu">
+            <md-menu-item>
+              <div slot="headline">Fuji</div>
+            </md-menu-item>
+            <md-menu-item>
+              <div slot="headline" style="white-space: nowrap;">Granny Smith</div>
+            </md-menu-item>
+            <md-menu-item>
+              <div slot="headline" style="white-space: nowrap;">Red Delicious</div>
+            </md-menu-item>
+          </md-menu>
+
+        </md-sub-menu>
+      </md-menu>
+    </md-sub-menu>
+
+    <md-menu-item>
+      <div slot="headline">Banana</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Cucumber</div>
+    </md-menu-item>
+  </md-menu>
+</span>
+
+<script type="module">
+  const anchorEl = document.body.querySelector('#usage-submenu-anchor');
+  const menuEl = document.body.querySelector('#usage-submenu');
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+```
+
+### Popover-positioned menus
+
+Internally menu uses `position: absolute` by default. Though there are cases
+when the anchor and the node cannot share a common ancestor that is `position:
+relative`, or sometimes, menu will render below another item due to limitations
+with `position: absolute`.
+
+Popover-positioned menus use the native
+[Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)<!-- {.external} -->
+to render above all other content. This may fix most issues where the default
+menu positioning (`positioning="absolute"`) is not positioning as expected by
+rendering into the
+[top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)<!-- {.external} -->.
+
+> Warning: Popover API support was added in Chrome 114 and Safari 17. At the
+> time of writing, Firefox does not support the Popover API
+> ([see latest browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility)<!-- {.external} -->).
+>
+> For browsers that do not support the Popover API, `md-menu` will fall back to
+> using [fixed-positioned menus](#fixed-positioned-menus).
+
+<!-- no-catalog-start -->
+
+!["A filled button that says open popover menu. There is an open menu anchored
+to the bottom of the button with three items, Apple, Banana, and
+Cucumber."](images/menu/usage-popover.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/usage-popover.html" -->
+
+```html
+<!-- Note the lack of position: relative parent. -->
+<div style="margin: 16px;">
+  <md-filled-button id="usage-popover-anchor">Open popover menu</md-filled-button>
+</div>
+
+<!-- popover menus do not require a common ancestor with the anchor. -->
+<md-menu positioning="popover" id="usage-popover" anchor="usage-popover-anchor">
+  <md-menu-item>
+    <div slot="headline">Apple</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Banana</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Cucumber</div>
+  </md-menu-item>
+</md-menu>
+
+<script type="module">
+  const anchorEl = document.body.querySelector('#usage-popover-anchor');
+  const menuEl = document.body.querySelector('#usage-popover');
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+```
+
+### Fixed-positioned menus
+
+This is the fallback implementation of
+[popover-positioned menus](#popover-positioned-menus) and uses `position: fixed`
+rather than the default `position: absolute` which calculates its position
+relative to the window rather than the element.
+
+> Note: Fixed menu positions are positioned relative to the window and not the
+> document. This means that the menu will not scroll with the anchor as the page
+> is scrolled.
+
+<!-- no-catalog-start -->
+
+!["A filled button that says open fixed menu. There is an open menu anchored to
+the bottom of the button with three items, Apple, Banana, and
+Cucumber."](images/menu/usage-fixed.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/usage-fixed.html" -->
+
+```html
+<!-- Note the lack of position: relative parent. -->
+<div style="margin: 16px;">
+  <md-filled-button id="usage-fixed-anchor">Open fixed menu</md-filled-button>
+</div>
+
+<!-- Fixed menus do not require a common ancestor with the anchor. -->
+<md-menu positioning="fixed" id="usage-fixed" anchor="usage-fixed-anchor">
+  <md-menu-item>
+    <div slot="headline">Apple</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Banana</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Cucumber</div>
+  </md-menu-item>
+</md-menu>
+
+<script type="module">
+  const anchorEl = document.body.querySelector('#usage-fixed-anchor');
+  const menuEl = document.body.querySelector('#usage-fixed');
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+```
+
+### Document-positioned menus
+
+When set to `positioning="document"`, `md-menu` will position itself relative to
+the document as opposed to the element or the window from `"absolute"` and
+`"fixed"` values respectively.
+
+Document level positioning is useful for the following cases:
+
+-   There are no ancestor elements that produce a `relative` positioning
+    context.
+    -   `position: relative`
+    -   `position: absolute`
+    -   `position: fixed`
+    -   `transform: translate(x, y)`
+    -   etc.
+-   The menu is hoisted to the top of the DOM
+    -   The last child of `<body>`
+    -   [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+        <!-- {.external} -->
+-   The same `md-menu` is being reused and the contents and anchors are being
+    dynamically changed
+
+<!-- no-catalog-start -->
+
+!["A filled button that says open document menu. There is an open menu anchored
+to the bottom of the button with three items, Apple, Banana, and
+Cucumber."](images/menu/usage-document.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/usage-document.html" -->
+
+```html
+<!-- Note the lack of position: relative parent. -->
+<div style="margin: 16px;">
+  <md-filled-button id="usage-document-anchor">Open document menu</md-filled-button>
+</div>
+
+<!-- document menus do not require a common ancestor with the anchor. -->
+<md-menu positioning="document" id="usage-document" anchor="usage-document-anchor">
+  <md-menu-item>
+    <div slot="headline">Apple</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Banana</div>
+  </md-menu-item>
+  <md-menu-item>
+    <div slot="headline">Cucumber</div>
+  </md-menu-item>
+</md-menu>
+
+<script type="module">
+  const anchorEl = document.body.querySelector('#usage-document-anchor');
+  const menuEl = document.body.querySelector('#usage-document');
+
+  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
+</script>
+```
+
+## Accessibility
+
+By default Menu is set up to function as a `role="menu"` with children as
+`role="menuitem"`. A common use case for this is the menu button example, where
+you would need to add keyboard interactions to the button to open the menu
+([see W3C example](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)<!-- {.external} -->).
+
+Menu can also be adapted for other use cases.
+
+The role of the `md-list` inside the menu can be set with the `type` attribute.
+The role of each individual `md-menu-item` can also be set with the `type`
+attribute. Anything else slotted into the menu that is not a list item in most
+cases should be set to `role="none"`, and `md-divider` should have
+`role="separator"` and `tabindex="-1"`.
+
+```html
+<!--
+  A simplified example of an autocomplete component – missing javascript logic for interaction.
+-->
+<md-filled-text-field
+    id="textfield"
+    type="combobox"
+    aria-controls="menu"
+    aria-autocomplete="list"
+    aria-expanded="true"
+    aria-activedescendant="1"
+    value="Ala">
+</md-filled-text-field>
+<md-menu
+    id="menu"
+    anchor="textfield"
+    role="listbox"
+    aria-label="states"
+    open>
+  <md-menu-item type="option" id="0">
+    <div slot="headline">Alabama</div>
+  </md-menu-item>
+  <md-divider role="separator" tabindex="-1"></md-divider>
+  <md-menu-item type="option" id="1" selected aria-selected="true">
+    <div slot="headline">Alabama</div>
+  </md-menu-item>
+</md-menu>
+```
+
+## Theming
+
+Menus support [Material theming](../theming/README.md) and can be customized in
+terms of color. Additionally, `md-menu` composes `md-list`, and each menu item
+extends `md-list-item` ([see theming documentation](./list#theming)), so most
+the tokens for those components can also be used for Menu.
+
+### Menu Tokens
+
+Token                                     | Default value
+----------------------------------------- | ------------------------------------
+`--md-menu-container-color`               | `--md-sys-color-surface-container`
+`--md-menu-container-shape`               | `--md-sys-shape-corner-extra-small`
+`--md-menu-item-container-color`          | `--md-sys-color-surface-container`
+`--md-menu-item-selected-container-color` | `--md-sys-color-secondary-container`
+
+*   [Menu tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-menu.scss)
+    <!-- {.external} -->
+*   [Menu item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-menu-item.scss)
+    <!-- {.external} -->
+*   [List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)
+    <!-- {.external} -->
+*   [List item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+
+![A filled button with the text Themed menu. Attached is a 3 item menu with the
+items Apple, Banana, and Cucumber. They are both in a green hue and the menu has
+a sharp 0px border radius.](images/menu/theming.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/menu/theming.html" -->
+
+```html
+<style>
+  :root {
+    background-color: #f4fbfa;
+    --md-menu-container-color: #f4fbfa;
+    --md-menu-container-shape: 0px;
+    --md-sys-color-on-surface: #161d1d;
+    --md-sys-typescale-body-large-font: system-ui;
+  }
+  md-menu-item {
+    border-radius: 28px;
+  }
+  md-menu-item::part(focus-ring) {
+    border-radius: 28px;
+  }
+  /* Styles for button and not relevant to menu */
+  md-filled-button {
+    --md-sys-color-primary: #006a6a;
+    --md-sys-color-on-primary: #ffffff;
+  }
+</style>
+
+<span style="position: relative">
+  <md-filled-button id="theming-anchor">Themed menu</md-filled-button>
+  <md-menu id="theming-menu" anchor="theming-anchor">
+    <md-menu-item>
+      <div slot="headline">Apple</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Banana</div>
+    </md-menu-item>
+    <md-menu-item>
+      <div slot="headline">Cucumber</div>
+    </md-menu-item>
+  </md-menu>
+</span>
+
+<script type="module">
+  const anchorEl = document.body.querySelector("#theming-anchor");
+  const menuEl = document.body.querySelector("#theming-menu");
+
+  anchorEl.addEventListener("click", () => {
+    menuEl.show();
+  });
+</script>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdMenu <code>&lt;md-menu&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `anchor` | `anchor` | `string` | `''` | The ID of the element in the same root node in which the menu should align to. Overrides setting `anchorElement = elementReference`.<br>__NOTE__: anchor or anchorElement must either be an HTMLElement or resolve to an HTMLElement in order for menu to open. |
+| `positioning` | `positioning` | `string` | `'absolute'` | 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`.<br>__Examples for `position = 'fixed'`:__<br>- 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<br>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`.<br>__NOTE__: Fixed menus will not scroll with the page and will be fixed to the window instead.<br>__Examples for `position = 'document'`:__<br>- 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.<br>__Examples for `position = 'popover'`:__<br>- Your browser supports `popover`. - Most cases. Once popover is in browsers, this will become the default. |
+| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |
+| `hasOverflow` | `has-overflow` | `boolean` | `false` | Displays overflow content like a submenu. Not required in most cases when using `positioning="popover"`.<br>__NOTE__: This may cause adverse effects if you set `md-menu {max-height:...}` and have items overflowing items in the "y" direction. |
+| `open` | `open` | `boolean` | `false` | Opens the menu and makes it visible. Alternative to the `.show()` and `.close()` methods |
+| `xOffset` | `x-offset` | `number` | `0` | 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 -> right, negative -> left RTL: positive -> left, negative -> right |
+| `yOffset` | `y-offset` | `number` | `0` | Offsets the menu's block alignment from the anchor by the given number in pixels.<br>e.g. positive -> down, negative -> up |
+| `noHorizontalFlip` | `no-horizontal-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the horizontal axis when the surface would render outside the viewport. |
+| `noVerticalFlip` | `no-vertical-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the vertical axis when the surface would render outside the viewport. |
+| `typeaheadDelay` | `typeahead-delay` | `number` | `200` | The max time between the keystrokes of the typeahead menu behavior before it clears the typeahead buffer. |
+| `anchorCorner` | `anchor-corner` | `string` | `Corner.END_START` | The corner of the anchor which to align the menu in the standard logical property style of <block>-<inline> e.g. `'end-start'`.<br>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 |
+| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The corner of the menu which to align the anchor in the standard logical property style of <block>-<inline> e.g. `'start-start'`.<br>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 |
+| `stayOpenOnOutsideClick` | `stay-open-on-outside-click` | `boolean` | `false` | Keeps the user clicks outside the menu.<br>NOTE: clicking outside may still cause focusout to close the menu so see `stayOpenOnFocusout`. |
+| `stayOpenOnFocusout` | `stay-open-on-focusout` | `boolean` | `false` | 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 focusout handling altogether. |
+| `skipRestoreFocus` | `skip-restore-focus` | `boolean` | `false` | After closing, does not restore focus to the last focused element before the menu was opened. |
+| `defaultFocus` | `default-focus` | `string` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened.<br>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. |
+| `noNavigationWrap` | `no-navigation-wrap` | `boolean` | `false` | 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. |
+| `isSubmenu` |  | `boolean` | `false` | Whether or not the current menu is a submenu and should not handle specific navigation keys. |
+| `typeaheadController` |  | `TypeaheadController` | `function { ... }` | Handles typeahead navigation through the menu. |
+| `anchorElement` |  | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` |  |
+| `items` |  | `MenuItem[]` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `getBoundingClientRect` | _None_ | `DOMRect` |  |
+| `getClientRects` | _None_ | `DOMRectList` |  |
+| `close` | _None_ | `void` |  |
+| `show` | _None_ | `void` |  |
+| `activateNextItem` | _None_ | `MenuItem` | Activates the next item in the menu. If at the end of the menu, the first item will be activated. |
+| `activatePreviousItem` | _None_ | `MenuItem` | Activates the previous item in the menu. If at the start of the menu, the last item will be activated. |
+| `reposition` | _None_ | `void` | Repositions the menu if it is open.<br>Useful for the case where document or window-positioned menus have their anchors moved while open. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `opening` | `Event` | No | No | Fired before the opening animation begins |
+| `opened` | `Event` | No | No | Fired once the menu is open, after any animations |
+| `closing` | `Event` | No | No | Fired before the closing animation begins |
+| `closed` | `Event` | No | No | Fired once the menu is closed, after any animations |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdMenuItem <code>&lt;md-menu-item&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |
+| `type` | `type` | `string` | `'menuitem'` | Sets the behavior and role of the menu item, defaults to "menuitem". |
+| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
+| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
+| `keepOpen` | `keep-open` | `boolean` | `false` | Keeps the menu open if clicked or keyboard selected. |
+| `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened. |
+| `typeaheadText` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `close-menu` | `CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>` | Yes | Yes | Closes the encapsulating menu on closable interaction. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdSubMenu <code>&lt;md-sub-menu&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `anchorCorner` | `anchor-corner` | `string` | `Corner.START_END` | The anchorCorner to set on the submenu. |
+| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The menuCorner to set on the submenu. |
+| `hoverOpenDelay` | `hover-open-delay` | `number` | `400` | The delay between mouseenter and submenu opening. |
+| `hoverCloseDelay` | `hover-close-delay` | `number` | `400` | The delay between ponterleave and the submenu closing. |
+| `isSubMenu` | `md-sub-menu` | `boolean` | `true` | READONLY: self-identifies as a menu item and sets its identifying attribute |
+| `item` |  | `MenuItem` | `undefined` |  |
+| `menu` |  | `Menu` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `show` | _None_ | `Promise<void>` | Shows the submenu. |
+| `close` | _None_ | `Promise<void>` | Closes the submenu. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `deactivate-items` | `Event` | Yes | Yes | Requests the parent menu to deselect other items when a submenu opens. |
+| `request-activation` | `Event` | Yes | Yes | Requests the parent to make the slotted item focusable and focus the item. |
+| `deactivate-typeahead` | `Event` | Yes | Yes | Requests the parent menu to deactivate the typeahead functionality when a submenu opens. |
+| `activate-typeahead` | `Event` | Yes | Yes | Requests the parent menu to activate the typeahead functionality when a submenu closes. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/progress.md b/components-wiki/progress.md
new file mode 100644
index 0000000..e824ccc
--- /dev/null
+++ b/components-wiki/progress.md
@@ -0,0 +1,413 @@
+<!-- catalog-only-start --><!-- ---
+name: Progress indicators
+dirname: progress
+ssrOnly: true
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="end">
+<catalog-component-header-title slot="title">
+
+# Progress indicators
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-progress -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/progress/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Progress indicators](https://m3.material.io/components/progress-indicators)<!-- {.external} -->
+inform users about the status of ongoing processes, such as loading an app or
+submitting a form.
+
+There are two types of progress indicators: linear and circular.
+
+</catalog-component-header-title>
+
+<img
+    src="images/progress/hero.webp"
+    alt="Circular and linear progress indicators showing indetermine and determinate examples"
+    title="Progress indicators can be used to show indeterminate or determinate progress.">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/progress-indicators)
+    <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/progress)
+    <!-- {.external} -->
+
+## Types
+
+1.  [Circular progress](#circular-progress)
+1.  [Linear progress](#linear-progress)
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Progress indicators may be determinate to show progress, or indeterminate for an
+unspecified amount of progress.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center; gap: 16px"
+      title="Determinate and indeterminate progress indicators."
+      aria-label="Two circular and linear progress indicator examples, one with three quarters of the track full
+and the other
+indeterminate.">
+    <md-circular-progress value="0.75"></md-circular-progress>
+    <md-circular-progress indeterminate></md-circular-progress>
+    <div style="display: flex; flex-direction: column; align-self: stretch; justify-content: space-evenly;">
+      <md-linear-progress value="0.75"></md-linear-progress>
+      <md-linear-progress indeterminate></md-linear-progress>
+    </div>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-circular-progress value="0.75"></md-circular-progress>
+<md-circular-progress indeterminate></md-circular-progress>
+
+<md-linear-progress indeterminate></md-linear-progress>
+<md-linear-progress value="0.5"></md-linear-progress>
+```
+
+### Four colors
+
+Indeterminate progress indicators may cycle between four colors (primary,
+primary container, tertiary, and tertiary container by default).
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center; gap: 16px;"
+      title="A four-color indeterminate circular and linear progress indicator"
+      aria-label="Indeterminate progress indicators that cycles between four colors.">
+    <md-circular-progress four-color indeterminate></md-circular-progress>
+    <md-linear-progress four-color indeterminate></md-linear-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-circular-progress four-color indeterminate></md-circular-progress>
+<md-linear-progress four-color indeterminate></md-linear-progress>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to progress indicators to give them a descriptive name.
+
+```html
+<md-circular-progress value="0.5" aria-label="Page refresh progress"></md-circular-progress>
+
+<md-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress>
+```
+
+## Circular progress
+
+<!-- go/md-circular-progress -->
+
+Circular progress indicators display progress by animating along an invisible
+circular track in a clockwise direction.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center; gap: 16px;"
+      title="Circular progress indicators"
+      aria-label="An indeterminate and determinate circular progress indicator.">
+    <md-circular-progress indeterminate></md-circular-progress>
+    <md-circular-progress value="0.6"></md-circular-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-circular-progress indeterminate></md-circular-progress>
+<md-circular-progress value="0.6"></md-circular-progress>
+```
+
+## Linear progress
+
+<!-- go/md-linear-progress -->
+
+Linear progress indicators display progress by animating along the length of a
+fixed, visible track.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center; gap: 16px;"
+      title="Linear progress indicators"
+      aria-label="An indeterminate and determinate linear progress indicator.">
+    <md-linear-progress indeterminate></md-linear-progress>
+    <md-linear-progress value="0.6"></md-linear-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-linear-progress indeterminate></md-linear-progress>
+<md-linear-progress value="0.6"></md-linear-progress>
+```
+
+### Buffer
+
+Linear progress indicators may show a buffer to communicate both determinate and
+indeterminate progress. The progress bar and track represent known progress
+while the buffer dots represent unknown progress.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;"
+      title="Progress and buffer"
+      aria-label="A linear progress indicator with partial progress and an indeterminate buffer.">
+    <md-linear-progress value="0.5" buffer="0.8"></md-linear-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<md-linear-progress value="0.5" buffer="0.8"></md-linear-progress>
+```
+
+## Theming
+
+Progress indicators supports [Material theming](../theming/README.md) and can be
+customized in terms of color.
+
+### Circular progress tokens
+
+Token                                           | Default value
+----------------------------------------------- | ------------------------
+`--md-circular-progress-active-indicator-color` | `--md-sys-color-primary`
+`--md-circular-progress-size`                   | `48px`
+`--md-circular-progress-active-indicator-width` | `8.3333` (%)
+
+> Note: the active indicator width must be specified as a unit-less percentage
+> of the size.
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-circular-progress.scss)
+    <!-- {.external} -->
+
+### Circular progress example
+
+<!-- no-catalog-start -->
+
+![Image of a circular progress indicator with a different theme applied](images/progress/theming-circular.webp "Circular progress indicator theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Circular progress indicator theming example."
+      aria-label="Image of a circular progress indicator with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-circular-progress-size: 32px;
+        --md-circular-progress-active-indicator-width: 20;
+        --md-sys-color-primary: #006A6A;
+      }
+    </style>
+
+    <md-circular-progress value="0.5"></md-circular-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-circular-progress-size: 32px;
+  --md-circular-progress-active-indicator-width: 20;
+  --md-sys-color-primary: #006A6A;
+}
+</style>
+
+<md-circular-progress value="0.5"></md-circular-progress>
+```
+
+### Linear progress tokens
+
+Token                                          | Default value
+---------------------------------------------- | -------------
+`--md-linear-progress-track-color`             | `--md-sys-color-surface-container-highest`
+`--md-linear-progress-track-height`            | `4px`
+`--md-linear-progress-track-shape`             | `--md-sys-shape-corner-none`
+`--md-linear-progress-active-indicator-color`  | `--md-sys-color-primary`
+`--md-linear-progress-active-indicator-height` | `4px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-linear-progress.scss)
+    <!-- {.external} -->
+
+### Linear progress example
+
+<!-- no-catalog-start -->
+
+![Image of a linear progress indicator with a different theme applied](images/progress/theming-linear.webp "Linear progress theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="min-width:300px;"
+      class="styled-example"
+      aria-label="Image of a linear progress indicator with a different theme applied"
+      title="Linear progress theming example.">
+  <style>
+    .styled-example {
+      background-color: white;
+      --md-linear-progress-track-height: 8px;
+      --md-linear-progress-track-shape: 8px;
+      --md-linear-progress-active-indicator-height: 8px;
+      --md-sys-color-primary: #006A6A;
+      --md-sys-color-surface-container-highest: #DDE4E3;
+    }
+    .styled-example md-linear-progress {
+      flex-grow: 1;
+    }
+  </style>
+  <md-linear-progress value="0.5"></md-linear-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+```html
+<style>
+:root {
+  --md-linear-progress-track-height: 8px;
+  --md-linear-progress-track-shape: 8px;
+  --md-linear-progress-active-indicator-height: 8px;
+  --md-sys-color-primary: #006A6A;
+  --md-sys-color-surface-container-highest: #DDE4E3;
+}
+</style>
+
+<md-linear-progress value="0.5"></md-linear-progress>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+### MdLinearProgress <code>&lt;md-linear-progress&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `buffer` | `buffer` | `number` | `0` | Buffer amount to display, a fraction between 0 and `max`. If the value is 0 or negative, the buffer is not displayed. |
+| `value` | `value` | `number` | `0` | Progress to display, a fraction between 0 and `max`. |
+| `max` | `max` | `number` | `1` | Maximum progress to display, defaults to 1. |
+| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not to display indeterminate progress, which gives no indication to how long an activity will take. |
+| `fourColor` | `four-color` | `boolean` | `false` | Whether or not to render indeterminate mode using 4 colors instead of one. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdCircularProgress <code>&lt;md-circular-progress&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `number` | `0` | Progress to display, a fraction between 0 and `max`. |
+| `max` | `max` | `number` | `1` | Maximum progress to display, defaults to 1. |
+| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not to display indeterminate progress, which gives no indication to how long an activity will take. |
+| `fourColor` | `four-color` | `boolean` | `false` | Whether or not to render indeterminate mode using 4 colors instead of one. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/radio.md b/components-wiki/radio.md
new file mode 100644
index 0000000..3722a99
--- /dev/null
+++ b/components-wiki/radio.md
@@ -0,0 +1,210 @@
+<!-- catalog-only-start --><!-- ---
+name: Radio
+dirname: radio
+ssrOnly: true
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Radio button
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- github-only-start -->
+
+<!-- go/md-radio -->
+
+<!-- [TOC] -->
+
+<!-- github-only-end -->
+
+[Radio buttons](https://m3.material.io/components/radio-button)<!-- {.external} --> let
+people select one option from a set of options.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    src="images/radio/hero.webp"
+    alt="A list of items with radio buttons and one selected."
+    title="Radio buttons">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/radio-button) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/radio)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Radios behave like
+[`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)<!-- {.external} -->
+elements and form a group with the same `name` attribute. Only one radio can be
+selected in a group.
+
+Radios can be pre-selected by adding a `checked` attribute.
+
+Add a `value` to identify which radio is selected in a form.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<form>
+  <md-radio name="animals" value="cats"></md-radio>
+  <md-radio name="animals" value="dogs"></md-radio>
+  <md-radio name="animals" value="birds" checked></md-radio>
+</form>
+```
+
+### Label
+
+Associate a label with a radio using the `<label>` element.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-radio id="cats-radio" name="animals" value="cats"></md-radio>
+<label for="cats-radio">Cats</label>
+
+<md-radio id="dogs-radio" name="animals" value="dogs"></md-radio>
+<label for="dogs-radio">Dogs</label>
+```
+
+> Note: do not wrap radios inside of a `<label>`, which stops screen readers
+> from correctly announcing the number of radios in a group.
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to radios without labels or radios whose labels need to be more
+descriptive.
+
+Place radios inside a
+[`role="radiogroup"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role)<!-- {.external} -->.
+Radio groups must display a label, either with `aria-label` or
+`aria-labelledby`.
+
+```html
+<div role="radiogroup" aria-labelledby="group-title">
+  <h3 id="group-title">Starting position</h3>
+  <div>
+    <md-radio id="first-radio" name="group" value="1"
+        aria-label="First"></md-radio>
+    <label for="first-radio">1st</label>
+  </div>
+  <div>
+    <md-radio id="second-radio" name="group" value="2"
+        aria-label="Second"></md-radio>
+    <label for="second-radio">2nd</label>
+  </div>
+</div>
+```
+
+> Note: radios are not automatically labelled by `<label>` elements and always
+> need an `aria-label`. See b/294081528.
+
+## Theming
+
+Radios support [Material theming](../theming/README.md) and can be customized in
+terms of color.
+
+### Tokens
+
+Token                            | Default value
+-------------------------------- | -----------------------------------
+`--md-radio-icon-color`          | `--md-sys-color-on-surface-variant`
+`--md-radio-selected-icon-color` | `--md-sys-color-primary`
+`--md-radio-icon-size`           | `20px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-radio.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<style>
+:root {
+  --md-sys-color-primary: #006A6A;
+  --md-radio-icon-size: 16px;
+}
+</style>
+
+<md-radio name="group"></md-radio>
+<md-radio name="group" checked></md-radio>
+<md-radio name="group"></md-radio>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdRadio <code>&lt;md-radio&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `required` | `required` | `boolean` | `false` | Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. |
+| `value` | `value` | `string` | `'on'` | The element value to use in form submission when checked. |
+| `checked` | `checked` | `boolean` | `undefined` |  |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | Yes | No | Dispatched when the value changes from user interaction. |
+| `change` | `Event` | Yes | Yes | Dispatched when the value changes from user interaction. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/ripple.md b/components-wiki/ripple.md
new file mode 100644
index 0000000..79f67ed
--- /dev/null
+++ b/components-wiki/ripple.md
@@ -0,0 +1,252 @@
+<!-- catalog-only-start --><!-- ---
+name: Ripple
+dirname: ripple
+ssrOnly: true
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Ripple
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-ripple -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/ripple/)<!-- {.external} -->**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+Ripples are
+[state layers](https://m3.material.io/foundations/interaction/states/state-layers)<!-- {.external} -->
+used to communicate the status of a component or interactive element.
+
+A state layer is a semi-transparent covering on an element that indicates its
+state. A layer can be applied to an entire element or in a circular shape.
+
+</catalog-component-header-title>
+
+<img src="images/ripple/hero.gif" alt="Two containers that display a bounded and unbounded ripple on interaction."
+title="A bounded and unbounded ripple.">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/foundations/interaction/states/state-layers)
+    <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/ripple)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Ripples display on hover and press pointer interactions. They may be attached to
+a control in one of three ways.
+
+<!-- no-catalog-start -->
+
+![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif "A bounded ripple.")
+
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+1.  Attached to the parent element
+
+    ```html
+    <style>
+      .container {
+        position: relative;
+      }
+    </style>
+    <button class="container">
+      <md-ripple></md-ripple>
+    </button>
+    ```
+
+1.  Attached to a referenced element
+
+    ```html
+    <style>
+      .container {
+        position: relative;
+      }
+    </style>
+    <div class="container">
+      <md-ripple for="control"></md-ripple>
+      <input id="control">
+    </div>
+    ```
+
+1.  Attached imperatively
+
+    ```html
+    <style>
+      .container {
+        position: relative;
+      }
+    </style>
+    <div class="container">
+      <md-ripple id="ripple"></md-ripple>
+      <button id="ripple-control"></button>
+    </div>
+    <script>
+      const ripple = document.querySelector('#ripple');
+      const control = document.querySelector('#ripple-control');
+      ripple.attach(control);
+    </script>
+    ```
+
+> Note: ripples must be placed within a `position: relative` container.
+
+### Unbounded
+
+To create an unbounded circular ripple centered on an element, use the following styles.
+
+```css
+.container {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  position: relative;
+}
+
+md-ripple.unbounded {
+  border-radius: 50%;
+  inset: unset;
+  height: var(--state-layer-size);
+  width: var(--state-layer-size);
+}
+```
+
+<!-- no-catalog-start -->
+
+![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif "An unbounded ripple.")
+
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<style>
+  .container {
+    border-radius: 50%;
+    height: 32px;
+    width: 32px;
+
+    /* Needed for unbounded ripple */
+    display: flex;
+    place-content: center;
+    place-items: center;
+    position: relative;
+  }
+
+  md-ripple.unbounded {
+    /* Needed for unbounded ripple */
+    border-radius: 50%;
+    inset: unset;
+    height: 64px;
+    width: 64px;
+  }
+</style>
+<button class="container">
+  <md-ripple class="unbounded"></md-ripple>
+</button>
+```
+
+## Accessibility
+
+Ripples are visual components and do not have assistive technology requirements.
+
+## Theming
+
+Ripples support [Material theming](../theming/README.md) and can be customized
+in terms of color.
+
+### Tokens
+
+Token                    | Default value
+------------------------ | ------------------------
+`--md-ripple-hover-color` | `--md-sys-color-on-surface`
+`--md-ripple-pressed-color` | `--md-sys-color-on-surface`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-ripple.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+
+![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.")
+
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<style>
+:root {
+  --md-sys-color-primary: #006A6A;
+  --md-ripple-hover-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-color: var(--md-sys-color-primary);
+}
+
+.container {
+  position: relative;
+}
+</style>
+<button class="container">
+  <md-ripple></md-ripple>
+</button>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdRipple <code>&lt;md-ripple&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the ripple. |
+| `htmlFor` |  | `string` | `undefined` |  |
+| `control` |  | `HTMLElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `attach` | `control` | `void` |  |
+| `detach` | _None_ | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/select.md b/components-wiki/select.md
new file mode 100644
index 0000000..7fd716f
--- /dev/null
+++ b/components-wiki/select.md
@@ -0,0 +1,365 @@
+<!-- catalog-only-start --><!-- ---
+name: Select
+dirname: select
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Select
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'material-web-team' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-select -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/select/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Select menus](https://m3.material.io/components/menus/overview#b1704de4-94b7-4177-9e96-b677ae767cb4)<!-- {.external} -->
+display a list of choices on temporary surfaces and display the currently
+selected menu item above the menu.
+
+</catalog-component-header-title>
+
+<img class="hero" src="images/select/hero.webp" alt="A textfield containing the text Item 2, with a dropdown menu containing Item 1, Item 2, and Item 3.">
+
+</catalog-component-header>
+
+*   Design article (*coming soon*)
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/select)
+    <!-- {.external} -->
+
+## Usage
+
+Select (also referred to as a dropdown menu) allows choosing a value from a
+fixed list of available options. It is analogous to the native HTML
+[`<select>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)<!-- {.external} -->.
+
+<!-- no-catalog-start -->
+
+![Example usage of an outlined dropdown menu and a filled dropdown menu.](images/select/usage.webp "An outlined dropdown menu filled with Apple, and a filled dropdown menu.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/select/usage.html" -->
+
+```html
+<md-outlined-select>
+  <md-select-option aria-label="blank"></md-select-option>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="apricot">
+    <div slot="headline">Apricot</div>
+  </md-select-option>
+</md-outlined-select>
+
+<md-filled-select>
+  <md-select-option aria-label="blank"></md-select-option>
+  <md-select-option value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="apricot">
+    <div slot="headline">Apricot</div>
+  </md-select-option>
+</md-filled-select>
+```
+
+### Required select
+
+Indicate that a selection is mandatory by adding the `required` attribute.
+
+```html
+<md-filled-select required>
+  <md-select-option value="one">
+    <div slot="headline">One</div>
+  </md-select-option>
+  <md-select-option value="two">
+    <div slot="headline">Two</div>
+  </md-select-option>
+</md-filled-select>
+```
+
+<!--
+## Accessibility
+
+*Insert a 1-2 sentence description of a common accessibility scenario, followed
+by a code snippet. Do not include a rendered image for accessibility examples.*
+
+```html
+<component-name aria-label="Example">
+```
+
+*Repeat with additional examples as needed to explain how to make the component
+accessible.* -->
+
+## Theming
+
+Select supports
+[Material theming](https://github.com/material-components/material-web/blob/main/docs/theming/README.md)<!-- {.external} -->
+and can be customized in terms of color, typography, and shape.
+
+### Filled Select tokens
+
+Token                                            | Default value
+------------------------------------------------ | -------------
+`--md-filled-select-text-field-container-color`  | `--md-sys-color-surface-container-highest`
+`--md-filled-select-text-field-container-shape`  | `--md-sys-shape-corner-extra-small`
+`--md-filled-select-text-field-input-text-color` | `--md-sys-color-on-surface`
+`--md-filled-select-text-field-input-text-font`  | `--md-sys-typescale-body-large-font`
+
+*   [Filled Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-select.scss)
+    <!-- {.external} -->
+
+To theme the select's dropdown menu, use the `md-menu` component tokens on the
+`::part(menu)` selector.
+
+### Filled Select example
+
+<!-- no-catalog-start -->
+
+![Image of a filled select with a different theme applied](images/select/theming-filled.webp "Filled select theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/select/theming-filled.html" -->
+
+```html
+<style>
+:root {
+  --md-filled-select-text-field-container-shape: 0px;
+  --md-filled-select-text-field-container-color: #f7faf9;
+  --md-filled-select-text-field-input-text-color: #005353;
+  --md-filled-select-text-field-input-text-font: system-ui;
+}
+
+md-filled-select::part(menu) {
+  --md-menu-container-color: #f4fbfa;
+  --md-menu-container-shape: 0px;
+}
+</style>
+
+<md-filled-select>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="tomato">
+    <div slot="headline">Tomato</div>
+  </md-select-option>
+</md-filled-select>
+```
+
+### Outlined Select tokens
+
+Token                                              | Default value
+-------------------------------------------------- | -------------
+`--md-outlined-select-text-field-outline-color`    | `--md-sys-color-outline`
+`--md-outlined-select-text-field-container-shape`  | `--md-sys-shape-corner-extra-small`
+`--md-outlined-select-text-field-input-text-color` | `--md-sys-color-on-surface`
+`--md-outlined-select-text-field-input-text-font`  | `--md-sys-typescale-body-large-font`
+
+*   [Outlined Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-select.scss)
+    <!-- {.external} -->
+
+### Outlined Select example
+
+<!-- no-catalog-start -->
+
+![Image of a outlined select with a different theme applied](images/select/theming-outlined.webp "Outlined select theming example.")
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/select/theming-outlined.html" -->
+
+```html
+<style>
+:root {
+  --md-outlined-select-text-field-outline-color: #6e7979;
+  --md-outlined-select-text-field-container-shape: 0px;
+  --md-outlined-select-text-field-input-text-color: #005353;
+  --md-outlined-select-text-field-input-text-font: system-ui;
+}
+
+md-outlined-select::part(menu) {
+  --md-menu-container-color: #f4fbfa;
+  --md-menu-container-shape: 0px;
+}
+</style>
+
+<md-outlined-select>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="tomato">
+    <div slot="headline">Tomato</div>
+  </md-select-option>
+</md-outlined-select>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdFilledSelect <code>&lt;md-filled-select&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `quick` | `quick` | `boolean` | `false` | Opens the menu synchronously with no animation. |
+| `required` | `required` | `boolean` | `false` | Whether or not the select is required. |
+| `errorText` | `error-text` | `string` | `''` | 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.<br>This error message overrides the error message displayed by `reportValidity()`. |
+| `label` | `label` | `string` | `''` | The floating label for the field. |
+| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |
+| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |
+| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |
+| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute.<br>position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
+| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |
+| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |
+| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
+| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |
+| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
+| `value` | `value` | `string` | `undefined` |  |
+| `selectedIndex` | `selected-index` | `number` | `undefined` |  |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+| `options` |  | `SelectOption[]` | `undefined` |  |
+| `selectedOptions` |  | `SelectOption[]` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `select` | `value` | `void` | Selects an option given the value of the option, and updates MdSelect's value. |
+| `selectIndex` | `index` | `void` | Selects an option given the index of the option, and updates MdSelect's value. |
+| `reset` | _None_ | `void` | Reset the select to its default value. |
+| `getUpdateComplete` | _None_ | `Promise<boolean>` |  |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+| `click` | _None_ | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+| `opening` | `Event` | No | No | Fired when the select's menu is about to open. |
+| `opened` | `Event` | No | No | Fired when the select's menu has finished animations and opened. |
+| `closing` | `Event` | No | No | Fired when the select's menu is about to close. |
+| `closed` | `Event` | No | No | Fired when the select's menu has finished animations and closed. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdOutlinedSelect <code>&lt;md-outlined-select&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `quick` | `quick` | `boolean` | `false` | Opens the menu synchronously with no animation. |
+| `required` | `required` | `boolean` | `false` | Whether or not the select is required. |
+| `errorText` | `error-text` | `string` | `''` | 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.<br>This error message overrides the error message displayed by `reportValidity()`. |
+| `label` | `label` | `string` | `''` | The floating label for the field. |
+| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |
+| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |
+| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |
+| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute.<br>position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
+| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |
+| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |
+| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
+| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |
+| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
+| `value` | `value` | `string` | `undefined` |  |
+| `selectedIndex` | `selected-index` | `number` | `undefined` |  |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+| `options` |  | `SelectOption[]` | `undefined` |  |
+| `selectedOptions` |  | `SelectOption[]` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `select` | `value` | `void` | Selects an option given the value of the option, and updates MdSelect's value. |
+| `selectIndex` | `index` | `void` | Selects an option given the index of the option, and updates MdSelect's value. |
+| `reset` | _None_ | `void` | Reset the select to its default value. |
+| `getUpdateComplete` | _None_ | `Promise<boolean>` |  |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+| `click` | _None_ | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+| `opening` | `Event` | No | No | Fired when the select's menu is about to open. |
+| `opened` | `Event` | No | No | Fired when the select's menu has finished animations and opened. |
+| `closing` | `Event` | No | No | Fired when the select's menu is about to close. |
+| `closed` | `Event` | No | No | Fired when the select's menu has finished animations and closed. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdSelectOption <code>&lt;md-select-option&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |
+| `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened. |
+| `value` | `value` | `string` | `''` | Form value of the option. |
+| `type` |  | `string` | `'option' as const` |  |
+| `typeaheadText` |  | `string` | `undefined` |  |
+| `displayText` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `close-menu` | `CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>` | Yes | Yes | Closes the encapsulating menu on closable interaction. |
+| `request-selection` | `Event` | Yes | Yes | Requests the parent md-select to select this element (and deselect others if single-selection) when `selected` changed to `true`. |
+| `request-deselection` | `Event` | Yes | Yes | Requests the parent md-select to deselect this element when `selected` changed to `false`. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/slider.md b/components-wiki/slider.md
new file mode 100644
index 0000000..4f50913
--- /dev/null
+++ b/components-wiki/slider.md
@@ -0,0 +1,217 @@
+<!-- catalog-only-start --><!-- ---
+name: Sliders
+dirname: slider
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Sliders
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'material-web-team' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-slider -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/slider/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Sliders](https://m3.material.io/components/sliders)<!-- {.external} --> allow users to
+view and select a value (or range) along a track. They're ideal for adjusting
+settings such as volume and brightness, or for applying image filters.
+
+Sliders can use icons or labels to represent a numeric or relative scale.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    alt="Sound settings screen with sliders labeled 'Media volume', and 'Call volume'."
+    src="images/slider/hero.webp">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/sliders) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/slider)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname, previewHeight=650 %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Sliders may be continuous or discrete, and may also represent a range.
+
+```html
+<md-slider></md-slider>
+<md-slider ticks value="50"></md-slider>
+<md-slider range value-start="25" value-end="75"></md-slider>
+```
+
+### Continuous
+
+Allows users to select a value along a subjective range.
+
+```html
+<md-slider min="0" max="100" value="50"></md-slider>
+```
+
+### Discrete
+
+Allows users to select a specific value from a predetermined range. Tick marks
+may be used to indicate available values.
+
+```html
+<md-slider step="5" ticks min="0" max="20"></md-slider>
+```
+
+### Range
+
+A range slider has two handles, and indicates a minimum and maximum value in a
+range.
+
+```html
+<md-slider range value-start="25" value-end="50"></md-slider>
+```
+
+### Value label
+
+A value label displays the specific value that corresponds with the handle's
+placement.
+
+The label appears when the handle is selected. For range sliders, labels appear
+when either handle is selected.
+
+```html
+<md-slider labeled></md-slider>
+```
+
+<!-- TODO(b/318567101): ## Accessibility -->
+
+## Theming
+
+Slider supports [Material theming](../theming/README.md) and can be customized
+in terms of color and shape.
+
+### Tokens
+
+Token                              | Default value
+---------------------------------- | ------------------------------------------
+`--md-slider-active-track-color`   | `--md-sys-color-primary`
+`--md-slider-active-track-shape`   | `--md-sys-shape-corner-full`
+`--md-slider-inactive-track-color` | `--md-sys-color-surface-container-highest`
+`--md-slider-inactive-track-shape` | `--md-sys-shape-corner-full`
+`--md-slider-handle-color`         | `--md-sys-color-primary`
+`--md-slider-handle-shape`         | `--md-sys-shape-corner-full`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-slider.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+
+![Image of a slider with a different theme applied](images/slider/theming.webp "Slider theming example.")
+
+<!-- no-catalog-end -->
+
+```html
+<style>
+:root {
+  /* System tokens */
+  --md-sys-color-primary: #006A6A;
+
+  /* Component tokens */
+  --md-slider-handle-shape: 0px;
+}
+</style>
+
+<md-slider
+  range
+  value-start="25"
+  value-end="75"
+  ticks
+  step="5"
+></md-slider>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdSlider <code>&lt;md-slider&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `min` | `min` | `number` | `0` | The slider minimum value |
+| `max` | `max` | `number` | `100` | The slider maximum value |
+| `value` | `value` | `number` | `undefined` | The slider value displayed when range is false. |
+| `valueStart` | `value-start` | `number` | `undefined` | The slider start value displayed when range is true. |
+| `valueEnd` | `value-end` | `number` | `undefined` | The slider end value displayed when range is true. |
+| `valueLabel` | `value-label` | `string` | `''` | An optional label for the slider's value displayed when range is false; if not set, the label is the value itself. |
+| `valueLabelStart` | `value-label-start` | `string` | `''` | An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself. |
+| `valueLabelEnd` | `value-label-end` | `string` | `''` | An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself. |
+| `ariaLabelStart` | `aria-label-start` | `string` | `''` | Aria label for the slider's start handle displayed when range is true. |
+| `ariaValueTextStart` | `aria-valuetext-start` | `string` | `''` | Aria value text for the slider's start value displayed when range is true. |
+| `ariaLabelEnd` | `aria-label-end` | `string` | `''` | Aria label for the slider's end handle displayed when range is true. |
+| `ariaValueTextEnd` | `aria-valuetext-end` | `string` | `''` | Aria value text for the slider's end value displayed when range is true. |
+| `step` | `step` | `number` | `1` | The step between values. |
+| `ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks. |
+| `labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated. |
+| `range` | `range` | `boolean` | `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. |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+| `nameStart` |  | `string` | `undefined` |  |
+| `nameEnd` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/switch.md b/components-wiki/switch.md
new file mode 100644
index 0000000..1955b1c
--- /dev/null
+++ b/components-wiki/switch.md
@@ -0,0 +1,220 @@
+<!-- catalog-only-start --><!-- ---
+name: Switch
+dirname: switch
+-----><!-- catalog-only-end -->
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Switch
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-switch -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/switch/).**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Switches](https://m3.material.io/components/switch)<!-- {.external} --> toggle the state
+of an item on or off.
+
+</catalog-component-header-title>
+
+<img
+    class="hero"
+    src="images/switch/hero.webp"
+    alt="Two switches on a settings page for Wi-Fi and Bluetooth. The first is on and the second is off."
+    title="Switches on a settings page.">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/switch) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/switch)
+    <!-- {.external} -->
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Switches are similar to checkboxes, and can be unselected or selected.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-switch></md-switch>
+<md-switch selected></md-switch>
+```
+
+### Icons
+
+Icons can be used to visually emphasize the switch's selected state. Switches
+can choose to display both icons or only selected icons.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-switch icons></md-switch>
+<md-switch icons selected></md-switch>
+
+<md-switch icons show-only-selected-icon></md-switch>
+<md-switch icons show-only-selected-icon selected></md-switch>
+```
+
+### Label
+
+Associate a label with a switch using the `<label>` element.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<label>
+  Wi-Fi
+  <md-switch selected></md-switch>
+</label>
+
+<label for="switch">Bluetooth</label>
+<md-switch id="switch"></md-switch>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to switches without labels or switches whose labels need to be more
+descriptive.
+
+```html
+<md-switch aria-label="Lights"></md-switch>
+
+<label>
+  All
+  <md-switch aria-label="All notifications"></md-switch>
+</label>
+```
+
+> Note: switches are not automatically labelled by `<label>` elements and always
+> need an `aria-label`. See b/294081528.
+
+## Theming
+
+Switches supports [Material theming](../theming/README.md) and can be customized
+in terms of color and shape.
+
+### Tokens
+
+Token                               | Default value
+----------------------------------- | ------------------------------------------
+`--md-switch-handle-color`          | `--md-sys-color-outline`
+`--md-switch-handle-shape`          | `--md-sys-shape-corner-full`
+`--md-switch-track-color`           | `--md-sys-color-surface-container-highest`
+`--md-switch-track-shape`           | `--md-sys-shape-corner-full`
+`--md-switch-selected-handle-color` | `--md-sys-color-on-primary`
+`--md-switch-selected-track-color`  | `--md-sys-color-primary`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-switch.scss)
+    <!-- {.external} -->
+
+### Example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<style>
+  :root {
+    /* System tokens */
+    --md-sys-color-primary: #006a6a;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-outline: #6f7979;
+    --md-sys-color-surface-container-highest: #dde4e3;
+
+    /* Component tokens */
+    --md-switch-handle-shape: 0px;
+    --md-switch-track-shape: 0px;
+  }
+</style>
+
+<md-switch></md-switch>
+<md-switch selected></md-switch>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdSwitch <code>&lt;md-switch&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `selected` | `selected` | `boolean` | `false` | Puts the switch in the selected state and sets the form submission value to the `value` property. |
+| `icons` | `icons` | `boolean` | `false` | Shows both the selected and deselected icons. |
+| `showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property. |
+| `required` | `required` | `boolean` | `false` | 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 |
+| `value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`. |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `input` | `InputEvent` | No | No | Fired whenever `selected` changes due to user interaction (bubbles and composed). |
+| `change` | `Event` | No | No | Fired whenever `selected` changes due to user interaction (bubbles). |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/tabs.md b/components-wiki/tabs.md
new file mode 100644
index 0000000..d1699b3
--- /dev/null
+++ b/components-wiki/tabs.md
@@ -0,0 +1,442 @@
+<!-- catalog-only-start --><!-- ---
+name: Tabs
+dirname: tabs
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Tabs
+
+<!-- no-catalog-start -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-tabs -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/tabs/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Tabs](https://m3.material.io/components/tabs)<!-- {.external} --> organize groups of
+related content that are at the same level of hierarchy.
+
+</catalog-component-header-title>
+
+<img
+  class="hero"
+  src="images/tabs/hero.webp"
+  alt="Media gallery screen with tabs labeled 'Video', 'Photos', and 'Audio'.">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/tabs) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/tabs)
+    <!-- {.external} -->
+
+## Types
+
+1.  [Primary tabs](#primary-tabs)
+1.  [Secondary tabs](#secondary-tabs)
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Tabs contain multiple primary or secondary tab children. Use the same type of
+tab in a tab bar.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-primary-tab>Video</md-primary-tab>
+  <md-primary-tab>Photos</md-primary-tab>
+  <md-primary-tab>Audio</md-primary-tab>
+</md-tabs>
+
+<md-tabs>
+  <md-secondary-tab>Birds</md-secondary-tab>
+  <md-secondary-tab>Cats</md-secondary-tab>
+  <md-secondary-tab>Dogs</md-secondary-tab>
+</md-tabs>
+```
+
+### Selection
+
+Add an `active` attribute to change which tab is selected.
+
+```html
+<md-tabs>
+  <md-primary-tab>Video</md-primary-tab>
+  <md-primary-tab active>Photos</md-primary-tab>
+  <md-primary-tab>Audio</md-primary-tab>
+</md-tabs>
+```
+
+To observe changes to tab selections, add an event listener to `<md-tabs>`,
+listening for the `change` event.
+
+```ts
+tabs.addEventListener('change', (event: Event) => {
+  if (event.target.activeTabIndex === 2) {
+    // ... perform logic only if index of selected item is 2.
+  }
+});
+```
+
+### Icons
+
+Tabs may optionally show an icon.
+
+Icons communicate the type of content within a tab. Icons should be simple and
+recognizable.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-primary-tab>
+    <md-icon slot="icon">piano</md-icon>
+    Keyboard
+  </md-primary-tab>
+  <md-primary-tab>
+    <md-icon slot="icon">tune</md-icon>
+    Guitar
+  </md-primary-tab>
+</md-tabs>
+```
+
+Tabs may optionally show icons without a label.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-primary-tab>
+    <md-icon slot="icon">piano</md-icon>
+  </md-primary-tab>
+  <md-primary-tab>
+    <md-icon slot="icon">tune</md-icon>
+  </md-primary-tab>
+</md-tabs>
+```
+
+## Primary tabs
+
+<!-- go/md-primary-tab -->
+
+Primary tabs are placed at the top of the content pane under a top app bar. They
+display the main content destinations.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-primary-tab>
+    <md-icon slot="icon">piano</md-icon>
+    Keyboard
+  </md-primary-tab>
+  <md-primary-tab>
+    <md-icon slot="icon">tune</md-icon>
+    Guitar
+  </md-primary-tab>
+</md-tabs>
+```
+
+### Inline icons
+
+Primary tabs can show their icons inline, like secondary tabs.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-primary-tab inline-icon>
+    <md-icon slot="icon">piano</md-icon>
+    Keyboard
+  </md-primary-tab>
+  <md-primary-tab inline-icon>
+    <md-icon slot="icon">tune</md-icon>
+    Guitar
+  </md-primary-tab>
+</md-tabs>
+```
+
+## Secondary tabs
+
+<!-- go/md-secondary-tab -->
+
+Secondary tabs are used within a content area to further separate related
+content and establish hierarchy.
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+<!-- Need to add catalog-include "figures/<component>/usage.html" -->
+
+```html
+<md-tabs>
+  <md-secondary-tab>
+    <md-icon slot="icon">flight</md-icon>
+    Travel
+  </md-secondary-tab>
+  <md-secondary-tab>
+    <md-icon slot="icon">hotel</md-icon>
+    Hotel
+  </md-secondary-tab>
+  <md-secondary-tab>
+    <md-icon slot="icon">hiking</md-icon>
+    Activities
+  </md-secondary-tab>
+</md-tabs>
+```
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to `<md-tabs>` and any individual tab whose label needs to be more
+descriptive, such as icon-only tabs.
+
+```html
+<md-tabs aria-label="Content to view">
+  <md-primary-tab aria-label="Photos">
+    <md-icon slot="icon">photo</md-icon>
+  </md-primary-tab>
+  <md-primary-tab aria-label="Videos">
+    <md-icon slot="icon">videocam</md-icon>
+  </md-primary-tab>
+  <md-primary-tab aria-label="Music">
+    <md-icon slot="icon">audiotrack</md-icon>
+  </md-primary-tab>
+</md-tabs>
+```
+
+### Tab panels
+
+Every tab must reference a
+[`role="tabpanel"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)<!-- {.external} -->
+element with `aria-controls`. Tab panels must be labelled with `aria-label` or
+`aria-labelledby`.
+
+It's common to reference the panel's tab with `aria-labelledby`.
+
+```html
+<md-tabs aria-label="Content to view">
+  <md-primary-tab id="photos-tab" aria-controls="photos-panel">
+    Photos
+  </md-primary-tab>
+  <md-primary-tab id="videos-tab" aria-controls="videos-panel">
+    Videos
+  </md-primary-tab>
+  <md-primary-tab id="music-tab" aria-controls="music-panel">
+    Music
+  </md-primary-tab>
+</md-tabs>
+
+<div id="photos-panel" role="tabpanel" aria-labelledby="photos-tab">
+  ...
+</div>
+<div id="videos-panel" role="tabpanel" aria-labelledby="videos-tab" hidden>
+  ...
+</div>
+<div id="music-panel" role="tabpanel" aria-labelledby="music-tab" hidden>
+  ...
+</div>
+```
+
+## Theming
+
+Tabs supports [Material theming](../theming/README.md) and can be customized in
+terms of color, typography, and shape.
+
+### Primary tab tokens
+
+Token                                     | Default value
+----------------------------------------- | -------------
+`--md-primary-tab-container-color`        | `--md-sys-color-surface`
+`--md-primary-tab-label-text-font`        | `--md-sys-typescale-title-small-font`
+`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
+`--md-primary-tab-icon-color`             | `--md-sys-color-on-surface-variant`
+`--md-primary-tab-container-shape`        | `--md-sys-shape-corner-none`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-primary-tab.scss)
+    <!-- {.external} -->
+
+### Primary tab example
+
+<!-- no-catalog-start -->
+
+![Image of tabs with a different theme applied](images/tabs/theming.webp "Tab theming example.")
+
+<!-- no-catalog-end -->
+
+```html
+<style>
+:root {
+  /* System tokens */
+  --md-sys-color-surface: #f7faf9;
+  --md-sys-color-primary: #005353;
+
+  /* Component tokens */
+  --md-primary-tab-label-text-font: cursive, system-ui;
+  --md-primary-tab-label-text-size: 0.8em;
+}
+</style>
+
+<md-tabs>
+  <md-primary-tab>Tab 1</md-primary-tab>
+  <md-primary-tab>Tab 2</md-primary-tab>
+  <md-primary-tab>Tab 3</md-primary-tab>
+</md-tabs>
+```
+
+### Secondary tab tokens
+
+Token                                       | Default value
+------------------------------------------- | -------------
+`--md-secondary-tab-container-color`        | `--md-sys-color-surface`
+`--md-secondary-tab-label-text-font`        | `--md-sys-typescale-title-small-font`
+`--md-secondary-tab-active-indicator-color` | `--md-sys-color-primary`
+`--md-secondary-tab-icon-color`             | `--md-sys-color-on-surface-variant`
+`--md-secondary-tab-container-shape`        | `--md-sys-shape-corner-none`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-secondary-tab.scss)
+    <!-- {.external} -->
+
+### Secondary tab example
+
+<!-- no-catalog-start -->
+<!-- Need to add image -->
+<!-- no-catalog-end -->
+
+```html
+<style>
+:root {
+  /* System tokens */
+  --md-sys-color-surface: #f7faf9;
+  --md-sys-color-primary: #005353;
+
+  /* Component tokens */
+  --md-secondary-tab-label-text-font: cursive, system-ui;
+  --md-secondary-tab-label-text-size: 0.8em;
+}
+</style>
+
+<md-tabs>
+  <md-secondary-tab>Tab 1</md-secondary-tab>
+  <md-secondary-tab>Tab 2</md-secondary-tab>
+  <md-secondary-tab>Tab 3</md-secondary-tab>
+</md-tabs>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdTabs <code>&lt;md-tabs&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `autoActivate` | `auto-activate` | `boolean` | `false` | Whether or not to automatically select a tab when it is focused. |
+| `activeTabIndex` | `active-tab-index` | `number` | `undefined` |  |
+| `tabs` |  | `Tab[]` | `undefined` | The tabs of this tab bar. |
+| `activeTab` |  | `Tab` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `scrollToTab` | `tabToScrollTo` | `Promise<void>` | Scrolls the toolbar, if overflowing, to the active tab, or the provided tab. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `change` | `Event` | Yes | No | 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. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdPrimaryTab <code>&lt;md-primary-tab&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `inlineIcon` | `inline-icon` | `boolean` | `false` | Whether or not the icon renders inline with label or stacked vertically. |
+| `isTab` | `md-tab` | `boolean` | `true` | 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. |
+| `active` | `active` | `boolean` | `false` | Whether or not the tab is selected. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present. |
+| `iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon. |
+| `selected` | `selected` | `boolean` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdSecondaryTab <code>&lt;md-secondary-tab&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `isTab` | `md-tab` | `boolean` | `true` | 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. |
+| `active` | `active` | `boolean` | `false` | Whether or not the tab is selected. |
+| `hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present. |
+| `iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon. |
+| `selected` | `selected` | `boolean` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/components-wiki/text-field.md b/components-wiki/text-field.md
new file mode 100644
index 0000000..6d3168b
--- /dev/null
+++ b/components-wiki/text-field.md
@@ -0,0 +1,631 @@
+<!-- catalog-only-start --><!-- ---
+name: Text field
+dirname: textfield
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="start">
+<catalog-component-header-title slot="title">
+
+# Text field
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- no-catalog-start -->
+
+<!-- go/md-text-field -->
+
+<!-- [TOC] -->
+
+<!-- external-only-start -->
+**This documentation is fully rendered on the
+[Material Web catalog](https://material-web.dev/components/text-field/)**
+<!-- external-only-end -->
+
+<!-- no-catalog-end -->
+
+[Text fields](https://m3.material.io/components/text-fields)<!-- {.external} --> let
+users enter text into a UI.
+
+</catalog-component-header-title>
+
+<img class="hero" src="images/textfield/hero.webp" alt="Several text fields in a form"
+title="Text fields">
+
+</catalog-component-header>
+
+*   [Design article](https://m3.material.io/components/text-fields) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/textfield)
+    <!-- {.external} -->
+
+## Types
+
+1.  [Filled text field](#filled-text-field)
+1.  [Outlined text field](#outlined-text-field)
+
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
+## Usage
+
+Text fields behave like
+[`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)<!-- {.external} -->
+elements. They provide a container with labels for user input.
+
+<!-- no-catalog-start -->
+
+![A filled textfield next to an outlined textfield. Both have a value of Value
+prefilled](images/textfield/usage.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage.html" -->
+
+```html
+<md-filled-text-field label="Label" value="Value">
+</md-filled-text-field>
+
+<md-outlined-text-field label="Label" value="Value">
+</md-outlined-text-field>
+```
+
+### Input type
+
+A text field's `type` attribute changes how the text field works, such as
+displaying a different keyboard or providing default validation.
+
+-   [`type="text"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)<!-- {.external} -->
+    (default)
+-   [`type="email"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)
+    <!-- {.external} -->
+-   [`type="number"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
+    <!-- {.external} -->
+-   [`type="password"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)
+    <!-- {.external} -->
+-   [`type="search"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)
+    <!-- {.external} -->
+-   [`type="tel"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)
+    <!-- {.external} -->
+-   [`type="url"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)
+    <!-- {.external} -->
+-   [`type="textarea"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
+    <!-- {.external} -->
+
+<!-- no-catalog-start -->
+
+![Two filled textfields next to each other. The first has a label of Username
+and the outlined one has a label of Password](images/textfield/usage-type.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-type.html" -->
+
+```html
+<md-filled-text-field label="Username" type="email">
+</md-filled-text-field>
+
+<md-filled-text-field label="Password" type="password">
+</md-filled-text-field>
+```
+
+> Tip: use the
+> [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)<!-- {.external} -->
+> attribute for more control over the displayed keyboard.
+
+### Labels
+
+Text fields should label their value with a floating `label`, a `placeholder`,
+or an external label. Labels help the user understand what value to input.
+
+<!-- no-catalog-start -->
+
+![Three outlined textfields next to each other. the first has a label of
+Favorite food, the second one a placeholder of email@domain.com and there is a
+label that says First name and an empty outlined textfield next to
+it](images/textfield/usage-label.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-label.html" -->
+
+```html
+<md-outlined-text-field label="Favorite food">
+</md-outlined-text-field>
+
+<md-outlined-text-field placeholder="email@domain.com">
+</md-outlined-text-field>
+
+<div>First name</div>
+<md-outlined-text-field aria-label="First name">
+</md-outlined-text-field>
+```
+
+> Note: text fields do not currently support `aria-labelledby`. External labels
+> must provide an `aria-label`. See b/276484803.
+
+### Textarea
+
+Multi-line text fields behave like
+[`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)<!-- {.external} -->
+elements.
+
+Textareas can specify the initial number of `rows`. Use CSS `width`, `height`,
+and `resize` to control the resize behavior of a textarea.
+
+<!-- no-catalog-start -->
+
+![A filled textarea that is vertically larger and has a label that says Vertical
+resize](images/textfield/usage-textarea.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-textarea.html" -->
+
+```html
+<style>
+  md-filled-text-field {
+    resize: vertical;
+  }
+</style>
+<md-filled-text-field
+    type="textarea"
+    label="Vertical resize"
+    rows="3">
+</md-filled-text-field>
+```
+
+### Icons
+
+Text fields may display optional icons. Use icons to describe the input method
+(such as a search icon), provide additional functionality (such as a clear
+icon), or to express errors.
+
+<!-- no-catalog-start -->
+
+![Three outlined textfields next to each other the first has a search icon at
+the start the label Search Messages, the second a label that says Password and
+an eye icon toggle button at the end, and a red, visually errored outlined
+textfield with the label Username with an exclamation icon at the end and helper
+error text under the field that says Username not
+available](images/textfield/usage-icons.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-icons.html" -->
+
+```html
+<md-outlined-text-field placeholder="Search for messages">
+  <md-icon slot="leading-icon">search</md-icon>
+</md-outlined-text-field>
+
+<md-outlined-text-field label="Password" type="password">
+  <md-icon-button toggle slot="trailing-icon">
+    <md-icon>visibility</md-icon>
+    <md-icon slot="selected">visibility_off</md-icon>
+  </md-icon-button>
+</md-outlined-text-field>
+
+<md-outlined-text-field
+    label="Username"
+    error
+    error-text="Username not available">
+  <md-icon slot="trailing-icon">error</md-icon>
+</md-outlined-text-field>
+```
+
+### Prefix and suffix
+
+Add `prefix-text` and `suffix-text` attributes to text fields to display
+additional context for the value.
+
+<!-- no-catalog-start -->
+
+![An outlined textfield with a floating label that says Dollar amount, a prefix
+dollar sign, the number zero as a value and a suffix of decimal zero zero at the
+end of the field](images/textfield/usage-prefix.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-prefix.html" -->
+
+```html
+<md-outlined-text-field
+    label="Dollar amount"
+    type="number"
+    value="0"
+    prefix-text="$"
+    suffix-text=".00">
+</md-outlined-text-field>
+```
+
+### Supporting text
+
+Supporting text conveys additional information about the input field, such as
+how it will be used. Supporting text can be replaced with error text when
+[validating](#validation).
+
+<!-- no-catalog-start -->
+
+![Two filled fields next to each other. The first has a label that says comments
+and supporting text under the field that says Provide comments for the issue.
+The second field has a label of Name with an asterisk and supporting text under
+the field that has an asterisk followed by the word
+required](images/textfield/usage-supporting-text.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-supporting-text.html" -->
+
+```html
+<md-filled-text-field
+    label="Comments"
+    supporting-text="Provide comments for the issue">
+</md-filled-text-field>
+
+<md-filled-text-field
+    label="Name"
+    required
+    supporting-text="*required"
+    error-text="Please fill out this field">
+</md-filled-text-field>
+```
+
+### Character counter
+
+Text fields with a `maxlength` attribute will display a character counter.
+
+<!-- no-catalog-start -->
+
+![An outlined textfield with a floating label that says Title and a filled value
+that says Short and the text 5 / 10 under the field at the
+end](images/textfield/usage-char-counter.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/usage-char-counter.html" -->
+
+```html
+<md-outlined-text-field label="Title" value="Short" maxlength="10">
+</md-outlined-text-field>
+```
+
+### Validation
+
+Text fields that validate can use
+[constraint validation](#constraint-validation) or
+[manual validation](#manual-validation).
+
+#### Constraint validation
+
+Text fields may validate using the browser's
+[constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation)<!-- {.external} -->
+API. Each [input type](#input-type) above links to an article that describes how
+to validate it.
+
+Text fields in a `<form>` will validate on submission, or by calling
+`textField.reportValidity()`.
+
+```html
+<form>
+  <md-filled-text-field
+      name="name"
+      label="Name"
+      required>
+  </md-filled-text-field>
+  <md-filled-text-field
+      name="email"
+      label="Email"
+      pattern="[\w\d-]+"
+      suffix-text="@gmail.com">
+  </md-filled-text-field>
+</form>
+```
+
+Use the following properties and methods to check and report validation errors.
+
+-   `validity` is the text field's current
+    [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)<!-- {.external} -->.
+-   [`setCustomValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity)<!-- {.external} -->
+    sets a custom error message.
+-   [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)<!-- {.external} -->
+    dispatches an
+    [`invalid` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)<!-- {.external} -->.
+-   [`reportValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)<!-- {.external} -->
+    dispatches an
+    [`invalid` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)<!-- {.external} -->
+    and displays the error in the text field's supporting text.
+
+#### Manual validation
+
+Alternatively, text fields can manually control their error state and error
+message. Use manual validation if the text fields are driven by application
+state logic.
+
+```html
+<md-outlined-text-field
+    label="Username"
+    value="jdoe"
+    error
+    error-text="Username is not available">
+</md-outlined-text-field>
+```
+
+> Tip: Prefer [constraint validation](#constraint-validation) when possible for
+> more platform features, such as `<form>` validation and listening to `invalid`
+> events.
+
+## Accessibility
+
+Add an
+[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
+attribute to text fields with external labels or text fields whose labels need
+to be more descriptive.
+
+```html
+<div>Username</div>
+<md-filled-text-field aria-label="Username"></md-filled-text-field>
+
+<md-filled-text-field label="First" aria-label="First name"></md-filled-text-field>
+```
+
+## Filled text field
+
+<!-- go/md-filled-text-field -->
+
+Filled and outlined text fields are functionally identical. See
+[choosing a text field](https://m3.material.io/components/text-fields/guidelines#83956188-4d8f-4c11-9389-aaba30b10214)<!-- {.external} -->
+for guidance on which one to use.
+
+```html
+<md-filled-text-field label="Filled" value="Value"></md-filled-text-field>
+```
+
+## Outlined text field
+
+<!-- go/md-outlined-text-field -->
+
+Filled and outlined text fields are functionally identical. See
+[choosing a text field](https://m3.material.io/components/text-fields/guidelines#83956188-4d8f-4c11-9389-aaba30b10214)<!-- {.external} -->
+for guidance on which one to use.
+
+```html
+<md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
+```
+
+## Theming
+
+Text fields support [Material theming](../theming/README.md) and can be
+customized in terms of color, typography, and shape.
+
+### Filled text field tokens
+
+Token                                                 | Default value
+----------------------------------------------------- | -------------
+`--md-filled-text-field-container-shape`              | `--md-sys-shape-corner-extra-small`
+`--md-filled-text-field-container-color`              | `--md-sys-color-surface-container-highest`
+`--md-filled-text-field-focus-active-indicator-color` | `--md-sys-color-primary`
+`--md-filled-text-field-input-text-font`              | `--md-sys-typescale-body-large-font`
+`--md-filled-text-field-label-text-font`              | `--md-sys-typescale-body-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-text-field.scss)
+    <!-- {.external} -->
+
+### Filled text field example
+
+<!-- no-catalog-start -->
+
+![A filled text field with the label filled themed to a greenish color](images/textfield/theming-filled.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/theming-filled.html" -->
+
+```html
+<style>
+:root {
+  --md-filled-text-field-container-shape: 0px;
+  --md-sys-typescale-body-large: 400 1rem system-ui;
+  --md-sys-color-primary: #006a6a;
+  --md-sys-color-surface-container-highest: #e0e3e2;
+  --md-filled-text-field-label-text-color: #3f4948;
+  --md-filled-text-field-input-text-color: #161d1d;
+}
+</style>
+
+<md-filled-text-field label="Filled" value="Value">
+</md-filled-text-field>
+```
+
+### Outlined text field tokens
+
+Token                                          | Default value
+---------------------------------------------- | -------------
+`--md-outlined-text-field-container-shape`     | `--md-sys-shape-corner-extra-small`
+`--md-outlined-text-field-focus-outline-color` | `--md-sys-color-primary`
+`--md-outlined-text-field-input-text-font`     | `--md-sys-typescale-body-large-font`
+`--md-outlined-text-field-label-text-font`     | `--md-sys-typescale-body-large-font`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-text-field.scss)
+    <!-- {.external} -->
+
+### Outlined text field example
+
+<!-- no-catalog-start -->
+
+![An outlined text field with the label outlined themed to a greenish color](images/textfield/theming-outlined.webp)
+
+<!-- no-catalog-end -->
+<!-- catalog-include "figures/textfield/theming-outlined.html" -->
+
+```html
+<style>
+:root {
+  --md-outlined-text-field-container-shape: 0px;
+  --md-sys-typescale-body-large: 400 1rem system-ui;
+  --md-sys-color-primary: #006a6a;
+  --md-outlined-text-field-label-text-color: #3f4948;
+  --md-outlined-text-field-input-text-color: #161d1d;
+}
+</style>
+
+<md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdFilledTextField <code>&lt;md-filled-text-field&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |
+| `errorText` | `error-text` | `string` | `''` | 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.<br>This error message overrides the error message displayed by `reportValidity()`. |
+| `label` | `label` | `string` | `''` | 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`.<br>Learn more about floating labels from the Material Design guidelines: https://m3.material.io/components/text-fields/guidelines |
+| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the text field is required. |
+| `required` | `required` | `boolean` | `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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required |
+| `value` | `value` | `string` | `''` | The current value of the text field. It is always a string. |
+| `prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value. |
+| `suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value. |
+| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
+| `hasTrailingIcon` | `has-trailing-icon` | `boolean` | `false` | Whether or not the text field has a trailing icon. Used for SSR. |
+| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the text field, such as how it should be used. |
+| `textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. |
+| `rows` | `rows` | `number` | `2` | The number of rows to display for a `type="textarea"` text field. Defaults to 2. |
+| `cols` | `cols` | `number` | `20` | The number of cols to display for a `type="textarea"` text field. Defaults to 20. |
+| `inputMode` | `inputmode` | `string` | `''` |  |
+| `max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max |
+| `maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength |
+| `min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min |
+| `minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength |
+| `noSpinner` | `no-spinner` | `boolean` | `false` | When true, hide the spinner for `type="number"` text fields. |
+| `pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern |
+| `placeholder` | `placeholder` | `string` | `''` | 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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder |
+| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |
+| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |
+| `step` | `step` | `string` | `''` | 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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |
+| `type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to "text". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
+| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+| `selectionDirection` |  | `string` | `undefined` |  |
+| `selectionEnd` |  | `number` | `undefined` |  |
+| `selectionStart` |  | `number` | `undefined` |  |
+| `valueAsNumber` |  | `number` | `undefined` |  |
+| `valueAsDate` |  | `Date` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select |
+| `setRangeText` | `args` | `void` |  |
+| `setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange |
+| `stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown |
+| `stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp |
+| `reset` | _None_ | `void` | Reset the text field to its default value. |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `select` | `Event` | Yes | No | The native `select` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+### MdOutlinedTextField <code>&lt;md-outlined-text-field&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |
+| `errorText` | `error-text` | `string` | `''` | 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.<br>This error message overrides the error message displayed by `reportValidity()`. |
+| `label` | `label` | `string` | `''` | 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`.<br>Learn more about floating labels from the Material Design guidelines: https://m3.material.io/components/text-fields/guidelines |
+| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the text field is required. |
+| `required` | `required` | `boolean` | `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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required |
+| `value` | `value` | `string` | `''` | The current value of the text field. It is always a string. |
+| `prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value. |
+| `suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value. |
+| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
+| `hasTrailingIcon` | `has-trailing-icon` | `boolean` | `false` | Whether or not the text field has a trailing icon. Used for SSR. |
+| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the text field, such as how it should be used. |
+| `textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. |
+| `rows` | `rows` | `number` | `2` | The number of rows to display for a `type="textarea"` text field. Defaults to 2. |
+| `cols` | `cols` | `number` | `20` | The number of cols to display for a `type="textarea"` text field. Defaults to 20. |
+| `inputMode` | `inputmode` | `string` | `''` |  |
+| `max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max |
+| `maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength |
+| `min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min |
+| `minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength |
+| `noSpinner` | `no-spinner` | `boolean` | `false` | When true, hide the spinner for `type="number"` text fields. |
+| `pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern |
+| `placeholder` | `placeholder` | `string` | `''` | 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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder |
+| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |
+| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |
+| `step` | `step` | `string` | `''` | 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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |
+| `type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to "text". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
+| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |
+| `disabled` |  | `boolean` | `undefined` |  |
+| `name` |  | `string` | `undefined` |  |
+| `selectionDirection` |  | `string` | `undefined` |  |
+| `selectionEnd` |  | `number` | `undefined` |  |
+| `selectionStart` |  | `number` | `undefined` |  |
+| `valueAsNumber` |  | `number` | `undefined` |  |
+| `valueAsDate` |  | `Date` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select |
+| `setRangeText` | `args` | `void` |  |
+| `setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange |
+| `stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown |
+| `stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp |
+| `reset` | _None_ | `void` | Reset the text field to its default value. |
+| `formResetCallback` | _None_ | `void` |  |
+| `formStateRestoreCallback` | `state` | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `select` | `Event` | Yes | No | The native `select` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) |
+| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |
+| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->
diff --git a/index-new.html b/index-new.html
new file mode 100644
index 0000000..4be2616
--- /dev/null
+++ b/index-new.html
@@ -0,0 +1,2901 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="MNotes - A modern Markdown note-taking application">
+  <title>MNotes</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap">
+  <style>
+    /* Theme Variables */
+    :root {
+      /* Material 3 (You/Expressive) Colors - Light Theme */
+      --primary-color: #006A6A;
+      --on-primary-color: #FFFFFF;
+      --primary-container-color: #6FF7F7;
+      --on-primary-container-color: #002020;
+      --secondary-color: #4A6363;
+      --on-secondary-color: #FFFFFF;
+      --secondary-container-color: #CCE8E7;
+      --on-secondary-container-color: #051F1F;
+      --tertiary-color: #4B607C;
+      --on-tertiary-color: #FFFFFF;
+      --tertiary-container-color: #D3E4FF;
+      --on-tertiary-container-color: #041C35;
+      --error-color: #BA1A1A;
+      --on-error-color: #FFFFFF;
+      --error-container-color: #FFDAD6;
+      --on-error-container-color: #410002;
+      --surface-color: #FAFDFC;
+      --on-surface-color: #191C1C;
+      --surface-variant-color: #DAE5E3;
+      --on-surface-variant-color: #3F4948;
+      --outline-color: #6F7978;
+      --background-color: #FAFDFC;
+      --on-background-color: #191C1C;
+      --elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+      --elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+      --elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+      --surface-tint-color: #006A6A;
+    }
+
+    .theme-dark {
+      /* Material 3 (You/Expressive) Colors - Dark Theme */
+      --primary-color: #4CDADA;
+      --on-primary-color: #003737;
+      --primary-container-color: #004F4F;
+      --on-primary-container-color: #6FF7F7;
+      --secondary-color: #B0CCCC;
+      --on-secondary-color: #1B3534;
+      --secondary-container-color: #324B4B;
+      --on-secondary-container-color: #CCE8E7;
+      --tertiary-color: #B4C8E9;
+      --on-tertiary-color: #1C314B;
+      --tertiary-container-color: #334863;
+      --on-tertiary-container-color: #D3E4FF;
+      --error-color: #FFB4AB;
+      --on-error-color: #690005;
+      --error-container-color: #93000A;
+      --on-error-container-color: #FFDAD6;
+      --surface-color: #191C1C;
+      --on-surface-color: #E0E3E2;
+      --surface-variant-color: #3F4948;
+      --on-surface-variant-color: #BEC9C7;
+      --outline-color: #899392;
+      --background-color: #191C1C;
+      --on-background-color: #E0E3E2;
+      --elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35);
+      --elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.35);
+      --elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.35);
+      --surface-tint-color: #4CDADA;
+    }
+
+    .theme-sepia {
+      /* Material 3 (You/Expressive) Colors - Sepia Theme */
+      --primary-color: #8B5000;
+      --on-primary-color: #FFFFFF;
+      --primary-container-color: #FFDDB7;
+      --on-primary-container-color: #2C1700;
+      --secondary-color: #735A41;
+      --on-secondary-color: #FFFFFF;
+      --secondary-container-color: #FFDDBD;
+      --on-secondary-container-color: #291805;
+      --tertiary-color: #5B6237;
+      --on-tertiary-color: #FFFFFF;
+      --tertiary-container-color: #DFE8B2;
+      --on-tertiary-container-color: #181E00;
+      --error-color: #BA1A1A;
+      --on-error-color: #FFFFFF;
+      --error-container-color: #FFDAD6;
+      --on-error-container-color: #410002;
+      --surface-color: #FFFBFF;
+      --on-surface-color: #201B16;
+      --surface-variant-color: #F0E0CF;
+      --on-surface-variant-color: #4E4539;
+      --outline-color: #7F7667;
+      --background-color: #FFF8F3;
+      --on-background-color: #201B16;
+      --elevation-level-1: 0px 1px 3px 1px rgba(139, 80, 0, 0.15);
+      --elevation-level-2: 0px 2px 6px 2px rgba(139, 80, 0, 0.15);
+      --elevation-level-3: 0px 4px 8px 3px rgba(139, 80, 0, 0.15);
+      --surface-tint-color: #8B5000;
+    }
+
+    /* Base Styles */
+    body {
+      font-family: 'Google Sans', 'Roboto', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: var(--background-color);
+      color: var(--on-background-color);
+      transition: background-color 0.3s ease, color 0.3s ease;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Accessibility - Focus States */
+    button:focus, 
+    a:focus, 
+    input:focus, 
+    textarea:focus {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Layout Components */
+    .header {
+      background-color: var(--primary-color);
+      color: var(--on-primary-color);
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: var(--elevation-level-2);
+      z-index: 10;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .left-section {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .app-title {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin: 0;
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .main-container {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .sidebar {
+      width: 280px;
+      background-color: var(--surface-color);
+      border-right: 1px solid var(--outline-color);
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      box-shadow: var(--elevation-level-1);
+      transition: background-color 0.3s ease, color 0.3s ease, left 0.3s ease;
+    }
+
+    .sidebar-header {
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--outline-color);
+      background-color: var(--surface-variant-color);
+      color: var(--on-surface-variant-color);
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .note-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      flex-grow: 1;
+      overflow-y: auto;
+    }
+
+    .note-item {
+      padding: 16px;
+      cursor: pointer;
+      border-bottom: 1px solid var(--outline-color);
+      transition: background-color 0.2s, transform 0.1s;
+      border-radius: 12px;
+      margin: 8px;
+    }
+
+    .note-item:hover {
+      background-color: var(--surface-variant-color);
+      transform: translateY(-2px);
+    }
+
+    .note-item:focus {
+      outline: 2px solid var(--primary-color);
+      outline-offset: -2px;
+    }
+
+    .note-item.active {
+      background-color: var(--primary-container-color);
+      color: var(--on-primary-container-color);
+      box-shadow: var(--elevation-level-1);
+    }
+
+    .note-item-title {
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 4px;
+    }
+
+    .note-item-preview {
+      font-size: 0.85rem;
+      opacity: 0.75;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .note-date {
+      font-size: 0.75rem;
+      opacity: 0.6;
+      margin-top: 4px;
+    }
+
+    .editor-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      background-color: var(--background-color);
+      transition: background-color 0.3s ease;
+    }
+
+    .toolbar {
+      background-color: var(--surface-color);
+      border-bottom: 1px solid var(--outline-color);
+      padding: 8px 16px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      transition: background-color 0.3s ease;
+    }
+
+    .toolbar-group {
+      display: flex;
+      gap: 4px;
+      border-right: 1px solid var(--outline-color);
+      padding-right: 8px;
+      margin-right: 8px;
+    }
+
+    .toolbar-group:last-child {
+      border-right: none;
+    }
+
+    .editor-wrapper {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    .editor {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      outline: none;
+      font-size: 1rem;
+      line-height: 1.6;
+      border: none;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      resize: none;
+      font-family: 'Roboto Mono', monospace, 'Google Sans', sans-serif;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .markdown-preview {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      border-left: 1px solid var(--outline-color);
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .markdown-preview.hidden {
+      display: none;
+    }
+
+    /* UI Components */
+    .button {
+      background-color: var(--primary-container-color);
+      color: var(--on-primary-container-color);
+      border: none;
+      border-radius: 20px;
+      padding: 10px 16px;
+      font-family: 'Google Sans', sans-serif;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.2s ease;
+      box-shadow: var(--elevation-level-1);
+      position: relative;
+    }
+
+    .button:hover {
+      background-color: var(--primary-container-color);
+      opacity: 0.9;
+      box-shadow: var(--elevation-level-2);
+    }
+
+    .button:active {
+      transform: translateY(1px);
+    }
+
+    .button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .button-icon {
+      font-size: 1.25rem;
+    }
+
+    .icon-button {
+      background-color: transparent;
+      color: var(--on-surface-color);
+      border: none;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    .icon-button:hover {
+      background-color: var(--surface-variant-color);
+    }
+
+    .icon-button.active {
+      color: var(--primary-color);
+      background-color: var(--primary-container-color);
+    }
+
+    .theme-selector {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      background-color: var(--surface-variant-color);
+      border-radius: 24px;
+      transition: background-color 0.3s ease;
+    }
+
+    .theme-button {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      cursor: pointer;
+      transition: transform 0.2s, border-color 0.2s;
+    }
+
+    .theme-button:focus {
+      outline: 2px solid var(--primary-color);
+    }
+
+    .theme-button.active {
+      border-color: var(--primary-color);
+      transform: scale(1.2);
+    }
+
+    .theme-light {
+      background-color: #FFFBFE;
+    }
+
+    .theme-dark {
+      background-color: #1C1B1F;
+    }
+
+    .theme-sepia {
+      background-color: #F5F5DC;
+    }
+
+    .status-bar {
+      padding: 8px 16px;
+      font-size: 0.75rem;
+      background-color: var(--surface-color);
+      border-top: 1px solid var(--outline-color);
+      display: flex;
+      justify-content: space-between;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 16px;
+      right: 16px;
+      padding: 12px 16px;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      border-radius: 8px;
+      box-shadow: var(--elevation-level-2);
+      z-index: 1000;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity 0.3s, transform 0.3s;
+      max-width: 300px;
+    }
+
+    .toast.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .toast-success {
+      border-left: 4px solid #4CAF50;
+    }
+
+    .toast-error {
+      border-left: 4px solid var(--error-color);
+    }
+
+    .toast-info {
+      border-left: 4px solid var(--primary-color);
+    }
+
+    /* Modal Styles */
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      backdrop-filter: blur(4px);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    .modal.visible {
+      opacity: 1;
+    }
+
+    .modal-content {
+      background-color: var(--surface-color);
+      padding: 32px;
+      border-radius: 28px;
+      width: 100%;
+      max-width: 400px;
+      box-shadow: var(--elevation-level-3);
+      transform: scale(0.9);
+      transition: transform 0.3s;
+      color: var(--on-surface-color);
+    }
+
+    .modal.visible .modal-content {
+      transform: scale(1);
+    }
+
+    .modal-title {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-top: 0;
+      margin-bottom: 24px;
+      color: var(--on-surface-color);
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .form-field {
+      margin-bottom: 24px;
+    }
+
+    .form-field-label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 500;
+      color: var(--on-surface-color);
+    }
+
+    .input-field {
+      width: 100%;
+      padding: 16px;
+      font-family: 'Google Sans', 'Roboto', sans-serif;
+      font-size: 1rem;
+      border: 2px solid var(--outline-color);
+      border-radius: 16px;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      transition: border-color 0.2s, box-shadow 0.2s;
+      box-sizing: border-box;
+    }
+
+    .input-field:focus {
+      border-color: var(--primary-color);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(0, 106, 106, 0.2);
+    }
+
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .info-message {
+      background-color: var(--surface-variant-color);
+      color: var(--on-surface-variant-color);
+      padding: 12px 16px;
+      margin: 8px 0;
+      border-radius: 12px;
+      display: none;
+      font-size: 0.875rem;
+      border-left: 4px solid var(--tertiary-color);
+    }
+
+    .search-container {
+      position: relative;
+      margin-bottom: 8px;
+      padding: 0 16px;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 10px 16px 10px 40px;
+      border-radius: 20px;
+      border: 1px solid var(--outline-color);
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      font-family: 'Google Sans', sans-serif;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      box-sizing: border-box;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px rgba(0, 106, 106, 0.2);
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 26px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: var(--on-surface-variant-color);
+      pointer-events: none;
+    }
+
+    .search-clear {
+      position: absolute;
+      right: 26px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: var(--on-surface-variant-color);
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: none;
+    }
+
+    .search-clear.visible {
+      display: block;
+    }
+
+    /* Utility Classes */
+    .hidden {
+      display: none !important;
+    }
+
+    .material-symbols-rounded {
+      font-variation-settings:
+      'FILL' 1,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 24;
+    }
+
+    /* Markdown Preview Styling */
+    .markdown-content h1, 
+    .markdown-content h2, 
+    .markdown-content h3, 
+    .markdown-content h4, 
+    .markdown-content h5, 
+    .markdown-content h6 {
+      color: var(--on-surface-color);
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .markdown-content h1 {
+      font-size: 2em;
+      border-bottom: 1px solid var(--outline-color);
+      padding-bottom: 0.3em;
+    }
+
+    .markdown-content h2 {
+      font-size: 1.5em;
+      border-bottom: 1px solid var(--outline-color);
+      padding-bottom: 0.3em;
+    }
+
+    .markdown-content a {
+      color: var(--primary-color);
+      text-decoration: none;
+    }
+
+    .markdown-content a:hover {
+      text-decoration: underline;
+    }
+
+    .markdown-content code {
+      background-color: var(--surface-variant-color);
+      padding: 0.2em 0.4em;
+      border-radius: 4px;
+      font-family: 'Roboto Mono', monospace;
+      font-size: 0.9em;
+    }
+
+    .markdown-content pre {
+      background-color: var(--surface-variant-color);
+      padding: 16px;
+      border-radius: 8px;
+      overflow-x: auto;
+    }
+
+    .markdown-content pre code {
+      background-color: transparent;
+      padding: 0;
+    }
+
+    .markdown-content blockquote {
+      border-left: 4px solid var(--primary-color);
+      margin-left: 0;
+      padding-left: 16px;
+      color: var(--on-surface-variant-color);
+    }
+
+    .markdown-content img {
+      max-width: 100%;
+      border-radius: 8px;
+    }
+
+    .markdown-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 16px 0;
+    }
+
+    .markdown-content th, 
+    .markdown-content td {
+      border: 1px solid var(--outline-color);
+      padding: 8px 12px;
+      text-align: left;
+    }
+
+    .markdown-content th {
+      background-color: var(--surface-variant-color);
+    }
+
+    .markdown-content input[type="checkbox"] {
+      margin-right: 8px;
+    }
+
+    /* Auto-save Indicator */
+    .auto-save-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    .auto-save-indicator.visible {
+      opacity: 1;
+    }
+
+    .auto-save-indicator .material-symbols-rounded {
+      font-size: 14px;
+    }
+
+    /* Mobile Styles */
+    @media (max-width: 768px) {
+      .sidebar {
+        position: absolute;
+        left: -280px;
+        height: 100%;
+        transition: left 0.3s ease;
+        z-index: 100;
+      }
+
+      .sidebar.open {
+        left: 0;
+      }
+
+      .toggle-sidebar {
+        display: block;
+      }
+
+      .theme-selector {
+        margin-left: 8px;
+      }
+
+      .toolbar {
+        overflow-x: auto;
+        justify-content: flex-start;
+        padding: 8px;
+      }
+
+      .button {
+        padding: 8px 12px;
+        font-size: 0.8rem;
+      }
+
+      .editor-wrapper {
+        flex-direction: column;
+      }
+
+      .markdown-preview:not(.hidden) {
+        border-left: none;
+        border-top: 1px solid var(--outline-color);
+        max-height: 50%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="left-section">
+      <button id="toggleSidebar" class="button" aria-label="Toggle sidebar">
+        <span class="material-symbols-rounded">menu</span>
+      </button>
+      <div class="logo-container">
+        <img src="logo/mnotes.png" alt="MNotes Logo" class="app-logo" id="appLogo" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 40%22><text x=%220%22 y=%2230%22 font-family=%22Google Sans, Arial%22 font-size=%2230%22 fill=%22white%22>MNotes</text></svg>'; this.onerror=null;">
+      </div>
+    </div>
+    <div class="header-controls">
+      <button id="aboutBtn" class="icon-button" aria-label="About MNotes">
+        <span class="material-symbols-rounded">info</span>
+      </button>
+      <div class="theme-selector">
+        <button class="theme-button theme-light active" data-theme="light" title="Light theme" aria-label="Switch to light theme"></button>
+        <button class="theme-button theme-dark" data-theme="dark" title="Dark theme" aria-label="Switch to dark theme"></button>
+        <button class="theme-button theme-sepia" data-theme="sepia" title="Sepia theme" aria-label="Switch to sepia theme"></button>
+        <button id="customizeThemeBtn" class="icon-button" aria-label="Customize theme colors">
+          <span class="material-symbols-rounded">palette</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="main-container">
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <h2>Notes</h2>
+        <button id="newNoteBtn" class="button" aria-label="Create new note">
+          <span class="material-symbols-rounded">add</span>
+        </button>
+      </div>
+
+      <div class="search-container">
+        <span class="material-symbols-rounded search-icon">search</span>
+        <input type="text" id="searchNotes" class="search-input" placeholder="Search notes..." aria-label="Search notes">
+        <button id="clearSearch" class="search-clear" aria-label="Clear search">
+          <span class="material-symbols-rounded">close</span>
+        </button>
+      </div>
+
+      <ul class="note-list" id="noteList" role="list" aria-label="Notes list">
+        <!-- Note items will be added here -->
+      </ul>
+    </div>
+
+    <div class="editor-container">
+      <div class="toolbar">
+        <div class="toolbar-group">
+          <button id="saveNote" class="button" aria-label="Save note">
+            <span class="material-symbols-rounded">save</span>
+            <span class="button-text">Save</span>
+          </button>
+          <button id="downloadNote" class="button" aria-label="Download note">
+            <span class="material-symbols-rounded">download</span>
+            <span class="button-text">Download</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button id="formatBold" class="icon-button" aria-label="Bold text">
+            <span class="material-symbols-rounded">format_bold</span>
+          </button>
+          <button id="formatItalic" class="icon-button" aria-label="Italic text">
+            <span class="material-symbols-rounded">format_italic</span>
+          </button>
+          <button id="formatCode" class="icon-button" aria-label="Code block">
+            <span class="material-symbols-rounded">code</span>
+          </button>
+          <button id="formatList" class="icon-button" aria-label="Bullet list">
+            <span class="material-symbols-rounded">format_list_bulleted</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button id="togglePreview" class="button" aria-label="Toggle preview">
+            <span class="material-symbols-rounded">preview</span>
+            <span class="button-text">Preview</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button id="githubSave" class="button" aria-label="Save to GitHub">
+            <span class="material-symbols-rounded">cloud_upload</span>
+            <span class="button-text">GitHub</span>
+          </button>
+        </div>
+
+        <div class="toolbar-group">
+          <button id="deleteNote" class="button" aria-label="Delete note">
+            <span class="material-symbols-rounded">delete</span>
+            <span class="button-text">Delete</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="editor-wrapper">
+        <textarea id="editor" class="editor" placeholder="Start typing your note here..." aria-label="Note editor"></textarea>
+        <div id="markdownPreview" class="markdown-preview hidden markdown-content" aria-label="Markdown preview"></div>
+      </div>
+
+      <div class="status-bar">
+        <div>
+          <span id="wordCount">0 words</span>
+          <span class="auto-save-indicator" id="autoSaveIndicator">
+            <span class="material-symbols-rounded">sync</span>
+            Auto-saving...
+          </span>
+        </div>
+        <span id="lastSaved">Not saved yet</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- GitHub Auth Modal -->
+  <div class="modal" id="githubModal">
+    <div class="modal-content">
+      <h2 class="modal-title">GitHub Authentication</h2>
+      <div class="form-field">
+        <label for="githubUsername" class="form-field-label">GitHub Username</label>
+        <input type="text" id="githubUsername" class="input-field" placeholder="Your GitHub username">
+      </div>
+      <div class="form-field">
+        <label for="githubToken" class="form-field-label">Personal Access Token</label>
+        <input type="password" id="githubToken" class="input-field" placeholder="GitHub personal access token">
+        <div class="info-message" style="display: block; font-size: 0.75rem;">
+          <strong>Security Note:</strong> Tokens are stored in your browser's localStorage. 
+          For better security, use a token with minimal permissions.
+        </div>
+      </div>
+      <div class="form-field">
+        <label for="githubRepo" class="form-field-label">Repository Name</label>
+        <input type="text" id="githubRepo" class="input-field" placeholder="Existing repository name">
+      </div>
+      <div class="info-message" id="githubMessage"></div>
+      <div class="modal-actions">
+        <button id="clearGithubAuth" class="button" aria-label="Clear GitHub credentials">
+          <span class="material-symbols-rounded">delete</span>
+          Clear
+        </button>
+        <button id="cancelGithubAuth" class="button" aria-label="Cancel">Cancel</button>
+        <button id="confirmGithubAuth" class="button" aria-label="Connect to GitHub">Connect</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- New Note Modal -->
+  <div class="modal" id="newNoteModal">
+    <div class="modal-content">
+      <h2 class="modal-title">Create New Note</h2>
+      <div class="form-field">
+        <label for="newNoteTitle" class="form-field-label">Note Title</label>
+        <input type="text" id="newNoteTitle" class="input-field" placeholder="Enter a title for your note">
+      </div>
+      <div class="modal-actions">
+        <button id="cancelNewNote" class="button" aria-label="Cancel">Cancel</button>
+        <button id="confirmNewNote" class="button" aria-label="Create new note">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Confirmation Modal -->
+  <div class="modal" id="deleteConfirmModal">
+    <div class="modal-content">
+      <h2 class="modal-title">Delete Note</h2>
+      <p>Are you sure you want to delete this note? This action cannot be undone.</p>
+      <div class="modal-actions">
+        <button id="cancelDelete" class="button" aria-label="Cancel">Cancel</button>
+        <button id="confirmDelete" class="button" aria-label="Delete note">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Unsaved Changes Modal -->
+  <div class="modal" id="unsavedChangesModal">
+    <div class="modal-content">
+      <h2 class="modal-title">Unsaved Changes</h2>
+      <p>You have unsaved changes. What would you like to do?</p>
+      <div class="modal-actions">
+        <button id="discardChanges" class="button" aria-label="Discard changes">Discard</button>
+        <button id="saveChanges" class="button" aria-label="Save changes">Save</button>
+        <button id="cancelNavigation" class="button" aria-label="Cancel">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Theme Customization Modal -->
+  <div class="modal" id="themeCustomizationModal">
+    <div class="modal-content">
+      <h2 class="modal-title">Customize Theme Colors</h2>
+      <div class="theme-tabs">
+        <button class="theme-tab active" data-theme-tab="light">Light</button>
+        <button class="theme-tab" data-theme-tab="dark">Dark</button>
+        <button class="theme-tab" data-theme-tab="sepia">Sepia</button>
+      </div>
+      <div class="form-field">
+        <label for="primaryColorPicker" class="form-field-label">Primary Color</label>
+        <div class="color-picker-container">
+          <input type="color" id="primaryColorPicker" class="color-picker">
+          <input type="text" id="primaryColorHex" class="input-field color-hex" placeholder="#000000">
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button id="resetThemeColors" class="button" aria-label="Reset to default">Reset</button>
+        <button id="cancelThemeCustomization" class="button" aria-label="Cancel">Cancel</button>
+        <button id="saveThemeCustomization" class="button" aria-label="Save changes">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- About Modal -->
+  <div class="modal" id="aboutModal">
+    <div class="modal-content">
+      <h2 class="modal-title">About MNotes</h2>
+      <div class="about-content">
+        <div class="about-header">
+          <img src="logo/mnotes.png" alt="MNotes Logo" class="about-logo" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 40%22><text x=%220%22 y=%2230%22 font-family=%22Google Sans, Arial%22 font-size=%2230%22 fill=%22black%22>MNotes</text></svg>'; this.onerror=null;">
+          <div>
+            <h3 id="appVersion">Loading version...</h3>
+            <p>A modern Markdown note-taking application</p>
+          </div>
+        </div>
+        <div class="about-section">
+          <h4>Credits</h4>
+          <ul>
+            <li><strong>Jakub Ruzicka / korozelife</strong> (GitHub: <a href="https://github.com/thejakubruzicka" target="_blank">@thejakubruzicka</a>) - Main idea</li>
+            <li><strong>mxnticek</strong> (GitHub: <a href="https://github.com/VlastikYoutubeKo" target="_blank">@VlastikYoutubeKo</a>) - Adding some features</li>
+            <li><strong>Gemini AI</strong> (Google AI) - Rough example of the app</li>
+            <li><strong>Claude AI</strong> - Finishing touches of the app</li>
+          </ul>
+        </div>
+        <div class="about-section">
+          <h4>License</h4>
+          <p>This project is open source and available under the MIT License.</p>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button id="closeAbout" class="button" aria-label="Close">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- News Modal -->
+  <div class="modal" id="newsModal">
+    <div class="modal-content">
+      <h2 class="modal-title">News & Updates</h2>
+      <div id="newsContent" class="markdown-content">
+        <!-- News content will be loaded here -->
+      </div>
+      <div class="modal-actions">
+        <div class="checkbox-container">
+          <input type="checkbox" id="dontShowAgain" class="styled-checkbox">
+          <label for="dontShowAgain">Don't show again</label>
+        </div>
+        <button id="closeNews" class="button" aria-label="Close">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast notification -->
+  <div id="toast" class="toast"></div>
+
+  <script>
+    /**
+     * MNotes Application
+     * A modern Markdown note-taking application
+     */
+    document.addEventListener('DOMContentLoaded', function() {
+      /* ================= STATE MANAGEMENT ================= */
+      
+      // State variables
+      const state = {
+        notes: [],
+        currentNoteId: null,
+        githubAuth: {
+          username: '',
+          token: '',
+          repo: ''
+        },
+        editor: {
+          hasUnsavedChanges: false,
+          lastSavedContent: '',
+          isPreviewActive: false
+        },
+        ui: {
+          isSidebarOpen: window.innerWidth > 768,
+          searchQuery: '',
+          pendingNoteToOpen: null,
+          lastSaveTimestamp: null,
+          theme: 'light'
+        }
+      };
+
+      // Tracks if the editor content has changed since last save
+      let editorChangeTimeout = null;
+
+      /* ================= DOM ELEMENTS ================= */
+      
+      // Editor elements
+      const editor = document.getElementById('editor');
+      const noteList = document.getElementById('noteList');
+      const wordCount = document.getElementById('wordCount');
+      const lastSaved = document.getElementById('lastSaved');
+      const markdownPreview = document.getElementById('markdownPreview');
+      const autoSaveIndicator = document.getElementById('autoSaveIndicator');
+      
+      // Sidebar elements
+      const toggleSidebarBtn = document.getElementById('toggleSidebar');
+      const sidebar = document.getElementById('sidebar');
+      const newNoteBtn = document.getElementById('newNoteBtn');
+      const searchInput = document.getElementById('searchNotes');
+      const clearSearchBtn = document.getElementById('clearSearch');
+      
+      // Toolbar buttons
+      const saveNoteBtn = document.getElementById('saveNote');
+      const downloadNoteBtn = document.getElementById('downloadNote');
+      const togglePreviewBtn = document.getElementById('togglePreview');
+      const githubSaveBtn = document.getElementById('githubSave');
+      const deleteNoteBtn = document.getElementById('deleteNote');
+      const formatBoldBtn = document.getElementById('formatBold');
+      const formatItalicBtn = document.getElementById('formatItalic');
+      const formatCodeBtn = document.getElementById('formatCode');
+      const formatListBtn = document.getElementById('formatList');
+      
+      // Theme buttons
+      const themeButtons = document.querySelectorAll('.theme-button');
+      
+      // Modals
+      const githubModal = document.getElementById('githubModal');
+      const githubUsername = document.getElementById('githubUsername');
+      const githubToken = document.getElementById('githubToken');
+      const githubRepo = document.getElementById('githubRepo');
+      const githubMessage = document.getElementById('githubMessage');
+      const confirmGithubAuth = document.getElementById('confirmGithubAuth');
+      const cancelGithubAuth = document.getElementById('cancelGithubAuth');
+      const clearGithubAuth = document.getElementById('clearGithubAuth');
+      
+      const newNoteModal = document.getElementById('newNoteModal');
+      const newNoteTitle = document.getElementById('newNoteTitle');
+      const confirmNewNote = document.getElementById('confirmNewNote');
+      const cancelNewNote = document.getElementById('cancelNewNote');
+      
+      const deleteConfirmModal = document.getElementById('deleteConfirmModal');
+      const confirmDelete = document.getElementById('confirmDelete');
+      const cancelDelete = document.getElementById('cancelDelete');
+      
+      const unsavedChangesModal = document.getElementById('unsavedChangesModal');
+      const discardChangesBtn = document.getElementById('discardChanges');
+      const saveChangesBtn = document.getElementById('saveChanges');
+      const cancelNavigationBtn = document.getElementById('cancelNavigation');
+      
+      // Toast
+      const toast = document.getElementById('toast');
+
+      /* ================= INITIALIZATION ================= */
+      
+      /**
+       * Initialize the application
+       */
+      function initialize() {
+        loadFromLocalStorage();
+        attachEventListeners();
+        
+        // Create first note if none exist
+        if (state.notes.length === 0) {
+          createNewNote('Welcome to MNotes', 'Start typing to create your first note!');
+        } else {
+          renderNoteList();
+          // Open the most recently updated note
+          const mostRecentNote = [...state.notes].sort((a, b) => {
+            return new Date(b.updatedAt) - new Date(a.updatedAt);
+          })[0];
+          openNote(mostRecentNote.id);
+        }
+        
+        // Set initial UI state
+        updateSidebarVisibility();
+        updateThemeUI();
+      }
+
+      /**
+       * Load data from localStorage
+       */
+      function loadFromLocalStorage() {
+        try {
+          // Load notes
+          const savedNotes = localStorage.getItem('notes');
+          if (savedNotes) {
+            state.notes = JSON.parse(savedNotes);
+          }
+          
+          // Load theme
+          const savedTheme = localStorage.getItem('theme');
+          if (savedTheme) {
+            state.ui.theme = savedTheme;
+          }
+          
+          // Load GitHub auth
+          const savedGithubAuth = localStorage.getItem('githubAuth');
+          if (savedGithubAuth) {
+            state.githubAuth = JSON.parse(savedGithubAuth);
+          }
+        } catch (error) {
+          showToast('Error loading data from localStorage: ' + error.message, 'error');
+          console.error('Error loading from localStorage:', error);
+        }
+      }
+
+      /**
+       * Attach event listeners to DOM elements
+       */
+      function attachEventListeners() {
+        // Editor events
+        editor.addEventListener('input', handleEditorInput);
+        editor.addEventListener('keydown', handleEditorKeydown);
+        
+        // Sidebar events
+        toggleSidebarBtn.addEventListener('click', toggleSidebar);
+        newNoteBtn.addEventListener('click', showNewNoteModal);
+        searchInput.addEventListener('input', handleSearchInput);
+        clearSearchBtn.addEventListener('click', clearSearch);
+        
+        // Toolbar events
+        saveNoteBtn.addEventListener('click', saveCurrentNote);
+        downloadNoteBtn.addEventListener('click', downloadNoteAsMarkdown);
+        togglePreviewBtn.addEventListener('click', togglePreview);
+        githubSaveBtn.addEventListener('click', handleGitHubSave);
+        deleteNoteBtn.addEventListener('click', showDeleteConfirmation);
+        
+        // Formatting events
+        formatBoldBtn.addEventListener('click', () => insertFormatting('**', '**', 'bold text'));
+        formatItalicBtn.addEventListener('click', () => insertFormatting('*', '*', 'italic text'));
+        formatCodeBtn.addEventListener('click', () => insertFormatting('```\n', '\n```', 'code'));
+        formatListBtn.addEventListener('click', () => insertFormatting('- ', '', 'list item'));
+        
+        // Theme events
+        themeButtons.forEach(button => {
+          button.addEventListener('click', () => setTheme(button.dataset.theme));
+        });
+        
+        // GitHub modal events
+        confirmGithubAuth.addEventListener('click', saveGithubAuth);
+        cancelGithubAuth.addEventListener('click', hideGithubModal);
+        clearGithubAuth.addEventListener('click', clearGithubCredentials);
+        
+        // New note modal events
+        confirmNewNote.addEventListener('click', handleCreateNewNote);
+        cancelNewNote.addEventListener('click', hideNewNoteModal);
+        newNoteTitle.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter') {
+            handleCreateNewNote();
+          }
+        });
+        
+        // Delete modal events
+        confirmDelete.addEventListener('click', confirmDeleteNote);
+        cancelDelete.addEventListener('click', hideDeleteConfirmModal);
+        
+        // Unsaved changes modal events
+        discardChangesBtn.addEventListener('click', () => handleUnsavedChangesAction('discard'));
+        saveChangesBtn.addEventListener('click', () => handleUnsavedChangesAction('save'));
+        cancelNavigationBtn.addEventListener('click', () => handleUnsavedChangesAction('cancel'));
+        
+        // Window events
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        window.addEventListener('resize', updateSidebarVisibility);
+      }
+
+      /* ================= NOTE OPERATIONS ================= */
+      
+      /**
+       * Create a new note
+       * @param {string} title - The title of the note
+       * @param {string} content - The content of the note
+       */
+      function createNewNote(title, content = '') {
+        const newNote = {
+          id: Date.now().toString(),
+          title: title || 'Untitled Note',
+          content: content,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString()
+        };
+        
+        state.notes.push(newNote);
+        saveNotesToLocalStorage();
+        renderNoteList();
+        openNote(newNote.id);
+        
+        showToast(`Note "${title}" created`, 'success');
+      }
+
+      /**
+       * Open a note
+       * @param {string} noteId - The ID of the note to open
+       */
+      function openNote(noteId) {
+        // Check for unsaved changes before switching notes
+        if (state.editor.hasUnsavedChanges && state.currentNoteId !== noteId) {
+          state.ui.pendingNoteToOpen = noteId;
+          showUnsavedChangesModal();
+          return;
+        }
+        
+        const note = state.notes.find(n => n.id === noteId);
+        if (!note) {
+          showToast('Note not found', 'error');
+          return;
+        }
+
+        state.currentNoteId = noteId;
+        editor.value = note.content;
+        state.editor.lastSavedContent = note.content;
+        state.editor.hasUnsavedChanges = false;
+        
+        updateWordCount();
+        updateLastSaved(note.updatedAt);
+        renderMarkdownPreview();
+        
+        // Update active state in note list
+        updateActiveNoteInList();
+        
+        // Enable/disable buttons based on note selection
+        updateButtonStates();
+      }
+
+      /**
+       * Save the current note
+       * @param {boolean} silent - Whether to show notifications
+       * @returns {boolean} - Whether the save was successful
+       */
+      function saveCurrentNote(event, silent = false) {
+        if (event) event.preventDefault();
+        
+        if (!state.currentNoteId) {
+          if (!silent) showToast('No note selected', 'error');
+          return false;
+        }
+        
+        try {
+          const noteIndex = state.notes.findIndex(n => n.id === state.currentNoteId);
+          if (noteIndex === -1) {
+            if (!silent) showToast('Note not found', 'error');
+            return false;
+          }
+          
+          // Only save if content has changed
+          if (state.notes[noteIndex].content !== editor.value) {
+            state.notes[noteIndex].content = editor.value;
+            state.notes[noteIndex].updatedAt = new Date().toISOString();
+            state.editor.lastSavedContent = editor.value;
+            state.editor.hasUnsavedChanges = false;
+            
+            saveNotesToLocalStorage();
+            updateLastSaved(state.notes[noteIndex].updatedAt);
+            renderNoteList();
+            renderMarkdownPreview();
+            
+            if (!silent) showToast('Note saved', 'success');
+          }
+          
+          return true;
+        } catch (error) {
+          console.error('Error saving note:', error);
+          if (!silent) showToast('Error saving note: ' + error.message, 'error');
+          return false;
+        }
+      }
+
+      /**
+       * Auto-save the current note
+       */
+      function autoSaveNote() {
+        if (state.editor.hasUnsavedChanges && state.currentNoteId) {
+          // Show auto-save indicator
+          autoSaveIndicator.classList.add('visible');
+          
+          // Save the note silently
+          const saveSuccess = saveCurrentNote(null, true);
+          
+          // Hide auto-save indicator after a delay
+          setTimeout(() => {
+            autoSaveIndicator.classList.remove('visible');
+          }, 1500);
+          
+          return saveSuccess;
+        }
+        return false;
+      }
+
+      /**
+       * Delete the current note
+       */
+      function confirmDeleteNote() {
+        if (!state.currentNoteId) {
+          showToast('No note selected', 'error');
+          return;
+        }
+        
+        try {
+          const noteToDelete = state.notes.find(n => n.id === state.currentNoteId);
+          if (!noteToDelete) {
+            showToast('Note not found', 'error');
+            return;
+          }
+          
+          const noteTitle = noteToDelete.title;
+          
+          // Remove note from array
+          state.notes = state.notes.filter(n => n.id !== state.currentNoteId);
+          saveNotesToLocalStorage();
+          
+          // Hide the delete confirmation modal
+          hideDeleteConfirmModal();
+          
+          // Show success message
+          showToast(`Note "${noteTitle}" deleted`, 'success');
+          
+          // Open another note if available, or clear the editor
+          if (state.notes.length > 0) {
+            openNote(state.notes[0].id);
+          } else {
+            state.currentNoteId = null;
+            editor.value = '';
+            state.editor.lastSavedContent = '';
+            state.editor.hasUnsavedChanges = false;
+            updateWordCount();
+            updateLastSaved(null);
+            updateButtonStates();
+          }
+          
+          renderNoteList();
+        } catch (error) {
+          console.error('Error deleting note:', error);
+          showToast('Error deleting note: ' + error.message, 'error');
+        }
+      }
+
+      /**
+       * Download the current note as Markdown
+       */
+      function downloadNoteAsMarkdown(event) {
+        if (event) event.preventDefault();
+        
+        if (!state.currentNoteId) {
+          showToast('No note selected', 'error');
+          return;
+        }
+        
+        try {
+          const note = state.notes.find(n => n.id === state.currentNoteId);
+          if (!note) {
+            showToast('Note not found', 'error');
+            return;
+          }
+          
+          // Generate a filename based on the note title
+          const filename = `${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
+          const content = note.content;
+          
+          // Create a blob and download it
+          const blob = new Blob([content], { type: 'text/markdown' });
+          const url = URL.createObjectURL(blob);
+          
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          a.style.display = 'none';
+          document.body.appendChild(a);
+          a.click();
+          
+          // Clean up
+          setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+          }, 100);
+          
+          showToast(`Note downloaded as ${filename}`, 'success');
+        } catch (error) {
+          console.error('Error downloading note:', error);
+          showToast('Error downloading note: ' + error.message, 'error');
+        }
+      }
+
+      /* ================= GITHUB INTEGRATION ================= */
+      
+      /**
+       * Handle GitHub save button click
+       */
+      function handleGitHubSave(event) {
+        if (event) event.preventDefault();
+        
+        // If no auth details or missing fields, show the auth modal
+        if (!state.githubAuth.username || !state.githubAuth.token || !state.githubAuth.repo) {
+          showGithubModal();
+          return;
+        }
+        
+        // If no note is selected, show error
+        if (!state.currentNoteId) {
+          showToast('No note selected', 'error');
+          return;
+        }
+        
+        // Save any unsaved changes first
+        if (state.editor.hasUnsavedChanges) {
+          const saveSuccess = saveCurrentNote(null, true);
+          if (!saveSuccess) {
+            showToast('Failed to save note before GitHub upload', 'error');
+            return;
+          }
+        }
+        
+        // Now save to GitHub
+        saveToGithub();
+      }
+
+      /**
+       * Save the current note to GitHub
+       */
+      async function saveToGithub() {
+        if (!state.currentNoteId) {
+          showToast('No note selected', 'error');
+          return;
+        }
+        
+        try {
+          // Find the note
+          const note = state.notes.find(n => n.id === state.currentNoteId);
+          if (!note) {
+            showToast('Note not found', 'error');
+            return;
+          }
+          
+          // Ensure the notes directory path exists by creating directory path notation
+          const dirPath = 'notes';
+          const filename = `${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
+          const fullPath = `${dirPath}/${filename}`;
+          const content = note.content;
+          
+          // Show loading toast
+          showToast('Saving to GitHub...', 'info');
+          
+          // Step 1: First, try to get the file to see if it exists using the GitHub REST API
+          let sha;
+          try {
+            const getResponse = await fetch(`https://api.github.com/repos/${state.githubAuth.username}/${state.githubAuth.repo}/contents/${fullPath}`, {
+              method: 'GET',
+              headers: {
+                'Accept': 'application/vnd.github+json',
+                'Authorization': `Bearer ${state.githubAuth.token}`,
+                'X-GitHub-Api-Version': '2022-11-28'
+              }
+            });
+            
+            if (getResponse.status === 200) {
+              const fileData = await getResponse.json();
+              sha = fileData.sha;
+              console.log('File exists, got SHA:', sha);
+            } else if (getResponse.status === 404) {
+              console.log('File does not exist, will create new file');
+            } else {
+              // Handle other error statuses
+              const errorData = await getResponse.json();
+              throw new Error(`GitHub API error (GET): ${errorData.message}`);
+            }
+          } catch (error) {
+            // Only log the error, we'll continue with the PUT request
+            console.warn('Error checking file existence:', error);
+            // If it's not a 404, we should show a warning to the user
+            if (error.message && !error.message.includes('404')) {
+              showToast(`Warning: ${error.message}`, 'error');
+            }
+          }
+          
+          // Step 2: Create or update the file using the GitHub REST API
+          // Properly encode content to Base64 as required by the API
+          // Note: btoa() doesn't handle Unicode characters well, so we need to use encodeURIComponent
+          const base64Content = btoa(unescape(encodeURIComponent(content)));
+          
+          const requestBody = {
+            message: `Update note: ${note.title}`,
+            content: base64Content,
+            committer: {
+              name: state.githubAuth.username || 'MNotes User',
+              email: `${state.githubAuth.username || 'user'}@users.noreply.github.com`
+            }
+          };
+          
+          // Add SHA if we're updating an existing file
+          if (sha) {
+            requestBody.sha = sha;
+          }
+          
+          const response = await fetch(`https://api.github.com/repos/${state.githubAuth.username}/${state.githubAuth.repo}/contents/${fullPath}`, {
+            method: 'PUT',
+            headers: {
+              'Accept': 'application/vnd.github+json',
+              'Authorization': `Bearer ${state.githubAuth.token}`,
+              'X-GitHub-Api-Version': '2022-11-28',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+          });
+          
+          // Handle the response
+          if (response.status === 200 || response.status === 201) {
+            const responseData = await response.json();
+            console.log('File saved successfully:', responseData);
+            showToast(`Note "${note.title}" saved to GitHub successfully!`, 'success');
+            
+            // Make the HTML URL clickable
+            if (responseData.content && responseData.content.html_url) {
+              const htmlUrl = responseData.content.html_url;
+              // Show a clickable link in a modal or toast
+              const msg = `<div>File saved! <a href="${htmlUrl}" target="_blank">View on GitHub</a></div>`;
+              document.getElementById('toast').innerHTML = msg;
+            }
+          } else {
+            const errorData = await response.json();
+            throw new Error(`GitHub API error (PUT): ${errorData.message}`);
+          }
+        } catch (error) {
+          console.error('Error saving to GitHub:', error);
+          showToast(`Error saving to GitHub: ${error.message}`, 'error');
+        }
+      }
+
+      /**
+       * Save GitHub authentication credentials
+       */
+      function saveGithubAuth(event) {
+        if (event) event.preventDefault();
+        
+        // Validate inputs
+        const username = githubUsername.value.trim();
+        const token = githubToken.value.trim();
+        const repo = githubRepo.value.trim();
+        
+        if (!username || !token || !repo) {
+          githubMessage.textContent = 'All fields are required';
+          githubMessage.style.display = 'block';
+          return;
+        }
+        
+        // Save to state and localStorage
+        state.githubAuth = { username, token, repo };
+        saveGithubAuthToLocalStorage();
+        hideGithubModal();
+        
+        // Success message
+        showToast('GitHub credentials saved', 'success');
+        
+        // Try to save the current note to GitHub
+        if (state.currentNoteId) {
+          saveToGithub();
+        }
+      }
+
+      /**
+       * Clear GitHub credentials
+       */
+      function clearGithubCredentials(event) {
+        if (event) event.preventDefault();
+        
+        // Clear form fields
+        githubUsername.value = '';
+        githubToken.value = '';
+        githubRepo.value = '';
+        
+        // Clear state and localStorage
+        state.githubAuth = { username: '', token: '', repo: '' };
+        localStorage.removeItem('githubAuth');
+        
+        // Success message
+        githubMessage.textContent = 'Credentials cleared';
+        githubMessage.className = 'info-message';
+        githubMessage.style.display = 'block';
+        
+        // Hide message after a delay
+        setTimeout(() => {
+          githubMessage.style.display = 'none';
+        }, 3000);
+      }
+
+      /**
+       * Save GitHub auth to localStorage
+       */
+      function saveGithubAuthToLocalStorage() {
+        try {
+          localStorage.setItem('githubAuth', JSON.stringify(state.githubAuth));
+        } catch (error) {
+          console.error('Error saving GitHub auth to localStorage:', error);
+          showToast('Error saving GitHub credentials', 'error');
+        }
+      }
+
+      /* ================= UI OPERATIONS ================= */
+      
+      /**
+       * Toggle the sidebar visibility
+       */
+      function toggleSidebar(event) {
+        if (event) event.preventDefault();
+        
+        state.ui.isSidebarOpen = !state.ui.isSidebarOpen;
+        updateSidebarVisibility();
+      }
+
+      /**
+       * Update sidebar visibility based on state
+       */
+      function updateSidebarVisibility() {
+        if (state.ui.isSidebarOpen) {
+          sidebar.classList.add('open');
+        } else {
+          sidebar.classList.remove('open');
+        }
+      }
+
+      /**
+       * Toggle markdown preview
+       */
+      function togglePreview(event) {
+        if (event) event.preventDefault();
+        
+        state.editor.isPreviewActive = !state.editor.isPreviewActive;
+        
+        if (state.editor.isPreviewActive) {
+          renderMarkdownPreview();
+          markdownPreview.classList.remove('hidden');
+          togglePreviewBtn.querySelector('.button-text').textContent = 'Editor';
+        } else {
+          markdownPreview.classList.add('hidden');
+          togglePreviewBtn.querySelector('.button-text').textContent = 'Preview';
+        }
+        
+        // For mobile, adjust the editor wrapper
+        if (window.innerWidth <= 768) {
+          const editorWrapper = document.querySelector('.editor-wrapper');
+          editorWrapper.style.flexDirection = state.editor.isPreviewActive ? 'column' : 'row';
+        }
+      }
+
+      /**
+       * Render the markdown preview
+       */
+      function renderMarkdownPreview() {
+        if (!state.editor.isPreviewActive) return;
+        
+        try {
+          // Simple markdown to HTML conversion
+          let html = simpleMarkdownToHtml(editor.value);
+          markdownPreview.innerHTML = html;
+          
+          // Add classes for styling
+          markdownPreview.querySelectorAll('pre code').forEach(block => {
+            block.className = 'language-js';
+          });
+        } catch (error) {
+          console.error('Error rendering markdown:', error);
+          markdownPreview.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
+        }
+      }
+
+      /**
+       * Simple markdown to HTML conversion
+       * @param {string} markdown - The markdown text to convert
+       * @returns {string} - The converted HTML
+       */
+      function simpleMarkdownToHtml(markdown) {
+        if (!markdown) return '';
+        
+        let html = markdown;
+        
+        // Escape HTML
+        html = html.replace(/&/g, '&amp;')
+                 .replace(/</g, '&lt;')
+                 .replace(/>/g, '&gt;');
+        
+        // Headers
+        html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
+        html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
+        html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
+        html = html.replace(/^#### (.*$)/gm, '<h4>$1</h4>');
+        html = html.replace(/^##### (.*$)/gm, '<h5>$1</h5>');
+        html = html.replace(/^###### (.*$)/gm, '<h6>$1</h6>');
+        
+        // Bold
+        html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        
+        // Italic
+        html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+        
+        // Code blocks
+        html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
+        
+        // Inline code
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        
+        // Lists
+        html = html.replace(/^\s*\- (.*$)/gm, '<li>$1</li>');
+        html = html.replace(/(<li>.*<\/li>\n)+/g, '<ul>$&</ul>');
+        
+        // Links
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+        
+        // Images
+        html = html.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+        
+        // Blockquotes
+        html = html.replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>');
+        
+        // Paragraphs
+        html = html.replace(/\n\n(.*?)\n\n/g, '<p>$1</p>');
+        
+        // Line breaks
+        html = html.replace(/\n/g, '<br>');
+        
+        return html;
+      }
+
+      /**
+       * Update the active note in the list
+       */
+      function updateActiveNoteInList() {
+        const noteItems = document.querySelectorAll('.note-item');
+        noteItems.forEach(item => {
+          if (item.dataset.id === state.currentNoteId) {
+            item.classList.add('active');
+            item.setAttribute('aria-current', 'true');
+            
+            // Scroll into view if necessary
+            if (!isElementInViewport(item)) {
+              item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+          } else {
+            item.classList.remove('active');
+            item.setAttribute('aria-current', 'false');
+          }
+        });
+      }
+
+      /**
+       * Check if an element is visible in the viewport
+       * @param {HTMLElement} element - The element to check
+       * @returns {boolean} - Whether the element is in the viewport
+       */
+      function isElementInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+      }
+
+      /**
+       * Update the word count
+       */
+      function updateWordCount() {
+        try {
+          const text = editor.value.trim();
+          const words = text ? text.split(/\s+/).length : 0;
+          wordCount.textContent = `${words} word${words === 1 ? '' : 's'}`;
+        } catch (error) {
+          console.error('Error updating word count:', error);
+        }
+      }
+
+      /**
+       * Update the last saved timestamp
+       * @param {string|null} timestamp - ISO timestamp string or null
+       */
+      function updateLastSaved(timestamp) {
+        if (!timestamp) {
+          lastSaved.textContent = 'Not saved yet';
+          return;
+        }
+        
+        try {
+          const date = new Date(timestamp);
+          lastSaved.textContent = `Last saved: ${date.toLocaleString()}`;
+          state.ui.lastSaveTimestamp = timestamp;
+        } catch (error) {
+          console.error('Error updating last saved:', error);
+          lastSaved.textContent = 'Last saved: Unknown';
+        }
+      }
+
+      /**
+       * Update UI elements based on current state
+       */
+      function updateButtonStates() {
+        const hasCurrentNote = !!state.currentNoteId;
+        
+        // Disable buttons if no note is selected
+        saveNoteBtn.disabled = !hasCurrentNote;
+        downloadNoteBtn.disabled = !hasCurrentNote;
+        deleteNoteBtn.disabled = !hasCurrentNote;
+        formatBoldBtn.disabled = !hasCurrentNote;
+        formatItalicBtn.disabled = !hasCurrentNote;
+        formatCodeBtn.disabled = !hasCurrentNote;
+        formatListBtn.disabled = !hasCurrentNote;
+        togglePreviewBtn.disabled = !hasCurrentNote;
+        
+        // GitHub button is only disabled if no note is selected
+        // It's always enabled if a note is selected, regardless of auth status
+        githubSaveBtn.disabled = !hasCurrentNote;
+        
+        // Editor is disabled if no note is selected
+        editor.disabled = !hasCurrentNote;
+      }
+
+      /**
+       * Set the theme
+       * @param {string} theme - 'light', 'dark', or 'sepia'
+       */
+      function setTheme(theme) {
+        if (!theme || !['light', 'dark', 'sepia'].includes(theme)) {
+          theme = 'light';
+        }
+        
+        state.ui.theme = theme;
+        updateThemeUI();
+        
+        try {
+          localStorage.setItem('theme', theme);
+        } catch (error) {
+          console.error('Error saving theme to localStorage:', error);
+        }
+      }
+
+      /**
+       * Update the UI based on current theme
+       */
+      function updateThemeUI() {
+        // Remove all theme classes from body
+        document.body.classList.remove('theme-light', 'theme-dark', 'theme-sepia');
+        
+        // Add the current theme class if not light (default)
+        if (state.ui.theme !== 'light') {
+          document.body.classList.add(`theme-${state.ui.theme}`);
+        }
+        
+        // Update theme buttons
+        themeButtons.forEach(button => {
+          if (button.dataset.theme === state.ui.theme) {
+            button.classList.add('active');
+          } else {
+            button.classList.remove('active');
+          }
+        });
+        
+        // Force repaint for some browsers
+        document.body.style.display = 'none';
+        document.body.offsetHeight; // Trigger a reflow
+        document.body.style.display = '';
+      }
+
+      /**
+       * Handle search input
+       */
+      function handleSearchInput() {
+        state.ui.searchQuery = searchInput.value.trim().toLowerCase();
+        
+        // Show/hide clear button
+        if (state.ui.searchQuery) {
+          clearSearchBtn.classList.add('visible');
+        } else {
+          clearSearchBtn.classList.remove('visible');
+        }
+        
+        renderNoteList();
+      }
+
+      /**
+       * Clear the search
+       */
+      function clearSearch() {
+        searchInput.value = '';
+        state.ui.searchQuery = '';
+        clearSearchBtn.classList.remove('visible');
+        renderNoteList();
+        searchInput.focus();
+      }
+
+      /**
+       * Show a toast notification
+       * @param {string} message - The message to display
+       * @param {string} type - 'success', 'error', or 'info'
+       */
+      function showToast(message, type = 'info') {
+        // Clear any existing toast timeout
+        if (window.toastTimeout) {
+          clearTimeout(window.toastTimeout);
+        }
+        
+        // Set type class
+        toast.className = 'toast toast-' + type;
+        toast.textContent = message;
+        toast.classList.add('visible');
+        
+        // Hide after 3 seconds
+        window.toastTimeout = setTimeout(() => {
+          toast.classList.remove('visible');
+        }, 3000);
+      }
+
+      /* ================= EVENT HANDLERS ================= */
+      
+      /**
+       * Handle editor input
+       */
+      function handleEditorInput() {
+        updateWordCount();
+        
+        // Mark as having unsaved changes if content differs from last saved
+        const hasChanges = editor.value !== state.editor.lastSavedContent;
+        if (hasChanges !== state.editor.hasUnsavedChanges) {
+          state.editor.hasUnsavedChanges = hasChanges;
+        }
+        
+        // Update preview if active
+        if (state.editor.isPreviewActive) {
+          // Debounce preview rendering
+          if (window.previewTimeout) {
+            clearTimeout(window.previewTimeout);
+          }
+          window.previewTimeout = setTimeout(renderMarkdownPreview, 300);
+        }
+        
+        // Debounce auto-save
+        if (editorChangeTimeout) {
+          clearTimeout(editorChangeTimeout);
+        }
+        
+        editorChangeTimeout = setTimeout(() => {
+          if (state.editor.hasUnsavedChanges) {
+            autoSaveNote();
+          }
+        }, 3000);
+      }
+
+      /**
+       * Handle keyboard shortcuts in the editor
+       * @param {KeyboardEvent} event - The keyboard event
+       */
+      function handleEditorKeydown(event) {
+        // Save on Ctrl+S or Cmd+S
+        if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+          event.preventDefault();
+          saveCurrentNote();
+          return;
+        }
+        
+        // Preview on Ctrl+P or Cmd+P
+        if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+          event.preventDefault();
+          togglePreview();
+          return;
+        }
+        
+        // Bold on Ctrl+B or Cmd+B
+        if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
+          event.preventDefault();
+          insertFormatting('**', '**', 'bold text');
+          return;
+        }
+        
+        // Italic on Ctrl+I or Cmd+I
+        if ((event.ctrlKey || event.metaKey) && event.key === 'i') {
+          event.preventDefault();
+          insertFormatting('*', '*', 'italic text');
+          return;
+        }
+        
+        // Tab key inside the editor should insert spaces
+        if (event.key === 'Tab') {
+          event.preventDefault();
+          
+          const start = editor.selectionStart;
+          const end = editor.selectionEnd;
+          
+          // Insert 2 spaces at cursor position
+          editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
+          
+          // Move cursor position after the inserted spaces
+          editor.selectionStart = editor.selectionEnd = start + 2;
+          
+          // Trigger input event for auto-save
+          editor.dispatchEvent(new Event('input'));
+        }
+      }
+
+      /**
+       * Insert formatting into the editor
+       * @param {string} before - Text to insert before selection
+       * @param {string} after - Text to insert after selection
+       * @param {string} placeholder - Placeholder if nothing is selected
+       */
+      function insertFormatting(before, after, placeholder) {
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
+        const selectedText = editor.value.substring(start, end);
+        const replacement = selectedText.length > 0 ? selectedText : placeholder;
+        
+        // Insert the formatted text
+        editor.value = editor.value.substring(0, start) 
+                      + before 
+                      + replacement 
+                      + after 
+                      + editor.value.substring(end);
+        
+        // Set the selection to include the new text
+        const newCursorPos = selectedText.length > 0 
+          ? end + before.length + after.length 
+          : start + before.length + placeholder.length;
+        
+        editor.focus();
+        editor.selectionStart = selectedText.length > 0 ? start : start + before.length;
+        editor.selectionEnd = selectedText.length > 0 ? newCursorPos : start + before.length + placeholder.length;
+        
+        // Trigger input event for auto-save and preview update
+        editor.dispatchEvent(new Event('input'));
+      }
+
+      /**
+       * Handle creating a new note from the modal
+       */
+      function handleCreateNewNote() {
+        const title = newNoteTitle.value.trim();
+        if (!title) {
+          // Show error in modal
+          const errorMsg = document.createElement('div');
+          errorMsg.className = 'info-message';
+          errorMsg.textContent = 'Please enter a title';
+          errorMsg.style.display = 'block';
+          
+          // Add after the input field
+          const formField = newNoteTitle.closest('.form-field');
+          
+          // Remove any existing error message
+          const existingError = formField.querySelector('.info-message');
+          if (existingError) {
+            formField.removeChild(existingError);
+          }
+          
+          formField.appendChild(errorMsg);
+          
+          // Focus the input field
+          newNoteTitle.focus();
+          return;
+        }
+        
+        createNewNote(title);
+        hideNewNoteModal();
+      }
+
+      /**
+       * Handle actions from the unsaved changes modal
+       * @param {string} action - 'save', 'discard', or 'cancel'
+       */
+      function handleUnsavedChangesAction(action) {
+        hideUnsavedChangesModal();
+        
+        switch (action) {
+          case 'save':
+            // Save changes, then open the pending note
+            if (saveCurrentNote(null, true) && state.ui.pendingNoteToOpen) {
+              openNote(state.ui.pendingNoteToOpen);
+              state.ui.pendingNoteToOpen = null;
+            }
+            break;
+            
+          case 'discard':
+            // Discard changes and open the pending note
+            state.editor.hasUnsavedChanges = false;
+            if (state.ui.pendingNoteToOpen) {
+              openNote(state.ui.pendingNoteToOpen);
+              state.ui.pendingNoteToOpen = null;
+            }
+            break;
+            
+          case 'cancel':
+            // Do nothing, keep editing the current note
+            state.ui.pendingNoteToOpen = null;
+            break;
+        }
+      }
+
+      /**
+       * Handle beforeunload event to warn about unsaved changes
+       * @param {BeforeUnloadEvent} event - The beforeunload event
+       */
+      function handleBeforeUnload(event) {
+        if (state.editor.hasUnsavedChanges) {
+          const message = 'You have unsaved changes. Are you sure you want to leave?';
+          event.returnValue = message;
+          return message;
+        }
+      }
+
+      /* ================= RENDERING ================= */
+      
+      /**
+       * Render the note list
+       */
+      function renderNoteList() {
+        // Clear current list
+        noteList.innerHTML = '';
+        
+        // Get notes to display based on search
+        const notesToDisplay = state.ui.searchQuery
+          ? state.notes.filter(note => {
+              return note.title.toLowerCase().includes(state.ui.searchQuery) ||
+                     note.content.toLowerCase().includes(state.ui.searchQuery);
+            })
+          : state.notes;
+        
+        if (notesToDisplay.length === 0) {
+          const emptyItem = document.createElement('li');
+          emptyItem.className = 'note-item';
+          
+          if (state.ui.searchQuery) {
+            emptyItem.textContent = 'No matching notes found';
+          } else {
+            emptyItem.textContent = 'No notes yet';
+          }
+          
+          noteList.appendChild(emptyItem);
+          return;
+        }
+        
+        // Sort notes by updated date (newest first)
+        const sortedNotes = [...notesToDisplay].sort((a, b) => {
+          return new Date(b.updatedAt) - new Date(a.updatedAt);
+        });
+        
+        // Create list items
+        sortedNotes.forEach(note => {
+          const noteItem = document.createElement('li');
+          noteItem.className = 'note-item';
+          noteItem.setAttribute('role', 'listitem');
+          noteItem.setAttribute('tabindex', '0');
+          noteItem.setAttribute('aria-label', note.title);
+          
+          if (note.id === state.currentNoteId) {
+            noteItem.classList.add('active');
+            noteItem.setAttribute('aria-current', 'true');
+          } else {
+            noteItem.setAttribute('aria-current', 'false');
+          }
+          
+          noteItem.dataset.id = note.id;
+          
+          const titleElement = document.createElement('div');
+          titleElement.className = 'note-item-title';
+          titleElement.textContent = note.title;
+          
+          const previewElement = document.createElement('div');
+          previewElement.className = 'note-item-preview';
+          
+          // Highlight matching text if searching
+          if (state.ui.searchQuery && note.content.toLowerCase().includes(state.ui.searchQuery)) {
+            const content = note.content;
+            const query = state.ui.searchQuery;
+            
+            // Find the first occurrence of the query
+            const index = content.toLowerCase().indexOf(query);
+            
+            // Get some context around the match
+            const start = Math.max(0, index - 20);
+            const end = Math.min(content.length, index + query.length + 20);
+            
+            let preview = content.substring(start, end);
+            
+            // Add ellipsis if truncated
+            if (start > 0) preview = '...' + preview;
+            if (end < content.length) preview = preview + '...';
+            
+            previewElement.textContent = preview;
+          } else {
+            previewElement.textContent = note.content.substring(0, 50) || 'Empty note';
+          }
+          
+          const dateElement = document.createElement('div');
+          dateElement.className = 'note-date';
+          
+          // Format the date
+          const date = new Date(note.updatedAt);
+          const now = new Date();
+          let dateStr = '';
+          
+          // If same day, show time
+          if (date.toDateString() === now.toDateString()) {
+            dateStr = 'Today at ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+          } else {
+            // Show date
+            dateStr = date.toLocaleDateString([], { month: 'short', day: 'numeric', year: now.getFullYear() !== date.getFullYear() ? 'numeric' : undefined });
+          }
+          
+          dateElement.textContent = dateStr;
+          
+          noteItem.appendChild(titleElement);
+          noteItem.appendChild(previewElement);
+          noteItem.appendChild(dateElement);
+          
+          // Add event listeners
+          noteItem.addEventListener('click', () => {
+            openNote(note.id);
+          });
+          
+          noteItem.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              openNote(note.id);
+            }
+          });
+          
+          noteList.appendChild(noteItem);
+        });
+      }
+
+      /**
+       * Save notes to localStorage
+       */
+      function saveNotesToLocalStorage() {
+        try {
+          localStorage.setItem('notes', JSON.stringify(state.notes));
+        } catch (error) {
+          console.error('Error saving notes to localStorage:', error);
+          showToast('Error saving notes: ' + error.message, 'error');
+        }
+      }
+
+      /* ================= MODALS ================= */
+      
+      /**
+       * Show the GitHub auth modal
+       */
+      function showGithubModal() {
+        // Set form values
+        githubUsername.value = state.githubAuth.username || '';
+        githubToken.value = state.githubAuth.token || '';
+        githubRepo.value = state.githubAuth.repo || '';
+        
+        // Clear any error messages
+        githubMessage.style.display = 'none';
+        
+        // Show the modal
+        githubModal.style.display = 'flex';
+        githubModal.classList.add('visible');
+        
+        // Focus the first empty field
+        if (!state.githubAuth.username) {
+          githubUsername.focus();
+        } else if (!state.githubAuth.token) {
+          githubToken.focus();
+        } else if (!state.githubAuth.repo) {
+          githubRepo.focus();
+        } else {
+          githubUsername.focus();
+        }
+      }
+
+      /**
+       * Hide the GitHub auth modal
+       */
+      function hideGithubModal() {
+        githubModal.classList.remove('visible');
+        setTimeout(() => {
+          githubModal.style.display = 'none';
+        }, 300);
+      }
+
+      /**
+       * Show the new note modal
+       */
+      function showNewNoteModal() {
+        newNoteTitle.value = '';
+        
+        // Remove any error messages
+        const errorMsg = newNoteTitle.closest('.form-field').querySelector('.info-message');
+        if (errorMsg) {
+          errorMsg.remove();
+        }
+        
+        newNoteModal.style.display = 'flex';
+        newNoteModal.classList.add('visible');
+        newNoteTitle.focus();
+      }
+
+      /**
+       * Hide the new note modal
+       */
+      function hideNewNoteModal() {
+        newNoteModal.classList.remove('visible');
+        setTimeout(() => {
+          newNoteModal.style.display = 'none';
+        }, 300);
+      }
+
+      /**
+       * Show delete confirmation modal
+       */
+      function showDeleteConfirmation() {
+        if (!state.currentNoteId) {
+          showToast('No note selected', 'error');
+          return;
+        }
+        
+        deleteConfirmModal.style.display = 'flex';
+        deleteConfirmModal.classList.add('visible');
+      }
+
+      /**
+       * Hide delete confirmation modal
+       */
+      function hideDeleteConfirmModal() {
+        deleteConfirmModal.classList.remove('visible');
+        setTimeout(() => {
+          deleteConfirmModal.style.display = 'none';
+        }, 300);
+      }
+
+      /**
+       * Show unsaved changes modal
+       */
+      function showUnsavedChangesModal() {
+        unsavedChangesModal.style.display = 'flex';
+        unsavedChangesModal.classList.add('visible');
+      }
+
+      /**
+       * Hide unsaved changes modal
+       */
+      function hideUnsavedChangesModal() {
+        unsavedChangesModal.classList.remove('visible');
+        setTimeout(() => {
+          unsavedChangesModal.style.display = 'none';
+        }, 300);
+      }
+
+      /* ================= STARTUP ================= */
+      
+      /* ================= THEME CUSTOMIZATION ================= */
+
+      /**
+       * Apply custom theme colors
+       */
+      function applyCustomThemeColors() {
+        // Get the current theme
+        const currentTheme = state.ui.theme;
+        
+        // Get custom colors for this theme
+        const themeColors = state.customThemeColors[currentTheme];
+        
+        if (themeColors && themeColors.primary) {
+          // Set CSS variable
+          document.documentElement.style.setProperty('--primary-color', themeColors.primary);
+          
+          // Derive other colors based on primary (simplified version)
+          if (currentTheme === 'light') {
+            document.documentElement.style.setProperty('--primary-container-color', adjustColor(themeColors.primary, 80));
+            document.documentElement.style.setProperty('--on-primary-color', isDarkColor(themeColors.primary) ? '#FFFFFF' : '#000000');
+            document.documentElement.style.setProperty('--on-primary-container-color', isDarkColor(adjustColor(themeColors.primary, 80)) ? '#FFFFFF' : '#000000');
+          } else if (currentTheme === 'dark') {
+            document.documentElement.style.setProperty('--primary-container-color', adjustColor(themeColors.primary, -40));
+            document.documentElement.style.setProperty('--on-primary-color', isDarkColor(themeColors.primary) ? '#FFFFFF' : '#000000');
+            document.documentElement.style.setProperty('--on-primary-container-color', isDarkColor(adjustColor(themeColors.primary, -40)) ? '#FFFFFF' : '#000000');
+          } else if (currentTheme === 'sepia') {
+            document.documentElement.style.setProperty('--primary-container-color', adjustColor(themeColors.primary, 80));
+            document.documentElement.style.setProperty('--on-primary-color', isDarkColor(themeColors.primary) ? '#FFFFFF' : '#000000');
+            document.documentElement.style.setProperty('--on-primary-container-color', isDarkColor(adjustColor(themeColors.primary, 80)) ? '#FFFFFF' : '#000000');
+          }
+        }
+      }
+
+      /**
+       * Check if a color is dark
+       * @param {string} color - CSS color value
+       * @returns {boolean} - Whether the color is dark
+       */
+      function isDarkColor(color) {
+        // Convert hex to RGB
+        let r, g, b;
+        
+        if (color.startsWith('#')) {
+          color = color.substring(1);
+          r = parseInt(color.substring(0, 2), 16);
+          g = parseInt(color.substring(2, 4), 16);
+          b = parseInt(color.substring(4, 6), 16);
+        } else if (color.startsWith('rgb')) {
+          const matches = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+          if (matches) {
+            r = parseInt(matches[1]);
+            g = parseInt(matches[2]);
+            b = parseInt(matches[3]);
+          } else {
+            return false;
+          }
+        } else {
+          return false;
+        }
+        
+        // Calculate relative luminance using WCAG formula
+        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+        
+        // If luminance < 128, color is dark
+        return luminance < 128;
+      }
+
+      /**
+       * Adjust a color by a percentage
+       * @param {string} color - CSS color value (hex)
+       * @param {number} percent - Percentage to adjust (positive lightens, negative darkens)
+       * @returns {string} - Adjusted hex color
+       */
+      function adjustColor(color, percent) {
+        if (!color.startsWith('#')) {
+          return color;
+        }
+        
+        color = color.substring(1);
+        
+        let r = parseInt(color.substring(0, 2), 16);
+        let g = parseInt(color.substring(2, 4), 16);
+        let b = parseInt(color.substring(4, 6), 16);
+        
+        r = Math.min(255, Math.max(0, r + (percent * 2.55)));
+        g = Math.min(255, Math.max(0, g + (percent * 2.55)));
+        b = Math.min(255, Math.max(0, b + (percent * 2.55)));
+        
+        const rr = Math.round(r).toString(16).padStart(2, '0');
+        const gg = Math.round(g).toString(16).padStart(2, '0');
+        const bb = Math.round(b).toString(16).padStart(2, '0');
+        
+        return `#${rr}${gg}${bb}`;
+      }
+
+      /**
+       * Show theme customization modal
+       */
+      function showThemeCustomizationModal() {
+        // Set the active theme tab
+        document.querySelectorAll('.theme-tab').forEach(tab => {
+          if (tab.dataset.themeTab === state.ui.theme) {
+            tab.classList.add('active');
+          } else {
+            tab.classList.remove('active');
+          }
+        });
+        
+        // Set the color picker to the current theme's color
+        const currentThemeColor = state.customThemeColors[state.ui.theme]?.primary || 
+                                 defaultThemeColors[state.ui.theme]?.primary || 
+                                 '#000000';
+        
+        document.getElementById('primaryColorPicker').value = currentThemeColor;
+        document.getElementById('primaryColorHex').value = currentThemeColor;
+        
+        // Show the modal
+        const modal = document.getElementById('themeCustomizationModal');
+        modal.style.display = 'flex';
+        modal.classList.add('visible');
+      }
+
+      /**
+       * Save theme customization
+       */
+      function saveThemeCustomization() {
+        // Get the active theme tab
+        const activeThemeTab = document.querySelector('.theme-tab.active').dataset.themeTab;
+        
+        // Get the selected color
+        const selectedColor = document.getElementById('primaryColorPicker').value;
+        
+        // Update the state
+        state.customThemeColors[activeThemeTab] = {
+          primary: selectedColor
+        };
+        
+        // Save to localStorage
+        localStorage.setItem('customThemeColors', JSON.stringify(state.customThemeColors));
+        
+        // Apply the new colors
+        applyCustomThemeColors();
+        
+        // Hide the modal
+        const modal = document.getElementById('themeCustomizationModal');
+        modal.classList.remove('visible');
+        setTimeout(() => {
+          modal.style.display = 'none';
+        }, 300);
+        
+        // Show success message
+        showToast('Theme colors saved', 'success');
+      }
+
+      /**
+       * Reset theme colors to defaults
+       */
+      function resetThemeColors() {
+        // Get the active theme tab
+        const activeThemeTab = document.querySelector('.theme-tab.active').dataset.themeTab;
+        
+        // Reset to default color
+        const defaultColor = defaultThemeColors[activeThemeTab]?.primary || '#000000';
+        
+        // Update inputs
+        document.getElementById('primaryColorPicker').value = defaultColor;
+        document.getElementById('primaryColorHex').value = defaultColor;
+        
+        // Update state
+        state.customThemeColors[activeThemeTab] = {
+          primary: defaultColor
+        };
+        
+        // Save to localStorage
+        localStorage.setItem('customThemeColors', JSON.stringify(state.customThemeColors));
+        
+        // Apply the new colors
+        applyCustomThemeColors();
+        
+        // Show success message
+        showToast('Theme colors reset to default', 'success');
+      }
+
+      /* ================= ABOUT DIALOG ================= */
+
+      /**
+       * Show the about dialog
+       */
+      function showAboutDialog() {
+        // Load version from README.md
+        fetchVersionFromReadme();
+        
+        // Show the modal
+        const modal = document.getElementById('aboutModal');
+        modal.style.display = 'flex';
+        modal.classList.add('visible');
+      }
+
+      /**
+       * Hide the about dialog
+       */
+      function hideAboutDialog() {
+        const modal = document.getElementById('aboutModal');
+        modal.classList.remove('visible');
+        setTimeout(() => {
+          modal.style.display = 'none';
+        }, 300);
+      }
+
+      /**
+       * Fetch version information from README.md
+       */
+      function fetchVersionFromReadme() {
+        fetch('README.md')
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Failed to fetch README.md: ${response.status} ${response.statusText}`);
+            }
+            return response.text();
+          })
+          .then(content => {
+            // Extract version using regex
+            const versionMatch = content.match(/Version(?:\s+|:\s*)(v?\d+\.\d+\.\d+(?:-\w+)?)/i);
+            
+            if (versionMatch && versionMatch[1]) {
+              // Update version element
+              document.getElementById('appVersion').textContent = `Version ${versionMatch[1]}`;
+            } else {
+              console.warn('Could not extract version from README.md');
+              document.getElementById('appVersion').textContent = 'Version Unknown';
+            }
+          })
+          .catch(error => {
+            console.error('Error fetching README.md:', error);
+            document.getElementById('appVersion').textContent = 'Version Unknown';
+          });
+      }
+
+      /* ================= NEWS SYSTEM ================= */
+
+      /**
+       * Show news modal
+       */
+      function showNewsModal() {
+        // Load news content
+        fetchNewsContent();
+        
+        // Show the modal
+        const modal = document.getElementById('newsModal');
+        modal.style.display = 'flex';
+        modal.classList.add('visible');
+      }
+
+      /**
+       * Hide news modal
+       */
+      function hideNewsModal() {
+        const modal = document.getElementById('newsModal');
+        modal.classList.remove('visible');
+        setTimeout(() => {
+          modal.style.display = 'none';
+        }, 300);
+        
+        // Save "don't show again" preference if checked
+        const dontShowAgain = document.getElementById('dontShowAgain').checked;
+        if (dontShowAgain) {
+          saveNewsPreference();
+        }
+      }
+
+      /**
+       * Save news preference
+       */
+      function saveNewsPreference() {
+        try {
+          // Get current news hash to identify if there are new updates
+          fetch('news.md')
+            .then(response => response.text())
+            .then(content => {
+              // Create a simple hash of the content
+              const newsHash = hashString(content);
+              localStorage.setItem('newsLastShown', newsHash);
+              console.log('Saved news preference with hash:', newsHash);
+            })
+            .catch(error => {
+              console.error('Error saving news preference:', error);
+            });
+        } catch (error) {
+          console.error('Error saving news preference:', error);
+        }
+      }
+
+      /**
+       * Check if news should be shown
+       */
+      function checkShouldShowNews() {
+        try {
+          // If user has never seen news or there are new updates, show news
+          fetch('news.md')
+            .then(response => response.text())
+            .then(content => {
+              // Create a simple hash of the content
+              const currentNewsHash = hashString(content);
+              const lastShownHash = localStorage.getItem('newsLastShown');
+              
+              console.log('News check:', { currentNewsHash, lastShownHash });
+              
+              if (!lastShownHash || currentNewsHash !== lastShownHash) {
+                // Show news dialog
+                showNewsModal();
+              }
+            })
+            .catch(error => {
+              console.error('Error checking news:', error);
+            });
+        } catch (error) {
+          console.error('Error checking news status:', error);
+        }
+      }
+
+      /**
+       * Create a simple hash of a string
+       * @param {string} str - The string to hash
+       * @returns {string} - A simple hash of the string
+       */
+      function hashString(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+          hash = ((hash << 5) - hash) + str.charCodeAt(i);
+          hash |= 0; // Convert to 32bit integer
+        }
+        return hash.toString(16);
+      }
+
+      /**
+       * Fetch and render news content
+       */
+      function fetchNewsContent() {
+        const newsContent = document.getElementById('newsContent');
+        newsContent.innerHTML = '<p>Loading news...</p>';
+        
+        fetch('news.md')
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Failed to fetch news.md: ${response.status} ${response.statusText}`);
+            }
+            return response.text();
+          })
+          .then(content => {
+            // Convert markdown to HTML
+            const html = simpleMarkdownToHtml(content);
+            newsContent.innerHTML = html;
+          })
+          .catch(error => {
+            console.error('Error fetching news:', error);
+            newsContent.innerHTML = `<p>Error loading news: ${error.message}</p>`;
+          });
+      }
+
+      /* ================= INITIALIZATION ================= */
+      
+      /**
+       * Initialize the application
+       */
+      function initialize() {
+        // Initialize state values
+        state.customThemeColors = JSON.parse(localStorage.getItem('customThemeColors') || '{}');
+        
+        // Define default theme colors
+        window.defaultThemeColors = {
+          light: { primary: '#006A6A' },
+          dark: { primary: '#4CDADA' },
+          sepia: { primary: '#8B5000' }
+        };
+        
+        // Load data from localStorage
+        loadFromLocalStorage();
+        
+        // Attach all event listeners including new ones
+        attachAllEventListeners();
+        
+        // Create first note if none exist
+        if (state.notes.length === 0) {
+          createNewNote('Welcome to MNotes', 'Start typing to create your first note!');
+        } else {
+          renderNoteList();
+          // Open the most recently updated note
+          const mostRecentNote = [...state.notes].sort((a, b) => {
+            return new Date(b.updatedAt) - new Date(a.updatedAt);
+          })[0];
+          openNote(mostRecentNote.id);
+        }
+        
+        // Set initial UI state
+        updateSidebarVisibility();
+        updateThemeUI();
+        applyCustomThemeColors();
+        
+        // Check for news
+        setTimeout(checkShouldShowNews, 1000);
+        
+        // Fetch version information
+        fetchVersionFromReadme();
+      }
+
+      /**
+       * Attach all event listeners
+       * Extends attachEventListeners to include new UI elements
+       */
+      function attachAllEventListeners() {
+        // Call the original attachEventListeners function
+        attachEventListeners();
+        
+        // Add event listeners for new components
+        
+        // About dialog
+        const aboutBtn = document.getElementById('aboutBtn');
+        const closeAbout = document.getElementById('closeAbout');
+        
+        aboutBtn.addEventListener('click', showAboutDialog);
+        closeAbout.addEventListener('click', hideAboutDialog);
+        
+        // News modal
+        const closeNews = document.getElementById('closeNews');
+        closeNews.addEventListener('click', hideNewsModal);
+        
+        // Theme customization
+        const customizeThemeBtn = document.getElementById('customizeThemeBtn');
+        const saveThemeCustomizationBtn = document.getElementById('saveThemeCustomization');
+        const cancelThemeCustomizationBtn = document.getElementById('cancelThemeCustomization');
+        const resetThemeColorsBtn = document.getElementById('resetThemeColors');
+        const themeTabs = document.querySelectorAll('.theme-tab');
+        const primaryColorPicker = document.getElementById('primaryColorPicker');
+        const primaryColorHex = document.getElementById('primaryColorHex');
+        
+        customizeThemeBtn.addEventListener('click', showThemeCustomizationModal);
+        saveThemeCustomizationBtn.addEventListener('click', saveThemeCustomization);
+        cancelThemeCustomizationBtn.addEventListener('click', () => {
+          const modal = document.getElementById('themeCustomizationModal');
+          modal.classList.remove('visible');
+          setTimeout(() => {
+            modal.style.display = 'none';
+          }, 300);
+        });
+        resetThemeColorsBtn.addEventListener('click', resetThemeColors);
+        
+        // Theme tabs
+        themeTabs.forEach(tab => {
+          tab.addEventListener('click', () => {
+            // Update active tab
+            themeTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // Update color picker
+            const themeId = tab.dataset.themeTab;
+            const themeColor = state.customThemeColors[themeId]?.primary || 
+                              defaultThemeColors[themeId]?.primary || 
+                              '#000000';
+            
+            primaryColorPicker.value = themeColor;
+            primaryColorHex.value = themeColor;
+          });
+        });
+        
+        // Sync color picker with hex input
+        primaryColorPicker.addEventListener('input', () => {
+          primaryColorHex.value = primaryColorPicker.value;
+        });
+        
+        primaryColorHex.addEventListener('input', () => {
+          // Check if valid hex color
+          if (/^#[0-9A-F]{6}$/i.test(primaryColorHex.value)) {
+            primaryColorPicker.value = primaryColorHex.value;
+          }
+        });
+      }
+
+      // Initialize the application
+      initialize();
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4078575..4fc4940 100644
--- a/index.html
+++ b/index.html
@@ -5,56 +5,126 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MNotes</title>
 
-    <!-- Material Symbols -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-
     <!-- Roboto Font (recommended for Material Design) -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 
+    <!-- Material Symbols -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+    <!-- External stylesheet -->
     <link rel="stylesheet" href="style.css">
 
-    <!-- Material Web Components (MWC) - Using a more recent version -->
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.4.1/all.js"></script>
+    <!-- Import map for Material Web Components -->
+    <script type="importmap">
+      {
+        "imports": {
+          "@material/web/": "https://esm.run/@material/web/"
+        }
+      }
+    </script>
+    
+    <!-- Import Material Web Components -->
+    <script type="module">
+      import '@material/web/all.js';
+      import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+
+      // Apply typescale styles to the document
+      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
+    </script>
 
     <style>
-        /* Minimal pre-render styles to avoid FOUC and ensure basic layout */
-        body {
-            font-family: 'Roboto', sans-serif;
-            margin: 0;
-            /* Fallback colors, MWC themes will override */
-            background-color: #fff;
-            color: #000;
-            opacity: 0; /* Initially hide body to prevent FOUC */
-            transition: opacity 0.2s ease-in-out;
-        }
-        body.loaded {
-            opacity: 1; /* Show body once MWC is likely ready */
-        }
-        /* Hide dialog by default to prevent flash of content if MWC is slow */
-        md-dialog {
-            display: none;
-        }
-        md-dialog[open] { /* MWC sets 'open' attribute which makes it visible */
-            display: flex; /* Or block, MWC handles actual display type */
-        }
+      /* Theme variables and overrides */
+      :root {
+        /* Light theme is the default in style.css */
+        transition: all 0.3s ease;
+      }
+      
+      /* Dark theme overrides */
+      body.dark-theme {
+        background-color: #141218 !important;
+        color: #E6E0E9 !important;
+      }
+      
+      /* Force Material component theming */
+      body.dark-theme {
+        --md-sys-color-background: #141218;
+        --md-sys-color-on-background: #E6E0E9;
+        --md-sys-color-surface: #1C1B1F;
+        --md-sys-color-on-surface: #E6E0E9;
+        --md-sys-color-primary: #D0BCFF;
+        --md-sys-color-on-primary: #381E72;
+        --md-sys-color-secondary: #CCC2DC;
+        --md-sys-color-on-secondary: #332D41;
+        --md-sys-color-surface-container: #211F26;
+        --md-sys-color-surface-container-highest: #36343B;
+      }
+      
+      body.light-theme {
+        background-color: #FEF7FF !important;
+        color: #1D1B20 !important;
+        --md-sys-color-background: #FEF7FF;
+        --md-sys-color-on-background: #1D1B20;
+        --md-sys-color-surface: #FDFCFB;
+        --md-sys-color-on-surface: #1D1B20;
+        --md-sys-color-primary: #6750A4;
+        --md-sys-color-on-primary: #FFFFFF;
+        --md-sys-color-secondary: #625B71;
+        --md-sys-color-on-secondary: #FFFFFF;
+        --md-sys-color-surface-container: #F3EDF7;
+        --md-sys-color-surface-container-highest: #E6E0E9;
+      }
+      
+      /* Specific component overrides */
+      body.dark-theme .note-card {
+        background-color: #4A4458 !important;
+        color: #E8DEF8 !important;
+      }
+      
+      body.dark-theme md-dialog {
+        --md-dialog-container-color: #2B2930;
+        --md-dialog-headline-color: #E6E0E9;
+        --md-dialog-supporting-text-color: #E6E0E9;
+      }
+      
+      /* Base styles */
+      body {
+        font-family: 'Roboto', sans-serif;
+        margin: 0;
+        padding: 0;
+        opacity: 0; /* Start hidden to prevent FOUC */
+        transition: opacity 0.3s ease-in-out;
+      }
+      
+      body.loaded {
+        opacity: 1; /* Show once components are defined */
+      }
+      
+      /* Force components to use theme variables */
+      md-icon-button {
+        --md-icon-button-icon-color: var(--md-sys-color-primary);
+      }
+      
+      #appTitle {
+        color: var(--md-sys-color-primary);
+      }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1 id="appTitle">MNotes</h1>
+            <h1 class="md-typescale-headline-large" id="appTitle">MNotes</h1>
             <md-icon-button id="themeToggleBtn" aria-label="Toggle theme">
-                <md-icon>dark_mode</md-icon> <!-- Icon will change dynamically -->
+                <md-icon>dark_mode</md-icon>
             </md-icon-button>
         </header>
 
-        <div id="notesList">
+        <div id="notesList" class="md-typescale-body-medium">
             <!-- Notes will be rendered here by JavaScript -->
         </div>
 
-        <md-fab aria-label="Add Note" id="addNoteFab" variant="primary">
+        <md-fab aria-label="Add Note" id="addNoteFab">
             <md-icon slot="icon">add</md-icon>
         </md-fab>
     </div>
@@ -62,33 +132,442 @@
     <!-- Note Dialog (for creating/editing) -->
     <md-dialog id="noteDialog">
         <div slot="headline">Add/Edit Note</div>
-        <form slot="content" id="noteForm" method="dialog">
-            <input type="hidden" id="noteIdInput">
-            <md-filled-text-field label="Title" id="noteTitleInput" required style="width: 100%; margin-bottom: 16px;"></md-filled-text-field>
-            <md-outlined-text-field label="Content" id="noteContentInput" type="textarea" rows="5" required style="width: 100%; margin-bottom: 16px;"></md-outlined-text-field>
-        </form>
+        <div slot="content">
+            <form id="noteForm">
+                <input type="hidden" id="noteIdInput">
+                <md-filled-text-field label="Title" id="noteTitleInput" required style="width: 100%; margin-bottom: 16px;"></md-filled-text-field>
+                <md-outlined-text-field label="Content" id="noteContentInput" type="textarea" rows="5" required style="width: 100%; margin-bottom: 16px;"></md-outlined-text-field>
+            </form>
+        </div>
         <div slot="actions">
-            <md-text-button form="noteForm" value="cancel">Cancel</md-text-button>
-            <md-filled-button form="noteForm" value="save" type="submit">Save</md-filled-button>
+            <md-text-button id="cancelNoteBtn">Cancel</md-text-button>
+            <md-filled-button id="saveNoteBtn">Save</md-filled-button>
+        </div>
+    </md-dialog>
+
+    <!-- Confirmation Dialog -->
+    <md-dialog id="confirmDeleteDialog">
+        <div slot="headline">Confirm Delete</div>
+        <div slot="content" class="md-typescale-body-medium">
+            Are you sure you want to delete this note?
+        </div>
+        <div slot="actions">
+            <md-text-button id="cancelDeleteBtn">Cancel</md-text-button>
+            <md-filled-button id="confirmDeleteBtn">Delete</md-filled-button>
         </div>
     </md-dialog>
 
-    <script src="script.js"></script>
     <script>
-        // Add 'loaded' class to body after MWC components are likely defined
-        function showBody() {
-            if (customElements.get('md-fab')) { // Check if a MWC component is defined
-                document.body.classList.add('loaded');
-            } else {
-                // Fallback if MWC takes longer or fails for some reason
-                setTimeout(() => document.body.classList.add('loaded'), 400);
-            }
-        }
-        if (document.readyState === 'loading') {
-            window.addEventListener('DOMContentLoaded', showBody);
-        } else {
-            showBody();
-        }
+      // Wait for both DOM content and Web Components to be ready
+      function initApp() {
+          // Check if critical components are defined
+          if (!customElements.get('md-dialog') || !customElements.get('md-fab')) {
+              // If components aren't ready yet, try again in a short while
+              setTimeout(initApp, 100);
+              return;
+          }
+
+          console.log('Initializing MNotes app...');
+          
+          // DOM elements
+          const notesList = document.getElementById('notesList');
+          const addNoteFab = document.getElementById('addNoteFab');
+          const noteDialog = document.getElementById('noteDialog');
+          const confirmDeleteDialog = document.getElementById('confirmDeleteDialog');
+          const noteForm = document.getElementById('noteForm');
+          const noteIdInput = document.getElementById('noteIdInput');
+          const noteTitleInput = document.getElementById('noteTitleInput');
+          const noteContentInput = document.getElementById('noteContentInput');
+          const themeToggleBtn = document.getElementById('themeToggleBtn');
+          const body = document.body;
+
+          let notes = [];
+          let currentEditingId = null;
+          let noteToDeleteId = null;
+
+          // --- Theming ---
+          function applyTheme(theme) { // theme is 'light' or 'dark'
+              console.log('Applying theme:', theme);
+              
+              // First, remove both themes to ensure clean state
+              body.classList.remove('light-theme', 'dark-theme');
+              
+              // Force the body to reset styles
+              body.style.transition = 'none';
+              
+              // Apply new theme with a small delay for better CSS processing
+              setTimeout(() => {
+                  // Add the theme class
+                  body.classList.add(theme + '-theme');
+                  
+                  // Force a repaint with inline styles
+                  body.style.backgroundColor = theme === 'dark' ? '#141218' : '#FEF7FF';
+                  body.style.color = theme === 'dark' ? '#E6E0E9' : '#1D1B20';
+                  
+                  // Re-enable transitions
+                  setTimeout(() => {
+                      body.style.transition = 'all 0.3s ease-in-out';
+                  }, 50);
+                  
+                  // Save preference
+                  localStorage.setItem('mnotes-theme', theme);
+                  
+                  // Update theme toggle icon
+                  const icon = themeToggleBtn.querySelector('md-icon');
+                  if (icon) {
+                      if (theme === 'dark') {
+                          icon.textContent = 'light_mode';
+                          themeToggleBtn.ariaLabel = "Activate light theme";
+                      } else {
+                          icon.textContent = 'dark_mode';
+                          themeToggleBtn.ariaLabel = "Activate dark theme";
+                      }
+                  }
+              }, 10);
+          }
+
+          function toggleTheme() {
+              console.log('Toggle theme clicked');
+              const currentTheme = localStorage.getItem('mnotes-theme') || 
+                                  (body.classList.contains('dark-theme') ? 'dark' : 'light');
+              applyTheme(currentTheme === 'light' ? 'dark' : 'light');
+          }
+
+          function loadInitialTheme() {
+              const savedTheme = localStorage.getItem('mnotes-theme');
+              if (savedTheme) {
+                  applyTheme(savedTheme);
+              } else {
+                  // Prefer system theme if no preference saved
+                  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                      applyTheme('dark');
+                  } else {
+                      applyTheme('light'); // Default to light
+                  }
+              }
+          }
+          
+          // Ensure themeToggleBtn exists before attaching event
+          if (themeToggleBtn) {
+              themeToggleBtn.addEventListener('click', toggleTheme);
+              console.log('Theme toggle button event listener attached');
+          } else {
+              console.error('Theme toggle button not found');
+          }
+
+          // --- Data Persistence ---
+          function loadNotes() {
+              try {
+                  const storedNotes = localStorage.getItem('material-notes');
+                  console.log('Loading notes from localStorage:', storedNotes);
+                  notes = storedNotes ? JSON.parse(storedNotes) : [];
+                  renderNotes();
+              } catch (error) {
+                  console.error('Error loading notes:', error);
+                  notes = [];
+                  renderNotes();
+              }
+          }
+
+          function saveNotes() {
+              try {
+                  console.log('Saving notes to localStorage:', notes);
+                  localStorage.setItem('material-notes', JSON.stringify(notes));
+              } catch (error) {
+                  console.error('Error saving notes:', error);
+                  alert('Failed to save notes. If you\'re in private browsing mode, try regular browsing mode.');
+              }
+          }
+
+          // --- Rendering Notes ---
+          function renderNotes() {
+              if (!notesList) {
+                  console.error('Notes list element not found');
+                  return;
+              }
+              
+              console.log('Rendering notes:', notes);
+              notesList.innerHTML = ''; // Clear existing notes
+              
+              if (notes.length === 0) {
+                  const p = document.createElement('p');
+                  p.textContent = "No notes yet. Click the + button to add one!";
+                  notesList.appendChild(p);
+                  return;
+              }
+
+              notes.sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified)); // Sort by most recently modified
+
+              notes.forEach(note => {
+                  const noteCard = document.createElement('div');
+                  noteCard.className = 'note-card';
+                  
+                  const elevation = document.createElement('md-elevation'); // Add MWC elevation
+                  elevation.setAttribute('level', '1');
+                  noteCard.appendChild(elevation);
+
+                  const title = document.createElement('h3');
+                  title.textContent = note.title;
+                  title.className = 'md-typescale-headline-small';
+
+                  const content = document.createElement('p');
+                  content.textContent = note.content.substring(0, 150) + (note.content.length > 150 ? '...' : '');
+                  content.className = 'md-typescale-body-medium';
+
+                  const actions = document.createElement('div');
+                  actions.className = 'note-card-actions';
+
+                  const editButton = document.createElement('md-icon-button');
+                  editButton.innerHTML = `<md-icon>edit</md-icon>`;
+                  editButton.ariaLabel = `Edit note: ${note.title}`;
+                  editButton.addEventListener('click', (e) => { 
+                      e.stopPropagation(); 
+                      openNoteDialog(note); 
+                  });
+
+                  const deleteButton = document.createElement('md-icon-button');
+                  deleteButton.innerHTML = `<md-icon>delete</md-icon>`;
+                  deleteButton.ariaLabel = `Delete note: ${note.title}`;
+                  deleteButton.addEventListener('click', (e) => { 
+                      e.stopPropagation(); 
+                      openDeleteDialog(note.id); 
+                  });
+
+                  actions.appendChild(editButton);
+                  actions.appendChild(deleteButton);
+
+                  noteCard.appendChild(title);
+                  noteCard.appendChild(content);
+                  noteCard.appendChild(actions);
+                  notesList.appendChild(noteCard);
+              });
+          }
+
+          // --- Note Operations ---
+          function openNoteDialog(note = null) {
+              if (!noteDialog || !noteForm || !noteTitleInput || !noteContentInput) {
+                  console.error('Note dialog elements not found');
+                  return;
+              }
+              
+              console.log('Opening note dialog', note ? 'for editing' : 'for new note');
+              noteForm.reset(); // Clear form fields
+              // Reset MWC text field states (e.g. error messages)
+              noteTitleInput.errorText = "";
+              noteTitleInput.error = false;
+              noteContentInput.errorText = "";
+              noteContentInput.error = false;
+
+              if (note) {
+                  currentEditingId = note.id;
+                  noteTitleInput.value = note.title;
+                  noteContentInput.value = note.content; // Full content for editing
+                  
+                  const headline = noteDialog.querySelector('[slot="headline"]');
+                  if (headline) headline.textContent = 'Edit Note';
+              } else {
+                  currentEditingId = null;
+                  const headline = noteDialog.querySelector('[slot="headline"]');
+                  if (headline) headline.textContent = 'Add New Note';
+              }
+              
+              // Open the dialog
+              noteDialog.open = true;
+          }
+
+          // Direct save function - bypasses the dialog event issues
+          function saveNote() {
+              const title = noteTitleInput.value.trim();
+              const content = noteContentInput.value.trim();
+              console.log('Saving note:', { title, content });
+
+              let isValid = true;
+              if (!title) {
+                  noteTitleInput.error = true;
+                  noteTitleInput.errorText = "Title cannot be empty.";
+                  isValid = false;
+              } else {
+                  noteTitleInput.error = false;
+                  noteTitleInput.errorText = "";
+              }
+              if (!content) {
+                  noteContentInput.error = true;
+                  noteContentInput.errorText = "Content cannot be empty.";
+                  isValid = false;
+              } else {
+                  noteContentInput.error = false;
+                  noteContentInput.errorText = "";
+              }
+
+              if (!isValid) {
+                  console.log('Validation failed');
+                  return false;
+              }
+
+              const now = new Date().toISOString();
+              if (currentEditingId) {
+                  const noteIndex = notes.findIndex(n => n.id === currentEditingId);
+                  if (noteIndex > -1) {
+                      notes[noteIndex].title = title;
+                      notes[noteIndex].content = content;
+                      notes[noteIndex].lastModified = now;
+                      console.log('Updated existing note at index', noteIndex);
+                  }
+              } else {
+                  const newNote = {
+                      id: Date.now().toString(),
+                      title,
+                      content,
+                      createdAt: now,
+                      lastModified: now
+                  };
+                  notes.push(newNote);
+                  console.log('Added new note:', newNote);
+              }
+              
+              // Close dialog, save notes and update UI
+              noteDialog.open = false;
+              saveNotes();
+              renderNotes();
+              
+              // Reset for next time
+              currentEditingId = null;
+              noteForm.reset();
+              noteTitleInput.error = false;
+              noteTitleInput.errorText = "";
+              noteContentInput.error = false;
+              noteContentInput.errorText = "";
+              
+              return true;
+          }
+
+          // Handle dialog close event (just for logging/cleanup)
+          function handleDialogClose(event) {
+              console.log('Note dialog closed with action:', event?.detail?.action);
+              
+              // Reset state regardless of how dialog was closed
+              currentEditingId = null;
+              if (noteForm) noteForm.reset();
+              if (noteTitleInput) {
+                  noteTitleInput.error = false; 
+                  noteTitleInput.errorText = "";
+              }
+              if (noteContentInput) {
+                  noteContentInput.error = false; 
+                  noteContentInput.errorText = "";
+              }
+          }
+
+          function openDeleteDialog(id) {
+              if (!confirmDeleteDialog) {
+                  console.error('Confirm delete dialog not found');
+                  return;
+              }
+              
+              console.log('Opening delete confirmation dialog for note ID:', id);
+              noteToDeleteId = id;
+              confirmDeleteDialog.open = true;
+          }
+          
+          function confirmDelete() {
+              if (noteToDeleteId) {
+                  console.log('Deleting note with ID:', noteToDeleteId);
+                  notes = notes.filter(note => note.id !== noteToDeleteId);
+                  saveNotes();
+                  renderNotes();
+              }
+              
+              // Close dialog and reset state
+              confirmDeleteDialog.open = false;
+              noteToDeleteId = null;
+          }
+
+          function handleDeleteDialogClose() {
+              // Just reset state when dialog is closed
+              console.log('Delete dialog closed');
+              noteToDeleteId = null;
+          }
+
+          // --- Event Listeners ---
+          if (addNoteFab) {
+              addNoteFab.addEventListener('click', () => openNoteDialog());
+              console.log('Add note FAB event listener attached');
+          } else {
+              console.error('Add note FAB not found');
+          }
+          
+          // Dialog event listeners
+          if (noteDialog) {
+              noteDialog.addEventListener('closed', handleDialogClose);
+              console.log('Note dialog event listener attached');
+          } else {
+              console.error('Note dialog not found');
+          }
+          
+          // Button event listeners
+          const saveNoteBtn = document.getElementById('saveNoteBtn');
+          if (saveNoteBtn) {
+              saveNoteBtn.addEventListener('click', saveNote);
+              console.log('Save note button event listener attached');
+          } else {
+              console.error('Save note button not found');
+          }
+          
+          const cancelNoteBtn = document.getElementById('cancelNoteBtn');
+          if (cancelNoteBtn) {
+              cancelNoteBtn.addEventListener('click', () => {
+                  noteDialog.open = false;
+              });
+              console.log('Cancel note button event listener attached');
+          } else {
+              console.error('Cancel note button not found');
+          }
+          // Delete dialog button listeners
+          const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+          if (confirmDeleteBtn) {
+              confirmDeleteBtn.addEventListener('click', confirmDelete);
+              console.log('Confirm delete button event listener attached');
+          } else {
+              console.error('Confirm delete button not found');
+          }
+          
+          const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
+          if (cancelDeleteBtn) {
+              cancelDeleteBtn.addEventListener('click', () => {
+                  confirmDeleteDialog.open = false;
+                  noteToDeleteId = null;
+              });
+              console.log('Cancel delete button event listener attached');
+          } else {
+              console.error('Cancel delete button not found');
+          }
+          
+          if (confirmDeleteDialog) {
+              confirmDeleteDialog.addEventListener('closed', handleDeleteDialogClose);
+              console.log('Confirm delete dialog event listener attached');
+          } else {
+              console.error('Confirm delete dialog not found');
+          }
+
+          // --- Initial Load ---
+          loadInitialTheme();
+          loadNotes();
+          
+          // Show body once components are fully initialized
+          document.body.classList.add('loaded');
+          console.log('MNotes app initialized successfully');
+      }
+
+      // Start initialization when DOM is loaded
+      document.addEventListener('DOMContentLoaded', () => {
+          console.log('DOM content loaded, initializing app...');
+          
+          // Set a base theme class before components load
+          document.body.classList.add('light-theme');
+          
+          // Give a longer delay for Web Components to register
+          setTimeout(initApp, 200);
+      });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/news.md b/news.md
new file mode 100644
index 0000000..b6b949a
--- /dev/null
+++ b/news.md
@@ -0,0 +1,22 @@
+# MNotes - News and Updates
+
+## Version 1.0.0 - May 2025
+
+Welcome to MNotes - a modern Markdown note-taking application!
+
+### What's New:
+- **Initial Release**: First public version of MNotes
+- **Material Design 3**: Beautiful UI with light, dark, and sepia themes
+- **GitHub Integration**: Save your notes directly to GitHub repositories
+- **Markdown Support**: Write notes with Markdown and see the preview
+
+### Coming Soon:
+- Mobile application
+- Cloud synchronization
+- Collaboration features
+- Export to PDF and other formats
+
+Thank you for using MNotes! We hope you enjoy the application.
+
+---
+newsId: 20250520-001
\ No newline at end of file
diff --git a/script.js b/script.js
index 921cd7b..35bd1a6 100644
--- a/script.js
+++ b/script.js
@@ -126,7 +126,8 @@ document.addEventListener('DOMContentLoaded', () => {
             currentEditingId = null;
             noteDialog.querySelector('[slot="headline"]').textContent = 'Add New Note';
         }
-        noteDialog.show();
+        // Material Web Components use open property instead of show() method
+        noteDialog.open = true;
     }
 
     function handleDialogClose(event) {
@@ -159,7 +160,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 // then manually close if valid.
                 // Since `method="dialog"` auto-closes, we re-show if invalid.
                 // This is a common pattern if not using full form.requestSubmit().
-                noteDialog.show(); // Re-open dialog if validation fails after it auto-closed.
+                noteDialog.open = true; // Re-open dialog if validation fails after it auto-closed.
                 return;
             }