From de5d555c7680bf9f8675ca5097c9b0f29e6bd356 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 10:46:03 -0600
Subject: [PATCH 01/14] fix(titanium): reflect host styling attributes to match
 :host selectors

Remove dead has-search CSS and add reflect: true to variant properties so host styling applies when set via JS, not just HTML attributes.
---
 .../web/titanium/chip-multi-select/chip-multi-select.ts     | 2 +-
 packages/web/titanium/chip/chip.ts                          | 2 +-
 packages/web/titanium/data-table/data-table-action-bar.ts   | 4 ----
 packages/web/titanium/data-table/data-table-item.ts         | 2 +-
 packages/web/titanium/data-table/data-table.ts              | 2 +-
 packages/web/titanium/date-input/date-input.ts              | 2 +-
 .../titanium/profile-picture-stack/profile-picture-stack.ts | 2 +-
 .../web/titanium/single-select-base/single-select-base.ts   | 6 +++---
 8 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/web/titanium/chip-multi-select/chip-multi-select.ts b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
index 4369c808d..a9580d0e4 100644
--- a/packages/web/titanium/chip-multi-select/chip-multi-select.ts
+++ b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
@@ -20,7 +20,7 @@ export class TitaniumChipMultiSelect extends LitElement {
   /**
    *  Swaps outlined validator for filled validator
    */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
   /**
    *  Label of input to display to users
    */
diff --git a/packages/web/titanium/chip/chip.ts b/packages/web/titanium/chip/chip.ts
index c55229bb4..b3e2bbd60 100644
--- a/packages/web/titanium/chip/chip.ts
+++ b/packages/web/titanium/chip/chip.ts
@@ -58,7 +58,7 @@ export class TitaniumChip extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) accessor disabled: boolean = false;
 
-  @property({ type: Boolean }) accessor filled: boolean = false;
+  @property({ type: Boolean, reflect: true }) accessor filled: boolean = false;
 
   @property({ type: Boolean, reflect: true, attribute: 'has-leading-items' }) private accessor hasLeadingItems = false;
   @property({ type: Boolean, reflect: true, attribute: 'has-trailing-items' }) private accessor hasTrailingItems = false;
diff --git a/packages/web/titanium/data-table/data-table-action-bar.ts b/packages/web/titanium/data-table/data-table-action-bar.ts
index c5e724292..592a0a521 100644
--- a/packages/web/titanium/data-table/data-table-action-bar.ts
+++ b/packages/web/titanium/data-table/data-table-action-bar.ts
@@ -49,10 +49,6 @@ export class TitaniumDataTableActionBar<T extends object> extends LitElement {
         }
       }
 
-      :host([has-search][has-add-button]) div[add-button] {
-        margin: 0 0 0 12px;
-      }
-
       selected-action-veil {
         display: none;
         grid: 'text buttons' / minmax(min-content, 1fr) auto;
diff --git a/packages/web/titanium/data-table/data-table-item.ts b/packages/web/titanium/data-table/data-table-item.ts
index a787ddbcd..c8dbfde2c 100644
--- a/packages/web/titanium/data-table/data-table-item.ts
+++ b/packages/web/titanium/data-table/data-table-item.ts
@@ -44,7 +44,7 @@ export class TitaniumDataTableItem extends LitElement {
   /**
    *  Disables ability to select this row.
    */
-  @property({ type: Boolean, attribute: 'disable-select' }) accessor disableSelect: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'disable-select' }) accessor disableSelect: boolean;
 
   /**
    *  Sets if view port is small
diff --git a/packages/web/titanium/data-table/data-table.ts b/packages/web/titanium/data-table/data-table.ts
index 335b27f58..d0227c468 100644
--- a/packages/web/titanium/data-table/data-table.ts
+++ b/packages/web/titanium/data-table/data-table.ts
@@ -81,7 +81,7 @@ export class TitaniumDataTable extends LitElement {
   /**
    * Disables all item selection on the data-table.
    */
-  @property({ type: Boolean, attribute: 'disable-select' }) accessor disableSelect: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'disable-select' }) accessor disableSelect: boolean = false;
 
   /**
    * Disables paging.
diff --git a/packages/web/titanium/date-input/date-input.ts b/packages/web/titanium/date-input/date-input.ts
index dc58f0806..6dfad6a3f 100644
--- a/packages/web/titanium/date-input/date-input.ts
+++ b/packages/web/titanium/date-input/date-input.ts
@@ -91,7 +91,7 @@ export class TitaniumDateInput extends LitElement {
   /**
    *  Swaps out outlined text field for a filled text field.
    */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
 
   @property({ type: Boolean, reflect: true }) accessor required = false;
 
diff --git a/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts b/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
index 017f2b57e..e47b28a88 100644
--- a/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
+++ b/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
@@ -31,7 +31,7 @@ export class TitaniumProfilePictureStack extends LitElement {
    * This will open a new tab to the directory profile of the person.
    * This will only work if the person has an Id.
    */
-  @property({ type: Boolean, attribute: 'enable-directory-href' }) accessor enableDirectoryHref: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'enable-directory-href' }) accessor enableDirectoryHref: boolean = false;
 
   /**
    * Toggle to show the full name of the person if there is one result in the stack.
diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
index 14d80d99e..f7b8d975e 100644
--- a/packages/web/titanium/single-select-base/single-select-base.ts
+++ b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -41,7 +41,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   /**
    *  Swaps out outlined text field for a filled text field.
    */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
 
   /**
    *  Sets placeholder text value.
@@ -147,8 +147,8 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   @state() protected accessor count: number;
 
   @property({ type: Boolean, attribute: 'menu-open', reflect: true }) private accessor menuOpen: boolean = false;
-  @property({ type: Boolean, attribute: 'large' }) accessor large: boolean = false;
-  @property({ type: Boolean, attribute: 'shaped' }) accessor shaped: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'large' }) accessor large: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'shaped' }) accessor shaped: boolean = false;
 
   getTextField() {
     return this.filled ? this.shadowRoot?.querySelector('md-filled-text-field') : this.shadowRoot?.querySelector('md-outlined-text-field');

From a4204765a62f6965c7c50b3e8a3074ec2e3036bb Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 11:33:08 -0600
Subject: [PATCH 02/14] refactor!: remove deprecated components and LoadWhile
 mixin

BREAKING CHANGE: Removes legacy titanium/leavitt components and migrates
async loading from the LoadWhile mixin to @promiseTracking.

Removed components include titanium-card, titanium-header, titanium-error-page,
titanium-confirm-dialog, titanium-access-denied-page, legacy data-table
(data-table, data-table-item, data-table-header), leavitt-user-feedback,
legacy email-history-viewer, and unqualified/outlined duration, validator,
search, and youtube inputs (filled variants only).

LoadWhile and loadWhile() are removed; use @promiseTracking with
trackLoadingPromise() and isLoading instead. TitaniumDataTableCore.loadWhile
is now trackLoadingPromise.

Leavittbook demos, routes, and shell updated; file-explorer uses
titanium-confirmation-dialog.
---
 .../leavitt-email-history-viewer-demo.ts      |  22 +-
 .../src/demos/leavitt-error-page-demo.ts      |   3 +-
 .../src/demos/leavitt-user-feedback-demo.ts   |  57 --
 .../demos/titanium-access-denied-page-demo.ts |  38 --
 .../src/demos/titanium-card-demo.ts           | 113 ----
 .../demos/titanium-chip-multi-select-demo.ts  |  38 +-
 .../src/demos/titanium-confirm-dialog-demo.ts |  72 --
 .../demos/titanium-data-table-core-demo.ts    |   2 +-
 .../src/demos/titanium-data-table-demo.ts     | 530 ---------------
 .../demos/titanium-data-table-header-demo.ts  |  63 --
 .../demos/titanium-data-table-item-demo.ts    |  77 ---
 .../src/demos/titanium-duration-input-demo.ts |  67 +-
 .../src/demos/titanium-error-page-demo.ts     |  40 --
 ...tanium-full-page-loading-indicator-demo.ts |  61 --
 .../src/demos/titanium-header-demo.ts         |  83 ---
 .../demos/titanium-input-validator-demo.ts    |  76 +--
 .../src/demos/titanium-search-input-demo.ts   |  40 +-
 .../src/demos/titanium-youtube-input-demo.ts  |  60 +-
 packages/leavittbook/src/getting-started.ts   |   4 +-
 packages/leavittbook/src/my-app.ts            | 105 +--
 .../leavittbook/src/styles/story-styles.ts    |   4 -
 .../leavitt/company-select/company-select.ts  |   2 +-
 .../email-history-view-list-filter-dialog.ts  | 221 -------
 ...ail-history-viewer-filled-filter-dialog.ts |  11 +-
 .../email-history-viewer-filled.ts            |  13 +-
 .../email-history-viewer.ts                   | 367 ----------
 .../view-email-template-info-dialog.ts        |  11 +-
 .../view-sent-email-dialog.ts                 |  11 +-
 .../leavitt/file-explorer/add-folder-modal.ts |  11 +-
 .../leavitt/file-explorer/file-explorer.ts    |  38 +-
 .../web/leavitt/file-explorer/file-modal.ts   |  11 +-
 .../web/leavitt/file-explorer/folder-modal.ts |  11 +-
 .../person-company-select.ts                  |   2 +-
 .../person-group-select.ts                    |   2 +-
 .../leavitt/person-select/person-select.ts    |   2 +-
 .../user-feedback/provide-feedback-dialog.ts  |  13 +-
 .../user-feedback/report-a-problem-dialog.ts  |  13 +-
 .../leavitt/user-feedback/user-feedback.ts    | 210 ------
 .../access-denied-page/access-denied-page.ts  | 352 ----------
 .../address-input/google-address-input.ts     |   2 +-
 packages/web/titanium/card/card.ts            | 163 -----
 .../chip-multi-select/chip-multi-select.ts    |  12 +-
 .../confirm-dialog-open-event.ts              |  18 -
 .../titanium/confirm-dialog/confirm-dialog.ts |  95 ---
 .../data-table-core-reorder-dialog.ts         |  11 +-
 .../titanium/data-table/data-table-core.ts    |   9 +-
 .../titanium/data-table/data-table-header.ts  | 246 -------
 .../titanium/data-table/data-table-item.ts    | 540 ---------------
 .../web/titanium/data-table/data-table.ts     | 626 ------------------
 .../titanium/duration-input/duration-input.ts | 109 ---
 .../duration-input/outlined-duration-input.ts |  92 ---
 .../web/titanium/error-page/error-page.ts     |  89 ---
 .../full-page-loading-indicator.ts            | 121 ----
 packages/web/titanium/header/header.ts        | 145 ----
 packages/web/titanium/helpers/helpers.ts      |   1 -
 packages/web/titanium/helpers/load-while.ts   |  28 -
 .../input-validator/input-validator.ts        |  38 --
 .../outlined-input-validator.ts               |  38 --
 .../web/titanium/search-input/search-input.ts | 103 ---
 .../service-worker-notifier.ts                |  50 --
 .../single-select-base/single-select-base.ts  |   9 +-
 .../crop-and-save-image-dialog.ts             |  38 +-
 .../titanium/youtube-input/youtube-input.ts   |  67 --
 63 files changed, 186 insertions(+), 5320 deletions(-)
 delete mode 100644 packages/leavittbook/src/demos/leavitt-user-feedback-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-access-denied-page-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-card-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-confirm-dialog-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-data-table-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-data-table-header-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-data-table-item-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-error-page-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-full-page-loading-indicator-demo.ts
 delete mode 100644 packages/leavittbook/src/demos/titanium-header-demo.ts
 delete mode 100644 packages/web/leavitt/email-history-viewer/email-history-view-list-filter-dialog.ts
 delete mode 100644 packages/web/leavitt/email-history-viewer/email-history-viewer.ts
 delete mode 100644 packages/web/leavitt/user-feedback/user-feedback.ts
 delete mode 100644 packages/web/titanium/access-denied-page/access-denied-page.ts
 delete mode 100644 packages/web/titanium/card/card.ts
 delete mode 100644 packages/web/titanium/confirm-dialog/confirm-dialog-open-event.ts
 delete mode 100644 packages/web/titanium/confirm-dialog/confirm-dialog.ts
 delete mode 100644 packages/web/titanium/data-table/data-table-header.ts
 delete mode 100644 packages/web/titanium/data-table/data-table-item.ts
 delete mode 100644 packages/web/titanium/data-table/data-table.ts
 delete mode 100644 packages/web/titanium/duration-input/duration-input.ts
 delete mode 100644 packages/web/titanium/duration-input/outlined-duration-input.ts
 delete mode 100644 packages/web/titanium/error-page/error-page.ts
 delete mode 100644 packages/web/titanium/full-page-loading-indicator/full-page-loading-indicator.ts
 delete mode 100644 packages/web/titanium/header/header.ts
 delete mode 100644 packages/web/titanium/helpers/load-while.ts
 delete mode 100644 packages/web/titanium/input-validator/input-validator.ts
 delete mode 100644 packages/web/titanium/input-validator/outlined-input-validator.ts
 delete mode 100644 packages/web/titanium/search-input/search-input.ts
 delete mode 100644 packages/web/titanium/service-worker-notifier/service-worker-notifier.ts
 delete mode 100644 packages/web/titanium/youtube-input/youtube-input.ts

diff --git a/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts b/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
index 9ad40b64c..26be9483e 100644
--- a/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
@@ -4,25 +4,18 @@ import '@leavittsoftware/web/leavitt/app/app-main-content-container';
 import '@leavittsoftware/web/leavitt/app/app-navigation-header';
 import '@leavittsoftware/web/leavitt/app/app-width-limiter';
 import '@api-viewer/docs';
-import '@material/web/divider/divider';
-import '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer';
 import '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled';
 
 import { css, html, LitElement } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { ThemePreference } from '@leavittsoftware/web/leavitt/theme/theme-preference';
 
-import LeavittEmailHistoryViewer from '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer';
-import LeavittEmailHistoryViewerFilled from '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled';
 import StoryStyles from '../styles/story-styles';
 import { siteSearchTextFieldContext } from '../contexts/site-search-text-field-context';
 import api3UserService from '../services/api3-user-service';
 
 @customElement('leavitt-email-history-viewer-demo')
 export class LeavittEmailHistoryViewerDemo extends ThemePreference(LitElement) {
-  @query('leavitt-email-history-viewer') protected accessor demo1!: LeavittEmailHistoryViewer;
-  @query('leavitt-email-history-viewer-filled') protected accessor demo2!: LeavittEmailHistoryViewerFilled;
-
   connectedCallback() {
     super.connectedCallback();
     api3UserService.addHeader('X-LGAppName', 'EducationAdminV2');
@@ -55,7 +48,6 @@ export class LeavittEmailHistoryViewerDemo extends ThemePreference(LitElement) {
             <story-header name="Leavitt Email History Viewer Filled" className="LeavittEmailHistoryViewerFilled"></story-header>
 
             <div>
-              <h1>Filled</h1>
               <div row>
                 <leavitt-email-history-viewer-filled
                   isActive
@@ -67,18 +59,6 @@ export class LeavittEmailHistoryViewerDemo extends ThemePreference(LitElement) {
             </div>
 
             <api-docs src="./custom-elements.json" selected="leavitt-email-history-viewer-filled"></api-docs>
-
-            <md-divider></md-divider>
-            <story-header name="Leavitt Email History Viewer" className="LeavittEmailHistoryViewer"></story-header>
-
-            <div>
-              <h1>Outlined</h1>
-              <div row>
-                <leavitt-email-history-viewer isActive .apiService=${api3UserService} .path=${'/leavitt-email-history-viewer'}></leavitt-email-history-viewer>
-              </div>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="leavitt-email-history-viewer"></api-docs>
           </leavitt-app-width-limiter>
         </main>
       </leavitt-app-main-content-container>
diff --git a/packages/leavittbook/src/demos/leavitt-error-page-demo.ts b/packages/leavittbook/src/demos/leavitt-error-page-demo.ts
index 18a24c34b..e4fa867f9 100644
--- a/packages/leavittbook/src/demos/leavitt-error-page-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-error-page-demo.ts
@@ -42,7 +42,8 @@ export class LeavittErrorPageDemo extends LitElement {
               <md-divider></md-divider>
               <leavitt-error-page
                 .heading=${html`Page not found`}
-                .message=${html`The page you requested could not be found. <a style="color: var(--md-sys-color-primary)" href="/">Return home</a> or <a style="color: var(--md-sys-color-primary)" href="mailto:support@leavitt.com">contact support</a>.`}
+                .message=${html`The page you requested could not be found. <a style="color: var(--md-sys-color-primary)" href="/">Return home</a> or
+                  <a style="color: var(--md-sys-color-primary)" href="mailto:support@leavitt.com">contact support</a>.`}
               ></leavitt-error-page>
             </div>
 
diff --git a/packages/leavittbook/src/demos/leavitt-user-feedback-demo.ts b/packages/leavittbook/src/demos/leavitt-user-feedback-demo.ts
deleted file mode 100644
index 079cb54f6..000000000
--- a/packages/leavittbook/src/demos/leavitt-user-feedback-demo.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-import '@material/web/button/filled-tonal-button';
-import '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
-import '@leavittsoftware/web/leavitt/user-feedback/user-feedback';
-import '@leavittsoftware/web/leavitt/user-feedback/report-a-problem-dialog';
-import '@leavittsoftware/web/leavitt/user-feedback/provide-feedback-dialog';
-
-import { html, LitElement } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import { ReportAProblemDialog } from '@leavittsoftware/web/leavitt/user-feedback/report-a-problem-dialog';
-import { ProvideFeedbackDialog } from '@leavittsoftware/web/leavitt/user-feedback/provide-feedback-dialog';
-
-import UserManager from '../services/user-manager-service';
-import StoryStyles from '../styles/story-styles';
-
-@customElement('leavitt-user-feedback-demo')
-export class LeavittUserFeedbackDemo extends LitElement {
-  @query('report-a-problem-dialog') protected accessor reportAProblemDialog!: ReportAProblemDialog;
-  @query('provide-feedback-dialog') protected accessor provideFeedbackDialog!: ProvideFeedbackDialog;
-
-  static styles = [StoryStyles];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Leavitt user feedback" level1Href="/leavitt-user-feedback" sticky-top> </leavitt-app-navigation-header>
-
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt User Feedback" className="LeavittUserFeedback"></story-header>
-
-            <div>
-              <h1>Default</h1>
-              <p>User feedback components with report problem and provide feedback dialogs</p>
-              <item-row>
-                <md-filled-tonal-button @click=${() => this.reportAProblemDialog.show()}>Report a problem</md-filled-tonal-button>
-                <md-filled-tonal-button @click=${() => this.provideFeedbackDialog.show()}>Provide feedback</md-filled-tonal-button>
-                <leavitt-user-feedback></leavitt-user-feedback>
-              </item-row>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="leavitt-user-feedback"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-
-      <report-a-problem-dialog .userManager=${UserManager}></report-a-problem-dialog>
-      <provide-feedback-dialog .userManager=${UserManager}></provide-feedback-dialog>
-      <titanium-snackbar-stack></titanium-snackbar-stack>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-access-denied-page-demo.ts b/packages/leavittbook/src/demos/titanium-access-denied-page-demo.ts
deleted file mode 100644
index 9e3c5c357..000000000
--- a/packages/leavittbook/src/demos/titanium-access-denied-page-demo.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-
-import '@leavittsoftware/web/titanium/access-denied-page/access-denied-page';
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-access-denied-page-demo')
-export class TitaniumAccessDeniedPageDemo extends LitElement {
-  static styles = [StoryStyles];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium access denied page" level1Href="/titanium-access-denied-page" sticky-top>
-          </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium access denied page" className="TitaniumAccessDeniedPage"></story-header>
-            <div>
-              <h3>Default</h3>
-              <p>Access denied page sample</p>
-              <titanium-access-denied-page message="You can customize this message"></titanium-access-denied-page>
-            </div>
-            <api-docs src="./custom-elements.json" selected="titanium-access-denied-page"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-card-demo.ts b/packages/leavittbook/src/demos/titanium-card-demo.ts
deleted file mode 100644
index 46fc9cfb2..000000000
--- a/packages/leavittbook/src/demos/titanium-card-demo.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-
-import '@material/web/button/filled-tonal-button';
-import '@material/web/iconbutton/icon-button';
-import '@material/web/icon/icon';
-import '@material/web/list/list-item';
-
-import '@leavittsoftware/web/titanium/card/card';
-
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { h1 } from '@leavittsoftware/web/titanium/styles/h1';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-card-demo')
-export class TitaniumCardDemo extends LitElement {
-  static styles = [
-    StoryStyles,
-    css`
-      titanium-card {
-        ${h1};
-      }
-
-      img[card-image] {
-        width: 110px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium card" level1Href="/titanium-card" sticky-top> </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium card" className="TitaniumCard"></story-header>
-            <h1>Default</h1>
-            <p>Basic card with default styling</p>
-            <titanium-card>
-              <h1>Lorem ipsum dolor sit amet</h1>
-            </titanium-card>
-
-            <h1>Filled</h1>
-            <p>Card with filled background</p>
-            <titanium-card filled>
-              <h1>Lorem ipsum dolor sit amet</h1>
-            </titanium-card>
-
-            <h1>Elevated</h1>
-            <p>Card with elevation shadow</p>
-            <titanium-card elevated>
-              <h1>Lorem ipsum dolor sit amet</h1>
-            </titanium-card>
-
-            <h1>With Image</h1>
-            <p>Card containing an image</p>
-            <titanium-card>
-              <img card-image alt="password" src="https://cdn.leavitt.com/icons/icon-permissions.svg" />
-              <h1>Lorem ipsum dolor sit amet</h1>
-              <p card-body></p>
-            </titanium-card>
-
-            <h1>With Footer</h1>
-            <p>Card with footer containing action buttons</p>
-            <titanium-card>
-              <h1>Lorem ipsum dolor sit amet</h1>
-              <main card-body></main>
-              <span nav card-footer>
-                <md-filled-tonal-button> Save </md-filled-tonal-button>
-              </span>
-            </titanium-card>
-
-            <h1>With Menu</h1>
-            <p>Card with menu button in the header</p>
-            <titanium-card>
-              <h1>Lorem ipsum dolor sit amet</h1>
-              <md-icon-button card-menu> <md-icon>more_vert</md-icon> </md-icon-button>
-              <div card-body></div>
-            </titanium-card>
-
-            <h1>With List Items</h1>
-            <p>Card containing interactive list items</p>
-            <titanium-card style="padding-bottom:0;overflow:hidden;">
-              <h1>Lorem ipsum dolor sit amet</h1>
-              <md-icon-button card-menu> <md-icon>more_vert</md-icon> </md-icon-button>
-              <div card-body full-width>
-                <md-list-item interactive href="/" target="_blank">
-                  <img slot="start" height="48" src="https://cdn.leavitt.com/icons/icon-scoreboard-details.svg" />
-                  <div slot="headline">Go Home</div>
-                  <div slot="supporting-text">This will link you out in a new tab</div>
-                  <md-icon slot="end">navigate_next</md-icon>
-                </md-list-item>
-                <md-list-item interactive href="/" target="_blank">
-                  <img slot="start" height="48" src="https://cdn.leavitt.com/icons/icon-reminder.svg" />
-                  <div slot="headline">Details</div>
-                  <div slot="supporting-text">This will link you out in a new tab</div>
-                  <md-icon slot="end">navigate_next</md-icon>
-                </md-list-item>
-              </div>
-            </titanium-card>
-            <api-docs src="./custom-elements.json" selected="titanium-card"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
index a6184585e..0ff60c6a8 100644
--- a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
@@ -25,7 +25,6 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
   @state() protected accessor disabled: boolean = false;
   @state() protected accessor supportingText: string | null = 'Service animals are welcome.';
   @query('titanium-chip-multi-select') private accessor titaniumChipMultiSelect: TitaniumChipMultiSelect;
-  @query('titanium-chip-multi-select[filled]') private accessor titaniumChipMultiSelectFilled: TitaniumChipMultiSelect;
 
   static styles = [
     StoryStyles,
@@ -53,46 +52,13 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
             <story-header name="Titanium chip multi select" className="TitaniumChipMultiSelect"></story-header>
 
             <div>
-              <h1>Default</h1>
-              <titanium-chip-multi-select
-                required
-                label="Service Animals"
-                ?hasItems=${!!this.demoItems.length}
-                .supportingText=${this.supportingText ?? ''}
-                ?disabled=${this.disabled}
-              >
-                <md-filled-tonal-button
-                  ?disabled=${this.disabled}
-                  @click=${async () => {
-                    this.demoItems.push(chipLabels[this.demoItems.length % chipLabels.length]);
-                    this.requestUpdate('demoItems');
-                  }}
-                  >Add Animal <md-icon slot="icon">add</md-icon></md-filled-tonal-button
-                >
-                ${repeat(
-                  this.demoItems,
-                  (o) => o,
-                  (o, index) =>
-                    html`<md-input-chip
-                      label=${o}
-                      closeable
-                      ?disabled=${this.disabled}
-                      @remove=${(e: Event) => {
-                        e.preventDefault();
-                        this.demoItems = this.demoItems.filter((_, i) => i !== index);
-                      }}
-                    ></md-input-chip>`
-                )}</titanium-chip-multi-select
-              >
-
-              <h1>Filled</h1>
               <titanium-chip-multi-select
                 filled
+                required
                 label="Service Animals"
                 ?hasItems=${!!this.demoItems.length}
                 .supportingText=${this.supportingText ?? ''}
                 ?disabled=${this.disabled}
-                required
               >
                 <md-filled-tonal-button
                   ?disabled=${this.disabled}
@@ -138,7 +104,6 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
                 <md-filled-tonal-button
                   @click=${async () => {
                     this.titaniumChipMultiSelect.reportValidity();
-                    this.titaniumChipMultiSelectFilled.reportValidity();
                   }}
                   >Report validity</md-filled-tonal-button
                 >
@@ -146,7 +111,6 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
                 <md-filled-tonal-button
                   @click=${async () => {
                     this.titaniumChipMultiSelect.reset();
-                    this.titaniumChipMultiSelectFilled.reset();
                   }}
                   >Reset</md-filled-tonal-button
                 >
diff --git a/packages/leavittbook/src/demos/titanium-confirm-dialog-demo.ts b/packages/leavittbook/src/demos/titanium-confirm-dialog-demo.ts
deleted file mode 100644
index d525b29b0..000000000
--- a/packages/leavittbook/src/demos/titanium-confirm-dialog-demo.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-import '@material/web/icon/icon';
-
-import '@material/web/button/filled-tonal-button';
-
-import { css, html, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/confirm-dialog/confirm-dialog';
-import { ConfirmDialogOpenEvent } from '@leavittsoftware/web/titanium/confirm-dialog/confirm-dialog-open-event';
-
-import StoryStyles from '../styles/story-styles';
-import TitaniumConfirmDialog from '@leavittsoftware/web/titanium/confirm-dialog/confirm-dialog';
-
-@customElement('titanium-confirm-dialog-demo')
-export class TitaniumConfirmDialogDemo extends LitElement {
-  @state() private accessor confirmed = false;
-  @query('titanium-confirm-dialog') private accessor confirmDialog!: TitaniumConfirmDialog;
-
-  async #open() {
-    const confirmationDialogEvent = new ConfirmDialogOpenEvent(
-      'Confirm delete?',
-      'Are you sure you would like to delete the universe? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis massa tincidunt dui ut ornare. Ut tortor pretium viverra suspendisse potenti nullam. Dolor morbi non arcu risus. Porttitor rhoncus dolor purus non. Vitae justo eget magna fermentum iaculis eu non diam. Pretium quam vulputate dignissim suspendisse in est ante in. Semper quis lectus nulla at volutpat. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Orci dapibus ultrices in iaculis.'
-    );
-    this.dispatchEvent(confirmationDialogEvent);
-    this.confirmed = await confirmationDialogEvent.dialogResult;
-  }
-
-  firstUpdated() {
-    this.addEventListener(ConfirmDialogOpenEvent.eventType, async (e: ConfirmDialogOpenEvent) => {
-      await import('@leavittsoftware/web/titanium/confirm-dialog/confirm-dialog');
-      this.confirmDialog.handleEvent(e);
-    });
-  }
-
-  static styles = [
-    StoryStyles,
-    css`
-      h3 {
-        margin-bottom: 12px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium confirm dialog" level1Href="/titanium-confirm-dialog" sticky-top> </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium confirm dialog" className="TitaniumConfirmDialog"></story-header>
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-confirm-dialog</kbd> is deprecated. Use <kbd>titanium-confirmation-dialog</kbd> instead.</p>
-            </deprecation-notice>
-            <div>
-              <h1>Default</h1>
-              <h3>Confirmed: ${this.confirmed}</h3>
-              <md-filled-tonal-button @click=${this.#open}>Open</md-filled-tonal-button>
-            </div>
-            <api-docs src="./custom-elements.json" selected="titanium-confirm-dialog"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-      <titanium-confirm-dialog></titanium-confirm-dialog>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts b/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
index 682f91037..5f349eb85 100644
--- a/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
@@ -394,7 +394,7 @@ export class TitaniumDataTableCoreDemo extends LitElement {
                 @sort-changed=${async (e: DOMEvent<TitaniumDataTableCore<ItemType>>) => {
                   this.sort = e.target.sort;
                   const _delay = delay(300);
-                  this.tableCore.loadWhile(_delay);
+                  this.tableCore.trackLoadingPromise(_delay);
                   await _delay;
                   this.items = this.sortItems(this.items, this.sort);
 
diff --git a/packages/leavittbook/src/demos/titanium-data-table-demo.ts b/packages/leavittbook/src/demos/titanium-data-table-demo.ts
deleted file mode 100644
index 7c0e9e7e8..000000000
--- a/packages/leavittbook/src/demos/titanium-data-table-demo.ts
+++ /dev/null
@@ -1,530 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
-import '@api-viewer/docs';
-import '@leavittsoftware/web/titanium/data-table/data-table-item';
-import '@leavittsoftware/web/titanium/data-table/data-table-header';
-import '@leavittsoftware/web/titanium/search-input/search-input';
-import '@material/web/dialog/dialog';
-import '@material/web/button/outlined-button';
-import '@material/web/button/filled-tonal-button';
-import '@material/web/icon/icon';
-import '@material/web/iconbutton/icon-button';
-import '@material/web/select/outlined-select.js';
-import '@material/web/select/select-option.js';
-import '@material/web/menu/menu';
-import '@material/web/menu/menu-item';
-import '@material/web/switch/switch';
-import '@material/web/chips/input-chip';
-import '@material/web/button/text-button';
-
-import { css, html, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/data-table/data-table';
-import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
-import { Debouncer, getSearchTokens } from '@leavittsoftware/web/titanium/helpers/helpers';
-import { FilterController } from '@leavittsoftware/web/titanium/data-table/filter-controller';
-import { TitaniumDataTable } from '@leavittsoftware/web/titanium/data-table/data-table';
-import { TitaniumSearchInput } from '@leavittsoftware/web/titanium/search-input/search-input';
-import { repeat } from 'lit/directives/repeat.js';
-import { CloseMenuEvent, MdMenu, MenuItem } from '@material/web/menu/menu';
-import { MdIconButton } from '@material/web/iconbutton/icon-button';
-import { MdDialog } from '@material/web/dialog/dialog';
-
-import StoryStyles from '../styles/story-styles';
-
-type FilterKeys = 'Appearance';
-type Car = { Name: string; Appearance: 'Plaid' | 'Ugly' | 'Slick' };
-
-const allTeslas: Array<Car> = [
-  { Name: 'Model 3', Appearance: 'Slick' },
-  { Name: 'Model X', Appearance: 'Slick' },
-  { Name: 'Model Y', Appearance: 'Slick' },
-  { Name: 'Model S', Appearance: 'Slick' },
-  { Name: 'Cybertruck', Appearance: 'Ugly' },
-  { Name: 'Tesla Semi', Appearance: 'Ugly' },
-  { Name: 'Model X Plaid', Appearance: 'Plaid' },
-  { Name: 'Model S Plaid', Appearance: 'Plaid' },
-  { Name: 'Model S Plaid+', Appearance: 'Plaid' },
-  { Name: 'Gen. 2 Roadster', Appearance: 'Slick' },
-];
-
-@customElement('titanium-data-table-demo')
-export class TitaniumDataTableDemo extends LitElement {
-  @state() protected accessor allItems: Array<Partial<Car>> = [];
-  @state() protected accessor items: Array<Partial<Car>> = [];
-  @state() protected accessor selected: Array<Partial<Car>> = [];
-  @state() protected accessor searchTerm: string = '';
-  @state() protected accessor resultTotal: number = 0;
-  @state() protected accessor sortDirection: '' | 'asc' | 'desc' = 'asc';
-  @state() protected accessor sortBy: string = 'Name';
-  @state() protected accessor filterController: FilterController<FilterKeys>;
-
-  @state() protected accessor singleSelect: boolean = false;
-  @state() protected accessor disableSelect: boolean = false;
-  @state() protected accessor disablePaging: boolean = false;
-  @state() protected accessor draggableItems: Array<Partial<Car>> = [];
-
-  @query('titanium-data-table') protected accessor dataTable!: TitaniumDataTable;
-  @query('data-table-demo-filter-modal') protected accessor filterModal!: DataTableDemoFilterModal;
-
-  constructor() {
-    super();
-    this.filterController = new FilterController('/titanium-data-table');
-    this.filterController.setFilter('Appearance', (val) => `BasketId eq ${val}`);
-
-    this.filterController.subscribeToFilterChange(async () => {
-      if (this.dataTable) {
-        this.dataTable?.resetPage();
-        this.#reload();
-      }
-    });
-    this.filterController.loadFromQueryString();
-  }
-
-  firstUpdated() {
-    this.#reset();
-    this.items = this.allItems.slice(0);
-    this.draggableItems = [
-      { Name: 'Model 3', Appearance: 'Slick' },
-      { Name: 'Model X', Appearance: 'Slick' },
-      { Name: 'Model Y', Appearance: 'Slick' },
-      { Name: 'Model S', Appearance: 'Slick' },
-      { Name: 'Cybertruck', Appearance: 'Ugly' },
-      { Name: 'Tesla Semi', Appearance: 'Ugly' },
-      { Name: 'Model X Plaid', Appearance: 'Plaid' },
-      { Name: 'Model S Plaid', Appearance: 'Plaid' },
-      { Name: 'Model S Plaid+', Appearance: 'Plaid' },
-      { Name: 'Gen. 2 Roadster', Appearance: 'Slick' },
-    ];
-  }
-
-  #reload() {
-    this.getItemsAsync(this.searchTerm);
-  }
-
-  #reset() {
-    this.allItems = allTeslas.map((o) => ({ Name: o.Name, Appearance: o.Appearance }));
-    this.#reload();
-  }
-
-  #onSortDirectionChange(e: CustomEvent<'' | 'asc' | 'desc'>) {
-    this.sortDirection = e.detail;
-    this.dataTable.resetPage();
-    this.#reload();
-  }
-
-  #onSortByChange(e: CustomEvent<string>) {
-    this.sortBy = e.detail;
-    this.dataTable.resetPage();
-    this.#reload();
-  }
-
-  #doSearchDebouncer = new Debouncer((searchTerm: string) => this.getItemsAsync(searchTerm));
-
-  async getItemsAsync(searchTerm: string) {
-    const searchTokens = getSearchTokens(searchTerm);
-
-    const take = await this.dataTable.getTake();
-    const page = await this.dataTable.getPage();
-    const sortDirection = this.sortDirection === 'asc' ? 1 : -1;
-
-    let filterItems = this.allItems.filter((o) => searchTokens.every((st) => o.Name?.trim().toLowerCase()?.includes(st.trim().toLowerCase())));
-
-    const appearanceValue = this.filterController.getValue('Appearance');
-    if (appearanceValue) {
-      filterItems = filterItems.filter((o) => o.Appearance === appearanceValue);
-    }
-
-    this.items = filterItems
-      .slice(0)
-      .sort((a, b) => (a[this.sortBy] === b[this.sortBy] ? 0 : (a[this.sortBy] ?? '') < (b[this.sortBy] ?? '') ? sortDirection : -sortDirection))
-      .slice(take * page, take * page + take);
-
-    this.resultTotal = filterItems.length;
-  }
-
-  static styles = [
-    StoryStyles,
-    css`
-      titanium-data-table {
-        margin: 24px 0 36px 0;
-        --titanium-page-control-select-width: 108px;
-      }
-
-      knob-container {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 24px;
-        margin-top: 12px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium data table" level1Href="/titanium-data-table" sticky-top> </leavitt-app-navigation-header>
-
-          <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-data-table</kbd> is deprecated. Use <kbd>titanium-data-table-core</kbd> instead (shown in separate demo).</p>
-            </deprecation-notice>
-            <story-header name="Titanium data table" className="TitaniumDataTable"></story-header>
-
-            <div>
-              <h1>Full working example</h1>
-              <p>Table with items and method controls</p>
-
-              <titanium-data-table
-                header="Tesla Motors"
-                .pageSizes=${[3, 5, 10, 15, 100, 20000]}
-                @selected-changed=${(e: CustomEvent<Array<Partial<{ Name: string }>>>) => {
-                  this.selected = [...e.detail];
-                }}
-                @paging-changed=${() => {
-                  this.#reload();
-                }}
-                narrow-max-width="800"
-                .count=${this.resultTotal}
-                .items=${this.items}
-                .searchTerm=${this.searchTerm}
-                ?single-select=${this.singleSelect}
-                ?disable-select=${this.disableSelect}
-                ?disable-paging=${this.disablePaging}
-              >
-                <titanium-search-input
-                  slot="search-button"
-                  placeholder="Search"
-                  .value=${this.searchTerm}
-                  @input=${(e: DOMEvent<TitaniumSearchInput>) => {
-                    this.searchTerm = e.target.value;
-                    this.dataTable.resetPage();
-                    this.#doSearchDebouncer.debounce(this.searchTerm);
-                  }}
-                ></titanium-search-input>
-
-                <md-icon-button
-                  id="menu-anchor"
-                  aria-haspopup="true"
-                  aria-controls="menu"
-                  aria-expanded="false"
-                  @click=${(e: DOMEvent<MdIconButton>) => {
-                    const root = (e.target as HTMLElement).getRootNode() as ShadowRoot;
-                    const menu = root.querySelector('#menu') as MdMenu;
-                    menu.open = !menu.open;
-                  }}
-                >
-                  <md-icon>more_vert</md-icon>
-                </md-icon-button>
-
-                <md-menu
-                  id="menu"
-                  anchor="menu-anchor"
-                  @close-menu=${(e: CloseMenuEvent) => {
-                    (e.detail.itemPath?.[0] as MenuItem & { action?: () => void })?.action?.();
-                  }}
-                >
-                  <md-menu-item headline="Reload list (reset)" .action=${() => this.#reset()}>
-                    <md-icon refresh slot="start">refresh</md-icon>
-                    Refresh
-                  </md-menu-item>
-                </md-menu>
-
-                <md-filled-tonal-button
-                  slot="add-button"
-                  @click=${() => {
-                    const car = allTeslas[this.allItems.length % allTeslas.length];
-                    const newItem: Partial<Car> = { Name: car.Name, Appearance: car.Appearance };
-                    this.allItems.push(newItem);
-                    this.#reload();
-                  }}
-                >
-                  <md-icon slot="icon">add</md-icon>
-                  Add item
-                </md-filled-tonal-button>
-
-                <data-table-demo-filter-modal slot="filters" .filterController=${this.filterController}></data-table-demo-filter-modal>
-
-                <md-icon-button
-                  slot="filter-button"
-                  @click=${async () => {
-                    this.filterModal.open();
-                  }}
-                >
-                  <md-icon>filter_list</md-icon>
-                </md-icon-button>
-
-                <md-icon-button
-                  slot="selected-actions"
-                  ?disabled=${this.selected?.length > 1}
-                  @click=${() => {
-                    this.allItems = this.allItems.filter((f) => !this.selected.includes(f));
-                    this.resultTotal = this.resultTotal - this.selected.length;
-                    this.#reload();
-                  }}
-                >
-                  <md-icon>delete</md-icon>
-                </md-icon-button>
-
-                <titanium-data-table-header
-                  slot="table-headers"
-                  large
-                  column-name="Name"
-                  title="Name"
-                  @sort-by-changed=${this.#onSortByChange}
-                  .sortBy=${this.sortBy}
-                  .sortDirection=${this.sortDirection}
-                  @sort-direction-changed=${this.#onSortDirectionChange}
-                ></titanium-data-table-header>
-
-                <titanium-data-table-header
-                  slot="table-headers"
-                  column-name="Appearance"
-                  title="Appearance"
-                  width="130px"
-                  @sort-by-changed=${this.#onSortByChange}
-                  .sortBy=${this.sortBy}
-                  .sortDirection=${this.sortDirection}
-                  @sort-direction-changed=${this.#onSortDirectionChange}
-                ></titanium-data-table-header>
-
-                <titanium-data-table-header
-                  slot="table-headers"
-                  column-name="Appearance"
-                  title="Appearance"
-                  width="130px"
-                  @sort-by-changed=${this.#onSortByChange}
-                  .sortBy=${this.sortBy}
-                  .sortDirection=${this.sortDirection}
-                  @sort-direction-changed=${this.#onSortDirectionChange}
-                ></titanium-data-table-header>
-
-                ${repeat(
-                  this.items ?? [],
-                  (item) => item.Name,
-                  (item) => html`
-                    <titanium-data-table-item
-                      ?disable-select=${this.disableSelect}
-                      @titanium-data-table-item-navigate=${() => {
-                        this.dataTable.clearSelection();
-                      }}
-                      .item=${item}
-                      slot="items"
-                    >
-                      <row-item large ellipsis title=${item.Name ?? ''}>${item.Name ?? '-'}</row-item>
-                      <row-item width="130px" title=${item.Appearance ?? ''}>${item.Appearance ?? '-'}</row-item>
-                      <row-item width="130px" title=${item.Appearance ?? ''}>${item.Appearance ?? '-'}</row-item>
-                    </titanium-data-table-item>
-                  `
-                )}
-              </titanium-data-table>
-
-              <h2>Knobs</h2>
-              <knob-container>
-                <md-switch
-                  id="singleSelectSwitch"
-                  .selected=${this.singleSelect}
-                  @click=${() => {
-                    this.dataTable.clearSelection();
-                    this.singleSelect = !this.singleSelect;
-                  }}
-                ></md-switch>
-                <label for="singleSelectSwitch">Single Select</label>
-
-                <md-switch
-                  id="disableSelectSwitch"
-                  .selected=${this.disableSelect}
-                  @click=${() => {
-                    this.dataTable.clearSelection();
-                    this.disableSelect = !this.disableSelect;
-                  }}
-                ></md-switch>
-                <label for="disableSelectSwitch">Disable Select</label>
-
-                <md-switch
-                  id="disablePagingSwitch"
-                  .selected=${this.disablePaging}
-                  @click=${() => {
-                    this.disablePaging = !this.disablePaging;
-                  }}
-                ></md-switch>
-                <label for="disablePagingSwitch">Disable Paging</label>
-
-                <md-filled-tonal-button raised @click=${() => this.dataTable.resetPage()}>Reset page</md-filled-tonal-button>
-                <md-filled-tonal-button raised @click=${() => this.dataTable.clearSelection()}>Clear selection</md-filled-tonal-button>
-              </knob-container>
-            </div>
-
-            <div>
-              <h1>Draggable</h1>
-              <p>Table with draggable items</p>
-              <titanium-data-table
-                header="Draggable"
-                .items=${this.draggableItems}
-                @titanium-data-table-items-reorder=${async () => {
-                  this.draggableItems = structuredClone(this.draggableItems);
-                  await this.requestUpdate('draggableItems');
-                }}
-              >
-                <titanium-data-table-header slot="table-headers" large column-name="Name" no-sort title="Name"></titanium-data-table-header>
-                <titanium-data-table-header slot="table-headers" column-name="Appearance" no-sort title="Appearance"></titanium-data-table-header>
-                <titanium-data-table-header right slot="table-headers" column-name="Link" no-sort title="Link"></titanium-data-table-header>
-
-                ${repeat(
-                  this.draggableItems ?? [],
-                  (item) => item.Name,
-                  (item) => html`
-                    <titanium-data-table-item enable-dragging .item=${item} slot="items">
-                      <row-item large ellipsis title=${item.Name ?? ''}>${item.Name ?? '-'}</row-item>
-                      <row-item title=${item.Appearance ?? ''}>${item.Appearance ?? '-'}</row-item>
-                      <row-item right><a href="#">Learn More</a></row-item>
-                    </titanium-data-table-item>
-                  `
-                )}
-              </titanium-data-table>
-              <h2>Results</h2>
-              <p>${this.draggableItems.map((o) => o.Name).join(',')}</p>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="titanium-data-table"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
-
-@customElement('data-table-demo-filter-modal')
-export class DataTableDemoFilterModal extends LitElement {
-  @state() protected accessor filterController: FilterController<FilterKeys>;
-  @state() protected accessor appearance: string;
-
-  @query('md-dialog') private accessor dialog!: MdDialog;
-
-  async firstUpdated() {
-    this.filterController.subscribeToFilterChange(async () => {
-      this.requestUpdate('filterController');
-    });
-  }
-
-  public async open() {
-    this.dialog.show();
-  }
-
-  #preventDialogOverflow() {
-    const dialog = this.dialog.shadowRoot?.querySelector('dialog');
-    const container = dialog?.querySelector<HTMLElement>('.container');
-    const scroller = container?.querySelector<HTMLElement>('.scroller');
-    if (scroller) {
-      scroller.style.overflow = 'initial';
-    }
-    if (container) {
-      container.style.overflow = 'initial';
-    }
-  }
-
-  #restoreDialogOverflow() {
-    const dialog = this.dialog.shadowRoot?.querySelector('dialog');
-    const container = dialog?.querySelector<HTMLElement>('.container');
-    const scroller = container?.querySelector<HTMLElement>('.scroller');
-    if (scroller) {
-      scroller.style.overflow = '';
-    }
-    if (container) {
-      container.style.overflow = '';
-    }
-  }
-
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      md-dialog {
-        width: 100%;
-      }
-
-      md-dialog form {
-        container-type: inline-size;
-      }
-
-      md-outlined-select {
-        width: 100%;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <md-input-chip
-        remove-only
-        ?hidden=${!this.filterController.getValue('Appearance')}
-        label=${this.filterController.getValue('Appearance') ?? ''}
-        @remove=${(e: Event) => {
-          e.preventDefault();
-          this.filterController.setValue('Appearance', null);
-          this.requestUpdate('filterController');
-        }}
-      >
-        <md-icon slot="icon">conditions</md-icon>
-      </md-input-chip>
-
-      <md-dialog type="alert">
-        <div slot="headline">Filter items by</div>
-        <form slot="content" method="dialog">
-          <md-outlined-select
-            @opening=${() => this.#preventDialogOverflow()}
-            @closing=${() => this.#restoreDialogOverflow()}
-            label="Appearance"
-            hasLeadingIcon
-            .value=${this.filterController.getValue('Appearance') ?? ''}
-            @request-selection=${(e) => {
-              this.appearance = e.target.value;
-            }}
-          >
-            <md-icon slot="leading-icon">conditions</md-icon>
-
-            <md-select-option ?selected=${this.filterController.getValue('Appearance') === 'Ugly'} value="Ugly">
-              <div slot="headline">Ugly</div>
-              <md-icon slot="start" data-variant="icon">conditions</md-icon>
-            </md-select-option>
-            <md-select-option ?selected=${this.filterController.getValue('Appearance') === 'Plaid'} value="Plaid">
-              <div slot="headline">Plaid</div>
-              <md-icon slot="start" data-variant="icon">conditions</md-icon>
-            </md-select-option>
-            <md-select-option ?selected=${this.filterController.getValue('Appearance') === 'Slick'} value="Slick">
-              <div slot="headline">Slick</div>
-              <md-icon slot="start" data-variant="icon">conditions</md-icon>
-            </md-select-option>
-          </md-outlined-select>
-        </form>
-        <div slot="actions">
-          <md-text-button @click=${() => this.dialog.close('cancel')}> Close </md-text-button>
-          <md-filled-tonal-button
-            @click=${() => {
-              this.filterController.setValue('Appearance', this.appearance || null);
-              this.requestUpdate('filterController');
-              this.dialog.close();
-            }}
-            >Apply</md-filled-tonal-button
-          >
-        </div>
-      </md-dialog>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-data-table-header-demo.ts b/packages/leavittbook/src/demos/titanium-data-table-header-demo.ts
deleted file mode 100644
index 4951eaf62..000000000
--- a/packages/leavittbook/src/demos/titanium-data-table-header-demo.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
-import '@material/web/icon/icon';
-import '@api-viewer/docs';
-
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/data-table/data-table-header';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-data-table-header-demo')
-export class TitaniumDataTableHeaderDemo extends LitElement {
-  static styles = [
-    StoryStyles,
-    css`
-      header-container {
-        display: flex;
-        flex-direction: row;
-        gap: 24px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium data table header" level1Href="/titanium-data-table-header" sticky-top>
-          </leavitt-app-navigation-header>
-
-          <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-data-table-header</kbd> is deprecated. Use <kbd>titanium-data-table-core</kbd> instead (shown in separate demo).</p>
-            </deprecation-notice>
-            <story-header name="Titanium data table header" className="TitaniumDataTableHeader"></story-header>
-
-            <div>
-              <h1>Table headers</h1>
-              <p>Data table header components with different alignment and sizing options</p>
-              <header-container>
-                <titanium-data-table-header sort-direction="asc" left column-name="Left" title="Left"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" center column-name="Center" title="Center"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" right column-name="Right" title="Right"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" large column-name="Large" title="Large"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" no-sort column-name="NoSort" title="No sort"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" desktop column-name="Desktop" title="Desktop"></titanium-data-table-header>
-                <titanium-data-table-header sort-direction="asc" width="200px" column-name="Width" title="Width"></titanium-data-table-header>
-              </header-container>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="titanium-data-table-header"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-data-table-item-demo.ts b/packages/leavittbook/src/demos/titanium-data-table-item-demo.ts
deleted file mode 100644
index 2bd5bcecf..000000000
--- a/packages/leavittbook/src/demos/titanium-data-table-item-demo.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
-import '@material/web/icon/icon';
-import '@api-viewer/docs';
-import '@material/web/button/filled-tonal-button';
-
-import { css, html, LitElement } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/data-table/data-table-item';
-import { TitaniumDataTableItem } from '@leavittsoftware/web/titanium/data-table/data-table-item';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-data-table-item-demo')
-export class TitaniumDataTableItemDemo extends LitElement {
-  @query('titanium-data-table-item[select-demo]') protected accessor selectItem!: TitaniumDataTableItem;
-
-  static styles = [
-    StoryStyles,
-    css`
-      section {
-        display: flex;
-        margin-top: 12px;
-        gap: 12px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium data table item" level1Href="/titanium-data-table-item" sticky-top>
-          </leavitt-app-navigation-header>
-
-          <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-data-table-item</kbd> is deprecated. Use <kbd>titanium-data-table-core</kbd> instead (shown in separate demo).</p>
-            </deprecation-notice>
-            <story-header name="Titanium data table item" className="TitaniumDataTableItem"></story-header>
-
-            <div>
-              <h1>Default</h1>
-              <p>Examples using disabled, closeable, and readonly attribute</p>
-              <div vertical>
-                <titanium-data-table-item>Default</titanium-data-table-item>
-                <titanium-data-table-item selected>Selected</titanium-data-table-item>
-                <titanium-data-table-item disable-select>Select disabled</titanium-data-table-item>
-                <titanium-data-table-item enable-dragging><row-item></row-item></titanium-data-table-item>
-              </div>
-            </div>
-
-            <div>
-              <h1>Methods</h1>
-              <p>Select, Deselect, Toggle</p>
-              <div methods-demo>
-                <titanium-data-table-item select-demo>Item</titanium-data-table-item>
-                <section>
-                  <md-filled-tonal-button raised @click=${() => this.selectItem.select()}>select()</md-filled-tonal-button>
-                  <md-filled-tonal-button raised @click=${() => this.selectItem.deselect()}>deselect()</md-filled-tonal-button>
-                  <md-filled-tonal-button raised @click=${() => this.selectItem.toggleSelected()}>toggleSelected()</md-filled-tonal-button>
-                </section>
-              </div>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="titanium-data-table-item"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-duration-input-demo.ts b/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
index 86c0ea746..e4e6ea698 100644
--- a/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
@@ -3,19 +3,14 @@ import '../shared/story-header';
 import '@leavittsoftware/web/leavitt/app/app-main-content-container';
 import '@leavittsoftware/web/leavitt/app/app-navigation-header';
 import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
-import '@material/web/icon/icon';
 import '@api-viewer/docs';
 
 import '@material/web/button/filled-tonal-button';
 
 import { css, html, LitElement } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/duration-input/duration-input';
 import '@leavittsoftware/web/titanium/duration-input/filled-duration-input';
-import '@leavittsoftware/web/titanium/duration-input/outlined-duration-input';
 import { TitaniumFilledDurationInput } from '@leavittsoftware/web/titanium/duration-input/filled-duration-input';
-import { TitaniumOutlinedDurationInput } from '@leavittsoftware/web/titanium/duration-input/outlined-duration-input';
 import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
 import dayjs from 'dayjs/esm';
 import duration from 'dayjs/esm/plugin/duration';
@@ -27,16 +22,13 @@ dayjs.extend(duration);
 @customElement('titanium-duration-input-demo')
 export class TitaniumDurationInputDemo extends LitElement {
   @state() private accessor filledDuration: duration.Duration | null = dayjs.duration(14400);
-  @state() private accessor outlinedDuration: duration.Duration | null = dayjs.duration(14400);
 
-  @query('titanium-filled-duration-input') private accessor filledInput: TitaniumFilledDurationInput;
-  @query('titanium-outlined-duration-input') private accessor outlinedInput: TitaniumOutlinedDurationInput;
+  @query('titanium-filled-duration-input[required]') private accessor filledInput: TitaniumFilledDurationInput;
 
   static styles = [
     StoryStyles,
     css`
-      titanium-filled-duration-input,
-      titanium-outlined-duration-input {
+      titanium-filled-duration-input {
         width: 100%;
         margin-bottom: 24px;
       }
@@ -50,13 +42,6 @@ export class TitaniumDurationInputDemo extends LitElement {
           <leavitt-app-navigation-header level1Text="Titanium duration input" level1Href="/titanium-duration-input" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p>
-                <kbd>titanium-duration-input</kbd> is deprecated. Use <kbd>titanium-filled-duration-input</kbd> or
-                <kbd>titanium-outlined-duration-input</kbd> instead (shown below).
-              </p>
-            </deprecation-notice>
             <story-header name="Titanium filled duration input" className="TitaniumFilledDurationInput"></story-header>
 
             <div>
@@ -94,54 +79,14 @@ export class TitaniumDurationInputDemo extends LitElement {
               </section>
             </div>
 
-            <api-docs src="./custom-elements.json" selected="titanium-filled-duration-input"></api-docs>
-
-            <md-divider></md-divider>
-
-            <story-header name="Titanium outlined duration input" className="TitaniumOutlinedDurationInput"></story-header>
-
-            <div>
-              <h1>Outlined duration input</h1>
-
-              <titanium-outlined-duration-input
-                required
-                label="Outlined Duration"
-                .duration=${this.outlinedDuration}
-                @change=${(e: DOMEvent<TitaniumOutlinedDurationInput>) => {
-                  this.outlinedDuration = e.target.duration;
-                }}
-              ></titanium-outlined-duration-input>
-
-              <section buttons>
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.reset();
-                  }}
-                  >Reset</md-filled-tonal-button
-                >
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.focus();
-                  }}
-                  >Focus</md-filled-tonal-button
-                >
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.reportValidity();
-                  }}
-                  >Report validity</md-filled-tonal-button
-                >
-              </section>
-            </div>
-
             <div>
               <h1>With different durations</h1>
-              <titanium-outlined-duration-input label="1 hour" .duration=${dayjs.duration(3600)}></titanium-outlined-duration-input>
-              <titanium-outlined-duration-input label="30 minutes" .duration=${dayjs.duration(1800)}></titanium-outlined-duration-input>
-              <titanium-outlined-duration-input label="2 hours 30 min" .duration=${dayjs.duration(9000)}></titanium-outlined-duration-input>
+              <titanium-filled-duration-input label="1 hour" .duration=${dayjs.duration(3600)}></titanium-filled-duration-input>
+              <titanium-filled-duration-input label="30 minutes" .duration=${dayjs.duration(1800)}></titanium-filled-duration-input>
+              <titanium-filled-duration-input label="2 hours 30 min" .duration=${dayjs.duration(9000)}></titanium-filled-duration-input>
             </div>
 
-            <api-docs src="./custom-elements.json" selected="titanium-outlined-duration-input"></api-docs>
+            <api-docs src="./custom-elements.json" selected="titanium-filled-duration-input"></api-docs>
           </leavitt-app-width-limiter>
         </main>
       </leavitt-app-main-content-container>
diff --git a/packages/leavittbook/src/demos/titanium-error-page-demo.ts b/packages/leavittbook/src/demos/titanium-error-page-demo.ts
deleted file mode 100644
index b16c5852f..000000000
--- a/packages/leavittbook/src/demos/titanium-error-page-demo.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-
-import '@leavittsoftware/web/titanium/error-page/error-page';
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-error-page-demo')
-export class TitaniumErrorPageDemo extends LitElement {
-  static styles = [StoryStyles];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium error page" level1Href="/titanium-error-page" sticky-top> </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium error page" className="TitaniumErrorPage"></story-header>
-            <div>
-              <h1>Default</h1>
-              <titanium-error-page message="You can customize this message"></titanium-error-page>
-              <h1>TemplateResult message</h1>
-              <titanium-error-page
-                .message=${html`We couldn't find that page. <a style="color: var(--md-sys-color-primary)" href="/">Go back home</a> or <a style="color: var(--md-sys-color-primary)" href="mailto:support@leavitt.com">contact support</a>.`}
-              ></titanium-error-page>
-            </div>
-            <api-docs src="./custom-elements.json" selected="titanium-error-page"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-full-page-loading-indicator-demo.ts b/packages/leavittbook/src/demos/titanium-full-page-loading-indicator-demo.ts
deleted file mode 100644
index 88ad6d7d3..000000000
--- a/packages/leavittbook/src/demos/titanium-full-page-loading-indicator-demo.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-
-import '@material/web/button/filled-tonal-button';
-
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/full-page-loading-indicator/full-page-loading-indicator';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-full-page-loading-indicator-demo')
-export class TitaniumFullPageLoadingIndicatorDemo extends LitElement {
-  static styles = [StoryStyles];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium full page loading indicator" level1Href="/titanium-full-page-loading-indicator" sticky-top>
-          </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium full page loading indicator" className="TitaniumFullPageLoadingIndicator"></story-header>
-            <div>
-              <h1>Demo</h1>
-              <p>A promise driven pending-state-events loading scrim</p>
-              <titanium-full-page-loading-indicator></titanium-full-page-loading-indicator>
-              <md-filled-tonal-button
-                @click=${(e) => {
-                  e.preventDefault();
-                  const work = new Promise((r) => setTimeout(r, 50));
-                  const work2 = new Promise((r) => setTimeout(r, 3000));
-                  window.dispatchEvent(
-                    new CustomEvent('pending-state', {
-                      composed: true,
-                      bubbles: true,
-                      detail: { promise: work.then(() => console.log('Done 1')) },
-                    })
-                  );
-                  window.dispatchEvent(
-                    new CustomEvent('pending-state', {
-                      composed: true,
-                      bubbles: true,
-                      detail: { promise: work2.then(() => console.log('Done 2')) },
-                    })
-                  );
-                }}
-                >Open loading veil for 2 seconds</md-filled-tonal-button
-              >
-            </div>
-            <api-docs src="./custom-elements.json" selected="titanium-full-page-loading-indicator"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-header-demo.ts b/packages/leavittbook/src/demos/titanium-header-demo.ts
deleted file mode 100644
index c75f76520..000000000
--- a/packages/leavittbook/src/demos/titanium-header-demo.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import '../shared/story-header';
-
-import '@leavittsoftware/web/leavitt/app/app-main-content-container';
-import '@leavittsoftware/web/leavitt/app/app-navigation-header';
-import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@api-viewer/docs';
-import '@material/web/icon/icon';
-
-import '@leavittsoftware/web/titanium/header/header';
-
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import StoryStyles from '../styles/story-styles';
-
-@customElement('titanium-header-demo')
-export class TitaniumHeaderDemo extends LitElement {
-  static styles = [
-    StoryStyles,
-    css`
-      h1 {
-        margin-bottom: 24px;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <leavitt-app-main-content-container .pendingStateElement=${this}>
-        <main>
-          <leavitt-app-navigation-header level1Text="Titanium header" level1Href="/titanium-header" sticky-top> </leavitt-app-navigation-header>
-          <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Titanium header" className="TitaniumHeader"></story-header>
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-header</kbd> is deprecated. Use <kbd>leavitt-app-navigation-header</kbd> instead.</p>
-            </deprecation-notice>
-            <div>
-              <h1>No nav</h1>
-              <titanium-header header="Cheeses" subHeader="Your favorite cheeses" no-nav></titanium-header>
-            </div>
-
-            <div>
-              <h1>Back Arrow (default window.history.back)</h1>
-              <titanium-header header="Meats and cheese and dairy and things" subHeader="Your favorite meats"></titanium-header>
-            </div>
-
-            <div>
-              <h1>Back Arrow (overloaded action)</h1>
-              <titanium-header
-                header="Meats and cheese and dairy and things"
-                subHeader="Your favorite meats"
-                disable-default-back-button-behavior
-                @titanium-header-back-click=${() => {
-                  alert('back clicked');
-                }}
-              ></titanium-header>
-            </div>
-
-            <div>
-              <h1>With custom icon</h1>
-              <titanium-header
-                header="Meats and cheese and dairy and things"
-                subHeader="Your favorite meats"
-                icon="stadium"
-                @titanium-header-back-click=${() => {
-                  alert('back clicked');
-                }}
-              ></titanium-header>
-            </div>
-
-            <div>
-              <h1>Custom icon with no navigation controls</h1>
-              <titanium-header header="Meats and cheese and dairy and things" subHeader="Your favorite meats" icon="stadium" no-nav></titanium-header>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="titanium-header"></api-docs>
-          </leavitt-app-width-limiter>
-        </main>
-      </leavitt-app-main-content-container>
-    `;
-  }
-}
diff --git a/packages/leavittbook/src/demos/titanium-input-validator-demo.ts b/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
index e86fc4751..168538f2c 100644
--- a/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
@@ -3,20 +3,16 @@ import '../shared/story-header';
 import '@leavittsoftware/web/leavitt/app/app-main-content-container';
 import '@leavittsoftware/web/leavitt/app/app-navigation-header';
 import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
 import '@material/web/iconbutton/outlined-icon-button';
 import '@material/web/icon/icon';
 import '@material/web/button/filled-tonal-button';
-import '@material/web/divider/divider';
 import '@api-viewer/docs';
 
 import '@leavittsoftware/web/titanium/input-validator/filled-input-validator';
-import '@leavittsoftware/web/titanium/input-validator/outlined-input-validator';
 
 import { css, html, LitElement } from 'lit';
 import { customElement, queryAll, state } from 'lit/decorators.js';
 import { ShowSnackbarEvent } from '@leavittsoftware/web/titanium/snackbar/show-snackbar-event';
-import { TitaniumOutlinedInputValidator } from '@leavittsoftware/web/titanium/input-validator/outlined-input-validator';
 import { TitaniumFilledInputValidator } from '@leavittsoftware/web/titanium/input-validator/filled-input-validator';
 
 import StoryStyles from '../styles/story-styles';
@@ -24,29 +20,19 @@ import StoryStyles from '../styles/story-styles';
 @customElement('titanium-input-validator-demo')
 export class TitaniumInputValidatorDemo extends LitElement {
   @state() private accessor filledIconSelected = '';
-  @state() private accessor outlinedIconSelected = '';
   @queryAll('titanium-filled-input-validator') private accessor filledValidators: NodeListOf<TitaniumFilledInputValidator>;
-  @queryAll('titanium-outlined-input-validator') private accessor outlinedValidators: NodeListOf<TitaniumOutlinedInputValidator>;
 
   static styles = [
     StoryStyles,
     css`
-      md-divider {
-        margin-bottom: 48px;
-      }
-
       button-container {
         padding: 12px;
         display: flex;
         gap: 12px;
       }
 
-      titanium-filled-input-validator,
-      titanium-outlined-input-validator {
-        width: 299px;
-      }
-
       titanium-filled-input-validator {
+        width: 299px;
         --md-filled-field-container-shape: 16px;
 
         --md-filled-field-active-indicator-height: 0;
@@ -70,13 +56,6 @@ export class TitaniumInputValidatorDemo extends LitElement {
           </leavitt-app-navigation-header>
           <leavitt-app-width-limiter max-width="1000px">
             <story-header name="Titanium filled input validator" className="TitaniumFilledInputValidator"></story-header>
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p>
-                <kbd>titanium-input-validator</kbd> is deprecated. Use <kbd>titanium-outlined-input-validator</kbd> or
-                <kbd>titanium-filled-input-validator</kbd> instead.
-              </p>
-            </deprecation-notice>
             <div>
               <h1>Filled</h1>
               <titanium-filled-input-validator
@@ -127,59 +106,6 @@ export class TitaniumInputValidatorDemo extends LitElement {
             </div>
 
             <api-docs src="./custom-elements.json" selected="titanium-filled-input-validator"></api-docs>
-            <md-divider></md-divider>
-            <story-header name="Titanium outlined input validator" className="TitaniumOutlinedInputValidator"></story-header>
-
-            <div>
-              <h1>Outlined</h1>
-              <titanium-outlined-input-validator
-                required
-                label="Bunnies"
-                .evaluator=${() => this.outlinedIconSelected === 'cruelty_free'}
-                .errorText=${'Bunny is not selected'}
-              >
-                <button-container>
-                  <md-outlined-icon-button
-                    type="button"
-                    @click=${() => (this.outlinedIconSelected = 'cruelty_free')}
-                    toggle
-                    ?selected=${this.outlinedIconSelected === 'cruelty_free'}
-                  >
-                    <md-icon>cruelty_free</md-icon>
-                  </md-outlined-icon-button>
-                  <md-outlined-icon-button
-                    type="button"
-                    @click=${() => (this.outlinedIconSelected = 'pets')}
-                    toggle
-                    ?selected=${this.outlinedIconSelected === 'pets'}
-                  >
-                    <md-icon>pets</md-icon>
-                  </md-outlined-icon-button>
-                  <md-outlined-icon-button
-                    type="button"
-                    @click=${() => (this.outlinedIconSelected = 'person')}
-                    toggle
-                    ?selected=${this.outlinedIconSelected === 'person'}
-                  >
-                    <md-icon>person</md-icon>
-                  </md-outlined-icon-button>
-                </button-container>
-              </titanium-outlined-input-validator>
-              <section buttons>
-                <md-filled-tonal-button @click=${() => Array.from(this.outlinedValidators).forEach((v) => v.reportValidity())}
-                  >Report Validity</md-filled-tonal-button
-                >
-                <md-filled-tonal-button
-                  @click=${() =>
-                    this.dispatchEvent(new ShowSnackbarEvent(`Check Validity is ${Array.from(this.outlinedValidators).map((v) => v.checkValidity())}`))}
-                >
-                  Check Validity</md-filled-tonal-button
-                >
-                <md-filled-tonal-button @click=${() => Array.from(this.outlinedValidators).forEach((v) => v.reset())}> Reset</md-filled-tonal-button>
-              </section>
-            </div>
-
-            <api-docs src="./custom-elements.json" selected="titanium-outlined-input-validator"></api-docs>
           </leavitt-app-width-limiter>
         </main>
       </leavitt-app-main-content-container>
diff --git a/packages/leavittbook/src/demos/titanium-search-input-demo.ts b/packages/leavittbook/src/demos/titanium-search-input-demo.ts
index 9e9059582..8d8cd3325 100644
--- a/packages/leavittbook/src/demos/titanium-search-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-search-input-demo.ts
@@ -3,7 +3,6 @@ import '../shared/story-header';
 import '@leavittsoftware/web/leavitt/app/app-main-content-container';
 import '@leavittsoftware/web/leavitt/app/app-navigation-header';
 import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
 import '@api-viewer/docs';
 
 import '@material/web/button/filled-tonal-button';
@@ -11,15 +10,16 @@ import '@material/web/icon/icon';
 
 import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/search-input/search-input';
-import { TitaniumSearchInput } from '@leavittsoftware/web/titanium/search-input/search-input';
+import '@leavittsoftware/web/titanium/search-input/filled-search-input';
+import TitaniumFilledSearchInput from '@leavittsoftware/web/titanium/search-input/filled-search-input';
 import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
+import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
 
 import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-search-input-demo')
 export class TitaniumSearchInputDemo extends LitElement {
-  @query('titanium-search-input[method-focused]') protected accessor methodFocus!: TitaniumSearchInput;
+  @query('titanium-filled-search-input[method-focused]') protected accessor methodFocus!: TitaniumFilledSearchInput;
 
   static styles = [StoryStyles];
 
@@ -30,48 +30,46 @@ export class TitaniumSearchInputDemo extends LitElement {
           <leavitt-app-navigation-header level1Text="Titanium search input" level1Href="/titanium-search-input" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-search-input</kbd> is deprecated and no longer in use.</p>
-            </deprecation-notice>
-            <story-header name="Titanium search input" className="TitaniumSearchInput"></story-header>
+            <story-header name="Titanium filled search input" className="TitaniumFilledSearchInput"></story-header>
 
             <div>
               <h1>Default</h1>
-              <p>Basic search input with expand/collapse functionality</p>
-              <titanium-search-input @input=${(e: DOMEvent<TitaniumSearchInput>) => console.log(e.target.value)}></titanium-search-input>
+              <p>Basic filled search input with clear button</p>
+              <titanium-filled-search-input @input=${(e: DOMEvent<TitaniumFilledSearchInput>) => console.log(e.target.value)}></titanium-filled-search-input>
             </div>
 
             <div>
               <h1>Disabled</h1>
               <p>Disabled search input</p>
-              <titanium-search-input disabled></titanium-search-input>
+              <titanium-filled-search-input disabled></titanium-filled-search-input>
             </div>
 
             <div>
               <h1>Placeholder text</h1>
-              <p>Search input with placeholder and hidden clear button</p>
-              <titanium-search-input placeholder="Search for something" hide-clear-button></titanium-search-input>
+              <p>Search input with custom placeholder</p>
+              <titanium-filled-search-input placeholder="Search for something"></titanium-filled-search-input>
             </div>
 
             <div>
-              <h1>Collapse Prevented</h1>
-              <p>Search input that stays expanded</p>
-              <titanium-search-input prevent-collapse></titanium-search-input>
+              <h1>With value</h1>
+              <p>Search input with an initial value</p>
+              <titanium-filled-search-input value="Initial search"></titanium-filled-search-input>
             </div>
 
             <div>
               <h1>Methods</h1>
-              <p>Demonstrates public methods</p>
-              <titanium-search-input method-focused></titanium-search-input>
+              <p>Demonstrates focusing the underlying text field</p>
+              <titanium-filled-search-input method-focused></titanium-filled-search-input>
               <br />
 
               <section buttons>
-                <md-filled-tonal-button @click=${() => this.methodFocus.focus()}>Focus</md-filled-tonal-button>
+                <md-filled-tonal-button @click=${() => this.methodFocus.shadowRoot?.querySelector<MdFilledTextField>('md-filled-text-field')?.focus()}
+                  >Focus</md-filled-tonal-button
+                >
               </section>
             </div>
 
-            <api-docs src="./custom-elements.json" selected="titanium-search-input"></api-docs>
+            <api-docs src="./custom-elements.json" selected="titanium-filled-search-input"></api-docs>
           </leavitt-app-width-limiter>
         </main>
       </leavitt-app-main-content-container>
diff --git a/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts b/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
index 0da495d96..860a2d842 100644
--- a/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
@@ -3,16 +3,13 @@ import '../shared/story-header';
 import '@leavittsoftware/web/leavitt/app/app-main-content-container';
 import '@leavittsoftware/web/leavitt/app/app-navigation-header';
 import '@leavittsoftware/web/leavitt/app/app-width-limiter';
-import '@material/web/divider/divider';
 import '@material/web/icon/icon';
 import '@api-viewer/docs';
 import '@material/web/button/filled-tonal-button';
 
 import { css, html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
-import '@leavittsoftware/web/titanium/youtube-input/youtube-input';
 import '@leavittsoftware/web/titanium/youtube-input/filled-youtube-input';
-import { TitaniumYouTubeInput } from '@leavittsoftware/web/titanium/youtube-input/youtube-input';
 import { TitaniumFilledYouTubeInput } from '@leavittsoftware/web/titanium/youtube-input/filled-youtube-input';
 import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
 
@@ -20,14 +17,12 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-youtube-input-demo')
 export class TitaniumYoutubeInputDemo extends LitElement {
-  @query('titanium-filled-youtube-input') private accessor filledInput: TitaniumFilledYouTubeInput;
-  @query('titanium-youtube-input[required]') private accessor outlinedInput: TitaniumYouTubeInput;
+  @query('titanium-filled-youtube-input[required]') private accessor filledInput: TitaniumFilledYouTubeInput;
 
   static styles = [
     StoryStyles,
     css`
-      titanium-filled-youtube-input,
-      titanium-youtube-input {
+      titanium-filled-youtube-input {
         width: 100%;
         margin-bottom: 24px;
       }
@@ -41,10 +36,6 @@ export class TitaniumYoutubeInputDemo extends LitElement {
           <leavitt-app-navigation-header level1Text="Titanium youtube input" level1Href="/titanium-youtube-input" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <deprecation-notice>
-              <md-icon>warning</md-icon>
-              <p><kbd>titanium-youtube-input</kbd> is deprecated. Use <kbd>titanium-filled-youtube-input</kbd> instead (shown below).</p>
-            </deprecation-notice>
             <story-header name="Titanium filled youtube input" className="TitaniumFilledYouTubeInput"></story-header>
 
             <div>
@@ -81,56 +72,13 @@ export class TitaniumYoutubeInputDemo extends LitElement {
               </section>
             </div>
 
-            <api-docs src="./custom-elements.json" selected="titanium-filled-youtube-input"></api-docs>
-
-            <md-divider></md-divider>
-
-            <story-header name="Titanium youtube input" className="TitaniumYouTubeInput"></story-header>
-
-            <div>
-              <h1>Default</h1>
-              <p>YouTube video input with URL validation</p>
-              <titanium-youtube-input label="Video" value="SYmmXDTHx6Q"></titanium-youtube-input>
-            </div>
-
             <div>
               <h1>Disabled</h1>
               <p>Disabled YouTube input</p>
-              <titanium-youtube-input disabled label="Video" value="SYmmXDTHx6Q"></titanium-youtube-input>
-            </div>
-
-            <div>
-              <h1>Methods</h1>
-              <p>Demonstrates public methods like reset and reportValidity</p>
-              <titanium-youtube-input
-                required
-                label="Video"
-                @input=${(e: DOMEvent<TitaniumYouTubeInput>) => console.log(e.target.value)}
-              ></titanium-youtube-input>
-              <br />
-              <section buttons>
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.reset();
-                  }}
-                  >Reset</md-filled-tonal-button
-                >
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.focus();
-                  }}
-                  >Focus</md-filled-tonal-button
-                >
-                <md-filled-tonal-button
-                  @click=${() => {
-                    this.outlinedInput.reportValidity();
-                  }}
-                  >Report validity</md-filled-tonal-button
-                >
-              </section>
+              <titanium-filled-youtube-input disabled label="Video" value="SYmmXDTHx6Q"></titanium-filled-youtube-input>
             </div>
 
-            <api-docs src="./custom-elements.json" selected="titanium-youtube-input"></api-docs>
+            <api-docs src="./custom-elements.json" selected="titanium-filled-youtube-input"></api-docs>
           </leavitt-app-width-limiter>
         </main>
       </leavitt-app-main-content-container>
diff --git a/packages/leavittbook/src/getting-started.ts b/packages/leavittbook/src/getting-started.ts
index f4a0fb911..cad43c5a7 100644
--- a/packages/leavittbook/src/getting-started.ts
+++ b/packages/leavittbook/src/getting-started.ts
@@ -73,9 +73,9 @@ export default class GettingStarted extends LitElement {
               <p>NPM install:</p>
               <code block>npm i @leavittsoftware/web</code>
               <p>Include the element on your page.</p>
-              <code block>import '@leavittsoftware/web/titanium/card/card';</code>
+              <code block>import '@leavittsoftware/web/titanium/chip/chip';</code>
               <p>Use the element:</p>
-              <code block>${'<titanium-card></titanium-card>'}</code>
+              <code block>${'<titanium-chip label="Example"></titanium-chip>'}</code>
             </section>
 
             <section>
diff --git a/packages/leavittbook/src/my-app.ts b/packages/leavittbook/src/my-app.ts
index 09b16ae67..eb7a8a422 100644
--- a/packages/leavittbook/src/my-app.ts
+++ b/packages/leavittbook/src/my-app.ts
@@ -3,7 +3,6 @@ import '@leavittsoftware/web/leavitt/app/app-logo';
 import '@leavittsoftware/web/titanium/search-input/filled-search-input';
 import '@leavittsoftware/web/titanium/toolbar/toolbar';
 import '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
-import '@leavittsoftware/web/titanium/error-page/error-page';
 import '@leavittsoftware/web/titanium/drawer/drawer';
 import '@leavittsoftware/web/leavitt/profile-picture/profile-picture-menu';
 import '@leavittsoftware/web/leavitt/user-feedback/report-a-problem-dialog';
@@ -137,16 +136,12 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       page.show('/getting-started');
     });
     page('/getting-started', () => this.#changePage('getting-started', () => import('./getting-started.js')));
-    page('/titanium-full-page-loading-indicator', () =>
-      this.#changePage('titanium-full-page-loading-indicator', () => import('./demos/titanium-full-page-loading-indicator-demo.js'))
-    );
     page('/available-cdn-icons', () => this.#changePage('available-cdn-icons', () => import('./demos/available-cdn-icons-demo.js')));
 
     page('/leavitt-company-select', () => this.#changePage('leavitt-company-select', () => import('./demos/leavitt-company-select-demo.js')));
     page('/leavitt-file-explorer', () => this.#changePage('leavitt-file-explorer', () => import('./demos/leavitt-file-explorer-demo.js')));
 
     page('/titanium-date-range-selector', () => this.#changePage('titanium-date-range-selector', () => import('./demos/titanium-date-range-selector-demo.js')));
-    page('/titanium-data-table-item', () => this.#changePage('titanium-data-table-item', () => import('./demos/titanium-data-table-item-demo.js')));
 
     page('/leavitt-person-select', () => this.#changePage('leavitt-person-select', () => import('./demos/leavitt-person-select-demo.js')));
     page('/leavitt-person-company-select', () =>
@@ -156,32 +151,18 @@ export class MyApp extends PendingStateCatcher(LitElement) {
 
     page('/leavitt-email-history-viewer', () => this.#changePage('leavitt-email-history-viewer', () => import('./demos/leavitt-email-history-viewer-demo.js')));
 
-    page('/leavitt-user-feedback', () => this.#changePage('leavitt-user-feedback', () => import('./demos/leavitt-user-feedback-demo.js')));
     page('/leavitt-error-page', () => this.#changePage('leavitt-error-page', () => import('./demos/leavitt-error-page-demo.js')));
     page('/profile-picture', () => this.#changePage('profile-picture', () => import('./demos/profile-picture-demo.js')));
     page('/profile-picture-menu', () => this.#changePage('profile-picture-menu', () => import('./demos/profile-picture-menu-demo.js')));
-    page('/titanium-access-denied-page', () => this.#changePage('titanium-access-denied-page', () => import('./demos/titanium-access-denied-page-demo.js')));
 
-    page('/titanium-data-table', () => this.#changePage('titanium-data-table', () => import('./demos/titanium-data-table-demo.js')));
-    page('/titanium-data-table-item', () => this.#changePage('titanium-data-table-item', () => import('./demos/titanium-data-table-item-demo.js')));
+    page('/titanium-data-table-core', () => this.#changePage('titanium-data-table-core', () => import('./demos/titanium-data-table-core-demo.js')));
     page('/titanium-drawer', () => this.#changePage('titanium-drawer', () => import('./demos/titanium-drawer-demo.js')));
-    page('/titanium-error-page', () => this.#changePage('titanium-error-page', () => import('./demos/titanium-error-page-demo.js')));
     page('/titanium-address-input', () => this.#changePage('titanium-address-input', () => import('./demos/titanium-address-input-demo.js')));
-    page('/titanium-header', () => this.#changePage('titanium-header', () => import('./demos/titanium-header-demo.js')));
     page('/titanium-icon-picker', () => this.#changePage('titanium-icon-picker', () => import('./demos/titanium-icon-picker-demo.js')));
-    page('/titanium-header', () => this.#changePage('titanium-header', () => import('./demos/titanium-header-demo.js')));
 
     page('/titanium-chip-multi-select', () => this.#changePage('titanium-chip-multi-select', () => import('./demos/titanium-chip-multi-select-demo.js')));
     page('/titanium-input-validator', () => this.#changePage('titanium-input-validator', () => import('./demos/titanium-input-validator-demo.js')));
-    page('/titanium-data-table-header', () => this.#changePage('titanium-data-table-header', () => import('./demos/titanium-data-table-header-demo.js')));
-    page('/titanium-data-table-core', () => this.#changePage('titanium-data-table-core', () => import('./demos/titanium-data-table-core-demo.js')));
-    page('/titanium-promise-tracking', () =>
-      this.#changePage('titanium-promise-tracking', () => import('./demos/titanium-promise-tracking-demo.js'))
-    );
-
-    page('/titanium-full-page-loading-indicator', () =>
-      this.#changePage('titanium-full-page-loading-indicator', () => import('./demos/titanium-full-page-loading-indicator-demo.js'))
-    );
+    page('/titanium-promise-tracking', () => this.#changePage('titanium-promise-tracking', () => import('./demos/titanium-promise-tracking-demo.js')));
 
     page('/titanium-page-control', () => this.#changePage('titanium-page-control', () => import('./demos/titanium-page-control-demo.js')));
 
@@ -196,7 +177,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
 
     page('/titanium-styles', () => this.#changePage('titanium-styles', () => import('./demos/titanium-styles-demo.js')));
     page('/titanium-snackbar', () => this.#changePage('titanium-snackbar', () => import('./demos/titanium-snackbar-demo.js')));
-    page('/titanium-card', () => this.#changePage('titanium-card', () => import('./demos/titanium-card-demo.js')));
     page('/titanium-chip', () => this.#changePage('titanium-chip', () => import('./demos/titanium-chip-demo.js')));
     page('/titanium-youtube-input', () => this.#changePage('titanium-youtube-input', () => import('./demos/titanium-youtube-input-demo.js')));
     page('/titanium-show-hide', () => this.#changePage('titanium-show-hide', () => import('./demos/titanium-show-hide-demo.js')));
@@ -205,7 +185,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       this.#changePage('titanium-profile-picture-stack', () => import('./demos/titanium-profile-picture-stack-demo.js'))
     );
 
-    page('/titanium-confirm-dialog', () => this.#changePage('titanium-confirm-dialog', () => import('./demos/titanium-confirm-dialog-demo.js')));
     page('/titanium-confirmation-dialog', () => this.#changePage('titanium-confirmation-dialog', () => import('./demos/titanium-confirmation-dialog-demo.js')));
 
     page('*', () => {
@@ -296,8 +275,7 @@ export class MyApp extends PendingStateCatcher(LitElement) {
   ];
 
   render() {
-    return html`<titanium-full-page-loading-indicator></titanium-full-page-loading-indicator>
-      <titanium-toolbar>
+    return html`<titanium-toolbar>
         <md-circular-progress ?hidden=${!this.stateIsPending} root-loading ?indeterminate=${this.stateIsPending}></md-circular-progress>
         <md-icon-button
           hamburger
@@ -359,18 +337,10 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         <section>
           <h4 menu-category>Titanium</h4>
 
-          <md-list-item ?selected=${this.page === 'titanium-access-denied-page'} href="/titanium-access-denied-page" type="link">
-            <md-icon slot="start">block</md-icon> <span>Access denied page</span>
-          </md-list-item>
-
           <md-list-item ?selected=${this.page === 'titanium-address-input'} href="/titanium-address-input" type="link">
             <md-icon slot="start">location_on</md-icon> <span>Address input</span>
           </md-list-item>
 
-          <md-list-item ?selected=${this.page === 'titanium-card'} href="/titanium-card" type="link">
-            <md-icon slot="start">dashboard</md-icon> <span>Card</span>
-          </md-list-item>
-
           <md-list-item ?selected=${this.page === 'titanium-chip'} href="/titanium-chip" type="link">
             <md-icon slot="start">label</md-icon> <span>Chip</span>
           </md-list-item>
@@ -379,30 +349,14 @@ export class MyApp extends PendingStateCatcher(LitElement) {
             <md-icon slot="start">checklist</md-icon> <span>Chip multi select</span>
           </md-list-item>
 
-          <md-list-item ?selected=${this.page === 'titanium-confirm-dialog'} href="/titanium-confirm-dialog" type="link">
-            <md-icon slot="start">help_outline</md-icon> <span>Confirm dialog</span>
-          </md-list-item>
-
           <md-list-item ?selected=${this.page === 'titanium-confirmation-dialog'} href="/titanium-confirmation-dialog" type="link">
             <md-icon slot="start">check_circle</md-icon> <span>Confirmation dialog</span>
           </md-list-item>
 
-          <md-list-item ?selected=${this.page === 'titanium-data-table'} href="/titanium-data-table" type="link">
-            <md-icon slot="start">table_chart</md-icon> <span>Data table</span>
-          </md-list-item>
-
           <md-list-item ?selected=${this.page === 'titanium-data-table-core'} href="/titanium-data-table-core" type="link">
             <md-icon slot="start">table_rows</md-icon> <span>Data table core</span>
           </md-list-item>
 
-          <md-list-item ?selected=${this.page === 'titanium-data-table-header'} href="/titanium-data-table-header" type="link">
-            <md-icon slot="start">view_column</md-icon> <span>Data table header</span>
-          </md-list-item>
-
-          <md-list-item ?selected=${this.page === 'titanium-data-table-item'} href="/titanium-data-table-item" type="link">
-            <md-icon slot="start">format_list_numbered</md-icon> <span>Data table item</span>
-          </md-list-item>
-
           <md-list-item ?selected=${!!this.page?.includes('titanium-date-input')} href="/titanium-date-input" type="link">
             <md-icon slot="start">calendar_today</md-icon> <span>Date input </span>
           </md-list-item>
@@ -419,18 +373,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
             <md-icon slot="start">timer</md-icon> <span>Duration input</span>
           </md-list-item>
 
-          <md-list-item ?selected=${!!this.page?.includes('titanium-error-page')} href="/titanium-error-page" type="link">
-            <md-icon slot="start">error</md-icon> <span>Error page</span>
-          </md-list-item>
-
-          <md-list-item ?selected=${!!this.page?.includes('titanium-full-page-loading-indicator')} href="/titanium-full-page-loading-indicator" type="link">
-            <md-icon slot="start">hourglass_top</md-icon> <span>Full page loading indicator</span>
-          </md-list-item>
-
-          <md-list-item ?selected=${this.page === 'titanium-header'} href="/titanium-header" type="link">
-            <md-icon slot="start">title</md-icon> <span>Header</span>
-          </md-list-item>
-
           <md-list-item ?selected=${this.page === 'titanium-icon-picker'} href="/titanium-icon-picker" type="link">
             <md-icon slot="start">emoji_symbols</md-icon> <span>Icon picker</span>
           </md-list-item>
@@ -517,10 +459,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
           <md-list-item ?selected=${this.page === 'profile-picture-menu'} href="/profile-picture-menu" type="link">
             <md-icon slot="start">account_box</md-icon> <span>Profile picture menu</span>
           </md-list-item>
-
-          <md-list-item ?selected=${this.page === 'leavitt-user-feedback'} href="/leavitt-user-feedback" type="link">
-            <md-icon slot="start">feedback</md-icon> <span>User feedback</span>
-          </md-list-item>
         </section>
         <a
           slot="footer"
@@ -565,9 +503,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         ${this.page === 'leavitt-file-explorer'
           ? html` <leavitt-file-explorer-demo large ?isActive=${this.page === 'leavitt-file-explorer'}></leavitt-file-explorer-demo> `
           : nothing}
-        ${this.page === 'leavitt-user-feedback'
-          ? html` <leavitt-user-feedback-demo large ?isActive=${this.page === 'leavitt-user-feedback'}></leavitt-user-feedback-demo> `
-          : nothing}
         ${this.page === 'leavitt-error-page'
           ? html` <leavitt-error-page-demo large ?isActive=${this.page === 'leavitt-error-page'}></leavitt-error-page-demo> `
           : nothing}
@@ -585,33 +520,15 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         ${this.page === 'titanium-input-validator'
           ? html` <titanium-input-validator-demo large ?isActive=${this.page === 'titanium-input-validator'}></titanium-input-validator-demo> `
           : nothing}
-        ${this.page === 'titanium-data-table'
-          ? html` <titanium-data-table-demo large ?isActive=${this.page === 'titanium-data-table'}></titanium-data-table-demo> `
-          : nothing}
         ${this.page === 'titanium-data-table-core'
           ? html` <titanium-data-table-core-demo large ?isActive=${this.page === 'titanium-data-table-core'}></titanium-data-table-core-demo> `
           : nothing}
         ${this.page === 'titanium-promise-tracking'
-          ? html`
-              <titanium-promise-tracking-demo large ?isActive=${this.page === 'titanium-promise-tracking'}></titanium-promise-tracking-demo>
-            `
-          : nothing}
-        ${this.page === 'titanium-data-table-header'
-          ? html` <titanium-data-table-header-demo large ?isActive=${this.page === 'titanium-data-table-header'}></titanium-data-table-header-demo> `
-          : nothing}
-        ${this.page === 'titanium-data-table-item'
-          ? html` <titanium-data-table-item-demo large ?isActive=${this.page === 'titanium-data-table-item'}></titanium-data-table-item-demo> `
-          : nothing}
-        ${this.page === 'titanium-access-denied-page'
-          ? html` <titanium-access-denied-page-demo large ?isActive=${this.page === 'titanium-access-denied-page'}></titanium-access-denied-page-demo> `
+          ? html` <titanium-promise-tracking-demo large ?isActive=${this.page === 'titanium-promise-tracking'}></titanium-promise-tracking-demo> `
           : nothing}
         ${this.page === 'titanium-address-input'
           ? html` <titanium-address-input-demo large ?isActive=${this.page === 'titanium-address-input'}></titanium-address-input-demo> `
           : nothing}
-        ${this.page === 'titanium-error-page'
-          ? html` <titanium-error-page-demo large ?isActive=${this.page === 'titanium-error-page'}></titanium-error-page-demo> `
-          : nothing}
-        ${this.page === 'titanium-header' ? html` <titanium-header-demo ?isActive=${this.page === 'titanium-header'}></titanium-header-demo> ` : nothing}
         ${this.page === 'titanium-icon' ? html` <titanium-icon-demo ?isActive=${this.page === 'titanium-icon'}></titanium-icon-demo> ` : nothing}
         ${this.page === 'titanium-icon-picker'
           ? html` <titanium-icon-picker-demo large ?isActive=${this.page === 'titanium-icon-picker'}></titanium-icon-picker-demo> `
@@ -628,14 +545,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         ${this.page === 'titanium-toolbar'
           ? html` <titanium-toolbar-demo large ?isActive=${this.page === 'titanium-toolbar'}></titanium-toolbar-demo> `
           : nothing}
-        ${this.page === 'titanium-full-page-loading-indicator'
-          ? html`
-              <titanium-full-page-loading-indicator-demo
-                large
-                ?isActive=${this.page === 'titanium-full-page-loading-indicator'}
-              ></titanium-full-page-loading-indicator-demo>
-            `
-          : nothing}
         ${this.page === 'titanium-loading-indicator'
           ? html` <titanium-loading-indicator-demo large ?isActive=${this.page === 'titanium-loading-indicator'}></titanium-loading-indicator-demo> `
           : nothing}
@@ -651,7 +560,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
               <titanium-smart-attachment-input-demo large ?isActive=${this.page === 'titanium-smart-attachment-input'}></titanium-smart-attachment-input-demo>
             `
           : nothing}
-        ${this.page === 'titanium-card' ? html` <titanium-card-demo large ?isActive=${this.page === 'titanium-card'}></titanium-card-demo> ` : nothing}
         ${this.page === 'titanium-chip' ? html` <titanium-chip-demo large ?isActive=${this.page === 'titanium-chip'}></titanium-chip-demo> ` : nothing}
         ${this.page === 'titanium-youtube-input'
           ? html` <titanium-youtube-input-demo large ?isActive=${this.page === 'titanium-youtube-input'}></titanium-youtube-input-demo> `
@@ -662,9 +570,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         ${this.page === 'titanium-duration-input'
           ? html` <titanium-duration-input-demo large ?isActive=${this.page === 'titanium-duration-input'}></titanium-duration-input-demo> `
           : nothing}
-        ${this.page === 'titanium-confirm-dialog'
-          ? html` <titanium-confirm-dialog-demo large ?isActive=${this.page === 'titanium-confirm-dialog'}></titanium-confirm-dialog-demo> `
-          : nothing}
         ${this.page === 'titanium-confirmation-dialog'
           ? html` <titanium-confirmation-dialog-demo large ?isActive=${this.page === 'titanium-confirmation-dialog'}></titanium-confirmation-dialog-demo> `
           : nothing}
@@ -673,7 +578,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
               <titanium-profile-picture-stack-demo large ?isActive=${this.page === 'titanium-profile-picture-stack'}></titanium-profile-picture-stack-demo>
             `
           : nothing}
-        <titanium-access-denied-page ?hidden=${this.page !== 'access-denied'}></titanium-access-denied-page>
 
         <leavitt-error-page
           ?hidden=${this.page !== 'error'}
@@ -687,7 +591,6 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       <report-a-problem-dialog .userManager=${UserManager}></report-a-problem-dialog>
       <provide-feedback-dialog .userManager=${UserManager}></provide-feedback-dialog>
 
-      <titanium-confirm-dialog></titanium-confirm-dialog>
       <titanium-snackbar-stack .eventListenerTarget=${document}></titanium-snackbar-stack> `;
   }
 }
diff --git a/packages/leavittbook/src/styles/story-styles.ts b/packages/leavittbook/src/styles/story-styles.ts
index d20e8bc10..5cb0d8e9c 100644
--- a/packages/leavittbook/src/styles/story-styles.ts
+++ b/packages/leavittbook/src/styles/story-styles.ts
@@ -11,10 +11,6 @@ const StoryStyles = [
       margin-bottom: 48px;
     }
 
-    titanium-card {
-      margin-bottom: 36px;
-    }
-
     h1 {
       margin-bottom: 0;
     }
diff --git a/packages/web/leavitt/company-select/company-select.ts b/packages/web/leavitt/company-select/company-select.ts
index 786def96c..6040a6d60 100644
--- a/packages/web/leavitt/company-select/company-select.ts
+++ b/packages/web/leavitt/company-select/company-select.ts
@@ -98,7 +98,7 @@ export class LeavittCompanySelect extends TitaniumSingleSelectBase<Partial<Compa
   async #getCompanies() {
     try {
       const get = this.apiService?.getAsync<Partial<Company>>(`${this.apiControllerName}?${this.odataParts.join('&')}`);
-      this.loadWhile(get);
+      this.trackLoadingPromise(get);
       const result = await get;
       return result?.toList() ?? [];
     } catch (error) {
diff --git a/packages/web/leavitt/email-history-viewer/email-history-view-list-filter-dialog.ts b/packages/web/leavitt/email-history-viewer/email-history-view-list-filter-dialog.ts
deleted file mode 100644
index 45619a04f..000000000
--- a/packages/web/leavitt/email-history-viewer/email-history-view-list-filter-dialog.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import '../../titanium/date-range-selector/date-range-selector';
-
-import '@material/web/dialog/dialog';
-import '@material/web/button/text-button';
-import '@material/web/icon/icon';
-import '@material/web/chips/input-chip';
-
-import { dialogZIndexHack } from '../../titanium/hacks/dialog-zindex-hack';
-import { LitElement, PropertyValues, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { MdDialog } from '@material/web/dialog/dialog';
-import { LoadWhile } from '../../titanium/helpers/load-while';
-import { FilterController } from '../../titanium/data-table/filter-controller';
-import { rangeLabel } from '../../titanium/date-range-selector/types/range-label';
-import { TitaniumDateRangeSelector } from '../../titanium/date-range-selector/date-range-selector';
-import { DateRangeKey } from '../../titanium/date-range-selector/types/date-range-key';
-import { DateRanges } from '../../titanium/date-range-selector/types/date-ranges';
-import { DOMEvent } from '../../titanium/types/dom-event';
-import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../../titanium/hacks/dialog-navigation-hack';
-import ApiService from '../api-service/api-service';
-import { EmailTemplate } from '@leavittsoftware/lg-core-typescript';
-import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
-import { MdOutlinedSelect } from '@material/web/select/outlined-select';
-
-export type FilterKeys = 'template' | 'startDate' | 'endDate' | 'dateRange';
-
-@customElement('leavitt-email-history-view-list-filter-dialog')
-export class LeavittEmailHistoryViewListFilterDialog extends LoadWhile(LitElement) {
-  @property({ type: Boolean }) accessor isActive: boolean;
-  @property({ type: Object }) accessor apiService: ApiService | null;
-
-  @state() private accessor filterController: FilterController<FilterKeys>;
-  @state() private accessor template: Partial<EmailTemplate>[] = [];
-  @state() private accessor templateId: string;
-
-  #templatesAreDirty = true;
-
-  //Date range props
-  @state() private accessor startDate: string;
-  @state() private accessor endDate: string;
-
-  @query('md-dialog') private accessor dialog!: MdDialog;
-  @query('titanium-date-range-selector') private accessor dateRangeSelect!: TitaniumDateRangeSelector;
-
-  async firstUpdated() {
-    this.filterController.subscribeToFilterChange(async () => {
-      this.#preloadChipData();
-      this.requestUpdate('filterController');
-    });
-  }
-
-  async updated(changedProps: PropertyValues<this>) {
-    if (this.isActive && changedProps.has('isActive')) {
-      this.#preloadChipData();
-    }
-  }
-
-  async #preloadChipData() {
-    //Preload for chips
-    if (this.filterController.getValue('template') && this.#templatesAreDirty) {
-      this.template = await this.#getTemplatesAsync();
-    }
-  }
-
-  async #getTemplatesAsync() {
-    if (!this.apiService) {
-      console.warn('No api service provided');
-      return [];
-    }
-
-    const odataParts = ['select=Id,Name,IsExpired', 'orderby=Name'];
-
-    try {
-      const get = this.apiService.getAsync<EmailTemplate>(`EmailTemplates?${odataParts.join('&')}`);
-      this.loadWhile(get);
-      const entities = (await get).toList();
-      this.#templatesAreDirty = false;
-      return entities;
-    } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
-    }
-    return [];
-  }
-
-  public async open() {
-    if (this.#templatesAreDirty) {
-      this.template = await this.#getTemplatesAsync();
-    }
-
-    this.templateId = this.filterController.getValue('template') ?? '';
-
-    //populate date range
-    const dateRange = this.filterController.getValue('dateRange') as DateRangeKey;
-    this.startDate = (dateRange === 'custom' ? this.filterController.getValue('startDate') : DateRanges.get(dateRange)?.startDate()) || '';
-    this.endDate = (dateRange === 'custom' ? this.filterController.getValue('endDate') : DateRanges.get(dateRange)?.endDate()) || '';
-
-    this.dialog.show();
-  }
-
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      md-dialog {
-        max-width: 550px;
-        width: calc(100vw - 24px);
-
-        div[inactive] {
-          font-size: 12px;
-          line-height: 14px;
-          opacity: 0.8;
-        }
-
-        md-outlined-select {
-          width: 100%;
-          margin-top: 24px;
-        }
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <md-input-chip
-        remove-only
-        ?hidden=${!this.filterController.getValue('template') || this.isLoading}
-        label="${this.template.find((o) => o.Id === Number(this.filterController.getValue('template')))?.Name ?? ''} template"
-        @remove=${(e: Event) => {
-          e.preventDefault();
-          this.filterController.setValue('template', null);
-        }}
-      >
-        <md-icon slot="icon">content_copy</md-icon>
-      </md-input-chip>
-
-      <md-input-chip
-        remove-only
-        ?hidden=${!(this.filterController.getValue('dateRange') as DateRangeKey) || (this.filterController.getValue('dateRange') as DateRangeKey) === 'allTime'}
-        label=${rangeLabel(
-          this.filterController.getValue('dateRange') as DateRangeKey,
-          this.filterController.getValue('startDate') ?? null,
-          this.filterController.getValue('endDate') ?? null,
-          'Sent'
-        )}
-        @remove=${(e: Event) => {
-          e.preventDefault();
-          this.filterController.setValue('dateRange', null);
-          this.filterController.setValue('startDate', null);
-          this.filterController.setValue('endDate', null);
-        }}
-      >
-        <md-icon slot="icon">date_range</md-icon>
-      </md-input-chip>
-
-      <md-dialog
-        @open=${(e: DOMEvent<MdDialog>) => {
-          dialogZIndexHack(e.target);
-          dialogOpenNavigationHack(e.target);
-        }}
-        @close=${(e: DOMEvent<MdDialog>) => {
-          dialogCloseNavigationHack(e.target);
-        }}
-      >
-        <div slot="headline">Filter logs by</div>
-        <form slot="content" method="dialog">
-          <titanium-date-range-selector
-            label="Sent"
-            .startDate=${this.startDate}
-            .endDate=${this.endDate}
-            @change=${(event: DOMEvent<TitaniumDateRangeSelector>) => {
-              this.startDate = event.target.startDate || '';
-              this.endDate = event.target.endDate || '';
-            }}
-          ></titanium-date-range-selector>
-
-          <md-outlined-select
-            label="Templates"
-            .value=${this.templateId ?? ''}
-            @change=${(e: DOMEvent<MdOutlinedSelect>) => (this.templateId = e.target.value)}
-          >
-            <md-icon slot="leading-icon">content_copy</md-icon>
-            <md-select-option></md-select-option>
-            ${this.template.map(
-              (o) =>
-                html`<md-select-option ?selected=${o.Id === Number(this.templateId)} value=${o.Id ?? ''}>
-                  <div slot="headline">${o.Name}</div>
-                  ${o.IsExpired ? html`<div inactive slot="supporting-text">Inactive</div>` : ''}
-                  <md-icon slot="start">content_copy</md-icon>
-                </md-select-option>`
-            )}
-          </md-outlined-select>
-        </form>
-        <div slot="actions">
-          <md-text-button @click=${() => this.dialog.close('cancel')}> Close </md-text-button>
-          <md-text-button
-            @click=${() => {
-              this.filterController.setValue('template', this.templateId || null);
-
-              //set date range
-              this.filterController.setValue('dateRange', this.dateRangeSelect.range === 'allTime' ? null : this.dateRangeSelect.range);
-              this.filterController.setValue('startDate', this.dateRangeSelect.range === 'custom' ? this.startDate || null : null);
-              this.filterController.setValue('endDate', this.dateRangeSelect.range === 'custom' ? this.endDate || null : null);
-
-              this.dialog.close('apply');
-            }}
-            >Apply</md-text-button
-          >
-        </div>
-      </md-dialog>
-    `;
-  }
-}
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
index 0237b64b3..8e1ebe292 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
@@ -12,7 +12,7 @@ import { dialogZIndexHack } from '../../titanium/hacks/dialog-zindex-hack';
 import { LitElement, PropertyValues, css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { MdDialog } from '@material/web/dialog/dialog';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { FilterController } from '../../titanium/data-table/filter-controller';
 import { rangeLabel } from '../../titanium/date-range-selector/types/range-label';
 import { TitaniumDateRangeSelector } from '../../titanium/date-range-selector/date-range-selector';
@@ -28,7 +28,12 @@ import { MdOutlinedSelect } from '@material/web/select/outlined-select';
 export type FilterKeys = 'template' | 'startDate' | 'endDate' | 'dateRange';
 
 @customElement('leavitt-email-history-viewer-filled-filter-dialog')
-export class LeavittEmailHistoryViewerFilledFilterDialog extends LoadWhile(LitElement) {
+export class LeavittEmailHistoryViewerFilledFilterDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Boolean }) accessor isActive: boolean;
   @property({ type: Object }) accessor apiService: ApiService | null;
 
@@ -75,7 +80,7 @@ export class LeavittEmailHistoryViewerFilledFilterDialog extends LoadWhile(LitEl
 
     try {
       const get = this.apiService.getAsync<EmailTemplate>(`EmailTemplates?${odataParts.join('&')}`);
-      this.loadWhile(get);
+      this.trackLoadingPromise(get);
       const entities = (await get).toList();
       this.#templatesAreDirty = false;
       return entities;
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
index f3a65d87f..c379721ff 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
@@ -19,7 +19,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { a, ellipsis } from '../../titanium/styles/styles';
 import { getSearchTokens } from '../../titanium/helpers/get-search-token';
 import { DOMEvent } from '../../titanium/types/dom-event';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 import { TitaniumPageControl } from '../../titanium/data-table/page-control';
 import { PendingStateEvent } from '../../titanium/types/pending-state-event';
@@ -48,7 +48,12 @@ import ApiService from '../api-service/api-service';
 type ItemType = Partial<EmailTemplateLog>;
 
 @customElement('leavitt-email-history-viewer-filled')
-export default class LeavittEmailHistoryViewerFilled extends LoadWhile(LitElement) {
+export default class LeavittEmailHistoryViewerFilled extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Boolean }) public accessor isActive: boolean;
   @property({ type: Object }) public accessor apiService: ApiService | null;
   @property({ type: String }) public accessor path: string;
@@ -270,8 +275,8 @@ export default class LeavittEmailHistoryViewerFilled extends LoadWhile(LitElemen
       }
 
       const get = this.apiService?.getAsync<ItemType>(`${this.apiControllerName}/?${odataParts.join('&')}`);
-      this.loadWhile(get);
-      this.dataTable.loadWhile(get);
+      this.trackLoadingPromise(get);
+      this.dataTable.trackLoadingPromise(get);
       this.dispatchEvent(new PendingStateEvent(get));
       const result = await get;
       return { items: result.toList(), odataCount: result.odataCount };
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer.ts
deleted file mode 100644
index c16770ad7..000000000
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer.ts
+++ /dev/null
@@ -1,367 +0,0 @@
-import '../../titanium/data-table/data-table';
-import '../../titanium/data-table/data-table-item';
-import '../../titanium/data-table/data-table-header';
-import '../../titanium/header/header';
-import '../../titanium/search-input/search-input';
-
-import './email-history-view-list-filter-dialog';
-import './view-sent-email-dialog';
-import './view-email-template-info-dialog';
-
-import '@material/web/icon/icon';
-import '@material/web/iconbutton/icon-button';
-import '@material/web/iconbutton/filled-tonal-icon-button';
-
-import dayjs from 'dayjs/esm';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { EmailTemplateLog } from '@leavittsoftware/lg-core-typescript';
-import { TitaniumDataTable } from '../../titanium/data-table/data-table';
-import { FilterController } from '../../titanium/data-table/filter-controller';
-import { DateRangeKey } from '../../titanium/date-range-selector/types/date-range-key';
-import { DateRanges } from '../../titanium/date-range-selector/types/date-ranges';
-import { Debouncer } from '../../titanium/helpers/debouncer';
-import { getSearchTokens } from '../../titanium/helpers/get-search-token';
-import { LoadWhile } from '../../titanium/helpers/load-while';
-import { TitaniumSearchInput } from '../../titanium/search-input/search-input';
-import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
-import { a } from '../../titanium/styles/a';
-import { ellipsis } from '../../titanium/styles/ellipsis';
-import { DOMEvent } from '../../titanium/types/dom-event';
-import { LitElement, PropertyValues, css, html, nothing } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-import { FilterKeys, LeavittEmailHistoryViewListFilterDialog } from './email-history-view-list-filter-dialog';
-import { LeavittViewSentEmailDialog } from './view-sent-email-dialog';
-import ApiService from '../api-service/api-service';
-import { LeavittViewEmailTemplateInfoDialog } from './view-email-template-info-dialog';
-import { isDevelopment } from '@leavittsoftware/web/titanium/helpers/is-development';
-
-/**
- * @element leavitt-email-history-viewer
-
- * @description A component that displays a list of email history for embedding in Leavitt's specific applications.
- * @property isActive - Whether the component is active / in view
- * @property apiService - The API service to use. This is required to fetch the email history.
- * @property path - the route that this component will be available at
- */
-
-@customElement('leavitt-email-history-viewer')
-export default class LeavittEmailHistoryViewer extends LoadWhile(LitElement) {
-  @property({ type: Boolean }) accessor isActive: boolean;
-  @property({ type: Object }) accessor apiService: ApiService | null;
-  @property({ type: String }) accessor path: string;
-  @property({ type: String }) accessor apiControllerName: string = 'EmailTemplateLogs';
-
-  // Data table props
-  @state() private accessor logs: Array<Partial<EmailTemplateLog>> = [];
-  @state() private accessor selected: Array<Partial<EmailTemplateLog>> = [];
-  @state() private accessor searchTerm: string = '';
-  @state() private accessor resultTotal: number = 0;
-  @state() private accessor sortDirection: '' | 'asc' | 'desc' = 'desc';
-  @state() private accessor sortBy: string = 'SentDate';
-  @state() private accessor filterController: FilterController<FilterKeys>;
-
-  @query('titanium-data-table') private accessor dataTable!: TitaniumDataTable;
-  @query('leavitt-view-sent-email-dialog') private accessor viewDialog!: LeavittViewSentEmailDialog;
-  @query('leavitt-email-history-view-list-filter-dialog') private accessor filterModal: LeavittEmailHistoryViewListFilterDialog;
-  @query('leavitt-view-email-template-info-dialog') private accessor viewEmailTemplateInfoDialog!: LeavittViewEmailTemplateInfoDialog;
-
-  #isDirty: boolean = true;
-
-  constructor() {
-    super();
-    this.filterController = new FilterController('');
-    this.filterController.setFilter('dateRange', () => '');
-    this.filterController.setFilter('startDate', () => '');
-    this.filterController.setFilter('endDate', () => '');
-    this.filterController.setFilter('template', (val) => `EmailTemplateId eq ${val}`);
-
-    this.filterController.subscribeToFilterChange(async () => {
-      if (this.isActive) {
-        this.dataTable.resetPage();
-        this.#reload();
-      } else {
-        this.#isDirty = true;
-      }
-    });
-    this.filterController.loadFromQueryString();
-  }
-
-  updated(changedProps: PropertyValues<this>) {
-    if (this.isActive && (changedProps.has('isActive') || changedProps.has('apiControllerName') || this.#isDirty)) {
-      this.#reload();
-    }
-
-    if (changedProps.has('path')) {
-      this.filterController.path = this.path;
-    }
-  }
-
-  #reload() {
-    this.#getLogsAsync(this.searchTerm);
-  }
-
-  #onSortDirectionChange(e: CustomEvent<'' | 'asc' | 'desc'>) {
-    this.sortDirection = e.detail;
-    this.dataTable.resetPage();
-    this.#reload();
-  }
-
-  #onSortByChange(e: CustomEvent<string>) {
-    this.sortBy = e.detail;
-    this.dataTable.resetPage();
-    this.#reload();
-  }
-
-  #doSearchDebouncer = new Debouncer((searchTerm: string) => this.#getLogsAsync(searchTerm));
-
-  renderRecipients(recipients: string | null, maxRecipients: number = 1) {
-    const recipientsList =
-      recipients
-        ?.split(',')
-        .filter((o) => !!o)
-        .map((o) => o.trim())
-        .reverse() ?? [];
-
-    if (recipientsList?.length > maxRecipients) {
-      return html`${repeat(
-          recipientsList.slice(0, maxRecipients),
-          (o) => o,
-          (o) => html`${o} <br />`
-        )} <span more> ${recipientsList.length - maxRecipients} more... </span>`;
-    }
-    return repeat(
-      recipientsList,
-      (o) => o,
-      (o) => html`${o} <br />`
-    );
-  }
-
-  async #getLogsAsync(searchTerm: string) {
-    if (!this.apiService) {
-      console.warn('No api service provided');
-      return;
-    }
-
-    let filterParts: string[] = [];
-    const searchTokens = getSearchTokens(searchTerm);
-    const searchFilter = searchTokens.map((token: string) => `(contains(Subject, '${token}') or contains(Recipients, '${token}'))`).join(' and ');
-    if (searchTokens.length > 0) {
-      filterParts.push(`${searchFilter}`);
-    }
-
-    //Date filters
-    const dateRange = this.filterController.getValue('dateRange') as DateRangeKey;
-    const startDate = dateRange === 'custom' ? this.filterController.getValue('startDate') : DateRanges.get(dateRange)?.startDate();
-    const endDate = dateRange === 'custom' ? this.filterController.getValue('endDate') : DateRanges.get(dateRange)?.endDate();
-    if (startDate) {
-      filterParts.push(`SentDate ge ${dayjs(startDate).format('YYYY-MM-DD')}`);
-    }
-    if (endDate) {
-      filterParts.push(`SentDate le ${dayjs(endDate).format('YYYY-MM-DD')}`);
-    }
-    if (!isDevelopment) {
-      filterParts.push('IsTestMessage eq false');
-    }
-
-    filterParts = [...filterParts, ...this.filterController.getActiveFilterOdata()];
-
-    const odataParts = [
-      `select=Id,Recipients,SentDate,Subject${isDevelopment ? ',IsTestMessage' : ''}`,
-      'expand=EmailTemplate(select=Id,Name,IsExpired)',
-      `top=${await this.dataTable.getTake()}`,
-      `orderby=${this.sortBy} ${this.sortDirection}`,
-      `skip=${(await this.dataTable.getTake()) * (await this.dataTable.getPage())}`,
-      'count=true',
-    ];
-    if (filterParts.length > 0) {
-      odataParts.push(`filter=${filterParts.join(' and ')}`);
-    }
-    try {
-      const get = this.apiService.getAsync<Partial<EmailTemplateLog>>(`${this.apiControllerName}/?${odataParts.join('&')}`);
-      this.dataTable.loadWhile(get);
-      this.loadWhile(get);
-      const result = await get;
-      this.resultTotal = result.odataCount;
-      this.logs = result.toList();
-    } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
-    } finally {
-      this.#isDirty = false;
-    }
-  }
-
-  static styles = [
-    ellipsis,
-    a,
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 24px;
-      }
-
-      header {
-        display: grid;
-        gap: 12px;
-        md-text-button {
-          justify-self: center;
-        }
-      }
-
-      [inactive],
-      span[time],
-      span[more] {
-        font-size: 12px;
-        line-height: 14px;
-        opacity: 0.8;
-      }
-
-      md-filled-tonal-icon-button {
-        --md-filled-tonal-icon-button-container-height: 32px;
-        --md-filled-tonal-icon-button-icon-size: 21px;
-      }
-
-      md-text-button {
-        text-wrap: auto;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <header>
-        <titanium-header header="Email history" subHeader="A comprehensive record of email correspondence originating from this tool" no-nav></titanium-header>
-
-        <md-text-button @click=${() => this.viewEmailTemplateInfoDialog.open()}>
-          <md-icon slot="icon">chat_info</md-icon>
-          <span>What emails does this tool send?</span>
-        </md-text-button>
-      </header>
-      <titanium-data-table
-        header="Emails"
-        disable-select
-        @selected-changed=${(e: CustomEvent<Array<Partial<EmailTemplateLog>>>) => {
-          this.selected = [...e.detail];
-        }}
-        @paging-changed=${() => this.#reload()}
-        .count=${this.resultTotal}
-        .items=${this.logs}
-        .searchTerm=${this.searchTerm}
-      >
-        <titanium-search-input
-          slot="search-button"
-          title="Search by recipients or subject"
-          placeholder="Recipients or subject"
-          .value=${this.searchTerm}
-          @input=${(e: DOMEvent<TitaniumSearchInput>) => {
-            this.searchTerm = e.target.value;
-            this.dataTable.resetPage();
-            this.#doSearchDebouncer.debounce(this.searchTerm);
-          }}
-        ></titanium-search-input>
-
-        <leavitt-email-history-view-list-filter-dialog
-          .isActive=${this.isActive}
-          slot="filters"
-          .filterController=${this.filterController}
-          .apiService=${this.apiService}
-        ></leavitt-email-history-view-list-filter-dialog>
-
-        <md-icon-button slot="filter-button" @click=${async () => this.filterModal.open()}>
-          <md-icon>filter_list</md-icon>
-        </md-icon-button>
-
-        <titanium-data-table-header
-          width="150px"
-          slot="table-headers"
-          title="Sent"
-          column-name="SentDate"
-          @sort-by-changed=${this.#onSortByChange}
-          .sortBy=${this.sortBy}
-          .sortDirection=${this.sortDirection}
-          @sort-direction-changed=${this.#onSortDirectionChange}
-        ></titanium-data-table-header>
-
-        <titanium-data-table-header
-          large
-          slot="table-headers"
-          column-name="Subject"
-          title="Subject"
-          @sort-by-changed=${this.#onSortByChange}
-          .sortBy=${this.sortBy}
-          .sortDirection=${this.sortDirection}
-          @sort-direction-changed=${this.#onSortDirectionChange}
-        ></titanium-data-table-header>
-
-        <titanium-data-table-header
-          desktop
-          slot="table-headers"
-          width="150px"
-          column-name="Recipients"
-          title="Recipients"
-          @sort-by-changed=${this.#onSortByChange}
-          .sortBy=${this.sortBy}
-          .sortDirection=${this.sortDirection}
-          @sort-direction-changed=${this.#onSortDirectionChange}
-        ></titanium-data-table-header>
-
-        <titanium-data-table-header
-          desktop
-          width="150px"
-          slot="table-headers"
-          column-name="EmailTemplate/Name"
-          title="Email template"
-          @sort-by-changed=${this.#onSortByChange}
-          .sortBy=${this.sortBy}
-          .sortDirection=${this.sortDirection}
-          @sort-direction-changed=${this.#onSortDirectionChange}
-        ></titanium-data-table-header>
-
-        ${isDevelopment
-          ? html`<titanium-data-table-header
-              width="50px"
-              desktop
-              slot="table-headers"
-              column-name="IsTestMessage"
-              title="Test"
-              @sort-by-changed=${this.#onSortByChange}
-              .sortBy=${this.sortBy}
-              .sortDirection=${this.sortDirection}
-              @sort-direction-changed=${this.#onSortDirectionChange}
-            ></titanium-data-table-header>`
-          : nothing}
-
-        <titanium-data-table-header width="50px" no-sort slot="table-headers"></titanium-data-table-header>
-        ${repeat(
-          this.logs ?? [],
-          (item) => item.Id,
-          (item) => html`
-            <titanium-data-table-item disable-select .item=${item} slot="items">
-              <row-item width="150px" ellipsis date
-                >${item.SentDate
-                  ? html`${dayjs(item.SentDate).format('MMM DD, YY')}<br /><span time>${dayjs(item.SentDate).format('h:mm A')}</span>`
-                  : '-'}</row-item
-              >
-              <row-item large ellipsis>${item.Subject ?? '-'}</row-item>
-              <row-item desktop width="150px" title=${item.Recipients ?? ''}>${this.renderRecipients(item.Recipients ?? null)}</row-item>
-              <row-item desktop width="150px">
-                <div>${item.EmailTemplate?.Name}</div>
-                ${item.EmailTemplate?.IsExpired ? html`<div inactive>Inactive</div>` : ''}</row-item
-              >
-              ${isDevelopment ? html`<row-item width="50px" desktop title="Test Message"><div>${item.IsTestMessage ? 'Yes' : 'No'}</div></row-item>` : nothing}
-              <row-item width="50px"
-                ><md-filled-tonal-icon-button @click=${() => this.viewDialog.open(item.Id ?? 0)}><md-icon>pageview</md-icon></md-filled-tonal-icon-button>
-              </row-item>
-            </titanium-data-table-item>
-          `
-        )}
-      </titanium-data-table>
-      <leavitt-view-sent-email-dialog .apiService=${this.apiService}></leavitt-view-sent-email-dialog>
-      <leavitt-view-email-template-info-dialog .apiService=${this.apiService}></leavitt-view-email-template-info-dialog>
-    `;
-  }
-}
diff --git a/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts b/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
index 825a9dcc9..752a7a306 100644
--- a/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
@@ -6,7 +6,7 @@ import '@material/web/progress/circular-progress';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { EmailTemplate } from '@leavittsoftware/lg-core-typescript';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { MdDialog } from '@material/web/dialog/dialog';
 import { DOMEvent } from '../../titanium/types/dom-event';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
@@ -21,7 +21,12 @@ import { h2 } from '../../titanium/styles/h2';
 export type CloseReason = 'done';
 
 @customElement('leavitt-view-email-template-info-dialog')
-export class LeavittViewEmailTemplateInfoDialog extends LoadWhile(LitElement) {
+export class LeavittViewEmailTemplateInfoDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Object }) accessor apiService: ApiService | null;
 
   @state() private accessor emailTemplates: Partial<EmailTemplate>[] | null;
@@ -55,7 +60,7 @@ export class LeavittViewEmailTemplateInfoDialog extends LoadWhile(LitElement) {
 
     try {
       const get = this.apiService.getAsync<Partial<EmailTemplate>>(`EmailTemplates?${odataParts.join('&')}`);
-      this.loadWhile(get);
+      this.trackLoadingPromise(get);
       const result = await get;
       return result?.entities;
     } catch (error) {
diff --git a/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts b/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
index 7c9d23007..b82236471 100644
--- a/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
@@ -10,7 +10,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { EmailTemplateLog } from '@leavittsoftware/lg-core-typescript';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { MdDialog } from '@material/web/dialog/dialog';
 import { DOMEvent } from '../../titanium/types/dom-event';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
@@ -23,7 +23,12 @@ import { p } from '../../titanium/styles/p';
 export type CloseReason = 'done';
 
 @customElement('leavitt-view-sent-email-dialog')
-export class LeavittViewSentEmailDialog extends LoadWhile(LitElement) {
+export class LeavittViewSentEmailDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Object }) accessor apiService: ApiService | null;
 
   @state() private accessor emailTemplateLogId: number | null;
@@ -59,7 +64,7 @@ export class LeavittViewSentEmailDialog extends LoadWhile(LitElement) {
 
     try {
       const get = this.apiService.getAsync<Partial<EmailTemplateLog>>(`EmailTemplateLogs(${emailTemplateLogId})?${odataParts.join('&')}`);
-      this.loadWhile(get);
+      this.trackLoadingPromise(get);
       const result = await get;
       return result?.entity;
     } catch (error) {
diff --git a/packages/web/leavitt/file-explorer/add-folder-modal.ts b/packages/web/leavitt/file-explorer/add-folder-modal.ts
index ce2a7ee14..61c195da3 100644
--- a/packages/web/leavitt/file-explorer/add-folder-modal.ts
+++ b/packages/web/leavitt/file-explorer/add-folder-modal.ts
@@ -11,11 +11,16 @@ import ApiService from '../api-service/api-service';
 import { PendingStateEvent } from '../../titanium/types/pending-state-event';
 import { DOMEvent } from '../../titanium/types/dom-event';
 import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
-import { LoadWhile } from '../../titanium/helpers/helpers';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 
 @customElement('leavitt-add-folder-modal')
-export class AddFolderModal extends LoadWhile(LitElement) {
+export class AddFolderModal extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   /**
    *  Required
    */
@@ -50,7 +55,7 @@ export class AddFolderModal extends LoadWhile(LitElement) {
     try {
       const post = this.apiService.postAsync<FileExplorerFolder>('FileExplorerFolders?expand=CreatorPerson(select=FullName,ProfilePictureCdnFileName)', dto);
       this.dispatchEvent(new PendingStateEvent(post));
-      this.loadWhile(post);
+      this.trackLoadingPromise(post);
       const result = (await post)?.entity;
 
       return {
diff --git a/packages/web/leavitt/file-explorer/file-explorer.ts b/packages/web/leavitt/file-explorer/file-explorer.ts
index 358e9e9aa..4decf16eb 100644
--- a/packages/web/leavitt/file-explorer/file-explorer.ts
+++ b/packages/web/leavitt/file-explorer/file-explorer.ts
@@ -1,4 +1,4 @@
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { css, html, LitElement, nothing, PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import ApiService from '../api-service/api-service';
@@ -11,9 +11,8 @@ import {
   FileExplorerPathDto,
 } from '@leavittsoftware/lg-core-typescript';
 import { PendingStateEvent } from '../../titanium/types/pending-state-event';
-import { ConfirmDialogOpenEvent } from '../../titanium/confirm-dialog/confirm-dialog-open-event';
 
-import '../../titanium/confirm-dialog/confirm-dialog';
+import '../../titanium/confirmation-dialog/confirmation-dialog';
 import fileExplorerEvents from './events/file-explorer-events';
 
 import '@material/web/icon/icon';
@@ -37,7 +36,7 @@ import { a, ellipsis, h1, h2 } from '../../titanium/styles/styles';
 
 import { formatBytes } from './helpers/format-bytes';
 import { CloseMenuEvent, MdMenu, MenuItem } from '@material/web/menu/menu';
-import TitaniumConfirmDialog from '../../titanium/confirm-dialog/confirm-dialog';
+import TitaniumConfirmationDialog from '../../titanium/confirmation-dialog/confirmation-dialog';
 import { FileModal } from './file-modal';
 import { AddFolderModal } from './add-folder-modal';
 import { FolderModal } from './folder-modal';
@@ -56,7 +55,12 @@ import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
  * @fires file-deleted - Fired when a file is deleted.
  */
 @customElement('leavitt-file-explorer')
-export class LeavittFileExplorer extends LoadWhile(LitElement) {
+export class LeavittFileExplorer extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   /**
    *  This is required.
    */
@@ -108,7 +112,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
   @query('leavitt-file-modal') private accessor fileDialog: FileModal;
   @query('input[files]') private accessor fileInput: HTMLInputElement;
   @query('input[folders]') private accessor folderInput: HTMLInputElement;
-  @query('titanium-confirm-dialog') private accessor confirmDialog: TitaniumConfirmDialog;
+  @query('titanium-confirmation-dialog') private accessor confirmationDialog: TitaniumConfirmationDialog;
 
   #originalFolderId = 0;
 
@@ -116,14 +120,9 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
     //force attribute to reflect
     this.display = structuredClone(this.display);
 
-    this.addEventListener(ConfirmDialogOpenEvent.eventType, async (e: ConfirmDialogOpenEvent) => {
-      e.stopPropagation();
-      this.confirmDialog.handleEvent(e);
-    });
-
     this.addEventListener(PendingStateEvent.eventType, async (e: PendingStateEvent) => {
       e.stopPropagation();
-      this.loadWhile(e.detail.promise);
+      this.trackLoadingPromise(e.detail.promise);
     });
 
     fileExplorerEvents.subscribe<FileExplorerAttachment>('FileExplorerFileDto', 'Update', (o) => {
@@ -169,7 +168,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
     try {
       const get = this.apiService?.getAsync<FileExplorerDto>(`FileExplorers(${fileExplorerId})/FileExplorerView(folderId=${folderId})`);
       if (get) {
-        this.loadWhile(get);
+        this.trackLoadingPromise(get);
       }
       const result = await get;
 
@@ -224,12 +223,11 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
    *  @internal
    */
   async #deleteSelectedClick() {
-    const confirmationDialogEvent = new ConfirmDialogOpenEvent(
+    const result = await this.confirmationDialog.open(
       'Please confirm delete',
       `Deleting folders will delete all of their contents. Are you sure you would like to delete the selected item${this.selected.length === 1 ? '' : 's'}?`
     );
-    this.dispatchEvent(confirmationDialogEvent);
-    if (await confirmationDialogEvent.dialogResult) {
+    if (result === 'confirmed') {
       const items = [...this.selected];
       const errorMessageToCount: Map<string, number> = new Map();
       let totalErrorCount = 0;
@@ -269,7 +267,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
           }
         })
       );
-      this.loadWhile(requests);
+      this.trackLoadingPromise(requests);
       await requests;
       this.selected = [];
       this.state = this.folders.length > 0 || this.files.length > 0 ? 'files' : 'no-files';
@@ -365,7 +363,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
     });
 
     const uploadAll = Throttle.all(requests, { maxInProgress: 4 });
-    this.loadWhile(uploadAll);
+    this.trackLoadingPromise(uploadAll);
     await uploadAll;
 
     if (failedFiles.length > 0) {
@@ -408,7 +406,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
     });
 
     const uploadAll = Throttle.all(requests, { maxInProgress: 4 });
-    this.loadWhile(uploadAll);
+    this.trackLoadingPromise(uploadAll);
     await uploadAll;
 
     if (failedFiles.length > 0) {
@@ -864,7 +862,7 @@ export class LeavittFileExplorer extends LoadWhile(LitElement) {
       ></leavitt-add-folder-modal>
       <leavitt-folder-modal .apiService=${this.apiService} .enableEditing=${this.isAdmin}></leavitt-folder-modal>
       <leavitt-file-modal .apiService=${this.apiService} .enableEditing=${this.isAdmin}></leavitt-file-modal>
-      <titanium-confirm-dialog></titanium-confirm-dialog>
+      <titanium-confirmation-dialog></titanium-confirmation-dialog>
     `;
   }
 }
diff --git a/packages/web/leavitt/file-explorer/file-modal.ts b/packages/web/leavitt/file-explorer/file-modal.ts
index 958ecafb9..1f42e9368 100644
--- a/packages/web/leavitt/file-explorer/file-modal.ts
+++ b/packages/web/leavitt/file-explorer/file-modal.ts
@@ -20,11 +20,16 @@ import { MdDialog } from '@material/web/dialog/dialog';
 import { DOMEvent } from '../../titanium/types/dom-event';
 import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
 import ApiService from '../api-service/api-service';
-import { LoadWhile } from '../../titanium/helpers/helpers';
+import { promiseTracking } from '../../titanium/helpers/helpers';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 
 @customElement('leavitt-file-modal')
-export class FileModal extends LoadWhile(LitElement) {
+export class FileModal extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ attribute: false }) accessor apiService: ApiService | null;
   @property({ type: Boolean }) accessor enableEditing: boolean = false;
 
@@ -58,7 +63,7 @@ export class FileModal extends LoadWhile(LitElement) {
 
     try {
       const patch = this.apiService.patchAsync(`FileExplorerAttachments(${this.file?.Id})`, dto);
-      this.loadWhile(patch);
+      this.trackLoadingPromise(patch);
       await patch;
       fileExplorerEvents.dispatch('FileExplorerFileDto', 'Update', { ...this.file, Name: this.fileName });
       this.state = 'view';
diff --git a/packages/web/leavitt/file-explorer/folder-modal.ts b/packages/web/leavitt/file-explorer/folder-modal.ts
index 544a14a08..e905e9cb2 100644
--- a/packages/web/leavitt/file-explorer/folder-modal.ts
+++ b/packages/web/leavitt/file-explorer/folder-modal.ts
@@ -16,11 +16,16 @@ import { MdDialog } from '@material/web/dialog/dialog';
 import { DOMEvent } from '../../titanium/types/dom-event';
 import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
 import ApiService from '../api-service/api-service';
-import { LoadWhile } from '../../titanium/helpers/helpers';
+import { promiseTracking } from '../../titanium/helpers/helpers';
 import { ShowSnackbarEvent } from '../..//titanium/snackbar/show-snackbar-event';
 
 @customElement('leavitt-folder-modal')
-export class FolderModal extends LoadWhile(LitElement) {
+export class FolderModal extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ attribute: false }) accessor apiService: ApiService | null;
   @property({ type: Boolean }) accessor enableEditing: boolean = false;
 
@@ -49,7 +54,7 @@ export class FolderModal extends LoadWhile(LitElement) {
 
     try {
       const patch = this.apiService.patchAsync(`FileExplorerFolders(${this.folder?.Id})`, dto);
-      this.loadWhile(patch);
+      this.trackLoadingPromise(patch);
       await patch;
       fileExplorerEvents.dispatch('FileExplorerFolder', 'Update', { ...this.folder, Name: this.folderName });
       this.state = 'view';
diff --git a/packages/web/leavitt/person-company-select/person-company-select.ts b/packages/web/leavitt/person-company-select/person-company-select.ts
index 18f8277f1..0ecf27f7d 100644
--- a/packages/web/leavitt/person-company-select/person-company-select.ts
+++ b/packages/web/leavitt/person-company-select/person-company-select.ts
@@ -68,7 +68,7 @@ export class LeavittPersonCompanySelect extends TitaniumSingleSelectBase<Partial
     this.#abortController = new AbortController();
 
     const all = Promise.all([this.#doPersonSearch(searchTerm), this.#doCompanySearch(searchTerm)]);
-    this.loadWhile(all);
+    this.trackLoadingPromise(all);
     const results = await all;
     const entities = [...(results[0]?.entities ?? []), ...(results[1]?.entities ?? [])];
     const odataCount = (results[0]?.odataCount ?? 0) + (results[1]?.odataCount ?? 0);
diff --git a/packages/web/leavitt/person-group-select/person-group-select.ts b/packages/web/leavitt/person-group-select/person-group-select.ts
index dd2779862..5e77d135b 100644
--- a/packages/web/leavitt/person-group-select/person-group-select.ts
+++ b/packages/web/leavitt/person-group-select/person-group-select.ts
@@ -68,7 +68,7 @@ export class LeavittPersonGroupSelect extends TitaniumSingleSelectBase<Partial<P
     this.#abortController = new AbortController();
 
     const all = Promise.all([this.#doPersonSearch(searchTerm), this.#doGroupSearch(searchTerm)]);
-    this.loadWhile(all);
+    this.trackLoadingPromise(all);
     const results = await all;
     const entities = [...(results[0]?.entities ?? []), ...(results[1]?.entities ?? [])];
     const odataCount = (results[0]?.odataCount ?? 0) + (results[1]?.odataCount ?? 0);
diff --git a/packages/web/leavitt/person-select/person-select.ts b/packages/web/leavitt/person-select/person-select.ts
index a95192113..bd63bca71 100644
--- a/packages/web/leavitt/person-select/person-select.ts
+++ b/packages/web/leavitt/person-select/person-select.ts
@@ -141,7 +141,7 @@ export class LeavittPersonSelect extends TitaniumSingleSelectBase<Partial<Person
         }
 
         const get = this.apiService.getAsync<Person>(`${this.apiControllerName}?${oDataParts.join('&')}`, { abortController: this.#abortController });
-        this.loadWhile(get);
+        this.trackLoadingPromise(get);
 
         const result = await get;
         this.showSuggestions(result?.entities ?? [], result?.odataCount ?? 0);
diff --git a/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts b/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
index c54c748b6..17d39a39f 100644
--- a/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
+++ b/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
@@ -5,8 +5,8 @@ import '@material/web/button/text-button';
 import '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
 
 import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { LoadWhile, isDevelopment } from '../../titanium/helpers/helpers';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { promiseTracking, isDevelopment } from '../../titanium/helpers/helpers';
 import { PendingStateEvent } from '../../titanium/types/pending-state-event';
 import { h1, p } from '../../titanium/styles/styles';
 import { IssueDto } from '@leavittsoftware/lg-core-typescript';
@@ -21,7 +21,12 @@ import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../../titan
 import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
 
 @customElement('provide-feedback-dialog')
-export class ProvideFeedbackDialog extends LoadWhile(LitElement) {
+export class ProvideFeedbackDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Object }) accessor userManager: AuthZeroLgUserManager;
   @query('md-dialog') private accessor dialog!: MdDialog;
   @query('titanium-snackbar-stack') private accessor snackbar: SnackbarStack;
@@ -57,7 +62,7 @@ export class ProvideFeedbackDialog extends LoadWhile(LitElement) {
         apiService.addHeader('X-LGAppName', 'IssueTracking');
         const post = apiService.postAsync<IssueDto>('Issues/ReportIssue', dto, { sendAsFormData: true });
         this.dispatchEvent(new PendingStateEvent(post));
-        this.loadWhile(post);
+        this.trackLoadingPromise(post);
         const entity = (await post).entity;
 
         if (!entity) {
diff --git a/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts b/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
index 4c6d552e6..ad3c9341e 100644
--- a/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
+++ b/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
@@ -6,8 +6,8 @@ import '../../titanium/snackbar/snackbar-stack';
 import '../../titanium/smart-attachment-input/smart-attachment-input';
 
 import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { LoadWhile, isDevelopment } from '../../titanium/helpers/helpers';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { promiseTracking, isDevelopment } from '../../titanium/helpers/helpers';
 import { PendingStateEvent } from '../../titanium/types/pending-state-event';
 import { h1, p } from '../../titanium/styles/styles';
 import { IssueDto } from '@leavittsoftware/lg-core-typescript';
@@ -23,7 +23,12 @@ import { TitaniumSmartAttachmentInput } from '../../titanium/smart-attachment-in
 import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
 
 @customElement('report-a-problem-dialog')
-export class ReportAProblemDialog extends LoadWhile(LitElement) {
+export class ReportAProblemDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Object }) accessor userManager: AuthZeroLgUserManager;
   @query('md-dialog') private accessor dialog!: MdDialog;
   @query('titanium-snackbar-stack') private accessor snackbar: SnackbarStack;
@@ -61,7 +66,7 @@ export class ReportAProblemDialog extends LoadWhile(LitElement) {
       apiService.addHeader('X-LGAppName', 'IssueTracking');
       const post = apiService.postAsync<IssueDto>('Issues/ReportIssue', dto, { sendAsFormData: true });
       this.dispatchEvent(new PendingStateEvent(post));
-      this.loadWhile(post);
+      this.trackLoadingPromise(post);
       const entity = (await post).entity;
 
       if (!entity) {
diff --git a/packages/web/leavitt/user-feedback/user-feedback.ts b/packages/web/leavitt/user-feedback/user-feedback.ts
deleted file mode 100644
index 744c32347..000000000
--- a/packages/web/leavitt/user-feedback/user-feedback.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import '../../titanium/header/header';
-import '../../titanium/card/card';
-import '../../titanium/smart-attachment-input/smart-attachment-input';
-
-import '@material/web/button/filled-tonal-button';
-import '@material/web/textfield/outlined-text-field';
-import '@material/web/tabs/primary-tab';
-import '@material/web/tabs/tabs';
-
-import { LitElement, PropertyValues, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { LoadWhile, isDevelopment } from '../../titanium/helpers/helpers';
-import { PendingStateEvent } from '../../titanium/types/pending-state-event';
-import { h1, p } from '../../titanium/styles/styles';
-import { IssueDto } from '@leavittsoftware/lg-core-typescript';
-import { TitaniumSmartAttachmentInput } from '../../titanium/smart-attachment-input/smart-attachment-input';
-import ApiService from '../api-service//api-service';
-import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
-import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
-import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
-
-@customElement('leavitt-user-feedback')
-export class LeavittUserFeedback extends LoadWhile(LitElement) {
-  @property({ type: Object }) accessor userManager: AuthZeroLgUserManager;
-  @property({ type: Boolean }) accessor isActive: boolean = false;
-
-  @state() private accessor activeIndex: number = 0;
-
-  @query('md-outlined-text-field') private accessor textArea: MdOutlinedTextField;
-  @query('titanium-smart-attachment-input') private accessor imageInput: TitaniumSmartAttachmentInput | null;
-
-  async updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('isActive') && this.isActive) {
-      this.reset();
-    }
-  }
-
-  reset() {
-    this.imageInput?.reset();
-    this.textArea?.reset();
-  }
-
-  async #submitProblem() {
-    if (!this.textArea.reportValidity() || this.isLoading) {
-      return;
-    }
-
-    const dto: IssueDto = {
-      SiteName: location.hostname,
-      PathName: window.location.pathname + window.location.search,
-      IssueType: 'Bug',
-      Description: this.textArea.value,
-      Attachments: (this.imageInput?.getFiles() ?? []).map((o) => o.file),
-    };
-
-    try {
-      const apiService = new ApiService(this.userManager);
-      apiService.baseUrl = isDevelopment ? 'https://devapi3.leavitt.com/' : 'https://api3.leavitt.com/';
-      apiService.addHeader('X-LGAppName', 'IssueTracking');
-      const post = apiService.postAsync<IssueDto>('Issues/ReportIssue', dto, { sendAsFormData: true });
-      this.dispatchEvent(new PendingStateEvent(post));
-      this.loadWhile(post);
-      const entity = (await post).entity;
-
-      if (!entity) {
-        throw new Error('Error submitting problem. Please try again.');
-      } else {
-        this.dispatchEvent(
-          new ShowSnackbarEvent('', {
-            overrideTemplate: html`Thank you for bringing this issue to our attention!<br />
-              <br />
-              Our engineering teams will promptly investigate and address it.`,
-          })
-        );
-        this.reset();
-      }
-    } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
-    }
-  }
-
-  async #submitFeedback() {
-    if (!this.textArea.reportValidity() || this.isLoading) {
-      return;
-    }
-
-    const dto: IssueDto = {
-      SiteName: location.hostname,
-      PathName: window.location.pathname + window.location.search,
-      IssueType: 'Feedback',
-      Description: this.textArea.value,
-      Attachments: [],
-    };
-
-    try {
-      const apiService = new ApiService(this.userManager);
-      apiService.baseUrl = isDevelopment ? 'https://devapi3.leavitt.com/' : 'https://api3.leavitt.com/';
-      apiService.addHeader('X-LGAppName', 'IssueTracking');
-      const post = apiService.postAsync<IssueDto>('Issues/ReportIssue', dto, { sendAsFormData: true });
-      this.dispatchEvent(new PendingStateEvent(post));
-      this.loadWhile(post);
-      const entity = (await post).entity;
-
-      if (!entity) {
-        throw new Error('Error submitting feedback. Please try again.');
-      } else {
-        this.dispatchEvent(new ShowSnackbarEvent('We appreciate your input, and we will promptly conduct a review!'));
-        this.reset();
-      }
-    } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
-    }
-  }
-
-  static styles = [
-    h1,
-    p,
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 24px;
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        margin: 24px 0;
-      }
-
-      titanium-card {
-        padding-top: 0;
-      }
-
-      md-tabs {
-        margin-bottom: 16px;
-        --md-primary-tab-container-shape: 12px;
-      }
-
-      md-outlined-text-field {
-        resize: none;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <titanium-header header="Report a problem" subHeader="Report bugs and provide feedback for this site" no-nav></titanium-header>
-
-      <titanium-card>
-        <md-tabs
-          full-width
-          @change=${(event) => {
-            this.reset();
-            this.activeIndex = event.target.activeTabIndex;
-          }}
-        >
-          <md-primary-tab
-            >Report a problem
-            <md-icon slot="icon">person_alert</md-icon>
-          </md-primary-tab>
-          <md-primary-tab
-            >Provide feedback
-            <md-icon slot="icon">rate_review</md-icon>
-          </md-primary-tab>
-        </md-tabs>
-
-        <main>
-          ${this.activeIndex === 0
-            ? html` <form>
-                <p full-width>
-                  Please be specific and provide screenshots of the issue if possible in your report. Your report goes directly to our engineering teams so it
-                  can be addressed as soon as possible.
-                </p>
-                <md-outlined-text-field type="textarea" problem label="Describe the issue" rows="5" required outlined></md-outlined-text-field>
-                <titanium-smart-attachment-input
-                  multiple
-                  full-width
-                  label="Supporting files"
-                  noItemsText="No files"
-                  addButtonLabel="Add file"
-                ></titanium-smart-attachment-input>
-              </form>`
-            : html` <form>
-                <p full-width>
-                  User feedback is a valuable tool that empowers our users to share their thoughts, suggestions, and concerns, helping us improve the overall
-                  user experience of our websites and tools. We welcome and appreciate user feedback as it enables us to make informed decisions and enhance our
-                  website based on the needs and expectations of our users.
-                </p>
-                <p full-width>
-                  Please be specific and provide as much detail as possible in your feedback. Your feedback goes directly to our development teams so it can be
-                  carefully reviewed and planned into the next development cycle.
-                </p>
-                <md-outlined-text-field type="textarea" feedback label="Feedback" rows="5" required outlined></md-outlined-text-field>
-              </form>`}
-        </main>
-        <span nav card-footer>
-          <md-filled-tonal-button @click=${() => (this.activeIndex === 0 ? this.#submitProblem() : this.#submitFeedback())} ?disabled=${this.isLoading}
-            >Submit</md-filled-tonal-button
-          >
-        </span>
-      </titanium-card>
-    `;
-  }
-}
diff --git a/packages/web/titanium/access-denied-page/access-denied-page.ts b/packages/web/titanium/access-denied-page/access-denied-page.ts
deleted file mode 100644
index 45f39be5b..000000000
--- a/packages/web/titanium/access-denied-page/access-denied-page.ts
+++ /dev/null
@@ -1,352 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-/**
- * A pre-styled access denied page
- *
- * @element titanium-access-denied-page
- *
- */
-@customElement('titanium-access-denied-page')
-export class TitaniumAccessDeniedPage extends LitElement {
-  /**
-   * Reason text for the denial of access
-   */
-  @property({ type: String }) accessor message: string = 'You do not have permission to access this application.';
-
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-
-      font-family: Roboto, sans-serif;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-
-      max-width: 1300px;
-    }
-
-    header {
-      flex: 1 1 auto;
-      margin-right: 24px;
-    }
-
-    h1 {
-      font-family: Metropolis, 'Roboto', 'Noto', sans-serif;
-      font-weight: 600;
-      font-size: 68px;
-      line-height: 75px;
-      margin: 0;
-    }
-
-    h2 {
-      font-weight: 400;
-      margin: 8px 0 0 4px;
-      max-width: 75%;
-    }
-
-    p {
-      font-size: 16px;
-      margin-top: 8px;
-    }
-
-    svg {
-      flex-shrink: 0;
-      height: 280px;
-      width: 280px;
-    }
-
-    @media (max-width: 768px) {
-      :host {
-        margin-top: 24px;
-      }
-
-      h2 {
-        max-width: inherit;
-        font-size: 21px;
-      }
-
-      svg {
-        height: 120px;
-        width: 120px;
-        align-self: flex-start;
-      }
-
-      h1 {
-        font-size: 55px;
-        line-height: 65px;
-      }
-    }
-  `;
-
-  render() {
-    return html`
-      <header>
-        <h1>Access denied!</h1>
-        <h2>${this.message}</h2>
-      </header>
-      <svg
-        id="f9eb83fe-2109-496c-8de2-d29751931755"
-        data-name="Layer 1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        width="1166.17"
-        height="805.09"
-        viewBox="0 0 1166.17 805.09"
-      >
-        <defs>
-          <linearGradient id="b7f84a8b-804f-4004-8d61-2f9b427d4893" x1="785.51" y1="659.88" x2="938.51" y2="659.88" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
-            <stop offset="0.54" stop-color="gray" stop-opacity="0.12" />
-            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
-          </linearGradient>
-        </defs>
-        <title>authentication</title>
-        <path
-          d="M676.53,157.07c-74.75.1-146.7-21.09-215.52-44.63S323.9,62.54,250.54,51.37c-47.18-7.18-100.83-6.52-137.71,19.55C77.33,96,67.05,137.51,62.09,175.86c-3.73,28.85-5.45,59.13,8.52,85.52,9.7,18.32,26.3,33.42,38,50.88C149.45,373,124.89,450.59,85.2,512.74c-18.61,29.16-40.41,57.11-54.48,87.94s-19.84,65.79-5.49,96.22c14.22,30.16,46.34,52.05,80.81,67,70,30.42,151.5,36.94,230.81,39.45,175.56,5.57,351.46-5.79,526.89-17.15,64.92-4.2,130.13-8.43,193.71-20.6,35.3-6.75,71.65-16.77,96.68-38.73,31.77-27.88,38.27-73.4,15.15-106.12-38.77-54.88-141-65.23-168.8-124.61-15.33-32.69-2.11-70.18,17.36-101.69,41.76-67.61,113.64-128.17,114.85-203.79.83-51.93-36.55-102.59-92.38-125.16C981.79,41.86,902,47.94,861,92,818.84,137.39,742.53,157,676.53,157.07Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-          opacity="0.1"
-        />
-        <path d="M1009.44,692.82s-12.29-8.11-24.47-2.34c0,0,3.75,7.22,19.17,6.54Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1011,693.25s3.74,14.24-5.64,23.93c0,0-5.64-5.87,0-20.25Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path
-          d="M1026.28,679.58s-.91-12.11-28.26-8.09c0,0-.13,7.81,9.47,11.51S1021.49,683.58,1026.28,679.58Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path d="M1028,679.5s11.56,3.71,1.25,29.36c0,0-7.63-1.7-9-11.91S1022.94,683.22,1028,679.5Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1043.44,662.32s1.57-19.93-26.38-17.89c0,0-2,18,21.45,22.68Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1061.91,639.82s-3.83-22.59-31.77-15.86c0,0-.1,19.53,27.21,21.24Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1075.41,616.56s-6.42-22-34.1-15.42c0,0,6.59,19.79,32.26,19.48Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1088.23,593.84s-6.27-22.83-33-16c0,0,8.92,21.69,31.23,19.86Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1096.49,572.26s-4.82-27.92-29.74-21.74c0,0,7.24,25.4,27.91,25.81Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1104.24,546.19s-5.79-28.14-31-20c0,0,9.88,26.6,29.21,23.85Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1109,521.93s-9.19-28.15-28.68-27.39c0,0,9.39,29.73,27.05,33Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1112.08,498.25s-10-33.88-25.86-31.27c0,0,6.92,25.9,25.3,36.55Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1113.82,470s-9.38-28.23-25-29.36c0,0,6.38,27.78,24.69,36.7Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1115.71,443.64s-11.69-28.26-22-28.9c0,0,5.08,27.83,21,33.54Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1117,419.12s-7.19-30.69-17.52-33.24c0,0,1.41,25.11,16.48,35.54Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1120.9,387s-7.56-24.47-15.93-28.2c0,0,1.65,28.85,14,34.18Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1124.13,366l1.52-43.14S1110,355.38,1123,373.57Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1136.21,323.09s11.27-31.5,14-33.26c0,0-22.1,20.44-19.94,46.73Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1044.2,662.17s19.82-2.59,19.23,25.42c0,0-17.91,2.92-23.76-20.25Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1062.85,639.06s22.9-.07,21,28.6c0,0-19.23,3.44-25.57-23.18Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1075.63,618.41s20.79-9.75,34.09,15.42c0,0-19.2,8.12-35.93-11.35Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1088.69,594.05s21.29-10.37,33.79,14.21c0,0-22.18,7.64-35.55-10.32Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1096.22,572.87s20.49-19.57,36.84.22c0,0-20.93,16.11-37.78,4.14Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1103.08,545.52s20.61-20,36.83.92c0,0-23.13,16.43-37.57,3.28Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1106.93,521.13s15.88-25,34.58-19.42c0,0-16.48,26.47-34.4,25.29Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1111.61,498.09s16-31.48,31.14-26c0,0-11.54,24.2-31.55,31.31Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1112.72,468.36s16.45-24.78,31.86-21.75c0,0-13.45,25.13-33.46,28.92Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1114,443.09s12.75-27.81,23.11-28c0,0-6.12,27.61-22.25,32.72Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1116.5,418.52s14.17-28.16,24.82-28.22c0,0-7.25,24.08-24.35,30.69Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1118.63,388.76s10.6-23.3,19.38-25.94c0,0-5.3,28.4-18.21,32.12Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1125.39,365.15l23.69-36.09s-6.07,35.6-27.15,43Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1141.65,326s27.53-19,28.53-22.07c0,0-14,26.61-40,31.31Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path d="M1143.3,317.45s31.61-30.39,39.68-30.36c0,0-26.07,1.19-40.44,28.74Z" transform="translate(-16.91 -47.46)" fill="#f8ad03" />
-        <path
-          d="M1118.94,393.27l1.15.15c5.94-46.49,14.6-74,24.38-77.37l-.38-1.1C1133.72,318.55,1125,345.64,1118.94,393.27Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#444053"
-        />
-        <path
-          d="M1110.2,504.45l1.74.14c.37-4.34.65-8.78.84-13.21,1.66-38.48,4.23-73.82,7.61-100.31l-1-1.25c-3.39,26.55-6.69,62.95-8.35,101.49C1110.85,495.71,1110.57,500.13,1110.2,504.45Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#444053"
-        />
-        <path
-          d="M977,715c.3-.13,30.93-13.81,62.72-46.43a252.22,252.22,0,0,0,45.85-65c14.7-29.93,23.66-66.71,26.66-102.44l-1.81.85c-6.75,80.2-43.26,135-72.29,164.85-31.48,32.33-61.77,45.87-62.07,46Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#444053"
-        />
-        <path
-          d="M1056.31,132.69H95.43a8.56,8.56,0,0,0-8.56,8.56v24.94h978V141.25A8.56,8.56,0,0,0,1056.31,132.69Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <path
-          d="M86.87,166.19V727.43a17.26,17.26,0,0,0,17.26,17.26h943.48a17.26,17.26,0,0,0,17.26-17.26V166.19Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#fff"
-        />
-        <circle cx="85.45" cy="101.73" r="4" fill="#fa5959" opacity="0.8" />
-        <circle cx="96.45" cy="101.73" r="4" fill="#fed253" opacity="0.8" />
-        <circle cx="107.45" cy="101.73" r="4" fill="#8ccf4d" opacity="0.8" />
-        <rect x="160.87" y="212.31" width="786" height="345.62" opacity="0.05" />
-        <rect x="166.87" y="214.93" width="774" height="338" fill="#3f3d56" />
-        <path
-          d="M394.78,349.38a77,77,0,1,0,77,77A77,77,0,0,0,394.78,349.38Zm13.81,78.85v36.46H381.37V428.23a22.55,22.55,0,1,1,27.22,0Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M394.78,349.38a77,77,0,1,0,77,77A77,77,0,0,0,394.78,349.38Zm13.81,78.85v36.46H381.37V428.23a22.55,22.55,0,1,1,27.22,0Z"
-          transform="translate(-16.91 -47.46)"
-          opacity="0.05"
-        />
-        <path
-          d="M394.78,327.38a99,99,0,1,0,99,99A99,99,0,0,0,394.78,327.38Zm17.75,101.38v46.87h-35V428.76a29,29,0,1,1,35,0Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <rect x="517.87" y="365.93" width="320" height="34" fill="#fff" />
-        <rect x="768.87" y="427.93" width="69" height="34" fill="#f8ad03" />
-        <path
-          d="M566.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L553.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L552.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,566.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M587.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L574.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L573.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,587.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M608.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L595.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L594.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,608.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M629.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L616.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L615.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,629.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M650.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L637.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L636.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,650.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M671.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L658.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L657.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,671.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M692.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L679.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L678.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,692.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M713.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L700.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L699.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,713.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M734.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L721.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L720.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,734.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M755.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L742.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L741.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,755.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M776.28,429.88h-5.79l5.15-5.14a.51.51,0,0,0,0-.71.5.5,0,0,0-.71,0l-5.15,5.15v-5.8a.5.5,0,0,0-.5-.5.51.51,0,0,0-.5.5v5.8L763.64,424a.5.5,0,0,0-.71,0,.51.51,0,0,0,0,.71l5.15,5.14h-5.8a.51.51,0,0,0-.5.5.5.5,0,0,0,.5.5h5.8L762.93,436a.51.51,0,0,0,0,.71.52.52,0,0,0,.71,0l5.14-5.15v5.79a.5.5,0,0,0,.5.5.5.5,0,0,0,.5-.5v-5.79l5.15,5.15a.52.52,0,0,0,.71,0,.51.51,0,0,0,0-.71l-5.15-5.15h5.79a.5.5,0,0,0,.5-.5A.5.5,0,0,0,776.28,429.88Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M937.27,551.53a17.9,17.9,0,0,0-.45-3.59c-.9-3.38-2.93-7.47-6.27-8.49a52.64,52.64,0,0,1-9.94-4.2c-.6-10.72,1.86-21.69-.82-32.08-1-3.8-2.65-7.44-3.09-11.33-.55-4.84.77-10-1.16-14.46-1.52-3.52-4.86-6-8.45-7.3s-7.46-1.65-11.27-2c-4.8-.39-20.34-2.23-25.76,2.06h0a5.66,5.66,0,0,0-1,1l0,0a4,4,0,0,0-.32.52l-.05.08a4.06,4.06,0,0,0-.27.65h0a5.06,5.06,0,0,0-.17.75c0,.08,0,.16,0,.24s0,.35,0,.53v.27c0,.18,0,.36,0,.55s0,.14,0,.21c.07.9.2,1.8.2,2.69a5.79,5.79,0,0,1-.12,1.32,9.24,9.24,0,0,1-1.66,3.24h0l-.18.26c-.11.16-.22.31-.32.47s-.18.28-.26.42-.16.23-.23.36a4.89,4.89,0,0,0-.26.51c0,.1-.11.19-.15.29a4.94,4.94,0,0,0-.3.84,5.58,5.58,0,0,0-.06,2.66,9.9,9.9,0,0,0,1.37,3.15c.25.41.52.81.8,1.21l.7.95a21.58,21.58,0,0,0-.21,2.8,20.69,20.69,0,0,0,7.9,16.26,61.25,61.25,0,0,1-.13,12.69c-.09.88-.2,1.77-.32,2.65s-.21,1.46-.33,2.19a10.15,10.15,0,0,1-4.37-.33,20.59,20.59,0,0,0-2-.77c-2.91-.73-5.88,2.17-8.76,1.29,0,.14-.08.27-.13.4a3.92,3.92,0,0,0-2-.59c-1.71-.08-3.1-1.32-4.34-2.49l-3.81-3.59a4.21,4.21,0,0,1-.66-.74,5.19,5.19,0,0,1-.46-1.23c-.64-2.07-2.19-3.72-3.69-5.29a2.5,2.5,0,0,0-1.09-.79,1.68,1.68,0,0,0-.5,0,4.39,4.39,0,0,0-.33-.4,9.41,9.41,0,0,0-.83-.84c-1.82-1.68-2-3.12-3.58-5a48.05,48.05,0,0,1-3.74-5.65c-.13-1.05-.31-2.13-.53-3.22a41.43,41.43,0,0,0-2.19-7.3l-2-4.43-.23.23c-1.45-2.16-3-3.34-4.39-3.06-2.33.48-3.48,5-3.11,10.91l.8,6c0,.15.07.3.11.45a11.07,11.07,0,0,0-.22,2.16c0,.84.78,1.46,1.19,2.21a6.25,6.25,0,0,1,1,3.41c-.05.43-.18.84-.2,1.26a4.85,4.85,0,0,0,.94,2.6l5,8.4,1,1.76.06.08a4.27,4.27,0,0,0,1.34,1.54,18.32,18.32,0,0,0,1.65,6.07c.17.38.36.74.56,1.1a35.37,35.37,0,0,0,4.72,6.13l2.38,2.67c2.35,2.62,4.7,5.25,7.25,7.67a9.71,9.71,0,0,0,3.24,2.27,3.67,3.67,0,0,0,3.64-.53c0,1.24,0,2.48,0,3.72a2.09,2.09,0,0,1,1.58,3.29c-2.1,5.39-4.22,10.83-7.4,15.66a33.33,33.33,0,0,1,6.2,4.73,27.88,27.88,0,0,1,3.23,4.37c.09.74.16,1.47.2,2.2.74,11.92-3.87,23.75-8,35.11-1.19,3.22-2.49,6.59-2.39,9.94a19.51,19.51,0,0,0-2.24,1.61c.82,2.14.5,4.05.41,6.34a11.23,11.23,0,0,1-.83,4,28.12,28.12,0,0,1-1.44,2.57c-2.59,4.57-3.16,10-3.68,15.22-.31,3.15.91,7-.52,9.82-2.47,4.84-4.66,10-5,15.38a15.42,15.42,0,0,1-.46,3.59c-.31,1-.86,1.85-1.14,2.83a12.11,12.11,0,0,0-.2,4,38.28,38.28,0,0,1-2.1,14.11c-1.25,3.57-2.63,7.39-1.65,11.06a15.59,15.59,0,0,0-4.23,9.29,14.65,14.65,0,0,1-.32,2.65,12.89,12.89,0,0,1-1.2,2.55,22.32,22.32,0,0,0-2.72,12c-3,4.07-4.5,9.09-5.39,14.08s-1.28,10.07-2.42,15c-1.52,6.52-4.27,13.11-4.81,19.79-3.24,2.07-4.64,6.08-5.26,9.87s-.72,7.77-2.31,11.27c-.82,1.82-2,3.45-2.78,5.31a24.38,24.38,0,0,0-1.2,4.57c-.48,2.44-.9,5.16-.31,7.5a11.31,11.31,0,0,1-2.93,2.23c.16-.62.29-1.24.4-1.87-2.58,2.34-7.26,1.52-9.32,4.33a4.22,4.22,0,0,0,1,5.79,8,8,0,0,0,2.07.89c5,1.6,10.14,3.21,15.28,2.36a4.56,4.56,0,0,0,1.73-.55,5.57,5.57,0,0,0,1.61-1.86c.77-1.22,1.54-2.44,2.3-3.66a47.51,47.51,0,0,0,5.61,1.31c.19,1.6.33,3.2.4,4.8,1,.2,2.34.26,2.81-.67a2.43,2.43,0,0,0,.17-1.11c0-.71.1-1.65.16-2.61h.2a19,19,0,0,0,8.85-1.79c-1.07-8.86,2.46-17.52,5.52-25.9,3.23-8.82,6-17.8,8.79-26.78,2-6.32,4.21-12.44,6.17-18.77q3.7-12,7.43-24c1.08-3.52,2.17-7,3.41-10.5a163.57,163.57,0,0,1,9.27-20.63c1-1.89,2-3.76,2.82-5.72,1-2.39,1.71-4.89,2.51-7.36a114,114,0,0,1,6.28-14.78c.07-.13.12-.25.19-.37.81,3.31,1.62,6.67,2.16,10a38,38,0,0,1,.17,12.36c-.48,2.79-1.39,5.55-1.28,8.38.15,3.91,2.24,7.46,3.27,11.23a42.74,42.74,0,0,1,1.12,8.6c.28,4.5,2.72,9.55,1,13.72-5.35,13.21-2.76,28.13-5.81,42-1.57,7.12-6.38,13.81-6,21.09q.4,7.75,1.36,15.46A14.71,14.71,0,0,0,878,836a17.22,17.22,0,0,0,1.37,2.24c-.44.17-.81.62-1.13,1.57-.82,2.5,0,5.6,2.22,7a9.72,9.72,0,0,0,2.89,1,15.22,15.22,0,0,0,4.18.58,9.76,9.76,0,0,0,1.31-.16,47.64,47.64,0,0,0,4.73,1.7c0,.41.08.82.13,1.23a1.53,1.53,0,0,0,.52,1.13,1.56,1.56,0,0,0,.8.14l5.43,0c0-.45,0-.91,0-1.36a4.47,4.47,0,0,0,3.45-1.12,5.34,5.34,0,0,0,1-2.08q2.22-7.53,4.41-15.07a48.18,48.18,0,0,0,2.15-17.2c-1.93-18.43,2.31-36.92.93-55.4a132.71,132.71,0,0,1,1.7-33.24c.45-2.48,1-5,1.2-7.47.44-4.66-.1-9.37.23-14,.11-1.62.33-3.23.53-4.84a232.43,232.43,0,0,0,2.15-30.15,95,95,0,0,0-.62-10,5.71,5.71,0,0,0,2.73-1.6c.89-1.16.66-2.79.65-4.27,0-3.54,1.49-6.88,2.69-10.22a121.44,121.44,0,0,0,3.78-14.06,49.09,49.09,0,0,0,1.68-11.75q0-.6-.06-1.2a3.1,3.1,0,0,0,.92-1,5.81,5.81,0,0,0,.48-1.85c.36-2.55.73-5.11,1.09-7.67q.4-2.75.79-5.49l3.18-22.19c.27-1.93.55-3.85.82-5.77l.83-5.74c.09-.68.19-1.36.26-2C939.86,561.61,937.53,556.17,937.27,551.53Zm-26.53,83.08c-1.18-2.8-2.28-5.67-2-8.69l-.11,0a4.46,4.46,0,0,0-.13-2.82c-.31-.73-.85-1.35-1.18-2.08a7.62,7.62,0,0,1-.54-2.8,76.33,76.33,0,0,1,1.43-18.14c.13-.7.27-1.41.4-2.11a5.22,5.22,0,0,0,1.14-.89,8.11,8.11,0,0,0,1.29-2c1.13-2.27,2.16-4.58,3.11-6.93.31-.76.76-1.64,1.53-1.83-.16,5.85.44,11.82-1.94,17.1a10.82,10.82,0,0,0-1,2.7c-.22,1.49.4,3,.18,4.48-.11.77-.44,1.48-.57,2.24a2.19,2.19,0,0,0,.58,2.12,1.75,1.75,0,0,0,.43.22c-.06.4-.11.81-.15,1.2-.08.82-.12,1.59-.17,2.07a64.5,64.5,0,0,0-.27,7.36c0,2.65.1,5.3.06,8a5.43,5.43,0,0,1-.38,2.27,3.94,3.94,0,0,1-.76,1C911.4,636.18,911.08,635.39,910.74,634.61Z"
-          transform="translate(-16.91 -47.46)"
-          fill="url(#b7f84a8b-804f-4004-8d61-2f9b427d4893)"
-        />
-        <ellipse cx="828.59" cy="502.96" rx="5.64" ry="15.97" transform="translate(-101 129.08) rotate(-11.58)" fill="#fbbebe" />
-        <path
-          d="M878.4,840c-.82,2.48,0,5.58,2.22,6.93a9.88,9.88,0,0,0,2.87,1,15.14,15.14,0,0,0,4.17.57c1.73-.08,3.39-.76,5.12-1a.8.8,0,0,1,.59.08.85.85,0,0,1,.22.7,26.43,26.43,0,0,0,.22,2.94,1.51,1.51,0,0,0,.52,1.13,1.56,1.56,0,0,0,.8.14l5.42,0A52.86,52.86,0,0,0,899,838.35a3.16,3.16,0,0,0-.4-1,3.31,3.31,0,0,0-1.73-1,9.67,9.67,0,0,0-4.19-.73c-1.75.23-3.21,1.36-4.7,2.3s-3.52,1.77-5.33,1.29S879.33,837.22,878.4,840Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <path
-          d="M798.82,835.61a15,15,0,0,1-5.47,3.72l-.92.44a.64.64,0,0,0-.31.25.54.54,0,0,0,.1.45,6.47,6.47,0,0,0,7.34,2.67,3.89,3.89,0,0,0,1.61-.84,5.28,5.28,0,0,0,1.24-3.22,6.59,6.59,0,0,0-.15-3.69C800.87,832.26,800.36,833.68,798.82,835.61Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#fbbebe"
-        />
-        <path
-          d="M819.6,847.93a2.43,2.43,0,0,1-.17,1.11c-.47.92-1.78.87-2.8.67a67.3,67.3,0,0,0-1.23-10.1c-1.94-.09-3.34,1.75-4.38,3.4l-2.68,4.25a5.54,5.54,0,0,1-1.6,1.86,4.74,4.74,0,0,1-1.73.55c-5.12.85-10.29-.76-15.23-2.36a8.07,8.07,0,0,1-2.07-.88,4.23,4.23,0,0,1-1-5.78c2.07-2.8,6.72-2,9.3-4.32a23.28,23.28,0,0,1-1.32,4.77c3.45-.52,5.77-3.68,8.55-5.79a5.26,5.26,0,0,1,2.44-1.16,5.37,5.37,0,0,1,2,.21,23.46,23.46,0,0,1,8.8,4.33c1.05.83,2.69,2,3.15,3.28C820.12,843.5,819.6,846.3,819.6,847.93Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <circle cx="871.48" cy="449.87" r="20.66" fill="#fbbebe" />
-        <path
-          d="M929.09,619.31A49,49,0,0,1,927.42,631a120.64,120.64,0,0,1-3.78,14c-1.19,3.33-2.68,6.67-2.67,10.2,0,1.47.24,3.1-.66,4.26a6.22,6.22,0,0,1-2.92,1.67,3.65,3.65,0,0,0-2.46,2.19,15.45,15.45,0,0,1-2.08-4.58q-2.69-8.24-5-16.57a2.15,2.15,0,0,1,.14-2,2.48,2.48,0,0,1,.87-.49,9,9,0,0,0,2.77-1.78,4.05,4.05,0,0,0,.92-1.19,5.39,5.39,0,0,0,.39-2.26c0-2.65,0-5.29-.07-7.94a66.34,66.34,0,0,1,.28-7.33c0-.48.09-1.25.17-2.07.15-1.57.45-3.39,1.3-4,1.27-.85,5.07.29,6.51.49,2.48.34,5,.74,7.42,1.21A19.81,19.81,0,0,1,929.09,619.31Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <path
-          d="M845.67,520.46c-.8,1.6-2.72,2.37-4.2,3.38l-5.07,3.48a3.38,3.38,0,0,1-2.51.86,3.3,3.3,0,0,1-1.87-1.75.35.35,0,0,0,0-.08l-1.05-1.76-5-8.38a4.77,4.77,0,0,1-.93-2.58c0-.43.15-.83.19-1.26a6.05,6.05,0,0,0-1-3.4c-.4-.75-1.2-1.37-1.18-2.21a8,8,0,0,1,.56-3.23,6.54,6.54,0,0,1,2.19-2.34c.47-.34.95-.66,1.45-1a2.86,2.86,0,0,1,.87-.4c.83-.17,1.65.52,2.49.55,3.61,2.42,5,7,7.84,10.3,1.6,1.88,1.76,3.32,3.57,5,.29.26.57.54.84.83a5.81,5.81,0,0,1,.9,1.3C844.09,518.63,846.08,519.64,845.67,520.46Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <path
-          d="M881.13,518c1.49,3.15,2.65,6.61,2.22,10.07a6.29,6.29,0,0,1-.87,2.65c-1.44,2.21-4.46,2.61-7.09,2.74a4.18,4.18,0,0,0-3.08,1,2.8,2.8,0,0,0,.19,3.42,7.72,7.72,0,0,0,3.06,2c4.16,1.83,8.65,3.34,13.17,2.92,2.1-.2,4.14-.81,6.23-1.12a65.41,65.41,0,0,1,6.86-.38c2.72-.1,5.43-.37,8.14-.64l7.18-.71a1.6,1.6,0,0,0,1.07-.39c.53-.62-.15-1.53-.81-2-3.81-2.82-8.66-4.76-10.83-9-1-2-1.31-4.38-2.05-6.54s-1.92-4.11-2.38-6.31a41.81,41.81,0,0,1-.33-5.82,7.81,7.81,0,0,0-2-5.32c-1.43-1.33-3.5-1.67-5.44-1.75-4.78-.21-9.87.93-13.26,4.3-.91.91-1.69,2-2.63,2.82s-2.22,1.06-1.6,2.14,1.84,1.75,2.5,2.7A23,23,0,0,1,881.13,518Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#fbbebe"
-        />
-        <path
-          d="M921.86,547.09a113.62,113.62,0,0,1-6.12,22.53,84.86,84.86,0,0,0-3.6,10.1c-.77,3.1-.62,6.42-1.33,9.53-.88,3.87-1.76,7.75-2.47,11.65A76.39,76.39,0,0,0,906.92,619a7.57,7.57,0,0,0,.54,2.79c.33.72.86,1.34,1.17,2.08a5,5,0,0,1-.28,4,11.58,11.58,0,0,1-2.06,3.12c-9.32,2.78-19.29,1.87-29,2.46-8.95.54-18,2.38-26.82.85-1-4,.67-8.19,2.1-12.09,4.15-11.33,8.74-23.13,8-35a36.26,36.26,0,0,0-.47-4.13c-1.45-8.41.13-17.12,2.66-25.27,1.57-5.08,1.5-10.49,1.14-15.78a28.82,28.82,0,0,1-.07-5.17,9.09,9.09,0,0,1,1.88-4.83c0-.07.09-.14.14-.21s.44-.06.75,0h0a.64.64,0,0,0,.5,0l.11-.07a.25.25,0,0,1,.29,0c.23.14.36.62.86.71a19.92,19.92,0,0,0,2.23.21,12,12,0,0,1,2.66.38l.12,0a7.81,7.81,0,0,0,3.88-.33,10.31,10.31,0,0,0,2.38-.92c.22-.24,1.6-.46,1.88-.63.91-.55.71-3.13.9-4.19a11.52,11.52,0,0,1,.75-3.1,5.28,5.28,0,0,1,4.28-2.49,22.79,22.79,0,0,1,5.13.46c3.73.53,7.55.44,11.21,1.3,1.84.43,3.85,1.08,5.54.24.46.11.53.51.53,1a6.41,6.41,0,0,1-.28,1.37c-.64,2.76,1.53,5.3,3.53,7.3a11.32,11.32,0,0,0,2.95,2.35c1,.46,2,.65,3,1.15a5.46,5.46,0,0,1,2,1.83,7.64,7.64,0,0,1,1.14,2.91A17.4,17.4,0,0,1,921.86,547.09Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#3f3d56"
-        />
-        <path
-          d="M921.86,547.09a113.62,113.62,0,0,1-6.12,22.53,84.86,84.86,0,0,0-3.6,10.1c-.77,3.1-.62,6.42-1.33,9.53-.88,3.87-1.76,7.75-2.47,11.65-.21.12-.43.23-.65.33a15.35,15.35,0,0,1-3.92,1.26,24,24,0,0,1-7.32-.24l-14.27-1.91c-5.7-.77-11.77-1.7-16-5.56-2.35-2.12-3.89-4.92-5.58-7.62a36.26,36.26,0,0,0-.47-4.13c-1.45-8.41.13-17.12,2.66-25.27,1.57-5.08,1.5-10.49,1.14-15.78a28.82,28.82,0,0,1-.07-5.17,9.09,9.09,0,0,1,1.88-4.83,7.11,7.11,0,0,1,.89-.2h0a4.44,4.44,0,0,1,.61-.08h.29a4.36,4.36,0,0,1,1,.12,18.09,18.09,0,0,1,2,.77l.12,0a7.66,7.66,0,0,0,2.66.38c1.32,0,2.68-.21,4-.3a7.38,7.38,0,0,1,4.74.85,28.43,28.43,0,0,1,2.64,2.41,11.34,11.34,0,0,0,3.33,1.81,35.39,35.39,0,0,0,26.62-.56,5.21,5.21,0,0,1,2.67-.68,5,5,0,0,1,1.92.82c.6.35,1.19.69,1.8,1a7.64,7.64,0,0,1,1.14,2.91A17.4,17.4,0,0,1,921.86,547.09Z"
-          transform="translate(-16.91 -47.46)"
-          opacity="0.1"
-        />
-        <path
-          d="M930.57,540.47a53.37,53.37,0,0,1-11.4-5,5.11,5.11,0,0,0-1.92-.82,5.37,5.37,0,0,0-2.68.68,35.37,35.37,0,0,1-26.61.56,11.57,11.57,0,0,1-3.33-1.81,29.9,29.9,0,0,0-2.64-2.41c-3.29-2.13-7.84.37-11.52-1a20.41,20.41,0,0,0-2-.77c-2.91-.73-5.87,2.17-8.73,1.29a48.65,48.65,0,0,0-2.35,8.92,97.23,97.23,0,0,0-.65,10.52c0,2.11-.1,4.22,0,6.33a2.58,2.58,0,0,1,1.74,1.13,2.56,2.56,0,0,1-.16,2.15c-2.09,5.37-4.21,10.8-7.38,15.61a33.92,33.92,0,0,1,6.18,4.72c3.5,3.7,5.22,8.89,9,12.31,4.26,3.85,10.33,4.79,16,5.55l14.27,1.91a24.39,24.39,0,0,0,7.33.25,15.43,15.43,0,0,0,3.91-1.27,7,7,0,0,0,2.18-1.44,8,8,0,0,0,1.29-2c1.13-2.26,2.16-4.57,3.11-6.91.33-.83.83-1.8,1.73-1.87,5.3-4.78,10.3-9.68,15.6-14.46a34.57,34.57,0,0,0,5.69-6c2.63-3.89.24-9.4,0-14.1a17.8,17.8,0,0,0-.45-3.57C935.92,545.56,933.9,541.48,930.57,540.47Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M845.67,520.46c-.8,1.6-2.72,2.37-4.2,3.38l-5.07,3.48a3.38,3.38,0,0,1-2.51.86,3.3,3.3,0,0,1-1.87-1.75c0-.23,0-.48,0-.72a6.71,6.71,0,0,1,.32-2.39,7.45,7.45,0,0,1,2.24-2.88,18.34,18.34,0,0,1,6.57-4,2.25,2.25,0,0,1,1.2-.12,1.58,1.58,0,0,1,.44.19,5.81,5.81,0,0,1,.9,1.3C844.09,518.63,846.08,519.64,845.67,520.46Z"
-          transform="translate(-16.91 -47.46)"
-          opacity="0.1"
-        />
-        <path
-          d="M857.61,531c-1.7-.08-3.09-1.31-4.33-2.48L849.49,525a3.54,3.54,0,0,1-.66-.74,5.19,5.19,0,0,1-.46-1.23,14.11,14.11,0,0,0-3.68-5.28,2.4,2.4,0,0,0-1.09-.78,2.19,2.19,0,0,0-1.21.12,18.29,18.29,0,0,0-6.57,4,7.47,7.47,0,0,0-2.24,2.88,6.65,6.65,0,0,0-.32,2.39A18.36,18.36,0,0,0,835,534c.17.37.36.74.56,1.1a34.63,34.63,0,0,0,4.7,6.11l2.38,2.66c2.34,2.62,4.68,5.24,7.22,7.65a9.54,9.54,0,0,0,3.24,2.26,3.62,3.62,0,0,0,3.72-.6,5.38,5.38,0,0,0,1.06-1.9c1.54-4,3-8.16,3.09-12.47a47.06,47.06,0,0,0-.22-5.17C860.6,531.82,859.31,531.11,857.61,531Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M918.21,671a231.07,231.07,0,0,1-2.14,30.07c-.2,1.61-.42,3.22-.53,4.83-.33,4.67.21,9.36-.23,14-.23,2.51-.75,5-1.19,7.45a132.47,132.47,0,0,0-1.7,33.15c1.38,18.43-2.85,36.87-.93,55.25a44.66,44.66,0,0,1-.59,10.69,45.3,45.3,0,0,1-1.55,6.46q-2.19,7.51-4.4,15a5.2,5.2,0,0,1-1,2.08,4.74,4.74,0,0,1-3.75,1.11c-5.77-.18-11.2-2.67-16.44-5.1a5.73,5.73,0,0,1-1.65-1c-1.09-1.13-1-2.91-1.48-4.4s-1.78-2.89-2.52-4.42a14.43,14.43,0,0,1-1.09-4.55q-1-7.68-1.36-15.42c-.38-7.26,4.42-13.94,6-21,3-13.88.46-28.76,5.79-41.93,1.68-4.16-.76-9.2-1-13.68a43.37,43.37,0,0,0-1.12-8.58c-1-3.76-3.11-7.3-3.26-11.2-.11-2.82.8-5.57,1.27-8.35a37.53,37.53,0,0,0-.17-12.33c-.53-3.36-1.34-6.72-2.15-10l-.18.37a113,113,0,0,0-6.27,14.75c-.8,2.45-1.5,4.95-2.5,7.33-.82,2-1.83,3.83-2.82,5.71A164,164,0,0,0,860,737.84c-1.24,3.46-2.33,7-3.41,10.47l-7.41,24c-2,6.31-4.19,12.41-6.15,18.71-2.77,9-5.54,17.92-8.76,26.72-3,8.35-6.57,17-5.5,25.82a19,19,0,0,1-8.83,1.79,51.7,51.7,0,0,1-15-3.64c-1.91-.71-3.89-1.51-5.18-3.08-2.22-2.71-1.67-6.68-1-10.13a24.49,24.49,0,0,1,1.2-4.56c.76-1.84,2-3.47,2.78-5.29,1.57-3.49,1.67-7.44,2.29-11.23s2-7.79,5.24-9.85c.55-6.66,3.29-13.23,4.8-19.74,1.14-4.93,1.52-10,2.42-15s2.35-10,5.37-14.05a22.27,22.27,0,0,1,2.72-12,13.12,13.12,0,0,0,1.19-2.55,14.65,14.65,0,0,0,.32-2.64,15.61,15.61,0,0,1,4.22-9.27c-1-3.65.39-7.46,1.64-11a38.22,38.22,0,0,0,2.1-14.07,12.33,12.33,0,0,1,.19-4c.28-1,.83-1.85,1.15-2.81a16,16,0,0,0,.45-3.59c.39-5.41,2.58-10.51,5-15.34,1.44-2.82.22-6.65.52-9.79.52-5.22,1.09-10.62,3.68-15.17.48-.86,1-1.68,1.43-2.57a11.13,11.13,0,0,0,.83-4c.09-2.29.41-4.19-.41-6.32,5.35-4.45,12.65-5.7,19.61-6s14,.33,20.81-1.15c2-.45,4-1.07,6.11-1.37,4.79-.7,9.65.39,14.38,1.47-.33,3,.77,5.88,2,8.67A93.07,93.07,0,0,1,918.21,671Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#33313f"
-        />
-        <path d="M894.66,673.29l-11.49,25.84c-.53-3.36-1.34-6.72-2.15-10l-.18.37,0-.54,6.26-13.77Z" transform="translate(-16.91 -47.46)" opacity="0.1" />
-        <path
-          d="M929.09,619.31a4.32,4.32,0,0,1-2.28.85,11.09,11.09,0,0,1-3.74-.51l-9-2.25a4.42,4.42,0,0,1-.82-.29c.15-1.57.45-3.39,1.3-4,1.27-.85,5.07.29,6.51.49,2.48.34,5,.74,7.42,1.21A19.81,19.81,0,0,1,929.09,619.31Z"
-          transform="translate(-16.91 -47.46)"
-          opacity="0.1"
-        />
-        <path
-          d="M936.7,559.81c.19.83.46,1.65.62,2.49a19,19,0,0,1-.21,6.19l-.82,5.72-.82,5.75-3.17,22.13-.78,5.48-1.1,7.65a5.5,5.5,0,0,1-.48,1.84,3.83,3.83,0,0,1-3.13,1.85,11.34,11.34,0,0,1-3.74-.51l-9-2.26a2.82,2.82,0,0,1-1.1-.45,2.17,2.17,0,0,1-.58-2.11c.13-.76.46-1.47.57-2.23.22-1.48-.4-3-.18-4.47a11.12,11.12,0,0,1,1-2.69c3-6.63,1.26-14.37,2.28-21.57A32.7,32.7,0,0,1,923,567.18a44.32,44.32,0,0,1,7.66-7.52c1.12-.87,2.9-2.66,4.31-3C936.78,556.28,936.4,558.55,936.7,559.81Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#f8ad03"
-        />
-        <path
-          d="M868.59,473.67c-.66,2.1.37,4.41-.1,6.55-.51,2.36-2.73,4-3.36,6.37-1,3.61,2.06,6.9,4.3,9.9,8.3,11.14,7.21,26.56,4.37,40.15a207.31,207.31,0,0,1-9.45,32c-1.25,3.23-2.63,6.51-5.09,8.93,4.6-1.32,9.49-2.65,14.1-1.37,5.84,1.62,10.88,7.29,16.8,6,3.56-.79,6.06-3.95,9.26-5.7,6-3.23,13.23-1.2,19.92-.16a7.82,7.82,0,0,0,4.35-.22,7.23,7.23,0,0,0,2.64-2.43,24.66,24.66,0,0,0,5.14-13.3,17.06,17.06,0,0,0-4.91-13.13c-1.42-1.34-3.12-2.42-4.21-4a12.42,12.42,0,0,1-1.65-6.06c-.79-11,1.89-22.23-.87-32.87-1-3.79-2.63-7.42-3.07-11.3-.55-4.83.76-10-1.16-14.42-1.51-3.51-4.84-6-8.43-7.28s-7.43-1.64-11.24-2C890.45,468.87,870.88,466.52,868.59,473.67Z"
-          transform="translate(-16.91 -47.46)"
-          fill="#33313f"
-        />
-        <g opacity="0.1">
-          <path
-            d="M873.8,536.64a206.9,206.9,0,0,1-9.4,31.87c.69-1.37,1.27-2.81,1.82-4.24a206.21,206.21,0,0,0,9.45-32c2.85-13.6,3.94-29-4.36-40.15-2-2.66-4.57-5.54-4.48-8.66a10.66,10.66,0,0,0-1.7,3.14c-1,3.61,2.06,6.9,4.3,9.9C877.73,507.63,876.64,523.05,873.8,536.64Z"
-            transform="translate(-16.91 -47.46)"
-          />
-          <path
-            d="M868.61,479.21a9.73,9.73,0,0,0,1.76-3.37,17.13,17.13,0,0,0-.12-4.46,4.81,4.81,0,0,0-1.66,2.29C868,475.44,868.68,477.36,868.61,479.21Z"
-            transform="translate(-16.91 -47.46)"
-          />
-          <path
-            d="M928.21,569.29a7.2,7.2,0,0,1-2.64,2.42,7.64,7.64,0,0,1-4.35.22c-6.69-1-14-3.06-19.92.17-3.21,1.74-5.7,4.9-9.27,5.7-5.91,1.32-10.95-4.35-16.79-6-4.14-1.15-8.5-.2-12.67,1a17.47,17.47,0,0,1-3.31,4.78c4.6-1.32,9.49-2.65,14.1-1.37,5.84,1.62,10.88,7.29,16.8,6,3.56-.79,6.06-3.95,9.26-5.7,6-3.23,13.23-1.2,19.92-.16a7.82,7.82,0,0,0,4.35-.22,7.23,7.23,0,0,0,2.64-2.43,26.88,26.88,0,0,0,4.14-7.92A29.08,29.08,0,0,1,928.21,569.29Z"
-            transform="translate(-16.91 -47.46)"
-          />
-        </g>
-      </svg>
-    `;
-  }
-}
diff --git a/packages/web/titanium/address-input/google-address-input.ts b/packages/web/titanium/address-input/google-address-input.ts
index ca13327e0..b586a3701 100644
--- a/packages/web/titanium/address-input/google-address-input.ts
+++ b/packages/web/titanium/address-input/google-address-input.ts
@@ -126,7 +126,7 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
     this.#abortController = new AbortController();
     try {
       const get = this.#getSuggestions(searchTerm);
-      this.loadWhile(get);
+      this.trackLoadingPromise(get);
       const results = (await get) ?? [];
       this.showSuggestions(results, results.length);
       return;
diff --git a/packages/web/titanium/card/card.ts b/packages/web/titanium/card/card.ts
deleted file mode 100644
index 7d6ecc6eb..000000000
--- a/packages/web/titanium/card/card.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import '@material/web/elevation/elevation';
-
-import { css, html, LitElement } from 'lit';
-import { property, customElement, queryAssignedElements } from 'lit/decorators.js';
-
-/**
- * A material card filled or outlined
- *
- * @element titanium-card
- *
- * @cssprop {Number} [--md-elevation-level: 0] - Use md elevation to set elevation levels
- * @cssprop {Color} [--md-elevation-shadow-color: --md-sys-color-shadow] - Use md elevation to set elevation levels
- * @cssprop {Color} [--md-sys-color-outline-variant] - Card border color
- *
- * @slot Default - Card content
- */
-@customElement('titanium-card')
-export class TitaniumCard extends LitElement {
-  @property({ type: Boolean, reflect: true, attribute: 'has-menu' }) accessor hasMenu: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'has-image' }) accessor hasImage: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'has-footer' }) accessor hasFooter: boolean;
-
-  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'elevated' }) accessor elevated: boolean;
-
-  @queryAssignedElements({ flatten: true })
-  private readonly assignedElements!: HTMLElement[];
-
-  static styles = [
-    css`
-      :host {
-        display: grid;
-        padding: 24px;
-        gap: 8px 12px;
-        grid:
-          'title' auto
-          'body' 1fr;
-        border-radius: 12px;
-        position: relative;
-
-        border: 1px solid var(--md-sys-color-outline-variant);
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-      }
-
-      :host([filled]) {
-        border: none;
-        background-color: var(--md-sys-color-surface-container);
-      }
-
-      :host([elevated]) {
-        border: none;
-        background-color: var(--md-sys-color-surface-container-low);
-        --md-elevation-level: 1;
-      }
-
-      :host([has-menu]) {
-        grid:
-          'title menu' auto
-          'body body' 1fr / 1fr auto;
-      }
-
-      :host([has-footer]) {
-        grid:
-          'title' auto
-          'body' 1fr
-          'footer' auto;
-      }
-
-      :host([has-footer][has-menu]) {
-        grid:
-          'title menu' min-content
-          'body body' 1fr
-          'footer footer' auto / 1fr auto;
-      }
-
-      :host([has-image]) {
-        grid:
-          'title image' min-content
-          'body body' 1fr / 1fr auto;
-      }
-
-      :host([has-image][has-footer]) {
-        grid:
-          'title image' min-content
-          'body body' 1fr
-          'footer footer' auto / 1fr auto;
-      }
-
-      :host([has-image][has-footer][has-menu]) {
-        grid:
-          'title menu' min-content
-          'body image' 1fr
-          'footer footer' auto / 1fr auto;
-      }
-
-      ::slotted([card-menu]) {
-        grid-area: menu;
-        justify-self: right;
-        margin: -12px -12px -12px 0;
-      }
-
-      ::slotted([card-title]) {
-        grid-area: title;
-      }
-
-      ::slotted([card-body]) {
-        grid-area: body;
-      }
-
-      ::slotted([card-image]) {
-        grid-area: image;
-      }
-
-      ::slotted([full-width]) {
-        margin: 0 -24px;
-      }
-
-      ::slotted([card-footer]) {
-        grid-area: footer;
-      }
-
-      ::slotted([nav]) {
-        margin: 16px -12px -12px 0;
-        justify-self: right;
-        display: flex;
-        gap: 12px;
-        align-items: center;
-      }
-
-      @media (max-width: 400px) {
-        ::slotted([card-image]) {
-          display: none;
-        }
-
-        :host([has-image][has-footer]) {
-          grid:
-            'title' min-content
-            'body' auto
-            'footer' 1fr / auto;
-        }
-
-        :host([has-image]) {
-          grid:
-            'title' min-content
-            'body' auto / auto;
-        }
-      }
-    `,
-  ];
-
-  render() {
-    return html`<md-elevation></md-elevation>
-      <slot
-        @slotchange=${() => {
-          this.hasFooter = this.assignedElements.some((el) => el.hasAttribute('card-footer'));
-          this.hasImage = this.assignedElements.some((el) => el.hasAttribute('card-image'));
-          this.hasMenu = this.assignedElements.some((el) => el.hasAttribute('card-menu'));
-        }}
-      >
-      </slot> `;
-  }
-}
diff --git a/packages/web/titanium/chip-multi-select/chip-multi-select.ts b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
index a9580d0e4..0dc55d7f1 100644
--- a/packages/web/titanium/chip-multi-select/chip-multi-select.ts
+++ b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
@@ -1,8 +1,7 @@
 import { css, LitElement, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { literal, html } from 'lit/static-html.js';
+import { html } from 'lit';
 
-import '../../titanium/input-validator/outlined-input-validator';
 import '../../titanium/input-validator/filled-input-validator';
 
 /**
@@ -66,7 +65,7 @@ export class TitaniumChipMultiSelect extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) accessor disabled: boolean;
 
-  @query('titanium-outlined-input-validator, titanium-filled-input-validator') private accessor validator:
+  @query('titanium-filled-input-validator') private accessor validator:
     | { checkValidity: () => boolean; reportValidity: () => boolean; reset: () => void }
     | undefined;
 
@@ -104,7 +103,6 @@ export class TitaniumChipMultiSelect extends LitElement {
         width: 100%;
       }
 
-      titanium-outlined-input-validator,
       titanium-filled-input-validator {
         display: block;
         width: 100%;
@@ -165,9 +163,8 @@ export class TitaniumChipMultiSelect extends LitElement {
   ];
 
   protected render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
-      <${this.filled ? literal`titanium-filled-input-validator` : literal`titanium-outlined-input-validator`}
+      <titanium-filled-input-validator
         ?disabled=${this.disabled}
         .evaluator=${() => !this.required || !!this.hasItems}
         ?required=${this.required}
@@ -181,8 +178,7 @@ export class TitaniumChipMultiSelect extends LitElement {
           <slot></slot>
           ${!this.hasItems ? html` <span>${this.noItemsText}</span>` : ''}
         </slot-container>
-      </${this.filled ? literal`titanium-filled-input-validator` : literal`titanium-outlined-input-validator`}>
+      </titanium-filled-input-validator>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/confirm-dialog/confirm-dialog-open-event.ts b/packages/web/titanium/confirm-dialog/confirm-dialog-open-event.ts
deleted file mode 100644
index e4c385dc4..000000000
--- a/packages/web/titanium/confirm-dialog/confirm-dialog-open-event.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TemplateResult } from 'lit';
-
-export class ConfirmDialogOpenEvent extends Event {
-  static eventType = 'confirm-dialog-open';
-  header: string;
-  text: string | TemplateResult;
-  dialogResult: Promise<boolean>;
-  resolver: (confirmed: boolean) => void;
-
-  constructor(header: string, text: string | TemplateResult) {
-    super(ConfirmDialogOpenEvent.eventType, { bubbles: true, composed: true });
-    this.header = header;
-    this.text = text;
-    this.dialogResult = new Promise((res) => {
-      this.resolver = res;
-    });
-  }
-}
diff --git a/packages/web/titanium/confirm-dialog/confirm-dialog.ts b/packages/web/titanium/confirm-dialog/confirm-dialog.ts
deleted file mode 100644
index e8cac1bbb..000000000
--- a/packages/web/titanium/confirm-dialog/confirm-dialog.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import '@material/web/dialog/dialog';
-import '@material/web/button/text-button';
-
-import { css, html, LitElement, TemplateResult } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
-import { ConfirmDialogOpenEvent } from './confirm-dialog-open-event';
-import { MdDialog } from '@material/web/dialog/dialog';
-import { DOMEvent } from '../types/dom-event';
-import { p } from '../styles/p';
-import { dialogZIndexHack } from '../hacks/dialog-zindex-hack';
-import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../hacks/dialog-navigation-hack';
-
-@customElement('titanium-confirm-dialog')
-export default class TitaniumConfirmDialog extends LitElement {
-  @state() protected accessor text: string | TemplateResult;
-  @state() protected accessor headline: string;
-  @query('md-dialog') protected accessor dialog!: MdDialog;
-  #resolve: (value: 'confirmed' | 'cancel') => void;
-
-  /**
-   * This method is used to set up the event listener to capture the confirm dialog open event
-   * You can skip using this method and set up the event listener yourself (recommended)
-   */
-  listenOn(el: HTMLElement) {
-    el.addEventListener(ConfirmDialogOpenEvent.eventType, async (event: ConfirmDialogOpenEvent) => {
-      this.#openDialogWithEvent(event);
-    });
-  }
-
-  /**
-   * This method is used after capturing the confirm dialog open event
-   * usually in the same class where the confirm-dialog element is used.
-   * After capturing the event pass it directly into this method `this.dialog.handleEvent(e);`
-   */
-  async handleEvent(event: ConfirmDialogOpenEvent) {
-    this.#openDialogWithEvent(event);
-  }
-
-  #openDialogWithEvent = async (event: ConfirmDialogOpenEvent) => {
-    this.headline = event.header;
-    this.text = event.text;
-    this.dialog.returnValue = '';
-    this.dialog.show();
-
-    const result = await new Promise<'confirmed' | 'cancel'>((resolve) => {
-      this.#resolve = resolve;
-    });
-
-    event.resolver(result === 'confirmed');
-  };
-
-  static styles = [
-    p,
-    css`
-      p {
-        margin: 6px 24px 0 24px;
-      }
-
-      md-dialog {
-        max-width: 550px;
-        max-height: calc(100vh - 24px);
-      }
-
-      b,
-      strong {
-        font-weight: 500;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <md-dialog
-        @open=${(e: DOMEvent<MdDialog>) => {
-          dialogZIndexHack(e.target);
-          dialogOpenNavigationHack(e.target);
-        }}
-        @close=${(e: DOMEvent<MdDialog>) => {
-          dialogCloseNavigationHack(e.target);
-          if (e.target.returnValue === 'confirmed') {
-            return this.#resolve('confirmed');
-          }
-          return this.#resolve('cancel');
-        }}
-      >
-        <div slot="headline">${this.headline}</div>
-        <p slot="content">${this.text}</p>
-        <div slot="actions">
-          <md-text-button @click=${() => this.dialog.close('cancel')}>Cancel</md-text-button>
-          <md-text-button @click=${() => this.dialog.close('confirmed')}>Confirm</md-text-button>
-        </div>
-      </md-dialog>
-    `;
-  }
-}
diff --git a/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts b/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
index 7aa40f278..99f8a1b88 100644
--- a/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
+++ b/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
@@ -17,14 +17,19 @@ import { DOMEvent } from '../types/dom-event';
 import { MdDialog } from '@material/web/dialog/dialog';
 import { ItemDropEvent } from './draggable-item-base';
 import { repeat } from 'lit/directives/repeat.js';
-import { LoadWhile } from '../helpers/load-while';
+import { promiseTracking } from '../helpers/promise-tracking';
 import { ShowSnackbarEvent } from '../snackbar/show-snackbar-event';
 import { SnackbarStack } from '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
 
 export type CloseReason = 'apply' | 'cancel';
 
 @customElement('titanium-data-table-core-reorder-dialog')
-export class TitaniumDataTableCoreReorderDialog<T extends object> extends LoadWhile(LitElement) {
+export class TitaniumDataTableCoreReorderDialog<T extends object> extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @property({ type: Object }) accessor tableMetaData: TitaniumDataTableCoreMetaData<T> | null = null;
   @property({ type: Object }) accessor supplementalItemStyles: CSSResult | CSSResultGroup | null = null;
 
@@ -148,7 +153,7 @@ export class TitaniumDataTableCoreReorderDialog<T extends object> extends LoadWh
               _resolve = resolve;
               _reject = reject;
             });
-            this.loadWhile(saving);
+            this.trackLoadingPromise(saving);
             this.dispatchEvent(
               new CustomEvent<{ resolve: () => void; reject: (reason: any) => void; items: Array<T> }>('reorder-save-request', {
                 detail: { resolve: _resolve, reject: _reject, items: this.items },
diff --git a/packages/web/titanium/data-table/data-table-core.ts b/packages/web/titanium/data-table/data-table-core.ts
index 3701bf003..233d82aa1 100644
--- a/packages/web/titanium/data-table/data-table-core.ts
+++ b/packages/web/titanium/data-table/data-table-core.ts
@@ -21,7 +21,7 @@ import { MdCheckbox } from '@material/web/checkbox/checkbox';
 import { repeat } from 'lit/directives/repeat.js';
 import { a } from '@leavittsoftware/web/titanium/styles/a';
 import { styleMap } from 'lit/directives/style-map.js';
-import { LoadWhile } from '@leavittsoftware/web/titanium/helpers/load-while';
+import { promiseTracking } from '@leavittsoftware/web/titanium/helpers/promise-tracking';
 import { niceBadgeStyles } from '../styles/nice-badge';
 import { MdIconButton } from '@material/web/iconbutton/icon-button';
 import { CloseMenuEvent, MdMenu, MenuItem } from '@material/web/menu/menu';
@@ -78,7 +78,12 @@ export function generateDefaultSortFromMetaData<T extends object>(tableMetaData:
 }
 
 @customElement('titanium-data-table-core')
-export class TitaniumDataTableCore<T extends object> extends LoadWhile(LitElement) {
+export class TitaniumDataTableCore<T extends object> extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   /**
    * Current items displayed on the table.
    */
diff --git a/packages/web/titanium/data-table/data-table-header.ts b/packages/web/titanium/data-table/data-table-header.ts
deleted file mode 100644
index 3604039ee..000000000
--- a/packages/web/titanium/data-table/data-table-header.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-import '@material/web/icon/icon';
-import '@material/web/ripple/ripple';
-import '@material/web/focus/md-focus-ring';
-
-/**
- * Material design data table header with styling and sorting capabilities
- *
- * @element titanium-data-table-header
- *
- * @fires sort-direction-changed - Fired if sort direction is changed (detail: 'desc' | 'asc')
- * @fires sort-by-changed - Fired when the close button is clicked (detail: {string} column name of currently sorted header )
- *
- * @cssprop {font} [--titanium-data-table-font-family=Roboto, Noto, sans-serif] - Font family
- */
-@customElement('titanium-data-table-header')
-export class TitaniumDataTableHeader extends LitElement {
-  /**
-   * This displayed header name
-   */
-  @property({ type: String }) accessor title: string;
-
-  /**
-   * The column name of the currently applied sort
-   */
-  @property({ type: String }) accessor sortBy: string;
-
-  /**
-   * Optional fixed width of header in px  ex. "140px"
-   */
-  @property({ reflect: true, type: String }) accessor width: string;
-
-  /**
-   * True if header is currently the sorted column. Read-only, do not set.
-   */
-  @property({ type: Boolean, reflect: true }) accessor active: boolean = false;
-
-  /**
-   * Current sort direction on header.
-   */
-  @property({ type: String, reflect: true, attribute: 'sort-direction' }) accessor sortDirection: 'asc' | 'desc' | '';
-
-  /**
-   * Name of header column passed along in sort-by-changed event.  Typically the name of the col in the backing DB. ex. first_name
-   */
-  @property({ type: String, attribute: 'column-name' }) accessor columnName: string;
-
-  /**
-   * Justify header text center
-   */
-  @property({ type: Boolean, reflect: true }) accessor center: boolean = false;
-
-  /**
-   * Justify header text right; moves sort icon to left.
-   */
-  @property({ type: Boolean, reflect: true }) accessor right: boolean = false;
-
-  /**
-   * Removes the sort icon
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'no-sort' }) accessor noSort: boolean = false;
-
-  /**
-   * Set flex 5 on header, default is 3.
-   */
-  @property({ type: Boolean, reflect: true }) accessor large: boolean = false;
-
-  /**
-   * Only show this header when width is larger
-   */
-  @property({ type: Boolean, reflect: true }) accessor desktop: boolean = false;
-
-  /**
-   *  Sets if view port is small
-   */
-  @property({ type: Boolean, reflect: true }) accessor narrow: boolean = false;
-
-  updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('sortBy') && changedProps.get('sortBy') !== this.sortBy) {
-      this.active = this.sortBy === this.columnName;
-    }
-
-    if (changedProps.has('width') && changedProps.get('width') !== this.width && this.width) {
-      this.style.width = this.width;
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-
-      box-sizing: border-box;
-      -webkit-font-smoothing: antialiased;
-
-      text-align: left;
-    }
-
-    button {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      position: relative;
-      --md-focus-ring-shape: 0;
-
-      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-      font-size: 14px;
-      padding: 8px;
-
-      /* cancel padding so text aligns  */
-      margin: 0 -8px;
-
-      line-height: 28px;
-      font-weight: 500;
-      height: 100%;
-
-      /* override default button styles */
-      text-align: inherit;
-
-      cursor: pointer;
-
-      background-color: inherit;
-      color: inherit;
-
-      border: none;
-      outline: none;
-    }
-
-    :host([right]) {
-      justify-content: end;
-      text-align: right;
-    }
-
-    :host([center]) {
-      justify-content: center;
-      text-align: center;
-    }
-
-    button:focus,
-    button:active {
-      outline: none;
-      box-shadow: none;
-    }
-
-    :host(:not([width])) {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    }
-
-    :host(:not([width])[large]) {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    :host([no-sort]) button {
-      cursor: inherit;
-    }
-
-    :host([center]) button {
-      margin-left: 22px;
-    }
-
-    :host([right]) button {
-      flex-direction: row-reverse;
-    }
-
-    md-icon {
-      display: block;
-      height: 18px;
-      width: 18px;
-      font-size: 18px;
-      margin-left: 4px;
-      flex-shrink: 0;
-      transform-origin: center;
-      transition: transform 150ms ease;
-    }
-
-    :host([no-sort]) button md-icon {
-      display: none;
-    }
-
-    :host([right]) md-icon {
-      display: block;
-      margin-left: 0;
-      margin-right: 4px;
-    }
-
-    :host([width]) span {
-      word-break: break-all;
-    }
-
-    md-icon {
-      visibility: hidden;
-    }
-
-    :host([active][sort-direction='asc']) md-icon {
-      transform: rotate(-180deg);
-    }
-
-    :host([active][sort-direction='asc']) md-icon,
-    :host([active][sort-direction='desc']) md-icon {
-      visibility: visible;
-    }
-
-    :host([narrow][desktop]) {
-      display: none;
-    }
-  `;
-
-  render() {
-    return html`
-      <button
-        ?disabled=${this.noSort}
-        @click=${() => {
-          if (this.active) {
-            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-            this.dispatchEvent(new CustomEvent('sort-direction-changed', { detail: this.sortDirection }));
-          } else {
-            this.sortBy = this.columnName;
-            this.dispatchEvent(new CustomEvent('sort-by-changed', { detail: this.sortBy }));
-          }
-        }}
-      >
-        <span>${this.title}</span>
-        <md-icon>arrow_downward</md-icon>
-        <md-ripple ?disabled=${this.noSort}></md-ripple>
-        <md-focus-ring inward></md-focus-ring>
-      </button>
-    `;
-  }
-}
diff --git a/packages/web/titanium/data-table/data-table-item.ts b/packages/web/titanium/data-table/data-table-item.ts
deleted file mode 100644
index c8dbfde2c..000000000
--- a/packages/web/titanium/data-table/data-table-item.ts
+++ /dev/null
@@ -1,540 +0,0 @@
-import { css, html, LitElement, nothing, PropertyValues } from 'lit';
-import { property, customElement, state } from 'lit/decorators.js';
-import { TitaniumDataTable } from './data-table';
-
-import '@material/web/checkbox/checkbox';
-import '@material/web/icon/icon';
-
-/**
- * A data table element to organize row data and handle row selection.
- *
- * row-item positioning attributes:
- *    - right
- *    - desktop
- *    - large
- *    - center
- *    - width - ex. "140px"
- *
- * @element titanium-data-table-item
- *
- * @fires titanium-data-table-item-navigate - Fired on double click of a row. detail: unknown(this.item)
- * @fires titanium-data-table-item-selected-changed - Fired when item is selected.  detail: { isSelected: boolean, item: unknown }
- * @fires titanium-data-table-item-drop - Fired when item is dropped after a drag
- *
- * @slot default - Main slot that should contain a list of row-item elements
- * @slot item-footer - Optional footer content below the row with the row-items
- *
- * @cssprop {Color} [--md-sys-color-secondary-container] - Row selected  color
- * @cssprop {Color} [--md-sys-color-on-surface] - Row hover color
- * @cssprop {Color} [--md-sys-color-outline-variant] - Bottom division line
- * @cssprop [--titanium-data-table-font-family=Roboto, Noto, sans-serif] - Set the font family of the data table item
- */
-@customElement('titanium-data-table-item')
-export class TitaniumDataTableItem extends LitElement {
-  /**
-   * The backing object that is displayed in this row.  Sent in navigate and selected events.
-   */
-  @property({ type: Object }) accessor item: unknown;
-
-  /**
-   * True when row is selected.
-   */
-  @property({ reflect: true, type: Boolean }) accessor selected: boolean = false;
-
-  /**
-   *  Disables ability to select this row.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'disable-select' }) accessor disableSelect: boolean;
-
-  /**
-   *  Sets if view port is small
-   */
-  @property({ type: Boolean, reflect: true }) accessor narrow: boolean = false;
-
-  /**
-   *  Set to true to make item draggable.  When items are dropped, the items in the list's array are sorted accordingly.
-   *  In order to reflect those updates out to the DOM, you will need to call requestUpdate on the items array when
-   *  items are dropped. ex.
-   *
-   *  <titanium-data-table @titanium-data-table-items-reorder=${() => this.requestUpdate('items')} ... >
-   *
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'enable-dragging' }) accessor enableDrag: boolean = false;
-
-  @property({ type: Boolean, reflect: true, attribute: 'nudge-down' }) protected accessor nudgeDown: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'nudge-up' }) protected accessor nudgeUp: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'dragged' }) protected accessor dragged: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'dragging' }) protected accessor dragging: boolean;
-
-  @state() protected accessor nudgeHeight: number;
-  @state() protected accessor hoverIndex: number | null = null;
-  @state() protected accessor originIndex: number | null = null;
-
-  protected mouseEvent = (e) => this.#startItemDrag(e, 'mouse');
-  protected touchEvent = (e) => {
-    this.#startItemDrag(e, 'touch');
-  };
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('enableDrag')) {
-      if (this.enableDrag) {
-        this.addEventListener('mousedown', this.mouseEvent);
-        this.addEventListener('touchstart', this.touchEvent);
-      } else {
-        this.removeEventListener('mousedown', this.mouseEvent);
-        this.removeEventListener('touchstart', this.touchEvent);
-      }
-    }
-  }
-
-  firstUpdated() {
-    const elements = this.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.assignedElements();
-    elements?.forEach((e) => {
-      const element = e as HTMLElement;
-      const width = element.getAttribute('width');
-      if (width) {
-        element.style.width = width;
-      }
-    });
-
-    this.addEventListener('dblclick', () => {
-      //Force the transition to end on the double-click
-      /**
-       * @internal
-       */
-      this.dispatchEvent(new Event('transitionend'));
-      this.dispatchEvent(new CustomEvent('titanium-data-table-item-navigate', { detail: this.item }));
-    });
-  }
-
-  /**
-   * @ignore
-   */
-  updateDragProps(dragging: boolean, originIndex: number | null, hoverIndex: number | null, originHeight: number) {
-    const myIndex = this.items.indexOf(this);
-    this.nudgeDown = originIndex !== null && hoverIndex !== null && myIndex < originIndex && myIndex >= hoverIndex;
-    this.nudgeUp = originIndex !== null && hoverIndex !== null && myIndex > originIndex && myIndex <= hoverIndex;
-    this.dragged = originIndex === myIndex;
-    this.dragging = dragging;
-    this.nudgeHeight = originHeight;
-  }
-
-  /**
-   *  toggles item's checkbox which triggers this.selected to toggle as well
-   */
-  toggleSelected() {
-    if (this.selected) {
-      this.deselect();
-    } else {
-      this.select();
-    }
-  }
-
-  /**
-   *  if not already checked, triggers click on checkbox which triggers this.selected to be set as well
-   */
-  select() {
-    if (!this.selected) {
-      this.#setSelected(true);
-    }
-  }
-
-  /**
-   *  if already checked, triggers click on checkbox which triggers this.selected to be set to false as well
-   */
-  deselect() {
-    if (this.selected) {
-      this.#setSelected(false);
-    }
-  }
-
-  #setSelected(value: boolean) {
-    this.selected = value;
-    this.dispatchEvent(new Event('titanium-data-table-item-selected-changed', { bubbles: true, composed: true }));
-  }
-
-  protected get dataTable() {
-    return this.parentElement as TitaniumDataTable;
-  }
-
-  protected get items() {
-    return (this.dataTable.itemsSlot?.assignedElements() as TitaniumDataTableItem[]) ?? [];
-  }
-
-  protected get itemsContainer() {
-    return this.dataTable.itemsContainer;
-  }
-
-  /**
-   *  Return index of item over
-   */
-  #getIndexOver(itemEndPositions: number[], hoverPosition: number) {
-    for (let index = 0; index < itemEndPositions.length; index++) {
-      const endPosition = itemEndPositions[index];
-      if (hoverPosition <= endPosition) {
-        return index;
-      }
-    }
-    return itemEndPositions.length - 1;
-  }
-
-  /**
-   *  Given the origin and hover index determine items that will be affected
-   */
-  #determineRange(originIndex: number | null, hoverIndex: number | null) {
-    //PREF: ONLY UPDATE ITEMS BETWEEN ORIGIN AND HOVER (+1 and -1)
-    const high = Math.max(hoverIndex ?? 0, originIndex ?? 0) + 1;
-    let low = Math.min(hoverIndex ?? 0, originIndex ?? 0) - 1;
-    low = low < 0 ? 0 : low;
-
-    return [high, low];
-  }
-
-  #notifySiblingsDrag(originIndex: number | null, hoverIndex: number | null, dragging: boolean, itemHeight: number) {
-    const range = this.#determineRange(originIndex, hoverIndex);
-    for (let index = range[1]; index <= range[0]; index++) {
-      const o = this.items?.[index];
-      o?.updateDragProps(dragging, this.originIndex, this.hoverIndex, itemHeight);
-    }
-  }
-
-  #notifySiblingDragStop(originIndex: number | null, hoverIndex: number | null) {
-    const range = this.#determineRange(originIndex, hoverIndex);
-    for (let index = range[1]; index <= range[0]; index++) {
-      const o = this.items?.[index];
-      o?.updateDragProps(false, null, null, 0);
-    }
-  }
-
-  #startItemDrag(event, type: 'touch' | 'mouse') {
-    //only allow primary mouse for drag
-    if (type === 'mouse' && event.which !== 1) {
-      return;
-    }
-
-    //Prevent native scrolling
-    event.preventDefault();
-
-    this.dragging = true;
-    this.originIndex = this.items.indexOf(this);
-
-    const moveEvent = type === 'touch' ? 'touchmove' : 'mousemove';
-    const upEvent = type === 'touch' ? 'touchend' : 'mouseup';
-    const containerY = this.itemsContainer?.getBoundingClientRect().top + window.scrollY;
-    const startY = event.pageY ?? event.touches[0].pageY;
-    const itemHeight = this.getBoundingClientRect().height - 1;
-
-    //Cache the end positions of each item for variable height list items
-    let cumulativeSum = 0;
-    const itemEndPositions = this.items.map((o) => {
-      cumulativeSum = cumulativeSum + (o.getBoundingClientRect().height - 1);
-      return cumulativeSum;
-    });
-
-    const moveItemHandler = (event) => {
-      // Translate and keep track of which index we are hovering over.
-      const pageY = event.pageY ?? event.touches[0].pageY;
-      const clientY = event.clientY ?? event.touches[0].clientY;
-
-      const itemAbsoluteTop = pageY - containerY;
-      const transformY = pageY - startY;
-
-      this.style.transform = `translateY(${transformY}px)`;
-      this.hoverIndex = this.#getIndexOver(itemEndPositions, itemAbsoluteTop);
-      this.#notifySiblingsDrag(this.originIndex, this.hoverIndex, this.dragging, itemHeight);
-
-      //Scroll on when item approaches bottom/top of viewport
-      if (clientY < 5) {
-        scrollBy({
-          top: -(window.innerHeight / 5),
-          behavior: 'smooth',
-        });
-      } else if (clientY < 25) {
-        scrollBy({
-          top: -(window.innerHeight / 10),
-          behavior: 'smooth',
-        });
-      }
-
-      if (window.innerHeight - clientY < 5) {
-        scrollBy({
-          top: window.innerHeight / 5,
-          behavior: 'smooth',
-        });
-      } else if (window.innerHeight - clientY < 25) {
-        scrollBy({
-          top: window.innerHeight / 10,
-          behavior: 'smooth',
-        });
-      }
-    };
-
-    const cancelDragHandler = () => {
-      document.removeEventListener(moveEvent, moveItemHandler);
-      this.removeEventListener(upEvent, dragCompleteHandler);
-      this.dragging = false;
-
-      const onTransitionEnd = () => {
-        this.#notifySiblingDragStop(this.originIndex, this.hoverIndex);
-        this.originIndex = null;
-        this.hoverIndex = null;
-
-        this.style.transform = '';
-        this.style.transition = '';
-        this.removeEventListener('transitionend', onTransitionEnd);
-      };
-      this.addEventListener('transitionend', onTransitionEnd);
-
-      this.style.transition = 'transform 0.1s ease-out';
-      this.style.transform = 'translate3d(0, 0, 0)';
-
-      document.removeEventListener('mouseout', cancelDragHandler);
-    };
-
-    const dragCompleteHandler = () => {
-      this.dragging = false;
-      this.items.forEach((o) => (o.dragging = false));
-      document.removeEventListener(moveEvent, moveItemHandler);
-
-      document.removeEventListener(upEvent, dragCompleteHandler);
-      if (type === 'mouse') {
-        document.removeEventListener('mouseout', cancelDragHandler);
-      }
-
-      // Perform the swap after the item translates to its resting spot.
-      const onTransitionEnd = () => {
-        if (this.originIndex !== null && this.hoverIndex !== null) {
-          /**
-           * @ignore
-           */
-          this.dispatchEvent(new DataTableItemDropEvent(this.originIndex, this.hoverIndex));
-        }
-        this.#notifySiblingDragStop(this.originIndex, this.hoverIndex);
-        this.originIndex = null;
-        this.hoverIndex = null;
-
-        this.style.transform = '';
-        this.style.transition = '';
-        this.removeEventListener('transitionend', onTransitionEnd);
-      };
-      this.addEventListener('transitionend', onTransitionEnd);
-
-      //Count the nudged items heights to know final transform amount
-      const finalTransformYUp = this.items
-        .filter((o) => o.nudgeUp)
-        .map((o) => (o.getBoundingClientRect().height > 0 ? o.getBoundingClientRect().height - 1 : 0))
-        .reduce((a, b) => a + b, 0);
-
-      const finalTransformYDown = this.items
-        .filter((o) => o.nudgeDown)
-        .map((o) => -o.getBoundingClientRect().height - 1)
-        .reduce((a, b) => a + b, 0);
-
-      const finalTransformY = finalTransformYUp !== 0 ? finalTransformYUp : finalTransformYDown;
-
-      // Translate the item to its resting spot.
-      this.style.transition = 'transform 0.1s ease-out';
-      this.style.transform = `translate3d(0, ${finalTransformY}px, 0)`;
-    };
-
-    if (type === 'mouse') {
-      window.addEventListener('mouseout', cancelDragHandler);
-    }
-    document.addEventListener(upEvent, dragCompleteHandler);
-    document.addEventListener(moveEvent, moveItemHandler);
-    moveItemHandler(event);
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-
-      -webkit-touch-callout: none;
-      user-select: none;
-      text-decoration: none;
-
-      font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-      -webkit-font-smoothing: antialiased;
-
-      transition: none;
-      margin-top: -1px;
-      box-sizing: border-box;
-      border-bottom: 1px var(--md-sys-color-outline-variant) solid;
-      border-top: 1px var(--md-sys-color-outline-variant) solid;
-      position: relative;
-    }
-
-    :host(:not([disable-select])[selected]) {
-      background-color: var(--md-sys-color-secondary-container);
-    }
-
-    :host(:not([disable-select]):not([selected]):hover) {
-      background-color: rgb(from var(--md-sys-color-on-surface, #1d1b20) r g b / 0.08);
-    }
-
-    :host([enable-dragging]) {
-      cursor: grab;
-    }
-
-    md-icon[drag] {
-      position: absolute;
-      opacity: 0.3;
-      right: 7px;
-      color: var(--md-sys-color-outline, #dadce0);
-    }
-
-    :host([enable-dragging]:hover) md-icon[drag] {
-      opacity: 1;
-      display: block;
-    }
-
-    :host([dragged]) {
-      box-shadow:
-        0 3px 6px rgba(0, 0, 0, 0.16),
-        0 3px 6px rgba(0, 0, 0, 0.23);
-      transition: none;
-      overflow: hidden;
-      z-index: 1 !important;
-    }
-
-    /* Only have transition under dragging, because we don't want nudged
-     * items to transition into place once dragging is complete */
-    :host([dragging]:not([dragged])) {
-      transition: transform 0.2s ease-out;
-    }
-
-    :host main {
-      display: flex;
-      flex-direction: row;
-      gap: 16px;
-      align-items: center;
-      min-height: 48px;
-    }
-
-    /* Fallback :hover style for Firefox support */
-    @-moz-document url-prefix() {
-      :host(:not([disable-select]):not([selected]):hover) {
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 8%, transparent);
-      }
-    }
-
-    /* Do not apply :hover style on touch devices */
-    @media (hover: hover) and (pointer: fine) {
-      :host([enable-dragging]) div[item-footer] ::slotted(*) {
-        pointer-events: none;
-      }
-    }
-
-    ::slotted(row-item) {
-      display: block;
-      font-size: 14px;
-      line-height: 18px;
-      font-weight: 400;
-      padding: 4px 0;
-      margin: 0;
-      box-sizing: border-box;
-    }
-
-    ::slotted(row-item:last-of-type) {
-      padding-right: 24px;
-    }
-
-    :host([enable-dragging]) ::slotted(row-item:last-of-type) {
-      padding-right: 40px;
-    }
-
-    ::slotted(row-item:not([width])) {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    }
-
-    ::slotted(row-item:not([width])[large]) {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    }
-
-    ::slotted(row-item[center]) {
-      text-align: center;
-    }
-
-    ::slotted(row-item[image]) {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-    }
-
-    ::slotted(row-item[right]) {
-      text-align: right;
-    }
-
-    md-checkbox {
-      flex-shrink: 0;
-      align-self: center;
-      margin: 0 14px 0 20px;
-    }
-
-    :host([disable-select]) ::slotted(row-item:first-of-type) {
-      padding-left: 24px;
-    }
-
-    :host([narrow]) ::slotted(row-item[desktop]) {
-      display: none;
-    }
-
-    [hidden] {
-      display: none;
-    }
-  `;
-
-  render() {
-    return html`
-      <style>
-        :host([nudge-down]:not([dragged])) {
-          transform: translate3d(0, ${this.nudgeHeight}px, 0);
-        }
-
-        :host([nudge-up]:not([dragged])) {
-          transform: translate3d(0, -${this.nudgeHeight}px, 0);
-        }
-      </style>
-      <main part="main">
-        ${this.disableSelect
-          ? nothing
-          : html`
-              <md-checkbox
-                .checked=${this.selected}
-                @mousedown=${(e: MouseEvent) => e.stopPropagation()}
-                @touchstart=${(e: TouchEvent) => e.stopPropagation()}
-                @dblclick=${(e) => e.stopPropagation()}
-                @click=${(e) => e.stopPropagation()}
-                @change=${(e) => this.#setSelected(e.target.checked)}
-              ></md-checkbox>
-            `}
-
-        <slot></slot>
-        ${this.enableDrag ? html` <md-icon drag>drag_indicator</md-icon>` : nothing}
-      </main>
-      <div item-footer part="item-footer-container">
-        <slot name="item-footer"></slot>
-      </div>
-    `;
-  }
-}
-
-/**
- * @class
- * @ignore
- */
-export class DataTableItemDropEvent extends Event {
-  static eventType = 'titanium-data-table-item-drop';
-  hoverIndex: number;
-  originIndex: number;
-
-  constructor(originIndex: number, hoverIndex: number) {
-    super(DataTableItemDropEvent.eventType, { composed: true, bubbles: true });
-    this.hoverIndex = hoverIndex;
-    this.originIndex = originIndex;
-  }
-}
diff --git a/packages/web/titanium/data-table/data-table.ts b/packages/web/titanium/data-table/data-table.ts
deleted file mode 100644
index d0227c468..000000000
--- a/packages/web/titanium/data-table/data-table.ts
+++ /dev/null
@@ -1,626 +0,0 @@
-import './page-control';
-import '@material/web/checkbox/checkbox';
-import '@material/web/progress/linear-progress';
-import '@material/web/icon/icon';
-
-import { css, html, LitElement } from 'lit';
-import { property, customElement, query, queryAsync, state } from 'lit/decorators.js';
-import { DataTableItemDropEvent, TitaniumDataTableItem } from './data-table-item';
-import { TitaniumDataTableHeader } from './data-table-header';
-import { h1, ellipsis } from '../../titanium/styles/styles';
-import { TitaniumPageControl } from './page-control';
-import { MdCheckbox } from '@material/web/checkbox/checkbox';
-import { niceBadgeStyles } from '../styles/nice-badge';
-
-declare const ResizeObserver: any;
-
-/**
- * Material design inspired data table with paging, sorting, multi/single select, table actions, selected actions and more!
- *
- * @element titanium-data-table
- *
- * @fires selected-changed - Fired when a row or rows in the data table is selected. detail: array<unknown>
- * @fires titanium-data-table-items-reorder - Fired when table items are resorted by user.
- * @fires paging-changed - Fired when take or page is changed by click or keyboard action.
- *
- * @slot table-actions - item nonspecific table buttons such as add new item
- * @slot filter-button - filter button slot
- * @slot filters - filter chips slot
- * @slot search-button -  search button slot
- * @slot selected-actions -  item specific table buttons such as edit, delete shown when one or more items are selected
- * @slot table-headers - slot for table headers (ex. titanium-data-table-header)
- * @slot items - slot for table rows (ex. titanium-data-table-item)
- * @slot footer - slot for additional footer items. Slotting here overwrites footer-buttons.
- * @slot footer-buttons - slot for footer action buttons
- *
- * @cssprop {Color} [var(--md-sys-color-outline-variant)] - Table border color
- * @cssprop {Color} [--titanium-data-table-font-family=Roboto, Noto, sans-serif] - Set the font family used on the data table and paging control
- */
-@customElement('titanium-data-table')
-export class TitaniumDataTable extends LitElement {
-  /**
-   * Table heading / title
-   */
-  @property({ type: String }) accessor header: string;
-
-  /**
-   * Local storage key. Not required if header is static and unique
-   */
-  @property({ type: String, attribute: 'local-storage-key' }) accessor localStorageKey: string;
-
-  /**
-   * Available page sizes
-   */
-  @property({ type: Array }) accessor pageSizes: Array<number> = [10, 15, 20, 50];
-
-  /**
-   * The default page size before the user changes it
-   */
-  @property({ type: Number, attribute: 'default-page-size' }) accessor defaultPageSize: number = 10;
-
-  /**
-   * Total number of items in all pages.
-   */
-  @property({ type: Number }) accessor count: number;
-
-  /**
-   * Current items displayed on the table.
-   */
-  @property({ type: Array }) accessor items: Array<unknown> = [];
-
-  /**
-   * Current search term shown in the no result state if no results are found
-   */
-  @property({ type: String }) accessor searchTerm: string;
-
-  /**
-   * Limits table selection mode to single-select.  Default is multi-select.
-   */
-  @property({ type: Boolean, attribute: 'single-select', reflect: true }) accessor singleSelect: boolean;
-
-  /**
-   * Disables all item selection on the data-table.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'disable-select' }) accessor disableSelect: boolean = false;
-
-  /**
-   * Disables paging.
-   */
-  @property({ type: Boolean, attribute: 'disable-paging', reflect: true }) accessor disablePaging: boolean = false;
-
-  /**
-   * Array of currently selected data table objects
-   */
-  @property({ type: Array }) accessor selected: Array<unknown> = [];
-  @query('div[items-slot]') accessor itemsContainer: HTMLDivElement;
-  @query('slot[name="items"]') accessor itemsSlot: HTMLSlotElement;
-
-  @property({ type: Boolean, reflect: true, attribute: 'narrow' }) protected accessor narrow: boolean = false;
-  @property({ type: Boolean, attribute: 'has-drag-items', reflect: true }) protected accessor hasDragItems: boolean;
-  @property({ type: Number, attribute: 'narrow-max-width', reflect: true }) protected accessor narrowMaxWidth: number = 560;
-  @state() protected accessor isLoading: boolean;
-  @query('slot[name="table-headers"]') protected accessor tableHeaders: HTMLSlotElement;
-  @query('md-checkbox') protected accessor checkbox: MdCheckbox;
-  @queryAsync('titanium-page-control') protected accessor pageControl: Promise<TitaniumPageControl | null>;
-  #openCount = 0;
-
-  /**
-   *  returns internal pageControl's current take
-   */
-  public async getTake(): Promise<number> {
-    return (await this.pageControl)?.take ?? 0;
-  }
-
-  /**
-   *  returns internal pageControl's current page
-   */
-  public async getPage(): Promise<number> {
-    return (await this.pageControl)?.page ?? 0;
-  }
-
-  /**
-   *  sets internal pageControl's current take
-   */
-  public async setTake(take: number): Promise<void> {
-    const control = await this.pageControl;
-    if (control) {
-      control.take = take;
-    }
-  }
-
-  /**
-   *  sets internal pageControl's current page
-   */
-  public async setPage(page: number): Promise<void> {
-    const control = await this.pageControl;
-    if (control) {
-      control.page = page;
-    }
-  }
-
-  /**
-   *  resets internal pageControl's current page to 0
-   */
-  public async resetPage() {
-    await this.setPage(0);
-  }
-
-  async firstUpdated() {
-    if (typeof ResizeObserver === 'function') {
-      const ro = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const cr = entry.contentRect;
-          this.narrow = cr.width < this.narrowMaxWidth;
-          this.updateChildrenIsNarrow();
-        }
-      });
-
-      ro.observe(this);
-    } else {
-      const mql = window.matchMedia('(max-width: 768px)');
-      mql.addEventListener('change', (e) => {
-        this.narrow = e.matches;
-        this.updateChildrenIsNarrow();
-      });
-      this.narrow = mql.matches;
-      this.updateChildrenIsNarrow();
-    }
-
-    this.addEventListener(DataTableItemDropEvent.eventType, (e: DataTableItemDropEvent) => {
-      e.stopPropagation();
-      //HoverIndex cannot be dropped beyond the length of the array
-      const hoverIndex = Math.min(e.hoverIndex, this.items.length - 1);
-
-      //Ignore if item goes back to where it started
-      if (hoverIndex !== e.originIndex) {
-        const temp = this.items[e.originIndex];
-        this.items.splice(e.originIndex, 1);
-        this.items.splice(hoverIndex, 0, temp);
-        /**
-         * @ignore
-         */
-        this.dispatchEvent(new DataTableItemsReorderedEvent());
-      }
-    });
-
-    //When slotted in items change, sync the narrow prop
-    this.tableHeaders.addEventListener('slotchange', () => this.updateChildrenIsNarrow());
-    this.itemsSlot.addEventListener('slotchange', () => this.updateChildrenIsNarrow());
-
-    await (
-      await this.pageControl
-    )?.updateComplete;
-  }
-
-  protected updateChildrenIsNarrow() {
-    this.hasDragItems = (this.itemsSlot.assignedElements() as Array<TitaniumDataTableItem & HTMLElement>).some((o) => o.enableDrag);
-    (this.itemsSlot.assignedElements() as Array<TitaniumDataTableItem & HTMLElement>).forEach((o) => (o.narrow = this.narrow));
-    (this.tableHeaders.assignedElements() as Array<TitaniumDataTableHeader & HTMLElement>).forEach((o) => (o.narrow = this.narrow));
-  }
-
-  /**
-   *  de-select all table items and clear this.selected
-   */
-  clearSelection() {
-    this.#deselectAll();
-    // Ensure the collection is empty, deselect can cause a race condition
-    // between deselecting and UI drawing new items.
-
-    if (this.selected.length > 0) {
-      this.selected = [];
-      this.#notifySelectedChanged();
-    }
-  }
-
-  updated(changedProps) {
-    if (changedProps.has('items') && changedProps.get('items') !== this.items) {
-      // Clear selection when items array changes.
-      this.clearSelection();
-    }
-  }
-
-  #notifySelectedChanged() {
-    this.dispatchEvent(new CustomEvent('selected-changed', { composed: true, detail: this.selected }));
-  }
-
-  /**
-   *  display linear progress bar while promise is active
-   */
-  async loadWhile(promise: Promise<unknown>) {
-    this.isLoading = true;
-    this.#openCount++;
-    try {
-      await promise;
-    } finally {
-      this.#openCount--;
-      if (this.#openCount === 0) {
-        this.isLoading = false;
-      }
-    }
-  }
-
-  #deselectAll() {
-    this.#getTableItems().forEach((o) => o.deselect());
-  }
-
-  /**
-   *  select all table items
-   */
-  selectAll() {
-    if (!this.singleSelect) {
-      this.#getTableItems().forEach((o) => o.select());
-    }
-  }
-
-  #getTableItems(): Array<TitaniumDataTableItem> {
-    return (this.itemsSlot.assignedElements() as Array<TitaniumDataTableItem & HTMLElement>).filter(
-      (o) => typeof o.select === 'function' && typeof o.deselect === 'function'
-    ) as Array<TitaniumDataTableItem>;
-  }
-
-  static styles = [
-    h1,
-    ellipsis,
-    niceBadgeStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-outline-variant);
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        border-radius: 8px;
-        font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-        --titanium-page-control-font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-        -webkit-font-smoothing: antialiased;
-      }
-
-      header {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 12px;
-        gap: 12px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-        position: relative;
-      }
-
-      /* HEADER ROW ONE */
-
-      section[row-one] {
-        display: grid;
-        grid: 'head menu' / 1fr auto;
-        gap: 8px;
-        padding: 12px 12px 0 12px;
-      }
-
-      section[row-one] div[head] {
-        grid-area: head;
-      }
-
-      section[row-one] div[menu] {
-        grid-area: menu;
-      }
-
-      div[search] {
-        grid-area: search;
-      }
-
-      /* HEADER ROW TWO */
-
-      section[row-two] {
-        display: grid;
-        grid: 'search-filter add' / 1fr auto;
-        gap: 8px;
-        padding: 0 12px 0 20px;
-      }
-
-      :host([narrow]) section[row-two] {
-        grid:
-          'search-filter '
-          'add' / auto;
-      }
-
-      section[row-two] div[search-filter] {
-        grid-area: search-filter;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      section[row-two] div[add-button] {
-        grid-area: add;
-        justify-self: end;
-        align-self: end;
-      }
-
-      h1 {
-        padding: 12px 12px 0 12px;
-      }
-
-      selected-actions {
-        display: grid;
-        gap: 6px 24px;
-        grid: 'selected-text buttons';
-        background-color: var(--md-sys-color-secondary-container);
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        margin: 0 !important;
-        padding: 0 12px 12px 24px;
-        align-content: end;
-        z-index: 1;
-      }
-
-      selected-actions h2 {
-        color: var(--md-sys-color-on-secondary-container);
-        font-size: 18px;
-        font-weight: 400;
-        align-self: end;
-      }
-
-      selected-actions div[buttons] {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0 8px;
-        justify-content: flex-end;
-      }
-
-      table-header {
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-        min-height: 48px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      table-header ::slotted(titanium-data-table-header:last-of-type) {
-        padding-right: 24px;
-      }
-
-      :host([has-drag-items]) table-header ::slotted(titanium-data-table-header:last-of-type) {
-        padding-right: 40px;
-      }
-
-      md-linear-progress {
-        width: 100%;
-        margin-top: -4px;
-      }
-
-      main {
-        position: relative;
-        min-height: 48px;
-      }
-
-      content-veil {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--md-sys-color-scrim);
-        opacity: 0;
-        -webkit-transition: opacity 75ms linear;
-        -o-transition: opacity 75ms linear;
-        transition: opacity 75ms linear;
-        z-index: 6;
-      }
-
-      content-veil[opened] {
-        opacity: 0.12;
-        display: block;
-      }
-
-      table-message {
-        display: flex;
-        place-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 64px;
-
-        font-size: 14px;
-        z-index: 10;
-        line-height: 20px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      table-message md-icon {
-        align-self: center;
-        flex-shrink: 0;
-      }
-
-      footer {
-        display: grid;
-        grid: 'controls footer-slot' / minmax(400px, 1fr) auto;
-        gap: 24px;
-        padding: 12px;
-        align-items: center;
-        margin-top: -1px;
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      titanium-page-control {
-        grid-area: controls;
-        margin-left: 12px;
-        justify-self: start;
-      }
-
-      div[footer] {
-        justify-self: end;
-      }
-
-      :host([narrow]) footer {
-        grid:
-          'controls'
-          'footer-slot' / auto;
-      }
-
-      :host([disable-paging]) footer {
-        grid: 'footer-slot' / auto;
-      }
-
-      footer-buttons {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-        align-items: flex-end;
-      }
-
-      div[add-button] {
-        display: flex;
-        align-items: center;
-      }
-
-      div[items-slot] {
-        position: relative;
-      }
-
-      md-checkbox {
-        flex-shrink: 0;
-        align-self: center;
-        margin: 0 14px 0 20px;
-      }
-
-      :host([disable-select]) table-header ::slotted(titanium-data-table-header:first-of-type) {
-        padding-left: 24px;
-      }
-
-      :host(:not([disable-select])[single-select]) table-header {
-        padding-left: 68px;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <header part="header">
-        <slot name="header">
-          <section row-one>
-            <div head ellipsis part="table-header-text-container">
-              <slot name="table-header-text"> <h1 ellipsis>${this.header}</h1></slot>
-            </div>
-            <div menu part="table-actions-container">
-              <slot name="table-actions"></slot>
-            </div>
-          </section>
-          <section row-two>
-            <div search-filter part="filters-container">
-              <slot name="search-button"></slot>
-              <slot name="filter-button"></slot>
-              <slot name="filters"></slot>
-            </div>
-            <div add-button part="add-button-container">
-              <slot name="add-button"></slot>
-            </div>
-          </section>
-        </slot>
-
-        <selected-actions ?hidden=${this.selected.length === 0}>
-          <h2 ellipsis>${this.selected.length} item${this.selected.length > 1 ? 's' : ''} selected</h2>
-          <div buttons part="selected-actions-container">
-            <slot name="selected-actions"></slot>
-          </div>
-        </selected-actions>
-      </header>
-
-      <table-container
-        @titanium-data-table-item-selected-changed=${(e) => {
-          e.stopPropagation();
-          const dataTableItem = e.target as TitaniumDataTableItem;
-
-          if (dataTableItem.selected) {
-            if (this.singleSelect) {
-              this.#getTableItems()
-                .filter((o) => o.item !== dataTableItem.item)
-                .forEach((o) => o.deselect());
-            }
-
-            this.selected.push(dataTableItem.item);
-            this.requestUpdate();
-            this.#notifySelectedChanged();
-          } else {
-            this.selected.splice(this.selected.indexOf(dataTableItem.item), 1);
-            this.requestUpdate();
-            this.#notifySelectedChanged();
-          }
-        }}
-      >
-        <table-header part="table-header-container">
-          ${this.disableSelect || this.singleSelect
-            ? ''
-            : html`
-                <md-checkbox
-                  title="${this.selected.length > 0 ? 'Deselect' : 'Select'} all checkboxes"
-                  aria-label="${this.selected.length > 0 ? 'Deselect' : 'Select'} all checkboxes"
-                  ?checked=${this.selected.length > 0}
-                  ?indeterminate=${this.selected.length !== 0 && this.selected.length !== this.items.length}
-                  ?disabled=${this.items.length === 0}
-                  @click=${() => {
-                    if (this.selected.length > 0) {
-                      this.#deselectAll();
-                    } else {
-                      this.selectAll();
-                    }
-                    this.checkbox.focus();
-                  }}
-                ></md-checkbox>
-              `}
-          <slot name="table-headers"></slot>
-        </table-header>
-        <md-linear-progress ?hidden=${!this.isLoading} ?closed=${!this.isLoading} indeterminate></md-linear-progress>
-
-        <main>
-          <div items-slot part="items-container">
-            <slot name="items"></slot>
-          </div>
-          <table-message ?hidden=${this.isLoading || this.items.length > 0}>
-            <md-icon>info</md-icon>
-            ${this.searchTerm === '' || typeof this.searchTerm === 'undefined' || this.searchTerm === null
-              ? 'No results'
-              : `Your search of '${this.searchTerm}' did not match any results`}</table-message
-          >
-          <table-message ?hidden=${!this.isLoading || this.items.length !== 0}> Loading data... </table-message>
-          <content-veil ?opened=${this.isLoading}></content-veil>
-        </main>
-      </table-container>
-      <footer part="footer-container">
-        <slot name="footer">
-          ${this.disablePaging
-            ? ''
-            : html`
-                <titanium-page-control
-                  label="Rows per page"
-                  ?disabled=${this.isLoading}
-                  .count=${this.count}
-                  .pageSizes=${this.pageSizes}
-                  .defaultPageSize=${this.defaultPageSize}
-                  .localStorageKey=${this.localStorageKey || `${this.header}-take`}
-                  @action=${() => {
-                    this.dispatchEvent(new CustomEvent('paging-changed', { composed: true }));
-                  }}
-                ></titanium-page-control>
-              `}
-          <div footer>
-            <footer-buttons><slot name="footer-buttons"></slot></footer-buttons>
-          </div>
-        </slot>
-      </footer>
-    `;
-  }
-}
-
-export class DataTableItemsReorderedEvent extends Event {
-  static eventType = 'titanium-data-table-items-reorder';
-  constructor() {
-    super(DataTableItemsReorderedEvent.eventType);
-  }
-}
diff --git a/packages/web/titanium/duration-input/duration-input.ts b/packages/web/titanium/duration-input/duration-input.ts
deleted file mode 100644
index a3c11c23d..000000000
--- a/packages/web/titanium/duration-input/duration-input.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { property, customElement } from 'lit/decorators.js';
-import { PropertyValues, css } from 'lit';
-
-import dayjs from 'dayjs/esm';
-import duration from 'dayjs/esm/plugin/duration';
-import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
-import humanInterval, { durationToString } from './human-interval';
-dayjs.extend(duration);
-
-/**
- * titanium-duration-input is a human readable duration textfield.
- *
- * @element titanium-duration-input
- *
- * @fires duration-change The duration can be accessed via event.target.duration
- *
- */
-
-@customElement('titanium-duration-input')
-export class TitaniumDurationInput extends ExtendableOutlinedTextField {
-  /**
-   *  Dayjs duration object. This is the main property you will interact with because the value
-   *  property of this component is actually the human readable string and not the duration you most likely
-   *  want to work with. When changed a duration-change event will be dispatched.
-   */
-  @property({ type: Object }) accessor duration: duration.Duration | null = null;
-
-  @property({ reflect: true, type: String }) accessor autocomplete: string = 'off';
-
-  @property({ reflect: true, type: Boolean }) accessor spellcheck: boolean = false;
-
-  @property({ reflect: true, type: String }) accessor placeholder: string = '3 hours and 30 minutes';
-  @property({ reflect: true, type: String }) accessor label: string = 'Duration';
-
-  firstUpdated() {
-    this.addEventListener('change', () => {
-      this.#customReportValidity(this.input.value);
-
-      const dur = this.#textToInterval(this.input.value);
-      if (dur?.asMilliseconds() != this.duration?.asMilliseconds()) {
-        this.duration = dur;
-        this.dispatchEvent(new Event('duration-change'));
-      }
-    });
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    md-outlined-text-field {
-      width: 100%;
-    }
-  `;
-
-  updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('duration') && changedProps.get('duration') !== this.duration) {
-      if (this.duration) {
-        this.value = durationToString(this.duration);
-      } else {
-        this.duration = null;
-        this.value = '';
-      }
-    }
-  }
-
-  checkValidity() {
-    return super.checkValidity() && this.#customCheckValidity(this.input.value);
-  }
-
-  reportValidity() {
-    this.#customReportValidity(this.input.value);
-    return super.reportValidity();
-  }
-
-  #customCheckValidity(input: string) {
-    if (input && !this.#textToInterval(input)) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  #customReportValidity(input: string) {
-    if (!this.#customCheckValidity(input)) {
-      this.error = true;
-      this.errorText = 'Duration was entered in an incorrect format. Try "3 hours and 30 minutes"';
-    } else {
-      this.error = false;
-      this.errorText = '';
-    }
-  }
-
-  #textToInterval(input: string) {
-    if (!input) {
-      return null;
-    }
-    const ms = humanInterval(input);
-    return isNaN(ms) ? null : dayjs.duration(ms, 'ms');
-  }
-
-  override async reset() {
-    super.reset();
-    this.error = false;
-    this.errorText = '';
-    this.duration = null;
-  }
-}
diff --git a/packages/web/titanium/duration-input/outlined-duration-input.ts b/packages/web/titanium/duration-input/outlined-duration-input.ts
deleted file mode 100644
index da74b2ff8..000000000
--- a/packages/web/titanium/duration-input/outlined-duration-input.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { property, customElement } from 'lit/decorators.js';
-import { PropertyValues } from 'lit';
-import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
-
-import dayjs from 'dayjs/esm';
-import duration from 'dayjs/esm/plugin/duration';
-import humanInterval, { durationToString } from './human-interval';
-dayjs.extend(duration);
-
-/**
- * titanium-outlined-duration-input is a human readable duration textfield.
- *
- * @element titanium-outlined-duration-input
- *
- * @fires duration-change The duration can be accessed via event.target.duration
- *
- */
-
-@customElement('titanium-outlined-duration-input')
-export class TitaniumOutlinedDurationInput extends MdOutlinedTextField {
-  /**
-   *  Dayjs duration object. This is the main property you will interact with because the value
-   *  property of this component is actually the human readable string and not the duration you most likely
-   *  want to work with. When changed a duration-change event will be dispatched.
-   */
-  @property({ type: Object }) accessor duration: duration.Duration | null = null;
-  @property({ type: String }) label: string = 'Duration';
-  @property({ type: String }) supportingText: string = 'Enter a duration ex. "3 hours and 30 minutes"';
-  @property({ type: String }) autocomplete: string = 'off';
-  @property({ type: Boolean }) spellcheck: boolean = false;
-
-  updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('duration') && changedProps.get('duration') !== this.duration) {
-      if (this.duration) {
-        this.value = durationToString(this.duration);
-      } else {
-        this.duration = null;
-        this.value = '';
-      }
-    }
-  }
-
-  firstUpdated() {
-    this.addEventListener('change', () => {
-      this.reportValidity();
-
-      const dur = this.#textToInterval(this.value);
-      if (dur?.asMilliseconds() != this.duration?.asMilliseconds()) {
-        this.duration = dur;
-        this.dispatchEvent(new Event('duration-change'));
-      }
-    });
-  }
-
-  checkValidity() {
-    return super.checkValidity() && this.#customCheckValidity(this.value);
-  }
-
-  reportValidity() {
-    if (!this.#customCheckValidity(this.value)) {
-      this.error = true;
-      this.errorText = 'Duration was entered in an incorrect format. Try "3 hours and 30 minutes"';
-    } else {
-      this.error = false;
-      this.errorText = '';
-    }
-    return super.reportValidity();
-  }
-
-  #customCheckValidity(input: string) {
-    if (input && !this.#textToInterval(input)) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  #textToInterval(input: string) {
-    if (!input) {
-      return null;
-    }
-    const ms = humanInterval(input);
-    return isNaN(ms) ? null : dayjs.duration(ms, 'ms');
-  }
-
-  override async reset() {
-    super.reset();
-    this.error = false;
-    this.errorText = '';
-    this.duration = null;
-  }
-}
diff --git a/packages/web/titanium/error-page/error-page.ts b/packages/web/titanium/error-page/error-page.ts
deleted file mode 100644
index 6319191ce..000000000
--- a/packages/web/titanium/error-page/error-page.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { css, html, LitElement, TemplateResult } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-/**
- * A pre-styled error page
- *
- * @element titanium-error-page
- *
- */
-
-@customElement('titanium-error-page')
-export class TitaniumErrorPage extends LitElement {
-  /**
-   * Reason text for the error
-   */
-  @property() accessor message: string | TemplateResult<1> = 'We were unable to find the page you are looking for...';
-
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-
-      font-family: Roboto, sans-serif;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-
-      max-width: 1300px;
-    }
-
-    header {
-      flex: 1 1 auto;
-      margin-right: 24px;
-    }
-
-    h1 {
-      font-family: Metropolis, 'Roboto', 'Noto', sans-serif;
-      font-weight: 600;
-      font-size: 75px;
-      line-height: 85px;
-      margin: 0;
-    }
-
-    h2 {
-      font-weight: 400;
-      margin: 8px 0 0 4px;
-      max-width: 75%;
-    }
-
-    img {
-      flex-shrink: 0;
-      height: 280px;
-      width: 280px;
-    }
-
-    @media (max-width: 768px) {
-      :host {
-        margin-top: 24px;
-      }
-
-      h2 {
-        max-width: inherit;
-        font-size: 21px;
-      }
-
-      img {
-        height: 120px;
-        width: 120px;
-        align-self: flex-start;
-      }
-
-      h1 {
-        font-size: 55px;
-        line-height: 65px;
-      }
-    }
-  `;
-
-  render() {
-    return html`
-      <header>
-        <h1>Oops!</h1>
-        <h2>${this.message}</h2>
-      </header>
-      <img src="https://www.leavitt.com/images/alert.svg" />
-    `;
-  }
-}
diff --git a/packages/web/titanium/full-page-loading-indicator/full-page-loading-indicator.ts b/packages/web/titanium/full-page-loading-indicator/full-page-loading-indicator.ts
deleted file mode 100644
index 5d3622e92..000000000
--- a/packages/web/titanium/full-page-loading-indicator/full-page-loading-indicator.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { PendingStateEvent } from '../types/pending-state-event';
-
-import '@material/web/progress/linear-progress';
-
-/**
- * A simple full-screen veil with loading indicator that uses promise driven pending-state-events
- *
- * @element titanium-full-page-loading-indicator
- *
- *
- */
-@customElement('titanium-full-page-loading-indicator')
-export class TitaniumFullPageLoadingIndicator extends LitElement {
-  @state() private accessor open: boolean;
-
-  #openDelayTimer: number;
-  #closeDelayTimer: number;
-
-  //Promises faster than this do not cause the scrim to open at all
-  //Prevents flicker for fast promises
-  #openDelay: number = 75;
-
-  // min time scrim has to remain open
-  #minTimeOpen: number = 350;
-  #timeOpen: number;
-  #openCount = 0;
-
-  firstUpdated() {
-    this.popover = 'manual';
-    this.addEventListener('toggle', (e: ToggleEvent) => (this.open = e.newState === 'open'));
-
-    window.addEventListener(PendingStateEvent.eventType, async (e: PendingStateEvent) => {
-      this.#open();
-      this.#openCount++;
-      try {
-        await e.detail.promise;
-      } catch {
-        // Do nothing, this will be handled by others
-      } finally {
-        this.#openCount--;
-        if (this.#openCount === 0) {
-          this.#close();
-        }
-      }
-    });
-  }
-
-  #open() {
-    window.clearTimeout(this.#openDelayTimer);
-
-    //If re-opened while close timer is running, prevent the close
-    window.clearTimeout(this.#closeDelayTimer);
-
-    this.#openDelayTimer = window.setTimeout(() => {
-      this.#timeOpen = performance.now();
-      if (this.showPopover) {
-        this.showPopover();
-      } else {
-        this.open = true;
-      }
-      this.style.display = 'block';
-    }, this.#openDelay);
-  }
-
-  #close() {
-    window.clearTimeout(this.#openDelayTimer);
-    const totalTimeOpened = performance.now() - this.#timeOpen;
-    const closeDelay = Math.max(this.#minTimeOpen - totalTimeOpened, 0);
-
-    this.#closeDelayTimer = window.setTimeout(() => {
-      if (this.hidePopover) {
-        this.hidePopover();
-      } else {
-        this.open = false;
-      }
-      this.style.display = 'none';
-    }, closeDelay);
-  }
-
-  static styles = css`
-    :host {
-      width: 100%;
-      height: 100%;
-      max-width: 100vw;
-      max-height: 100vh;
-
-      border: 0;
-      inset: unset;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      margin: 0;
-      padding: 0;
-      background: transparent;
-    }
-
-    :host::backdrop {
-      background-color: var(--md-sys-color-scrim, #000);
-      backdrop-filter: blur(6px);
-    }
-
-    :host(:popover-open)::backdrop {
-      opacity: 0.32;
-    }
-
-    md-linear-progress {
-      position: absolute;
-      width: 100%;
-      top: 0;
-      right: 0;
-      left: 0;
-    }
-  `;
-
-  render() {
-    return html` <md-linear-progress ?indeterminate=${this.open} ?hide=${!this.open}></md-linear-progress> `;
-  }
-}
diff --git a/packages/web/titanium/header/header.ts b/packages/web/titanium/header/header.ts
deleted file mode 100644
index a025f802b..000000000
--- a/packages/web/titanium/header/header.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import '@material/web/icon/icon';
-import '@material/web/iconbutton/icon-button';
-
-import { h1, h3 } from '../../titanium/styles/styles';
-import { css, html, LitElement, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-/**
- * A pre-styled page header with sub header and optional back button.
- *
- * @element titanium-header
- *
- * @fires titanium-header-back-click - Fired when the back button is clicked
- *
- * @cssprop {Color} [--md-sys-color-on-background] - Header text color
- * @cssprop {Color} [--md-sys-color-on-surface-variant] - Sub-header text color
- */
-@customElement('titanium-header')
-export class TitaniumHeader extends LitElement {
-  /**
-   * Header text
-   */
-  @property({ type: String }) accessor header: string;
-
-  /**
-   * Sub-header text
-   */
-  @property({ type: String }) accessor subHeader: string;
-
-  /**
-   * Leading header icon
-   */
-  @property({ type: String }) accessor icon: string;
-
-  /**
-   *  Removes the back button
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'no-nav' }) accessor noNav: boolean = false;
-
-  /**
-   *  Lets user override back button behavior
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'disable-default-back-button-behavior' }) accessor disableDefaultBackButtonBehavior: boolean = false;
-
-  #handleBackClick() {
-    if (this.disableDefaultBackButtonBehavior) {
-      this.dispatchEvent(new CustomEvent('titanium-header-back-click', { composed: true }));
-    } else {
-      window.history.back();
-    }
-  }
-
-  static styles = [
-    h1,
-    h3,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        -webkit-font-smoothing: antialiased;
-        padding: 0 52px 8px 52px;
-        position: relative;
-      }
-
-      :host([no-nav]) md-icon-button {
-        display: none;
-      }
-
-      :host([no-nav]) {
-        padding: 0 0 8px 0;
-      }
-
-      header {
-        display: block;
-        text-align: center;
-        padding: 0 0 8px 0;
-      }
-
-      h1 {
-        display: inline;
-        font-size: 40px;
-        line-height: 42px;
-        font-weight: 200;
-
-        margin: 0;
-        color: var(--md-sys-color-on-background);
-      }
-
-      h3 {
-        color: var(--md-sys-color-on-surface-variant);
-        font-family: Metropolis, Roboto, Noto, sans-serif;
-        font-weight: 300;
-        font-size: 16px;
-        line-height: 20px;
-        text-align: center;
-      }
-
-      md-icon[header-icon] {
-        display: inline;
-        vertical-align: text-bottom;
-        font-size: 40px;
-        color: var(--md-sys-color-on-background);
-        margin-right: 8px;
-      }
-
-      md-icon-button {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-
-      @media (max-width: 920px) {
-        h1 {
-          font-size: 30px;
-          line-height: 32px;
-        }
-
-        h3 {
-          font-size: 14px;
-          line-height: 16px;
-        }
-
-        md-icon[header-icon] {
-          font-size: 30px;
-        }
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <header part="header">
-        ${this.icon ? html`<md-icon header-icon part="icon">${this.icon}</md-icon>` : nothing}
-        <h1 part="h1">${this.header}</h1>
-        <md-icon-button part="button" @click=${this.#handleBackClick} large> <md-icon>arrow_back</md-icon></md-icon-button>
-      </header>
-
-      <h3 part="h3">${this.subHeader}</h3>
-    `;
-  }
-}
diff --git a/packages/web/titanium/helpers/helpers.ts b/packages/web/titanium/helpers/helpers.ts
index 1c45c489a..3d0d8d6dd 100644
--- a/packages/web/titanium/helpers/helpers.ts
+++ b/packages/web/titanium/helpers/helpers.ts
@@ -5,7 +5,6 @@ export { escapeTerm } from './escape-term';
 export { installMediaQueryWatcher } from './install-media-query-watcher';
 export { getSearchTokens } from './get-search-token';
 export { Debouncer } from './debouncer';
-export { LoadWhile } from './load-while';
 export { promiseTracking } from './promise-tracking';
 export { join } from './join';
 export { delay } from './delay';
diff --git a/packages/web/titanium/helpers/load-while.ts b/packages/web/titanium/helpers/load-while.ts
deleted file mode 100644
index 7b76197d4..000000000
--- a/packages/web/titanium/helpers/load-while.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export type Constructor<T> = { new (...args: any[]): T };
-export const LoadWhile = <C extends Constructor<HTMLElement>>(base: C) =>
-  class extends base {
-    static get properties() {
-      return {
-        isLoading: { type: Boolean },
-      };
-    }
-    /**
-     *  @internal
-     */
-    #promiseCount = 0;
-    isLoading: boolean;
-    async loadWhile(promise: Promise<unknown>) {
-      this.isLoading = true;
-      this.#promiseCount++;
-      try {
-        await promise;
-      } catch {
-        // Do nothing, this will be handled by others
-      } finally {
-        this.#promiseCount--;
-        if (this.#promiseCount === 0) {
-          this.isLoading = false;
-        }
-      }
-    }
-  };
diff --git a/packages/web/titanium/input-validator/input-validator.ts b/packages/web/titanium/input-validator/input-validator.ts
deleted file mode 100644
index ca805acf8..000000000
--- a/packages/web/titanium/input-validator/input-validator.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { MdOutlinedField } from '@material/web/field/outlined-field';
-
-/**
- * Input validator to make components use validation consistent with material 3 outlined styling
- *
- * @element titanium-input-validator
- * @slot default - The slotted element should fire the NotifyUserInputEvent when it is ready to be validated
- * @example
- * <titanium-input-validator .evaluator=${() => (this.collection?.length ?? 0) > 0} validationMessage="Collection must have one item">
- *     <custom-input></custom-input>
- * </titanium-input-validator>
- */
-@customElement('titanium-input-validator')
-export class TitaniumInputValidator extends MdOutlinedField {
-  @property({ type: Boolean }) populated: boolean = true;
-  @property({ type: Object }) accessor evaluator: () => boolean;
-
-  firstUpdated() {
-    this.addEventListener('focusin', () => (this.focused = true));
-    this.addEventListener('focusout', () => (this.focused = false));
-  }
-
-  reset() {
-    this.error = false;
-  }
-
-  reportValidity() {
-    const valid = this.checkValidity();
-    this.error = !valid;
-
-    return valid;
-  }
-
-  checkValidity() {
-    return !!this.evaluator();
-  }
-}
diff --git a/packages/web/titanium/input-validator/outlined-input-validator.ts b/packages/web/titanium/input-validator/outlined-input-validator.ts
deleted file mode 100644
index 3e6356cb3..000000000
--- a/packages/web/titanium/input-validator/outlined-input-validator.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { MdOutlinedField } from '@material/web/field/outlined-field';
-
-/**
- * Input validator to make components use validation consistent with material 3 outlined styling
- *
- * @element titanium-outlined-input-validator
- * @slot default - The slotted element should fire the NotifyUserInputEvent when it is ready to be validated
- * @example
- * <titanium-outlined-input-validator .evaluator=${() => (this.collection?.length ?? 0) > 0} validationMessage="Collection must have one item">
- *     <custom-input></custom-input>
- * </titanium-outlined-input-validator>
- */
-@customElement('titanium-outlined-input-validator')
-export class TitaniumOutlinedInputValidator extends MdOutlinedField {
-  @property({ type: Boolean }) populated: boolean = true;
-  @property({ type: Object }) accessor evaluator: () => boolean;
-
-  firstUpdated() {
-    this.addEventListener('focusin', () => (this.focused = true));
-    this.addEventListener('focusout', () => (this.focused = false));
-  }
-
-  reset() {
-    this.error = false;
-  }
-
-  reportValidity() {
-    const valid = this.checkValidity();
-    this.error = !valid;
-
-    return valid;
-  }
-
-  checkValidity() {
-    return !!this.evaluator();
-  }
-}
diff --git a/packages/web/titanium/search-input/search-input.ts b/packages/web/titanium/search-input/search-input.ts
deleted file mode 100644
index d7cf7f2d6..000000000
--- a/packages/web/titanium/search-input/search-input.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { PropertyValues, css, html, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-import '@material/web/iconbutton/icon-button';
-import '@material/web/icon/icon';
-
-import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
-
-/**
- * A styled input with built-in search and clear icons. .
- *
- * @element titanium-search-input
- *
- * @cssprop {Length} --titanium-search-input-expanded-width - Width when input expands
- *
- */
-@customElement('titanium-search-input')
-export class TitaniumSearchInput extends ExtendableOutlinedTextField {
-  /**
-   *  Whether or not the input should hide the clear button
-   */
-  @property({ type: Boolean, attribute: 'hide-clear-button' }) accessor hideClearButton: boolean = false;
-
-  /**
-   *  Whether the input should prevent collapse.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'prevent-collapse' }) accessor preventCollapse: boolean = false;
-
-  @property({ type: Boolean, reflect: true, attribute: 'has-value' }) protected accessor hasValue: boolean = true;
-
-  @property({ reflect: true, type: String }) accessor autocomplete: string = 'off';
-
-  @property({ reflect: true, type: Boolean }) accessor spellcheck: boolean = false;
-
-  async updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('value')) {
-      this.hasValue = !!this.value;
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      cursor: pointer;
-      overflow: hidden;
-    }
-
-    md-outlined-text-field {
-      width: 48px;
-      --md-outlined-field-outline-width: 0;
-      --md-outlined-field-hover-outline-width: 0;
-      --md-outlined-field-disabled-outline-width: 0;
-
-      -webkit-transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); /* Safari */
-      transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-      --md-outlined-text-field-bottom-space: 11px;
-      --md-outlined-text-field-top-space: 11px;
-    }
-
-    :host([has-value]) md-icon-button[search],
-    :host([prevent-collapse]) md-icon-button[search],
-    md-outlined-text-field:focus-within md-icon-button[search] {
-      pointer-events: none;
-    }
-
-    :host([has-value]) md-outlined-text-field,
-    :host([prevent-collapse]) md-outlined-text-field,
-    md-outlined-text-field:focus-within {
-      --md-outlined-field-outline-width: initial;
-      --md-outlined-field-disabled-outline-width: initial;
-      --md-outlined-field-hover-outline-width: initial;
-      --md-outlined-text-field-container-shape: initial;
-
-      width: var(--titanium-search-input-expanded-width, 258px);
-    }
-  `;
-
-  protected override renderMainSlot() {
-    return html`
-      <slot></slot>
-      <md-icon-button search ?disabled=${this.disabled} @click=${() => this.focus()} @focus=${() => this.focus()} slot="leading-icon">
-        <md-icon search>search</md-icon></md-icon-button
-      >
-
-      ${!this.hasValue
-        ? nothing
-        : html`<md-icon-button
-            slot="trailing-icon"
-            ?disabled=${!this.value || this.disabled}
-            @click=${() => {
-              if (this.disabled) {
-                return;
-              }
-              this.input.focus();
-              this.value = '';
-              this.dispatchEvent(new Event('input'));
-            }}
-          >
-            <md-icon>close</md-icon></md-icon-button
-          >`}
-    `;
-  }
-}
diff --git a/packages/web/titanium/service-worker-notifier/service-worker-notifier.ts b/packages/web/titanium/service-worker-notifier/service-worker-notifier.ts
deleted file mode 100644
index 23cc04412..000000000
--- a/packages/web/titanium/service-worker-notifier/service-worker-notifier.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { html, LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
-
-@customElement('titanium-service-worker-notifier')
-export class TitanuimServiceWorkerNotifier extends LitElement {
-  @property({ type: String }) accessor notificationsStatus: string;
-  @property({ type: String }) accessor scriptUrl: string = 'service-worker.js';
-
-  #newWorker: ServiceWorker | null;
-  #refreshing = false;
-
-  async connectedCallback() {
-    if ('serviceWorker' in navigator) {
-      const reg = await navigator.serviceWorker.getRegistration();
-      if (reg) {
-        reg.addEventListener('updatefound', () => {
-          this.#newWorker = reg.installing;
-          this.#newWorker?.addEventListener('statechange', () => {
-            if (this.#newWorker?.state === 'installed' && navigator.serviceWorker.controller) {
-              this.#showUpdatedSnackbar();
-            }
-          });
-        });
-
-        if (reg.waiting && navigator.serviceWorker.controller) {
-          this.#newWorker = reg.waiting;
-          this.#showUpdatedSnackbar();
-        }
-      }
-
-      navigator.serviceWorker.addEventListener('controllerchange', () => {
-        if (this.#refreshing) {
-          return;
-        }
-        window.location.reload();
-        this.#refreshing = true;
-      });
-    }
-  }
-
-  async #showUpdatedSnackbar() {
-    await this.dispatchEvent(new ShowSnackbarEvent('Site has been updated', { actionText: 'RELOAD' }));
-    this.#newWorker?.postMessage({ type: 'SKIP_WAITING' });
-  }
-
-  render() {
-    return html``;
-  }
-}
diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
index f7b8d975e..ca60f842f 100644
--- a/packages/web/titanium/single-select-base/single-select-base.ts
+++ b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -16,7 +16,7 @@ import { DOMEvent } from '../types/dom-event';
 import { CloseMenuEvent, MenuItem } from '@material/web/menu/menu';
 import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
 import { Menu } from '@material/web/menu/internal/menu';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { Identifier } from '../types/identifier-interface';
 import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
 import { ThemePreference } from '../../leavitt/theme/theme-preference';
@@ -24,7 +24,12 @@ import { html, literal } from 'lit/static-html.js';
 import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
 
 @customElement('titanium-single-select-base')
-export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePreference(LoadWhile(LitElement)) {
+export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePreference(LitElement) {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @state() protected accessor searchTerm: string;
   @state() protected accessor suggestions: Array<T> = [];
 
diff --git a/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts b/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
index 67209ee6d..6f9fd8e7b 100644
--- a/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
+++ b/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
@@ -12,7 +12,7 @@ import { property, customElement, query, state } from 'lit/decorators.js';
 import { CropperCanvas, CropperImage, CropperSelection, CropperShade } from 'cropperjs';
 import { cropperCSS } from './cropper-styles';
 import { h1, p } from '../../titanium/styles/styles';
-import { LoadWhile } from '../../titanium/helpers/load-while';
+import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { MdDialog } from '@material/web/dialog/dialog';
 import { DOMEvent } from '../types/dom-event';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -47,7 +47,12 @@ export declare type SelectionData = {
  *
  */
 @customElement('crop-and-save-image-dialog')
-export class CropAndSaveImageDialog extends LoadWhile(LitElement) {
+export class CropAndSaveImageDialog extends LitElement {
+  @promiseTracking('trackLoadingPromise')
+  @state()
+  accessor isLoading = false;
+  declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
+
   @query('md-dialog') accessor dialog: MdDialog;
   @query('main') accessor main: HTMLElement;
   @query('cropper-canvas') accessor cropperCanvas: CropperCanvas;
@@ -475,25 +480,24 @@ export class CropAndSaveImageDialog extends LoadWhile(LitElement) {
                 },
               });
 
-              this.isLoading = true;
-              await this.updateComplete;
-
               if (!canvas) {
                 return;
               }
 
-              if (this.options?.shape === 'circle') {
-                this.#applyCircleMask(canvas);
-              }
-              const previewBlob = await this.#canvasToBlob(canvas, this.#mimeType, this.options?.outputQuality ?? DEFAULT_IMAGE_QUALITY);
-
-              const previewUrl = URL.createObjectURL(previewBlob);
-              const file = this.blobToFile(previewBlob, this.#changeFileExtension(this.fileName, this.#extension));
-              const save = this.#saveCroppedImageFunc?.(file, previewUrl) || Promise.resolve();
-              this.loadWhile(save);
-              await save;
-              this.isLoading = false;
-              this.dialog.close('cropped');
+              await this.trackLoadingPromise(
+                (async () => {
+                  if (this.options?.shape === 'circle') {
+                    this.#applyCircleMask(canvas);
+                  }
+                  const previewBlob = await this.#canvasToBlob(canvas, this.#mimeType, this.options?.outputQuality ?? DEFAULT_IMAGE_QUALITY);
+
+                  const previewUrl = URL.createObjectURL(previewBlob);
+                  const file = this.blobToFile(previewBlob, this.#changeFileExtension(this.fileName, this.#extension));
+                  const save = this.#saveCroppedImageFunc?.(file, previewUrl) || Promise.resolve();
+                  await save;
+                  this.dialog.close('cropped');
+                })()
+              );
             }}
             >Save</md-filled-tonal-button
           >
diff --git a/packages/web/titanium/youtube-input/youtube-input.ts b/packages/web/titanium/youtube-input/youtube-input.ts
deleted file mode 100644
index 81a7c427a..000000000
--- a/packages/web/titanium/youtube-input/youtube-input.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import '@material/web/icon/icon';
-
-import { html, nothing, css, PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
-
-/**
- * Material design YouTube url input.
- *
- * @element titanium-youtube-input
- *
- */
-
-@customElement('titanium-youtube-input')
-export class TitaniumYouTubeInput extends ExtendableOutlinedTextField {
-  @property({ reflect: true, type: String }) accessor autocomplete: string = 'off';
-
-  @property({ reflect: true, type: Boolean }) accessor spellcheck: boolean = false;
-
-  firstUpdated() {
-    this.label = this.label || 'YouTube video key';
-    this.pattern = '^.{11}$';
-  }
-
-  updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has('value')) {
-      this.value = this.#stripYouTubeKeyFromUrl(this.input.value);
-    }
-  }
-
-  #stripYouTubeKeyFromUrl(value: string) {
-    // https://stackoverflow.com/a/8260383
-    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = value.match(regExp);
-    const key = match && match[7].length === 11 ? match[7] : false;
-    // If key stripped from url use key. Otherwise use the value input by user.
-    return key ? key : value;
-  }
-
-  override async reset() {
-    super.reset();
-    this.value = '';
-  }
-
-  static styles = [
-    css`
-      img {
-        max-height: 42px;
-        margin-right: 22px;
-        border-radius: 8px;
-      }
-
-      md-outlined-text-field {
-        width: 100%;
-      }
-    `,
-  ];
-
-  protected override renderMainSlot() {
-    return html`
-      <md-icon slot="leading-icon"> youtube_activity </md-icon>
-      ${this.value && (this.value?.length || 0) === 11
-        ? html`<img slot="trailing-icon" src="https://img.youtube.com/vi/${this.value}/default.jpg" />`
-        : nothing}
-    `;
-  }
-}

From 67c1a23ca68338b8b226378802d46222426f1927 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 11:56:57 -0600
Subject: [PATCH 03/14] refactor!: make filled the only variant for dual-style
 titanium components

BREAKING CHANGE: Removes the illed attribute from date-input, date-range-selector,
single-select-base (and subclasses), page-control, show-hide, smart-attachment-input,
chip-multi-select, chip, and manual-address-dialog. Outlined Material styling is no
longer supported; components always render filled controls. Deletes extendable-outlined-text-field.
---
 .../src/demos/leavitt-company-select-demo.ts  |   2 -
 .../src/demos/leavitt-person-select-demo.ts   |   2 -
 .../src/demos/titanium-address-input-demo.ts  |   2 -
 .../src/demos/titanium-chip-demo.ts           |  10 +-
 .../demos/titanium-chip-multi-select-demo.ts  |   1 -
 .../src/demos/titanium-date-input-demo.ts     |  11 +-
 .../titanium-date-range-selector-demo.ts      |   2 +-
 .../src/demos/titanium-icon-picker-demo.ts    |   2 +-
 .../src/demos/titanium-page-control-demo.ts   |   2 +-
 .../src/demos/titanium-show-hide-demo.ts      |   2 +-
 .../titanium-smart-attachment-input-demo.ts   |   6 +-
 .../leavitt/company-select/company-select.ts  |   2 +-
 ...ail-history-viewer-filled-filter-dialog.ts |   1 -
 .../email-history-viewer-filled.ts            |   1 -
 .../titanium/address-input/address-input.ts   |   2 -
 .../address-input/manual-address-dialog.ts    | 226 +++++++-------
 .../chip-multi-select/chip-multi-select.ts    |  76 ++---
 packages/web/titanium/chip/chip.ts            |  15 +-
 .../web/titanium/data-table/page-control.ts   |  26 +-
 .../web/titanium/date-input/date-input.ts     |  47 +--
 .../date-range-selector.ts                    |  28 +-
 .../extendable-outlined-text-field.ts         | 277 ------------------
 packages/web/titanium/show-hide/show-hide.ts  |  15 +-
 .../single-select-base/single-select-base.ts  |  65 ++--
 .../smart-attachment-input.ts                 |  15 +-
 25 files changed, 207 insertions(+), 631 deletions(-)
 delete mode 100644 packages/web/titanium/extendable-outlined-text-field/extendable-outlined-text-field.ts

diff --git a/packages/leavittbook/src/demos/leavitt-company-select-demo.ts b/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
index 37742175f..fbe96d06b 100644
--- a/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
@@ -38,7 +38,6 @@ export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
               <h1>Filled</h1>
               <leavitt-company-select
                 style="width: 400px;"
-                filled
                 required
                 ?disable-menu-open-on-focus=${this.disableMenuOpenOnFocus}
                 .apiService=${api3UserService}
@@ -50,7 +49,6 @@ export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
               <leavitt-company-select
                 style=" margin-top: 16px; max-width: 680px;"
                 shaped
-                filled
                 match-input-width
                 label=""
                 large
diff --git a/packages/leavittbook/src/demos/leavitt-person-select-demo.ts b/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
index 6ef124a1f..44777b6b3 100644
--- a/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
@@ -46,7 +46,6 @@ export class LeavittPersonSelectDemo extends LitElement {
               <leavitt-person-select
                 match-input-width
                 shaped
-                filled
                 large
                 label=""
                 .odataParts=${[
@@ -65,7 +64,6 @@ export class LeavittPersonSelectDemo extends LitElement {
               <h1>Local searching</h1>
               <leavitt-person-select
                 large
-                filled
                 search-type="local"
                 .people=${[
                   {
diff --git a/packages/leavittbook/src/demos/titanium-address-input-demo.ts b/packages/leavittbook/src/demos/titanium-address-input-demo.ts
index 1fa674abc..98f900b36 100644
--- a/packages/leavittbook/src/demos/titanium-address-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-address-input-demo.ts
@@ -69,7 +69,6 @@ export class TitaniumAddressInputDemo extends LitElement {
               </google-address-input>
 
               <google-address-input
-                filled
                 demo-a-filled
                 autocomplete="street-address"
                 @selected=${(e: DOMEvent<GoogleAddressInput>) => console.log('selected change 1', e.target.selected)}
@@ -164,7 +163,6 @@ export class TitaniumAddressInputDemo extends LitElement {
               </titanium-address-input>
 
               <titanium-address-input
-                filled
                 ?allow-international=${this.allowInternational}
                 autocomplete="address"
                 demo-a-filled
diff --git a/packages/leavittbook/src/demos/titanium-chip-demo.ts b/packages/leavittbook/src/demos/titanium-chip-demo.ts
index 73479625d..5988db640 100644
--- a/packages/leavittbook/src/demos/titanium-chip-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-chip-demo.ts
@@ -43,14 +43,14 @@ export class TitaniumChipDemo extends LitElement {
             <p>Various chip examples demonstrating different states and configurations</p>
             <chip-container>
               <titanium-chip label="Jon Stewart"> </titanium-chip>
-              <titanium-chip filled label="Jon Stewart"> </titanium-chip>
+              <titanium-chip label="Jon Stewart"> </titanium-chip>
               <titanium-chip label="Stephen Colbert" input-chip @click=${() => alert('click!')}> </titanium-chip>
 
               <titanium-chip label="Jimmy Kimmel" @click=${() => alert('click!')}>
                 <md-icon slot="icon">task_alt</md-icon>
               </titanium-chip>
 
-              <titanium-chip filled label="Jimmy Kimmel" @click=${() => alert('click!')}>
+              <titanium-chip label="Jimmy Kimmel" @click=${() => alert('click!')}>
                 <md-icon slot="icon">task_alt</md-icon>
               </titanium-chip>
 
@@ -72,7 +72,7 @@ export class TitaniumChipDemo extends LitElement {
                 <profile-picture slot="icon" inert size="24"></profile-picture>
               </titanium-chip>
 
-              <titanium-chip selected filled label="Selected" @click=${(e) => (e.target.selected = !e.target.selected)}>
+              <titanium-chip selected label="Selected" @click=${(e) => (e.target.selected = !e.target.selected)}>
                 <profile-picture slot="icon" inert size="24"></profile-picture>
               </titanium-chip>
 
@@ -84,13 +84,13 @@ export class TitaniumChipDemo extends LitElement {
                 <md-icon slot="icon">task_alt</md-icon>
               </titanium-chip>
 
-              <titanium-chip disabled filled label="Disabled with remove button" input-chip @remove=${() => alert('remove!')} @click=${() => alert('click!')}>
+              <titanium-chip disabled label="Disabled with remove button" input-chip @remove=${() => alert('remove!')} @click=${() => alert('click!')}>
                 <md-icon slot="icon">task_alt</md-icon>
               </titanium-chip>
 
               <titanium-chip href="https://google.com" target="_blank" download="google.xls" label="Href demo"> </titanium-chip>
 
-              <titanium-chip filled label="Filled custom color" style="--titanium-chip-filled-background-color: bisque; --titanium-chip-filled-color: black">
+              <titanium-chip label="Custom color" style="--titanium-chip-filled-background-color: bisque; --titanium-chip-filled-color: black">
               </titanium-chip>
             </chip-container>
             <api-docs src="./custom-elements.json" selected="titanium-chip"></api-docs>
diff --git a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
index 0ff60c6a8..112f38bb3 100644
--- a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
@@ -53,7 +53,6 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
 
             <div>
               <titanium-chip-multi-select
-                filled
                 required
                 label="Service Animals"
                 ?hasItems=${!!this.demoItems.length}
diff --git a/packages/leavittbook/src/demos/titanium-date-input-demo.ts b/packages/leavittbook/src/demos/titanium-date-input-demo.ts
index 75430ae87..33af92446 100644
--- a/packages/leavittbook/src/demos/titanium-date-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-date-input-demo.ts
@@ -19,8 +19,8 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-date-input-demo')
 export class TitaniumDateInputDemo extends LitElement {
-  @query('titanium-date-input') protected accessor input!: TitaniumDateInput;
-  @query('titanium-date-input[filled]') protected accessor filledInput!: TitaniumDateInput;
+  @query('titanium-date-input[required]') protected accessor input!: TitaniumDateInput;
+  @query('titanium-date-input:nth-of-type(2)') protected accessor secondInput!: TitaniumDateInput;
 
   static styles = [
     StoryStyles,
@@ -66,8 +66,7 @@ export class TitaniumDateInputDemo extends LitElement {
                 ></titanium-date-input>
                 <titanium-date-input
                   required
-                  filled
-                  label="Filled"
+                  label="Another date"
                   @change=${(e: DOMEvent<TitaniumDateInput>) => console.log('change', e.target.value)}
                 ></titanium-date-input>
               </two-column>
@@ -76,14 +75,14 @@ export class TitaniumDateInputDemo extends LitElement {
                 <md-filled-tonal-button
                   @click=${() => {
                     this.input.reset();
-                    this.filledInput.reset();
+                    this.secondInput.reset();
                   }}
                   >Reset</md-filled-tonal-button
                 >
                 <md-filled-tonal-button
                   @click=${() => {
                     this.input.reportValidity();
-                    this.filledInput.reportValidity();
+                    this.secondInput.reportValidity();
                   }}
                   >Report validity</md-filled-tonal-button
                 >
diff --git a/packages/leavittbook/src/demos/titanium-date-range-selector-demo.ts b/packages/leavittbook/src/demos/titanium-date-range-selector-demo.ts
index 0f5acd6c4..e986842eb 100644
--- a/packages/leavittbook/src/demos/titanium-date-range-selector-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-date-range-selector-demo.ts
@@ -101,7 +101,7 @@ export class TitaniumDateRangeSelectorDemo extends LitElement {
 
             <div>
               <h1>Filled</h1>
-              <titanium-date-range-selector filled></titanium-date-range-selector>
+              <titanium-date-range-selector></titanium-date-range-selector>
             </div>
 
             <api-docs src="./custom-elements.json" selected="titanium-date-range-selector"></api-docs>
diff --git a/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts b/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
index 967c92f3a..3cb50b08f 100644
--- a/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
@@ -37,7 +37,7 @@ export class TitaniumIconPickerDemo extends LitElement {
             <div>
               <h1>Filled</h1>
               <p>Filled icon picker example</p>
-              <titanium-icon-picker filled></titanium-icon-picker>
+              <titanium-icon-picker></titanium-icon-picker>
             </div>
 
             <div>
diff --git a/packages/leavittbook/src/demos/titanium-page-control-demo.ts b/packages/leavittbook/src/demos/titanium-page-control-demo.ts
index 40edfe479..58fa875a1 100644
--- a/packages/leavittbook/src/demos/titanium-page-control-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-page-control-demo.ts
@@ -70,7 +70,7 @@ export class TitaniumPageControlDemo extends LitElement {
             <div>
               <h1>Filled</h1>
               <p>Filled page control variant</p>
-              <titanium-page-control filled></titanium-page-control>
+              <titanium-page-control></titanium-page-control>
             </div>
 
             <div>
diff --git a/packages/leavittbook/src/demos/titanium-show-hide-demo.ts b/packages/leavittbook/src/demos/titanium-show-hide-demo.ts
index f31a69e87..a7743c683 100644
--- a/packages/leavittbook/src/demos/titanium-show-hide-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-show-hide-demo.ts
@@ -345,7 +345,7 @@ export class TitaniumShowHideDemo extends LitElement {
               <h1>Filled button example</h1>
               <p>Read some text</p>
               <md-slider @input=${(event) => (this.verticalStepValue = event.target.value)} .value=${this.verticalStepValue}> </md-slider>
-              <titanium-show-hide filled collapse-height="200">
+              <titanium-show-hide collapse-height="200">
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum arcu, semper ac aliquet eu, porttitor vel turpis. Nullam non dolor ac
                   massa pharetra vulputate vel ac libero. In hac habitasse platea dictumst. Praesent lacus mi, vehicula eu euismod sit amet, accumsan porta
diff --git a/packages/leavittbook/src/demos/titanium-smart-attachment-input-demo.ts b/packages/leavittbook/src/demos/titanium-smart-attachment-input-demo.ts
index 22cac52df..b6cb17699 100644
--- a/packages/leavittbook/src/demos/titanium-smart-attachment-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-smart-attachment-input-demo.ts
@@ -70,7 +70,7 @@ export class TitaniumSmartAttachmentInputDemo extends LitElement {
     'xbm',
   ];
 
-  @query('titanium-smart-attachment-input[filled]') private accessor smartAttachment!: TitaniumSmartAttachmentInput;
+  @query('titanium-smart-attachment-input[required]') private accessor smartAttachment!: TitaniumSmartAttachmentInput;
   @query('md-dialog') private accessor dialog!: any;
 
   static styles = [
@@ -112,9 +112,9 @@ export class TitaniumSmartAttachmentInputDemo extends LitElement {
             </div>
 
             <div>
-              <h1>Filled</h1>
+              <h1>With options</h1>
               <titanium-smart-attachment-input
-                filled
+                required
                 .croppableImageFormats=${this.selectedCroppableFormats}
                 .files=${this.files}
                 label="Upload files"
diff --git a/packages/web/leavitt/company-select/company-select.ts b/packages/web/leavitt/company-select/company-select.ts
index 6040a6d60..ed81b431d 100644
--- a/packages/web/leavitt/company-select/company-select.ts
+++ b/packages/web/leavitt/company-select/company-select.ts
@@ -59,7 +59,7 @@ export class LeavittCompanySelect extends TitaniumSingleSelectBase<Partial<Compa
   @property({ reflect: true, type: Boolean }) accessor spellcheck: boolean = false;
 
   @property({ type: Object }) accessor renderMenuItemContentTemplate = (company: Partial<Company>) => {
-    const theme = !this.shaped || !this.filled ? this.themePreference : this.shaped && this.filled && this.themePreference === 'dark' ? 'light' : 'dark';
+    const theme = !this.shaped ? this.themePreference : this.shaped && this.themePreference === 'dark' ? 'light' : 'dark';
     return html`<md-menu-item .item=${company}>
       <slot name="trailing-icon" slot="trailing-icon"></slot>
       <span slot="headline">${company.Name}</span>
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
index 8e1ebe292..cdebe7808 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
@@ -192,7 +192,6 @@ export class LeavittEmailHistoryViewerFilledFilterDialog extends LitElement {
         <div slot="headline">Filter logs by</div>
         <form slot="content" method="dialog">
           <titanium-date-range-selector
-            filled
             label="Sent"
             .startDate=${this.startDate}
             .endDate=${this.endDate}
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
index c379721ff..da406b241 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
@@ -370,7 +370,6 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
           </titanium-data-table-core>
           <leavitt-app-navigation-footer max-width="initial" .scrollableParent=${this.dataTable}>
             <titanium-page-control
-              filled
               slot="leading"
               ?disabled=${this.isLoading}
               .count=${this.resultTotal}
diff --git a/packages/web/titanium/address-input/address-input.ts b/packages/web/titanium/address-input/address-input.ts
index 303ca8b59..77f2ff6b1 100644
--- a/packages/web/titanium/address-input/address-input.ts
+++ b/packages/web/titanium/address-input/address-input.ts
@@ -44,7 +44,6 @@ export class TitaniumAddressInput extends GoogleAddressInput {
       }
 
       :host([has-selection]) {
-        --md-outlined-text-field-with-trailing-icon-trailing-space: 36px;
         --md-filled-text-field-with-trailing-icon-trailing-space: 36px;
       }
     `,
@@ -63,7 +62,6 @@ export class TitaniumAddressInput extends GoogleAddressInput {
       .allowInternational=${this.allowInternational}
       .showCounty=${this.showCounty}
       .showStreet2=${this.showStreet2}
-      .filled=${this.filled}
       .label=${this.label}
     ></manual-address-dialog>`;
   }
diff --git a/packages/web/titanium/address-input/manual-address-dialog.ts b/packages/web/titanium/address-input/manual-address-dialog.ts
index 415e5304e..89bd6328d 100644
--- a/packages/web/titanium/address-input/manual-address-dialog.ts
+++ b/packages/web/titanium/address-input/manual-address-dialog.ts
@@ -1,20 +1,15 @@
 import '@material/web/icon/icon';
-import '@material/web/select/outlined-select';
 import '@material/web/select/filled-select';
 import '@material/web/select/select-option';
 import '@material/web/dialog/dialog';
-import '@material/web/textfield/outlined-text-field';
 import '@material/web/textfield/filled-text-field';
 import '@material/web/button/filled-tonal-button';
 import '@material/web/button/text-button';
 
-import { css, LitElement, nothing } from 'lit';
-import { literal, html } from 'lit/static-html.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { property, customElement, query, queryAll, state } from 'lit/decorators.js';
 import { AddressInputAddress } from './types/address-input-address';
 import { MdDialog } from '@material/web/dialog/dialog';
-import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
-import { MdOutlinedSelect } from '@material/web/select/outlined-select';
 import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
 import { MdFilledSelect } from '@material/web/select/filled-select';
 import { DOMEvent } from '../types/dom-event';
@@ -33,7 +28,6 @@ export class ManualAddressDialog extends LitElement {
   @property({ type: Boolean, attribute: 'show-street2' }) accessor showStreet2: boolean;
 
   @property({ type: Boolean, attribute: 'allow-international' }) accessor allowInternational: boolean = false;
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
 
   @state() protected accessor street: string = '';
   @state() protected accessor street2: string = '';
@@ -43,9 +37,7 @@ export class ManualAddressDialog extends LitElement {
   @state() protected accessor state: string = '';
   @state() protected accessor zip: string = '';
 
-  @queryAll('md-outlined-text-field, md-outlined-select, md-filled-text-field, md-filled-select') protected accessor allInputs: NodeListOf<
-    MdOutlinedTextField | MdOutlinedSelect | MdFilledTextField | MdFilledSelect
-  >;
+  @queryAll('md-filled-text-field, md-filled-select') protected accessor allInputs: NodeListOf<MdFilledTextField | MdFilledSelect>;
 
   resolve: (value: Partial<AddressInputAddress> | null) => void;
 
@@ -130,7 +122,6 @@ export class ManualAddressDialog extends LitElement {
   ];
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
       <md-dialog
         @open=${(e: DOMEvent<MdDialog>) => {
@@ -144,148 +135,146 @@ export class ManualAddressDialog extends LitElement {
       >
         <div slot="headline">${this.label}</div>
         <form slot="content">
-          <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+          <md-filled-text-field
             label="Street"
             autocomplete="address-line1"
             ?required=${!this.allowInternational || this.country === 'US'}
             .value=${this.street || ''}
-            @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-            @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.street = e.target.value)}
+            @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+            @change=${(e: DOMEvent<MdFilledTextField>) => (this.street = e.target.value)}
           >
             <md-icon slot="leading-icon">markunread_mailbox</md-icon>
-          </${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}>
+          </md-filled-text-field>
           ${
             this.showStreet2 || (this.country !== 'US' && this.country)
-              ? html` <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
-                @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-                label="Street 2/Apartment"
-                autocomplete="address-line2"
-                .value=${this.street2 || ''}
-                @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.street2 = e.target.value)}
-              >
-                <md-icon slot="leading-icon">meeting_room</md-icon></${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
-              >`
+              ? html`<md-filled-text-field
+                  @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                  label="Street 2/Apartment"
+                  autocomplete="address-line2"
+                  .value=${this.street2 || ''}
+                  @change=${(e: DOMEvent<MdFilledTextField>) => (this.street2 = e.target.value)}
+                >
+                  <md-icon slot="leading-icon">meeting_room</md-icon>
+                </md-filled-text-field>`
               : nothing
           }
-          <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+          <md-filled-text-field
             label="City"
             autocomplete="address-level2"
             ?required=${!this.allowInternational || this.country === 'US'}
             .value=${this.city || ''}
-            @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-            @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.city = e.target.value)}
-            ><md-icon slot="leading-icon">location_city</md-icon></${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+            @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+            @change=${(e: DOMEvent<MdFilledTextField>) => (this.city = e.target.value)}
+            ><md-icon slot="leading-icon">location_city</md-icon></md-filled-text-field
           >
           ${
             this.showCounty || (this.country !== 'US' && this.country)
-              ? html`<${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
-                @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-                label="County"
-                ?required=${!this.allowInternational || this.country === 'US'}
-                .value=${this.county || ''}
-                @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.county = e.target.value)}
-                ><md-icon slot="leading-icon">explore</md-icon></${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
-              >`
+              ? html`<md-filled-text-field
+                  @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                  label="County"
+                  ?required=${!this.allowInternational || this.country === 'US'}
+                  .value=${this.county || ''}
+                  @change=${(e: DOMEvent<MdFilledTextField>) => (this.county = e.target.value)}
+                  ><md-icon slot="leading-icon">explore</md-icon></md-filled-text-field
+                >`
               : nothing
           }
           ${
             this.allowInternational
-              ? html`<${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}
-                @opening=${() => preventDialogOverflow(this.dialog)}
-                @closing=${() => allowDialogOverflow(this.dialog)}
-                @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-                label="Country"
-                autocomplete="country"
-                required
-                .value=${this.country || ''}
-                @change=${(e: DOMEvent<MdOutlinedSelect | MdFilledSelect>) => {
-                  e.stopPropagation();
-                  this.country = e.target.value;
-
-                  if (this.country === 'US') {
-                    // If manually typed state is a valid US state abbreviation or name, preselect it
-                    const foundState = usStates?.find(
-                      (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
-                    );
-                    this.state = foundState ? foundState?.abbreviation : '';
-                  } else if (this.country === 'CA') {
-                    // If manually typed state is a valid CA state abbreviation or name, preselect it
-                    const foundState = caStates?.find(
-                      (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
-                    );
-                    this.state = foundState ? foundState?.abbreviation : '';
-                  } else {
-                    this.state = '';
-                  }
-                }}
-              >
-                <md-icon slot="leading-icon">map</md-icon>
-                ${countries.map((s) => html`<md-select-option value=${s.abbreviation}> <div slot="headline">${s.name}</div></md-select-option>`)}
-              </${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}> `
-              : nothing
-          }
-          ${
-            this.allowInternational && this.country !== 'US' && this.country !== 'CA'
-              ? html`
-                <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
-                  label="State/Province"
-                  autocomplete="address-level1"
-                  .value=${this.state || ''}
-                  @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-                  @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.state = e.target.value)}
-                >
-                  <md-icon slot="leading-icon">location_on</md-icon>
-                </${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}>
-              `
-              : html`
-                <${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}
+              ? html`<md-filled-select
                   @opening=${() => preventDialogOverflow(this.dialog)}
                   @closing=${() => allowDialogOverflow(this.dialog)}
-                  @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-                  label="State"
-                  autocomplete="address-level1"
+                  @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                  label="Country"
+                  autocomplete="country"
                   required
-                  .value=${this.state || ''}
-                  @change=${(e: DOMEvent<MdOutlinedSelect | MdFilledSelect>) => {
+                  .value=${this.country || ''}
+                  @change=${(e: DOMEvent<MdFilledSelect>) => {
                     e.stopPropagation();
-                    this.state = e.target.value;
-                    if (usStates.some((o) => o.abbreviation.toLowerCase() === this.state.toLowerCase())) {
-                      this.country = 'US';
+                    this.country = e.target.value;
+
+                    if (this.country === 'US') {
+                      const foundState = usStates?.find(
+                        (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
+                      );
+                      this.state = foundState ? foundState?.abbreviation : '';
+                    } else if (this.country === 'CA') {
+                      const foundState = caStates?.find(
+                        (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
+                      );
+                      this.state = foundState ? foundState?.abbreviation : '';
+                    } else {
+                      this.state = '';
                     }
                   }}
                 >
-                  <md-icon slot="leading-icon">location_on</md-icon>
+                  <md-icon slot="leading-icon">map</md-icon>
+                  ${countries.map((s) => html`<md-select-option value=${s.abbreviation}> <div slot="headline">${s.name}</div></md-select-option>`)}
+                </md-filled-select>`
+              : nothing
+          }
+          ${
+            this.allowInternational && this.country !== 'US' && this.country !== 'CA'
+              ? html`
+                  <md-filled-text-field
+                    label="State/Province"
+                    autocomplete="address-level1"
+                    .value=${this.state || ''}
+                    @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                    @change=${(e: DOMEvent<MdFilledTextField>) => (this.state = e.target.value)}
+                  >
+                    <md-icon slot="leading-icon">location_on</md-icon>
+                  </md-filled-text-field>
+                `
+              : html`
+                  <md-filled-select
+                    @opening=${() => preventDialogOverflow(this.dialog)}
+                    @closing=${() => allowDialogOverflow(this.dialog)}
+                    @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                    label="State"
+                    autocomplete="address-level1"
+                    required
+                    .value=${this.state || ''}
+                    @change=${(e: DOMEvent<MdFilledSelect>) => {
+                      e.stopPropagation();
+                      this.state = e.target.value;
+                      if (usStates.some((o) => o.abbreviation.toLowerCase() === this.state.toLowerCase())) {
+                        this.country = 'US';
+                      }
+                    }}
+                  >
+                    <md-icon slot="leading-icon">location_on</md-icon>
 
-                  ${usStates.map(
-                    (s) =>
-                      html`<md-select-option ?hidden=${this.country === 'CA'} ?selected=${s.abbreviation === this.state} value=${s.abbreviation}>
-                        <div slot="headline">${s.name}</div>
-                        <div slot="supporting-text">United States</div>
-                      </md-select-option>`
-                  )}
-                  ${caStates.map(
-                    (s) =>
-                      html`<md-select-option
-                        ?hidden=${!this.allowInternational || this.country === 'US'}
-                        ?selected=${s.abbreviation === this.state}
-                        value=${s.abbreviation}
-                      >
-                        <div slot="headline">${s.name}</div>
-                        <div slot="supporting-text">Canada</div>
-                      </md-select-option>`
-                  )}
-                </${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}>
-              `
+                    ${usStates.map(
+                      (s) =>
+                        html`<md-select-option ?hidden=${this.country === 'CA'} ?selected=${s.abbreviation === this.state} value=${s.abbreviation}>
+                          <div slot="headline">${s.name}</div>
+                          <div slot="supporting-text">United States</div>
+                        </md-select-option>`
+                    )}
+                    ${caStates.map(
+                      (s) =>
+                        html`<md-select-option
+                          ?hidden=${!this.allowInternational || this.country === 'US'}
+                          ?selected=${s.abbreviation === this.state}
+                          value=${s.abbreviation}
+                        >
+                          <div slot="headline">${s.name}</div>
+                          <div slot="supporting-text">Canada</div>
+                        </md-select-option>`
+                    )}
+                  </md-filled-select>
+                `
           }
 
-          <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+          <md-filled-text-field
             label="Zip"
             autocomplete="postal-code"
             ?required=${!this.allowInternational || this.country === 'US'}
             .value=${this.zip || ''}
-            @blur=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => reportValidityIfError(e.target)}
-            @change=${(e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => (this.zip = e.target.value)}
-            ><md-icon slot="leading-icon">universal_local</md-icon></${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+            @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+            @change=${(e: DOMEvent<MdFilledTextField>) => (this.zip = e.target.value)}
+            ><md-icon slot="leading-icon">universal_local</md-icon></md-filled-text-field
           >
         </form>
 
@@ -312,6 +301,5 @@ export class ManualAddressDialog extends LitElement {
         </div>
       </md-dialog>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/chip-multi-select/chip-multi-select.ts b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
index 0dc55d7f1..f678f592c 100644
--- a/packages/web/titanium/chip-multi-select/chip-multi-select.ts
+++ b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
@@ -5,21 +5,17 @@ import { html } from 'lit';
 import '../../titanium/input-validator/filled-input-validator';
 
 /**
- *  Multi select outlined themed input that styles
+ *  Multi select filled themed input that styles
  *  slotted in chips and add button
  *
  *  @element titanium-chip-multi-select
  *
- * @slot default - Main slot (intended to be a &lt;md-outlined-button&gt; and a list of &lt;md-chip&gt;)
+ * @slot default - Main slot (intended to be a &lt;md-filled-tonal-button&gt; and a list of &lt;md-chip&gt;)
  *
  */
 
 @customElement('titanium-chip-multi-select')
 export class TitaniumChipMultiSelect extends LitElement {
-  /**
-   *  Swaps outlined validator for filled validator
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
   /**
    *  Label of input to display to users
    */
@@ -101,11 +97,20 @@ export class TitaniumChipMultiSelect extends LitElement {
       :host {
         display: block;
         width: 100%;
+
+        --md-filled-field-container-shape: 16px;
+
+        --md-filled-field-active-indicator-height: 0;
+        --md-filled-field-error-active-indicator-height: 0;
+        --md-filled-field-hover-active-indicator-height: 0;
+        --md-filled-field-focus-active-indicator-height: 0;
+        --md-filled-field-disabled-active-indicator-height: 0;
       }
 
       titanium-filled-input-validator {
         display: block;
         width: 100%;
+        --md-filled-field-with-label-bottom-space: 12px;
       }
 
       slot-container {
@@ -113,51 +118,34 @@ export class TitaniumChipMultiSelect extends LitElement {
         flex-wrap: wrap;
         gap: 8px;
         align-items: center;
+        margin-top: 6px;
       }
 
       span {
         font-size: 13px;
       }
 
-      :host([filled]) {
-        --md-filled-field-container-shape: 16px;
-
-        --md-filled-field-active-indicator-height: 0;
-        --md-filled-field-error-active-indicator-height: 0;
-        --md-filled-field-hover-active-indicator-height: 0;
-        --md-filled-field-focus-active-indicator-height: 0;
-        --md-filled-field-disabled-active-indicator-height: 0;
+      ::slotted(md-filled-button),
+      ::slotted(md-filled-tonal-button) {
+        --md-filled-button-container-shape: 8px;
+        --md-filled-button-container-height: 32px;
+
+        --md-filled-button-with-trailing-icon-leading-space: 8px;
+        --md-filled-button-with-trailing-icon-trailing-space: 16px;
+        --md-filled-button-with-leading-icon-leading-space: 8px;
+        --md-filled-button-with-leading-icon-trailing-space: 16px;
+
+        --md-filled-tonal-button-with-trailing-icon-leading-space: 8px;
+        --md-filled-tonal-button-with-trailing-icon-trailing-space: 16px;
+        --md-filled-tonal-button-with-leading-icon-leading-space: 8px;
+        --md-filled-tonal-button-with-leading-icon-trailing-space: 16px;
+        --md-filled-tonal-button-container-shape: 8px;
+        --md-filled-tonal-button-container-height: 32px;
+      }
 
-        slot-container {
-          margin-top: 6px;
-        }
-
-        titanium-filled-input-validator {
-          --md-filled-field-with-label-bottom-space: 12px;
-        }
-
-        ::slotted(md-filled-button),
-        ::slotted(md-filled-tonal-button) {
-          --md-filled-button-container-shape: 8px;
-          --md-filled-button-container-height: 32px;
-
-          --md-filled-button-with-trailing-icon-leading-space: 8px;
-          --md-filled-button-with-trailing-icon-trailing-space: 16px;
-          --md-filled-button-with-leading-icon-leading-space: 8px;
-          --md-filled-button-with-leading-icon-trailing-space: 16px;
-
-          --md-filled-tonal-button-with-trailing-icon-leading-space: 8px;
-          --md-filled-tonal-button-with-trailing-icon-trailing-space: 16px;
-          --md-filled-tonal-button-with-leading-icon-leading-space: 8px;
-          --md-filled-tonal-button-with-leading-icon-trailing-space: 16px;
-          --md-filled-tonal-button-container-shape: 8px;
-          --md-filled-tonal-button-container-height: 32px;
-        }
-
-        ::slotted(md-input-chip) {
-          background: var(--md-sys-color-surface-container);
-          --md-sys-color-outline: transparent;
-        }
+      ::slotted(md-input-chip) {
+        background: var(--md-sys-color-surface-container);
+        --md-sys-color-outline: transparent;
       }
     `,
   ];
diff --git a/packages/web/titanium/chip/chip.ts b/packages/web/titanium/chip/chip.ts
index b3e2bbd60..f81f42551 100644
--- a/packages/web/titanium/chip/chip.ts
+++ b/packages/web/titanium/chip/chip.ts
@@ -58,8 +58,6 @@ export class TitaniumChip extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) accessor disabled: boolean = false;
 
-  @property({ type: Boolean, reflect: true }) accessor filled: boolean = false;
-
   @property({ type: Boolean, reflect: true, attribute: 'has-leading-items' }) private accessor hasLeadingItems = false;
   @property({ type: Boolean, reflect: true, attribute: 'has-trailing-items' }) private accessor hasTrailingItems = false;
 
@@ -100,12 +98,12 @@ export class TitaniumChip extends LitElement {
         height: inherit;
         text-align: inherit;
 
-        border: 1px solid var(--titanium-chip-outline-color, var(--md-sys-color-outline));
+        border: none;
         border-radius: 8px;
         --md-focus-ring-shape: 8px;
 
-        color: inherit;
-        background: inherit;
+        background-color: var(--titanium-chip-filled-background-color, var(--md-sys-color-surface-container));
+        color: var(--titanium-chip-filled-color, var(--md-sys-color-on-surface));
         width: inherit;
 
         outline: none;
@@ -119,13 +117,6 @@ export class TitaniumChip extends LitElement {
         padding: 0 12px;
       }
 
-      :host([filled]) a,
-      :host([filled]) button {
-        border: none;
-        background-color: var(--titanium-chip-filled-background-color, var(--md-sys-color-surface-container));
-        color: var(--titanium-chip-filled-color, var(--md-sys-color-on-surface));
-      }
-
       :host([selected]) button,
       :host([selected]) a,
       :host([has-leading-items]) button,
diff --git a/packages/web/titanium/data-table/page-control.ts b/packages/web/titanium/data-table/page-control.ts
index 67476d31c..9c7588724 100644
--- a/packages/web/titanium/data-table/page-control.ts
+++ b/packages/web/titanium/data-table/page-control.ts
@@ -1,11 +1,9 @@
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, customElement, queryAsync } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { MdOutlinedSelect } from '@material/web/select/outlined-select.js';
-import { literal, html } from 'lit/static-html.js';
+import { MdFilledSelect } from '@material/web/select/filled-select.js';
 
 import '@material/web/iconbutton/icon-button';
-import '@material/web/select/outlined-select.js';
 import '@material/web/select/filled-select.js';
 import '@material/web/select/select-option.js';
 
@@ -55,12 +53,7 @@ export class TitaniumPageControl extends LitElement {
    */
   @property({ type: Boolean }) accessor disabled: boolean;
 
-  /**
-   *  Swaps out outlined select for a filled select.
-   */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
-
-  @queryAsync('md-select') protected accessor select: MdOutlinedSelect;
+  @queryAsync('md-select') protected accessor select: MdFilledSelect;
 
   /**
    * Gets or sets take value and assigns it to local storage.
@@ -141,13 +134,6 @@ export class TitaniumPageControl extends LitElement {
       display: flex;
     }
 
-    md-outlined-select {
-      min-width: 100px;
-      --md-outlined-field-top-space: 4px;
-      --md-outlined-field-bottom-space: 4px;
-      --md-outlined-select-text-field-container-shape: 8px;
-    }
-
     md-filled-select {
       min-width: 100px;
       overflow: hidden;
@@ -171,11 +157,10 @@ export class TitaniumPageControl extends LitElement {
   `;
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
       <table-controls>
           <div ellipsis>${this.label}</div>
-          <${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}
+          <md-filled-select
             ?disabled=${this.disabled}
             @request-selection=${(e) => {
               e.stopPropagation();
@@ -191,7 +176,7 @@ export class TitaniumPageControl extends LitElement {
                   <div slot="headline">${o}</div>
                 </md-select-option>`
             )}
-          </${this.filled ? literal`md-filled-select` : literal`md-outlined-select`}>
+          </md-filled-select>
         ${this.#getPageStats(this.page, this.count)}
         <table-paging>
           <md-icon-button @click=${this.#handleLastPageClick} ?disabled=${this.page === 0 || !this.count || this.disabled}>
@@ -203,6 +188,5 @@ export class TitaniumPageControl extends LitElement {
         </table-paging>
       </table-controls>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/date-input/date-input.ts b/packages/web/titanium/date-input/date-input.ts
index 6dfad6a3f..8e7ec7415 100644
--- a/packages/web/titanium/date-input/date-input.ts
+++ b/packages/web/titanium/date-input/date-input.ts
@@ -5,12 +5,11 @@ import { redispatchEvent } from '@material/web/internal/events/redispatch-event'
 
 import { stringConverter } from '@material/web/internal/controller/string-converter';
 
-import '@material/web/field/outlined-field';
 import '@material/web/field/filled-field';
 import '@material/web/icon/icon';
 import '@material/web/iconbutton/icon-button';
 import { Field } from '@material/web/field/internal/field';
-import { html, literal } from 'lit/static-html.js';
+import { html } from 'lit';
 
 /**
  * A date input the works in Firefox, Safari and Chrome
@@ -88,11 +87,6 @@ export class TitaniumDateInput extends LitElement {
 
   @property() accessor label = '';
 
-  /**
-   *  Swaps out outlined text field for a filled text field.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
-
   @property({ type: Boolean, reflect: true }) accessor required = false;
 
   /**
@@ -262,7 +256,7 @@ export class TitaniumDateInput extends LitElement {
     this.nativeErrorText = this.validationMessage;
 
     if (prevMessage === this.getErrorText()) {
-      (this.shadowRoot?.querySelector(this.filled ? 'md-filled-field' : 'md-outlined-field') as Field)?.reannounceError();
+      (this.shadowRoot?.querySelector('md-filled-field') as Field)?.reannounceError();
     }
 
     return valid;
@@ -295,7 +289,7 @@ export class TitaniumDateInput extends LitElement {
       display: block;
     }
 
-    :host([filled]) {
+    :host {
       --md-filled-field-container-shape: 16px;
 
       --md-filled-field-active-indicator-height: 0;
@@ -307,12 +301,6 @@ export class TitaniumDateInput extends LitElement {
       --md-filled-field-label-text-populated-line-height: 14px;
     }
 
-    :host(:not([filled])) {
-      --md-outlined-field-top-space: 15px;
-      --md-outlined-field-bottom-space: 15px;
-    }
-
-    md-outlined-field,
     md-filled-field {
       width: 100%;
     }
@@ -329,14 +317,7 @@ export class TitaniumDateInput extends LitElement {
     /* Safari Only */
     _::-webkit-full-page-media,
     _:future,
-    input {
-      padding-top: 14px;
-      padding-bottom: 7px;
-    }
-
-    :host([filled]) _::-webkit-full-page-media,
-    :host([filled]) _:future,
-    :host([filled]) input {
+    :host input {
       padding-top: 21px;
       padding-bottom: 0;
     }
@@ -355,14 +336,9 @@ export class TitaniumDateInput extends LitElement {
 
       input {
         min-width: 100px;
-        padding-bottom: 10px;
-        padding-top: 16px;
-        height: 30px;
-      }
-
-      :host([filled]) input {
         padding-bottom: 3px;
         padding-top: 23px;
+        height: 30px;
       }
     }
 
@@ -380,21 +356,15 @@ export class TitaniumDateInput extends LitElement {
         display: none;
       }
 
-      :host([filled]) {
+      :host {
         --md-filled-field-label-text-populated-line-height: 16px;
       }
-
-      :host(:not([filled])) {
-        --md-outlined-field-top-space: 16px;
-        --md-outlined-field-bottom-space: 16px;
-      }
     }
   `;
 
   protected render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
-      <${this.filled ? literal`md-filled-field` : literal`md-outlined-field`}
+      <md-filled-field
         ?disabled=${this.disabled}
         ?error=${this.error || this.nativeError}
         error-text=${this.getErrorText()}
@@ -441,8 +411,7 @@ export class TitaniumDateInput extends LitElement {
             </md-icon-button>
           </slot>
         </span>
-      </${this.filled ? literal`md-filled-field` : literal`md-outlined-field`}>
+      </md-filled-field>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/date-range-selector/date-range-selector.ts b/packages/web/titanium/date-range-selector/date-range-selector.ts
index f0ae07f9f..021dc0683 100644
--- a/packages/web/titanium/date-range-selector/date-range-selector.ts
+++ b/packages/web/titanium/date-range-selector/date-range-selector.ts
@@ -1,5 +1,4 @@
 import '@material/web/icon/icon';
-import '@material/web/field/outlined-field';
 import '@material/web/field/filled-field';
 import '@material/web/menu/menu';
 import '@material/web/button/text-button';
@@ -10,7 +9,7 @@ import '@material/web/list/list-item';
 import '../date-input/date-input';
 
 import { css, LitElement, nothing } from 'lit';
-import { html, literal } from 'lit/static-html.js';
+import { html } from 'lit';
 import { property, customElement, query, state } from 'lit/decorators.js';
 import dayjs from 'dayjs/esm';
 import { DateRangeOption } from './types/date-range-option';
@@ -63,11 +62,6 @@ export class TitaniumDateRangeSelector extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) accessor disabled: boolean = false;
 
-  /**
-   *  Whether or not the input should be filled
-   */
-  @property({ type: Boolean, reflect: true }) accessor filled: boolean = false;
-
   /**
    *  Override default ranges with custom options. Needs to contain, at least, 'allTime'.
    */
@@ -130,7 +124,7 @@ export class TitaniumDateRangeSelector extends LitElement {
       position: relative;
     }
 
-    :host([filled]) {
+    :host {
       --md-menu-container-shape: 16px;
 
       --md-filled-field-container-shape: 16px;
@@ -174,10 +168,6 @@ export class TitaniumDateRangeSelector extends LitElement {
 
       gap: 12px;
       padding: 12px;
-      border-radius: 0 0 4px 4px;
-    }
-
-    :host([filled]) menu-actions {
       border-radius: 0 0 16px 16px;
     }
 
@@ -191,13 +181,11 @@ export class TitaniumDateRangeSelector extends LitElement {
       margin-right: 16px;
     }
 
-    md-filled-field,
-    md-outlined-field {
+    md-filled-field {
       width: 100%;
     }
 
-    md-filled-field md-icon,
-    md-outlined-field md-icon {
+    md-filled-field md-icon {
       margin: 0 12px;
     }
 
@@ -274,9 +262,8 @@ export class TitaniumDateRangeSelector extends LitElement {
   }
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
-      <${this.filled ? literal`md-filled-field` : literal`md-outlined-field`}
+      <md-filled-field
         part="field"
         aria-haspopup="listbox"
         role="combobox"
@@ -313,7 +300,7 @@ export class TitaniumDateRangeSelector extends LitElement {
 
         <md-icon slot="start">${this.#getRange(this.range)?.icon || 'date_range'}</md-icon>
         <md-icon slot="end">${this.open ? 'arrow_drop_up' : 'arrow_drop_down'}</md-icon>
-      </${this.filled ? literal`md-filled-field` : literal`md-outlined-field`}>
+      </md-filled-field>
 
       <!-- stay-open-on-focusout -->
       <md-menu
@@ -372,7 +359,6 @@ export class TitaniumDateRangeSelector extends LitElement {
                 start-date
                 label="From"
                 type=${this.type}
-                .filled=${this.filled}
                 .value=${this.proposedStartDate ?? ''}
                 @change=${async (e: DOMEvent<TitaniumDateInput>) => {
                   this.proposedStartDate = e.target.value ?? '';
@@ -389,7 +375,6 @@ export class TitaniumDateRangeSelector extends LitElement {
                 end-date
                 label="To"
                 type=${this.type}
-                .filled=${this.filled}
                 .value=${this.proposedEndDate ?? ''}
                 @change=${async (e: DOMEvent<TitaniumDateInput>) => {
                   this.proposedEndDate = e.target.value ?? '';
@@ -429,6 +414,5 @@ export class TitaniumDateRangeSelector extends LitElement {
         </main>
       </md-menu>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/extendable-outlined-text-field/extendable-outlined-text-field.ts b/packages/web/titanium/extendable-outlined-text-field/extendable-outlined-text-field.ts
deleted file mode 100644
index 31564dd9b..000000000
--- a/packages/web/titanium/extendable-outlined-text-field/extendable-outlined-text-field.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import '@material/web/textfield/outlined-text-field';
-
-import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
-import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { stringConverter } from '@material/web/internal/controller/string-converter';
-import { TextFieldType, UnsupportedTextFieldType } from '@material/web/textfield/internal/text-field';
-import { DOMEvent } from '../types/dom-event';
-import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
-
-export class ExtendableOutlinedTextField extends LitElement {
-  @query('md-outlined-text-field') accessor input: MdOutlinedTextField;
-
-  /**
-   * Gets or sets whether or not the text field is in a visually invalid state.
-   *
-   * This error state overrides the error state controlled by
-   * `reportValidity()`.
-   */
-  @property({ type: Boolean, reflect: true }) accessor error = false;
-
-  @property({ type: Boolean, reflect: true }) accessor disabled = false;
-
-  /**
-   * The error message that replaces supporting text when `error` is true. If
-   * `errorText` is an empty string, then the supporting text will continue to
-   * show.
-   *
-   * This error message overrides the error message displayed by
-   * `reportValidity()`.
-   */
-  @property({ attribute: 'error-text' }) accessor errorText = '';
-
-  @property() accessor label = '';
-
-  @property({ type: Boolean, reflect: true }) accessor required = false;
-
-  /**
-   * The current value of the text field. It is always a string.
-   */
-  @property() accessor value = '';
-
-  /**
-   * An optional prefix to display before the input value.
-   */
-  @property({ attribute: 'prefix-text' }) accessor prefixText = '';
-
-  /**
-   * An optional suffix to display after the input value.
-   */
-  @property({ attribute: 'suffix-text' }) accessor suffixText = '';
-
-  /**
-   * Whether or not the text field has a leading icon. Used for SSR.
-   */
-  @property({ type: Boolean, attribute: 'has-leading-icon' })
-  accessor hasLeadingIcon = false;
-
-  /**
-   * Whether or not the text field has a trailing icon. Used for SSR.
-   */
-  @property({ type: Boolean, attribute: 'has-trailing-icon' })
-  accessor hasTrailingIcon = false;
-
-  /**
-   * Conveys additional information below the text field, such as how it should
-   * be used.
-   */
-  @property({ attribute: 'supporting-text' }) accessor supportingText = '';
-
-  /**
-   * Override the input text CSS `direction`. Useful for RTL languages that use
-   * LTR notation for fractions.
-   */
-  @property({ attribute: 'text-direction' }) accessor textDirection = '';
-
-  /**
-   * The number of rows to display for a `type="textarea"` text field.
-   * Defaults to 2.
-   */
-  @property({ type: Number }) accessor rows = 2;
-
-  /**
-   * The number of cols to display for a `type="textarea"` text field.
-   * Defaults to 20.
-   */
-  @property({ type: Number }) accessor cols = 20;
-
-  // <input> properties
-  @property({ reflect: true }) override accessor inputMode = '';
-
-  /**
-   * Defines the greatest value in the range of permitted values.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-   */
-  @property() accessor max = '';
-
-  /**
-   * The maximum number of characters a user can enter into the text field. Set
-   * to -1 for none.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-   */
-  @property({ type: Number }) accessor maxLength = -1;
-
-  /**
-   * Defines the most negative value in the range of permitted values.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-   */
-  @property() accessor min = '';
-
-  /**
-   * The minimum number of characters a user can enter into the text field. Set
-   * to -1 for none.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-   */
-  @property({ type: Number }) accessor minLength = -1;
-
-  /**
-   * A regular expression that the text field's value must match to pass
-   * constraint validation.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-   */
-  @property() accessor pattern = '';
-
-  @property({ reflect: true, converter: stringConverter }) accessor placeholder = '';
-
-  /**
-   * Indicates whether or not a user should be able to edit the text field's
-   * value.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-   */
-  @property({ type: Boolean, reflect: true }) accessor readOnly = false;
-
-  /**
-   * Indicates that input accepts multiple email addresses.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
-   */
-  @property({ type: Boolean, reflect: true }) accessor multiple = false;
-
-  /**
-   * Returns or sets the element's step attribute, which works with min and max
-   * to limit the increments at which a numeric or date-time value can be set.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-   */
-  @property() accessor step = '';
-
-  /**
-   * The `<input>` type to use, defaults to "text". The type greatly changes how
-   * the text field behaves.
-   *
-   * Text fields support a limited number of `<input>` types:
-   *
-   * - text
-   * - textarea
-   * - email
-   * - number
-   * - password
-   * - search
-   * - tel
-   * - url
-   *
-   * See
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
-   * for more details on each input type.
-   */
-  @property({ reflect: true }) accessor type: TextFieldType | UnsupportedTextFieldType = 'text';
-
-  /**
-   * Describes what, if any, type of autocomplete functionality the input
-   * should provide.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-   */
-  @property({ reflect: true, type: String }) accessor autocomplete = '';
-
-  /**
-   * Describes what, if any, type of spellcheck functionality the input
-   * should provide.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
-   */
-  @property({ reflect: true, type: Boolean }) accessor spellcheck;
-
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-
-  select() {
-    this.input.select();
-  }
-
-  setCustomValidity(error: string) {
-    this.input.setCustomValidity(error);
-  }
-
-  setRangeText(replacement: string, start: number, end: number, selectionMode?: SelectionMode) {
-    this.input.setRangeText(replacement, start, end, selectionMode);
-  }
-
-  setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') {
-    this.input.setSelectionRange(start, end, direction);
-  }
-
-  stepDown(stepDecrement?: number) {
-    this.input.stepDown(stepDecrement);
-  }
-
-  stepUp(stepDecrement?: number) {
-    this.input.stepUp(stepDecrement);
-  }
-
-  reset() {
-    this.input.reset();
-  }
-
-  focus() {
-    this.input.focus();
-  }
-
-  protected renderMainSlot() {
-    return html`
-      <slot></slot>
-      <slot name="trailing-icon" slot="trailing-icon"></slot>
-      <slot name="leading-icon" slot="leading-icon"></slot>
-    `;
-  }
-
-  render() {
-    return html`
-      <md-outlined-text-field
-        part="text-field"
-        @input=${(e: DOMEvent<MdOutlinedTextField>) => (this.value = e.target.value)}
-        @blur=${(e) => redispatchEvent(this, e)}
-        @focus=${(e) => redispatchEvent(this, e)}
-        @change=${(e) => redispatchEvent(this, e)}
-        @invalid=${(e) => redispatchEvent(this, e)}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .error=${this.error}
-        .autocomplete=${this.autocomplete}
-        .spellcheck=${this.spellcheck}
-        .errorText=${this.errorText}
-        .hasLeadingIcon=${this.hasLeadingIcon}
-        .hasTrailingIcon=${this.hasTrailingIcon}
-        .label=${this.label}
-        .max=${this.max}
-        .maxLength=${this.maxLength}
-        .minLength=${this.minLength}
-        .pattern=${this.pattern}
-        .placeholder=${this.placeholder}
-        .prefixText=${this.prefixText}
-        .readOnly=${this.readOnly}
-        .rows=${this.rows}
-        .step=${this.step}
-        .suffixText=${this.suffixText}
-        .supportingText=${this.supportingText}
-        .textDirection=${this.textDirection}
-        .type=${this.type}
-        .value=${this.value}
-      >
-        ${this.renderMainSlot()}
-      </md-outlined-text-field>
-    `;
-  }
-}
diff --git a/packages/web/titanium/show-hide/show-hide.ts b/packages/web/titanium/show-hide/show-hide.ts
index 3f18b2e6a..1d03aa611 100644
--- a/packages/web/titanium/show-hide/show-hide.ts
+++ b/packages/web/titanium/show-hide/show-hide.ts
@@ -1,8 +1,6 @@
-import { css, LitElement, PropertyValues } from 'lit';
-import { literal, html } from 'lit/static-html.js';
+import { css, html, LitElement, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
-import '@material/web/button/outlined-button';
 import '@material/web/button/filled-button';
 
 /**
@@ -31,10 +29,6 @@ export default class TitaniumShowHide extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'collapsed' }) accessor collapsed: boolean = true;
   @property({ type: Boolean, reflect: true, attribute: 'has-hidden-items' }) protected accessor hasHiddenItems: boolean = false;
   @property({ type: Number }) accessor hiddenItemCount: number = 0;
-  /**
-   * Swaps out outlined button for a filled button when true
-   */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
 
   @query('items-container') protected accessor itemsContainer: HTMLElement;
   @query('collapsed-box') protected accessor collapsedContainer: HTMLElement;
@@ -101,7 +95,6 @@ export default class TitaniumShowHide extends LitElement {
         gap: var(--titanium-show-hide-gap, 8px);
       }
 
-      md-outlined-button,
       md-filled-button {
         max-width: 160px;
         width: 100%;
@@ -116,7 +109,6 @@ export default class TitaniumShowHide extends LitElement {
   ];
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
       <style>
         :host([collapsed]) collapsed-box {
@@ -129,11 +121,10 @@ export default class TitaniumShowHide extends LitElement {
         </items-container>
       </collapsed-box>
       <slot name="button" @click=${() => (this.collapsed = !this.collapsed)} ?hidden=${!this.hasHiddenItems}>
-        <${this.filled ? literal`md-filled-button` : literal`md-outlined-button`} part="button">
+        <md-filled-button part="button">
           ${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'}
-        </${this.filled ? literal`md-filled-button` : literal`md-outlined-button`}>
+        </md-filled-button>
       </slot>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
index ca60f842f..07a117ec3 100644
--- a/packages/web/titanium/single-select-base/single-select-base.ts
+++ b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -1,9 +1,8 @@
-import { css, LitElement, PropertyValues } from 'lit';
+import { css, html, LitElement, PropertyValues } from 'lit';
 import { property, customElement, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import '@material/web/progress/circular-progress';
-import '@material/web/textfield/outlined-text-field';
 import '@material/web/textfield/filled-text-field';
 
 import '@material/web/iconbutton/icon-button';
@@ -14,14 +13,12 @@ import '@material/web/menu/menu-item';
 
 import { DOMEvent } from '../types/dom-event';
 import { CloseMenuEvent, MenuItem } from '@material/web/menu/menu';
-import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
+import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
 import { Menu } from '@material/web/menu/internal/menu';
 import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { Identifier } from '../types/identifier-interface';
 import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
 import { ThemePreference } from '../../leavitt/theme/theme-preference';
-import { html, literal } from 'lit/static-html.js';
-import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
 
 @customElement('titanium-single-select-base')
 export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePreference(LitElement) {
@@ -43,11 +40,6 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
    */
   @property({ type: String }) accessor label: string = 'Single select';
 
-  /**
-   *  Swaps out outlined text field for a filled text field.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'filled' }) accessor filled: boolean = false;
-
   /**
    *  Sets placeholder text value.
    */
@@ -156,7 +148,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   @property({ type: Boolean, reflect: true, attribute: 'shaped' }) accessor shaped: boolean = false;
 
   getTextField() {
-    return this.filled ? this.shadowRoot?.querySelector('md-filled-text-field') : this.shadowRoot?.querySelector('md-outlined-text-field');
+    return this.shadowRoot?.querySelector('md-filled-text-field');
   }
 
   async firstUpdated() {
@@ -337,9 +329,17 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
       :host {
         display: block;
         position: relative;
-      }
 
-      :host([large]) {
+        --md-filled-text-field-container-shape: 16px;
+        --md-filled-field-container-shape: 16px;
+        --md-menu-container-shape: 16px;
+
+        --md-filled-text-field-active-indicator-height: 0;
+        --md-filled-text-field-error-active-indicator-height: 0;
+        --md-filled-text-field-hover-active-indicator-height: 0;
+        --md-filled-text-field-focus-active-indicator-height: 0;
+        --md-filled-text-field-disabled-active-indicator-height: 0;
+      }
         --md-filled-text-field-input-text-size: 1.125rem;
         --md-filled-text-field-input-text-line-height: 1.75rem;
         --md-filled-text-field-label-text-size: 1.125rem;
@@ -352,8 +352,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         --md-filled-text-field-with-trailing-icon-trailing-space: 20px;
       }
 
-      md-filled-text-field,
-      md-outlined-text-field {
+      md-filled-text-field {
         width: 100%;
       }
 
@@ -370,29 +369,11 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         min-width: 300px;
       }
 
-      :host([filled]) {
-        --md-filled-text-field-container-shape: 16px;
-        --md-filled-field-container-shape: 16px;
-        --md-menu-container-shape: 16px;
-
-        --md-filled-text-field-active-indicator-height: 0;
-        --md-filled-text-field-error-active-indicator-height: 0;
-        --md-filled-text-field-hover-active-indicator-height: 0;
-        --md-filled-text-field-focus-active-indicator-height: 0;
-        --md-filled-text-field-disabled-active-indicator-height: 0;
-      }
-
-      :host([shaped]) {
-        --md-outlined-text-field-container-shape: 28px;
+      :host([large]) {
         --md-filled-text-field-container-shape: 28px;
       }
 
-      :host([shaped][menu-open][filled]) {
-        --md-outlined-text-field-container-shape-start-start: 28px;
-        --md-outlined-text-field-container-shape-start-end: 28px;
-        --md-outlined-text-field-container-shape-end-end: 0;
-        --md-outlined-text-field-container-shape-end-start: 0;
-
+      :host([shaped][menu-open]) {
         --md-filled-text-field-container-shape-start-start: 28px;
         --md-filled-text-field-container-shape-start-end: 28px;
         --md-filled-text-field-container-shape-end-end: 0;
@@ -402,7 +383,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         --md-menu-container-shape: 0 0 28px 28px;
       }
 
-      :host([shaped][menu-open][filled]) md-menu {
+      :host([shaped][menu-open]) md-menu {
         --md-menu-container-color: var(--md-sys-color-inverse-surface);
         color: var(--md-sys-color-inverse-on-surface);
 
@@ -412,7 +393,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         --md-menu-item-hover-state-layer-color: var(--md-sys-color-surface);
       }
 
-      :host([shaped][menu-open][filled]) md-filled-text-field {
+      :host([shaped][menu-open]) md-filled-text-field {
         --md-filled-text-field-container-color: var(--md-sys-color-inverse-surface);
         --md-filled-text-field-input-text-color: var(--md-sys-color-inverse-on-surface);
         --md-filled-text-field-hover-input-text-color: var(--md-sys-color-inverse-on-surface);
@@ -443,7 +424,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         color: var(--md-sys-color-on-surface);
       }
 
-      :host([shaped][filled]) [summary] {
+      :host([shaped]) [summary] {
         color: var(--md-sys-color-inverse-on-surface);
       }
 
@@ -499,9 +480,8 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   }
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
-      <${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}
+      <md-filled-text-field
         id="menu-anchor"
         aria-haspopup="true"
         aria-controls="menu"
@@ -536,7 +516,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
             }
           }
         }}
-        @input=${async (e: DOMEvent<MdOutlinedTextField | MdFilledTextField>) => this.#onInput(e.target.value)}
+        @input=${async (e: DOMEvent<MdFilledTextField>) => this.#onInput(e.target.value)}
         @focus=${() => {
           if (this.selected) {
             this.select();
@@ -552,7 +532,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         }}
       >
         ${this.selected ? this.renderSelectedLeadingInputSlot(this.selected) : this.renderLeadingInputSlot()} ${this.#renderTrailingInputSlot()}
-        </${this.filled ? literal`md-filled-text-field` : literal`md-outlined-text-field`}>
+      </md-filled-text-field>
       <md-menu
         part="menu"
         suggestions
@@ -592,6 +572,5 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
       </md-menu>
       ${this.renderTrailingSlot()}
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts b/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
index 575207a66..ce3e78683 100644
--- a/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
+++ b/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
@@ -5,7 +5,6 @@ import './image-preview-dialog';
 import '@material/web/dialog/dialog';
 import '@material/web/icon/icon';
 import '@material/web/button/text-button';
-import '@material/web/button/outlined-button';
 import '@material/web/button/filled-tonal-button';
 import '@material/web/chips/input-chip';
 
@@ -24,7 +23,7 @@ import { TitaniumChipMultiSelect } from '../../titanium/chip-multi-select/chip-m
 import { MdDialog } from '@material/web/dialog/dialog';
 import { getCdnInlineUrl } from '../helpers/get-cdn-Inline-url';
 import { p } from '../styles/p';
-import { literal, html } from 'lit/static-html.js';
+import { html } from 'lit';
 
 export type TitaniumSmartInputOptions = CropperOptions;
 
@@ -124,11 +123,6 @@ export class TitaniumSmartAttachmentInput extends LitElement {
    */
   @property({ type: Boolean, reflect: true, attribute: 'force-png' }) accessor forcePNGOutput: boolean;
 
-  /**
-   *  Swaps out outlined chip multi select for a filled chip multi select.
-   */
-  @property({ type: Boolean, attribute: 'filled' }) accessor filled: boolean = false;
-
   /**
    *  Image formats here are sent to the cropper
    */
@@ -326,12 +320,10 @@ export class TitaniumSmartAttachmentInput extends LitElement {
   ];
 
   render() {
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
       <titanium-chip-multi-select
         .supportingText=${this.supportingText}
         .required=${this.required}
-        ?filled=${this.filled}
         ?disabled=${this.disabled}
         @drop=${(e: DragEvent) => {
           if (this.disabled) {
@@ -358,7 +350,7 @@ export class TitaniumSmartAttachmentInput extends LitElement {
         .hasItems=${!!this.files.length}
       >
         <drop-scrim></drop-scrim>
-        <${this.filled ? literal`md-filled-tonal-button` : literal`md-outlined-button`}
+        <md-filled-tonal-button
           ?hidden=${!this.multiple && !!this.files.length}
           .disabled=${this.disabled}
           @click=${() => {
@@ -368,7 +360,7 @@ export class TitaniumSmartAttachmentInput extends LitElement {
             }
           }}
           >${this.addButtonLabel} <md-icon slot="icon">add</md-icon>
-        </${this.filled ? literal`md-filled-tonal-button` : literal`md-outlined-button`}>
+        </md-filled-tonal-button>
         ${repeat(
           this.files,
           (o) => o.file.name,
@@ -432,6 +424,5 @@ export class TitaniumSmartAttachmentInput extends LitElement {
         </div>
       </md-dialog>
     `;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }

From 5e3dd88a8cff13a5245011c95589e89f48fd6aac Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 12:31:15 -0600
Subject: [PATCH 04/14] docs: add CLAUDE.md files for agents and contributors.

Add repo-level monorepo guide and comprehensive @leavittsoftware/web component reference for consuming agents, and ship CLAUDE.md with the npm package.
---
 CLAUDE.md                 |  112 ++++
 packages/web/CLAUDE.md    | 1158 +++++++++++++++++++++++++++++++++++++
 packages/web/package.json |    1 +
 3 files changed, 1271 insertions(+)
 create mode 100644 CLAUDE.md
 create mode 100644 packages/web/CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 000000000..151b991ef
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,112 @@
+# CLAUDE.md
+
+## Project Overview
+
+**titanium-elements** is a monorepo that publishes [`@leavittsoftware/web`](packages/web) — Lit 3 + Material Web custom elements used across Leavitt Group front-end applications.
+
+- **`titanium-*`** — general-purpose UI components (drawers, data tables, inputs, snackbars, etc.)
+- **`leavitt-*`** — domain-specific components (company/person selects, file explorer, app shell, API helpers); many require authentication and an `ApiService` instance
+
+The package is published to npm and consumed via **deep imports** (no barrel `index.ts` exports).
+
+## Tech Stack
+
+- **Framework:** Lit 3 — web components with Shadow DOM
+- **UI base:** Material Web (`@material/web/*`)
+- **Language:** TypeScript (strict, decorators enabled)
+- **Shared types:** `@leavittsoftware/lg-core-typescript` for OData entity interfaces
+- **Monorepo:** npm workspaces + Lerna (independent versioning)
+- **Component docs:** Custom Elements Manifest → `packages/leavittbook/custom-elements.json`
+- **Peer dependency:** `lit >= 3.0.0`
+
+## Monorepo Structure
+
+```
+packages/
+  web/           # @leavittsoftware/web — all published elements (titanium/ + leavitt/)
+  leavittbook/   # Local component gallery and demos (not published)
+```
+
+Within `packages/web`:
+
+```
+titanium/   # General-purpose components, helpers, styles, events
+leavitt/    # Domain components, app shell, api-service, auth
+```
+
+## Key Scripts
+
+```bash
+npm start              # tsc watch + web-dev-server + CEM watch
+npm run build          # tsc + tests + CEM + leavittbook rollup
+npm run lint           # prettier + eslint + lit-analyzer + tsc
+npm run lint-fix       # auto-fix formatting and lint issues
+npm run cem            # regenerate custom-elements-manifest
+npm run lerna:publish  # build + conventional publish to npm
+```
+
+Run `npm run lint` after edits and fix issues in changed files before committing.
+
+## Development Workflow
+
+1. `npm i` then `npm start` — browse component demos in leavittbook
+2. **New component:** copy an existing folder under `packages/web`, add a leavittbook demo + route, add a tsconfig path
+3. **Conventional Commits** required (`feat:`, `fix:`, `chore:`, etc.)
+4. CEM output at `packages/leavittbook/custom-elements.json` helps verify APIs but is **not** shipped with `@leavittsoftware/web`
+
+## Import Convention
+
+Consumers register elements with side-effect imports:
+
+```ts
+import '@leavittsoftware/web/titanium/drawer/drawer.js';
+import { TitaniumDrawer } from '@leavittsoftware/web/titanium/drawer/drawer.js';
+import { h2, p } from '@leavittsoftware/web/titanium/styles/styles.js';
+```
+
+Paths mirror the source tree under `packages/web/`. Use `.js` extensions when importing from the published package.
+
+## Component Reference
+
+For per-component API (properties, methods, events, slots, CSS parts, and implementation notes), see [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md).
+
+After install, consuming projects find the same file at:
+
+```
+node_modules/@leavittsoftware/web/CLAUDE.md
+```
+
+## Keeping `packages/web/CLAUDE.md` Up to Date
+
+This is a **required** part of every component change. The web-level `CLAUDE.md` is the primary reference for agents in consuming projects; stale docs are worse than no docs.
+
+Update [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md) in the **same PR** whenever you:
+
+- Add, rename, or remove a component or public utility
+- Change a component's public API (properties, attributes, methods, events, slots, CSS parts)
+- Change cross-cutting behavior documented there (events, controllers, services, loading/snackbar patterns)
+- Add or revise implementation gotchas that affect consumers
+
+**Checklist per change:**
+
+- [ ] Component entry added/updated/removed (primary catalog or internal appendix as appropriate)
+- [ ] Cross-cutting section updated if the change affects shared patterns
+- [ ] Import path and tag name match the source file
+
+`npm run cem` can help verify property lists against source, but purpose, usage notes, and gotchas must be curated manually.
+
+## Contributing Conventions
+
+- Extend `LitElement`; register with `@customElement('kebab-case-name')` (must include a hyphen)
+- Use `@property() accessor` / `@state() accessor` (omit `accessor` on `@provide` / `@consume` context properties)
+- Side-effect imports for element registration; deep paths mirror source tree
+- Use `promiseTracking` for loading state (`LoadWhile` was removed)
+- Pair `ShowSnackbarEvent` with `titanium-snackbar-stack`; `PendingStateEvent` with loading indicators
+- Multi-word reflected attributes use **kebab-case** (`local-storage-key`, not `localStorageKey`)
+
+## What NOT to Do
+
+- Don't add barrel `index.ts` exports
+- Don't break semver without a conventional commit + `lerna publish`
+- Don't duplicate `@leavittsoftware/lg-core-typescript` entity types in components
+- Don't merge component API changes without updating `packages/web/CLAUDE.md`
diff --git a/packages/web/CLAUDE.md b/packages/web/CLAUDE.md
new file mode 100644
index 000000000..e911ce1b0
--- /dev/null
+++ b/packages/web/CLAUDE.md
@@ -0,0 +1,1158 @@
+# @leavittsoftware/web
+
+Component and utility reference for agents consuming this package. Read this before diving into source.
+
+## Package overview
+
+`@leavittsoftware/web` is a collection of Lit 3 web components built on [Material Web](https://github.com/material-components/material-web).
+
+- **`titanium-*`** — general-purpose UI (drawers, tables, inputs, snackbars, loading indicators)
+- **`leavitt-*`** — Leavitt Group domain components (selects, file explorer, app shell, email viewer); many require `ApiService` and authentication
+
+**Browser support:** Chrome, Safari, Firefox, Edge
+
+**Install:**
+
+```bash
+npm i @leavittsoftware/web
+```
+
+## Import and registration
+
+There is no barrel `index.ts` and no `exports` map. Always use deep file paths:
+
+```ts
+// Register element (side-effect — required before using the tag in HTML)
+import '@leavittsoftware/web/titanium/drawer/drawer.js';
+
+// Import class, types, or styles
+import { TitaniumDrawer } from '@leavittsoftware/web/titanium/drawer/drawer.js';
+import { h2, p } from '@leavittsoftware/web/titanium/styles/styles.js';
+```
+
+- Published builds use `.js` extensions in import paths
+- Material Web elements (`md-filled-button`, `md-dialog`, etc.) must be imported separately by the consumer
+- Paths mirror source: `titanium/<feature>/<file>` or `leavitt/<feature>/<file>`
+
+## Tag naming caveats
+
+Several elements omit the `titanium-` / `leavitt-` prefix:
+
+`profile-picture`, `profile-picture-menu`, `report-a-problem-dialog`, `provide-feedback-dialog`, `google-address-input`, `manual-address-dialog`, `crop-and-save-image-dialog`, `image-preview-dialog`, `file-list-item`, `folder-list-item`, `data-table-core-settings-sort-item`
+
+## Cross-cutting patterns
+
+### Loading — `promiseTracking`
+
+```ts
+import { promiseTracking } from '@leavittsoftware/web/titanium/helpers/promise-tracking';
+
+@promiseTracking('trackSavingPromise')
+@state() accessor isSaving = false;
+declare trackSavingPromise: (promise: Promise<unknown>) => Promise<void>;
+
+async #save() {
+  const post = api.postAsync('...', dto);
+  this.trackSavingPromise(post);
+  await post;
+}
+```
+
+Supports multiple independent flags per component (`isSaving` vs `isDeleting`). Re-entrant: flag stays true until all concurrent promises settle.
+
+### Ancestor loading — `PendingStateEvent`
+
+```ts
+import { PendingStateEvent } from '@leavittsoftware/web/titanium/types/pending-state-event';
+
+const promise = api.getAsync('...');
+this.dispatchEvent(new PendingStateEvent(promise));
+await promise;
+```
+
+Bubbles and is composed. Wire `.pendingStateElement=${this}` on `leavitt-app-main-content-container` or `titanium-circle-loading-indicator`. The circle indicator calls `stopPropagation()` so drawer events don't light sibling containers.
+
+Use **either** a local spinner **or** `PendingStateEvent` for the same promise — not both unless intentional (e.g. `isLoading` gates empty state while circle shows overlay).
+
+### Toasts — `ShowSnackbarEvent`
+
+```ts
+import { ShowSnackbarEvent } from '@leavittsoftware/web/titanium/snackbar/show-snackbar-event';
+
+this.dispatchEvent(new ShowSnackbarEvent('Saved successfully'));
+this.dispatchEvent(new ShowSnackbarEvent(httpError)); // HttpError object
+```
+
+Place `<titanium-snackbar-stack>` in the app shell; it listens for `show-snackbar` on `document` or a custom `.eventListenerTarget`.
+
+### URL filters — `FilterController`
+
+```ts
+import { FilterController } from '@leavittsoftware/web/titanium/data-table/filter-controller';
+
+filterController = new FilterController('my-page-route');
+// Register Filter instances; syncs with query string; getActiveFilterOdata() for OData $filter
+```
+
+The constructor `path` should match the page's route path.
+
+### Site search — `TitaniumSiteSearchTextFieldController`
+
+```ts
+import { TitaniumSiteSearchTextFieldController } from '@leavittsoftware/web/titanium/site-search-text-field-controller/site-search-text-field-controller';
+
+searchController = new TitaniumSiteSearchTextFieldController(this, siteSearchTextFieldContext, {
+  placeholder: 'Search...',
+  onSearch: () => this.#reload(),
+});
+```
+
+Page host must expose `isActive: boolean`. Read `this.searchController.searchTerm` when fetching. Toggle `this.searchController.disabled` when search requires a prerequisite (e.g. company selected).
+
+### OData HTTP — `ApiService`
+
+Required by `leavitt-*-select`, `leavitt-file-explorer`, email viewers. Pass a configured singleton:
+
+```ts
+import ApiService from '@leavittsoftware/web/leavitt/api-service/api-service';
+
+const result = await apiService.getAsync<Partial<Person>>('People/?$top=25&$count=true');
+const items = result.toList();
+const total = result.odataCount;
+```
+
+### Typography styles
+
+Always import shared text styles before custom font sizing:
+
+```ts
+import { h2, h5, p } from '@leavittsoftware/web/titanium/styles/styles.js';
+
+static styles = [h2, h5, p, css`...`];
+```
+
+Exports: `h1`–`h5` (aliases `heading1`–`heading5`), `p`/`paragraph`, `a`/`link`, `dataRow`, `ellipsis`, `niceBadgeStyles` (from `titanium/styles/nice-badge`).
+
+### Status pills in data tables
+
+`titanium-data-table-core` injects `data-table-content-styles`. In column `render` functions:
+
+```html
+<span indicator>Neutral</span>
+<span indicator green>Active</span>
+<span indicator red>Inactive</span>
+```
+
+Only green / red / neutral-gray — no orange/warning tier.
+
+### Multi-word HTML attributes
+
+Use kebab-case for reflected attributes: `local-storage-key="my-key"`, not `localStorageKey="my-key"`. Use `.localStorageKey=${value}` only for dynamic property binding.
+
+---
+
+## Data tables
+
+Use `titanium-data-table-core` + `titanium-data-table-action-bar` + `titanium-page-control` together for list pages.
+
+Define columns via `TitaniumDataTableCoreMetaData<T>`:
+
+```ts
+tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
+  uniqueKey: (item) => String(item.Id),
+  itemLinkUrl: (item) => `/items/${item.Id}`,
+  itemMetaData: [
+    { key: 'name', friendlyName: 'Name', render: (item) => html`${item.Name}`, getSortExpression: () => 'Name' },
+  ],
+  reorderConfig: { sortPropertyKey: 'SortOrder', reorderItemDisplayKey: 'Name' },
+};
+```
+
+- Sort/column prefs persist in `localStorage` under `local-storage-key`
+- `friendlyName` values: sentence case
+- Reorder: listen `@reorder-save-request`, call `e.detail.resolve()` on success or `e.detail.reject(error)` on failure — the reorder dialog shows errors via its own snackbar; don't snackbar in the save handler
+- On refetch: don't clear rows (layout jank); use `trackLoadingPromise` / `disabled` on the table
+- Dispatches `change-route` (composed) when row has `itemLinkUrl`; `items-reordered` when reorder dialog applies
+
+## Inheritance bases
+
+| Base | Path | Used by |
+|------|------|---------|
+| `TitaniumSingleSelectBase` | `titanium/single-select-base/single-select-base` | All `leavitt-*-select`, `titanium-icon-picker`, `google-address-input` |
+| `google-address-input` | `titanium/address-input/google-address-input` | `titanium-address-input` |
+| `ThemePreference` mixin | `leavitt/theme/theme-preference` | `leavitt-app-logo`, `leavitt-error-page`, `leavitt-service-worker-notifier` |
+
+---
+
+# Components
+
+## App shell
+
+### `leavitt-app-main-content-container`
+
+**Purpose:** Main scrollable content area with loading overlay; adapts layout when main menu is in drawer mode.
+
+**Import:** `import '@leavittsoftware/web/leavitt/app/app-main-content-container.js'`
+
+**Source:** `leavitt/app/app-main-content-container.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `main-menu-position` | `string` | From `mainMenuPositionContext`; `'drawer'` changes height/border-radius |
+| Property | `.pendingStateElement` | `Element \| null` | Host that dispatches `PendingStateEvent` for the circle loader |
+
+**Methods:** —
+
+**Events:** Listens for `pending-state` on `pendingStateElement`
+
+**Slots:** default
+
+**CSS parts:** `loading-indicator`, `scroll-container`
+
+**Usage notes / gotchas:**
+- Height is `100dvh`-based; drawer mode removes right margin and border radius
+- When kicking off async work in `updated()`, `await this.appMainContentContainer?.updateComplete` first so the loader can appear
+
+**Pairs with:** `titanium-circle-loading-indicator`, `mainMenuPositionContext`
+
+---
+
+### `leavitt-app-navigation-header`
+
+**Purpose:** Sticky app header with up to 5-level breadcrumb trail.
+
+**Import:** `import '@leavittsoftware/web/leavitt/app/app-navigation-header.js'`
+
+**Source:** `leavitt/app/app-navigation-header.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `sticky-top` | `boolean` | Reflected |
+| Property | `scrollable-parent` | `Element \| null` | Auto-detected if unset |
+| Property | `level1Text` … `level5Text` | `string \| null` | Breadcrumb labels |
+| Property | `level1Href` … `level5Href` | `string \| null` | Breadcrumb links |
+
+**Methods:** —
+
+**Events:** —
+
+**Slots:** `trailing`, `footer`
+
+**CSS parts:** `main`, `trailing`, `footer`
+
+**Usage notes / gotchas:**
+- Border appears when scrolled + `sticky-top`
+- Top-level nav labels should match page header text (level1 = top nav, level3 = sub-nav)
+
+---
+
+### `leavitt-app-navigation-footer`
+
+**Purpose:** Sticky bottom bar with leading/default/trailing action areas.
+
+**Import:** `import '@leavittsoftware/web/leavitt/app/app-navigation-footer.js'`
+
+**Source:** `leavitt/app/app-navigation-footer.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `max-width` | `string` | Default `'640px'` |
+| Property | `scrollable-parent` | `Element \| null` | |
+
+**Methods:** `isOverflown(element: Element): boolean`
+
+**Events:** —
+
+**Slots:** `leading`, default, `trailing`
+
+**CSS parts:** `main`, `leading`, `trailing`
+
+**Usage notes / gotchas:** Shows top border when scroll parent overflows
+
+---
+
+### `leavitt-app-logo`
+
+**Purpose:** App name + Leavitt Group mark with hover animation; theme-aware CDN mark.
+
+**Import:** `import '@leavittsoftware/web/leavitt/app/app-logo.js'`
+
+**Source:** `leavitt/app/app-logo.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `href` | `string` | Default `'/'` |
+| Property | `title` | `string` | |
+| Attribute | `app-name` | `string \| null` | Title case; acronyms keep casing |
+
+**Methods / events / slots / parts:** —
+
+**Usage notes / gotchas:** Extends `ThemePreference` mixin; mark URL switches for dark theme
+
+---
+
+### `leavitt-app-width-limiter`
+
+**Purpose:** Centers content with configurable max width.
+
+**Import:** `import '@leavittsoftware/web/leavitt/app/app-width-limiter.js'`
+
+**Source:** `leavitt/app/app-width-limiter.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `max-width` | `string` | Default `'640px'` |
+
+**Slots:** default
+
+**Usage notes / gotchas:** Parent must be `display: grid` or `display: flex` for `justify-self: center` to work (Firefox)
+
+---
+
+## Layout and navigation
+
+### `titanium-drawer`
+
+**Purpose:** Fly-out / inline drawer based on native `<dialog>`.
+
+**Import:** `import '@leavittsoftware/web/titanium/drawer/drawer.js'`
+
+**Source:** `titanium/drawer/drawer.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `mode` | `inline` \| `flyover` | |
+| Attribute | `open` | `boolean` | Read-only; reflected from `isOpen` |
+| Attribute | `direction` | `ltr` \| `rtl` | Animation direction |
+| Attribute | `fixed` | `boolean` | Content position when closed (with inline) |
+| Attribute | `always-show-content` | `boolean` | **Deprecated** — use `mode` |
+| Attribute | `keep-open-when-going-to-flyover` | `boolean` | Preserve open state on mode switch |
+
+**Methods:** `open()`, `close()`, `toggle()`, `closeQuick()`
+
+**Events:** `open-change`; redispatches native `close`, `toggle` from dialog
+
+**Slots:** default, `header`, `footer`
+
+**CSS parts:** `dialog`, `header`, `main`, `footer`
+
+**CSS custom properties:** `--md-sys-color-outline-variant`, `--md-sys-color-on-background`
+
+**Usage notes / gotchas:**
+- Swipe-left closes; backdrop click closes; `popstate` closes dialog
+- Flyover sets `html { overflow: hidden }`
+- Switching `mode` from inline→flyover: use `keep-open-when-going-to-flyover` to stay open
+
+---
+
+### `titanium-toolbar`
+
+**Purpose:** Fixed top Material toolbar with scroll-based elevation.
+
+**Import:** `import '@leavittsoftware/web/titanium/toolbar/toolbar.js'`
+
+**Source:** `titanium/toolbar/toolbar.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `shadow` | `boolean` | Auto-set on document scroll |
+
+**Slots:** default (style slotted `[main-title]`)
+
+**Usage notes / gotchas:** Listens on `document` scroll, not a local container
+
+---
+
+### `titanium-show-hide`
+
+**Purpose:** Collapsible overflow content with optional fade and custom toggle button.
+
+**Import:** `import '@leavittsoftware/web/titanium/show-hide/show-hide.js'`
+
+**Source:** `titanium/show-hide/show-hide.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `collapse-height` | `number` | Default `120` |
+| Attribute | `collapsed` | `boolean` | |
+| Attribute | `disable-fade` | `boolean` | |
+| Property | `hiddenItemCount` | `number` | Read-only count of clipped items |
+
+**Events:** `collapsed-changed`, `hidden-item-count-changed`
+
+**Slots:** default (direct children), `button`
+
+**CSS parts:** `items-container`, `button`
+
+**Usage notes / gotchas:** ResizeObserver counts clipped children; default button hidden when nothing is hidden
+
+---
+
+### `titanium-collapsible-container`
+
+**Purpose:** Expand/collapse panel with header slot.
+
+**Import:** `import '@leavittsoftware/web/titanium/collapsible-container/collapsible-container.js'`
+
+**Source:** `titanium/collapsible-container/collapsible-container.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Attribute | `opened`, `disabled` | `boolean` | Reflected |
+
+**Slots:** `header`, `content`
+
+**CSS parts:** `button`, `main`
+
+**Usage notes / gotchas:** Toggles `opened` on header button click
+
+---
+
+## Data tables
+
+### `titanium-data-table-core`
+
+**Purpose:** Metadata-driven table with sort, column picker, CSV export, selection, and optional reorder.
+
+**Import:** `import '@leavittsoftware/web/titanium/data-table/data-table-core.js'`
+
+**Source:** `titanium/data-table/data-table-core.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `items` | `T[]` | Current rows |
+| Property | `tableMetaData` | `TitaniumDataTableCoreMetaData<T> \| null` | Column config |
+| Property | `selected` | `T[]` | Selected rows |
+| Attribute | `selection-mode` | `single` \| `multi` \| `none` | Default `none` |
+| Attribute | `local-storage-key` | `string` | Default `'dtc-pref'`; **kebab-case attribute** |
+| Attribute | `sticky-header`, `disabled` | `boolean` | |
+| Property | `sort` | getter/setter | Persists to `{key}-user-sort` in localStorage |
+| Property | `userSettings` | getter/setter | Column visibility prefs |
+| Property | `supplementalItemStyles` | `CSSResult \| CSSResultGroup \| null` | Per-row styles |
+| State | `isLoading` | `boolean` | Via `promiseTracking` |
+
+**Methods:** `selectAll()`, `deselectAll()`, `resetSort()`, `trackLoadingPromise(promise)`
+
+**Events:**
+- `selected-changed` (composed)
+- `sort-changed`
+- `items-reordered` — `CustomEvent<T[]>`
+- `change-route` — `CustomEvent<{ path: string }>` (composed)
+- `reorder-save-request` — delegate with `resolve()` / `reject(error)`
+
+**Slots:** `settings-menu-items`
+
+**CSS parts:** `table`
+
+**Exported types:** `TitaniumDataTableCoreMetaData`, `TitaniumDataTableCoreItemMetaData`, `TitaniumDataTableCoreSortItem`, `generateDefaultSortFromMetaData()`
+
+**Usage notes / gotchas:**
+- Clears selection when `items` reference changes
+- Don't clear rows on refetch (scrollbar jank); disable controls via `disabled` / `isLoading`
+- Status columns: use `<span indicator green>` / `red` (see cross-cutting patterns)
+- `friendlyName` on column metadata: sentence case
+
+---
+
+### `titanium-data-table-action-bar`
+
+**Purpose:** Filter/add button bar that swaps to bulk selection actions when rows are selected.
+
+**Import:** `import '@leavittsoftware/web/titanium/data-table/data-table-action-bar.js'`
+
+**Source:** `titanium/data-table/data-table-action-bar.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `selected` | `Partial<T>[]` | |
+
+**Slots:** `add-button`, `filters`, `selected-actions`
+
+**CSS parts:** `main`, `add-button-container`, `filters-container`, `selected-action-veil`, `selected-action-title`, `action-container`
+
+**Pairs with:** `titanium-data-table-core`
+
+---
+
+### `titanium-page-control`
+
+**Purpose:** Page size selector + prev/next paging control.
+
+**Import:** `import '@leavittsoftware/web/titanium/data-table/page-control.js'`
+
+**Source:** `titanium/data-table/page-control.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `pageSizes` | `number[]` | Default `[10,15,20,50]` |
+| Attribute | `default-page-size` | `number` | Default `10` |
+| Property | `page` | `number` | Zero-based |
+| Property | `count` | `number` | Total items |
+| Attribute | `local-storage-key` | `string` | **Required** for `take` persistence |
+| Property | `label` | `string` | Default `'Items per page'` |
+| Property | `disabled` | `boolean` | |
+| Property | `take` | getter/setter | Persists to localStorage; resets `page` to 0 |
+
+**Events:** `action` (composed) — fired on page or take change
+
+**Usage notes / gotchas:**
+- Unknown `take` values are added to `pageSizes`
+- Next disabled when `(page+1)*take >= count`
+- Use `local-storage-key` attribute (kebab-case), not `localStorageKey`
+
+---
+
+## Form inputs
+
+### `titanium-date-input`
+
+**Purpose:** Cross-browser date / datetime-local input (form-associated).
+
+**Import:** `import '@leavittsoftware/web/titanium/date-input/date-input.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `value`, `label`, `placeholder`, `supporting-text` | `string` | |
+| Attribute | `type` | `date` \| `datetime-local` | |
+| Attribute | `min`, `max`, `maxLength` | `string` | |
+| Property | `required`, `disabled`, `error` | `boolean` | |
+| Property | `prefix-text`, `suffix-text` | `string` | |
+| Attribute | `has-leading-icon`, `has-trailing-icon`, `no-asterisk` | `boolean` | |
+
+**Methods:** `checkValidity()`, `reportValidity()`, `select()`, `setCustomValidity()`, `reset()`
+
+**Events:** Redispatches `change`, `blur`, `select`, `invalid`
+
+**Slots:** `leading-icon`, `trailing-icon` (default trailing: calendar picker)
+
+**Usage notes / gotchas:** `formAssociated`; after user input, attribute `value` no longer syncs until `reset()`; Safari/iOS/Firefox-specific styling
+
+---
+
+### `titanium-date-range-selector`
+
+**Purpose:** Preset + custom date range picker with popover UI.
+
+**Import:** `import '@leavittsoftware/web/titanium/date-range-selector/date-range-selector.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `range` | `string` | Default `'custom'`; presets like `allTime`, `last7Days`, etc. |
+| Property | `startDate`, `endDate` | `string` | ISO date strings |
+| Property | `label`, `supporting-text`, `type` | `string` | `type`: `date` \| `datetime-local` |
+| Property | `customDateRanges` | `Map<string, DateRangeOption> \| null` | Override presets |
+| Property | `disabled`, `positioning` | | `positioning`: `popover` \| `fixed` |
+
+**Methods:** `reset()` — sets `range` to `'allTime'`
+
+**Events:** `change` on Set (note: `DateRangeChangedEvent` class exists but component fires `change`)
+
+**CSS parts:** `field`
+
+**Usage notes / gotchas:** Firefox lacks `popover` → falls back to `fixed`; datetime custom requires 16-char values to enable Set
+
+---
+
+### `titanium-filled-duration-input`
+
+**Purpose:** Natural-language duration input (parses strings like "3 hours and 30 minutes").
+
+**Import:** `import '@leavittsoftware/web/titanium/duration-input/filled-duration-input.js'`
+
+**Source:** `titanium/duration-input/filled-duration-input.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `duration` | `dayjs.Duration \| null` | Canonical value |
+| Property | `label`, `placeholder` | `string` | |
+
+**Events:** `duration-change` — read `event.target.duration`
+
+**Usage notes / gotchas:** `value` is human-readable string; use `duration` property for logic
+
+---
+
+### `titanium-filled-search-input`
+
+**Purpose:** Full-width filled search field with clear button.
+
+**Import:** `import '@leavittsoftware/web/titanium/search-input/filled-search-input.js'`
+
+**Source:** `titanium/search-input/filled-search-input.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `value`, `placeholder` | `string` | |
+| Property | `disabled`, `autocomplete`, `spellcheck` | | |
+
+**Events:** `input` (composed); redispatches `blur`, `focus`, `change`, `invalid`
+
+---
+
+### `titanium-filled-youtube-input`
+
+**Purpose:** YouTube video key input; strips full URLs to 11-char key; shows thumbnail preview.
+
+**Import:** `import '@leavittsoftware/web/titanium/youtube-input/filled-youtube-input.js'`
+
+**Source:** `titanium/youtube-input/filled-youtube-input.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `value`, `label` | `string` | |
+| Property | `pattern` | `string` | Default `'^.{11}$'` |
+
+**Methods:** `reset()`
+
+**Usage notes / gotchas:** Shows thumbnail in trailing slot when key length is 11
+
+---
+
+### `titanium-address-input`
+
+**Purpose:** Google Places search with manual address entry fallback.
+
+**Import:** `import '@leavittsoftware/web/titanium/address-input/address-input.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `googleMapsApiKey` | `string` | **Required** (inherited) |
+| Attribute | `show-street2`, `show-county` | `boolean` | |
+| Property | `allow-international` | `boolean` | |
+| + | All `TitaniumSingleSelectBase` props | | |
+
+**Events:** `selected` (JSDoc says `location-changed` but base fires `selected`)
+
+**Usage notes / gotchas:** Requires Google Maps API key; opens `manual-address-dialog` for manual entry; US street validation when not international
+
+---
+
+### `google-address-input`
+
+**Purpose:** Google Places autocomplete base (extended by `titanium-address-input`).
+
+**Import:** `import '@leavittsoftware/web/titanium/address-input/google-address-input.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `googleMapsApiKey` | `string` | **Required** |
+| Property | `pathToSelectedText` | `string` | Default `'primaryDisplayText'` |
+| Property | `allow-international` | `boolean` | |
+
+**Events:** `selected`; dispatches `ShowSnackbarEvent` on API errors
+
+---
+
+### `titanium-chip`
+
+**Purpose:** Custom chip (link, filter, or input-chip with remove).
+
+**Import:** `import '@leavittsoftware/web/titanium/chip/chip.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `label` | `string` | |
+| Property | `selected`, `disabled`, `non-interactive` | `boolean` | |
+| Property | `href`, `download`, `target` | `string` | Link chip |
+| Attribute | `input-chip` | `boolean` | Enables remove button |
+
+**Events:** `remove` (when `input-chip`)
+
+**Slots:** `icon`, `label`, `trailing`
+
+**CSS parts:** `button`, `ripple`, `focus-ring`
+
+**Usage notes / gotchas:** Use `filled` attribute in consuming apps for design consistency
+
+---
+
+### `titanium-chip-multi-select`
+
+**Purpose:** Filled validator wrapper for slotted chips + add button.
+
+**Import:** `import '@leavittsoftware/web/titanium/chip-multi-select/chip-multi-select.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `label`, `noItemsText`, `supportingText`, `errorText` | `string` | |
+| Property | `required`, `hasItems`, `error`, `resizable`, `disabled` | `boolean` | |
+
+**Methods:** `checkValidity()`, `reportValidity()`, `reset()`
+
+**Slots:** default — intended: `md-filled-tonal-button` + `md-input-chip` / chips
+
+**Usage notes / gotchas:** `disabled` on host does not auto-disable slotted chips/buttons
+
+---
+
+### `titanium-single-select-base`
+
+**Purpose:** Generic autocomplete single-select base (extended by domain selects).
+
+**Import:** `import '@leavittsoftware/web/titanium/single-select-base/single-select-base.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `label`, `placeholder`, `selected` | | `selected`: `T \| null` |
+| Property | `required`, `disabled`, `error`, `errorText` | `boolean` / `string` | |
+| Property | `prefixText`, `suffixText`, `supportingText` | `string` | |
+| Attribute | `no-asterisk`, `has-leading-icon`, `has-trailing-icon` | `boolean` | |
+| Property | `pathToSelectedText` | `string` | Key on selected object for display |
+| Property | `positioning`, `match-input-width`, `large`, `shaped` | | Menu positioning |
+| Attribute | `disable-menu-open-on-focus` | `boolean` | |
+| Attribute | `menu-open` | `boolean` | Reflected |
+| State | `isLoading` | `boolean` | |
+
+**Methods:** `reset()`, `softReset()`, `select()`, `focus()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `trackLoadingPromise()`
+
+**Events:** `selected`; redispatches menu `opening`/`opened`/`closing`/`closed`
+
+**Slots:** `leading-icon`, `trailing-icon`
+
+**CSS parts:** `menu`
+
+**Usage notes / gotchas:**
+- `required` patches `md-filled-text-field.checkValidity`
+- Custom validity when typed but not selected
+- `positioning='popover'` falls back to `'fixed'` in Firefox
+
+---
+
+### `titanium-icon-picker`
+
+**Purpose:** Material Symbols icon search and select.
+
+**Import:** `import '@leavittsoftware/web/titanium/icon-picker/icon-picker.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `favorites` | `string[]` | |
+| Property | `whitelist` | `string` | Comma-separated icon names |
+| Property | `pathToSelectedText` | `string` | Default `'icon'` |
+| + | `TitaniumSingleSelectBase` props | | |
+
+**Events:** `selected`
+
+---
+
+### `titanium-smart-attachment-input`
+
+**Purpose:** File upload with chips, image crop, preview, optional delete confirmation.
+
+**Import:** `import '@leavittsoftware/web/titanium/smart-attachment-input/smart-attachment-input.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `accept`, `multiple`, `required`, `disabled` | | |
+| Property | `confirmDelete`, `confirmDeleteHeader`, `confirmDeleteText` | | |
+| Property | `addButtonLabel`, `label`, `supportingText`, `noItemsText` | `string` | |
+| Property | `options` | `CropperOptions` | Cropper.js config |
+| Attribute | `force-png` | `boolean` | |
+
+**Methods:** `getFiles()`, `setFiles(...)`, `setFilesFromDatabaseAttachments(...)`, `checkValidity()`, `reportValidity()`, `hasChanges()`, `reset()`, `handleNewFile(files)`
+
+**Events:** `change`
+
+**Usage notes / gotchas:** Uses internal `titanium-chip-multi-select`; revokes blob URLs on `reset()`
+
+---
+
+### `titanium-filled-input-validator`
+
+**Purpose:** Filled MdField wrapper with custom `evaluator` validation function.
+
+**Import:** `import '@leavittsoftware/web/titanium/input-validator/filled-input-validator.js'`
+
+**Source:** `titanium/input-validator/filled-input-validator.ts`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `evaluator` | `() => boolean` | Custom validity check |
+| Property | `populated` | `boolean` | |
+| + | MdField props | `label`, `error`, `error-text`, `supporting-text`, `required` | |
+
+**Methods:** `checkValidity()`, `reportValidity()`, `reset()`
+
+**Slots:** default (wraps slotted input)
+
+---
+
+## Dialogs and confirmations
+
+### `titanium-confirmation-dialog`
+
+**Purpose:** Imperative promise-based confirm/cancel dialog.
+
+**Import:** `import '@leavittsoftware/web/titanium/confirmation-dialog/confirmation-dialog.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `headline`, `text` | `string` | |
+| Property | `confirmActionText`, `cancelActionText` | `string` | |
+| Property | `disableConfirmationAction`, `disableCancelAction` | `boolean` | |
+
+**Methods:** `open(headline, text)` → `Promise<'cancel' | 'confirmed'>`
+
+**Slots:** default (content area)
+
+**CSS parts:** `content-container`
+
+---
+
+### `provide-feedback-dialog`
+
+**Purpose:** Modal to submit user feedback to Issue Tracking API.
+
+**Import:** `import '@leavittsoftware/web/leavitt/user-feedback/provide-feedback-dialog.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.userManager` | `AuthZeroLgUserManager` | **Required** |
+
+**Methods:** `show()`, `reset()`
+
+**Events:** `PendingStateEvent`, `ShowSnackbarEvent`
+
+---
+
+### `report-a-problem-dialog`
+
+**Purpose:** Bug report modal with file attachments.
+
+**Import:** `import '@leavittsoftware/web/leavitt/user-feedback/report-a-problem-dialog.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.userManager` | `AuthZeroLgUserManager` | **Required** |
+
+**Methods:** `show()`, `reset()`
+
+**Uses:** `titanium-smart-attachment-input`, `titanium-snackbar-stack`
+
+---
+
+## Feedback, loading, and error pages
+
+### `titanium-snackbar-stack`
+
+**Purpose:** Stackable snackbar host; listens for `ShowSnackbarEvent`.
+
+**Import:** `import '@leavittsoftware/web/titanium/snackbar/snackbar-stack.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.eventListenerTarget` | `HTMLElement \| Document` | Default `document` |
+
+**Methods:** `open(message, options?)`, `dismissAll()`
+
+**Events listened:** `show-snackbar`
+
+**Usage notes / gotchas:** `display: contents`; place in app shell or dialog (dialogs doing I/O need their own stack)
+
+---
+
+### `titanium-circle-loading-indicator`
+
+**Purpose:** Scoped circular loading overlay on a pending-state element.
+
+**Import:** `import '@leavittsoftware/web/titanium/circle-loading-indicator/circle-loading-indicator.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.pendingStateElement` | `Element \| null` | |
+
+**Events listened:** `pending-state`
+
+**Usage notes / gotchas:**
+- Sets parent `inert` while open; 75ms open delay, 400ms min visible
+- **Must** dispatch `PendingStateEvent` for work — `isLoading` alone does not drive the overlay
+- Calls `stopPropagation()` on the event
+
+---
+
+### `leavitt-error-page`
+
+**Purpose:** Branded error page with particle star background; theme-aware.
+
+**Import:** `import '@leavittsoftware/web/leavitt/error-page/error-page.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `heading` | `string \| TemplateResult` | Default `'Hmm...'` |
+| Property | `message` | `string \| TemplateResult` | |
+
+**Usage notes / gotchas:** Extends `ThemePreference`; uses `@tsparticles/preset-stars`
+
+---
+
+## Domain selects
+
+All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiService` (`ApiService` instance).
+
+### `leavitt-company-select`
+
+**Import:** `import '@leavittsoftware/web/leavitt/company-select/company-select.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.apiService` | `ApiService` | **Required** |
+| Property | `apiControllerName` | `string` | Default `'Companies'` |
+| Property | `companies` | `Partial<Company>[]` | Preloaded list |
+| Property | `odataParts` | `string[]` | Default `orderby=Name,select=...` |
+| Property | `disableAutoLoad` | `boolean` | Skip auto-fetch on `firstUpdated` |
+
+**Methods:** `reloadCompanies()`, `reset()` (inherited)
+
+**Usage notes / gotchas:** Local Fuse.js search over preloaded companies; company mark icons in menu items
+
+---
+
+### `leavitt-person-select`
+
+**Import:** `import '@leavittsoftware/web/leavitt/person-select/person-select.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.apiService` | `ApiService` | **Required** |
+| Property | `apiControllerName` | `string` | |
+| Property | `odataParts` | `string[]` | |
+| Property | `searchType` | `local` \| `remote` | Remote uses OData `contains` on `FullName` |
+| Property | `enablePeoplePreloading` | `boolean` | |
+| Property | `people` | `Partial<Person>[]` | |
+
+---
+
+### `leavitt-person-company-select`
+
+**Import:** `import '@leavittsoftware/web/leavitt/person-company-select/person-company-select.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.apiService` | `ApiService` | **Required** |
+| Property | `peopleApiControllerName` | `string` | |
+| Property | `companyApiControllerName` | `string` | |
+
+**Usage notes / gotchas:** Combined people + companies in one autocomplete
+
+---
+
+### `leavitt-person-group-select`
+
+**Import:** `import '@leavittsoftware/web/leavitt/person-group-select/person-group-select.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.apiService` | `ApiService` | **Required** |
+| Property | `peopleApiControllerName` | `string` | |
+| Property | `groupApiControllerName` | `string` | |
+
+**Usage notes / gotchas:** Searches people and people groups
+
+---
+
+## File explorer
+
+### `leavitt-file-explorer`
+
+**Purpose:** Full file/folder browser with grid/list views, upload, and admin actions.
+
+**Import:** `import '@leavittsoftware/web/leavitt/file-explorer/file-explorer.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.apiService` | `ApiService` | **Required** |
+| Attribute | `file-explorer-id` | `number` | |
+| Attribute | `folder-id` | `number \| null` | |
+| Attribute | `local-storage-display-key` | `string` | Persists grid/list preference |
+| Attribute | `prevent-navigation-up` | `boolean` | |
+| Property | `display` | `grid` \| `list` | Persisted |
+| Property | `state` | `no-permission` \| `files` \| `no-files` \| `error` | |
+
+**Methods:** `reload()`
+
+**Events:** `folder-added`, `folder-deleted`, `file-added`, `file-deleted`, `PendingStateEvent`, `ShowSnackbarEvent`
+
+**Usage notes / gotchas:**
+- Subscribes to `fileExplorerEvents` bus for live modal sync
+- Uses `titanium-confirmation-dialog` for deletes
+- Internal modals: `leavitt-file-modal`, `leavitt-folder-modal`, `leavitt-add-folder-modal`
+
+---
+
+## Email history
+
+### `leavitt-email-history-viewer-filled`
+
+**Purpose:** App-shell integrated email log viewer using `titanium-data-table-core`.
+
+**Import:** `import '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `isActive` | `boolean` | |
+| Property | `.apiService` | `ApiService` | **Required** |
+| Property | `path`, `apiControllerName` | `string` | |
+| Property | `.siteSearchTextFieldContext` | Lit context | Shared search field |
+| Property | `toolbarSearchTerm` | `string` | **Deprecated** |
+
+**Uses:** `titanium-page-control`, filter dialogs, `leavitt-view-sent-email-dialog`
+
+---
+
+## Profile and user feedback
+
+### `profile-picture`
+
+**Purpose:** CDN-hosted profile image with optional link and test-user indicator.
+
+**Import:** `import '@leavittsoftware/web/leavitt/profile-picture/profile-picture.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `fileName` | `string` | CDN filename |
+| Property | `shape` | `circle` \| `square` | |
+| Property | `size` | `number` | Pixels |
+| Property | `show-ring`, `show-test-user-indicator`, `useIntrinsicImageSize` | `boolean` | |
+| Property | `profile-picture-link-person-id` | `number` | Directory link |
+
+**CSS parts:** `test-user-indicator`
+
+---
+
+### `profile-picture-menu`
+
+**Purpose:** User avatar + account menu popover.
+
+**Import:** `import '@leavittsoftware/web/leavitt/profile-picture/profile-picture-menu.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `.userManager` | `AuthZeroLgUserManager` | |
+| Property | `size`, `profilePictureFileName`, `personId`, `email`, `company`, `name` | | |
+| Property | `positioning` | `popover` \| `fixed` | |
+
+**Slots:** `content`
+
+**Usage notes / gotchas:** Auto-syncs from `userManager.onIdentityUpdated`; opens auth if no `personId`
+
+---
+
+### `titanium-profile-picture-stack`
+
+**Purpose:** Overlapping profile picture stack with overflow count.
+
+**Import:** `import '@leavittsoftware/web/titanium/profile-picture-stack/profile-picture-stack.js'`
+
+| Kind | Name | Type / values | Notes |
+|------|------|---------------|-------|
+| Property | `people` | `Partial<Person>[]` | |
+| Property | `max` | `number` | Max visible |
+| Property | `size`, `overlap` | `number` | |
+| Property | `enable-directory-href`, `show-full-name`, `auto-resize` | `boolean` | |
+
+**CSS parts:** `additional-users`, `additional-users-paragraph`, `name`, `profile-picture`
+
+**Uses:** `profile-picture` internally
+
+---
+
+## Service worker notifier
+
+### `leavitt-service-worker-notifier`
+
+**Purpose:** Themed full-screen popover prompting reload after SW update.
+
+**Import:** `import '@leavittsoftware/web/leavitt/service-worker-notifier/service-worker-notifier.js'`
+
+**Usage notes / gotchas:** Extends `ThemePreference`; auto-registers SW update listeners; click anywhere reloads
+
+---
+
+# Shared utilities
+
+## Events
+
+| Symbol | Import path | Event name | Payload / usage |
+|--------|-------------|------------|-----------------|
+| `ShowSnackbarEvent` | `titanium/snackbar/show-snackbar-event` | `show-snackbar` | `message: string \| Partial<HttpError>`, optional `SnackbarOptions` |
+| `PendingStateEvent` | `titanium/types/pending-state-event` | `pending-state` | `{ promise: Promise<unknown> }`; bubbles, composed |
+| `DateRangeChangedEvent` | `titanium/date-range-selector/date-range-change-event` | `date-range-changed` | Class exists; `titanium-date-range-selector` fires `change` instead |
+| `ThemePreferenceEvent` | `leavitt/theme/theme-preference-event` | theme preference changes | Subscribe for dark/light switches |
+| `DataTableItemsReorderedEvent` | `titanium/data-table/data-table-core` | `titanium-data-table-items-reorder` | Exported from data-table-core; core dispatches `items-reordered` on apply |
+
+## Services
+
+### `ApiService`
+
+**Import:** `leavitt/api-service/api-service`
+
+| Method | Notes |
+|--------|-------|
+| `getAsync<T>(urlPath)` | Returns `ODataResponse<T>` |
+| `postAsync<T>(urlPath, body?)` | JSON POST |
+| `putAsync`, `patchAsync`, `deleteAsync` | Standard verbs |
+| `uploadFile(urlPath, file, onprogress, options?)` | XHR upload with progress |
+| `aggregateResponses(promises)` | Batch multiple async ops |
+| `addHeader(key, value)` | e.g. `X-LGAppName` |
+
+**Response helpers:** `ODataResponse.toList()`, `.odataCount`
+
+**Related:** `HttpError`, `BearerTokenProvider`, `objectToFormData`, `BlobResponse`
+
+### `AuthZeroLgUserManager`
+
+**Import:** `leavitt/user-manager/auth-zero-lg-user-manager`
+
+Auth0 integration for `profile-picture-menu`, feedback dialogs. Provides `identity`, `authenticate()`, `onIdentityUpdated`.
+
+## Controllers and buses
+
+| Symbol | Import path | Purpose |
+|--------|-------------|---------|
+| `FilterController` | `titanium/data-table/filter-controller` | URL query-string filter state for list pages |
+| `TitaniumSiteSearchTextFieldController` | `titanium/site-search-text-field-controller/site-search-text-field-controller` | App-level shared search field via Lit context |
+| `EventBus` | `titanium/event-bus/event-bus` | Typed pub/sub (`subscribe`, `dispatch`, `unsubscribe`) |
+| `fileExplorerEvents` | `leavitt/file-explorer/events/file-explorer-events` | File explorer modal sync bus |
+
+## Contexts
+
+| Context | Import path |
+|---------|-------------|
+| `mainMenuPositionContext` | `leavitt/app/contexts/main-menu-position-context` |
+| `TitaniumTextFieldSearchContext` | `titanium/site-search-text-field-controller/site-search-text-field-controller` |
+
+## Mixins and decorators
+
+| Symbol | Import path | Purpose |
+|--------|-------------|---------|
+| `promiseTracking` | `titanium/helpers/promise-tracking` | `@promiseTracking('methodName')` decorator for loading flags |
+| `PendingStateCatcher` | `titanium/helpers/pending-state-catcher` | Mixin to catch pending-state on host |
+| `ThemePreference` | `leavitt/theme/theme-preference` | Dark/light theme mixin |
+
+## Helpers (selected)
+
+| Symbol | Import path | Purpose |
+|--------|-------------|---------|
+| `Debouncer` | `titanium/helpers/debouncer` | Debounced async calls |
+| `delay` | `titanium/helpers/delay` | Promise delay |
+| `getCdnDownloadUrl`, `getCdnInlineUrl` | `titanium/helpers/get-cdn-download-url`, `get-cdn-Inline-url` | CDN attachment URLs |
+| `getCompanyMarkUrl`, `getCompanyLogoUrl` | `titanium/helpers/get-company-mark-url`, `get-company-logo-url` | Company branding URLs |
+| `formatAddress`, address utils | `titanium/helpers/address/*` | Address formatting |
+| Phone formatters | `titanium/helpers/phone-numbers/*` | Phone number display |
+| `convertArrayToCsv`, `startCsvDownload` | `titanium/helpers/csv/*` | CSV export |
+| `getSearchTokens` | `titanium/helpers/get-search-token` | OData search token parsing |
+| `escapeTerm` | `titanium/helpers/escape-term` | OData string escaping |
+| `groupBy`, `join`, `middleEllipsis` | `titanium/helpers/*` | General utilities |
+| `notNull`, `notUndefined`, `notNullOrUndefined` | `titanium/helpers/*` | Type guards |
+| `installMediaQueryWatcher` | `titanium/helpers/install-media-query-watcher` | Responsive layout callback |
+| `findScrollableParent` | `titanium/helpers/find-scrollable-parent` | Scroll container detection |
+| `isDevelopment` | `titanium/helpers/is-development` | Dev environment detection |
+
+## Hacks
+
+| Module | Import path | When to use |
+|--------|-------------|-------------|
+| `dialogCloseNavigationHack` | `titanium/hacks/dialog-navigation-hack` | Close dialog on SPA navigation without breaking history |
+| `dialogZindexHack` | `titanium/hacks/dialog-zindex-hack` | Stacking context issues with nested dialogs |
+| `dialogOverflowHacks` | `titanium/hacks/dialog-overflow-hacks` | Body scroll lock with dialogs |
+| `reportValidityIfError` | `titanium/hacks/report-validity-if-error` | Form validation helper |
diff --git a/packages/web/package.json b/packages/web/package.json
index c8fb77e8d..3c2bc22ec 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -4,6 +4,7 @@
   "license": "Apache-2.0",
   "description": "",
   "files": [
+    "CLAUDE.md",
     "**/*.js",
     "**/*.js.map",
     "**/*.d.ts",

From 87532555c246e7d7b74633fefe1cddbc4336a9be Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 12:48:24 -0600
Subject: [PATCH 05/14] chore: update copyright year to 2026 in LICENSE.md

---
 LICENSE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LICENSE.md b/LICENSE.md
index 7b37c8fc9..6829b6067 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright 2025 Leavitt Software Solutions
+Copyright 2026 Leavitt Software Solutions
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

From 527e04b42cad6b8f7488b81c830ca8c4f7b8a53e Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 14:04:21 -0600
Subject: [PATCH 06/14] fix(leavittbook): make auth-gated demos reactive
 without forcing login

Add AuthIdentityController so demos and story-header re-render when identity
updates, while keeping authentication user-initiated via the story-header button.
---
 .../src/demos/leavitt-company-select-demo.ts  | 23 +++++++---
 .../leavitt-email-history-viewer-demo.ts      | 44 +++++++++++++------
 .../src/demos/leavitt-file-explorer-demo.ts   | 23 ++++++----
 .../leavitt-person-company-select-demo.ts     | 37 +++++++++++-----
 .../demos/leavitt-person-group-select-demo.ts | 39 ++++++++++------
 .../src/demos/leavitt-person-select-demo.ts   | 27 ++++++++----
 .../src/services/auth-identity-controller.ts  | 29 ++++++++++++
 .../leavittbook/src/shared/story-header.ts    | 14 ++++--
 8 files changed, 173 insertions(+), 63 deletions(-)
 create mode 100644 packages/leavittbook/src/services/auth-identity-controller.ts

diff --git a/packages/leavittbook/src/demos/leavitt-company-select-demo.ts b/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
index fbe96d06b..cca2a2424 100644
--- a/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-company-select-demo.ts
@@ -7,7 +7,7 @@ import '@api-viewer/docs';
 import '@material/web/button/filled-tonal-button';
 import '@leavittsoftware/web/leavitt/company-select/company-select';
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { LeavittCompanySelect } from '@leavittsoftware/web/leavitt/company-select/company-select';
 import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event';
@@ -17,12 +17,15 @@ import { ThemePreference } from '@leavittsoftware/web/leavitt/theme/theme-prefer
 
 import api3UserService from '../services/api3-user-service';
 import StoryStyles from '../styles/story-styles';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-company-select-demo')
 export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
   @state() private accessor disableMenuOpenOnFocus: boolean = false;
   @query('leavitt-company-select[methods-demo]') protected accessor methodsSelect!: LeavittCompanySelect;
 
+  #auth = new AuthIdentityController(this);
+
   static styles = [StoryStyles];
 
   render() {
@@ -32,8 +35,10 @@ export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
           <leavitt-app-navigation-header level1Text="Leavitt company select" level1Href="/leavitt-company-select" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt Company Select" className="LeavittCompanySelect"></story-header>
+            <story-header name="Leavitt Company Select" className="LeavittCompanySelect" requires-auth></story-header>
 
+            ${this.#auth.identity
+              ? html`
             <div>
               <h1>Filled</h1>
               <leavitt-company-select
@@ -94,10 +99,12 @@ export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
                 <leavitt-company-select
                   disableAutoLoad
                   label="disabled pre-selected"
-                  .selected=${{
-                    Id: 57,
-                    Name: 'Leavitt Group Enterprises',
-                  } as never}
+                  .selected=${
+                    {
+                      Id: 57,
+                      Name: 'Leavitt Group Enterprises',
+                    } as never
+                  }
                   disabled
                   .apiService=${api3UserService}
                 ></leavitt-company-select>
@@ -136,6 +143,10 @@ export class LeavittCompanySelectDemo extends ThemePreference(LitElement) {
               ></leavitt-company-select>
             </div>
 
+            </div>
+              `
+              : nothing}
+
             <api-docs src="./custom-elements.json" selected="leavitt-company-select"></api-docs>
           </leavitt-app-width-limiter>
         </main>
diff --git a/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts b/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
index 26be9483e..3666b3092 100644
--- a/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-email-history-viewer-demo.ts
@@ -6,16 +6,30 @@ import '@leavittsoftware/web/leavitt/app/app-width-limiter';
 import '@api-viewer/docs';
 import '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled';
 
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
 import { ThemePreference } from '@leavittsoftware/web/leavitt/theme/theme-preference';
+import { TitaniumSiteSearchTextFieldController } from '@leavittsoftware/web/titanium/site-search-text-field-controller/site-search-text-field-controller';
+import LeavittEmailHistoryViewerFilled from '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled';
 
 import StoryStyles from '../styles/story-styles';
 import { siteSearchTextFieldContext } from '../contexts/site-search-text-field-context';
 import api3UserService from '../services/api3-user-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-email-history-viewer-demo')
 export class LeavittEmailHistoryViewerDemo extends ThemePreference(LitElement) {
+  /** Always active while mounted — leavittbook removes inactive demos from the DOM. */
+  isActive = true;
+
+  @query('leavitt-email-history-viewer-filled') private accessor viewer!: LeavittEmailHistoryViewerFilled;
+
+  #auth = new AuthIdentityController(this);
+
+  get searchController(): TitaniumSiteSearchTextFieldController | null {
+    return this.viewer?.searchController ?? null;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     api3UserService.addHeader('X-LGAppName', 'EducationAdminV2');
@@ -45,18 +59,22 @@ export class LeavittEmailHistoryViewerDemo extends ThemePreference(LitElement) {
           </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt Email History Viewer Filled" className="LeavittEmailHistoryViewerFilled"></story-header>
+            <story-header name="Leavitt Email History Viewer Filled" className="LeavittEmailHistoryViewerFilled" requires-auth></story-header>
 
-            <div>
-              <div row>
-                <leavitt-email-history-viewer-filled
-                  isActive
-                  .siteSearchTextFieldContext=${siteSearchTextFieldContext}
-                  .apiService=${api3UserService}
-                  .path=${'/leavitt-email-history-viewer'}
-                ></leavitt-email-history-viewer-filled>
-              </div>
-            </div>
+            ${this.#auth.identity
+              ? html`
+                  <div>
+                    <div row>
+                      <leavitt-email-history-viewer-filled
+                        isActive
+                        .siteSearchTextFieldContext=${siteSearchTextFieldContext}
+                        .apiService=${api3UserService}
+                        .path=${'/leavitt-email-history-viewer'}
+                      ></leavitt-email-history-viewer-filled>
+                    </div>
+                  </div>
+                `
+              : nothing}
 
             <api-docs src="./custom-elements.json" selected="leavitt-email-history-viewer-filled"></api-docs>
           </leavitt-app-width-limiter>
diff --git a/packages/leavittbook/src/demos/leavitt-file-explorer-demo.ts b/packages/leavittbook/src/demos/leavitt-file-explorer-demo.ts
index fa37ba311..c19f7b60e 100644
--- a/packages/leavittbook/src/demos/leavitt-file-explorer-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-file-explorer-demo.ts
@@ -7,14 +7,17 @@ import '@api-viewer/docs';
 import '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
 import '@leavittsoftware/web/leavitt/file-explorer/file-explorer';
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import StoryStyles from '../styles/story-styles';
 import api3UserService from '../services/api3-user-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-file-explorer-demo')
 export class LeavittFileExplorerDemo extends LitElement {
+  #auth = new AuthIdentityController(this);
+
   connectedCallback() {
     super.connectedCallback();
     api3UserService.addHeader('X-LGAppName', 'FileExplorer');
@@ -36,13 +39,17 @@ export class LeavittFileExplorerDemo extends LitElement {
           <leavitt-app-navigation-header level1Text="Leavitt file explorer" level1Href="/leavitt-file-explorer" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt File Explorer" className="LeavittFileExplorer"></story-header>
-
-            <div>
-              <h1>File Explorer</h1>
-              <p>File explorer component with API integration</p>
-              <leavitt-file-explorer file-explorer-id="1" .apiService=${api3UserService}></leavitt-file-explorer>
-            </div>
+            <story-header name="Leavitt File Explorer" className="LeavittFileExplorer" requires-auth></story-header>
+
+            ${this.#auth.identity
+              ? html`
+                  <div>
+                    <h1>File Explorer</h1>
+                    <p>File explorer component with API integration</p>
+                    <leavitt-file-explorer file-explorer-id="1" .apiService=${api3UserService}></leavitt-file-explorer>
+                  </div>
+                `
+              : nothing}
 
             <api-docs src="./custom-elements.json" selected="leavitt-file-explorer"></api-docs>
           </leavitt-app-width-limiter>
diff --git a/packages/leavittbook/src/demos/leavitt-person-company-select-demo.ts b/packages/leavittbook/src/demos/leavitt-person-company-select-demo.ts
index b16f125f6..4d90b75aa 100644
--- a/packages/leavittbook/src/demos/leavitt-person-company-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-person-company-select-demo.ts
@@ -8,17 +8,20 @@ import '@material/web/button/filled-tonal-button';
 import '@leavittsoftware/web/leavitt/person-company-select/person-company-select';
 import '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { LeavittPersonCompanySelect } from '@leavittsoftware/web/leavitt/person-company-select/person-company-select';
 
 import StoryStyles from '../styles/story-styles';
 import api3UserService from '../services/api3-user-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-person-company-select-demo')
 export class LeavittPersonCompanySelectDemo extends LitElement {
   @query('leavitt-person-company-select[methods-demo]') protected accessor methodsSelect!: LeavittPersonCompanySelect;
 
+  #auth = new AuthIdentityController(this);
+
   static styles = [StoryStyles];
 
   render() {
@@ -29,8 +32,10 @@ export class LeavittPersonCompanySelectDemo extends LitElement {
           </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt Person Company Select" className="LeavittPersonCompanySelect"></story-header>
+            <story-header name="Leavitt Person Company Select" className="LeavittPersonCompanySelect" requires-auth></story-header>
 
+            ${this.#auth.identity
+              ? html`
             <div>
               <h1>Methods</h1>
               <item-row>
@@ -50,20 +55,24 @@ export class LeavittPersonCompanySelectDemo extends LitElement {
                 <leavitt-person-company-select label="shaped" shaped .apiService=${api3UserService}></leavitt-person-company-select>
                 <leavitt-person-company-select
                   label="pre-selected"
-                  .selected=${{
-                    Name: 'Leavitt Group Enterprises',
-                    type: 'Company',
-                  } as never}
+                  .selected=${
+                    {
+                      Name: 'Leavitt Group Enterprises',
+                      type: 'Company',
+                    } as never
+                  }
                   .apiService=${api3UserService}
                 ></leavitt-person-company-select>
                 <leavitt-person-company-select
                   label="disabled pre-selected"
-                  .selected=${{
-                    FullName: 'Aaron Drabeck',
-                    Id: 11056,
-                    type: 'Person',
-                    ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
-                  } as never}
+                  .selected=${
+                    {
+                      FullName: 'Aaron Drabeck',
+                      Id: 11056,
+                      type: 'Person',
+                      ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
+                    } as never
+                  }
                   disabled
                   .apiService=${api3UserService}
                 ></leavitt-person-company-select>
@@ -81,6 +90,10 @@ export class LeavittPersonCompanySelectDemo extends LitElement {
               </item-row>
             </div>
 
+            </div>
+              `
+              : nothing}
+
             <api-docs src="./custom-elements.json" selected="leavitt-person-company-select"></api-docs>
           </leavitt-app-width-limiter>
         </main>
diff --git a/packages/leavittbook/src/demos/leavitt-person-group-select-demo.ts b/packages/leavittbook/src/demos/leavitt-person-group-select-demo.ts
index 2cecaffa7..f8c18bba8 100644
--- a/packages/leavittbook/src/demos/leavitt-person-group-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-person-group-select-demo.ts
@@ -7,17 +7,20 @@ import '@api-viewer/docs';
 import '@material/web/button/filled-tonal-button';
 import '@leavittsoftware/web/leavitt/person-group-select/person-group-select';
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { LeavittPersonGroupSelect } from '@leavittsoftware/web/leavitt/person-group-select/person-group-select';
 
 import StoryStyles from '../styles/story-styles';
 import api3UserService from '../services/api3-user-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-person-group-select-demo')
 export class LeavittPersonGroupSelectDemo extends LitElement {
   @query('leavitt-person-group-select[methods-demo]') protected accessor methodsSelect!: LeavittPersonGroupSelect;
 
+  #auth = new AuthIdentityController(this);
+
   static styles = [StoryStyles];
 
   render() {
@@ -28,8 +31,10 @@ export class LeavittPersonGroupSelectDemo extends LitElement {
           </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt Person/Group Select" className="LeavittPersonGroupSelect"></story-header>
+            <story-header name="Leavitt Person/Group Select" className="LeavittPersonGroupSelect" requires-auth></story-header>
 
+            ${this.#auth.identity
+              ? html`
             <div>
               <h1>Default</h1>
               <item-row>
@@ -37,21 +42,25 @@ export class LeavittPersonGroupSelectDemo extends LitElement {
                 <leavitt-person-group-select label="shaped" shaped .apiService=${api3UserService}></leavitt-person-group-select>
                 <leavitt-person-group-select
                   label="pre-selected"
-                  .selected=${{
-                    Name: 'LGE Programmer Basic Access',
-                    Id: 22,
-                    type: 'PeopleGroup',
-                  } as never}
+                  .selected=${
+                    {
+                      Name: 'LGE Programmer Basic Access',
+                      Id: 22,
+                      type: 'PeopleGroup',
+                    } as never
+                  }
                   .apiService=${api3UserService}
                 ></leavitt-person-group-select>
                 <leavitt-person-group-select
                   label="disabled pre-selected"
-                  .selected=${{
-                    Name: 'Aaron Drabeck',
-                    ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
-                    Id: 11056,
-                    type: 'Person',
-                  } as never}
+                  .selected=${
+                    {
+                      Name: 'Aaron Drabeck',
+                      ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
+                      Id: 11056,
+                      type: 'Person',
+                    } as never
+                  }
                   disabled
                   .apiService=${api3UserService}
                 ></leavitt-person-group-select>
@@ -77,6 +86,10 @@ export class LeavittPersonGroupSelectDemo extends LitElement {
               </section>
             </div>
 
+            </div>
+              `
+              : nothing}
+
             <api-docs src="./custom-elements.json" selected="leavitt-person-group-select"></api-docs>
           </leavitt-app-width-limiter>
         </main>
diff --git a/packages/leavittbook/src/demos/leavitt-person-select-demo.ts b/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
index 44777b6b3..97c6a0922 100644
--- a/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
+++ b/packages/leavittbook/src/demos/leavitt-person-select-demo.ts
@@ -8,18 +8,21 @@ import '@material/web/button/filled-tonal-button';
 import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
 import '@leavittsoftware/web/leavitt/person-select/person-select';
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { LeavittPersonSelect } from '@leavittsoftware/web/leavitt/person-select/person-select';
 import { Person } from '@leavittsoftware/lg-core-typescript';
 
 import StoryStyles from '../styles/story-styles';
 import api3UserService from '../services/api3-user-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 @customElement('leavitt-person-select-demo')
 export class LeavittPersonSelectDemo extends LitElement {
   @query('leavitt-person-select[methods-demo]') protected accessor methodsSelect!: LeavittPersonSelect;
 
+  #auth = new AuthIdentityController(this);
+
   static styles = [StoryStyles];
 
   render() {
@@ -29,8 +32,10 @@ export class LeavittPersonSelectDemo extends LitElement {
           <leavitt-app-navigation-header level1Text="Leavitt person select" level1Href="/leavitt-person-select" sticky-top> </leavitt-app-navigation-header>
 
           <leavitt-app-width-limiter max-width="1000px">
-            <story-header name="Leavitt Person Select" className="LeavittPersonSelect"></story-header>
+            <story-header name="Leavitt Person Select" className="LeavittPersonSelect" requires-auth></story-header>
 
+            ${this.#auth.identity
+              ? html`
             <div>
               <h1>Methods</h1>
               <leavitt-person-select required methods-demo .apiService=${api3UserService}></leavitt-person-select>
@@ -120,12 +125,14 @@ export class LeavittPersonSelectDemo extends LitElement {
 
                 <leavitt-person-select
                   label="prefilled"
-                  .selected=${{
-                    Id: 11056,
-                    FullName: 'Aaron D.',
-                    CompanyName: 'Leavitt Software Solutions',
-                    ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
-                  } as never}
+                  .selected=${
+                    {
+                      Id: 11056,
+                      FullName: 'Aaron D.',
+                      CompanyName: 'Leavitt Software Solutions',
+                      ProfilePictureCdnFileName: 'zP6DJ9lM6HmkTAaku8ZIzQQdUBHYrX5pCCANvFxtpnagBhJPp7CGXOl-16xe',
+                    } as never
+                  }
                   .apiService=${api3UserService}
                 ></leavitt-person-select>
 
@@ -138,6 +145,10 @@ export class LeavittPersonSelectDemo extends LitElement {
               </item-row>
             </div>
 
+            </div>
+              `
+              : nothing}
+
             <api-docs src="./custom-elements.json" selected="leavitt-person-select"></api-docs>
           </leavitt-app-width-limiter>
         </main>
diff --git a/packages/leavittbook/src/services/auth-identity-controller.ts b/packages/leavittbook/src/services/auth-identity-controller.ts
new file mode 100644
index 000000000..213e54c0f
--- /dev/null
+++ b/packages/leavittbook/src/services/auth-identity-controller.ts
@@ -0,0 +1,29 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { AuthZeroLgIdenitity } from '@leavittsoftware/web/leavitt/user-manager/auth-zero-lg-identity';
+
+import UserManager from './user-manager-service';
+
+export class AuthIdentityController implements ReactiveController {
+  #host: ReactiveControllerHost;
+
+  identity: AuthZeroLgIdenitity | null = null;
+
+  #onIdentityUpdated = (identity: AuthZeroLgIdenitity | null) => {
+    this.identity = identity;
+    this.#host.requestUpdate();
+  };
+
+  constructor(host: ReactiveControllerHost) {
+    this.#host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    this.identity = UserManager.identity;
+    UserManager.onIdentityUpdated(this.#onIdentityUpdated);
+  }
+
+  hostDisconnected() {
+    UserManager.removeOnIdentityUpdated(this.#onIdentityUpdated);
+  }
+}
diff --git a/packages/leavittbook/src/shared/story-header.ts b/packages/leavittbook/src/shared/story-header.ts
index ecc626458..30184d155 100644
--- a/packages/leavittbook/src/shared/story-header.ts
+++ b/packages/leavittbook/src/shared/story-header.ts
@@ -2,8 +2,11 @@ import { css, html, LitElement, nothing, PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { p } from '@leavittsoftware/web/titanium/styles/styles';
 
-import '@material/web/chips/suggestion-chip';
+import '@leavittsoftware/web/titanium/chip/chip';
+import '@material/web/button/filled-tonal-button';
 import { heroStyles } from '../styles/hero-styles';
+import UserManager from '../services/user-manager-service';
+import { AuthIdentityController } from '../services/auth-identity-controller';
 
 type CustomElementDeclaration = {
   name?: string;
@@ -40,15 +43,17 @@ export default class StoryHeader extends LitElement {
   @property({ type: String }) accessor name: string;
   @property({ type: String }) accessor className: string;
   @property({ type: String }) accessor deprecatedReason: string;
+  @property({ type: Boolean, attribute: 'requires-auth' }) accessor requiresAuth: boolean = false;
   @state() private accessor customElementDeclaration: CustomElementDeclaration | null = null;
 
   @state() private accessor customElementsJSON: { modules: [{ declarations: Array<CustomElementDeclaration> }] } | null = null;
 
+  #auth = new AuthIdentityController(this);
+
   async updated(changedProps: PropertyValues<this>) {
     if (changedProps.has('className') && this.className) {
       this.customElementsJSON = await getCustomElementsJSON();
       this.customElementDeclaration = this.customElementsJSON?.modules.flatMap((o) => o.declarations).find((o) => o.name === this.className) ?? null;
-      console.log(this.customElementDeclaration);
     }
   }
 
@@ -92,7 +97,10 @@ export default class StoryHeader extends LitElement {
         ${this.customElementDeclaration?.tagName ? html`<p code>${'<'}${this.customElementDeclaration?.tagName}${'>'}</p>` : ''}
       </info-container>
       <chip-container>
-        ${this.deprecatedReason ? html`<md-suggestion-chip disabled label="Deprecated (${this.deprecatedReason})"></md-suggestion-chip>` : nothing}
+        ${this.requiresAuth && !this.#auth.identity
+          ? html`<md-filled-tonal-button @click=${() => void UserManager.authenticate()}>Authentication is required for this demo</md-filled-tonal-button>`
+          : nothing}
+        ${this.deprecatedReason ? html`<titanium-chip non-interactive label="Deprecated (${this.deprecatedReason})"></titanium-chip>` : nothing}
       </chip-container>
     `;
   }

From b48c02507cae4547a32ed610832e4d49a5ce0397 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 14:05:30 -0600
Subject: [PATCH 07/14] docs(leavittbook): add gallery guide and polish shell
 layout

Document leavittbook conventions in CLAUDE.md and README, add root
EditorConfig, mount demos without isActive, mark auth routes with passkey
icons, and sync hero and app shell styles with skeleton.
---
 .editorconfig                                 |  29 ++++
 CLAUDE.md                                     |   2 +-
 README.md                                     |  13 +-
 packages/leavittbook/CLAUDE.md                |  87 ++++++++++
 .../src/demos/titanium-address-input-demo.ts  |   2 +-
 .../src/demos/titanium-chip-demo.ts           |   3 +-
 .../titanium-profile-picture-stack-demo.ts    |   4 +-
 packages/leavittbook/src/my-app.ts            | 160 +++++++-----------
 .../leavittbook/src/styles/hero-styles.ts     |  17 +-
 .../leavittbook/src/styles/my-app-styles.ts   |  37 +++-
 10 files changed, 236 insertions(+), 118 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 packages/leavittbook/CLAUDE.md

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..c8c2d2aaf
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/CLAUDE.md b/CLAUDE.md
index 151b991ef..8b13b531b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -24,7 +24,7 @@ The package is published to npm and consumed via **deep imports** (no barrel `in
 ```
 packages/
   web/           # @leavittsoftware/web — all published elements (titanium/ + leavitt/)
-  leavittbook/   # Local component gallery and demos (not published)
+  leavittbook/   # Local component gallery and demos (not published); see packages/leavittbook/CLAUDE.md
 ```
 
 Within `packages/web`:
diff --git a/README.md b/README.md
index fe90bd331..d046d56d4 100644
--- a/README.md
+++ b/README.md
@@ -41,11 +41,14 @@ Types enable JavaScript developers to use highly-productive development tools an
 
 ### Create the leavittbook story
 
-- [ ] Copy an existing demo/rename it/write your demo code
-- [ ] Update my-app inside of leavittbook
-  - Add a route
-  - Add a menu item
-  - Add your component tag
+See [`packages/leavittbook/CLAUDE.md`](packages/leavittbook/CLAUDE.md) for gallery conventions.
+
+- [ ] Copy an existing leavittbook demo (e.g. [`packages/leavittbook/src/demos/leavitt-error-page-demo.ts`](packages/leavittbook/src/demos/leavitt-error-page-demo.ts)) and rename it
+- [ ] Update [`packages/leavittbook/src/my-app.ts`](packages/leavittbook/src/my-app.ts)
+  - Add a `page('/route', …)` handler
+  - Add a drawer `<md-list-item href="…">` (label must match `level1Text` on the demo header)
+  - Add a conditional render tag in `<main-content>`
+- [ ] Add `requires-auth` on `<story-header>` if the demo calls api3
 
 ### Important
 
diff --git a/packages/leavittbook/CLAUDE.md b/packages/leavittbook/CLAUDE.md
new file mode 100644
index 000000000..21e833493
--- /dev/null
+++ b/packages/leavittbook/CLAUDE.md
@@ -0,0 +1,87 @@
+# Leavittbook
+
+Local component gallery for `@leavittsoftware/web`. Not published to npm.
+
+## Purpose
+
+- Live demos of `titanium-*` and `leavitt-*` elements
+- CEM-generated API docs via `api-viewer-element` and [`custom-elements.json`](../custom-elements.json)
+- [`story-header`](src/shared/story-header.ts) for class/tag metadata
+
+Component APIs live in [`packages/web/CLAUDE.md`](../web/CLAUDE.md).
+
+## Adding a demo
+
+1. Copy an existing demo (e.g. [`src/demos/leavitt-error-page-demo.ts`](src/demos/leavitt-error-page-demo.ts)) → `src/demos/<name>-demo.ts`
+2. Register in [`src/my-app.ts`](src/my-app.ts):
+   - `page('/route', …)` lazy import
+   - `<md-list-item href="…">` in the drawer (`level1Text` must match the nav label)
+   - `${this.page === 'route-key' ? html`<…-demo></…-demo>` : nothing}` in `<main-content>`
+3. Run `npm start` (CEM watch keeps `custom-elements.json` current)
+
+## Page layout
+
+```
+leavitt-app-main-content-container (.pendingStateElement=${this})
+  main
+    leavitt-app-navigation-header (level1Text matches drawer label, level1Href="/route")
+    leavitt-app-width-limiter
+      story-header
+      …variants…
+      api-docs (src="./custom-elements.json" selected="element-tag")
+```
+
+- Add `leavitt-app-navigation-footer` **only** when it contains real actions (Save/Cancel, bulk actions, pagination). Do not add empty footers.
+- Import shared typography from `@leavittsoftware/web/titanium/styles/styles` before local font rules.
+
+## Routing (intentional divergence from skeleton)
+
+Leavittbook **removes** inactive demo pages from the DOM on navigation (`${this.page === 'x' ? html`…` : nothing}`). Production apps scaffolded from skeleton keep pages mounted with `?hidden` + `.isActive`. The gallery resets demo state on each visit.
+
+Use `connectedCallback` / `disconnectedCallback` for per-visit setup and teardown.
+
+## Auth
+
+The gallery is public. Demos that call **api3** require Leavitt login:
+
+| Demo                  | Route                            |
+| --------------------- | -------------------------------- |
+| Company select        | `/leavitt-company-select`        |
+| Person select         | `/leavitt-person-select`         |
+| Person company select | `/leavitt-person-company-select` |
+| Person group select   | `/leavitt-person-group-select`   |
+| File explorer         | `/leavitt-file-explorer`         |
+| Email history viewer  | `/leavitt-email-history-viewer`  |
+
+Drawer links for these demos show a trailing `passkey` icon.
+
+Pattern:
+
+- Gate demo content with `UserManager.identity` inline in `render()` — `${UserManager.identity ? html\`…\` : nothing}` (do not cache in demo state)
+- `requires-auth` on `<story-header>` — shows an **Authentication is required for this demo** filled tonal button when not authenticated; calls `UserManager.authenticate()` (redirect handles login)
+
+No Auth0 redirect until the user clicks that button. Shell uses `UserManager.initialize()` only (profile menu, feedback dialogs). No whole-app Auth0 gate.
+
+## Toolbar search
+
+After each route change, `my-app` sets `showSearch` from the active page’s `searchController` (see skeleton pattern). Demos that need the shared toolbar search expose `searchController` (usually via `TitaniumSiteSearchTextFieldController`).
+
+## Demo styling conventions
+
+- Pair `background` / accent tokens with matching `on-*` foreground tokens
+- Use `labelStyles` for checkbox/radio/switch labels when present
+- Minimum 13px font-size in component-local CSS
+- `@property()` / `@state()` use `accessor` (Lit 3)
+- `promiseTracking` + `PendingStateEvent` for async work; `ShowSnackbarEvent` for errors
+
+## Scaffolding sync (manual)
+
+When drift-checking against [skeleton.leavitt.com](https://github.com/LeavittSoftware/skeleton.leavitt.com) `develop`:
+
+| Skeleton                                                                                                                        | Leavittbook                                                 |
+| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| `theme.css`, `theme-custom.css`                                                                                                 | `packages/leavittbook/`                                     |
+| `src/styles/my-app-styles.ts`, `form-styles.ts`, `hero-styles.ts`, `input-styles.ts`, `label-styles.ts`, `nice-badge-styles.ts` | `packages/leavittbook/src/styles/` (keep `story-styles.ts`) |
+| `.editorconfig`, `.vscode/settings.json`                                                                                        | monorepo root                                               |
+
+Do **not** copy skeleton’s `my-app.ts` routing model wholesale — see routing section above.
diff --git a/packages/leavittbook/src/demos/titanium-address-input-demo.ts b/packages/leavittbook/src/demos/titanium-address-input-demo.ts
index 98f900b36..787970a0c 100644
--- a/packages/leavittbook/src/demos/titanium-address-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-address-input-demo.ts
@@ -27,7 +27,7 @@ export class TitaniumAddressInputDemo extends LitElement {
   @query('titanium-address-input[demo-a]') protected accessor titaniumAddressInputDemoA!: TitaniumAddressInput;
   @query('titanium-address-input[demo-a-filled]') protected accessor titaniumAddressInputDemoAFilled!: TitaniumAddressInput;
 
-  @state() accessor allowInternational: boolean = false;
+  @state() protected accessor allowInternational: boolean = false;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/demos/titanium-chip-demo.ts b/packages/leavittbook/src/demos/titanium-chip-demo.ts
index 5988db640..b1fa6211a 100644
--- a/packages/leavittbook/src/demos/titanium-chip-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-chip-demo.ts
@@ -90,8 +90,7 @@ export class TitaniumChipDemo extends LitElement {
 
               <titanium-chip href="https://google.com" target="_blank" download="google.xls" label="Href demo"> </titanium-chip>
 
-              <titanium-chip label="Custom color" style="--titanium-chip-filled-background-color: bisque; --titanium-chip-filled-color: black">
-              </titanium-chip>
+              <titanium-chip label="Custom color" style="--titanium-chip-filled-background-color: bisque; --titanium-chip-filled-color: black"> </titanium-chip>
             </chip-container>
             <api-docs src="./custom-elements.json" selected="titanium-chip"></api-docs>
           </leavitt-app-width-limiter>
diff --git a/packages/leavittbook/src/demos/titanium-profile-picture-stack-demo.ts b/packages/leavittbook/src/demos/titanium-profile-picture-stack-demo.ts
index d13f9d54b..9d4e08cf8 100644
--- a/packages/leavittbook/src/demos/titanium-profile-picture-stack-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-profile-picture-stack-demo.ts
@@ -30,8 +30,8 @@ const randomPerson: Partial<Person> = { Id: 771130, FullName: 'Random Person', P
 
 @customElement('titanium-profile-picture-stack-demo')
 export class TitaniumProfilePictureStackDemo extends LitElement {
-  @state() people: Array<Partial<Person>> = [randomPerson, kaseyPerson, aaronPerson, randomPerson, randomPerson];
-  @state() manyPeople: Array<Partial<Person>> = new Array(20).fill(kaseyPerson);
+  @state() private accessor people: Array<Partial<Person>> = [randomPerson, kaseyPerson, aaronPerson, randomPerson, randomPerson];
+  @state() private accessor manyPeople: Array<Partial<Person>> = new Array(20).fill(kaseyPerson);
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/my-app.ts b/packages/leavittbook/src/my-app.ts
index eb7a8a422..d409ae126 100644
--- a/packages/leavittbook/src/my-app.ts
+++ b/packages/leavittbook/src/my-app.ts
@@ -35,6 +35,7 @@ import { mainMenuPositionContext } from '@leavittsoftware/web/leavitt/app/contex
 import { provide } from '@lit/context';
 import { siteSearchTextFieldContext } from './contexts/site-search-text-field-context';
 import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
+import { PageElement } from '@leavittsoftware/web/titanium/site-search-text-field-controller/site-search-text-field-controller';
 
 @customElement('my-app')
 export class MyApp extends PendingStateCatcher(LitElement) {
@@ -49,6 +50,8 @@ export class MyApp extends PendingStateCatcher(LitElement) {
 
   @query('titanium-drawer') private accessor drawer: TitaniumDrawer;
 
+  #resizeObserver: ResizeObserver | null = null;
+
   async connectedCallback() {
     super.connectedCallback();
     try {
@@ -97,22 +100,25 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       this.#applyTheme();
     });
 
-    const resizeObserver = new ResizeObserver((entries) => {
+    this.#resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const width = entry.contentRect.width;
         if (width < 600) {
+          this.drawer.mode = 'flyover';
           this.mainMenuPosition = 'drawer';
         } else if (width >= 600 && width < 920) {
+          this.drawer.mode = 'inline';
+          this.drawer.open();
           this.mainMenuPosition = 'slim';
-          this.drawer?.closeQuick();
         } else {
+          this.drawer.mode = 'inline';
+          this.drawer.open();
           this.mainMenuPosition = this.prefersCollapsedMenu ? 'slim' : 'full';
-          this.drawer?.closeQuick();
         }
       }
     });
 
-    resizeObserver.observe(this);
+    this.#resizeObserver.observe(this);
 
     this.addEventListener(ChangePathEvent.eventName, (event: ChangePathEvent) => {
       page.show(event.detail.path);
@@ -128,7 +134,9 @@ export class MyApp extends PendingStateCatcher(LitElement) {
     });
 
     page('*', (_ctx, next) => {
-      this.drawer?.close();
+      if (this.drawer?.mode === 'flyover') {
+        this.drawer.close();
+      }
       next();
     });
 
@@ -194,6 +202,15 @@ export class MyApp extends PendingStateCatcher(LitElement) {
     page.start();
   }
 
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.#resizeObserver?.disconnect();
+  }
+
+  #getActivePageElement(mainPage: string): PageElement | null {
+    return this.shadowRoot?.querySelector<PageElement>(`${mainPage}-demo`) ?? this.shadowRoot?.querySelector<PageElement>(mainPage) ?? null;
+  }
+
   async #changePage(mainPage: string, importFunction?: () => Promise<unknown>) {
     this.page = mainPage;
     try {
@@ -202,8 +219,9 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         this.dispatchEvent(new PendingStateEvent(importElements));
       }
       await importElements;
+      await this.updateComplete;
 
-      this.showSearch = mainPage === 'leavitt-email-history-viewer';
+      this.showSearch = !!this.#getActivePageElement(mainPage)?.searchController;
     } catch (error) {
       console.warn(error);
       this.#showErrorPage(error);
@@ -426,10 +444,12 @@ export class MyApp extends PendingStateCatcher(LitElement) {
           <h4 menu-category>Leavitt</h4>
           <md-list-item ?selected=${this.page === 'leavitt-company-select'} href="/leavitt-company-select" type="link">
             <md-icon slot="start">business</md-icon> <span>Company select</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'leavitt-email-history-viewer'} href="/leavitt-email-history-viewer" type="link">
             <md-icon slot="start">mail</md-icon> <span>Email history viewer</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'leavitt-error-page'} href="/leavitt-error-page" type="link">
@@ -438,18 +458,22 @@ export class MyApp extends PendingStateCatcher(LitElement) {
 
           <md-list-item ?selected=${this.page === 'leavitt-file-explorer'} href="/leavitt-file-explorer" type="link">
             <md-icon slot="start">folder_open</md-icon> <span>File explorer</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'leavitt-person-company-select'} href="/leavitt-person-company-select" type="link">
             <md-icon slot="start">badge</md-icon> <span>Person company select</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'leavitt-person-group-select'} href="/leavitt-person-group-select" type="link">
             <md-icon slot="start">diversity_3</md-icon> <span>Person group select</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'leavitt-person-select'} href="/leavitt-person-select" type="link">
             <md-icon slot="start">person_search</md-icon> <span>Person select</span>
+            <md-icon slot="end">passkey</md-icon>
           </md-list-item>
 
           <md-list-item ?selected=${this.page === 'profile-picture'} href="/profile-picture" type="link">
@@ -485,99 +509,37 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         ${this.page === 'error' ? html`<div>Oops, something went wrong.</div>` : nothing}
 
         <!-- Stories -->
-        ${this.page === 'available-cdn-icons'
-          ? html` <available-cdn-icons-demo large ?isActive=${this.page === 'available-cdn-icons'}></available-cdn-icons-demo> `
-          : nothing}
-        ${this.page === 'titanium-date-range-selector'
-          ? html` <titanium-date-range-selector-demo large ?isActive=${this.page === 'titanium-date-range-selector'}></titanium-date-range-selector-demo> `
-          : nothing}
-        ${this.page === 'leavitt-person-select'
-          ? html` <leavitt-person-select-demo large ?isActive=${this.page === 'leavitt-person-select'}></leavitt-person-select-demo> `
-          : nothing}
-        ${this.page === 'leavitt-company-select'
-          ? html` <leavitt-company-select-demo large ?isActive=${this.page === 'leavitt-company-select'}></leavitt-company-select-demo> `
-          : nothing}
-        ${this.page === 'leavitt-email-history-viewer'
-          ? html` <leavitt-email-history-viewer-demo large ?isActive=${this.page === 'leavitt-email-history-viewer'}></leavitt-email-history-viewer-demo> `
-          : nothing}
-        ${this.page === 'leavitt-file-explorer'
-          ? html` <leavitt-file-explorer-demo large ?isActive=${this.page === 'leavitt-file-explorer'}></leavitt-file-explorer-demo> `
-          : nothing}
-        ${this.page === 'leavitt-error-page'
-          ? html` <leavitt-error-page-demo large ?isActive=${this.page === 'leavitt-error-page'}></leavitt-error-page-demo> `
-          : nothing}
-        ${this.page === 'leavitt-person-company-select'
-          ? html` <leavitt-person-company-select-demo large ?isActive=${this.page === 'leavitt-person-company-select'}></leavitt-person-company-select-demo> `
-          : nothing}
-        ${this.page === 'leavitt-person-group-select'
-          ? html` <leavitt-person-group-select-demo large ?isActive=${this.page === 'leavitt-person-group-select'}></leavitt-person-group-select-demo> `
-          : nothing}
-        ${this.page === 'titanium-drawer' ? html` <titanium-drawer-demo ?isActive=${this.page === 'titanium-drawer'}></titanium-drawer-demo> ` : nothing}
-        ${this.page === 'profile-picture' ? html` <profile-picture-demo ?isActive=${this.page === 'profile-picture'}></profile-picture-demo> ` : nothing}
-        ${this.page === 'profile-picture-menu'
-          ? html` <profile-picture-menu-demo large ?isActive=${this.page === 'profile-picture-menu'}></profile-picture-menu-demo> `
-          : nothing}
-        ${this.page === 'titanium-input-validator'
-          ? html` <titanium-input-validator-demo large ?isActive=${this.page === 'titanium-input-validator'}></titanium-input-validator-demo> `
-          : nothing}
-        ${this.page === 'titanium-data-table-core'
-          ? html` <titanium-data-table-core-demo large ?isActive=${this.page === 'titanium-data-table-core'}></titanium-data-table-core-demo> `
-          : nothing}
-        ${this.page === 'titanium-promise-tracking'
-          ? html` <titanium-promise-tracking-demo large ?isActive=${this.page === 'titanium-promise-tracking'}></titanium-promise-tracking-demo> `
-          : nothing}
-        ${this.page === 'titanium-address-input'
-          ? html` <titanium-address-input-demo large ?isActive=${this.page === 'titanium-address-input'}></titanium-address-input-demo> `
-          : nothing}
-        ${this.page === 'titanium-icon' ? html` <titanium-icon-demo ?isActive=${this.page === 'titanium-icon'}></titanium-icon-demo> ` : nothing}
-        ${this.page === 'titanium-icon-picker'
-          ? html` <titanium-icon-picker-demo large ?isActive=${this.page === 'titanium-icon-picker'}></titanium-icon-picker-demo> `
-          : nothing}
-        ${this.page === 'titanium-page-control'
-          ? html` <titanium-page-control-demo large ?isActive=${this.page === 'titanium-page-control'}></titanium-page-control-demo> `
-          : nothing}
-        ${this.page === 'titanium-date-input'
-          ? html` <titanium-date-input-demo large ?isActive=${this.page === 'titanium-date-input'}></titanium-date-input-demo> `
-          : nothing}
-        ${this.page === 'titanium-search-input'
-          ? html` <titanium-search-input-demo large ?isActive=${this.page === 'titanium-search-input'}></titanium-search-input-demo> `
-          : nothing}
-        ${this.page === 'titanium-toolbar'
-          ? html` <titanium-toolbar-demo large ?isActive=${this.page === 'titanium-toolbar'}></titanium-toolbar-demo> `
-          : nothing}
-        ${this.page === 'titanium-loading-indicator'
-          ? html` <titanium-loading-indicator-demo large ?isActive=${this.page === 'titanium-loading-indicator'}></titanium-loading-indicator-demo> `
-          : nothing}
-        ${this.page === 'titanium-chip-multi-select'
-          ? html` <titanium-chip-multi-select-demo large ?isActive=${this.page === 'titanium-chip-multi-select'}></titanium-chip-multi-select-demo> `
-          : nothing}
-        ${this.page === 'titanium-styles' ? html` <titanium-styles-demo large ?isActive=${this.page === 'titanium-styles'}></titanium-styles-demo> ` : nothing}
-        ${this.page === 'titanium-snackbar'
-          ? html` <titanium-snackbar-demo large ?isActive=${this.page === 'titanium-snackbar'}></titanium-snackbar-demo> `
-          : nothing}
-        ${this.page === 'titanium-smart-attachment-input'
-          ? html`
-              <titanium-smart-attachment-input-demo large ?isActive=${this.page === 'titanium-smart-attachment-input'}></titanium-smart-attachment-input-demo>
-            `
-          : nothing}
-        ${this.page === 'titanium-chip' ? html` <titanium-chip-demo large ?isActive=${this.page === 'titanium-chip'}></titanium-chip-demo> ` : nothing}
-        ${this.page === 'titanium-youtube-input'
-          ? html` <titanium-youtube-input-demo large ?isActive=${this.page === 'titanium-youtube-input'}></titanium-youtube-input-demo> `
-          : nothing}
-        ${this.page === 'titanium-show-hide'
-          ? html` <titanium-show-hide-demo large ?isActive=${this.page === 'titanium-show-hide'}></titanium-show-hide-demo> `
-          : nothing}
-        ${this.page === 'titanium-duration-input'
-          ? html` <titanium-duration-input-demo large ?isActive=${this.page === 'titanium-duration-input'}></titanium-duration-input-demo> `
-          : nothing}
-        ${this.page === 'titanium-confirmation-dialog'
-          ? html` <titanium-confirmation-dialog-demo large ?isActive=${this.page === 'titanium-confirmation-dialog'}></titanium-confirmation-dialog-demo> `
-          : nothing}
-        ${this.page === 'titanium-profile-picture-stack'
-          ? html`
-              <titanium-profile-picture-stack-demo large ?isActive=${this.page === 'titanium-profile-picture-stack'}></titanium-profile-picture-stack-demo>
-            `
-          : nothing}
+        ${this.page === 'available-cdn-icons' ? html`<available-cdn-icons-demo large></available-cdn-icons-demo>` : nothing}
+        ${this.page === 'titanium-date-range-selector' ? html`<titanium-date-range-selector-demo large></titanium-date-range-selector-demo>` : nothing}
+        ${this.page === 'leavitt-person-select' ? html`<leavitt-person-select-demo large></leavitt-person-select-demo>` : nothing}
+        ${this.page === 'leavitt-company-select' ? html`<leavitt-company-select-demo large></leavitt-company-select-demo>` : nothing}
+        ${this.page === 'leavitt-email-history-viewer' ? html`<leavitt-email-history-viewer-demo large></leavitt-email-history-viewer-demo>` : nothing}
+        ${this.page === 'leavitt-file-explorer' ? html`<leavitt-file-explorer-demo large></leavitt-file-explorer-demo>` : nothing}
+        ${this.page === 'leavitt-error-page' ? html`<leavitt-error-page-demo large></leavitt-error-page-demo>` : nothing}
+        ${this.page === 'leavitt-person-company-select' ? html`<leavitt-person-company-select-demo large></leavitt-person-company-select-demo>` : nothing}
+        ${this.page === 'leavitt-person-group-select' ? html`<leavitt-person-group-select-demo large></leavitt-person-group-select-demo>` : nothing}
+        ${this.page === 'titanium-drawer' ? html`<titanium-drawer-demo></titanium-drawer-demo>` : nothing}
+        ${this.page === 'profile-picture' ? html`<profile-picture-demo></profile-picture-demo>` : nothing}
+        ${this.page === 'profile-picture-menu' ? html`<profile-picture-menu-demo large></profile-picture-menu-demo>` : nothing}
+        ${this.page === 'titanium-input-validator' ? html`<titanium-input-validator-demo large></titanium-input-validator-demo>` : nothing}
+        ${this.page === 'titanium-data-table-core' ? html`<titanium-data-table-core-demo large></titanium-data-table-core-demo>` : nothing}
+        ${this.page === 'titanium-promise-tracking' ? html`<titanium-promise-tracking-demo large></titanium-promise-tracking-demo>` : nothing}
+        ${this.page === 'titanium-address-input' ? html`<titanium-address-input-demo large></titanium-address-input-demo>` : nothing}
+        ${this.page === 'titanium-icon-picker' ? html`<titanium-icon-picker-demo large></titanium-icon-picker-demo>` : nothing}
+        ${this.page === 'titanium-page-control' ? html`<titanium-page-control-demo large></titanium-page-control-demo>` : nothing}
+        ${this.page === 'titanium-date-input' ? html`<titanium-date-input-demo large></titanium-date-input-demo>` : nothing}
+        ${this.page === 'titanium-search-input' ? html`<titanium-search-input-demo large></titanium-search-input-demo>` : nothing}
+        ${this.page === 'titanium-toolbar' ? html`<titanium-toolbar-demo large></titanium-toolbar-demo>` : nothing}
+        ${this.page === 'titanium-chip-multi-select' ? html`<titanium-chip-multi-select-demo large></titanium-chip-multi-select-demo>` : nothing}
+        ${this.page === 'titanium-styles' ? html`<titanium-styles-demo large></titanium-styles-demo>` : nothing}
+        ${this.page === 'titanium-snackbar' ? html`<titanium-snackbar-demo large></titanium-snackbar-demo>` : nothing}
+        ${this.page === 'titanium-smart-attachment-input' ? html`<titanium-smart-attachment-input-demo large></titanium-smart-attachment-input-demo>` : nothing}
+        ${this.page === 'titanium-chip' ? html`<titanium-chip-demo large></titanium-chip-demo>` : nothing}
+        ${this.page === 'titanium-youtube-input' ? html`<titanium-youtube-input-demo large></titanium-youtube-input-demo>` : nothing}
+        ${this.page === 'titanium-show-hide' ? html`<titanium-show-hide-demo large></titanium-show-hide-demo>` : nothing}
+        ${this.page === 'titanium-duration-input' ? html`<titanium-duration-input-demo large></titanium-duration-input-demo>` : nothing}
+        ${this.page === 'titanium-confirmation-dialog' ? html`<titanium-confirmation-dialog-demo large></titanium-confirmation-dialog-demo>` : nothing}
+        ${this.page === 'titanium-profile-picture-stack' ? html`<titanium-profile-picture-stack-demo large></titanium-profile-picture-stack-demo>` : nothing}
 
         <leavitt-error-page
           ?hidden=${this.page !== 'error'}
diff --git a/packages/leavittbook/src/styles/hero-styles.ts b/packages/leavittbook/src/styles/hero-styles.ts
index 77ae6e4c9..47ddbe32f 100644
--- a/packages/leavittbook/src/styles/hero-styles.ts
+++ b/packages/leavittbook/src/styles/hero-styles.ts
@@ -26,9 +26,9 @@ export const heroStyles = css`
     padding: 0;
   }
 
-  [heading2],
+  [heading3],
   h3 {
-    font-family: var(--titanium-styles-h2-font-family, Metropolis, Roboto, Noto, sans-serif);
+    font-family: var(--titanium-styles-h3-font-family, Metropolis, Roboto, Noto, sans-serif);
     -webkit-font-smoothing: antialiased;
     font-size: 20px;
     line-height: 24px;
@@ -38,4 +38,17 @@ export const heroStyles = css`
     margin: 0;
     padding: 0;
   }
+
+  [heading4],
+  h4 {
+    font-family: var(--titanium-styles-h4-font-family, Metropolis, Roboto, Noto, sans-serif);
+    -webkit-font-smoothing: antialiased;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+
+    margin: 0;
+    padding: 0;
+  }
 `;
diff --git a/packages/leavittbook/src/styles/my-app-styles.ts b/packages/leavittbook/src/styles/my-app-styles.ts
index bb2e81fbd..72daeaaee 100644
--- a/packages/leavittbook/src/styles/my-app-styles.ts
+++ b/packages/leavittbook/src/styles/my-app-styles.ts
@@ -5,13 +5,26 @@ export const myAppStyles = css`
     display: grid;
     grid:
       'toolbar toolbar' 64px
-      'menu content' auto / 300px 1fr;
+      'menu content' auto / 310px 1fr;
 
     transition: 250ms;
 
     --mdc-icon-font: 'Material Symbols Outlined';
   }
 
+  :host([no-main-menu]) {
+    grid-template-columns: 0 1fr !important;
+
+    titanium-toolbar {
+      grid-template-columns: auto auto 1fr auto !important;
+      padding: 0 24px 0 24px !important;
+    }
+  }
+
+  :host([no-main-menu]) main-content {
+    margin-left: 16px;
+  }
+
   :host([main-menu-position='drawer']) {
     grid:
       'toolbar toolbar' 64px
@@ -34,6 +47,10 @@ export const myAppStyles = css`
     }
   }
 
+  :host([no-main-menu][main-menu-position='drawer']) main-content {
+    margin-left: 0;
+  }
+
   /* safari does not like nested selectors on host */
   :host([main-menu-position='slim']) titanium-drawer[main-menu] {
     --titanium-drawer-width: 80px;
@@ -79,10 +96,10 @@ export const myAppStyles = css`
   :host([main-menu-position='slim']) {
     grid:
       'toolbar toolbar' 64px
-      'menu content' auto / 80px 1fr;
+      'menu content' auto / 85px 1fr;
 
     titanium-toolbar {
-      grid: 'main-menu-button logo search-input page-actions' / 80px auto 1fr auto;
+      grid: 'main-menu-button logo search-input page-actions' / 85px auto 1fr auto;
     }
   }
 
@@ -170,12 +187,20 @@ export const myAppStyles = css`
     }
 
     h4[sub] {
-      display: flex;
+      display: grid;
+      overflow: hidden;
+      grid-template-columns: auto 1fr;
       align-items: center;
       gap: 4px;
-      padding: 0 12px 2px 35px;
+      padding: 0 12px 2px 24px;
       opacity: 0.8;
       --md-icon-size: 16px;
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -183,7 +208,7 @@ export const myAppStyles = css`
     grid-area: toolbar;
     background-color: var(--app-background-color);
     display: grid;
-    grid: 'main-menu-button logo search-input page-actions' / auto 240px 1fr auto;
+    grid: 'main-menu-button logo search-input page-actions' / auto 250px 1fr auto;
     align-items: center;
     height: 64px;
     z-index: 6;

From 1fac3b80c9086b6d15dc909eb53a946d8d6cf74c Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 14:15:24 -0600
Subject: [PATCH 08/14] chore: upgrade to TypeScript 6 and ESLint 10

Bump typescript to 6.x with bundler moduleResolution, add strict property
initializers across Lit components, and fix unknown-catch and event listener
typing for TS 6 defaults.
---
 eslint.config.mjs                             |   2 +-
 package.json                                  |  13 +-
 .../demos/titanium-chip-multi-select-demo.ts  |   2 +-
 .../titanium-confirmation-dialog-demo.ts      |   8 +-
 .../demos/titanium-data-table-core-demo.ts    |   4 +-
 .../src/demos/titanium-drawer-demo.ts         |   4 +-
 .../src/demos/titanium-duration-input-demo.ts |   2 +-
 .../src/demos/titanium-icon-picker-demo.ts    |   2 +-
 .../demos/titanium-input-validator-demo.ts    |   2 +-
 .../src/demos/titanium-page-control-demo.ts   |   2 +-
 .../src/demos/titanium-snackbar-demo.ts       |   4 +-
 .../src/demos/titanium-youtube-input-demo.ts  |   2 +-
 packages/leavittbook/src/my-app.ts            |  18 +-
 packages/leavittbook/src/shared/npm-stats.ts  |   8 +-
 .../leavittbook/src/shared/story-header.ts    |   6 +-
 .../web/leavitt/api-service/api-service.ts    |  17 +-
 .../web/leavitt/api-service/blob-response.ts  |   2 +-
 packages/web/leavitt/app/app-logo.ts          |   2 +-
 .../leavitt/app/app-main-content-container.ts |   6 +-
 .../web/leavitt/app/app-navigation-header.ts  |  20 +-
 .../leavitt/company-select/company-select.ts  |   5 +-
 ...ail-history-viewer-filled-filter-dialog.ts |  15 +-
 .../email-history-viewer-filled.ts            |  19 +-
 .../view-email-template-info-dialog.ts        |  11 +-
 .../view-sent-email-dialog.ts                 |  13 +-
 packages/web/leavitt/error-page/error-page.ts |   6 +-
 .../leavitt/file-explorer/add-folder-modal.ts |  11 +-
 .../file-explorer/file-explorer-image.ts      |   2 +-
 .../leavitt/file-explorer/file-explorer.ts    |  37 ++--
 .../leavitt/file-explorer/file-list-item.ts   |   2 +-
 .../web/leavitt/file-explorer/file-modal.ts   |   7 +-
 .../leavitt/file-explorer/folder-list-item.ts |   2 +-
 .../web/leavitt/file-explorer/folder-modal.ts |   7 +-
 .../person-company-select.ts                  |  13 +-
 .../person-group-select.ts                    |  13 +-
 .../leavitt/person-select/person-select.ts    |  10 +-
 .../profile-picture/profile-picture-menu.ts   |   6 +-
 .../profile-picture/profile-picture.ts        |   8 +-
 .../service-worker-notifier.ts                |   4 +-
 .../web/leavitt/theme/theme-preference.ts     |   2 +-
 .../user-feedback/provide-feedback-dialog.ts  |   9 +-
 .../user-feedback/report-a-problem-dialog.ts  |  11 +-
 .../user-manager/auth-zero-lg-user-manager.ts |  12 +-
 .../titanium/address-input/address-input.ts   |   2 +-
 .../address-input/google-address-input.ts     |  50 ++---
 .../address-input/manual-address-dialog.ts    | 204 +++++++++---------
 .../utils/place-result-to-address.ts          |   1 +
 .../chip-multi-select/chip-multi-select.ts    |  14 +-
 packages/web/titanium/chip/chip.ts            |   8 +-
 .../circle-loading-indicator.ts               |  16 +-
 .../confirmation-dialog.ts                    |   6 +-
 .../data-table/data-table-action-bar.ts       |   2 +-
 .../data-table-core-reorder-dialog.ts         |   7 +-
 .../data-table-core-reorder-item.ts           |   2 +-
 ...ble-core-settings-choose-columns-dialog.ts |   4 +-
 ...table-core-settings-choose-columns-item.ts |   6 +-
 .../data-table-core-settings-sort-dialog.ts   |   8 +-
 .../data-table-core-settings-sort-item.ts     |   8 +-
 .../titanium/data-table/data-table-core.ts    |   6 +-
 .../data-table/draggable-item-base.ts         |  16 +-
 .../titanium/data-table/filter-controller.ts  |   2 +-
 .../web/titanium/data-table/page-control.ts   |  44 ++--
 .../web/titanium/date-input/date-input.ts     |   2 +-
 .../date-range-selector.ts                    |  52 +++--
 packages/web/titanium/drawer/drawer.ts        |   4 +-
 packages/web/titanium/event-bus/event-bus.ts  |   2 +-
 packages/web/titanium/helpers/debouncer.ts    |   2 +-
 .../titanium/helpers/pending-state-catcher.ts |  82 ++++---
 .../input-validator/filled-input-validator.ts |   2 +-
 .../profile-picture-stack.ts                  |   4 +-
 .../search-input/filled-search-input.ts       |   2 +-
 packages/web/titanium/show-hide/show-hide.ts  |   8 +-
 .../single-select-base/single-select-base.ts  |  32 ++-
 .../crop-and-save-image-dialog.ts             |  20 +-
 .../image-preview-dialog.ts                   |   2 +-
 .../smart-attachment-input.ts                 |  12 +-
 .../web/titanium/snackbar/snackbar-stack.ts   |   4 +-
 .../snackbar/snackbars/http-error-snackbar.ts |   4 +-
 .../snackbar/snackbars/simple-snackbar.ts     |  10 +-
 packages/web/titanium/toolbar/toolbar.ts      |   2 +-
 tsconfig.json                                 |   6 +-
 tsconfig.spec.json                            |   7 +-
 82 files changed, 521 insertions(+), 495 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8d6daf296..f29d2dc39 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -32,7 +32,7 @@ export default [
       ecmaVersion: 2020,
       sourceType: 'module',
       parserOptions: {
-        project: true,
+        project: ['./tsconfig.json', './tsconfig.spec.json'],
         tsconfigRootDir: import.meta.dirname,
       },
     },
diff --git a/package.json b/package.json
index ae2f10a40..b96592f83 100644
--- a/package.json
+++ b/package.json
@@ -17,20 +17,23 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/dom-navigation": "^1.0.7",
+    "@types/google.maps": "*",
     "@types/jasmine": "^6.0.0",
     "@types/page": "^1.11.9",
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
+    "@typescript-eslint/eslint-plugin": "^8.62.0",
+    "@typescript-eslint/parser": "^8.62.0",
     "@web/dev-server": "^0.4.6",
     "@web/rollup-plugin-html": "^3.1.0",
     "@web/rollup-plugin-import-meta-assets": "^2.3.2",
     "concurrently": "^9.2.1",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.39.1",
+    "eslint": "^10.5.0",
     "eslint-plugin-lit": "^2.2.1",
     "eslint-plugin-wc": "^3.1.0",
     "happy-dom": "^20.7.0",
@@ -46,8 +49,8 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-workbox": "^8.1.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.0",
     "vscode-css-languageservice": "^6.3.10"
   },
   "overrides": {
diff --git a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
index 112f38bb3..45b5dfb88 100644
--- a/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-chip-multi-select-demo.ts
@@ -24,7 +24,7 @@ export class TitaniumChipMultiSelectDemo extends LitElement {
   @state() protected accessor demoItems: string[] = chipLabels.slice(0, 4);
   @state() protected accessor disabled: boolean = false;
   @state() protected accessor supportingText: string | null = 'Service animals are welcome.';
-  @query('titanium-chip-multi-select') private accessor titaniumChipMultiSelect: TitaniumChipMultiSelect;
+  @query('titanium-chip-multi-select') private accessor titaniumChipMultiSelect!: TitaniumChipMultiSelect;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/demos/titanium-confirmation-dialog-demo.ts b/packages/leavittbook/src/demos/titanium-confirmation-dialog-demo.ts
index 700607ef8..c7e788f55 100644
--- a/packages/leavittbook/src/demos/titanium-confirmation-dialog-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-confirmation-dialog-demo.ts
@@ -23,10 +23,10 @@ export class TitaniumConfirmationDialogDemo extends LitElement {
   @state() private accessor result4: 'confirmed' | 'cancel' | undefined;
   @state() private accessor favoriteSnack: string | undefined;
 
-  @query('titanium-confirmation-dialog[demo1]') private accessor confirmationDialog: TitaniumConfirmationDialog | null;
-  @query('titanium-confirmation-dialog[demo2]') private accessor confirmationDialog2: TitaniumConfirmationDialog | null;
-  @query('titanium-confirmation-dialog[demo3]') private accessor confirmationDialog3: TitaniumConfirmationDialog | null;
-  @query('titanium-confirmation-dialog[demo4]') private accessor confirmationDialog4: TitaniumConfirmationDialog | null;
+  @query('titanium-confirmation-dialog[demo1]') private accessor confirmationDialog!: TitaniumConfirmationDialog | null;
+  @query('titanium-confirmation-dialog[demo2]') private accessor confirmationDialog2!: TitaniumConfirmationDialog | null;
+  @query('titanium-confirmation-dialog[demo3]') private accessor confirmationDialog3!: TitaniumConfirmationDialog | null;
+  @query('titanium-confirmation-dialog[demo4]') private accessor confirmationDialog4!: TitaniumConfirmationDialog | null;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts b/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
index 5f349eb85..0cd74d055 100644
--- a/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-data-table-core-demo.ts
@@ -174,7 +174,7 @@ export class TitaniumDataTableCoreDemo extends LitElement {
   @state() private accessor sort: TitaniumDataTableCoreSortItem[] = [];
   @state() private accessor items: Array<ItemType> = this.sortItems(allTeslas, this.sort);
   @state() private accessor selected: Array<ItemType> = [];
-  @query('titanium-data-table-core') private accessor tableCore: TitaniumDataTableCore<ItemType>;
+  @query('titanium-data-table-core') private accessor tableCore!: TitaniumDataTableCore<ItemType>;
   /**
    * Sorts items based on multiple sort criteria
    * @param items Array of items to sort
@@ -193,7 +193,7 @@ export class TitaniumDataTableCoreDemo extends LitElement {
         if (aValue == null) return sortItem.direction === 'asc' ? 1 : -1;
         if (bValue == null) return sortItem.direction === 'asc' ? -1 : 1;
 
-        let comparison = 0;
+        let comparison: number;
 
         // Handle string comparison
         if (typeof aValue === 'string' && typeof bValue === 'string') {
diff --git a/packages/leavittbook/src/demos/titanium-drawer-demo.ts b/packages/leavittbook/src/demos/titanium-drawer-demo.ts
index c21e5c2b0..185699cf8 100644
--- a/packages/leavittbook/src/demos/titanium-drawer-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-drawer-demo.ts
@@ -22,8 +22,8 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-drawer-demo')
 export class TitaniumDrawerDemo extends LitElement {
-  @query('titanium-drawer[one]') private accessor drawerOne: TitaniumDrawer;
-  @query('titanium-drawer[two]') private accessor drawerTwo: TitaniumDrawer;
+  @query('titanium-drawer[one]') private accessor drawerOne!: TitaniumDrawer;
+  @query('titanium-drawer[two]') private accessor drawerTwo!: TitaniumDrawer;
 
   @state() private accessor drawerTwoMode: 'inline' | 'flyover' = 'flyover';
   @state() private accessor drawerTwoOpen: boolean = false;
diff --git a/packages/leavittbook/src/demos/titanium-duration-input-demo.ts b/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
index e4e6ea698..4a410958a 100644
--- a/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-duration-input-demo.ts
@@ -23,7 +23,7 @@ dayjs.extend(duration);
 export class TitaniumDurationInputDemo extends LitElement {
   @state() private accessor filledDuration: duration.Duration | null = dayjs.duration(14400);
 
-  @query('titanium-filled-duration-input[required]') private accessor filledInput: TitaniumFilledDurationInput;
+  @query('titanium-filled-duration-input[required]') private accessor filledInput!: TitaniumFilledDurationInput;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts b/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
index 3cb50b08f..1d46dd4c3 100644
--- a/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-icon-picker-demo.ts
@@ -16,7 +16,7 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-icon-picker-demo')
 export class TitaniumIconPickerDemo extends LitElement {
-  @query('titanium-icon-picker[demo2]') private accessor requiredInput: TitaniumIconPicker;
+  @query('titanium-icon-picker[demo2]') private accessor requiredInput!: TitaniumIconPicker;
 
   static styles = [StoryStyles];
 
diff --git a/packages/leavittbook/src/demos/titanium-input-validator-demo.ts b/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
index 168538f2c..68ea538b4 100644
--- a/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-input-validator-demo.ts
@@ -20,7 +20,7 @@ import StoryStyles from '../styles/story-styles';
 @customElement('titanium-input-validator-demo')
 export class TitaniumInputValidatorDemo extends LitElement {
   @state() private accessor filledIconSelected = '';
-  @queryAll('titanium-filled-input-validator') private accessor filledValidators: NodeListOf<TitaniumFilledInputValidator>;
+  @queryAll('titanium-filled-input-validator') private accessor filledValidators!: NodeListOf<TitaniumFilledInputValidator>;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/demos/titanium-page-control-demo.ts b/packages/leavittbook/src/demos/titanium-page-control-demo.ts
index 58fa875a1..ba347aaba 100644
--- a/packages/leavittbook/src/demos/titanium-page-control-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-page-control-demo.ts
@@ -15,7 +15,7 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-page-control-demo')
 export class TitaniumPageControlDemo extends LitElement {
-  @query('titanium-page-control[main]') private accessor pageControl: TitaniumPageControl;
+  @query('titanium-page-control[main]') private accessor pageControl!: TitaniumPageControl;
   @state() protected accessor count: number = 25;
   @state() protected accessor data;
   @state() protected accessor filteredData;
diff --git a/packages/leavittbook/src/demos/titanium-snackbar-demo.ts b/packages/leavittbook/src/demos/titanium-snackbar-demo.ts
index 15ad7379a..5aab61014 100644
--- a/packages/leavittbook/src/demos/titanium-snackbar-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-snackbar-demo.ts
@@ -23,8 +23,8 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-snackbar-demo')
 export class TitaniumSnackbarDemo extends LitElement {
-  @query('md-dialog') dialog: MdDialog;
-  @query('titanium-snackbar-stack') snackbar: SnackbarStack;
+  @query('md-dialog') accessor dialog!: MdDialog;
+  @query('titanium-snackbar-stack') accessor snackbar!: SnackbarStack;
 
   static styles = [StoryStyles];
 
diff --git a/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts b/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
index 860a2d842..20b4dc5c8 100644
--- a/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
+++ b/packages/leavittbook/src/demos/titanium-youtube-input-demo.ts
@@ -17,7 +17,7 @@ import StoryStyles from '../styles/story-styles';
 
 @customElement('titanium-youtube-input-demo')
 export class TitaniumYoutubeInputDemo extends LitElement {
-  @query('titanium-filled-youtube-input[required]') private accessor filledInput: TitaniumFilledYouTubeInput;
+  @query('titanium-filled-youtube-input[required]') private accessor filledInput!: TitaniumFilledYouTubeInput;
 
   static styles = [
     StoryStyles,
diff --git a/packages/leavittbook/src/my-app.ts b/packages/leavittbook/src/my-app.ts
index d409ae126..f7b8dc43b 100644
--- a/packages/leavittbook/src/my-app.ts
+++ b/packages/leavittbook/src/my-app.ts
@@ -48,7 +48,7 @@ export class MyApp extends PendingStateCatcher(LitElement) {
   @property({ type: String, reflect: true, attribute: 'main-menu-position' })
   private mainMenuPosition: 'slim' | 'full' | 'drawer' = 'full';
 
-  @query('titanium-drawer') private accessor drawer: TitaniumDrawer;
+  @query('titanium-drawer') private accessor drawer!: TitaniumDrawer;
 
   #resizeObserver: ResizeObserver | null = null;
 
@@ -58,7 +58,7 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       UserManager.initialize();
     } catch (error) {
       console.error(error);
-      this.fatalErrorMessage = error;
+      this.fatalErrorMessage = error instanceof Error ? error.message : String(error);
       this.#changePage('error');
       return;
     }
@@ -120,18 +120,18 @@ export class MyApp extends PendingStateCatcher(LitElement) {
 
     this.#resizeObserver.observe(this);
 
-    this.addEventListener(ChangePathEvent.eventName, (event: ChangePathEvent) => {
+    this.addEventListener(ChangePathEvent.eventName, ((event: ChangePathEvent) => {
       page.show(event.detail.path);
-    });
+    }) as EventListener);
 
-    this.addEventListener(RedirectPathEvent.eventName, (event: RedirectPathEvent) => {
+    this.addEventListener(RedirectPathEvent.eventName, ((event: RedirectPathEvent) => {
       page.redirect(event.detail.path);
-    });
+    }) as EventListener);
 
-    this.addEventListener(SiteErrorEvent.eventName, (event: SiteErrorEvent) => {
+    this.addEventListener(SiteErrorEvent.eventName, ((event: SiteErrorEvent) => {
       this.fatalErrorMessage = event.detail;
       this.#changePage('error');
-    });
+    }) as EventListener);
 
     page('*', (_ctx, next) => {
       if (this.drawer?.mode === 'flyover') {
@@ -224,7 +224,7 @@ export class MyApp extends PendingStateCatcher(LitElement) {
       this.showSearch = !!this.#getActivePageElement(mainPage)?.searchController;
     } catch (error) {
       console.warn(error);
-      this.#showErrorPage(error);
+      this.#showErrorPage(error instanceof Error ? error.message : String(error));
     }
   }
 
diff --git a/packages/leavittbook/src/shared/npm-stats.ts b/packages/leavittbook/src/shared/npm-stats.ts
index f2e8224d3..d3ea3683a 100644
--- a/packages/leavittbook/src/shared/npm-stats.ts
+++ b/packages/leavittbook/src/shared/npm-stats.ts
@@ -6,10 +6,10 @@ import { CountUp } from 'countup.js';
 export default class NpmStats extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'hide-downloads' }) accessor hideDownloads: boolean = false;
 
-  @query('span.major') protected accessor major: HTMLDivElement;
-  @query('span.minor') protected accessor minor: HTMLDivElement;
-  @query('span.rev') protected accessor rev: HTMLDivElement;
-  @query('span.downloads') protected accessor downloads: HTMLDivElement;
+  @query('span.major') protected accessor major!: HTMLDivElement;
+  @query('span.minor') protected accessor minor!: HTMLDivElement;
+  @query('span.rev') protected accessor rev!: HTMLDivElement;
+  @query('span.downloads') protected accessor downloads!: HTMLDivElement;
 
   #package = '@leavittsoftware%2Fweb';
 
diff --git a/packages/leavittbook/src/shared/story-header.ts b/packages/leavittbook/src/shared/story-header.ts
index 30184d155..7fa04e795 100644
--- a/packages/leavittbook/src/shared/story-header.ts
+++ b/packages/leavittbook/src/shared/story-header.ts
@@ -40,9 +40,9 @@ const readCustomElementsJson = async (path: string) => {
 
 @customElement('story-header')
 export default class StoryHeader extends LitElement {
-  @property({ type: String }) accessor name: string;
-  @property({ type: String }) accessor className: string;
-  @property({ type: String }) accessor deprecatedReason: string;
+  @property({ type: String }) accessor name: string = '';
+  @property({ type: String }) accessor className: string = '';
+  @property({ type: String }) accessor deprecatedReason: string = '';
   @property({ type: Boolean, attribute: 'requires-auth' }) accessor requiresAuth: boolean = false;
   @state() private accessor customElementDeclaration: CustomElementDeclaration | null = null;
 
diff --git a/packages/web/leavitt/api-service/api-service.ts b/packages/web/leavitt/api-service/api-service.ts
index 91ff88a75..c9a93bd80 100644
--- a/packages/web/leavitt/api-service/api-service.ts
+++ b/packages/web/leavitt/api-service/api-service.ts
@@ -121,7 +121,7 @@ export default class ApiService {
         xhr.send(file);
       });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'UPLOAD', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'UPLOAD', urlPath));
     }
   }
 
@@ -157,7 +157,7 @@ export default class ApiService {
         signal: options?.abortController?.signal,
       });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'POST', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'POST', urlPath));
     }
 
     if (options?.responseType === 'blob') {
@@ -195,7 +195,7 @@ export default class ApiService {
         signal: options?.abortController?.signal,
       });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'PATCH', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'PATCH', urlPath));
     }
 
     if (options?.responseType === 'blob') {
@@ -233,7 +233,7 @@ export default class ApiService {
         signal: options?.abortController?.signal,
       });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'PATCH', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'PATCH', urlPath));
     }
 
     if (options?.responseType === 'blob') {
@@ -257,7 +257,7 @@ export default class ApiService {
     try {
       response = await fetch(this.#getFullUri(urlPath), { method: 'DELETE', headers: headers, signal: options?.abortController?.signal });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'DELETE', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'DELETE', urlPath));
     }
 
     if (options?.responseType === 'blob') {
@@ -285,7 +285,7 @@ export default class ApiService {
         signal: options?.abortController?.signal,
       });
     } catch (error) {
-      return Promise.reject(this.#rewriteFetchErrors(error, 'GET', urlPath));
+      return Promise.reject(this.#rewriteFetchErrors(error as { name: string; message: string } | AbortError, 'GET', urlPath));
     }
 
     if (options?.responseType === 'blob') {
@@ -307,8 +307,9 @@ export default class ApiService {
       try {
         await call();
       } catch (httpError) {
-        httpErrors.push(httpError);
-        const errorMsg = httpError.message;
+        const error = httpError as HttpError;
+        httpErrors.push(error);
+        const errorMsg = error.message;
         errorMessageToCount.set(errorMsg, (errorMessageToCount.get(errorMsg) ?? 0) + 1);
       }
     });
diff --git a/packages/web/leavitt/api-service/blob-response.ts b/packages/web/leavitt/api-service/blob-response.ts
index f387eeba4..71a9f12e1 100644
--- a/packages/web/leavitt/api-service/blob-response.ts
+++ b/packages/web/leavitt/api-service/blob-response.ts
@@ -1,7 +1,7 @@
 export class BlobResponse {
   public readonly status: number;
   public readonly headers: Headers;
-  public readonly metadata: Map<string, unknown>;
+  public readonly metadata: Map<string, unknown> = new Map();
   public readonly blob: Blob;
 
   constructor(response: Response, blob: Blob) {
diff --git a/packages/web/leavitt/app/app-logo.ts b/packages/web/leavitt/app/app-logo.ts
index 84342f388..310a6ee4e 100644
--- a/packages/web/leavitt/app/app-logo.ts
+++ b/packages/web/leavitt/app/app-logo.ts
@@ -7,7 +7,7 @@ import { ThemePreference } from '@leavittsoftware/web/leavitt/theme/theme-prefer
 export class LeavittAppLogo extends ThemePreference(LitElement) {
   @property({ type: String }) accessor href: string = '/';
   @property({ type: String }) accessor title: string = 'Back to home';
-  @property({ type: String, attribute: 'app-name' }) accessor appName: string | null;
+  @property({ type: String, attribute: 'app-name' }) accessor appName: string | null = null;
 
   static styles = [
     css`
diff --git a/packages/web/leavitt/app/app-main-content-container.ts b/packages/web/leavitt/app/app-main-content-container.ts
index ee30843e4..339b6899e 100644
--- a/packages/web/leavitt/app/app-main-content-container.ts
+++ b/packages/web/leavitt/app/app-main-content-container.ts
@@ -7,11 +7,11 @@ import { consume } from '@lit/context';
 
 @customElement('leavitt-app-main-content-container')
 export class LeavittAppContentContainer extends LitElement {
-  @query('scroll-container') accessor scrollContainer: HTMLDivElement | null;
-  @property({ type: Object }) private accessor pendingStateElement: Element | null;
+  @query('scroll-container') accessor scrollContainer!: HTMLDivElement | null;
+  @property({ type: Object }) private accessor pendingStateElement: Element | null = null;
   @consume({ context: mainMenuPositionContext, subscribe: true })
   @property({ type: String, reflect: true, attribute: 'main-menu-position' })
-  public mainMenuPosition: string;
+  public mainMenuPosition: string = 'full';
 
   static styles = [
     css`
diff --git a/packages/web/leavitt/app/app-navigation-header.ts b/packages/web/leavitt/app/app-navigation-header.ts
index b860702e7..95bbe07fd 100644
--- a/packages/web/leavitt/app/app-navigation-header.ts
+++ b/packages/web/leavitt/app/app-navigation-header.ts
@@ -11,20 +11,20 @@ export class LeavittAppNavigationHeader extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'sticky-top' }) accessor stickyTop: boolean = false;
   @property({ type: Object, attribute: 'scrollable-parent' }) accessor scrollableParent: Element | null = null;
 
-  @property({ type: String }) accessor level1Text: string | null;
-  @property({ type: String }) accessor level1Href: string | null;
+  @property({ type: String }) accessor level1Text: string | null = null;
+  @property({ type: String }) accessor level1Href: string | null = null;
 
-  @property({ type: String }) accessor level2Text: string | null;
-  @property({ type: String }) accessor level2Href: string | null;
+  @property({ type: String }) accessor level2Text: string | null = null;
+  @property({ type: String }) accessor level2Href: string | null = null;
 
-  @property({ type: String }) accessor level3Text: string | null;
-  @property({ type: String }) accessor level3Href: string | null;
+  @property({ type: String }) accessor level3Text: string | null = null;
+  @property({ type: String }) accessor level3Href: string | null = null;
 
-  @property({ type: String }) accessor level4Text: string | null;
-  @property({ type: String }) accessor level4Href: string | null;
+  @property({ type: String }) accessor level4Text: string | null = null;
+  @property({ type: String }) accessor level4Href: string | null = null;
 
-  @property({ type: String }) accessor level5Text: string | null;
-  @property({ type: String }) accessor level5Href: string | null;
+  @property({ type: String }) accessor level5Text: string | null = null;
+  @property({ type: String }) accessor level5Href: string | null = null;
 
   @property({ type: Boolean, reflect: true, attribute: 'is-scrolled' }) private accessor isScrolled: boolean = false;
   #scrollableParent: Element | null = null;
diff --git a/packages/web/leavitt/company-select/company-select.ts b/packages/web/leavitt/company-select/company-select.ts
index ed81b431d..c4b8a8faf 100644
--- a/packages/web/leavitt/company-select/company-select.ts
+++ b/packages/web/leavitt/company-select/company-select.ts
@@ -15,6 +15,7 @@ import { TitaniumSingleSelectBase } from '../../titanium/single-select-base/sing
 import { Debouncer } from '../../titanium/helpers/debouncer';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 import { getCompanyMarkUrl } from '@leavittsoftware/web/titanium/helpers/get-company-mark-url';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 /**
  *  Single select input that searches Leavitt Group companies
@@ -37,7 +38,7 @@ export class LeavittCompanySelect extends TitaniumSingleSelectBase<Partial<Compa
   /**
    *  Required
    */
-  @property({ attribute: false }) accessor apiService: ApiService;
+  @property({ attribute: false }) accessor apiService!: ApiService;
 
   /**
    *  Disables automatic loading of companies on firstUpdated
@@ -102,7 +103,7 @@ export class LeavittCompanySelect extends TitaniumSingleSelectBase<Partial<Compa
       const result = await get;
       return result?.toList() ?? [];
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return [];
   }
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
index cdebe7808..4c3f36eb7 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled-filter-dialog.ts
@@ -24,6 +24,7 @@ import ApiService from '../api-service/api-service';
 import { EmailTemplate } from '@leavittsoftware/lg-core-typescript';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 import { MdOutlinedSelect } from '@material/web/select/outlined-select';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type FilterKeys = 'template' | 'startDate' | 'endDate' | 'dateRange';
 
@@ -34,18 +35,18 @@ export class LeavittEmailHistoryViewerFilledFilterDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Boolean }) accessor isActive: boolean;
-  @property({ type: Object }) accessor apiService: ApiService | null;
+  @property({ type: Boolean }) accessor isActive: boolean = false;
+  @property({ type: Object }) accessor apiService: ApiService | null = null;
 
-  @state() private accessor filterController: FilterController<FilterKeys>;
+  @state() private accessor filterController!: FilterController<FilterKeys>;
   @state() private accessor template: Partial<EmailTemplate>[] = [];
-  @state() private accessor templateId: string;
+  @state() private accessor templateId: string = '';
 
   #templatesAreDirty = true;
 
   //Date range props
-  @state() private accessor startDate: string;
-  @state() private accessor endDate: string;
+  @state() private accessor startDate: string = '';
+  @state() private accessor endDate: string = '';
 
   @query('md-dialog') private accessor dialog!: MdDialog;
   @query('titanium-date-range-selector') private accessor dateRangeSelect!: TitaniumDateRangeSelector;
@@ -85,7 +86,7 @@ export class LeavittEmailHistoryViewerFilledFilterDialog extends LitElement {
       this.#templatesAreDirty = false;
       return entities;
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return [];
   }
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
index da406b241..a8155d907 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
@@ -44,6 +44,7 @@ import { isDevelopment } from '@leavittsoftware/web/titanium/helpers/is-developm
 
 import dayjs from 'dayjs/esm';
 import ApiService from '../api-service/api-service';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 type ItemType = Partial<EmailTemplateLog>;
 
@@ -54,10 +55,10 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Boolean }) public accessor isActive: boolean;
-  @property({ type: Object }) public accessor apiService: ApiService | null;
-  @property({ type: String }) public accessor path: string;
-  @property({ type: Object }) public accessor siteSearchTextFieldContext: TitaniumTextFieldSearchContext;
+  @property({ type: Boolean }) public accessor isActive: boolean = false;
+  @property({ type: Object }) public accessor apiService: ApiService | null = null;
+  @property({ type: String }) public accessor path: string = '';
+  @property({ type: Object }) public accessor siteSearchTextFieldContext!: TitaniumTextFieldSearchContext;
   @property({ type: String }) accessor apiControllerName: string = 'EmailTemplateLogs';
 
   /**
@@ -127,10 +128,10 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
 
   @query('titanium-data-table-core') private accessor dataTable!: TitaniumDataTableCore<ItemType>;
   @query('leavitt-email-history-viewer-filled-filter-dialog') private accessor filterDialog!: LeavittEmailHistoryViewerFilledFilterDialog;
-  @query('titanium-page-control') private accessor pageControl: TitaniumPageControl | null;
-  @query('leavitt-app-main-content-container') private accessor mainContentContainer: LeavittAppContentContainer | null;
-  @query('leavitt-view-sent-email-dialog') private accessor viewDialog: LeavittViewSentEmailDialog | null;
-  @query('leavitt-view-email-template-info-dialog') private accessor viewEmailTemplateInfoDialog: LeavittViewEmailTemplateInfoDialog | null;
+  @query('titanium-page-control') private accessor pageControl!: TitaniumPageControl | null;
+  @query('leavitt-app-main-content-container') private accessor mainContentContainer!: LeavittAppContentContainer | null;
+  @query('leavitt-view-sent-email-dialog') private accessor viewDialog!: LeavittViewSentEmailDialog | null;
+  @query('leavitt-view-email-template-info-dialog') private accessor viewEmailTemplateInfoDialog!: LeavittViewEmailTemplateInfoDialog | null;
 
   searchController: TitaniumSiteSearchTextFieldController | undefined;
 
@@ -281,7 +282,7 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
       const result = await get;
       return { items: result.toList(), odataCount: result.odataCount };
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error, { autoHide: 7500 }));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>, { autoHide: 7500 }));
     }
     return { items: [], odataCount: 0 };
   }
diff --git a/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts b/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
index 752a7a306..07f08811e 100644
--- a/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/view-email-template-info-dialog.ts
@@ -17,6 +17,7 @@ import { SnackbarStack } from '../../titanium/snackbar/snackbar-stack';
 import { p } from '../../titanium/styles/p';
 import { repeat } from 'lit/directives/repeat.js';
 import { h2 } from '../../titanium/styles/h2';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type CloseReason = 'done';
 
@@ -27,14 +28,14 @@ export class LeavittViewEmailTemplateInfoDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Object }) accessor apiService: ApiService | null;
+  @property({ type: Object }) accessor apiService: ApiService | null = null;
 
-  @state() private accessor emailTemplates: Partial<EmailTemplate>[] | null;
+  @state() private accessor emailTemplates: Partial<EmailTemplate>[] | null = null;
   @query('titanium-snackbar-stack') private accessor snackbar!: SnackbarStack;
 
-  @query('md-dialog') private accessor dialog: MdDialog;
+  @query('md-dialog') private accessor dialog!: MdDialog;
 
-  #resolve: (value: CloseReason) => void;
+  #resolve!: (value: CloseReason) => void;
   async open() {
     this.emailTemplates = [];
     this.dialog.returnValue = '';
@@ -64,7 +65,7 @@ export class LeavittViewEmailTemplateInfoDialog extends LitElement {
       const result = await get;
       return result?.entities;
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return [];
   }
diff --git a/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts b/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
index b82236471..bd9985df0 100644
--- a/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
+++ b/packages/web/leavitt/email-history-viewer/view-sent-email-dialog.ts
@@ -19,6 +19,7 @@ import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../../titan
 import ApiService from '../api-service/api-service';
 import { SnackbarStack } from '../../titanium/snackbar/snackbar-stack';
 import { p } from '../../titanium/styles/p';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type CloseReason = 'done';
 
@@ -29,15 +30,15 @@ export class LeavittViewSentEmailDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Object }) accessor apiService: ApiService | null;
+  @property({ type: Object }) accessor apiService: ApiService | null = null;
 
-  @state() private accessor emailTemplateLogId: number | null;
-  @state() private accessor emailTemplateLog: Partial<EmailTemplateLog> | null;
+  @state() private accessor emailTemplateLogId: number | null = null;
+  @state() private accessor emailTemplateLog: Partial<EmailTemplateLog> | null = null;
   @query('titanium-snackbar-stack') private accessor snackbar!: SnackbarStack;
 
-  @query('md-dialog') private accessor dialog: MdDialog;
+  @query('md-dialog') private accessor dialog!: MdDialog;
 
-  #resolve: (value: CloseReason) => void;
+  #resolve!: (value: CloseReason) => void;
   async open(emailTemplateLogId: number) {
     this.emailTemplateLogId = emailTemplateLogId;
     this.emailTemplateLog = null;
@@ -68,7 +69,7 @@ export class LeavittViewSentEmailDialog extends LitElement {
       const result = await get;
       return result?.entity;
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return null;
   }
diff --git a/packages/web/leavitt/error-page/error-page.ts b/packages/web/leavitt/error-page/error-page.ts
index c560f22c3..20c7daf53 100644
--- a/packages/web/leavitt/error-page/error-page.ts
+++ b/packages/web/leavitt/error-page/error-page.ts
@@ -24,10 +24,10 @@ export class LeavittErrorPage extends ThemePreference(LitElement) {
   @property() accessor heading: string | TemplateResult<1> = 'Hmm...';
   @property() accessor message: string | TemplateResult<1> = "It looks like that page doesn't exist.";
 
-  @query('div[particles]') private accessor particlesContainer: HTMLDivElement;
+  @query('div[particles]') private accessor particlesContainer!: HTMLDivElement;
 
-  #mdSysColorBackground: string;
-  #mdSysColorOnBackground: string;
+  #mdSysColorBackground!: string;
+  #mdSysColorOnBackground!: string;
   #particles: Container | undefined;
 
   async firstUpdated() {
diff --git a/packages/web/leavitt/file-explorer/add-folder-modal.ts b/packages/web/leavitt/file-explorer/add-folder-modal.ts
index 61c195da3..38ef3b281 100644
--- a/packages/web/leavitt/file-explorer/add-folder-modal.ts
+++ b/packages/web/leavitt/file-explorer/add-folder-modal.ts
@@ -13,6 +13,7 @@ import { DOMEvent } from '../../titanium/types/dom-event';
 import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field';
 import { promiseTracking } from '../../titanium/helpers/promise-tracking';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 @customElement('leavitt-add-folder-modal')
 export class AddFolderModal extends LitElement {
@@ -24,14 +25,14 @@ export class AddFolderModal extends LitElement {
   /**
    *  Required
    */
-  @property({ attribute: false }) accessor apiService: ApiService | null;
-  @property({ type: Number }) accessor fileExplorerId: number;
-  @property({ type: Number }) accessor parentFolderId: number;
+  @property({ attribute: false }) accessor apiService: ApiService | null = null;
+  @property({ type: Number }) accessor fileExplorerId: number = 0;
+  @property({ type: Number }) accessor parentFolderId: number = 0;
 
   @state() private accessor folderName: string = '';
   @query('md-dialog') private accessor dialog!: MdDialog;
 
-  resolve: (value: FileExplorerFolderDto | null) => void;
+  resolve!: (value: FileExplorerFolderDto | null) => void;
 
   async open() {
     this.folderName = '';
@@ -64,7 +65,7 @@ export class AddFolderModal extends LitElement {
         CreatorFullName: result?.CreatorPerson?.FullName,
       } as FileExplorerFolderDto;
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return null;
   }
diff --git a/packages/web/leavitt/file-explorer/file-explorer-image.ts b/packages/web/leavitt/file-explorer/file-explorer-image.ts
index c50e4d66b..b90a200a6 100644
--- a/packages/web/leavitt/file-explorer/file-explorer-image.ts
+++ b/packages/web/leavitt/file-explorer/file-explorer-image.ts
@@ -11,7 +11,7 @@ import { Attachment } from '@leavittsoftware/lg-core-typescript/lg.net.core';
 
 @customElement('leavitt-file-explorer-image')
 export class FileExplorerImage extends LitElement {
-  @property({ type: Object }) accessor attachment: Partial<Attachment>;
+  @property({ type: Object }) accessor attachment!: Partial<Attachment>;
 
   static styles = css`
     :host {
diff --git a/packages/web/leavitt/file-explorer/file-explorer.ts b/packages/web/leavitt/file-explorer/file-explorer.ts
index 4decf16eb..f7cd300c4 100644
--- a/packages/web/leavitt/file-explorer/file-explorer.ts
+++ b/packages/web/leavitt/file-explorer/file-explorer.ts
@@ -41,6 +41,7 @@ import { FileModal } from './file-modal';
 import { AddFolderModal } from './add-folder-modal';
 import { FolderModal } from './folder-modal';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 /**
  * Leavitt Group specific file explorer
@@ -64,7 +65,7 @@ export class LeavittFileExplorer extends LitElement {
   /**
    *  This is required.
    */
-  @property({ attribute: false }) accessor apiService: ApiService | null;
+  @property({ attribute: false }) accessor apiService: ApiService | null = null;
 
   /**
    * ID File explorer to display. This is required.
@@ -105,14 +106,14 @@ export class LeavittFileExplorer extends LitElement {
   @state() private accessor path: FileExplorerPathDto[] = [];
   @state() private accessor selected: ((FileExplorerFolderDto | FileExplorerFileDto) & { type: 'folder' | 'file' })[] = [];
 
-  @query('md-menu[upload-menu]') private accessor uploadMenu: MdMenu;
+  @query('md-menu[upload-menu]') private accessor uploadMenu!: MdMenu;
 
-  @query('leavitt-folder-modal') private accessor folderDialog: FolderModal;
-  @query('leavitt-add-folder-modal') private accessor addFolderDialog: AddFolderModal;
-  @query('leavitt-file-modal') private accessor fileDialog: FileModal;
-  @query('input[files]') private accessor fileInput: HTMLInputElement;
-  @query('input[folders]') private accessor folderInput: HTMLInputElement;
-  @query('titanium-confirmation-dialog') private accessor confirmationDialog: TitaniumConfirmationDialog;
+  @query('leavitt-folder-modal') private accessor folderDialog!: FolderModal;
+  @query('leavitt-add-folder-modal') private accessor addFolderDialog!: AddFolderModal;
+  @query('leavitt-file-modal') private accessor fileDialog!: FileModal;
+  @query('input[files]') private accessor fileInput!: HTMLInputElement;
+  @query('input[folders]') private accessor folderInput!: HTMLInputElement;
+  @query('titanium-confirmation-dialog') private accessor confirmationDialog!: TitaniumConfirmationDialog;
 
   #originalFolderId = 0;
 
@@ -120,10 +121,10 @@ export class LeavittFileExplorer extends LitElement {
     //force attribute to reflect
     this.display = structuredClone(this.display);
 
-    this.addEventListener(PendingStateEvent.eventType, async (e: PendingStateEvent) => {
+    this.addEventListener(PendingStateEvent.eventType, (async (e: PendingStateEvent) => {
       e.stopPropagation();
       this.trackLoadingPromise(e.detail.promise);
-    });
+    }) as unknown as EventListener);
 
     fileExplorerEvents.subscribe<FileExplorerAttachment>('FileExplorerFileDto', 'Update', (o) => {
       const index = this.files.findIndex((file) => file.Id === o.Id);
@@ -196,7 +197,8 @@ export class LeavittFileExplorer extends LitElement {
         this.state = this.folders.length > 0 || this.files.length > 0 ? 'files' : 'no-files';
       }
     } catch (error) {
-      if (error?.statusCode == 401 || error?.statusCode == 404) {
+      const httpError = error as Partial<HttpError>;
+      if (httpError?.statusCode == 401 || httpError?.statusCode == 404) {
         this.path = [{ Name: 'Files' } as FileExplorerPathDto];
         this.state = 'no-permission';
         return;
@@ -261,8 +263,9 @@ export class LeavittFileExplorer extends LitElement {
               this.dispatchEvent(new CustomEvent('file-deleted'));
             }
           } catch (newError) {
-            const newErrorCount = (errorMessageToCount.get(newError) ?? 0) + 1;
-            errorMessageToCount.set(newError, newErrorCount);
+            const message = newError instanceof Error ? newError.message : String(newError);
+            const newErrorCount = (errorMessageToCount.get(message) ?? 0) + 1;
+            errorMessageToCount.set(message, newErrorCount);
             totalErrorCount++;
           }
         })
@@ -358,7 +361,8 @@ export class LeavittFileExplorer extends LitElement {
           }
         }
       } catch (error) {
-        failedFiles.push(file.name + ': ' + error.message);
+        const message = error instanceof Error ? error.message : String(error);
+        failedFiles.push(file.name + ': ' + message);
       }
     });
 
@@ -401,7 +405,8 @@ export class LeavittFileExplorer extends LitElement {
           }
         }
       } catch (error) {
-        failedFiles.push(file.webkitRelativePath + ': ' + error.message);
+        const message = error instanceof Error ? error.message : String(error);
+        failedFiles.push(file.webkitRelativePath + ': ' + message);
       }
     });
 
@@ -444,7 +449,7 @@ export class LeavittFileExplorer extends LitElement {
       }
       return result;
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return null;
   }
diff --git a/packages/web/leavitt/file-explorer/file-list-item.ts b/packages/web/leavitt/file-explorer/file-list-item.ts
index 0a342421b..980ec6d0f 100644
--- a/packages/web/leavitt/file-explorer/file-list-item.ts
+++ b/packages/web/leavitt/file-explorer/file-list-item.ts
@@ -14,7 +14,7 @@ import { formatBytes } from './helpers/format-bytes';
 
 @customElement('file-list-item')
 export class FileListItem extends LitElement {
-  @property({ type: Object }) accessor file: FileExplorerFileDto;
+  @property({ type: Object }) accessor file!: FileExplorerFileDto;
   @property({ type: Boolean, reflect: true }) accessor selected: boolean = false;
   @property({ type: Number, reflect: true, attribute: 'selected-count' }) accessor selectedCount: number = 0;
   @property({ type: String, reflect: true, attribute: 'display' }) accessor display: 'grid' | 'list' = 'grid';
diff --git a/packages/web/leavitt/file-explorer/file-modal.ts b/packages/web/leavitt/file-explorer/file-modal.ts
index 1f42e9368..43c007548 100644
--- a/packages/web/leavitt/file-explorer/file-modal.ts
+++ b/packages/web/leavitt/file-explorer/file-modal.ts
@@ -22,6 +22,7 @@ import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field
 import ApiService from '../api-service/api-service';
 import { promiseTracking } from '../../titanium/helpers/helpers';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 @customElement('leavitt-file-modal')
 export class FileModal extends LitElement {
@@ -30,14 +31,14 @@ export class FileModal extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ attribute: false }) accessor apiService: ApiService | null;
+  @property({ attribute: false }) accessor apiService: ApiService | null = null;
   @property({ type: Boolean }) accessor enableEditing: boolean = false;
 
   @state() private accessor state: 'view' | 'edit' = 'view';
   @state() private accessor file: FileExplorerFileDto | null = null;
   @state() private accessor isCopying: boolean = false;
   @state() private accessor hasClipboard: boolean = false;
-  @state() private accessor fileName: string;
+  @state() private accessor fileName: string = '';
   @query('md-dialog') private accessor dialog!: MdDialog;
 
   firstUpdated() {
@@ -68,7 +69,7 @@ export class FileModal extends LitElement {
       fileExplorerEvents.dispatch('FileExplorerFileDto', 'Update', { ...this.file, Name: this.fileName });
       this.state = 'view';
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
   }
 
diff --git a/packages/web/leavitt/file-explorer/folder-list-item.ts b/packages/web/leavitt/file-explorer/folder-list-item.ts
index f977daaf1..dc63456e5 100644
--- a/packages/web/leavitt/file-explorer/folder-list-item.ts
+++ b/packages/web/leavitt/file-explorer/folder-list-item.ts
@@ -10,7 +10,7 @@ import { FileExplorerFolderDto } from '@leavittsoftware/lg-core-typescript';
 
 @customElement('folder-list-item')
 export class FolderListItem extends LitElement {
-  @property({ type: Object }) accessor folder: FileExplorerFolderDto;
+  @property({ type: Object }) accessor folder!: FileExplorerFolderDto;
   @property({ type: Boolean, reflect: true }) accessor selected: boolean = false;
   @property({ type: Number }) accessor selectedCount: number = 0;
   @property({ type: String, reflect: true, attribute: 'display' }) accessor display: 'grid' | 'list' = 'grid';
diff --git a/packages/web/leavitt/file-explorer/folder-modal.ts b/packages/web/leavitt/file-explorer/folder-modal.ts
index e905e9cb2..7e893015a 100644
--- a/packages/web/leavitt/file-explorer/folder-modal.ts
+++ b/packages/web/leavitt/file-explorer/folder-modal.ts
@@ -18,6 +18,7 @@ import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field
 import ApiService from '../api-service/api-service';
 import { promiseTracking } from '../../titanium/helpers/helpers';
 import { ShowSnackbarEvent } from '../..//titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 @customElement('leavitt-folder-modal')
 export class FolderModal extends LitElement {
@@ -26,12 +27,12 @@ export class FolderModal extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ attribute: false }) accessor apiService: ApiService | null;
+  @property({ attribute: false }) accessor apiService: ApiService | null = null;
   @property({ type: Boolean }) accessor enableEditing: boolean = false;
 
   @state() private accessor state: 'view' | 'edit' = 'view';
   @state() private accessor folder: FileExplorerFolderDto | null = null;
-  @state() private accessor folderName: string;
+  @state() private accessor folderName: string = '';
 
   @query('md-dialog') private accessor dialog!: MdDialog;
 
@@ -59,7 +60,7 @@ export class FolderModal extends LitElement {
       fileExplorerEvents.dispatch('FileExplorerFolder', 'Update', { ...this.folder, Name: this.folderName });
       this.state = 'view';
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
   }
 
diff --git a/packages/web/leavitt/person-company-select/person-company-select.ts b/packages/web/leavitt/person-company-select/person-company-select.ts
index 0ecf27f7d..ec6a2f8ef 100644
--- a/packages/web/leavitt/person-company-select/person-company-select.ts
+++ b/packages/web/leavitt/person-company-select/person-company-select.ts
@@ -11,6 +11,7 @@ import ApiService from '../api-service/api-service';
 import Fuse from 'fuse.js';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 import { getCompanyMarkUrl } from '../../titanium/helpers/get-company-mark-url';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type Person = CorePerson & { type: 'Person'; Name: string };
 export type Company = CoreCompany & { type: 'Company' };
@@ -42,7 +43,7 @@ export class LeavittPersonCompanySelect extends TitaniumSingleSelectBase<Partial
   /**
    *  Required
    */
-  @property({ attribute: false }) accessor apiService: ApiService;
+  @property({ attribute: false }) accessor apiService!: ApiService;
 
   @property({ reflect: true, type: String }) accessor autocomplete: string = 'off';
 
@@ -108,8 +109,9 @@ export class LeavittPersonCompanySelect extends TitaniumSingleSelectBase<Partial
       results?.entities.forEach((p) => (p.type = 'Person'));
       return results;
     } catch (error) {
-      if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+      const err = error as Partial<HttpError> & { name?: string; message?: string };
+      if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
     return null;
@@ -134,8 +136,9 @@ export class LeavittPersonCompanySelect extends TitaniumSingleSelectBase<Partial
       results?.entities.forEach((p) => (p.type = 'Company'));
       return results;
     } catch (error) {
-      if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+      const err = error as Partial<HttpError> & { name?: string; message?: string };
+      if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
     return null;
diff --git a/packages/web/leavitt/person-group-select/person-group-select.ts b/packages/web/leavitt/person-group-select/person-group-select.ts
index 5e77d135b..1b6e9afb9 100644
--- a/packages/web/leavitt/person-group-select/person-group-select.ts
+++ b/packages/web/leavitt/person-group-select/person-group-select.ts
@@ -11,6 +11,7 @@ import ApiService from '../api-service/api-service';
 import Fuse, { IFuseOptions } from 'fuse.js';
 import { peopleGroupIcons } from './people-group-icons';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type Person = CorePerson & { type: 'Person'; Name: string };
 export type PeopleGroup = CorePeopleGroup & { type: 'PeopleGroup' };
@@ -46,7 +47,7 @@ export class LeavittPersonGroupSelect extends TitaniumSingleSelectBase<Partial<P
   /**
    *  Required
    */
-  @property({ attribute: false }) accessor apiService: ApiService;
+  @property({ attribute: false }) accessor apiService!: ApiService;
 
   #doSearchDebouncer = new Debouncer((searchTerm: string) => this.#doSearch(searchTerm));
   #abortController: AbortController = new AbortController();
@@ -107,8 +108,9 @@ export class LeavittPersonGroupSelect extends TitaniumSingleSelectBase<Partial<P
       results?.entities.forEach((p) => (p.type = 'Person'));
       return results;
     } catch (error) {
-      if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+      const err = error as Partial<HttpError> & { name?: string; message?: string };
+      if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
     return null;
@@ -138,8 +140,9 @@ export class LeavittPersonGroupSelect extends TitaniumSingleSelectBase<Partial<P
       results?.entities.forEach((p) => (p.type = 'PeopleGroup'));
       return results;
     } catch (error) {
-      if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+      const err = error as Partial<HttpError> & { name?: string; message?: string };
+      if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
     return null;
diff --git a/packages/web/leavitt/person-select/person-select.ts b/packages/web/leavitt/person-select/person-select.ts
index bd63bca71..299e7791a 100644
--- a/packages/web/leavitt/person-select/person-select.ts
+++ b/packages/web/leavitt/person-select/person-select.ts
@@ -10,6 +10,7 @@ import '../profile-picture/profile-picture';
 import { Debouncer, getSearchTokens } from '../../titanium/helpers/helpers';
 import ApiService from '../api-service/api-service';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 /**
  *  Single select input that searches Leavitt Group users
@@ -33,7 +34,7 @@ export class LeavittPersonSelect extends TitaniumSingleSelectBase<Partial<Person
   /**
    *  Required
    */
-  @property({ attribute: false }) accessor apiService: ApiService;
+  @property({ attribute: false }) accessor apiService!: ApiService;
 
   /**
    *  Odata parts for the Person API call
@@ -100,7 +101,7 @@ export class LeavittPersonSelect extends TitaniumSingleSelectBase<Partial<Person
       const result = await get;
       return result?.toList() ?? [];
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
     return [];
   }
@@ -146,8 +147,9 @@ export class LeavittPersonSelect extends TitaniumSingleSelectBase<Partial<Person
         const result = await get;
         this.showSuggestions(result?.entities ?? [], result?.odataCount ?? 0);
       } catch (error) {
-        if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-          this.dispatchEvent(new ShowSnackbarEvent(error));
+        const err = error as Partial<HttpError> & { name?: string; message?: string };
+        if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+          this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
         }
       }
     }
diff --git a/packages/web/leavitt/profile-picture/profile-picture-menu.ts b/packages/web/leavitt/profile-picture/profile-picture-menu.ts
index 5c0fcccf8..5c3b10eae 100644
--- a/packages/web/leavitt/profile-picture/profile-picture-menu.ts
+++ b/packages/web/leavitt/profile-picture/profile-picture-menu.ts
@@ -20,14 +20,14 @@ import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager
  */
 @customElement('profile-picture-menu')
 export class ProfilePictureMenu extends LitElement {
-  @property({ type: Object }) accessor userManager: AuthZeroLgUserManager | null;
+  @property({ type: Object }) accessor userManager: AuthZeroLgUserManager | null = null;
 
   /**
    * Size in pixels of profile picture button
    */
   @property({ type: Number }) accessor size: number = 40;
 
-  @property({ type: String }) accessor profilePictureFileName: string | null;
+  @property({ type: String }) accessor profilePictureFileName: string | null = null;
 
   /**
    * Person id of user
@@ -49,7 +49,7 @@ export class ProfilePictureMenu extends LitElement {
    */
   @property({ type: String }) accessor name: string = '';
 
-  @query('md-menu') private accessor menu: MdMenu;
+  @query('md-menu') private accessor menu!: MdMenu;
 
   @property() positioning: 'absolute' | 'fixed' | 'document' | 'popover' = 'popover';
 
diff --git a/packages/web/leavitt/profile-picture/profile-picture.ts b/packages/web/leavitt/profile-picture/profile-picture.ts
index 85ee1d11d..b1f7235f6 100644
--- a/packages/web/leavitt/profile-picture/profile-picture.ts
+++ b/packages/web/leavitt/profile-picture/profile-picture.ts
@@ -16,7 +16,7 @@ export class ProfilePicture extends LitElement {
   /**
    * File name of the profile picture on CDN, no extension
    */
-  @property({ reflect: true, type: String }) accessor fileName: string | null;
+  @property({ reflect: true, type: String }) accessor fileName: string | null = null;
 
   /**
    * Shape of profile picture
@@ -26,17 +26,17 @@ export class ProfilePicture extends LitElement {
   /**
    * Shows a colored ring around the picture
    */
-  @property({ reflect: true, type: Boolean, attribute: 'show-ring' }) accessor showRing: boolean;
+  @property({ reflect: true, type: Boolean, attribute: 'show-ring' }) accessor showRing: boolean = false;
 
   /**
    * Shows a test user indicator at the bottom of the picture
    */
-  @property({ reflect: true, type: Boolean, attribute: 'show-test-user-indicator' }) accessor showTestUserIndicator: boolean;
+  @property({ reflect: true, type: Boolean, attribute: 'show-test-user-indicator' }) accessor showTestUserIndicator: boolean = false;
 
   /**
    * Makes the image a link to the respective profile page
    */
-  @property({ reflect: true, type: Number, attribute: 'profile-picture-link-person-id' }) accessor profilePictureLinkPersonId: number | null;
+  @property({ reflect: true, type: Number, attribute: 'profile-picture-link-person-id' }) accessor profilePictureLinkPersonId: number | null = null;
 
   /**
    * Size in pixels of profile picture
diff --git a/packages/web/leavitt/service-worker-notifier/service-worker-notifier.ts b/packages/web/leavitt/service-worker-notifier/service-worker-notifier.ts
index aca59d99b..f56b857b9 100644
--- a/packages/web/leavitt/service-worker-notifier/service-worker-notifier.ts
+++ b/packages/web/leavitt/service-worker-notifier/service-worker-notifier.ts
@@ -6,11 +6,11 @@ import '@material/web/progress/circular-progress';
 
 @customElement('leavitt-service-worker-notifier')
 export class LeavittServiceWorkerNotifier extends ThemePreference(LitElement) {
-  @query('main') private accessor main: HTMLElement;
+  @query('main') private accessor main!: HTMLElement;
 
   @state() private accessor isLoading: boolean = false;
 
-  #newWorker: ServiceWorker | null;
+  #newWorker!: ServiceWorker | null;
   #refreshing = false;
 
   async connectedCallback() {
diff --git a/packages/web/leavitt/theme/theme-preference.ts b/packages/web/leavitt/theme/theme-preference.ts
index f1a81af74..1d27ba42b 100644
--- a/packages/web/leavitt/theme/theme-preference.ts
+++ b/packages/web/leavitt/theme/theme-preference.ts
@@ -19,7 +19,7 @@ export declare class ThemePreferenceInterface {
 */
 export const ThemePreference = <T extends Constructor<LitElement>>(superClass: T) => {
   class ThemePreference extends superClass {
-    @property({ attribute: 'theme-preference', reflect: true }) themePreference: ThemePreferenceOption;
+    @property({ attribute: 'theme-preference', reflect: true }) themePreference: ThemePreferenceOption = 'light';
 
     connectedCallback() {
       super.connectedCallback();
diff --git a/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts b/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
index 17d39a39f..fc0e770f6 100644
--- a/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
+++ b/packages/web/leavitt/user-feedback/provide-feedback-dialog.ts
@@ -19,6 +19,7 @@ import { DOMEvent } from '../../titanium/types/dom-event';
 import { SnackbarStack } from '../../titanium/snackbar/snackbar-stack';
 import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../../titanium/hacks/dialog-navigation-hack';
 import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 @customElement('provide-feedback-dialog')
 export class ProvideFeedbackDialog extends LitElement {
@@ -27,10 +28,10 @@ export class ProvideFeedbackDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Object }) accessor userManager: AuthZeroLgUserManager;
+  @property({ type: Object }) accessor userManager!: AuthZeroLgUserManager;
   @query('md-dialog') private accessor dialog!: MdDialog;
-  @query('titanium-snackbar-stack') private accessor snackbar: SnackbarStack;
-  @query('md-outlined-text-field') private accessor textArea: MdOutlinedTextField;
+  @query('titanium-snackbar-stack') private accessor snackbar!: SnackbarStack;
+  @query('md-outlined-text-field') private accessor textArea!: MdOutlinedTextField;
 
   show() {
     this.reset();
@@ -74,7 +75,7 @@ export class ProvideFeedbackDialog extends LitElement {
         }
       }
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
   }
 
diff --git a/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts b/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
index ad3c9341e..f1a2002d3 100644
--- a/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
+++ b/packages/web/leavitt/user-feedback/report-a-problem-dialog.ts
@@ -21,6 +21,7 @@ import { DOMEvent } from '../../titanium/types/dom-event';
 import { SnackbarStack } from '../../titanium/snackbar/snackbar-stack';
 import { TitaniumSmartAttachmentInput } from '../../titanium/smart-attachment-input/smart-attachment-input';
 import { AuthZeroLgUserManager } from '../user-manager/auth-zero-lg-user-manager';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 @customElement('report-a-problem-dialog')
 export class ReportAProblemDialog extends LitElement {
@@ -29,12 +30,12 @@ export class ReportAProblemDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @property({ type: Object }) accessor userManager: AuthZeroLgUserManager;
+  @property({ type: Object }) accessor userManager!: AuthZeroLgUserManager;
   @query('md-dialog') private accessor dialog!: MdDialog;
-  @query('titanium-snackbar-stack') private accessor snackbar: SnackbarStack;
+  @query('titanium-snackbar-stack') private accessor snackbar!: SnackbarStack;
 
-  @query('md-outlined-text-field') private accessor textArea: MdOutlinedTextField;
-  @query('titanium-smart-attachment-input') private accessor imageInput: TitaniumSmartAttachmentInput | null;
+  @query('md-outlined-text-field') private accessor textArea!: MdOutlinedTextField;
+  @query('titanium-smart-attachment-input') private accessor imageInput!: TitaniumSmartAttachmentInput | null;
 
   show() {
     this.reset();
@@ -83,7 +84,7 @@ export class ReportAProblemDialog extends LitElement {
         this.dialog.close('done');
       }
     } catch (error) {
-      this.dispatchEvent(new ShowSnackbarEvent(error));
+      this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
     }
   }
 
diff --git a/packages/web/leavitt/user-manager/auth-zero-lg-user-manager.ts b/packages/web/leavitt/user-manager/auth-zero-lg-user-manager.ts
index 52643c662..80827a2e3 100644
--- a/packages/web/leavitt/user-manager/auth-zero-lg-user-manager.ts
+++ b/packages/web/leavitt/user-manager/auth-zero-lg-user-manager.ts
@@ -28,7 +28,7 @@ export class AuthZeroLgUserManager implements BearerTokenProvider {
 
   #isInitialized: boolean = false;
   #unrecoverableError: boolean = false;
-  #unrecoverableErrorDescription: string;
+  #unrecoverableErrorDescription!: string;
 
   public get identity() {
     return this.#decodeIdentity(this.#idToken);
@@ -116,7 +116,7 @@ export class AuthZeroLgUserManager implements BearerTokenProvider {
         try {
           await this.#exchangeCodeForToken(code);
         } catch (error) {
-          return this.#rejectAllAuthenticatePromises(error.message);
+          return this.#rejectAllAuthenticatePromises(error instanceof Error ? error.message : String(error));
         }
 
         if (this.#validateToken(this.#accessToken)) {
@@ -171,7 +171,7 @@ export class AuthZeroLgUserManager implements BearerTokenProvider {
           //try to get a new token
           await this.#refreshAccessToken(this.#refreshToken);
         } catch (error) {
-          return this.#rejectAllAuthenticatePromises(error.message);
+          return this.#rejectAllAuthenticatePromises(error instanceof Error ? error.message : String(error));
         }
 
         if (this.#validateToken(this.#accessToken)) {
@@ -369,7 +369,7 @@ export class AuthZeroLgUserManager implements BearerTokenProvider {
       return data.access_token;
     } catch (error) {
       if (!navigator.onLine) {
-        throw new Error('No internet connection. Please check your network.');
+        throw new Error('No internet connection. Please check your network.', { cause: error });
       }
       console.error('Error refreshing access token', error);
     }
@@ -414,10 +414,10 @@ export class AuthZeroLgUserManager implements BearerTokenProvider {
       return data.access_token;
     } catch (error) {
       if (!navigator.onLine) {
-        throw new Error('No internet connection. Please check your network.');
+        throw new Error('No internet connection. Please check your network.', { cause: error });
       }
       console.error('Token exchange failed', error);
-      throw new Error('Token exchange failed');
+      throw new Error('Token exchange failed', { cause: error });
     }
   }
 
diff --git a/packages/web/titanium/address-input/address-input.ts b/packages/web/titanium/address-input/address-input.ts
index 77f2ff6b1..62a909edc 100644
--- a/packages/web/titanium/address-input/address-input.ts
+++ b/packages/web/titanium/address-input/address-input.ts
@@ -29,7 +29,7 @@ export class TitaniumAddressInput extends GoogleAddressInput {
    */
   @property({ type: Boolean, attribute: 'show-county' }) accessor showCounty: boolean = false;
 
-  @query('manual-address-dialog') private accessor manualAddressDialog: ManualAddressDialog;
+  @query('manual-address-dialog') private accessor manualAddressDialog!: ManualAddressDialog;
 
   @property({ type: Boolean, attribute: 'has-selection', reflect: true }) private accessor hasSelection: boolean = false;
 
diff --git a/packages/web/titanium/address-input/google-address-input.ts b/packages/web/titanium/address-input/google-address-input.ts
index b586a3701..ad4d930a9 100644
--- a/packages/web/titanium/address-input/google-address-input.ts
+++ b/packages/web/titanium/address-input/google-address-input.ts
@@ -1,3 +1,4 @@
+/// <reference types="google.maps" />
 import { PropertyValues, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -12,6 +13,7 @@ import { placeResultToAddress } from './utils/place-result-to-address';
 import { addressToString } from './utils/address-to-string';
 import { AddressInputAddress } from './types/address-input-address';
 import { validateStreet } from './utils/validate-street';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 /**
  *  Single select input that searches Places using the Google Places API
@@ -24,7 +26,7 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
   /**
    *  **REQUIRED** GoogleAPI key for Places API
    */
-  @property({ type: String }) accessor googleMapsApiKey: string;
+  @property({ type: String }) accessor googleMapsApiKey: string = '';
 
   @property({ type: String }) accessor label: string = 'Address';
 
@@ -40,8 +42,8 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
 
   #doSearchDebouncer = new Debouncer((searchTerm: string) => this.#doSearch(searchTerm));
   #abortController: AbortController = new AbortController();
-  #placesService: google.maps.places.PlacesService;
-  #autoCompleteService: google.maps.places.AutocompleteService;
+  #placesService!: google.maps.places.PlacesService;
+  #autoCompleteService!: google.maps.places.AutocompleteService;
 
   async firstUpdated() {
     const loader = new Loader({
@@ -78,26 +80,23 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
       if (!this.allowInternational) {
         autoCompletionRequest.componentRestrictions = { country: ['us'] };
       }
-      this.#autoCompleteService.getPlacePredictions(
-        autoCompletionRequest,
-        (predictions: google.maps.places.AutocompletePrediction[] | null, status: google.maps.places.PlacesServiceStatus) => {
-          if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
-            console.warn(status);
-            return res([]);
-          }
-
-          return res(
-            predictions.map(
-              (o) =>
-                ({
-                  Id: o.place_id,
-                  primaryDisplayText: o?.structured_formatting?.main_text || o.description,
-                  secondaryText: o.structured_formatting?.secondary_text,
-                }) satisfies AddressInputAddress
-            )
-          );
+      this.#autoCompleteService.getPlacePredictions(autoCompletionRequest, (predictions: google.maps.places.AutocompletePrediction[] | null, status) => {
+        if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
+          console.warn(status);
+          return res([]);
         }
-      );
+
+        return res(
+          predictions.map(
+            (o) =>
+              ({
+                Id: o.place_id,
+                primaryDisplayText: o?.structured_formatting?.main_text || o.description,
+                secondaryText: o.structured_formatting?.secondary_text,
+              }) satisfies AddressInputAddress
+          )
+        );
+      });
     });
   }
 
@@ -131,8 +130,9 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
       this.showSuggestions(results, results.length);
       return;
     } catch (error) {
-      if (error?.name !== 'AbortError' && !error?.message?.includes('Abort error')) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+      const err = error as Partial<HttpError> & { name?: string; message?: string };
+      if (err?.name !== 'AbortError' && !err?.message?.includes('Abort error')) {
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
 
@@ -203,7 +203,7 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
           entity = { ...entity, ...address };
         }
       } catch (error) {
-        this.dispatchEvent(new ShowSnackbarEvent(error));
+        this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
       }
     }
     super.setSelected(entity);
diff --git a/packages/web/titanium/address-input/manual-address-dialog.ts b/packages/web/titanium/address-input/manual-address-dialog.ts
index 89bd6328d..690f3ddcf 100644
--- a/packages/web/titanium/address-input/manual-address-dialog.ts
+++ b/packages/web/titanium/address-input/manual-address-dialog.ts
@@ -21,11 +21,11 @@ import { countries } from '../helpers/address/country-abbr-to-titlecase';
 
 @customElement('manual-address-dialog')
 export class ManualAddressDialog extends LitElement {
-  @query('md-dialog') protected accessor dialog: MdDialog;
+  @query('md-dialog') protected accessor dialog!: MdDialog;
 
   @property({ type: String }) accessor label: string = '';
-  @property({ type: Boolean, attribute: 'show-county' }) accessor showCounty: boolean;
-  @property({ type: Boolean, attribute: 'show-street2' }) accessor showStreet2: boolean;
+  @property({ type: Boolean, attribute: 'show-county' }) accessor showCounty: boolean = false;
+  @property({ type: Boolean, attribute: 'show-street2' }) accessor showStreet2: boolean = false;
 
   @property({ type: Boolean, attribute: 'allow-international' }) accessor allowInternational: boolean = false;
 
@@ -37,9 +37,9 @@ export class ManualAddressDialog extends LitElement {
   @state() protected accessor state: string = '';
   @state() protected accessor zip: string = '';
 
-  @queryAll('md-filled-text-field, md-filled-select') protected accessor allInputs: NodeListOf<MdFilledTextField | MdFilledSelect>;
+  @queryAll('md-filled-text-field, md-filled-select') protected accessor allInputs!: NodeListOf<MdFilledTextField | MdFilledSelect>;
 
-  resolve: (value: Partial<AddressInputAddress> | null) => void;
+  resolve!: (value: Partial<AddressInputAddress> | null) => void;
 
   public async open(address: AddressInputAddress | null | undefined) {
     this.reset();
@@ -145,19 +145,17 @@ export class ManualAddressDialog extends LitElement {
           >
             <md-icon slot="leading-icon">markunread_mailbox</md-icon>
           </md-filled-text-field>
-          ${
-            this.showStreet2 || (this.country !== 'US' && this.country)
-              ? html`<md-filled-text-field
-                  @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
-                  label="Street 2/Apartment"
-                  autocomplete="address-line2"
-                  .value=${this.street2 || ''}
-                  @change=${(e: DOMEvent<MdFilledTextField>) => (this.street2 = e.target.value)}
-                >
-                  <md-icon slot="leading-icon">meeting_room</md-icon>
-                </md-filled-text-field>`
-              : nothing
-          }
+          ${this.showStreet2 || (this.country !== 'US' && this.country)
+            ? html`<md-filled-text-field
+                @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                label="Street 2/Apartment"
+                autocomplete="address-line2"
+                .value=${this.street2 || ''}
+                @change=${(e: DOMEvent<MdFilledTextField>) => (this.street2 = e.target.value)}
+              >
+                <md-icon slot="leading-icon">meeting_room</md-icon>
+              </md-filled-text-field>`
+            : nothing}
           <md-filled-text-field
             label="City"
             autocomplete="address-level2"
@@ -167,105 +165,99 @@ export class ManualAddressDialog extends LitElement {
             @change=${(e: DOMEvent<MdFilledTextField>) => (this.city = e.target.value)}
             ><md-icon slot="leading-icon">location_city</md-icon></md-filled-text-field
           >
-          ${
-            this.showCounty || (this.country !== 'US' && this.country)
-              ? html`<md-filled-text-field
+          ${this.showCounty || (this.country !== 'US' && this.country)
+            ? html`<md-filled-text-field
+                @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                label="County"
+                ?required=${!this.allowInternational || this.country === 'US'}
+                .value=${this.county || ''}
+                @change=${(e: DOMEvent<MdFilledTextField>) => (this.county = e.target.value)}
+                ><md-icon slot="leading-icon">explore</md-icon></md-filled-text-field
+              >`
+            : nothing}
+          ${this.allowInternational
+            ? html`<md-filled-select
+                @opening=${() => preventDialogOverflow(this.dialog)}
+                @closing=${() => allowDialogOverflow(this.dialog)}
+                @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
+                label="Country"
+                autocomplete="country"
+                required
+                .value=${this.country || ''}
+                @change=${(e: DOMEvent<MdFilledSelect>) => {
+                  e.stopPropagation();
+                  this.country = e.target.value;
+
+                  if (this.country === 'US') {
+                    const foundState = usStates?.find(
+                      (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
+                    );
+                    this.state = foundState ? foundState?.abbreviation : '';
+                  } else if (this.country === 'CA') {
+                    const foundState = caStates?.find(
+                      (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
+                    );
+                    this.state = foundState ? foundState?.abbreviation : '';
+                  } else {
+                    this.state = '';
+                  }
+                }}
+              >
+                <md-icon slot="leading-icon">map</md-icon>
+                ${countries.map((s) => html`<md-select-option value=${s.abbreviation}> <div slot="headline">${s.name}</div></md-select-option>`)}
+              </md-filled-select>`
+            : nothing}
+          ${this.allowInternational && this.country !== 'US' && this.country !== 'CA'
+            ? html`
+                <md-filled-text-field
+                  label="State/Province"
+                  autocomplete="address-level1"
+                  .value=${this.state || ''}
                   @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
-                  label="County"
-                  ?required=${!this.allowInternational || this.country === 'US'}
-                  .value=${this.county || ''}
-                  @change=${(e: DOMEvent<MdFilledTextField>) => (this.county = e.target.value)}
-                  ><md-icon slot="leading-icon">explore</md-icon></md-filled-text-field
-                >`
-              : nothing
-          }
-          ${
-            this.allowInternational
-              ? html`<md-filled-select
+                  @change=${(e: DOMEvent<MdFilledTextField>) => (this.state = e.target.value)}
+                >
+                  <md-icon slot="leading-icon">location_on</md-icon>
+                </md-filled-text-field>
+              `
+            : html`
+                <md-filled-select
                   @opening=${() => preventDialogOverflow(this.dialog)}
                   @closing=${() => allowDialogOverflow(this.dialog)}
                   @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
-                  label="Country"
-                  autocomplete="country"
+                  label="State"
+                  autocomplete="address-level1"
                   required
-                  .value=${this.country || ''}
+                  .value=${this.state || ''}
                   @change=${(e: DOMEvent<MdFilledSelect>) => {
                     e.stopPropagation();
-                    this.country = e.target.value;
-
-                    if (this.country === 'US') {
-                      const foundState = usStates?.find(
-                        (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
-                      );
-                      this.state = foundState ? foundState?.abbreviation : '';
-                    } else if (this.country === 'CA') {
-                      const foundState = caStates?.find(
-                        (s) => s.abbreviation.toLowerCase() === this.state.toLowerCase() || s.name?.toLowerCase() === this.state.toLowerCase()
-                      );
-                      this.state = foundState ? foundState?.abbreviation : '';
-                    } else {
-                      this.state = '';
+                    this.state = e.target.value;
+                    if (usStates.some((o) => o.abbreviation.toLowerCase() === this.state.toLowerCase())) {
+                      this.country = 'US';
                     }
                   }}
                 >
-                  <md-icon slot="leading-icon">map</md-icon>
-                  ${countries.map((s) => html`<md-select-option value=${s.abbreviation}> <div slot="headline">${s.name}</div></md-select-option>`)}
-                </md-filled-select>`
-              : nothing
-          }
-          ${
-            this.allowInternational && this.country !== 'US' && this.country !== 'CA'
-              ? html`
-                  <md-filled-text-field
-                    label="State/Province"
-                    autocomplete="address-level1"
-                    .value=${this.state || ''}
-                    @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
-                    @change=${(e: DOMEvent<MdFilledTextField>) => (this.state = e.target.value)}
-                  >
-                    <md-icon slot="leading-icon">location_on</md-icon>
-                  </md-filled-text-field>
-                `
-              : html`
-                  <md-filled-select
-                    @opening=${() => preventDialogOverflow(this.dialog)}
-                    @closing=${() => allowDialogOverflow(this.dialog)}
-                    @blur=${(e: DOMEvent<MdFilledTextField>) => reportValidityIfError(e.target)}
-                    label="State"
-                    autocomplete="address-level1"
-                    required
-                    .value=${this.state || ''}
-                    @change=${(e: DOMEvent<MdFilledSelect>) => {
-                      e.stopPropagation();
-                      this.state = e.target.value;
-                      if (usStates.some((o) => o.abbreviation.toLowerCase() === this.state.toLowerCase())) {
-                        this.country = 'US';
-                      }
-                    }}
-                  >
-                    <md-icon slot="leading-icon">location_on</md-icon>
+                  <md-icon slot="leading-icon">location_on</md-icon>
 
-                    ${usStates.map(
-                      (s) =>
-                        html`<md-select-option ?hidden=${this.country === 'CA'} ?selected=${s.abbreviation === this.state} value=${s.abbreviation}>
-                          <div slot="headline">${s.name}</div>
-                          <div slot="supporting-text">United States</div>
-                        </md-select-option>`
-                    )}
-                    ${caStates.map(
-                      (s) =>
-                        html`<md-select-option
-                          ?hidden=${!this.allowInternational || this.country === 'US'}
-                          ?selected=${s.abbreviation === this.state}
-                          value=${s.abbreviation}
-                        >
-                          <div slot="headline">${s.name}</div>
-                          <div slot="supporting-text">Canada</div>
-                        </md-select-option>`
-                    )}
-                  </md-filled-select>
-                `
-          }
+                  ${usStates.map(
+                    (s) =>
+                      html`<md-select-option ?hidden=${this.country === 'CA'} ?selected=${s.abbreviation === this.state} value=${s.abbreviation}>
+                        <div slot="headline">${s.name}</div>
+                        <div slot="supporting-text">United States</div>
+                      </md-select-option>`
+                  )}
+                  ${caStates.map(
+                    (s) =>
+                      html`<md-select-option
+                        ?hidden=${!this.allowInternational || this.country === 'US'}
+                        ?selected=${s.abbreviation === this.state}
+                        value=${s.abbreviation}
+                      >
+                        <div slot="headline">${s.name}</div>
+                        <div slot="supporting-text">Canada</div>
+                      </md-select-option>`
+                  )}
+                </md-filled-select>
+              `}
 
           <md-filled-text-field
             label="Zip"
diff --git a/packages/web/titanium/address-input/utils/place-result-to-address.ts b/packages/web/titanium/address-input/utils/place-result-to-address.ts
index 0b377358d..af28bd4dc 100644
--- a/packages/web/titanium/address-input/utils/place-result-to-address.ts
+++ b/packages/web/titanium/address-input/utils/place-result-to-address.ts
@@ -1,3 +1,4 @@
+/// <reference types="google.maps" />
 import { AddressInputAddress } from '../types/address-input-address';
 
 export function placeResultToAddress(place: google.maps.places.PlaceResult) {
diff --git a/packages/web/titanium/chip-multi-select/chip-multi-select.ts b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
index f678f592c..48b82b72e 100644
--- a/packages/web/titanium/chip-multi-select/chip-multi-select.ts
+++ b/packages/web/titanium/chip-multi-select/chip-multi-select.ts
@@ -19,7 +19,7 @@ export class TitaniumChipMultiSelect extends LitElement {
   /**
    *  Label of input to display to users
    */
-  @property({ type: String }) accessor label: string;
+  @property({ type: String }) accessor label: string = '';
 
   /**
    *  Text to show when there are no items
@@ -34,32 +34,32 @@ export class TitaniumChipMultiSelect extends LitElement {
   /**
    *  Indicates whether or not to show the no items text
    */
-  @property({ type: Boolean }) accessor hasItems: boolean;
+  @property({ type: Boolean }) accessor hasItems: boolean = false;
 
   /**
    *   Passes the supportingText property to the input-validator
    */
-  @property({ type: String }) accessor supportingText: string;
+  @property({ type: String }) accessor supportingText: string = '';
 
   /**
    *  Passes the error property to the input-validator
    */
-  @property({ type: Boolean }) accessor error: boolean;
+  @property({ type: Boolean }) accessor error: boolean = false;
 
   /**
    *  Passes the errorText property to the input-validator
    */
-  @property({ type: String }) accessor errorText: string;
+  @property({ type: String }) accessor errorText: string = '';
 
   /**
    *  Passes the resizable property to the input-validator
    */
-  @property({ type: Boolean }) accessor resizable: boolean;
+  @property({ type: Boolean }) accessor resizable: boolean = false;
 
   /**
    *  Whether or not the input should appear disabled (chips, buttons and anything else slotted will still have to be disabled individually).
    */
-  @property({ type: Boolean, reflect: true }) accessor disabled: boolean;
+  @property({ type: Boolean, reflect: true }) accessor disabled: boolean = false;
 
   @query('titanium-filled-input-validator') private accessor validator:
     | { checkValidity: () => boolean; reportValidity: () => boolean; reset: () => void }
diff --git a/packages/web/titanium/chip/chip.ts b/packages/web/titanium/chip/chip.ts
index f81f42551..71cf63a67 100644
--- a/packages/web/titanium/chip/chip.ts
+++ b/packages/web/titanium/chip/chip.ts
@@ -13,12 +13,12 @@ export class TitaniumChip extends LitElement {
   /**
    *  Label / text of the chip
    */
-  @property({ type: String }) accessor label: string;
+  @property({ type: String }) accessor label: string = '';
 
   /**
    *  When true, the chip is selected
    */
-  @property({ type: Boolean, reflect: true }) accessor selected: boolean;
+  @property({ type: Boolean, reflect: true }) accessor selected: boolean = false;
 
   /**
    * The URL that the link button points to.
@@ -41,12 +41,12 @@ export class TitaniumChip extends LitElement {
   /**
    *  When true, trailing slot is replaced with a remove icon button
    */
-  @property({ type: Boolean, reflect: true, attribute: 'input-chip' }) accessor inputChip: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'input-chip' }) accessor inputChip: boolean = false;
 
   /**
    *  Prevents mouse events and disables the ripple effect
    */
-  @property({ type: Boolean, reflect: true, attribute: 'non-interactive' }) accessor nonInteractive: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'non-interactive' }) accessor nonInteractive: boolean = false;
 
   /**
    *  Icon name of the remove icon chip
diff --git a/packages/web/titanium/circle-loading-indicator/circle-loading-indicator.ts b/packages/web/titanium/circle-loading-indicator/circle-loading-indicator.ts
index b692a70eb..7417cb3f1 100644
--- a/packages/web/titanium/circle-loading-indicator/circle-loading-indicator.ts
+++ b/packages/web/titanium/circle-loading-indicator/circle-loading-indicator.ts
@@ -13,13 +13,13 @@ import { PendingStateEvent } from '@leavittsoftware/web/titanium/types/pending-s
  */
 @customElement('titanium-circle-loading-indicator')
 export class TitaniumCircleLoadingIndicator extends LitElement {
-  @property({ type: Object }) accessor pendingStateElement: Element | null;
+  @property({ type: Object }) accessor pendingStateElement: Element | null = null;
 
-  @property({ type: Boolean, reflect: true }) private accessor open: boolean;
-  @property({ type: Boolean, reflect: true }) private accessor closed: boolean;
+  @property({ type: Boolean, reflect: true }) private accessor open: boolean = false;
+  @property({ type: Boolean, reflect: true }) private accessor closed: boolean = false;
 
-  #openDelayTimer: number;
-  #closeDelayTimer: number;
+  #openDelayTimer!: number;
+  #closeDelayTimer!: number;
 
   //Promises faster than this do not cause the scrim to open at all
   //Prevents flicker for fast promises
@@ -27,12 +27,12 @@ export class TitaniumCircleLoadingIndicator extends LitElement {
 
   // min time scrim has to remain open
   #minTimeOpen: number = 400;
-  #timeOpen: number;
+  #timeOpen!: number;
   #openCount = 0;
 
   firstUpdated() {
     const element = this.pendingStateElement ?? this;
-    element.addEventListener(PendingStateEvent.eventType, async (e: PendingStateEvent) => {
+    element.addEventListener(PendingStateEvent.eventType, (async (e: PendingStateEvent) => {
       e.stopPropagation();
       this.#open();
       this.#openCount++;
@@ -46,7 +46,7 @@ export class TitaniumCircleLoadingIndicator extends LitElement {
           this.#close();
         }
       }
-    });
+    }) as unknown as EventListener);
   }
 
   #open() {
diff --git a/packages/web/titanium/confirmation-dialog/confirmation-dialog.ts b/packages/web/titanium/confirmation-dialog/confirmation-dialog.ts
index a3e0c0d0a..6cb3ef497 100644
--- a/packages/web/titanium/confirmation-dialog/confirmation-dialog.ts
+++ b/packages/web/titanium/confirmation-dialog/confirmation-dialog.ts
@@ -12,8 +12,8 @@ import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../hacks/di
 
 @customElement('titanium-confirmation-dialog')
 export default class TitaniumConfirmationDialog extends LitElement {
-  @property({ type: String }) accessor text: string;
-  @property({ type: String }) accessor headline: string;
+  @property({ type: String }) accessor text: string = '';
+  @property({ type: String }) accessor headline: string = '';
   @property({ type: String, attribute: 'confirm-action-text' }) accessor confirmActionText: string = 'Confirm';
   @property({ type: String, attribute: 'cancel-action-text' }) accessor cancelActionText: string = 'Cancel';
   @property({ type: Boolean, attribute: 'disable-confirmation-action' }) accessor disableConfirmationAction: boolean = false;
@@ -21,7 +21,7 @@ export default class TitaniumConfirmationDialog extends LitElement {
 
   @query('md-dialog') protected accessor dialog!: MdDialog;
 
-  #resolve: (value: 'confirmed' | 'cancel') => void;
+  #resolve!: (value: 'confirmed' | 'cancel') => void;
 
   open = async (headline: string, text: string) => {
     this.headline = headline;
diff --git a/packages/web/titanium/data-table/data-table-action-bar.ts b/packages/web/titanium/data-table/data-table-action-bar.ts
index 592a0a521..6b0f26d5c 100644
--- a/packages/web/titanium/data-table/data-table-action-bar.ts
+++ b/packages/web/titanium/data-table/data-table-action-bar.ts
@@ -9,7 +9,7 @@ export class TitaniumDataTableActionBar<T extends object> extends LitElement {
   @property({ type: Array }) accessor selected: Array<Partial<T>> = [];
 
   @property({ type: Boolean, reflect: true, attribute: 'has-selected' }) private accessor hasSelected: boolean = false;
-  @property({ type: Boolean, reflect: true, attribute: 'has-add-button' }) private accessor hasAddButton: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'has-add-button' }) private accessor hasAddButton: boolean = false;
 
   @queryAssignedElements({ slot: 'add-button' }) private accessor addButtonElements!: Element[];
 
diff --git a/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts b/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
index 99f8a1b88..4e67d5e6b 100644
--- a/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
+++ b/packages/web/titanium/data-table/data-table-core-reorder-dialog.ts
@@ -20,6 +20,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { promiseTracking } from '../helpers/promise-tracking';
 import { ShowSnackbarEvent } from '../snackbar/show-snackbar-event';
 import { SnackbarStack } from '@leavittsoftware/web/titanium/snackbar/snackbar-stack';
+import { HttpError } from '@leavittsoftware/web/leavitt/api-service/HttpError';
 
 export type CloseReason = 'apply' | 'cancel';
 
@@ -33,7 +34,7 @@ export class TitaniumDataTableCoreReorderDialog<T extends object> extends LitEle
   @property({ type: Object }) accessor tableMetaData: TitaniumDataTableCoreMetaData<T> | null = null;
   @property({ type: Object }) accessor supplementalItemStyles: CSSResult | CSSResultGroup | null = null;
 
-  @query('md-dialog') private accessor dialog: MdDialog;
+  @query('md-dialog') private accessor dialog!: MdDialog;
   @query('titanium-snackbar-stack') private accessor snackbar!: SnackbarStack;
 
   @state() accessor items: Array<T> = [];
@@ -66,7 +67,7 @@ export class TitaniumDataTableCoreReorderDialog<T extends object> extends LitEle
     return JSON.stringify(sortA) !== JSON.stringify(sortB);
   }
 
-  #resolve: (value: CloseReason) => void;
+  #resolve!: (value: CloseReason) => void;
   static styles = [
     css`
       :host {
@@ -164,7 +165,7 @@ export class TitaniumDataTableCoreReorderDialog<T extends object> extends LitEle
               await saving;
               this.dialog?.close('apply');
             } catch (error) {
-              this.dispatchEvent(new ShowSnackbarEvent(error));
+              this.dispatchEvent(new ShowSnackbarEvent(error as Partial<HttpError>));
             }
           }}
           >Save
diff --git a/packages/web/titanium/data-table/data-table-core-reorder-item.ts b/packages/web/titanium/data-table/data-table-core-reorder-item.ts
index 1111f069d..ee2eaaf0c 100644
--- a/packages/web/titanium/data-table/data-table-core-reorder-item.ts
+++ b/packages/web/titanium/data-table/data-table-core-reorder-item.ts
@@ -9,7 +9,7 @@ import { dataTableContentStyles } from './data-table-content-styles';
 
 @customElement('titanium-data-table-core-reorder-item')
 export class TitaniumDataTableCoreReorderItem<T extends object> extends DraggableItemBase {
-  @property({ type: Object }) accessor item: T;
+  @property({ type: Object }) accessor item!: T;
   @property({ type: Object }) accessor tableMetaData: TitaniumDataTableCoreMetaData<T> | null = null;
   @property({ type: Object }) accessor supplementalItemStyles: CSSResult | CSSResultGroup | null = null;
 
diff --git a/packages/web/titanium/data-table/data-table-core-settings-choose-columns-dialog.ts b/packages/web/titanium/data-table/data-table-core-settings-choose-columns-dialog.ts
index 491dd722f..a4ed8dde7 100644
--- a/packages/web/titanium/data-table/data-table-core-settings-choose-columns-dialog.ts
+++ b/packages/web/titanium/data-table/data-table-core-settings-choose-columns-dialog.ts
@@ -26,7 +26,7 @@ export class TitaniumDataTableCoreSettingsChooseColumnsDialog<T extends object>
 
   @state() accessor customColumnsApplied: boolean = false;
 
-  @query('md-dialog') private accessor dialog: MdDialog;
+  @query('md-dialog') private accessor dialog!: MdDialog;
 
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has('tableMetaData')) {
@@ -90,7 +90,7 @@ export class TitaniumDataTableCoreSettingsChooseColumnsDialog<T extends object>
     });
   }
 
-  #resolve: (value: 'done') => void;
+  #resolve!: (value: 'done') => void;
   static styles = [
     css`
       :host {
diff --git a/packages/web/titanium/data-table/data-table-core-settings-choose-columns-item.ts b/packages/web/titanium/data-table/data-table-core-settings-choose-columns-item.ts
index 3727c33a5..c882530e4 100644
--- a/packages/web/titanium/data-table/data-table-core-settings-choose-columns-item.ts
+++ b/packages/web/titanium/data-table/data-table-core-settings-choose-columns-item.ts
@@ -8,9 +8,9 @@ import { DraggableItemBase } from './draggable-item-base';
 
 @customElement('titanium-data-table-core-settings-choose-columns-item')
 export class TitaniumDataTableCoreSettingsChooseColumnsItem extends DraggableItemBase {
-  @property({ type: String }) accessor name: string;
-  @property({ type: Boolean }) accessor selected: boolean;
-  @property({ type: Boolean }) accessor disabled: boolean;
+  @property({ type: String }) accessor name: string = '';
+  @property({ type: Boolean }) accessor selected: boolean = false;
+  @property({ type: Boolean }) accessor disabled: boolean = false;
 
   override get items() {
     return Array.from(
diff --git a/packages/web/titanium/data-table/data-table-core-settings-sort-dialog.ts b/packages/web/titanium/data-table/data-table-core-settings-sort-dialog.ts
index 2989610c1..06e0f7b79 100644
--- a/packages/web/titanium/data-table/data-table-core-settings-sort-dialog.ts
+++ b/packages/web/titanium/data-table/data-table-core-settings-sort-dialog.ts
@@ -26,8 +26,8 @@ export type CloseReason = 'apply' | 'cancel' | 'navigation-close';
 @customElement('titanium-data-table-core-settings-sort-dialog')
 export class TitaniumDataTableCoreSettingsSortDialog<T extends object> extends LitElement {
   @property({ type: Object }) accessor tableMetaData: TitaniumDataTableCoreMetaData<T> | null = null;
-  @query('md-dialog') private accessor dialog: MdDialog;
-  @query('md-menu') private accessor addMenu: MdMenu;
+  @query('md-dialog') private accessor dialog!: MdDialog;
+  @query('md-menu') private accessor addMenu!: MdMenu;
 
   @state() accessor sort: TitaniumDataTableCoreSortItem[] = [];
   #originalSort: TitaniumDataTableCoreSortItem[] = [];
@@ -47,8 +47,8 @@ export class TitaniumDataTableCoreSettingsSortDialog<T extends object> extends L
     return JSON.stringify(sortA) !== JSON.stringify(sortB);
   }
 
-  #repositionMenu: EventListener;
-  #resolve: (value: CloseReason) => void;
+  #repositionMenu!: EventListener;
+  #resolve!: (value: CloseReason) => void;
   static styles = [
     p,
     niceBadgeStyles,
diff --git a/packages/web/titanium/data-table/data-table-core-settings-sort-item.ts b/packages/web/titanium/data-table/data-table-core-settings-sort-item.ts
index a33e684fa..b441c5d6a 100644
--- a/packages/web/titanium/data-table/data-table-core-settings-sort-item.ts
+++ b/packages/web/titanium/data-table/data-table-core-settings-sort-item.ts
@@ -13,10 +13,10 @@ import { DraggableItemBase } from './draggable-item-base';
 
 @customElement('data-table-core-settings-sort-item')
 export class TitaniumDataTableCoreSettingsSortItem extends DraggableItemBase {
-  @property({ type: String }) accessor name: string;
-  @property({ type: String, reflect: true, attribute: 'sort-direction' }) accessor sortDirection: 'asc' | 'desc';
-  @property({ type: Number }) accessor index: number;
-  @property({ type: Boolean, reflect: true }) accessor disabled: boolean;
+  @property({ type: String }) accessor name: string = '';
+  @property({ type: String, reflect: true, attribute: 'sort-direction' }) accessor sortDirection!: 'asc' | 'desc';
+  @property({ type: Number }) accessor index: number = 0;
+  @property({ type: Boolean, reflect: true }) accessor disabled: boolean = false;
 
   override get items() {
     return Array.from(this.parentElement?.querySelectorAll<TitaniumDataTableCoreSettingsSortItem>('data-table-core-settings-sort-item') ?? []);
diff --git a/packages/web/titanium/data-table/data-table-core.ts b/packages/web/titanium/data-table/data-table-core.ts
index 233d82aa1..c1a436a1e 100644
--- a/packages/web/titanium/data-table/data-table-core.ts
+++ b/packages/web/titanium/data-table/data-table-core.ts
@@ -107,9 +107,9 @@ export class TitaniumDataTableCore<T extends object> extends LitElement {
    */
   @property({ type: Array }) accessor selected: Array<T> = [];
 
-  @query('titanium-data-table-core-settings-choose-columns-dialog') private accessor chooseColumnsDialog: TitaniumDataTableCoreSettingsChooseColumnsDialog<T>;
-  @query('titanium-data-table-core-settings-sort-dialog') private accessor sortDialog: TitaniumDataTableCoreSettingsSortDialog<T>;
-  @query('titanium-data-table-core-reorder-dialog') private accessor reorderDialog: TitaniumDataTableCoreReorderDialog<T>;
+  @query('titanium-data-table-core-settings-choose-columns-dialog') private accessor chooseColumnsDialog!: TitaniumDataTableCoreSettingsChooseColumnsDialog<T>;
+  @query('titanium-data-table-core-settings-sort-dialog') private accessor sortDialog!: TitaniumDataTableCoreSettingsSortDialog<T>;
+  @query('titanium-data-table-core-reorder-dialog') private accessor reorderDialog!: TitaniumDataTableCoreReorderDialog<T>;
   /**
    * Local storage key to save user settings for this data table.
    */
diff --git a/packages/web/titanium/data-table/draggable-item-base.ts b/packages/web/titanium/data-table/draggable-item-base.ts
index 2334579a8..5caf54fc1 100644
--- a/packages/web/titanium/data-table/draggable-item-base.ts
+++ b/packages/web/titanium/data-table/draggable-item-base.ts
@@ -18,14 +18,14 @@ export class ItemDropEvent extends Event {
 }
 
 export class DraggableItemBase extends LitElement {
-  @property({ type: Boolean, reflect: true, attribute: 'nudge-down' }) protected accessor nudgeDown: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'nudge-up' }) protected accessor nudgeUp: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'dragged' }) protected accessor dragged: boolean;
-  @property({ type: Boolean, reflect: true, attribute: 'dragging' }) protected accessor dragging: boolean;
-  @property({ type: Boolean, attribute: 'disable-drag', reflect: true }) protected accessor disableDrag: boolean;
-  @property({ type: Object }) protected accessor scrollableContainer: HTMLElement;
-
-  @state() protected accessor nudgeHeight: number;
+  @property({ type: Boolean, reflect: true, attribute: 'nudge-down' }) protected accessor nudgeDown: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'nudge-up' }) protected accessor nudgeUp: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'dragged' }) protected accessor dragged: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'dragging' }) protected accessor dragging: boolean = false;
+  @property({ type: Boolean, attribute: 'disable-drag', reflect: true }) protected accessor disableDrag: boolean = false;
+  @property({ type: Object }) protected accessor scrollableContainer!: HTMLElement;
+
+  @state() protected accessor nudgeHeight: number = 0;
   @state() protected accessor hoverIndex: number | null = null;
   @state() protected accessor originIndex: number | null = null;
 
diff --git a/packages/web/titanium/data-table/filter-controller.ts b/packages/web/titanium/data-table/filter-controller.ts
index 3e1615171..de7574b5e 100644
--- a/packages/web/titanium/data-table/filter-controller.ts
+++ b/packages/web/titanium/data-table/filter-controller.ts
@@ -110,7 +110,7 @@ export class FilterController<TKey extends string> {
     return this.#filters.get(key);
   }
 
-  #notifyTimer: number;
+  #notifyTimer!: number;
   #batchNotifyFiltersChanged() {
     clearTimeout(this.#notifyTimer);
     this.#setQueryString();
diff --git a/packages/web/titanium/data-table/page-control.ts b/packages/web/titanium/data-table/page-control.ts
index 9c7588724..44d7a4050 100644
--- a/packages/web/titanium/data-table/page-control.ts
+++ b/packages/web/titanium/data-table/page-control.ts
@@ -36,12 +36,12 @@ export class TitaniumPageControl extends LitElement {
   /**
    * Total number of items in all pages.
    */
-  @property({ type: Number }) accessor count: number;
+  @property({ type: Number }) accessor count: number = 0;
 
   /**
    * Local storage key to save the current page size.
    */
-  @property({ type: String, attribute: 'local-storage-key' }) accessor localStorageKey: string;
+  @property({ type: String, attribute: 'local-storage-key' }) accessor localStorageKey: string = '';
 
   /**
    * Label for the page control. If not provided, defaults to 'Items per page'.
@@ -51,9 +51,9 @@ export class TitaniumPageControl extends LitElement {
   /**
    * Disables the page control select and page navigation buttons when true
    */
-  @property({ type: Boolean }) accessor disabled: boolean;
+  @property({ type: Boolean }) accessor disabled: boolean = false;
 
-  @queryAsync('md-select') protected accessor select: MdFilledSelect;
+  @queryAsync('md-select') protected accessor select!: MdFilledSelect;
 
   /**
    * Gets or sets take value and assigns it to local storage.
@@ -159,24 +159,24 @@ export class TitaniumPageControl extends LitElement {
   render() {
     return html`
       <table-controls>
-          <div ellipsis>${this.label}</div>
-          <md-filled-select
-            ?disabled=${this.disabled}
-            @request-selection=${(e) => {
-              e.stopPropagation();
-              this.take = Number(e.target.value);
-              this.dispatchEvent(new CustomEvent('action', { composed: true }));
-            }}
-          >
-            ${repeat(
-              this.pageSizes,
-              (o) => o,
-              (o) =>
-                html` <md-select-option ?selected=${this.take === o} value=${o}>
-                  <div slot="headline">${o}</div>
-                </md-select-option>`
-            )}
-          </md-filled-select>
+        <div ellipsis>${this.label}</div>
+        <md-filled-select
+          ?disabled=${this.disabled}
+          @request-selection=${(e) => {
+            e.stopPropagation();
+            this.take = Number(e.target.value);
+            this.dispatchEvent(new CustomEvent('action', { composed: true }));
+          }}
+        >
+          ${repeat(
+            this.pageSizes,
+            (o) => o,
+            (o) =>
+              html` <md-select-option ?selected=${this.take === o} value=${o}>
+                <div slot="headline">${o}</div>
+              </md-select-option>`
+          )}
+        </md-filled-select>
         ${this.#getPageStats(this.page, this.count)}
         <table-paging>
           <md-icon-button @click=${this.#handleLastPageClick} ?disabled=${this.page === 0 || !this.count || this.disabled}>
diff --git a/packages/web/titanium/date-input/date-input.ts b/packages/web/titanium/date-input/date-input.ts
index 8e7ec7415..b0b3c25ac 100644
--- a/packages/web/titanium/date-input/date-input.ts
+++ b/packages/web/titanium/date-input/date-input.ts
@@ -169,7 +169,7 @@ export class TitaniumDateInput extends LitElement {
    */
   @property({ reflect: true, type: String }) accessor autocomplete = '';
 
-  @query('input') private accessor input: HTMLInputElement;
+  @query('input') private accessor input!: HTMLInputElement;
 
   @queryAssignedElements({ slot: 'leading-icon' }) private accessor leadingIcons!: Element[];
   @queryAssignedElements({ slot: 'trailing-icon' }) private accessor trailingIcons!: Element[];
diff --git a/packages/web/titanium/date-range-selector/date-range-selector.ts b/packages/web/titanium/date-range-selector/date-range-selector.ts
index 021dc0683..97e6f5015 100644
--- a/packages/web/titanium/date-range-selector/date-range-selector.ts
+++ b/packages/web/titanium/date-range-selector/date-range-selector.ts
@@ -81,7 +81,7 @@ export class TitaniumDateRangeSelector extends LitElement {
   @state() private accessor proposedRange: string = 'custom';
   @state() private accessor proposedStartDate: string = '';
   @state() private accessor proposedEndDate: string = '';
-  @state() protected accessor open: boolean;
+  @state() protected accessor open: boolean = false;
   @state() private accessor focused = false;
 
   async updated(changedProps) {
@@ -326,29 +326,27 @@ export class TitaniumDateRangeSelector extends LitElement {
           <section>
             <md-list>
               <!-- Recompute ranges on menu open -->
-              ${
-                this.open
-                  ? Array.from(this.customDateRanges ? this.customDateRanges : DateRanges).map(
-                      (o) =>
-                        html`<md-list-item
-                          type="button"
-                          ?selected=${this.proposedRange === o[0]}
-                          @click=${() => {
-                            this.proposedRange = o[0];
-                            const range = this.#getRange(o[0]);
-                            if (range) {
-                              this.proposedStartDate = range.startDate() ?? '';
-                              this.proposedEndDate = range.endDate() ?? '';
-                            }
-                          }}
-                          value=${o[0]}
-                        >
-                          <md-icon slot="start">${o[1].icon}</md-icon>
-                          <div slot="headline">${o[1].name}</div>
-                        </md-list-item>`
-                    )
-                  : nothing
-              }
+              ${this.open
+                ? Array.from(this.customDateRanges ? this.customDateRanges : DateRanges).map(
+                    (o) =>
+                      html`<md-list-item
+                        type="button"
+                        ?selected=${this.proposedRange === o[0]}
+                        @click=${() => {
+                          this.proposedRange = o[0];
+                          const range = this.#getRange(o[0]);
+                          if (range) {
+                            this.proposedStartDate = range.startDate() ?? '';
+                            this.proposedEndDate = range.endDate() ?? '';
+                          }
+                        }}
+                        value=${o[0]}
+                      >
+                        <md-icon slot="start">${o[1].icon}</md-icon>
+                        <div slot="headline">${o[1].name}</div>
+                      </md-list-item>`
+                  )
+                : nothing}
               <md-list-item type="button" ?selected=${this.proposedRange === 'custom'} @click=${() => (this.proposedRange = 'custom')} value="custom">
                 <md-icon slot="start">date_range</md-icon>
                 <div slot="headline">Custom range</div>
@@ -394,10 +392,8 @@ export class TitaniumDateRangeSelector extends LitElement {
           <menu-actions
             ><md-text-button @click=${() => (this.open = false)}>Cancel</md-text-button>
             <md-text-button
-              ?disabled=${
-                (this.startDate === this.proposedStartDate && this.endDate === this.proposedEndDate && this.proposedRange === this.range) ||
-                (this.type === 'datetime-local' && this.proposedRange === 'custom' && this.proposedStartDate?.length < 16 && this.proposedEndDate?.length < 16)
-              }
+              ?disabled=${(this.startDate === this.proposedStartDate && this.endDate === this.proposedEndDate && this.proposedRange === this.range) ||
+              (this.type === 'datetime-local' && this.proposedRange === 'custom' && this.proposedStartDate?.length < 16 && this.proposedEndDate?.length < 16)}
               @click=${() => {
                 if (!this.#validateDates(this.proposedStartDate, this.proposedEndDate)) {
                   return;
diff --git a/packages/web/titanium/drawer/drawer.ts b/packages/web/titanium/drawer/drawer.ts
index c76413c5e..5c9c886a4 100644
--- a/packages/web/titanium/drawer/drawer.ts
+++ b/packages/web/titanium/drawer/drawer.ts
@@ -13,7 +13,7 @@ import { redispatchEvent } from '@material/web/internal/events/redispatch-event'
  */
 @customElement('titanium-drawer')
 export class TitaniumDrawer extends LitElement {
-  @query('dialog') private accessor dialog: HTMLDialogElement | null;
+  @query('dialog') private accessor dialog!: HTMLDialogElement | null;
 
   /**
    * Set the position of content fixed when menu is closed. Only takes effect if always-show-content is set.
@@ -35,7 +35,7 @@ export class TitaniumDrawer extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'has-footer' }) private accessor hasFooter = false;
   @property({ type: Boolean, reflect: true, attribute: 'keep-open-when-going-to-flyover' }) private accessor keepOpenWhenGoingToFlyover = false;
 
-  @property({ type: String, reflect: true, attribute: 'mode' }) accessor mode: 'inline' | 'flyover' | null;
+  @property({ type: String, reflect: true, attribute: 'mode' }) accessor mode: 'inline' | 'flyover' | null = null;
   @property({ type: Boolean, reflect: true, attribute: 'open' }) accessor isOpen: boolean = false; //read only
 
   @queryAssignedElements({ slot: 'header' }) private readonly headerElements!: Element[];
diff --git a/packages/web/titanium/event-bus/event-bus.ts b/packages/web/titanium/event-bus/event-bus.ts
index 1cf6588ad..3843be3bd 100644
--- a/packages/web/titanium/event-bus/event-bus.ts
+++ b/packages/web/titanium/event-bus/event-bus.ts
@@ -18,7 +18,7 @@ export class EventBus<TEntityTypes, TEventTypes> {
       if (Array.isArray(eventTypes)) {
         eventTypes.forEach((o) => this.subscribe(entityType, o, callback));
       } else {
-        this.#addSubscription(entityType, eventTypes, callback);
+        this.#addSubscription(entityType, eventTypes, callback as EventCallback<unknown>);
       }
     }
   }
diff --git a/packages/web/titanium/helpers/debouncer.ts b/packages/web/titanium/helpers/debouncer.ts
index f83f4dcbe..cd000ffb8 100644
--- a/packages/web/titanium/helpers/debouncer.ts
+++ b/packages/web/titanium/helpers/debouncer.ts
@@ -1,6 +1,6 @@
 export class Debouncer<T, A> {
   #debouncePromise: Promise<T> | undefined;
-  #debounceResolve: { (arg0: T): void; (value?: T | PromiseLike<T> | undefined): void };
+  #debounceResolve!: (value: T) => void;
   #timer: number = 0;
   #work: (...args: A[]) => Promise<T>;
   #interval: number;
diff --git a/packages/web/titanium/helpers/pending-state-catcher.ts b/packages/web/titanium/helpers/pending-state-catcher.ts
index 455e2d42c..6579ee8f8 100644
--- a/packages/web/titanium/helpers/pending-state-catcher.ts
+++ b/packages/web/titanium/helpers/pending-state-catcher.ts
@@ -8,8 +8,16 @@ declare global {
 }
 
 export type Constructor<T> = { new (...args: any[]): T };
-export const PendingStateCatcher = <C extends Constructor<HTMLElement>>(base: C) =>
-  class extends base {
+
+export type PendingStateCatcherMixin = {
+  stateIsPending: boolean;
+  pendingStateCatcherLoadingStartDelay: number;
+  pendingStateCatcherMinTimeOpen: number;
+  pendingStateCatcherTarget: Promise<HTMLElement> | null;
+};
+
+export function PendingStateCatcher<C extends Constructor<HTMLElement>>(base: C): C & Constructor<PendingStateCatcherMixin> {
+  class PendingStateCatcherClass extends base {
     static get properties() {
       return {
         stateIsPending: { type: Boolean },
@@ -22,7 +30,7 @@ export const PendingStateCatcher = <C extends Constructor<HTMLElement>>(base: C)
     /**
      * !! Handled by the pending state catcher !!
      */
-    public accessor stateIsPending: boolean;
+    public accessor stateIsPending!: boolean;
 
     /**
      * Promises faster than this do not cause stateIsPending to be set to true at all
@@ -39,64 +47,68 @@ export const PendingStateCatcher = <C extends Constructor<HTMLElement>>(base: C)
      * async reference to the element that will be used to listen for pending state events
      * defaults to window
      */
-    public accessor pendingStateCatcherTarget: Promise<HTMLElement> | null;
+    public accessor pendingStateCatcherTarget!: Promise<HTMLElement> | null;
 
     /**
      *  @internal
      */
-    #loadingDelayTimer: number;
-    #closeDelayTimer: number;
-    #openCount = 0;
-    #timeStampOfLoadingStart: number;
+    private loadingDelayTimer!: number;
+    private closeDelayTimer!: number;
+    private openCount = 0;
+    private timeStampOfLoadingStart!: number;
+
+    private handlePendingStateEvent = async (e: Event) => {
+      const event = e as PendingStateEvent;
+      this.loadingStarted();
+      this.openCount++;
+      try {
+        await event.detail.promise;
+      } catch {
+        // Do nothing, this will be handled by others
+      } finally {
+        this.openCount--;
+        if (this.openCount === 0) {
+          this.loadingStopped();
+        }
+      }
+    };
 
     async connectedCallback() {
       super.connectedCallback();
 
       const target = (await this.pendingStateCatcherTarget) || window;
-      target.addEventListener(PendingStateEvent.eventType, this.#handlePendingStateEvent.bind(this));
+      target.addEventListener(PendingStateEvent.eventType, this.handlePendingStateEvent);
     }
 
     async disconnectedCallback() {
       super.disconnectedCallback();
 
       const target = (await this.pendingStateCatcherTarget) || window;
-      target.removeEventListener(PendingStateEvent.eventType, this.#handlePendingStateEvent.bind(this));
+      target.removeEventListener(PendingStateEvent.eventType, this.handlePendingStateEvent);
     }
 
-    async #handlePendingStateEvent(e: PendingStateEvent) {
-      this.#loadingStarted();
-      this.#openCount++;
-      try {
-        await e.detail.promise;
-      } catch {
-        // Do nothing, this will be handled by others
-      } finally {
-        this.#openCount--;
-        if (this.#openCount === 0) {
-          this.#loadingStopped();
-        }
-      }
-    }
-
-    #loadingStarted() {
-      window.clearTimeout(this.#loadingDelayTimer);
+    private loadingStarted() {
+      window.clearTimeout(this.loadingDelayTimer);
 
       //If new event is received while close timer is running, prevent the close
-      window.clearTimeout(this.#closeDelayTimer);
+      window.clearTimeout(this.closeDelayTimer);
 
-      this.#loadingDelayTimer = window.setTimeout(() => {
-        this.#timeStampOfLoadingStart = performance.now();
+      this.loadingDelayTimer = window.setTimeout(() => {
+        this.timeStampOfLoadingStart = performance.now();
         this.stateIsPending = true;
       }, this.pendingStateCatcherLoadingStartDelay);
     }
 
-    #loadingStopped() {
-      window.clearTimeout(this.#loadingDelayTimer);
-      const totalTimeOpened = performance.now() - this.#timeStampOfLoadingStart;
+    private loadingStopped() {
+      window.clearTimeout(this.loadingDelayTimer);
+      const totalTimeOpened = performance.now() - this.timeStampOfLoadingStart;
       const loadingStopDelay = Math.max(this.pendingStateCatcherMinTimeOpen - totalTimeOpened, 0);
 
-      this.#closeDelayTimer = window.setTimeout(() => {
+      this.closeDelayTimer = window.setTimeout(() => {
         this.stateIsPending = false;
       }, loadingStopDelay);
     }
-  };
+  }
+
+  return PendingStateCatcherClass as C & Constructor<PendingStateCatcherMixin>;
+}
diff --git a/packages/web/titanium/input-validator/filled-input-validator.ts b/packages/web/titanium/input-validator/filled-input-validator.ts
index fe94334bd..8e999302b 100644
--- a/packages/web/titanium/input-validator/filled-input-validator.ts
+++ b/packages/web/titanium/input-validator/filled-input-validator.ts
@@ -14,7 +14,7 @@ import { MdFilledField } from '@material/web/field/filled-field';
 @customElement('titanium-filled-input-validator')
 export class TitaniumFilledInputValidator extends MdFilledField {
   @property({ type: Boolean }) populated: boolean = true;
-  @property({ type: Object }) accessor evaluator: () => boolean;
+  @property({ type: Object }) accessor evaluator!: () => boolean;
 
   firstUpdated() {
     this.addEventListener('focusin', () => (this.focused = true));
diff --git a/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts b/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
index e47b28a88..1b855d414 100644
--- a/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
+++ b/packages/web/titanium/profile-picture-stack/profile-picture-stack.ts
@@ -19,7 +19,7 @@ export class TitaniumProfilePictureStack extends LitElement {
   /**
    * Array of people to display in a stack.
    */
-  @property({ type: Array }) accessor people: Array<Partial<Person | null | undefined>>;
+  @property({ type: Array }) accessor people: Array<Partial<Person | null | undefined>> = [];
 
   /**
    * Number to define the max number of people to display in a stack.
@@ -59,7 +59,7 @@ export class TitaniumProfilePictureStack extends LitElement {
    */
   @state() private accessor autoMax: number = 0;
 
-  #resizeObserver: ResizeObserver;
+  #resizeObserver!: ResizeObserver;
 
   updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('autoResize')) {
diff --git a/packages/web/titanium/search-input/filled-search-input.ts b/packages/web/titanium/search-input/filled-search-input.ts
index e0dbd9ef0..30d694402 100644
--- a/packages/web/titanium/search-input/filled-search-input.ts
+++ b/packages/web/titanium/search-input/filled-search-input.ts
@@ -16,7 +16,7 @@ export default class TitaniumFilledSearchInput extends LitElement {
   @property({ type: Boolean }) accessor spellcheck: boolean = false;
   @property({ type: Boolean }) accessor disabled: boolean = false;
 
-  @query('md-filled-text-field') private accessor textField: MdFilledTextField;
+  @query('md-filled-text-field') private accessor textField!: MdFilledTextField;
 
   static styles = css`
     :host {
diff --git a/packages/web/titanium/show-hide/show-hide.ts b/packages/web/titanium/show-hide/show-hide.ts
index 1d03aa611..ebb7a2a5d 100644
--- a/packages/web/titanium/show-hide/show-hide.ts
+++ b/packages/web/titanium/show-hide/show-hide.ts
@@ -30,8 +30,8 @@ export default class TitaniumShowHide extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'has-hidden-items' }) protected accessor hasHiddenItems: boolean = false;
   @property({ type: Number }) accessor hiddenItemCount: number = 0;
 
-  @query('items-container') protected accessor itemsContainer: HTMLElement;
-  @query('collapsed-box') protected accessor collapsedContainer: HTMLElement;
+  @query('items-container') protected accessor itemsContainer!: HTMLElement;
+  @query('collapsed-box') protected accessor collapsedContainer!: HTMLElement;
 
   updated(changedProps: PropertyValues<this>) {
     if (changedProps.has('collapsed')) {
@@ -121,9 +121,7 @@ export default class TitaniumShowHide extends LitElement {
         </items-container>
       </collapsed-box>
       <slot name="button" @click=${() => (this.collapsed = !this.collapsed)} ?hidden=${!this.hasHiddenItems}>
-        <md-filled-button part="button">
-          ${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'}
-        </md-filled-button>
+        <md-filled-button part="button"> ${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'} </md-filled-button>
       </slot>
     `;
   }
diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
index 07a117ec3..145097bf3 100644
--- a/packages/web/titanium/single-select-base/single-select-base.ts
+++ b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -27,13 +27,13 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @state() protected accessor searchTerm: string;
+  @state() protected accessor searchTerm: string = '';
   @state() protected accessor suggestions: Array<T> = [];
 
   //Suggestions shown to the user when no search terms are present
   @state() protected accessor defaultSuggestions: Array<T> = [];
 
-  @query('md-menu[suggestions]') protected accessor menu: Menu;
+  @query('md-menu[suggestions]') protected accessor menu!: Menu;
 
   /**
    *  Sets floating label value.
@@ -84,7 +84,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
    */
   @property({ type: Boolean }) accessor error: boolean = false;
 
-  @property({ type: String }) accessor errorText: string;
+  @property({ type: String }) accessor errorText: string = '';
 
   /**
    *  Displays error state if input is empty and input is blurred.
@@ -94,39 +94,39 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
   /**
    * An optional prefix to display before the input value.
    */
-  @property({ type: String }) accessor prefixText: string;
+  @property({ type: String }) accessor prefixText: string = '';
 
   /**
    * An optional suffix to display after the input value.
    */
-  @property({ type: String }) accessor suffixText: string;
+  @property({ type: String }) accessor suffixText: string = '';
 
   /**
    * Whether or not the text field has a leading icon. Used for SSR.
    */
-  @property({ type: Boolean }) accessor hasLeadingIcon: boolean;
+  @property({ type: Boolean }) accessor hasLeadingIcon: boolean = false;
 
   /**
    * Whether or not the text field has a trailing icon. Used for SSR.
    */
-  @property({ type: Boolean }) accessor hasTrailingIcon: boolean;
+  @property({ type: Boolean }) accessor hasTrailingIcon: boolean = false;
 
   /**
    * Prevents menu from automatically showing on focus.
    */
-  @property({ type: Boolean, attribute: 'disable-menu-open-on-focus' }) accessor disableMenuOpenOnFocus: boolean;
+  @property({ type: Boolean, attribute: 'disable-menu-open-on-focus' }) accessor disableMenuOpenOnFocus: boolean = false;
 
   /**
    * Conveys additional information below the text field, such as how it should
    * be used.
    */
-  @property({ type: String }) accessor supportingText: string;
+  @property({ type: String }) accessor supportingText: string = '';
 
   /**
    * Override the input text CSS `direction`. Useful for RTL languages that use
    * LTR notation for fractions.
    */
-  @property({ type: String }) accessor textDirection: string;
+  @property({ type: String }) accessor textDirection: string = '';
   @property({ type: String }) accessor pathToSelectedText: string = 'Name';
 
   @property() positioning: 'absolute' | 'fixed' | 'document' | 'popover' = 'popover';
@@ -141,7 +141,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
 
   #resizeObserver: ResizeObserver | null = null;
 
-  @state() protected accessor count: number;
+  @state() protected accessor count: number = 0;
 
   @property({ type: Boolean, attribute: 'menu-open', reflect: true }) private accessor menuOpen: boolean = false;
   @property({ type: Boolean, reflect: true, attribute: 'large' }) accessor large: boolean = false;
@@ -155,7 +155,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
     const textField = this.getTextField();
     if (textField && this.required) {
       const originalCheckValidity = textField?.checkValidity;
-      textField.checkValidity = () => !!this.selected && originalCheckValidity.bind(textField);
+      textField.checkValidity = () => !!this.selected && originalCheckValidity.call(textField);
     }
   }
 
@@ -558,11 +558,9 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
           this.setSelected(selectedMenuItem?.item);
         }}
       >
-        ${
-          !!this.searchTerm && !this.isLoading
-            ? html`<div summary>Showing ${this.suggestions.length} of ${this.count} result${this.count === 1 ? '' : 's'} for '${this.searchTerm}'</div>`
-            : ''
-        }
+        ${!!this.searchTerm && !this.isLoading
+          ? html`<div summary>Showing ${this.suggestions.length} of ${this.count} result${this.count === 1 ? '' : 's'} for '${this.searchTerm}'</div>`
+          : ''}
         ${repeat(
           this.suggestions,
           (item) => item?.Id,
diff --git a/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts b/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
index 6f9fd8e7b..d344c8490 100644
--- a/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
+++ b/packages/web/titanium/smart-attachment-input/crop-and-save-image-dialog.ts
@@ -53,19 +53,19 @@ export class CropAndSaveImageDialog extends LitElement {
   accessor isLoading = false;
   declare trackLoadingPromise: (promise: Promise<unknown>) => Promise<void>;
 
-  @query('md-dialog') accessor dialog: MdDialog;
-  @query('main') accessor main: HTMLElement;
-  @query('cropper-canvas') accessor cropperCanvas: CropperCanvas;
-  @query('cropper-selection') accessor cropperSelection: CropperSelection;
-  @query('cropper-image') accessor cropperImage: CropperImage;
-  @query('cropper-shade') accessor cropperShade: CropperShade;
+  @query('md-dialog') accessor dialog!: MdDialog;
+  @query('main') accessor main!: HTMLElement;
+  @query('cropper-canvas') accessor cropperCanvas!: CropperCanvas;
+  @query('cropper-selection') accessor cropperSelection!: CropperSelection;
+  @query('cropper-image') accessor cropperImage!: CropperImage;
+  @query('cropper-shade') accessor cropperShade!: CropperShade;
 
   /**
    *  Forces cropper to output PNG's
    */
-  @property({ type: Boolean, reflect: true, attribute: 'force-png' }) accessor forcePNGOutput: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'force-png' }) accessor forcePNGOutput: boolean = false;
 
-  @property({ type: Object }) accessor options: CropperOptions;
+  @property({ type: Object }) accessor options!: CropperOptions;
 
   @state() protected accessor fileName: string = '';
   @state() protected accessor src: string = '';
@@ -82,7 +82,7 @@ export class CropAndSaveImageDialog extends LitElement {
     this.#setUpResizeObserver();
   }
 
-  #resizeObserver: ResizeObserver;
+  #resizeObserver!: ResizeObserver;
 
   #setUpResizeObserver() {
     this.#resizeObserver = new ResizeObserver(() => {
@@ -95,7 +95,7 @@ export class CropAndSaveImageDialog extends LitElement {
   }
 
   #saveCroppedImageFunc: ((file: File, previewDataUrl: string) => Promise<void>) | undefined;
-  #resolve: (value: 'cropped' | 'cancel') => void;
+  #resolve!: (value: 'cropped' | 'cancel') => void;
   async open(url: string, filename: string, saveCroppedImageFunc?: (file: File, previewDataUrl: string) => Promise<void>) {
     this.#isReady = false;
     this.#saveCroppedImageFunc = saveCroppedImageFunc;
diff --git a/packages/web/titanium/smart-attachment-input/image-preview-dialog.ts b/packages/web/titanium/smart-attachment-input/image-preview-dialog.ts
index 6191c5f3f..056889aba 100644
--- a/packages/web/titanium/smart-attachment-input/image-preview-dialog.ts
+++ b/packages/web/titanium/smart-attachment-input/image-preview-dialog.ts
@@ -24,7 +24,7 @@ export class ImagePreviewDialog extends LitElement {
   @state() protected accessor downloadSrc: string | undefined;
   @state() protected accessor filename: string | undefined;
 
-  @query('md-dialog') protected accessor dialog: MdDialog;
+  @query('md-dialog') protected accessor dialog!: MdDialog;
 
   async open(imageUrl: string, downloadSrc?: string, filename?: string) {
     this.imageUrl = undefined; //prevent ghost images
diff --git a/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts b/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
index ce3e78683..28a68b6cd 100644
--- a/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
+++ b/packages/web/titanium/smart-attachment-input/smart-attachment-input.ts
@@ -42,11 +42,11 @@ export class TitaniumSmartAttachmentInput extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'is-over' }) protected accessor isOver: boolean = false;
   @property({ type: String }) protected accessor previewSrc: string | undefined = undefined;
 
-  @query('input') protected accessor input: HTMLInputElement;
+  @query('input') protected accessor input!: HTMLInputElement;
   @query('image-preview-dialog') protected accessor imagePreviewDialog!: ImagePreviewDialog;
   @query('crop-and-save-image-dialog') protected accessor cropperDialog!: CropAndSaveImageDialog;
-  @query('md-dialog[confirm-delete]') private accessor confirmDeleteDialog: MdDialog;
-  @query('titanium-chip-multi-select') private accessor chipMultiSelect: TitaniumChipMultiSelect;
+  @query('md-dialog[confirm-delete]') private accessor confirmDeleteDialog!: MdDialog;
+  @query('titanium-chip-multi-select') private accessor chipMultiSelect!: TitaniumChipMultiSelect;
 
   #originalFiles: SmartAttachment[] = [];
 
@@ -106,7 +106,7 @@ export class TitaniumSmartAttachmentInput extends LitElement {
   /**
    *  Sets supporting text
    */
-  @property({ type: String }) accessor supportingText: string;
+  @property({ type: String }) accessor supportingText: string = '';
 
   /**
    *  Text to show when there are no attachments
@@ -116,12 +116,12 @@ export class TitaniumSmartAttachmentInput extends LitElement {
   /**
    *  Configurable CropperJs options.
    */
-  @property({ type: Object }) accessor options: CropperOptions;
+  @property({ type: Object }) accessor options!: CropperOptions;
 
   /**
    *  Forces cropper to output PNG's
    */
-  @property({ type: Boolean, reflect: true, attribute: 'force-png' }) accessor forcePNGOutput: boolean;
+  @property({ type: Boolean, reflect: true, attribute: 'force-png' }) accessor forcePNGOutput: boolean = false;
 
   /**
    *  Image formats here are sent to the cropper
diff --git a/packages/web/titanium/snackbar/snackbar-stack.ts b/packages/web/titanium/snackbar/snackbar-stack.ts
index c0cd7b58b..1cf9a4eed 100644
--- a/packages/web/titanium/snackbar/snackbar-stack.ts
+++ b/packages/web/titanium/snackbar/snackbar-stack.ts
@@ -25,10 +25,10 @@ export class SnackbarStack extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    (this.eventListenerTarget || this.getRootNode()).addEventListener(ShowSnackbarEvent.eventName, (e: ShowSnackbarEvent) => {
+    (this.eventListenerTarget || this.getRootNode()).addEventListener(ShowSnackbarEvent.eventName, ((e: ShowSnackbarEvent) => {
       e.stopImmediatePropagation();
       this.open(e.SnackbarMessage, e.SnackbarOptions);
-    });
+    }) as EventListener);
   }
 
   static styles = [
diff --git a/packages/web/titanium/snackbar/snackbars/http-error-snackbar.ts b/packages/web/titanium/snackbar/snackbars/http-error-snackbar.ts
index 05626ecb2..002e8bc7c 100644
--- a/packages/web/titanium/snackbar/snackbars/http-error-snackbar.ts
+++ b/packages/web/titanium/snackbar/snackbars/http-error-snackbar.ts
@@ -14,12 +14,12 @@ import { SnackbarOptions } from '../types/snackbar-options';
 
 @customElement('titanium-http-error-snackbar')
 export class HttpErrorSnackbar extends LitElement {
-  #resolve: (reason: string) => void;
+  #resolve!: (reason: string) => void;
 
   /**
    * Firefox support
    */
-  @property({ type: Boolean, reflect: true }) private accessor open: boolean;
+  @property({ type: Boolean, reflect: true }) private accessor open: boolean = false;
 
   @property({ type: Array }) private accessor httpErrors: Partial<HttpError>[] = [];
 
diff --git a/packages/web/titanium/snackbar/snackbars/simple-snackbar.ts b/packages/web/titanium/snackbar/snackbars/simple-snackbar.ts
index 78c2baad8..bbfeb2e3b 100644
--- a/packages/web/titanium/snackbar/snackbars/simple-snackbar.ts
+++ b/packages/web/titanium/snackbar/snackbars/simple-snackbar.ts
@@ -10,16 +10,16 @@ import '@material/web/button/text-button';
 
 @customElement('titanium-simple-snackbar')
 export class SimpleSnackbar extends LitElement {
-  #resolve: (reason: string) => void;
+  #resolve!: (reason: string) => void;
 
   /**
    * Firefox support
    */
-  @property({ type: Boolean, reflect: true }) private accessor open: boolean;
+  @property({ type: Boolean, reflect: true }) private accessor open: boolean = false;
 
-  @property({ type: Boolean, reflect: true }) private accessor noAction: boolean;
-  @property({ type: String }) private accessor actionText: string;
-  @property({ type: String }) private accessor message: string | TemplateResult;
+  @property({ type: Boolean, reflect: true }) private accessor noAction: boolean = false;
+  @property({ type: String }) private accessor actionText: string = '';
+  @property({ type: String }) private accessor message!: string | TemplateResult;
 
   show(message: string, options?: SnackbarOptions) {
     //Firefox support
diff --git a/packages/web/titanium/toolbar/toolbar.ts b/packages/web/titanium/toolbar/toolbar.ts
index 5c8606253..7583859b8 100644
--- a/packages/web/titanium/toolbar/toolbar.ts
+++ b/packages/web/titanium/toolbar/toolbar.ts
@@ -18,7 +18,7 @@ export class TitaniumToolbar extends LitElement {
   /**
    * Adds a box shadow around the toolbar
    */
-  @property({ type: Boolean, reflect: true }) protected accessor shadow: boolean;
+  @property({ type: Boolean, reflect: true }) protected accessor shadow: boolean = false;
 
   static styles = css`
     :host {
diff --git a/tsconfig.json b/tsconfig.json
index 6959c0eed..515c05788 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "es2022",
-    "module": "esNext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "declarationMap": true,
     "lib": ["esnext", "dom", "dom.iterable"],
     "experimentalDecorators": true,
@@ -26,5 +26,5 @@
     }
   },
   "include": ["packages/**/*.ts"],
-  "exclude": ["**/*.d.ts", "**/*.css.ts", "node_modules"]
+  "exclude": ["**/*.d.ts", "**/*.css.ts", "**/*.test.ts", "**/*.spec.ts", "node_modules"]
 }
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index df7f15c34..e24b09397 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -1,13 +1,14 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "outDir": "spec/tmp",
     "rootDir": ".",
     "types": ["jasmine", "node"],
     "sourceMap": true,
     "esModuleInterop": true
   },
-  "include": ["packages/**/*.spec.ts", "packages/**/*.test.ts"]
+  "include": ["packages/**/*.spec.ts", "packages/**/*.test.ts"],
+  "exclude": ["**/*.d.ts", "**/*.css.ts", "node_modules"]
 }

From 82e6a4fcc93684a776c0d34c705f716c01574ac5 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 14:43:31 -0600
Subject: [PATCH 09/14] feat(address-input): migrate to
 @googlemaps/js-api-loader v2

Replace the removed Loader class with setOptions()/importLibrary(). Ship a guarded global process shim, imported before the loader, so the component works in browser environments that don't define process (raw ESM, esbuild without define, etc.) without requiring any bundler config from consumers.
---
 packages/web/.ncurc.js                              |  2 +-
 packages/web/CLAUDE.md                              |  2 ++
 packages/web/package.json                           |  2 +-
 .../titanium/address-input/google-address-input.ts  | 13 +++++++------
 .../address-input/google-maps-process-shim.ts       | 13 +++++++++++++
 5 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/titanium/address-input/google-maps-process-shim.ts

diff --git a/packages/web/.ncurc.js b/packages/web/.ncurc.js
index 333acf774..8f6fb8a94 100644
--- a/packages/web/.ncurc.js
+++ b/packages/web/.ncurc.js
@@ -1,4 +1,4 @@
-const rejectAll = ['@googlemaps/js-api-loader'];
+const rejectAll = [];
 const rejectMajor = [];
 
 module.exports = {
diff --git a/packages/web/CLAUDE.md b/packages/web/CLAUDE.md
index e911ce1b0..fb6693af4 100644
--- a/packages/web/CLAUDE.md
+++ b/packages/web/CLAUDE.md
@@ -641,6 +641,8 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Events:** `selected`; dispatches `ShowSnackbarEvent` on API errors
 
+**Usage notes / gotchas:** Loads Google Maps via `@googlemaps/js-api-loader` v2, which reads `process.env.NODE_ENV` at module scope. The component ships a guarded global `process` shim (`google-maps-process-shim.ts`, imported first) so it works in browser environments that don't define `process`; consumers need no bundler define.
+
 ---
 
 ### `titanium-chip`
diff --git a/packages/web/package.json b/packages/web/package.json
index 3c2bc22ec..0a0b2e915 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -16,7 +16,7 @@
     "**/*.jpg"
   ],
   "dependencies": {
-    "@googlemaps/js-api-loader": "1.16.10",
+    "@googlemaps/js-api-loader": "^2.1.1",
     "@leavittsoftware/lg-core-typescript": "*",
     "@lit/context": "^1.1.6",
     "@material/web": "*",
diff --git a/packages/web/titanium/address-input/google-address-input.ts b/packages/web/titanium/address-input/google-address-input.ts
index ad4d930a9..8b024a5c4 100644
--- a/packages/web/titanium/address-input/google-address-input.ts
+++ b/packages/web/titanium/address-input/google-address-input.ts
@@ -1,4 +1,6 @@
 /// <reference types="google.maps" />
+// Must precede the @googlemaps/js-api-loader import below; it reads process.env.NODE_ENV at module scope.
+import './google-maps-process-shim.js';
 import { PropertyValues, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -6,7 +8,7 @@ import { TitaniumSingleSelectBase } from '../../titanium/single-select-base/sing
 import { Debouncer } from '../../titanium/helpers/helpers';
 import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 
-import { Loader } from '@googlemaps/js-api-loader';
+import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
 
 import '@material/web/icon/icon';
 import { placeResultToAddress } from './utils/place-result-to-address';
@@ -46,13 +48,12 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
   #autoCompleteService!: google.maps.places.AutocompleteService;
 
   async firstUpdated() {
-    const loader = new Loader({
-      apiKey: this.googleMapsApiKey,
-      version: 'weekly',
-      libraries: ['places'],
+    setOptions({
+      key: this.googleMapsApiKey,
+      v: 'weekly',
     });
 
-    await loader.importLibrary('places');
+    await importLibrary('places');
 
     this.#placesService = new google.maps.places.PlacesService(document.createElement('div'));
     this.#autoCompleteService = new google.maps.places.AutocompleteService();
diff --git a/packages/web/titanium/address-input/google-maps-process-shim.ts b/packages/web/titanium/address-input/google-maps-process-shim.ts
new file mode 100644
index 000000000..baa6cfecf
--- /dev/null
+++ b/packages/web/titanium/address-input/google-maps-process-shim.ts
@@ -0,0 +1,13 @@
+// @googlemaps/js-api-loader v2 reads process.env.NODE_ENV at module scope, which throws in
+// browser environments that don't define `process` (raw ESM, esbuild w/o define, etc.).
+// Define a minimal shim only when absent so the component is self-contained for consumers.
+const globalProcess = globalThis as typeof globalThis & {
+  process?: { env?: Record<string, string | undefined> };
+};
+if (typeof globalProcess.process === 'undefined') {
+  globalProcess.process = { env: { NODE_ENV: 'production' } };
+} else if (typeof globalProcess.process.env === 'undefined') {
+  globalProcess.process.env = { NODE_ENV: 'production' };
+}
+
+export {};

From 758439e6040fcb2ecb64456ccc8f4143e39f1556 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 15:03:09 -0600
Subject: [PATCH 10/14] refactor(error-page): replace tsParticles with canvas
 starfield

Render theme-aware drifting, twinkling stars on a self-contained canvas with prefers-reduced-motion support, and remove @tsparticles/* dependencies. Also finish remaining package bumps and pin terser to one worker for Node 22+.
---
 package.json                                  |  18 +-
 packages/leavittbook/rollup.config.js         |   2 +
 packages/web/CLAUDE.md                        |   4 +-
 packages/web/leavitt/error-page/error-page.ts | 168 ++++++++++++++----
 packages/web/package.json                     |  10 +-
 5 files changed, 150 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index b96592f83..d94fe027b 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,10 @@
     "packages/*"
   ],
   "dependencies": {
-    "@leavittsoftware/lg-core-typescript": "^5.1208.0",
+    "@leavittsoftware/lg-core-typescript": "^5.1342.0",
     "@material/web": "^2.4.1",
     "api-viewer-element": "^1.0.0-pre.10",
-    "lit": "3.3.2",
+    "lit": "3.3.3",
     "page": "^1.11.6",
     "promise-parallel-throttle": "^3.5.0",
     "tslib": "^2.8.1"
@@ -19,9 +19,9 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@types/dom-navigation": "^1.0.7",
     "@types/google.maps": "*",
     "@types/jasmine": "^6.0.0",
@@ -30,14 +30,14 @@
     "@typescript-eslint/parser": "^8.62.0",
     "@web/dev-server": "^0.4.6",
     "@web/rollup-plugin-html": "^3.1.0",
-    "@web/rollup-plugin-import-meta-assets": "^2.3.2",
-    "concurrently": "^9.2.1",
+    "@web/rollup-plugin-import-meta-assets": "^2.3.3",
+    "concurrently": "^10.0.3",
     "deepmerge": "^4.3.1",
     "eslint": "^10.5.0",
-    "eslint-plugin-lit": "^2.2.1",
+    "eslint-plugin-lit": "^2.3.1",
     "eslint-plugin-wc": "^3.1.0",
-    "happy-dom": "^20.7.0",
-    "jasmine": "^6.1.0",
+    "happy-dom": "^20.10.6",
+    "jasmine": "^6.3.0",
     "jasmine-ts": "^0.4.0",
     "lerna": "^9.0.4",
     "lit-analyzer": "^2.0.3",
diff --git a/packages/leavittbook/rollup.config.js b/packages/leavittbook/rollup.config.js
index 089bd9ad8..00628250b 100644
--- a/packages/leavittbook/rollup.config.js
+++ b/packages/leavittbook/rollup.config.js
@@ -29,6 +29,8 @@ export default {
     nodeResolve(),
     /** Minify HTML */
     terser({
+      // @rollup/plugin-terser v1's multi-worker pool segfaults on Node 22+; pin to a single worker.
+      maxWorkers: 1,
       ecma: 2022,
       module: true,
       warnings: true,
diff --git a/packages/web/CLAUDE.md b/packages/web/CLAUDE.md
index fb6693af4..8ba4d9f95 100644
--- a/packages/web/CLAUDE.md
+++ b/packages/web/CLAUDE.md
@@ -874,7 +874,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 ### `leavitt-error-page`
 
-**Purpose:** Branded error page with particle star background; theme-aware.
+**Purpose:** Branded error page with an animated star background; theme-aware.
 
 **Import:** `import '@leavittsoftware/web/leavitt/error-page/error-page.js'`
 
@@ -883,7 +883,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 | Property | `heading` | `string \| TemplateResult` | Default `'Hmm...'` |
 | Property | `message` | `string \| TemplateResult` | |
 
-**Usage notes / gotchas:** Extends `ThemePreference`; uses `@tsparticles/preset-stars`
+**Usage notes / gotchas:** Extends `ThemePreference`; renders a self-contained `<canvas>` starfield (no external particle dependency) that drifts and twinkles, honors `prefers-reduced-motion`, and recolors on theme change.
 
 ---
 
diff --git a/packages/web/leavitt/error-page/error-page.ts b/packages/web/leavitt/error-page/error-page.ts
index 20c7daf53..d9237ebf3 100644
--- a/packages/web/leavitt/error-page/error-page.ts
+++ b/packages/web/leavitt/error-page/error-page.ts
@@ -4,11 +4,11 @@ import { property, customElement, query } from 'lit/decorators.js';
 import '../app/app-main-content-container';
 import '../app/app-width-limiter';
 
-import { Container, OptionsColor, tsParticles } from '@tsparticles/engine';
-import { loadStarsPreset } from '@tsparticles/preset-stars';
 import { ThemePreference, ThemePreferenceOption } from '../theme/theme-preference';
 import themePreferenceEvent from '../theme/theme-preference-event';
 
+type Star = { x: number; y: number; r: number; baseOpacity: number; phase: number; twinkleSpeed: number; vx: number; vy: number };
+
 /**
  * A pre-styled error page
  *
@@ -24,45 +24,140 @@ export class LeavittErrorPage extends ThemePreference(LitElement) {
   @property() accessor heading: string | TemplateResult<1> = 'Hmm...';
   @property() accessor message: string | TemplateResult<1> = "It looks like that page doesn't exist.";
 
-  @query('div[particles]') private accessor particlesContainer!: HTMLDivElement;
+  @query('canvas[particles]') private accessor canvas!: HTMLCanvasElement;
 
   #mdSysColorBackground!: string;
   #mdSysColorOnBackground!: string;
-  #particles: Container | undefined;
+  #ctx: CanvasRenderingContext2D | null = null;
+  #stars: Star[] = [];
+  #rafId = 0;
+  #resizeObserver?: ResizeObserver;
+  #reduceMotion = false;
+
+  #onThemeChange = (themePreference: ThemePreferenceOption) => {
+    this.#setColors(themePreference);
+    this.style.backgroundColor = this.#mdSysColorBackground;
+    if (this.#reduceMotion) {
+      this.#draw();
+    }
+  };
 
-  async firstUpdated() {
+  firstUpdated() {
     this.#setColors(this.themePreference);
-    themePreferenceEvent.subscribe('theme-preference', 'change', (themePreference: ThemePreferenceOption) => {
-      this.#setColors(themePreference);
+    this.style.backgroundColor = this.#mdSysColorBackground;
+    themePreferenceEvent.subscribe('theme-preference', 'change', this.#onThemeChange);
 
-      if (this.#particles) {
-        this.#particles.options.background.color = this.#mdSysColorBackground as unknown as OptionsColor;
-        this.#particles.options.particles.color.value = this.#mdSysColorOnBackground;
-        this.#particles.refresh();
-      }
-    });
-
-    await loadStarsPreset(tsParticles);
-
-    if (this.particlesContainer) {
-      this.#particles = await tsParticles.load({
-        element: this.particlesContainer,
-        options: {
-          preset: 'stars',
-          background: {
-            color: this.#mdSysColorBackground,
-          },
-          particles: {
-            color: {
-              value: this.#mdSysColorOnBackground,
-            },
-          },
-          fullScreen: {
-            enable: false,
-          },
-        },
+    this.#reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+
+    if (!this.canvas) {
+      return;
+    }
+    this.#ctx = this.canvas.getContext('2d');
+
+    this.#resizeObserver = new ResizeObserver(() => this.#resize());
+    this.#resizeObserver.observe(this.canvas);
+    this.#resize();
+
+    this.#startLoop();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#startLoop();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    cancelAnimationFrame(this.#rafId);
+    this.#rafId = 0;
+    this.#resizeObserver?.disconnect();
+    // EventBus.unsubscribe types the callback as EventCallback<entityType>, not the dispatched arg type.
+    themePreferenceEvent.unsubscribe('theme-preference', 'change', this.#onThemeChange as never);
+  }
+
+  #startLoop() {
+    if (!this.#ctx || this.#reduceMotion || this.#rafId) {
+      return;
+    }
+    this.#rafId = requestAnimationFrame(this.#tick);
+  }
+
+  #resize() {
+    if (!this.canvas) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+    const width = this.canvas.clientWidth;
+    const height = this.canvas.clientHeight;
+    if (width === 0 || height === 0) {
+      return;
+    }
+    this.canvas.width = Math.round(width * dpr);
+    this.canvas.height = Math.round(height * dpr);
+    this.#ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.#initStars(width, height);
+    if (this.#reduceMotion) {
+      this.#draw();
+    }
+  }
+
+  #initStars(width: number, height: number) {
+    const count = Math.min(160, Math.max(24, Math.round((width * height) / 9000)));
+    const stars: Star[] = [];
+    for (let i = 0; i < count; i++) {
+      stars.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        r: Math.random() * 1.6 + 0.7,
+        baseOpacity: Math.random() * 0.5 + 0.5,
+        phase: Math.random() * Math.PI * 2,
+        twinkleSpeed: Math.random() * 0.012 + 0.004,
+        vx: (Math.random() - 0.5) * 0.08,
+        vy: (Math.random() - 0.5) * 0.08,
       });
     }
+    this.#stars = stars;
+  }
+
+  #tick = () => {
+    if (!this.canvas) {
+      return;
+    }
+    const width = this.canvas.clientWidth;
+    const height = this.canvas.clientHeight;
+    for (const star of this.#stars) {
+      star.phase += star.twinkleSpeed;
+      star.x += star.vx;
+      star.y += star.vy;
+      if (star.x < 0) {
+        star.x += width;
+      } else if (star.x > width) {
+        star.x -= width;
+      }
+      if (star.y < 0) {
+        star.y += height;
+      } else if (star.y > height) {
+        star.y -= height;
+      }
+    }
+    this.#draw();
+    this.#rafId = requestAnimationFrame(this.#tick);
+  };
+
+  #draw() {
+    if (!this.#ctx || !this.canvas) {
+      return;
+    }
+    this.#ctx.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    this.#ctx.fillStyle = this.#mdSysColorOnBackground;
+    for (const star of this.#stars) {
+      const opacity = this.#reduceMotion ? star.baseOpacity : star.baseOpacity * (0.55 + 0.45 * Math.sin(star.phase));
+      this.#ctx.globalAlpha = Math.max(0, Math.min(1, opacity));
+      this.#ctx.beginPath();
+      this.#ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
+      this.#ctx.fill();
+    }
+    this.#ctx.globalAlpha = 1;
   }
 
   #setColors(themePreference: ThemePreferenceOption) {
@@ -76,6 +171,7 @@ export class LeavittErrorPage extends ThemePreference(LitElement) {
   static styles = css`
     :host {
       display: grid;
+      position: relative;
     }
 
     h1 {
@@ -141,9 +237,11 @@ export class LeavittErrorPage extends ThemePreference(LitElement) {
       }
     }
 
-    div[particles] {
+    canvas[particles] {
       position: absolute;
       inset: 0;
+      width: 100%;
+      height: 100%;
     }
 
     @keyframes spin {
@@ -160,7 +258,7 @@ export class LeavittErrorPage extends ThemePreference(LitElement) {
     return html`
       <leavitt-app-main-content-container>
         <leavitt-app-width-limiter>
-          <div particles></div>
+          <canvas particles></canvas>
           <h1>${this.heading}</h1>
           <h2>${this.message}</h2>
           <image-container>
diff --git a/packages/web/package.json b/packages/web/package.json
index 0a0b2e915..1815b0102 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -20,15 +20,13 @@
     "@leavittsoftware/lg-core-typescript": "*",
     "@lit/context": "^1.1.6",
     "@material/web": "*",
-    "@tsparticles/engine": "^3.9.1",
-    "@tsparticles/preset-stars": "^3.2.0",
     "@types/google.maps": "*",
-    "bowser": "^2.12.1",
-    "countup.js": "^2.9.0",
-    "cropperjs": "2.1.0",
+    "bowser": "^2.14.1",
+    "countup.js": "^2.10.0",
+    "cropperjs": "2.1.1",
     "dayjs": "^1.11.19",
     "export-to-csv": "^1.4.0",
-    "fuse.js": "^7.1.0",
+    "fuse.js": "^7.4.2",
     "jwt-decode": "^4.0.0",
     "promise-parallel-throttle": "^3.5.0",
     "regexparam": "~3.0.0",

From 7332aa9389ee3edb733660a381b0ce7aa0cc1a36 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 15:06:17 -0600
Subject: [PATCH 11/14] chore: remove unused dependencies and relocate
 countup.js

Drop eight unused root devDependencies, remove duplicate tslib from devDependencies, and move countup.js from @leavittsoftware/web to root so it is not published to npm consumers.
---
 package.json              | 10 +---------
 packages/web/package.json |  1 -
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/package.json b/package.json
index d94fe027b..ff06d7d41 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@leavittsoftware/lg-core-typescript": "^5.1342.0",
     "@material/web": "^2.4.1",
     "api-viewer-element": "^1.0.0-pre.10",
+    "countup.js": "^2.10.0",
     "lit": "3.3.3",
     "page": "^1.11.6",
     "promise-parallel-throttle": "^3.5.0",
@@ -19,10 +20,8 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
-    "@types/dom-navigation": "^1.0.7",
     "@types/google.maps": "*",
     "@types/jasmine": "^6.0.0",
     "@types/page": "^1.11.9",
@@ -32,25 +31,18 @@
     "@web/rollup-plugin-html": "^3.1.0",
     "@web/rollup-plugin-import-meta-assets": "^2.3.3",
     "concurrently": "^10.0.3",
-    "deepmerge": "^4.3.1",
     "eslint": "^10.5.0",
     "eslint-plugin-lit": "^2.3.1",
     "eslint-plugin-wc": "^3.1.0",
-    "happy-dom": "^20.10.6",
     "jasmine": "^6.3.0",
-    "jasmine-ts": "^0.4.0",
     "lerna": "^9.0.4",
     "lit-analyzer": "^2.0.3",
-    "patch-package": "^8.0.1",
     "prettier": "^3.8.1",
-    "replace": "^1.2.2",
     "rimraf": "^6.1.3",
     "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-workbox": "^8.1.3",
-    "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.0",
     "vscode-css-languageservice": "^6.3.10"
   },
   "overrides": {
diff --git a/packages/web/package.json b/packages/web/package.json
index 1815b0102..ff92c495b 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -22,7 +22,6 @@
     "@material/web": "*",
     "@types/google.maps": "*",
     "bowser": "^2.14.1",
-    "countup.js": "^2.10.0",
     "cropperjs": "2.1.1",
     "dayjs": "^1.11.19",
     "export-to-csv": "^1.4.0",

From 1fa1da48450d0ce8633e6b54ac9e5693cf0ca43c Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 15:20:27 -0600
Subject: [PATCH 12/14] chore: trim deprecated npm deps and tighten audit
 overrides

Drop rollup-plugin-copy in favor of a small inline Rollup copy plugin to remove inflight/glob@7, add overrides for dompurify, esbuild, js-yaml, and tar, and bump a few dev dependencies.
---
 package.json                          | 15 ++++++----
 packages/leavittbook/rollup.config.js | 41 ++++++++++++++++++---------
 packages/web/package.json             |  2 +-
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index ff06d7d41..e18b3840c 100644
--- a/package.json
+++ b/package.json
@@ -35,12 +35,11 @@
     "eslint-plugin-lit": "^2.3.1",
     "eslint-plugin-wc": "^3.1.0",
     "jasmine": "^6.3.0",
-    "lerna": "^9.0.4",
+    "lerna": "^9.0.7",
     "lit-analyzer": "^2.0.3",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.4",
     "rimraf": "^6.1.3",
-    "rollup": "^4.59.0",
-    "rollup-plugin-copy": "^3.5.0",
+    "rollup": "^4.62.2",
     "rollup-plugin-workbox": "^8.1.3",
     "typescript": "^6.0.3",
     "vscode-css-languageservice": "^6.3.10"
@@ -48,7 +47,13 @@
   "overrides": {
     "lit-analyzer": {
       "vscode-css-languageservice": "latest"
-    }
+    },
+    "dompurify": "^3.4.11",
+    "js-yaml": "^4.2.0",
+    "rollup-plugin-workbox": {
+      "esbuild": "^0.28.1"
+    },
+    "tar": "^7.5.17"
   },
   "scripts": {
     "start": "concurrently --kill-others --names tsc,wds,cem  \"tsc --watch\" \"web-dev-server\" \"npm run cem:watch\"",
diff --git a/packages/leavittbook/rollup.config.js b/packages/leavittbook/rollup.config.js
index 00628250b..429b3e8bc 100644
--- a/packages/leavittbook/rollup.config.js
+++ b/packages/leavittbook/rollup.config.js
@@ -1,11 +1,28 @@
+import { cpSync, existsSync, mkdirSync } from 'node:fs';
+import { basename, join } from 'node:path';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import copy from 'rollup-plugin-copy';
 import terser from '@rollup/plugin-terser';
 import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import { generateSW } from 'rollup-plugin-workbox';
 import path from 'path';
 
+/** Copies static assets into dist without pulling in deprecated glob/inflight via rollup-plugin-copy. */
+function copyStaticAssets(targets) {
+  return {
+    name: 'copy-static-assets',
+    writeBundle() {
+      for (const { src, dest } of targets) {
+        if (!existsSync(src)) {
+          continue;
+        }
+        mkdirSync(dest, { recursive: true });
+        cpSync(src, join(dest, basename(src)), { recursive: true });
+      }
+    },
+  };
+}
+
 export default {
   input: 'index.html',
   output: {
@@ -60,17 +77,15 @@ export default {
       clientsClaim: true,
       runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
     }),
-    copy({
-      targets: [
-        { src: 'custom-elements.json', dest: 'dist' },
-        { src: 'theme.css', dest: 'dist' },
-        { src: 'theme-custom.css', dest: 'dist' },
-        { src: 'manifest.json', dest: 'dist' },
-        { src: 'manifest', dest: 'dist' },
-        { src: 'fonts', dest: 'dist' },
-        { src: 'images', dest: 'dist' },
-        { src: '404.html', dest: 'dist' },
-      ],
-    }),
+    copyStaticAssets([
+      { src: 'custom-elements.json', dest: 'dist' },
+      { src: 'theme.css', dest: 'dist' },
+      { src: 'theme-custom.css', dest: 'dist' },
+      { src: 'manifest.json', dest: 'dist' },
+      { src: 'manifest', dest: 'dist' },
+      { src: 'fonts', dest: 'dist' },
+      { src: 'images', dest: 'dist' },
+      { src: '404.html', dest: 'dist' },
+    ]),
   ],
 };
diff --git a/packages/web/package.json b/packages/web/package.json
index ff92c495b..91c26782b 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -23,7 +23,7 @@
     "@types/google.maps": "*",
     "bowser": "^2.14.1",
     "cropperjs": "2.1.1",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.21",
     "export-to-csv": "^1.4.0",
     "fuse.js": "^7.4.2",
     "jwt-decode": "^4.0.0",

From 5032604058167cc98ab60a0b983e07ed8c3c92ec Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 15:35:58 -0600
Subject: [PATCH 13/14] docs(web): add agent upgrade changelog and loadWhile
 compat alias

Publish a migration guide in packages/web/CLAUDE.md for downstream bumps (Unreleased, 9.4.0, 9.0.0), restore deprecated dataTable.loadWhile() delegating to trackLoadingPromise, and extend the root doc-maintenance checklist for breaking releases.
---
 CLAUDE.md                                     |  5 +-
 packages/web/CLAUDE.md                        | 71 ++++++++++++++++++-
 .../titanium/data-table/data-table-core.ts    |  5 ++
 3 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 8b13b531b..5884549f3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -86,12 +86,14 @@ Update [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md) in the **same PR** whe
 - Change a component's public API (properties, attributes, methods, events, slots, CSS parts)
 - Change cross-cutting behavior documented there (events, controllers, services, loading/snackbar patterns)
 - Add or revise implementation gotchas that affect consumers
+- Ship or change a **breaking** (`!`) release — add or update the **Upgrade changelog (for agents)** section
 
 **Checklist per change:**
 
 - [ ] Component entry added/updated/removed (primary catalog or internal appendix as appropriate)
 - [ ] Cross-cutting section updated if the change affects shared patterns
 - [ ] Import path and tag name match the source file
+- [ ] **Upgrade changelog** entry added/updated for any `!` commit or semver-major publish (rename `### Unreleased` → `### X.Y.Z` on publish; add a fresh `### Unreleased` stub)
 
 `npm run cem` can help verify property lists against source, but purpose, usage notes, and gotchas must be curated manually.
 
@@ -100,9 +102,10 @@ Update [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md) in the **same PR** whe
 - Extend `LitElement`; register with `@customElement('kebab-case-name')` (must include a hyphen)
 - Use `@property() accessor` / `@state() accessor` (omit `accessor` on `@provide` / `@consume` context properties)
 - Side-effect imports for element registration; deep paths mirror source tree
-- Use `promiseTracking` for loading state (`LoadWhile` was removed)
+- Use `promiseTracking` for loading state on page components (`LoadWhile` mixin removed; `titanium-data-table-core.loadWhile()` remains as a deprecated alias for `trackLoadingPromise`)
 - Pair `ShowSnackbarEvent` with `titanium-snackbar-stack`; `PendingStateEvent` with loading indicators
 - Multi-word reflected attributes use **kebab-case** (`local-storage-key`, not `localStorageKey`)
+- Any PR with `feat!`, `fix!`, or `refactor!` must include an upgrade-changelog entry in `packages/web/CLAUDE.md` with grep targets and replacements
 
 ## What NOT to Do
 
diff --git a/packages/web/CLAUDE.md b/packages/web/CLAUDE.md
index 8ba4d9f95..e1455a069 100644
--- a/packages/web/CLAUDE.md
+++ b/packages/web/CLAUDE.md
@@ -17,6 +17,75 @@ Component and utility reference for agents consuming this package. Read this bef
 npm i @leavittsoftware/web
 ```
 
+## Upgrade changelog (for agents)
+
+When bumping `@leavittsoftware/web` in a downstream project, read every entry **after** the version currently installed. Each entry lists grep targets, removals, and replacements — not full release history (that lives in-repo at `CHANGELOG.md`).
+
+### Unreleased
+
+**Upgrade if coming from:** `< unreleased` (published latest is `9.9.0`)
+
+**Search downstream for:**
+
+- `LoadWhile` — mixin import or `extend LoadWhile(` on **page** components only (not `dataTable.loadWhile`)
+- `titanium-data-table` tag or import (legacy stack — not `data-table-core`)
+- `titanium-confirm-dialog` (not `confirmation-dialog`)
+- `titanium-error-page`, `titanium-access-denied-page`, `titanium-full-page-loading-indicator`
+- `titanium-card`, `titanium-header`
+- `leavitt-user-feedback` (shell component)
+- `leavitt/email-history-viewer/email-history-viewer` (unfilled legacy viewer)
+- `outlined-duration-input`, `outlined-input-validator`, unqualified `search-input` / `youtube-input` / `duration-input` import paths
+- `filled` attribute on date-input, date-range-selector, chip, chip-multi-select, page-control, show-hide, smart-attachment-input, single-select-base subclasses, manual-address-dialog
+
+**Removed** — delete imports/usages:
+
+| Removed | Replacement |
+|---------|-------------|
+| `@leavittsoftware/web/titanium/helpers/load-while` | `@promiseTracking` on page components — see Loading — `promiseTracking` |
+| `titanium-confirm-dialog` | `titanium-confirmation-dialog` |
+| `titanium-error-page` | `leavitt-error-page` |
+| Legacy `titanium-data-table`, `-item`, `-header` | `titanium-data-table-core` + action bar + page control |
+| `leavitt-user-feedback` | `provide-feedback-dialog` / `report-a-problem-dialog` directly |
+| `leavitt/email-history-viewer/email-history-viewer` | `leavitt-email-history-viewer-filled` only |
+| `titanium-card`, `titanium-header`, `titanium-access-denied-page`, `titanium-full-page-loading-indicator` | App-specific UI (no direct replacement) |
+| Outlined / unqualified input variants | Filled paths only (e.g. `filled-search-input`, `filled-duration-input`) |
+
+**Renamed / API changes:**
+
+- Page-level `LoadWhile` mixin / `this.loadWhile()` on the page host → `@promiseTracking` + `trackLoadingPromise` (see Loading — `promiseTracking`)
+- `dataTable.loadWhile(promise)` — **still supported** via deprecated alias on `titanium-data-table-core`; prefer `trackLoadingPromise` in new code
+- `itemMetaData[].sortExpression` → `getSortExpression: () => string` (since 9.0; still required if not yet migrated)
+
+**Behavior / styling:**
+
+- `filled` attribute removed from dual-style components — filled Material styling is always on
+- `google-address-input` uses `@googlemaps/js-api-loader` v2 internally; consumers still only pass `googleMapsApiKey` — no bundler `process` shim required
+- `leavitt-error-page` no longer uses tsParticles; no consumer particle config to migrate
+
+### 9.4.0
+
+**Upgrade if coming from:** `< 9.4.0`
+
+**Adopt before unreleased / 10.x:**
+
+- `@promiseTracking` decorator added — preferred for page-level loading flags
+- If page components still `extend LoadWhile(LitElement)`, migrate to `@promiseTracking` + `trackLoadingPromise` before upgrading past 9.9.x
+- `dataTable.loadWhile(promise)` call sites do **not** need changing (compat alias on `titanium-data-table-core`)
+
+### 9.0.0
+
+**Upgrade if coming from:** `< 9.0.0`
+
+**Search downstream for:**
+
+- `UserManager`, `GetUserManagerInstance`, `AuthenticatedTokenProvider`, `UserManagerUpdatedEvent`
+- `sortExpression:` in `TitaniumDataTableCoreMetaData` column defs
+
+**Renamed / API changes:**
+
+- Auth helpers above → `AuthZeroLgUserManager` (see Services — `AuthZeroLgUserManager`)
+- `itemMetaData[].sortExpression: 'Name'` → `getSortExpression: () => 'Name'`
+
 ## Import and registration
 
 There is no barrel `index.ts` and no `exports` map. Always use deep file paths:
@@ -431,7 +500,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 | Property | `supplementalItemStyles` | `CSSResult \| CSSResultGroup \| null` | Per-row styles |
 | State | `isLoading` | `boolean` | Via `promiseTracking` |
 
-**Methods:** `selectAll()`, `deselectAll()`, `resetSort()`, `trackLoadingPromise(promise)`
+**Methods:** `selectAll()`, `deselectAll()`, `resetSort()`, `trackLoadingPromise(promise)`, `loadWhile(promise)` (deprecated alias for `trackLoadingPromise`)
 
 **Events:**
 - `selected-changed` (composed)
diff --git a/packages/web/titanium/data-table/data-table-core.ts b/packages/web/titanium/data-table/data-table-core.ts
index c1a436a1e..39062962e 100644
--- a/packages/web/titanium/data-table/data-table-core.ts
+++ b/packages/web/titanium/data-table/data-table-core.ts
@@ -178,6 +178,11 @@ export class TitaniumDataTableCore<T extends object> extends LitElement {
     }
   }
 
+  /** @deprecated Use trackLoadingPromise. Alias kept for downstream compat. */
+  loadWhile(promise: Promise<unknown>) {
+    return this.trackLoadingPromise(promise);
+  }
+
   #notifySelectedChanged() {
     this.dispatchEvent(new Event('selected-changed', { composed: true }));
   }

From 92054d18b1ae8c967a01b6eb8d2ccdf0043eb212 Mon Sep 17 00:00:00 2001
From: Aaron Drabeck <github@aarondrabeck.com>
Date: Thu, 25 Jun 2026 16:08:58 -0600
Subject: [PATCH 14/14] refactor!: remove deprecated APIs and migrate address
 input to Places API (New)

Remove toolbarSearchTerm from email history viewer, drop always-show-content from titanium-drawer, and switch google-address-input to AutocompleteSuggestion/Place with clearer SERVICE_DISABLED errors. Expand agent docs for Material Web, upgrade changelog entries, and fix single-select-base host CSS tokens.
---
 CLAUDE.md                                     |   4 +-
 packages/leavittbook/src/my-app.ts            |   2 +-
 packages/web/CLAUDE.md                        | 671 ++++++++++--------
 .../email-history-viewer-filled.ts            |  22 +-
 .../address-input/google-address-input.ts     |  97 +--
 .../utils/place-result-to-address.ts          |  62 +-
 packages/web/titanium/drawer/drawer.ts        |  23 +-
 .../single-select-base/single-select-base.ts  |   2 +-
 8 files changed, 477 insertions(+), 406 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 5884549f3..c01931261 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -70,6 +70,8 @@ Paths mirror the source tree under `packages/web/`. Use `.js` extensions when im
 
 For per-component API (properties, methods, events, slots, CSS parts, and implementation notes), see [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md).
 
+Most titanium/leavitt elements **extend or compose** `@material/web` components (`MdFilledTextField`, `md-dialog`, etc.). Mixins, validation, and `--md-*` styling often apply to those Material Web bases — see **Material Web foundation** in `packages/web/CLAUDE.md` before assuming a component is a plain `LitElement` wrapper.
+
 After install, consuming projects find the same file at:
 
 ```
@@ -99,7 +101,7 @@ Update [`packages/web/CLAUDE.md`](packages/web/CLAUDE.md) in the **same PR** whe
 
 ## Contributing Conventions
 
-- Extend `LitElement`; register with `@customElement('kebab-case-name')` (must include a hyphen)
+- Extend `LitElement` or the appropriate `@material/web` base (e.g. `MdFilledTextField`); register with `@customElement('kebab-case-name')` (must include a hyphen)
 - Use `@property() accessor` / `@state() accessor` (omit `accessor` on `@provide` / `@consume` context properties)
 - Side-effect imports for element registration; deep paths mirror source tree
 - Use `promiseTracking` for loading state on page components (`LoadWhile` mixin removed; `titanium-data-table-core.loadWhile()` remains as a deprecated alias for `trackLoadingPromise`)
diff --git a/packages/leavittbook/src/my-app.ts b/packages/leavittbook/src/my-app.ts
index f7b8dc43b..017c09c71 100644
--- a/packages/leavittbook/src/my-app.ts
+++ b/packages/leavittbook/src/my-app.ts
@@ -328,7 +328,7 @@ export class MyApp extends PendingStateCatcher(LitElement) {
         </page-actions>
       </titanium-toolbar>
 
-      <titanium-drawer main-menu ?always-show-content=${this.mainMenuPosition !== 'drawer'}>
+      <titanium-drawer main-menu>
         <header slot="header">
           <leavitt-app-logo app-name="Titanium Elements"></leavitt-app-logo>
           <page-actions>
diff --git a/packages/web/CLAUDE.md b/packages/web/CLAUDE.md
index e1455a069..d93dc84e9 100644
--- a/packages/web/CLAUDE.md
+++ b/packages/web/CLAUDE.md
@@ -36,19 +36,23 @@ When bumping `@leavittsoftware/web` in a downstream project, read every entry **
 - `leavitt/email-history-viewer/email-history-viewer` (unfilled legacy viewer)
 - `outlined-duration-input`, `outlined-input-validator`, unqualified `search-input` / `youtube-input` / `duration-input` import paths
 - `filled` attribute on date-input, date-range-selector, chip, chip-multi-select, page-control, show-hide, smart-attachment-input, single-select-base subclasses, manual-address-dialog
+- `always-show-content` on `titanium-drawer`
+- `toolbarSearchTerm`, `toolbar-search-term` on `leavitt-email-history-viewer-filled`
 
 **Removed** — delete imports/usages:
 
-| Removed | Replacement |
-|---------|-------------|
-| `@leavittsoftware/web/titanium/helpers/load-while` | `@promiseTracking` on page components — see Loading — `promiseTracking` |
-| `titanium-confirm-dialog` | `titanium-confirmation-dialog` |
-| `titanium-error-page` | `leavitt-error-page` |
-| Legacy `titanium-data-table`, `-item`, `-header` | `titanium-data-table-core` + action bar + page control |
-| `leavitt-user-feedback` | `provide-feedback-dialog` / `report-a-problem-dialog` directly |
-| `leavitt/email-history-viewer/email-history-viewer` | `leavitt-email-history-viewer-filled` only |
-| `titanium-card`, `titanium-header`, `titanium-access-denied-page`, `titanium-full-page-loading-indicator` | App-specific UI (no direct replacement) |
-| Outlined / unqualified input variants | Filled paths only (e.g. `filled-search-input`, `filled-duration-input`) |
+| Removed                                                                                                   | Replacement                                                                               |
+| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `@leavittsoftware/web/titanium/helpers/load-while`                                                        | `@promiseTracking` on page components — see Loading — `promiseTracking`                   |
+| `titanium-confirm-dialog`                                                                                 | `titanium-confirmation-dialog`                                                            |
+| `titanium-error-page`                                                                                     | `leavitt-error-page`                                                                      |
+| Legacy `titanium-data-table`, `-item`, `-header`                                                          | `titanium-data-table-core` + action bar + page control                                    |
+| `leavitt-user-feedback`                                                                                   | `provide-feedback-dialog` / `report-a-problem-dialog` directly                            |
+| `leavitt/email-history-viewer/email-history-viewer`                                                       | `leavitt-email-history-viewer-filled` only                                                |
+| `titanium-card`, `titanium-header`, `titanium-access-denied-page`, `titanium-full-page-loading-indicator` | App-specific UI (no direct replacement)                                                   |
+| Outlined / unqualified input variants                                                                     | Filled paths only (e.g. `filled-search-input`, `filled-duration-input`)                   |
+| `always-show-content` on `titanium-drawer`                                                                | Set `mode="inline"` / `mode="flyover"` and call `open()` for inline sidebars              |
+| `toolbarSearchTerm` / `toolbar-search-term` on `leavitt-email-history-viewer-filled`                      | `.siteSearchTextFieldContext` + `TitaniumSiteSearchTextFieldController` — see Site search |
 
 **Renamed / API changes:**
 
@@ -59,7 +63,7 @@ When bumping `@leavittsoftware/web` in a downstream project, read every entry **
 **Behavior / styling:**
 
 - `filled` attribute removed from dual-style components — filled Material styling is always on
-- `google-address-input` uses `@googlemaps/js-api-loader` v2 internally; consumers still only pass `googleMapsApiKey` — no bundler `process` shim required
+- `google-address-input` uses `@googlemaps/js-api-loader` v2 internally; consumers still only pass `googleMapsApiKey` — no bundler `process` shim required. Enable **Places API (New)** (`places.googleapis.com`) plus **Maps JavaScript API** on the key's GCP project (legacy Places API is not enough).
 - `leavitt-error-page` no longer uses tsParticles; no consumer particle config to migrate
 
 ### 9.4.0
@@ -103,6 +107,65 @@ import { h2, p } from '@leavittsoftware/web/titanium/styles/styles.js';
 - Material Web elements (`md-filled-button`, `md-dialog`, etc.) must be imported separately by the consumer
 - Paths mirror source: `titanium/<feature>/<file>` or `leavitt/<feature>/<file>`
 
+## Material Web foundation
+
+Most `titanium-*` and `leavitt-*` elements are **built on** [Material Web](https://github.com/material-components/material-web) (`@material/web/*`) — either by **extending** an `Md*` class or by **composing** `md-*` tags inside a `LitElement` wrapper. When debugging API, validation, slots, or styling, check the matching Material Web component docs in addition to this file.
+
+### Extend vs compose
+
+| Pattern | What it means | Where to look for extra API |
+| ------- | ------------- | --------------------------- |
+| **Extends** | `class TitaniumFoo extends MdFilledTextField` (or `MdFilledField`, etc.) | Material Web docs for that base class — properties, attributes, methods, slots, and CSS parts apply on the **titanium tag** |
+| **Composes** | `class TitaniumFoo extends LitElement` and renders `<md-filled-text-field>` (or `md-dialog`, `md-menu`, …) in `render()` | This file + Material Web docs for the **inner** `md-*` tag; the titanium tag exposes its own curated API |
+
+Titanium **mixins and decorators** (`ThemePreference`, `promiseTracking`, …) apply to the **host class** they decorate. They do not replace Material Web behavior — an input that extends `MdFilledTextField` still has all text-field properties; one that composes `md-filled-text-field` exposes titanium properties on the host and Material Web behavior on the child.
+
+### Published components by pattern
+
+| Tag / family | Pattern | Material Web base or key children |
+| ------------ | ------- | --------------------------------- |
+| `titanium-filled-duration-input` | extends | `MdFilledTextField` |
+| `titanium-filled-youtube-input` | extends | `MdFilledTextField` |
+| `titanium-filled-input-validator` | extends | `MdFilledField` |
+| `titanium-filled-search-input` | composes | `md-filled-text-field` |
+| `titanium-date-input` | composes | `md-filled-field` |
+| `titanium-date-range-selector` | composes | `md-filled-field`, `md-menu`, `md-list` |
+| `titanium-single-select-base` and all `leavitt-*-select`, `titanium-icon-picker`, `google-address-input` | composes | `md-filled-text-field`, `md-menu`, `md-menu-item` |
+| `titanium-chip-multi-select` | composes | `titanium-filled-input-validator` (extends `MdFilledField`); slots intended for `md-filled-tonal-button`, `md-input-chip` |
+| `titanium-confirmation-dialog` and most modal/dialog components | composes | `md-dialog` (+ `md-filled-button` / `md-text-button` actions) |
+| `titanium-data-table-core` | composes | `md-checkbox`, `md-icon-button`, `md-menu` |
+| `titanium-page-control` | composes | `md-filled-select` |
+| `titanium-chip` | composes | `md-ripple`, `md-focus-ring` (custom chip — not `md-chip`) |
+| Snackbars, toolbars, many app-shell pieces | composes | assorted `md-icon`, `md-icon-button`, `md-filled-button`, etc. |
+
+When a component **extends** `MdFilledTextField` or `MdFilledField`, consumers can use standard Material field properties on the titanium tag: `label`, `error`, `error-text`, `supporting-text`, `required`, `disabled`, `prefix-text`, `suffix-text`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, leading/trailing icon slots, and documented CSS parts.
+
+### Styling
+
+Material Web theming uses **CSS custom properties** on `:host` or on a child `md-*` selector:
+
+```css
+:host {
+  --md-filled-text-field-container-shape: 24px;
+  --md-filled-text-field-container-color: var(--md-sys-color-surface-container-high);
+  --md-sys-color-primary: /* app theme */;
+}
+```
+
+- `--md-sys-color-*` — Material 3 color roles (surface, on-surface, primary, outline-variant, …)
+- `--md-filled-text-field-*`, `--md-filled-field-*`, `--md-dialog-*`, `--md-icon-button-*`, … — per-component tokens
+
+Set tokens on the titanium host when the inner `md-*` element inherits from `:host`, or target the child directly (e.g. `md-filled-text-field { … }` in the component's `static styles`). See `titanium-filled-search-input` and `titanium-drawer` for examples.
+
+### Internal utilities from Material Web
+
+Some titanium components import Material Web **internals** (not part of the public consumer API):
+
+- `redispatchEvent` from `@material/web/internal/events/redispatch-event` — re-bubbles native/MW events from composed children
+- `stringConverter` and field internals — used by `titanium-date-input` for form-associated behavior
+
+Do not import `@material/web/internal/*` from consuming applications unless Material Web documents those paths as stable.
+
 ## Tag naming caveats
 
 Several elements omit the `titanium-` / `leavitt-` prefix:
@@ -230,9 +293,7 @@ Define columns via `TitaniumDataTableCoreMetaData<T>`:
 tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
   uniqueKey: (item) => String(item.Id),
   itemLinkUrl: (item) => `/items/${item.Id}`,
-  itemMetaData: [
-    { key: 'name', friendlyName: 'Name', render: (item) => html`${item.Name}`, getSortExpression: () => 'Name' },
-  ],
+  itemMetaData: [{ key: 'name', friendlyName: 'Name', render: (item) => html`${item.Name}`, getSortExpression: () => 'Name' }],
   reorderConfig: { sortPropertyKey: 'SortOrder', reorderItemDisplayKey: 'Name' },
 };
 ```
@@ -245,11 +306,15 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 ## Inheritance bases
 
-| Base | Path | Used by |
-|------|------|---------|
-| `TitaniumSingleSelectBase` | `titanium/single-select-base/single-select-base` | All `leavitt-*-select`, `titanium-icon-picker`, `google-address-input` |
-| `google-address-input` | `titanium/address-input/google-address-input` | `titanium-address-input` |
-| `ThemePreference` mixin | `leavitt/theme/theme-preference` | `leavitt-app-logo`, `leavitt-error-page`, `leavitt-service-worker-notifier` |
+Titanium class inheritance (in addition to Material Web extend/compose — see **Material Web foundation**):
+
+| Base                       | Path                                             | Used by                                                                     |
+| -------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------- |
+| `MdFilledTextField`        | `@material/web/textfield/filled-text-field`      | `titanium-filled-duration-input`, `titanium-filled-youtube-input`           |
+| `MdFilledField`            | `@material/web/field/filled-field`               | `titanium-filled-input-validator`                                           |
+| `TitaniumSingleSelectBase` | `titanium/single-select-base/single-select-base` | All `leavitt-*-select`, `titanium-icon-picker`, `google-address-input`      |
+| `google-address-input`     | `titanium/address-input/google-address-input`    | `titanium-address-input`                                                    |
+| `ThemePreference` mixin    | `leavitt/theme/theme-preference`                 | `leavitt-app-logo`, `leavitt-error-page`, `leavitt-service-worker-notifier`, `titanium-single-select-base` |
 
 ---
 
@@ -265,10 +330,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `leavitt/app/app-main-content-container.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `main-menu-position` | `string` | From `mainMenuPositionContext`; `'drawer'` changes height/border-radius |
-| Property | `.pendingStateElement` | `Element \| null` | Host that dispatches `PendingStateEvent` for the circle loader |
+| Kind      | Name                   | Type / values     | Notes                                                                   |
+| --------- | ---------------------- | ----------------- | ----------------------------------------------------------------------- |
+| Attribute | `main-menu-position`   | `string`          | From `mainMenuPositionContext`; `'drawer'` changes height/border-radius |
+| Property  | `.pendingStateElement` | `Element \| null` | Host that dispatches `PendingStateEvent` for the circle loader          |
 
 **Methods:** —
 
@@ -279,6 +344,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 **CSS parts:** `loading-indicator`, `scroll-container`
 
 **Usage notes / gotchas:**
+
 - Height is `100dvh`-based; drawer mode removes right margin and border radius
 - When kicking off async work in `updated()`, `await this.appMainContentContainer?.updateComplete` first so the loader can appear
 
@@ -294,12 +360,12 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `leavitt/app/app-navigation-header.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `sticky-top` | `boolean` | Reflected |
-| Property | `scrollable-parent` | `Element \| null` | Auto-detected if unset |
-| Property | `level1Text` … `level5Text` | `string \| null` | Breadcrumb labels |
-| Property | `level1Href` … `level5Href` | `string \| null` | Breadcrumb links |
+| Kind      | Name                        | Type / values     | Notes                  |
+| --------- | --------------------------- | ----------------- | ---------------------- |
+| Attribute | `sticky-top`                | `boolean`         | Reflected              |
+| Property  | `scrollable-parent`         | `Element \| null` | Auto-detected if unset |
+| Property  | `level1Text` … `level5Text` | `string \| null`  | Breadcrumb labels      |
+| Property  | `level1Href` … `level5Href` | `string \| null`  | Breadcrumb links       |
 
 **Methods:** —
 
@@ -310,6 +376,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 **CSS parts:** `main`, `trailing`, `footer`
 
 **Usage notes / gotchas:**
+
 - Border appears when scrolled + `sticky-top`
 - Top-level nav labels should match page header text (level1 = top nav, level3 = sub-nav)
 
@@ -323,10 +390,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `leavitt/app/app-navigation-footer.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `max-width` | `string` | Default `'640px'` |
-| Property | `scrollable-parent` | `Element \| null` | |
+| Kind      | Name                | Type / values     | Notes             |
+| --------- | ------------------- | ----------------- | ----------------- |
+| Attribute | `max-width`         | `string`          | Default `'640px'` |
+| Property  | `scrollable-parent` | `Element \| null` |                   |
 
 **Methods:** `isOverflown(element: Element): boolean`
 
@@ -348,10 +415,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `leavitt/app/app-logo.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `href` | `string` | Default `'/'` |
-| Property | `title` | `string` | |
+| Kind      | Name       | Type / values    | Notes                            |
+| --------- | ---------- | ---------------- | -------------------------------- |
+| Property  | `href`     | `string`         | Default `'/'`                    |
+| Property  | `title`    | `string`         |                                  |
 | Attribute | `app-name` | `string \| null` | Title case; acronyms keep casing |
 
 **Methods / events / slots / parts:** —
@@ -368,9 +435,9 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `leavitt/app/app-width-limiter.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `max-width` | `string` | Default `'640px'` |
+| Kind      | Name        | Type / values | Notes             |
+| --------- | ----------- | ------------- | ----------------- |
+| Attribute | `max-width` | `string`      | Default `'640px'` |
 
 **Slots:** default
 
@@ -388,14 +455,13 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/drawer/drawer.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `mode` | `inline` \| `flyover` | |
-| Attribute | `open` | `boolean` | Read-only; reflected from `isOpen` |
-| Attribute | `direction` | `ltr` \| `rtl` | Animation direction |
-| Attribute | `fixed` | `boolean` | Content position when closed (with inline) |
-| Attribute | `always-show-content` | `boolean` | **Deprecated** — use `mode` |
-| Attribute | `keep-open-when-going-to-flyover` | `boolean` | Preserve open state on mode switch |
+| Kind      | Name                              | Type / values         | Notes                                           |
+| --------- | --------------------------------- | --------------------- | ----------------------------------------------- |
+| Attribute | `mode`                            | `inline` \| `flyover` |                                                 |
+| Attribute | `open`                            | `boolean`             | Read-only; reflected from `isOpen`              |
+| Attribute | `direction`                       | `ltr` \| `rtl`        | Animation direction                             |
+| Attribute | `fixed`                           | `boolean`             | Content position when closed (inline mode only) |
+| Attribute | `keep-open-when-going-to-flyover` | `boolean`             | Preserve open state on mode switch              |
 
 **Methods:** `open()`, `close()`, `toggle()`, `closeQuick()`
 
@@ -408,8 +474,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 **CSS custom properties:** `--md-sys-color-outline-variant`, `--md-sys-color-on-background`
 
 **Usage notes / gotchas:**
+
 - Swipe-left closes; backdrop click closes; `popstate` closes dialog
 - Flyover sets `html { overflow: hidden }`
+- Inline sidebar: set `mode="inline"` and call `open()`; do not use removed `always-show-content`
 - Switching `mode` from inline→flyover: use `keep-open-when-going-to-flyover` to stay open
 
 ---
@@ -422,9 +490,9 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/toolbar/toolbar.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `shadow` | `boolean` | Auto-set on document scroll |
+| Kind      | Name     | Type / values | Notes                       |
+| --------- | -------- | ------------- | --------------------------- |
+| Attribute | `shadow` | `boolean`     | Auto-set on document scroll |
 
 **Slots:** default (style slotted `[main-title]`)
 
@@ -440,12 +508,12 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/show-hide/show-hide.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `collapse-height` | `number` | Default `120` |
-| Attribute | `collapsed` | `boolean` | |
-| Attribute | `disable-fade` | `boolean` | |
-| Property | `hiddenItemCount` | `number` | Read-only count of clipped items |
+| Kind      | Name              | Type / values | Notes                            |
+| --------- | ----------------- | ------------- | -------------------------------- |
+| Attribute | `collapse-height` | `number`      | Default `120`                    |
+| Attribute | `collapsed`       | `boolean`     |                                  |
+| Attribute | `disable-fade`    | `boolean`     |                                  |
+| Property  | `hiddenItemCount` | `number`      | Read-only count of clipped items |
 
 **Events:** `collapsed-changed`, `hidden-item-count-changed`
 
@@ -465,9 +533,9 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/collapsible-container/collapsible-container.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Attribute | `opened`, `disabled` | `boolean` | Reflected |
+| Kind      | Name                 | Type / values | Notes     |
+| --------- | -------------------- | ------------- | --------- |
+| Attribute | `opened`, `disabled` | `boolean`     | Reflected |
 
 **Slots:** `header`, `content`
 
@@ -487,22 +555,23 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/data-table/data-table-core.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `items` | `T[]` | Current rows |
-| Property | `tableMetaData` | `TitaniumDataTableCoreMetaData<T> \| null` | Column config |
-| Property | `selected` | `T[]` | Selected rows |
-| Attribute | `selection-mode` | `single` \| `multi` \| `none` | Default `none` |
-| Attribute | `local-storage-key` | `string` | Default `'dtc-pref'`; **kebab-case attribute** |
-| Attribute | `sticky-header`, `disabled` | `boolean` | |
-| Property | `sort` | getter/setter | Persists to `{key}-user-sort` in localStorage |
-| Property | `userSettings` | getter/setter | Column visibility prefs |
-| Property | `supplementalItemStyles` | `CSSResult \| CSSResultGroup \| null` | Per-row styles |
-| State | `isLoading` | `boolean` | Via `promiseTracking` |
+| Kind      | Name                        | Type / values                              | Notes                                          |
+| --------- | --------------------------- | ------------------------------------------ | ---------------------------------------------- |
+| Property  | `items`                     | `T[]`                                      | Current rows                                   |
+| Property  | `tableMetaData`             | `TitaniumDataTableCoreMetaData<T> \| null` | Column config                                  |
+| Property  | `selected`                  | `T[]`                                      | Selected rows                                  |
+| Attribute | `selection-mode`            | `single` \| `multi` \| `none`              | Default `none`                                 |
+| Attribute | `local-storage-key`         | `string`                                   | Default `'dtc-pref'`; **kebab-case attribute** |
+| Attribute | `sticky-header`, `disabled` | `boolean`                                  |                                                |
+| Property  | `sort`                      | getter/setter                              | Persists to `{key}-user-sort` in localStorage  |
+| Property  | `userSettings`              | getter/setter                              | Column visibility prefs                        |
+| Property  | `supplementalItemStyles`    | `CSSResult \| CSSResultGroup \| null`      | Per-row styles                                 |
+| State     | `isLoading`                 | `boolean`                                  | Via `promiseTracking`                          |
 
 **Methods:** `selectAll()`, `deselectAll()`, `resetSort()`, `trackLoadingPromise(promise)`, `loadWhile(promise)` (deprecated alias for `trackLoadingPromise`)
 
 **Events:**
+
 - `selected-changed` (composed)
 - `sort-changed`
 - `items-reordered` — `CustomEvent<T[]>`
@@ -516,6 +585,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 **Exported types:** `TitaniumDataTableCoreMetaData`, `TitaniumDataTableCoreItemMetaData`, `TitaniumDataTableCoreSortItem`, `generateDefaultSortFromMetaData()`
 
 **Usage notes / gotchas:**
+
 - Clears selection when `items` reference changes
 - Don't clear rows on refetch (scrollbar jank); disable controls via `disabled` / `isLoading`
 - Status columns: use `<span indicator green>` / `red` (see cross-cutting patterns)
@@ -531,9 +601,9 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/data-table/data-table-action-bar.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `selected` | `Partial<T>[]` | |
+| Kind     | Name       | Type / values  | Notes |
+| -------- | ---------- | -------------- | ----- |
+| Property | `selected` | `Partial<T>[]` |       |
 
 **Slots:** `add-button`, `filters`, `selected-actions`
 
@@ -551,20 +621,21 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Source:** `titanium/data-table/page-control.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `pageSizes` | `number[]` | Default `[10,15,20,50]` |
-| Attribute | `default-page-size` | `number` | Default `10` |
-| Property | `page` | `number` | Zero-based |
-| Property | `count` | `number` | Total items |
-| Attribute | `local-storage-key` | `string` | **Required** for `take` persistence |
-| Property | `label` | `string` | Default `'Items per page'` |
-| Property | `disabled` | `boolean` | |
-| Property | `take` | getter/setter | Persists to localStorage; resets `page` to 0 |
+| Kind      | Name                | Type / values | Notes                                        |
+| --------- | ------------------- | ------------- | -------------------------------------------- |
+| Property  | `pageSizes`         | `number[]`    | Default `[10,15,20,50]`                      |
+| Attribute | `default-page-size` | `number`      | Default `10`                                 |
+| Property  | `page`              | `number`      | Zero-based                                   |
+| Property  | `count`             | `number`      | Total items                                  |
+| Attribute | `local-storage-key` | `string`      | **Required** for `take` persistence          |
+| Property  | `label`             | `string`      | Default `'Items per page'`                   |
+| Property  | `disabled`          | `boolean`     |                                              |
+| Property  | `take`              | getter/setter | Persists to localStorage; resets `page` to 0 |
 
 **Events:** `action` (composed) — fired on page or take change
 
 **Usage notes / gotchas:**
+
 - Unknown `take` values are added to `pageSizes`
 - Next disabled when `(page+1)*take >= count`
 - Use `local-storage-key` attribute (kebab-case), not `localStorageKey`
@@ -577,16 +648,18 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Cross-browser date / datetime-local input (form-associated).
 
+**Material Web:** Composes `md-filled-field`; uses MW field tokens and `redispatchEvent` for form events.
+
 **Import:** `import '@leavittsoftware/web/titanium/date-input/date-input.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `value`, `label`, `placeholder`, `supporting-text` | `string` | |
-| Attribute | `type` | `date` \| `datetime-local` | |
-| Attribute | `min`, `max`, `maxLength` | `string` | |
-| Property | `required`, `disabled`, `error` | `boolean` | |
-| Property | `prefix-text`, `suffix-text` | `string` | |
-| Attribute | `has-leading-icon`, `has-trailing-icon`, `no-asterisk` | `boolean` | |
+| Kind      | Name                                                   | Type / values              | Notes |
+| --------- | ------------------------------------------------------ | -------------------------- | ----- |
+| Property  | `value`, `label`, `placeholder`, `supporting-text`     | `string`                   |       |
+| Attribute | `type`                                                 | `date` \| `datetime-local` |       |
+| Attribute | `min`, `max`, `maxLength`                              | `string`                   |       |
+| Property  | `required`, `disabled`, `error`                        | `boolean`                  |       |
+| Property  | `prefix-text`, `suffix-text`                           | `string`                   |       |
+| Attribute | `has-leading-icon`, `has-trailing-icon`, `no-asterisk` | `boolean`                  |       |
 
 **Methods:** `checkValidity()`, `reportValidity()`, `select()`, `setCustomValidity()`, `reset()`
 
@@ -602,15 +675,17 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Preset + custom date range picker with popover UI.
 
+**Material Web:** Composes `md-filled-field`, `md-menu`, `md-list`, `md-text-button`.
+
 **Import:** `import '@leavittsoftware/web/titanium/date-range-selector/date-range-selector.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `range` | `string` | Default `'custom'`; presets like `allTime`, `last7Days`, etc. |
-| Property | `startDate`, `endDate` | `string` | ISO date strings |
-| Property | `label`, `supporting-text`, `type` | `string` | `type`: `date` \| `datetime-local` |
-| Property | `customDateRanges` | `Map<string, DateRangeOption> \| null` | Override presets |
-| Property | `disabled`, `positioning` | | `positioning`: `popover` \| `fixed` |
+| Kind     | Name                               | Type / values                          | Notes                                                         |
+| -------- | ---------------------------------- | -------------------------------------- | ------------------------------------------------------------- |
+| Property | `range`                            | `string`                               | Default `'custom'`; presets like `allTime`, `last7Days`, etc. |
+| Property | `startDate`, `endDate`             | `string`                               | ISO date strings                                              |
+| Property | `label`, `supporting-text`, `type` | `string`                               | `type`: `date` \| `datetime-local`                            |
+| Property | `customDateRanges`                 | `Map<string, DateRangeOption> \| null` | Override presets                                              |
+| Property | `disabled`, `positioning`          |                                        | `positioning`: `popover` \| `fixed`                           |
 
 **Methods:** `reset()` — sets `range` to `'allTime'`
 
@@ -626,14 +701,16 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Natural-language duration input (parses strings like "3 hours and 30 minutes").
 
+**Material Web:** Extends `MdFilledTextField` — inherits label, validation, and field styling API.
+
 **Import:** `import '@leavittsoftware/web/titanium/duration-input/filled-duration-input.js'`
 
 **Source:** `titanium/duration-input/filled-duration-input.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `duration` | `dayjs.Duration \| null` | Canonical value |
-| Property | `label`, `placeholder` | `string` | |
+| Kind     | Name                   | Type / values            | Notes           |
+| -------- | ---------------------- | ------------------------ | --------------- |
+| Property | `duration`             | `dayjs.Duration \| null` | Canonical value |
+| Property | `label`, `placeholder` | `string`                 |                 |
 
 **Events:** `duration-change` — read `event.target.duration`
 
@@ -645,14 +722,16 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Full-width filled search field with clear button.
 
+**Material Web:** Composes `md-filled-text-field`; style via `--md-filled-text-field-*` on `:host`.
+
 **Import:** `import '@leavittsoftware/web/titanium/search-input/filled-search-input.js'`
 
 **Source:** `titanium/search-input/filled-search-input.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `value`, `placeholder` | `string` | |
-| Property | `disabled`, `autocomplete`, `spellcheck` | | |
+| Kind     | Name                                     | Type / values | Notes |
+| -------- | ---------------------------------------- | ------------- | ----- |
+| Property | `value`, `placeholder`                   | `string`      |       |
+| Property | `disabled`, `autocomplete`, `spellcheck` |               |       |
 
 **Events:** `input` (composed); redispatches `blur`, `focus`, `change`, `invalid`
 
@@ -662,14 +741,16 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** YouTube video key input; strips full URLs to 11-char key; shows thumbnail preview.
 
+**Material Web:** Extends `MdFilledTextField` — inherits label, validation, and trailing-icon slot.
+
 **Import:** `import '@leavittsoftware/web/titanium/youtube-input/filled-youtube-input.js'`
 
 **Source:** `titanium/youtube-input/filled-youtube-input.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `value`, `label` | `string` | |
-| Property | `pattern` | `string` | Default `'^.{11}$'` |
+| Kind     | Name             | Type / values | Notes               |
+| -------- | ---------------- | ------------- | ------------------- |
+| Property | `value`, `label` | `string`      |                     |
+| Property | `pattern`        | `string`      | Default `'^.{11}$'` |
 
 **Methods:** `reset()`
 
@@ -683,12 +764,12 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/address-input/address-input.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `googleMapsApiKey` | `string` | **Required** (inherited) |
-| Attribute | `show-street2`, `show-county` | `boolean` | |
-| Property | `allow-international` | `boolean` | |
-| + | All `TitaniumSingleSelectBase` props | | |
+| Kind      | Name                                 | Type / values | Notes                    |
+| --------- | ------------------------------------ | ------------- | ------------------------ |
+| Property  | `googleMapsApiKey`                   | `string`      | **Required** (inherited) |
+| Attribute | `show-street2`, `show-county`        | `boolean`     |                          |
+| Property  | `allow-international`                | `boolean`     |                          |
+| +         | All `TitaniumSingleSelectBase` props |               |                          |
 
 **Events:** `selected` (JSDoc says `location-changed` but base fires `selected`)
 
@@ -702,15 +783,15 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/address-input/google-address-input.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `googleMapsApiKey` | `string` | **Required** |
-| Property | `pathToSelectedText` | `string` | Default `'primaryDisplayText'` |
-| Property | `allow-international` | `boolean` | |
+| Kind     | Name                  | Type / values | Notes                          |
+| -------- | --------------------- | ------------- | ------------------------------ |
+| Property | `googleMapsApiKey`    | `string`      | **Required**                   |
+| Property | `pathToSelectedText`  | `string`      | Default `'primaryDisplayText'` |
+| Property | `allow-international` | `boolean`     |                                |
 
 **Events:** `selected`; dispatches `ShowSnackbarEvent` on API errors
 
-**Usage notes / gotchas:** Loads Google Maps via `@googlemaps/js-api-loader` v2, which reads `process.env.NODE_ENV` at module scope. The component ships a guarded global `process` shim (`google-maps-process-shim.ts`, imported first) so it works in browser environments that don't define `process`; consumers need no bundler define.
+**Usage notes / gotchas:** Loads Google Maps via `@googlemaps/js-api-loader` v2, which reads `process.env.NODE_ENV` at module scope. The component ships a guarded global `process` shim (`google-maps-process-shim.ts`, imported first) so it works in browser environments that don't define `process`; consumers need no bundler define. **GCP:** the API key's project must have **Maps JavaScript API** and **Places API (New)** (`places.googleapis.com`) enabled — the legacy Places API alone is not sufficient after the `AutocompleteSuggestion` / `Place` migration. A `SERVICE_DISABLED` error means Places API (New) is missing on that project.
 
 ---
 
@@ -720,12 +801,12 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/chip/chip.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `label` | `string` | |
-| Property | `selected`, `disabled`, `non-interactive` | `boolean` | |
-| Property | `href`, `download`, `target` | `string` | Link chip |
-| Attribute | `input-chip` | `boolean` | Enables remove button |
+| Kind      | Name                                      | Type / values | Notes                 |
+| --------- | ----------------------------------------- | ------------- | --------------------- |
+| Property  | `label`                                   | `string`      |                       |
+| Property  | `selected`, `disabled`, `non-interactive` | `boolean`     |                       |
+| Property  | `href`, `download`, `target`              | `string`      | Link chip             |
+| Attribute | `input-chip`                              | `boolean`     | Enables remove button |
 
 **Events:** `remove` (when `input-chip`)
 
@@ -743,10 +824,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/chip-multi-select/chip-multi-select.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `label`, `noItemsText`, `supportingText`, `errorText` | `string` | |
-| Property | `required`, `hasItems`, `error`, `resizable`, `disabled` | `boolean` | |
+| Kind     | Name                                                     | Type / values | Notes |
+| -------- | -------------------------------------------------------- | ------------- | ----- |
+| Property | `label`, `noItemsText`, `supportingText`, `errorText`    | `string`      |       |
+| Property | `required`, `hasItems`, `error`, `resizable`, `disabled` | `boolean`     |       |
 
 **Methods:** `checkValidity()`, `reportValidity()`, `reset()`
 
@@ -760,19 +841,21 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Generic autocomplete single-select base (extended by domain selects).
 
+**Material Web:** Composes `md-filled-text-field` + `md-menu`; `required` patches inner `md-filled-text-field.checkValidity`.
+
 **Import:** `import '@leavittsoftware/web/titanium/single-select-base/single-select-base.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `label`, `placeholder`, `selected` | | `selected`: `T \| null` |
-| Property | `required`, `disabled`, `error`, `errorText` | `boolean` / `string` | |
-| Property | `prefixText`, `suffixText`, `supportingText` | `string` | |
-| Attribute | `no-asterisk`, `has-leading-icon`, `has-trailing-icon` | `boolean` | |
-| Property | `pathToSelectedText` | `string` | Key on selected object for display |
-| Property | `positioning`, `match-input-width`, `large`, `shaped` | | Menu positioning |
-| Attribute | `disable-menu-open-on-focus` | `boolean` | |
-| Attribute | `menu-open` | `boolean` | Reflected |
-| State | `isLoading` | `boolean` | |
+| Kind      | Name                                                   | Type / values        | Notes                              |
+| --------- | ------------------------------------------------------ | -------------------- | ---------------------------------- |
+| Property  | `label`, `placeholder`, `selected`                     |                      | `selected`: `T \| null`            |
+| Property  | `required`, `disabled`, `error`, `errorText`           | `boolean` / `string` |                                    |
+| Property  | `prefixText`, `suffixText`, `supportingText`           | `string`             |                                    |
+| Attribute | `no-asterisk`, `has-leading-icon`, `has-trailing-icon` | `boolean`            |                                    |
+| Property  | `pathToSelectedText`                                   | `string`             | Key on selected object for display |
+| Property  | `positioning`, `match-input-width`, `large`, `shaped`  |                      | Menu positioning                   |
+| Attribute | `disable-menu-open-on-focus`                           | `boolean`            |                                    |
+| Attribute | `menu-open`                                            | `boolean`            | Reflected                          |
+| State     | `isLoading`                                            | `boolean`            |                                    |
 
 **Methods:** `reset()`, `softReset()`, `select()`, `focus()`, `checkValidity()`, `reportValidity()`, `setCustomValidity()`, `trackLoadingPromise()`
 
@@ -783,6 +866,7 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 **CSS parts:** `menu`
 
 **Usage notes / gotchas:**
+
 - `required` patches `md-filled-text-field.checkValidity`
 - Custom validity when typed but not selected
 - `positioning='popover'` falls back to `'fixed'` in Firefox
@@ -795,12 +879,12 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/icon-picker/icon-picker.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `favorites` | `string[]` | |
-| Property | `whitelist` | `string` | Comma-separated icon names |
-| Property | `pathToSelectedText` | `string` | Default `'icon'` |
-| + | `TitaniumSingleSelectBase` props | | |
+| Kind     | Name                             | Type / values | Notes                      |
+| -------- | -------------------------------- | ------------- | -------------------------- |
+| Property | `favorites`                      | `string[]`    |                            |
+| Property | `whitelist`                      | `string`      | Comma-separated icon names |
+| Property | `pathToSelectedText`             | `string`      | Default `'icon'`           |
+| +        | `TitaniumSingleSelectBase` props |               |                            |
 
 **Events:** `selected`
 
@@ -812,13 +896,13 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/smart-attachment-input/smart-attachment-input.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `accept`, `multiple`, `required`, `disabled` | | |
-| Property | `confirmDelete`, `confirmDeleteHeader`, `confirmDeleteText` | | |
-| Property | `addButtonLabel`, `label`, `supportingText`, `noItemsText` | `string` | |
-| Property | `options` | `CropperOptions` | Cropper.js config |
-| Attribute | `force-png` | `boolean` | |
+| Kind      | Name                                                        | Type / values    | Notes             |
+| --------- | ----------------------------------------------------------- | ---------------- | ----------------- |
+| Property  | `accept`, `multiple`, `required`, `disabled`                |                  |                   |
+| Property  | `confirmDelete`, `confirmDeleteHeader`, `confirmDeleteText` |                  |                   |
+| Property  | `addButtonLabel`, `label`, `supportingText`, `noItemsText`  | `string`         |                   |
+| Property  | `options`                                                   | `CropperOptions` | Cropper.js config |
+| Attribute | `force-png`                                                 | `boolean`        |                   |
 
 **Methods:** `getFiles()`, `setFiles(...)`, `setFilesFromDatabaseAttachments(...)`, `checkValidity()`, `reportValidity()`, `hasChanges()`, `reset()`, `handleNewFile(files)`
 
@@ -832,15 +916,17 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Filled MdField wrapper with custom `evaluator` validation function.
 
+**Material Web:** Extends `MdFilledField` — slotted content sits inside the MW field container.
+
 **Import:** `import '@leavittsoftware/web/titanium/input-validator/filled-input-validator.js'`
 
 **Source:** `titanium/input-validator/filled-input-validator.ts`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `evaluator` | `() => boolean` | Custom validity check |
-| Property | `populated` | `boolean` | |
-| + | MdField props | `label`, `error`, `error-text`, `supporting-text`, `required` | |
+| Kind     | Name          | Type / values                                                 | Notes                 |
+| -------- | ------------- | ------------------------------------------------------------- | --------------------- |
+| Property | `evaluator`   | `() => boolean`                                               | Custom validity check |
+| Property | `populated`   | `boolean`                                                     |                       |
+| +        | MdField props | `label`, `error`, `error-text`, `supporting-text`, `required` |                       |
 
 **Methods:** `checkValidity()`, `reportValidity()`, `reset()`
 
@@ -854,13 +940,15 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Purpose:** Imperative promise-based confirm/cancel dialog.
 
+**Material Web:** Composes `md-dialog` with `md-text-button` / `md-filled-tonal-button` actions.
+
 **Import:** `import '@leavittsoftware/web/titanium/confirmation-dialog/confirmation-dialog.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `headline`, `text` | `string` | |
-| Property | `confirmActionText`, `cancelActionText` | `string` | |
-| Property | `disableConfirmationAction`, `disableCancelAction` | `boolean` | |
+| Kind     | Name                                               | Type / values | Notes |
+| -------- | -------------------------------------------------- | ------------- | ----- |
+| Property | `headline`, `text`                                 | `string`      |       |
+| Property | `confirmActionText`, `cancelActionText`            | `string`      |       |
+| Property | `disableConfirmationAction`, `disableCancelAction` | `boolean`     |       |
 
 **Methods:** `open(headline, text)` → `Promise<'cancel' | 'confirmed'>`
 
@@ -876,8 +964,8 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/leavitt/user-feedback/provide-feedback-dialog.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
+| Kind     | Name           | Type / values           | Notes        |
+| -------- | -------------- | ----------------------- | ------------ |
 | Property | `.userManager` | `AuthZeroLgUserManager` | **Required** |
 
 **Methods:** `show()`, `reset()`
@@ -892,8 +980,8 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/leavitt/user-feedback/report-a-problem-dialog.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
+| Kind     | Name           | Type / values           | Notes        |
+| -------- | -------------- | ----------------------- | ------------ |
 | Property | `.userManager` | `AuthZeroLgUserManager` | **Required** |
 
 **Methods:** `show()`, `reset()`
@@ -910,8 +998,8 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/snackbar/snackbar-stack.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
+| Kind     | Name                   | Type / values             | Notes              |
+| -------- | ---------------------- | ------------------------- | ------------------ |
 | Property | `.eventListenerTarget` | `HTMLElement \| Document` | Default `document` |
 
 **Methods:** `open(message, options?)`, `dismissAll()`
@@ -928,13 +1016,14 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/titanium/circle-loading-indicator/circle-loading-indicator.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.pendingStateElement` | `Element \| null` | |
+| Kind     | Name                   | Type / values     | Notes |
+| -------- | ---------------------- | ----------------- | ----- |
+| Property | `.pendingStateElement` | `Element \| null` |       |
 
 **Events listened:** `pending-state`
 
 **Usage notes / gotchas:**
+
 - Sets parent `inert` while open; 75ms open delay, 400ms min visible
 - **Must** dispatch `PendingStateEvent` for work — `isLoading` alone does not drive the overlay
 - Calls `stopPropagation()` on the event
@@ -947,10 +1036,10 @@ tableMetaData: TitaniumDataTableCoreMetaData<MyItem> = {
 
 **Import:** `import '@leavittsoftware/web/leavitt/error-page/error-page.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
+| Kind     | Name      | Type / values              | Notes              |
+| -------- | --------- | -------------------------- | ------------------ |
 | Property | `heading` | `string \| TemplateResult` | Default `'Hmm...'` |
-| Property | `message` | `string \| TemplateResult` | |
+| Property | `message` | `string \| TemplateResult` |                    |
 
 **Usage notes / gotchas:** Extends `ThemePreference`; renders a self-contained `<canvas>` starfield (no external particle dependency) that drifts and twinkles, honors `prefers-reduced-motion`, and recolors on theme change.
 
@@ -964,13 +1053,13 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/company-select/company-select.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.apiService` | `ApiService` | **Required** |
-| Property | `apiControllerName` | `string` | Default `'Companies'` |
-| Property | `companies` | `Partial<Company>[]` | Preloaded list |
-| Property | `odataParts` | `string[]` | Default `orderby=Name,select=...` |
-| Property | `disableAutoLoad` | `boolean` | Skip auto-fetch on `firstUpdated` |
+| Kind     | Name                | Type / values        | Notes                             |
+| -------- | ------------------- | -------------------- | --------------------------------- |
+| Property | `.apiService`       | `ApiService`         | **Required**                      |
+| Property | `apiControllerName` | `string`             | Default `'Companies'`             |
+| Property | `companies`         | `Partial<Company>[]` | Preloaded list                    |
+| Property | `odataParts`        | `string[]`           | Default `orderby=Name,select=...` |
+| Property | `disableAutoLoad`   | `boolean`            | Skip auto-fetch on `firstUpdated` |
 
 **Methods:** `reloadCompanies()`, `reset()` (inherited)
 
@@ -982,14 +1071,14 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/person-select/person-select.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.apiService` | `ApiService` | **Required** |
-| Property | `apiControllerName` | `string` | |
-| Property | `odataParts` | `string[]` | |
-| Property | `searchType` | `local` \| `remote` | Remote uses OData `contains` on `FullName` |
-| Property | `enablePeoplePreloading` | `boolean` | |
-| Property | `people` | `Partial<Person>[]` | |
+| Kind     | Name                     | Type / values       | Notes                                      |
+| -------- | ------------------------ | ------------------- | ------------------------------------------ |
+| Property | `.apiService`            | `ApiService`        | **Required**                               |
+| Property | `apiControllerName`      | `string`            |                                            |
+| Property | `odataParts`             | `string[]`          |                                            |
+| Property | `searchType`             | `local` \| `remote` | Remote uses OData `contains` on `FullName` |
+| Property | `enablePeoplePreloading` | `boolean`           |                                            |
+| Property | `people`                 | `Partial<Person>[]` |                                            |
 
 ---
 
@@ -997,11 +1086,11 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/person-company-select/person-company-select.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.apiService` | `ApiService` | **Required** |
-| Property | `peopleApiControllerName` | `string` | |
-| Property | `companyApiControllerName` | `string` | |
+| Kind     | Name                       | Type / values | Notes        |
+| -------- | -------------------------- | ------------- | ------------ |
+| Property | `.apiService`              | `ApiService`  | **Required** |
+| Property | `peopleApiControllerName`  | `string`      |              |
+| Property | `companyApiControllerName` | `string`      |              |
 
 **Usage notes / gotchas:** Combined people + companies in one autocomplete
 
@@ -1011,11 +1100,11 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/person-group-select/person-group-select.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.apiService` | `ApiService` | **Required** |
-| Property | `peopleApiControllerName` | `string` | |
-| Property | `groupApiControllerName` | `string` | |
+| Kind     | Name                      | Type / values | Notes        |
+| -------- | ------------------------- | ------------- | ------------ |
+| Property | `.apiService`             | `ApiService`  | **Required** |
+| Property | `peopleApiControllerName` | `string`      |              |
+| Property | `groupApiControllerName`  | `string`      |              |
 
 **Usage notes / gotchas:** Searches people and people groups
 
@@ -1029,21 +1118,22 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/file-explorer/file-explorer.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.apiService` | `ApiService` | **Required** |
-| Attribute | `file-explorer-id` | `number` | |
-| Attribute | `folder-id` | `number \| null` | |
-| Attribute | `local-storage-display-key` | `string` | Persists grid/list preference |
-| Attribute | `prevent-navigation-up` | `boolean` | |
-| Property | `display` | `grid` \| `list` | Persisted |
-| Property | `state` | `no-permission` \| `files` \| `no-files` \| `error` | |
+| Kind      | Name                        | Type / values                                       | Notes                         |
+| --------- | --------------------------- | --------------------------------------------------- | ----------------------------- |
+| Property  | `.apiService`               | `ApiService`                                        | **Required**                  |
+| Attribute | `file-explorer-id`          | `number`                                            |                               |
+| Attribute | `folder-id`                 | `number \| null`                                    |                               |
+| Attribute | `local-storage-display-key` | `string`                                            | Persists grid/list preference |
+| Attribute | `prevent-navigation-up`     | `boolean`                                           |                               |
+| Property  | `display`                   | `grid` \| `list`                                    | Persisted                     |
+| Property  | `state`                     | `no-permission` \| `files` \| `no-files` \| `error` |                               |
 
 **Methods:** `reload()`
 
 **Events:** `folder-added`, `folder-deleted`, `file-added`, `file-deleted`, `PendingStateEvent`, `ShowSnackbarEvent`
 
 **Usage notes / gotchas:**
+
 - Subscribes to `fileExplorerEvents` bus for live modal sync
 - Uses `titanium-confirmation-dialog` for deletes
 - Internal modals: `leavitt-file-modal`, `leavitt-folder-modal`, `leavitt-add-folder-modal`
@@ -1058,13 +1148,12 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/email-history-viewer/email-history-viewer-filled.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `isActive` | `boolean` | |
-| Property | `.apiService` | `ApiService` | **Required** |
-| Property | `path`, `apiControllerName` | `string` | |
-| Property | `.siteSearchTextFieldContext` | Lit context | Shared search field |
-| Property | `toolbarSearchTerm` | `string` | **Deprecated** |
+| Kind     | Name                          | Type / values | Notes               |
+| -------- | ----------------------------- | ------------- | ------------------- |
+| Property | `isActive`                    | `boolean`     |                     |
+| Property | `.apiService`                 | `ApiService`  | **Required**        |
+| Property | `path`, `apiControllerName`   | `string`      |                     |
+| Property | `.siteSearchTextFieldContext` | Lit context   | Shared search field |
 
 **Uses:** `titanium-page-control`, filter dialogs, `leavitt-view-sent-email-dialog`
 
@@ -1078,13 +1167,13 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/profile-picture/profile-picture.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `fileName` | `string` | CDN filename |
-| Property | `shape` | `circle` \| `square` | |
-| Property | `size` | `number` | Pixels |
-| Property | `show-ring`, `show-test-user-indicator`, `useIntrinsicImageSize` | `boolean` | |
-| Property | `profile-picture-link-person-id` | `number` | Directory link |
+| Kind     | Name                                                             | Type / values        | Notes          |
+| -------- | ---------------------------------------------------------------- | -------------------- | -------------- |
+| Property | `fileName`                                                       | `string`             | CDN filename   |
+| Property | `shape`                                                          | `circle` \| `square` |                |
+| Property | `size`                                                           | `number`             | Pixels         |
+| Property | `show-ring`, `show-test-user-indicator`, `useIntrinsicImageSize` | `boolean`            |                |
+| Property | `profile-picture-link-person-id`                                 | `number`             | Directory link |
 
 **CSS parts:** `test-user-indicator`
 
@@ -1096,11 +1185,11 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/leavitt/profile-picture/profile-picture-menu.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `.userManager` | `AuthZeroLgUserManager` | |
-| Property | `size`, `profilePictureFileName`, `personId`, `email`, `company`, `name` | | |
-| Property | `positioning` | `popover` \| `fixed` | |
+| Kind     | Name                                                                     | Type / values           | Notes |
+| -------- | ------------------------------------------------------------------------ | ----------------------- | ----- |
+| Property | `.userManager`                                                           | `AuthZeroLgUserManager` |       |
+| Property | `size`, `profilePictureFileName`, `personId`, `email`, `company`, `name` |                         |       |
+| Property | `positioning`                                                            | `popover` \| `fixed`    |       |
 
 **Slots:** `content`
 
@@ -1114,12 +1203,12 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `import '@leavittsoftware/web/titanium/profile-picture-stack/profile-picture-stack.js'`
 
-| Kind | Name | Type / values | Notes |
-|------|------|---------------|-------|
-| Property | `people` | `Partial<Person>[]` | |
-| Property | `max` | `number` | Max visible |
-| Property | `size`, `overlap` | `number` | |
-| Property | `enable-directory-href`, `show-full-name`, `auto-resize` | `boolean` | |
+| Kind     | Name                                                     | Type / values       | Notes       |
+| -------- | -------------------------------------------------------- | ------------------- | ----------- |
+| Property | `people`                                                 | `Partial<Person>[]` |             |
+| Property | `max`                                                    | `number`            | Max visible |
+| Property | `size`, `overlap`                                        | `number`            |             |
+| Property | `enable-directory-href`, `show-full-name`, `auto-resize` | `boolean`           |             |
 
 **CSS parts:** `additional-users`, `additional-users-paragraph`, `name`, `profile-picture`
 
@@ -1143,13 +1232,13 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 ## Events
 
-| Symbol | Import path | Event name | Payload / usage |
-|--------|-------------|------------|-----------------|
-| `ShowSnackbarEvent` | `titanium/snackbar/show-snackbar-event` | `show-snackbar` | `message: string \| Partial<HttpError>`, optional `SnackbarOptions` |
-| `PendingStateEvent` | `titanium/types/pending-state-event` | `pending-state` | `{ promise: Promise<unknown> }`; bubbles, composed |
-| `DateRangeChangedEvent` | `titanium/date-range-selector/date-range-change-event` | `date-range-changed` | Class exists; `titanium-date-range-selector` fires `change` instead |
-| `ThemePreferenceEvent` | `leavitt/theme/theme-preference-event` | theme preference changes | Subscribe for dark/light switches |
-| `DataTableItemsReorderedEvent` | `titanium/data-table/data-table-core` | `titanium-data-table-items-reorder` | Exported from data-table-core; core dispatches `items-reordered` on apply |
+| Symbol                         | Import path                                            | Event name                          | Payload / usage                                                           |
+| ------------------------------ | ------------------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------- |
+| `ShowSnackbarEvent`            | `titanium/snackbar/show-snackbar-event`                | `show-snackbar`                     | `message: string \| Partial<HttpError>`, optional `SnackbarOptions`       |
+| `PendingStateEvent`            | `titanium/types/pending-state-event`                   | `pending-state`                     | `{ promise: Promise<unknown> }`; bubbles, composed                        |
+| `DateRangeChangedEvent`        | `titanium/date-range-selector/date-range-change-event` | `date-range-changed`                | Class exists; `titanium-date-range-selector` fires `change` instead       |
+| `ThemePreferenceEvent`         | `leavitt/theme/theme-preference-event`                 | theme preference changes            | Subscribe for dark/light switches                                         |
+| `DataTableItemsReorderedEvent` | `titanium/data-table/data-table-core`                  | `titanium-data-table-items-reorder` | Exported from data-table-core; core dispatches `items-reordered` on apply |
 
 ## Services
 
@@ -1157,14 +1246,14 @@ All extend `TitaniumSingleSelectBase` and fire `selected`. All require `.apiServ
 
 **Import:** `leavitt/api-service/api-service`
 
-| Method | Notes |
-|--------|-------|
-| `getAsync<T>(urlPath)` | Returns `ODataResponse<T>` |
-| `postAsync<T>(urlPath, body?)` | JSON POST |
-| `putAsync`, `patchAsync`, `deleteAsync` | Standard verbs |
-| `uploadFile(urlPath, file, onprogress, options?)` | XHR upload with progress |
-| `aggregateResponses(promises)` | Batch multiple async ops |
-| `addHeader(key, value)` | e.g. `X-LGAppName` |
+| Method                                            | Notes                      |
+| ------------------------------------------------- | -------------------------- |
+| `getAsync<T>(urlPath)`                            | Returns `ODataResponse<T>` |
+| `postAsync<T>(urlPath, body?)`                    | JSON POST                  |
+| `putAsync`, `patchAsync`, `deleteAsync`           | Standard verbs             |
+| `uploadFile(urlPath, file, onprogress, options?)` | XHR upload with progress   |
+| `aggregateResponses(promises)`                    | Batch multiple async ops   |
+| `addHeader(key, value)`                           | e.g. `X-LGAppName`         |
 
 **Response helpers:** `ODataResponse.toList()`, `.odataCount`
 
@@ -1178,52 +1267,54 @@ Auth0 integration for `profile-picture-menu`, feedback dialogs. Provides `identi
 
 ## Controllers and buses
 
-| Symbol | Import path | Purpose |
-|--------|-------------|---------|
-| `FilterController` | `titanium/data-table/filter-controller` | URL query-string filter state for list pages |
-| `TitaniumSiteSearchTextFieldController` | `titanium/site-search-text-field-controller/site-search-text-field-controller` | App-level shared search field via Lit context |
-| `EventBus` | `titanium/event-bus/event-bus` | Typed pub/sub (`subscribe`, `dispatch`, `unsubscribe`) |
-| `fileExplorerEvents` | `leavitt/file-explorer/events/file-explorer-events` | File explorer modal sync bus |
+| Symbol                                  | Import path                                                                    | Purpose                                                |
+| --------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------ |
+| `FilterController`                      | `titanium/data-table/filter-controller`                                        | URL query-string filter state for list pages           |
+| `TitaniumSiteSearchTextFieldController` | `titanium/site-search-text-field-controller/site-search-text-field-controller` | App-level shared search field via Lit context          |
+| `EventBus`                              | `titanium/event-bus/event-bus`                                                 | Typed pub/sub (`subscribe`, `dispatch`, `unsubscribe`) |
+| `fileExplorerEvents`                    | `leavitt/file-explorer/events/file-explorer-events`                            | File explorer modal sync bus                           |
 
 ## Contexts
 
-| Context | Import path |
-|---------|-------------|
-| `mainMenuPositionContext` | `leavitt/app/contexts/main-menu-position-context` |
+| Context                          | Import path                                                                    |
+| -------------------------------- | ------------------------------------------------------------------------------ |
+| `mainMenuPositionContext`        | `leavitt/app/contexts/main-menu-position-context`                              |
 | `TitaniumTextFieldSearchContext` | `titanium/site-search-text-field-controller/site-search-text-field-controller` |
 
 ## Mixins and decorators
 
-| Symbol | Import path | Purpose |
-|--------|-------------|---------|
-| `promiseTracking` | `titanium/helpers/promise-tracking` | `@promiseTracking('methodName')` decorator for loading flags |
-| `PendingStateCatcher` | `titanium/helpers/pending-state-catcher` | Mixin to catch pending-state on host |
-| `ThemePreference` | `leavitt/theme/theme-preference` | Dark/light theme mixin |
+| Symbol                | Import path                              | Purpose                                                      |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------------ |
+| `promiseTracking`     | `titanium/helpers/promise-tracking`      | `@promiseTracking('methodName')` decorator for loading flags |
+| `PendingStateCatcher` | `titanium/helpers/pending-state-catcher` | Mixin to catch pending-state on host                         |
+| `ThemePreference`     | `leavitt/theme/theme-preference`         | Dark/light theme mixin                                       |
+
+These apply to the **host class** (`LitElement` or `Md*` subclass). They stack with Material Web properties on the same element when the component extends an `Md*` class, or apply to the wrapper when the component composes inner `md-*` children (see **Material Web foundation**).
 
 ## Helpers (selected)
 
-| Symbol | Import path | Purpose |
-|--------|-------------|---------|
-| `Debouncer` | `titanium/helpers/debouncer` | Debounced async calls |
-| `delay` | `titanium/helpers/delay` | Promise delay |
-| `getCdnDownloadUrl`, `getCdnInlineUrl` | `titanium/helpers/get-cdn-download-url`, `get-cdn-Inline-url` | CDN attachment URLs |
-| `getCompanyMarkUrl`, `getCompanyLogoUrl` | `titanium/helpers/get-company-mark-url`, `get-company-logo-url` | Company branding URLs |
-| `formatAddress`, address utils | `titanium/helpers/address/*` | Address formatting |
-| Phone formatters | `titanium/helpers/phone-numbers/*` | Phone number display |
-| `convertArrayToCsv`, `startCsvDownload` | `titanium/helpers/csv/*` | CSV export |
-| `getSearchTokens` | `titanium/helpers/get-search-token` | OData search token parsing |
-| `escapeTerm` | `titanium/helpers/escape-term` | OData string escaping |
-| `groupBy`, `join`, `middleEllipsis` | `titanium/helpers/*` | General utilities |
-| `notNull`, `notUndefined`, `notNullOrUndefined` | `titanium/helpers/*` | Type guards |
-| `installMediaQueryWatcher` | `titanium/helpers/install-media-query-watcher` | Responsive layout callback |
-| `findScrollableParent` | `titanium/helpers/find-scrollable-parent` | Scroll container detection |
-| `isDevelopment` | `titanium/helpers/is-development` | Dev environment detection |
+| Symbol                                          | Import path                                                     | Purpose                    |
+| ----------------------------------------------- | --------------------------------------------------------------- | -------------------------- |
+| `Debouncer`                                     | `titanium/helpers/debouncer`                                    | Debounced async calls      |
+| `delay`                                         | `titanium/helpers/delay`                                        | Promise delay              |
+| `getCdnDownloadUrl`, `getCdnInlineUrl`          | `titanium/helpers/get-cdn-download-url`, `get-cdn-Inline-url`   | CDN attachment URLs        |
+| `getCompanyMarkUrl`, `getCompanyLogoUrl`        | `titanium/helpers/get-company-mark-url`, `get-company-logo-url` | Company branding URLs      |
+| `formatAddress`, address utils                  | `titanium/helpers/address/*`                                    | Address formatting         |
+| Phone formatters                                | `titanium/helpers/phone-numbers/*`                              | Phone number display       |
+| `convertArrayToCsv`, `startCsvDownload`         | `titanium/helpers/csv/*`                                        | CSV export                 |
+| `getSearchTokens`                               | `titanium/helpers/get-search-token`                             | OData search token parsing |
+| `escapeTerm`                                    | `titanium/helpers/escape-term`                                  | OData string escaping      |
+| `groupBy`, `join`, `middleEllipsis`             | `titanium/helpers/*`                                            | General utilities          |
+| `notNull`, `notUndefined`, `notNullOrUndefined` | `titanium/helpers/*`                                            | Type guards                |
+| `installMediaQueryWatcher`                      | `titanium/helpers/install-media-query-watcher`                  | Responsive layout callback |
+| `findScrollableParent`                          | `titanium/helpers/find-scrollable-parent`                       | Scroll container detection |
+| `isDevelopment`                                 | `titanium/helpers/is-development`                               | Dev environment detection  |
 
 ## Hacks
 
-| Module | Import path | When to use |
-|--------|-------------|-------------|
-| `dialogCloseNavigationHack` | `titanium/hacks/dialog-navigation-hack` | Close dialog on SPA navigation without breaking history |
-| `dialogZindexHack` | `titanium/hacks/dialog-zindex-hack` | Stacking context issues with nested dialogs |
-| `dialogOverflowHacks` | `titanium/hacks/dialog-overflow-hacks` | Body scroll lock with dialogs |
-| `reportValidityIfError` | `titanium/hacks/report-validity-if-error` | Form validation helper |
+| Module                      | Import path                               | When to use                                             |
+| --------------------------- | ----------------------------------------- | ------------------------------------------------------- |
+| `dialogCloseNavigationHack` | `titanium/hacks/dialog-navigation-hack`   | Close dialog on SPA navigation without breaking history |
+| `dialogZindexHack`          | `titanium/hacks/dialog-zindex-hack`       | Stacking context issues with nested dialogs             |
+| `dialogOverflowHacks`       | `titanium/hacks/dialog-overflow-hacks`    | Body scroll lock with dialogs                           |
+| `reportValidityIfError`     | `titanium/hacks/report-validity-if-error` | Form validation helper                                  |
diff --git a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
index a8155d907..2ca8aab3b 100644
--- a/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
+++ b/packages/web/leavitt/email-history-viewer/email-history-viewer-filled.ts
@@ -39,7 +39,6 @@ import {
   TitaniumSiteSearchTextFieldController,
   TitaniumTextFieldSearchContext,
 } from '@leavittsoftware/web/titanium/site-search-text-field-controller/site-search-text-field-controller';
-import { Debouncer } from '@leavittsoftware/web/titanium/helpers/debouncer';
 import { isDevelopment } from '@leavittsoftware/web/titanium/helpers/is-development';
 
 import dayjs from 'dayjs/esm';
@@ -61,13 +60,6 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
   @property({ type: Object }) public accessor siteSearchTextFieldContext!: TitaniumTextFieldSearchContext;
   @property({ type: String }) accessor apiControllerName: string = 'EmailTemplateLogs';
 
-  /**
-   * @deprecated use the siteSearchTextFieldController + siteSearchTextFieldContext instead
-   */
-  @property({ type: String }) public accessor toolbarSearchTerm: string = '';
-
-  @state() public accessor searchTerm: string = '';
-
   // Data table props
   @state() private accessor items: Array<ItemType> = [];
   @state() private accessor selected: Array<ItemType> = [];
@@ -161,14 +153,6 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
       this.#reload();
     }
 
-    if (this.isActive && changedProps.has('toolbarSearchTerm') && this.searchTerm !== this.toolbarSearchTerm) {
-      this.searchTerm = this.toolbarSearchTerm;
-      if (this.pageControl) {
-        this.pageControl.page = 0;
-      }
-      this.#doSearchDebouncer.debounce();
-    }
-
     if (changedProps.has('path')) {
       this.filterController.path = this.path;
     }
@@ -198,15 +182,11 @@ export default class LeavittEmailHistoryViewerFilled extends LitElement {
   }
 
   async #reload() {
-    const { items, odataCount } = await this.#getItemsAsync(
-      this.siteSearchTextFieldContext ? (this.searchController?.searchTerm ?? null) : (this.searchTerm ?? null)
-    );
+    const { items, odataCount } = await this.#getItemsAsync(this.searchController?.searchTerm ?? null);
     this.items = items;
     this.resultTotal = odataCount;
   }
 
-  #doSearchDebouncer = new Debouncer(() => this.#reload());
-
   renderRecipients(recipients: string | null, maxRecipients: number = 1) {
     const recipientsList =
       recipients
diff --git a/packages/web/titanium/address-input/google-address-input.ts b/packages/web/titanium/address-input/google-address-input.ts
index 8b024a5c4..3e816260d 100644
--- a/packages/web/titanium/address-input/google-address-input.ts
+++ b/packages/web/titanium/address-input/google-address-input.ts
@@ -11,7 +11,7 @@ import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
 import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
 
 import '@material/web/icon/icon';
-import { placeResultToAddress } from './utils/place-result-to-address';
+import { placeToAddress } from './utils/place-result-to-address';
 import { addressToString } from './utils/address-to-string';
 import { AddressInputAddress } from './types/address-input-address';
 import { validateStreet } from './utils/validate-street';
@@ -44,8 +44,8 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
 
   #doSearchDebouncer = new Debouncer((searchTerm: string) => this.#doSearch(searchTerm));
   #abortController: AbortController = new AbortController();
-  #placesService!: google.maps.places.PlacesService;
-  #autoCompleteService!: google.maps.places.AutocompleteService;
+  #sessionToken: google.maps.places.AutocompleteSessionToken | undefined;
+  #placePredictions = new Map<string, google.maps.places.PlacePrediction>();
 
   async firstUpdated() {
     setOptions({
@@ -54,9 +54,12 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
     });
 
     await importLibrary('places');
+    this.#renewSessionToken();
+  }
 
-    this.#placesService = new google.maps.places.PlacesService(document.createElement('div'));
-    this.#autoCompleteService = new google.maps.places.AutocompleteService();
+  #renewSessionToken() {
+    this.#placePredictions.clear();
+    this.#sessionToken = new google.maps.places.AutocompleteSessionToken();
   }
 
   updated(changedProps: PropertyValues<this>) {
@@ -73,49 +76,59 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
   }
 
   async #getSuggestions(searchTerm: string) {
-    return new Promise<AddressInputAddress[] | null>((res) => {
-      const autoCompletionRequest: google.maps.places.AutocompletionRequest = {
-        input: searchTerm,
-        types: ['address'],
-      };
-      if (!this.allowInternational) {
-        autoCompletionRequest.componentRestrictions = { country: ['us'] };
-      }
-      this.#autoCompleteService.getPlacePredictions(autoCompletionRequest, (predictions: google.maps.places.AutocompletePrediction[] | null, status) => {
-        if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
-          console.warn(status);
-          return res([]);
+    const request: google.maps.places.AutocompleteRequest = {
+      input: searchTerm,
+      sessionToken: this.#sessionToken,
+      includedPrimaryTypes: ['street_address'],
+    };
+    if (!this.allowInternational) {
+      request.includedRegionCodes = ['us'];
+    }
+
+    try {
+      const { suggestions } = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
+
+      this.#placePredictions.clear();
+      const results: AddressInputAddress[] = [];
+
+      for (const suggestion of suggestions) {
+        const prediction = suggestion.placePrediction;
+        if (!prediction) {
+          continue;
         }
 
-        return res(
-          predictions.map(
-            (o) =>
-              ({
-                Id: o.place_id,
-                primaryDisplayText: o?.structured_formatting?.main_text || o.description,
-                secondaryText: o.structured_formatting?.secondary_text,
-              }) satisfies AddressInputAddress
-          )
-        );
-      });
-    });
+        this.#placePredictions.set(prediction.placeId, prediction);
+        results.push({
+          Id: prediction.placeId,
+          primaryDisplayText: prediction.mainText?.text ?? prediction.text.text,
+          secondaryText: prediction.secondaryText?.text,
+        });
+      }
+
+      return results;
+    } catch (error) {
+      throw new Error(this.#getPlacesApiErrorMessage(error), { cause: error });
+    }
+  }
+
+  #getPlacesApiErrorMessage(error: unknown) {
+    const message = String((error as Error)?.message ?? error);
+    if (message.includes('SERVICE_DISABLED')) {
+      return 'Google Places API (New) is not enabled for this API key. In Google Cloud Console, enable "Places API (New)" and "Maps JavaScript API" for the project that owns the key.';
+    }
+    return message;
   }
 
   async #getPlaceDetail(placeId: string) {
-    return new Promise<google.maps.places.PlaceResult>((res, rej) => {
-      const request: google.maps.places.PlaceDetailsRequest = {
-        placeId: placeId,
-        fields: ['address_components', 'formatted_address', 'geometry'],
-      };
-
-      this.#placesService.getDetails(request, (place, status) => {
-        if (status != google.maps.places.PlacesServiceStatus.OK || !place) {
-          return rej(status);
-        }
+    const prediction = this.#placePredictions.get(placeId);
+    const place = prediction?.toPlace() ?? new google.maps.places.Place({ id: placeId });
 
-        return res(place);
-      });
+    const { place: fetchedPlace } = await place.fetchFields({
+      fields: ['addressComponents', 'formattedAddress', 'location'],
     });
+
+    this.#renewSessionToken();
+    return fetchedPlace;
   }
 
   async #doSearch(searchTerm: string) {
@@ -199,7 +212,7 @@ export class GoogleAddressInput extends TitaniumSingleSelectBase<AddressInputAdd
     if (entity) {
       try {
         const place = await this.#getPlaceDetail(entity.Id);
-        const address = placeResultToAddress(place);
+        const address = placeToAddress(place);
         if (address) {
           entity = { ...entity, ...address };
         }
diff --git a/packages/web/titanium/address-input/utils/place-result-to-address.ts b/packages/web/titanium/address-input/utils/place-result-to-address.ts
index af28bd4dc..9cb060c0a 100644
--- a/packages/web/titanium/address-input/utils/place-result-to-address.ts
+++ b/packages/web/titanium/address-input/utils/place-result-to-address.ts
@@ -1,27 +1,29 @@
 /// <reference types="google.maps" />
 import { AddressInputAddress } from '../types/address-input-address';
 
-export function placeResultToAddress(place: google.maps.places.PlaceResult) {
-  if (!place || !place.address_components || !place.formatted_address) {
+export function placeToAddress(place: google.maps.places.Place) {
+  const addressComponents = place.addressComponents;
+  const formattedAddress = place.formattedAddress;
+
+  if (!addressComponents?.length || !formattedAddress) {
     return null;
   }
 
-  const neighborhood = place.address_components.find((o) => o.types.some((p) => p === 'neighborhood'));
-  const stateComponent = place.address_components.find((o) => o.types.some((p) => p === 'administrative_area_level_1'));
+  const neighborhood = addressComponents.find((o) => o.types.some((p) => p === 'neighborhood'));
+  const stateComponent = addressComponents.find((o) => o.types.some((p) => p === 'administrative_area_level_1'));
   const streetNumberComponent =
-    place.address_components.find((o) => o.types.some((p) => p === 'street_number')) ||
-    place.address_components.find((o) => o.types.some((p) => p === 'premise'));
-  const streetAddressComponent = place.address_components.find((o) => o.types.some((p) => p === 'route'));
+    addressComponents.find((o) => o.types.some((p) => p === 'street_number')) || addressComponents.find((o) => o.types.some((p) => p === 'premise'));
+  const streetAddressComponent = addressComponents.find((o) => o.types.some((p) => p === 'route'));
 
-  // GOOGLE flip-flops neighborhood and locality, neither can be used for a accurate city. formatted_address however seems to
+  // GOOGLE flip-flops neighborhood and locality, neither can be used for a accurate city. formattedAddress however seems to
   // always show the accurate city.
-  const locality = place.address_components.find((o) => o.types.some((p) => p === 'locality'));
-  const sublocality = place.address_components.find((o) => o.types.some((p) => p === 'sublocality'));
-  const adminAreaLevel3 = place.address_components.find((o) => o.types.some((p) => p === 'administrative_area_level_3'));
-  const adminAreaLevel4 = place.address_components.find((o) => o.types.some((p) => p === 'administrative_area_level_4'));
+  const locality = addressComponents.find((o) => o.types.some((p) => p === 'locality'));
+  const sublocality = addressComponents.find((o) => o.types.some((p) => p === 'sublocality'));
+  const adminAreaLevel3 = addressComponents.find((o) => o.types.some((p) => p === 'administrative_area_level_3'));
+  const adminAreaLevel4 = addressComponents.find((o) => o.types.some((p) => p === 'administrative_area_level_4'));
 
   const cityComponent =
-    neighborhood?.short_name && place.formatted_address.includes(neighborhood.short_name + ',')
+    neighborhood?.shortText && formattedAddress.includes(neighborhood.shortText + ',')
       ? neighborhood
       : locality
         ? locality
@@ -30,24 +32,24 @@ export function placeResultToAddress(place: google.maps.places.PlaceResult) {
           : adminAreaLevel3
             ? adminAreaLevel3
             : adminAreaLevel4;
-  const zipCodeComponent = place.address_components.find((o) => o.types.some((p) => p === 'postal_code'));
-  const countyComponent = place.address_components.find((o) => o.types.some((p) => p === 'administrative_area_level_2'));
-  const countryComponent = place.address_components.find((o) => o.types.some((p) => p === 'country'));
-  const street2 = place.address_components.find((o) => o.types.some((p) => p === 'subpremise'));
+  const zipCodeComponent = addressComponents.find((o) => o.types.some((p) => p === 'postal_code'));
+  const countyComponent = addressComponents.find((o) => o.types.some((p) => p === 'administrative_area_level_2'));
+  const countryComponent = addressComponents.find((o) => o.types.some((p) => p === 'country'));
+  const street2 = addressComponents.find((o) => o.types.some((p) => p === 'subpremise'));
   const location: Partial<AddressInputAddress> = {
-    street: streetNumberComponent?.short_name
-      ? `${streetNumberComponent?.short_name} ${streetAddressComponent?.short_name || ''}`?.trim()
-      : streetAddressComponent?.short_name || '',
-    fullStreet: `${streetNumberComponent?.long_name} ${streetAddressComponent?.long_name}`,
-    city: cityComponent?.short_name,
-    street2: street2?.short_name,
-    county: countyComponent?.short_name,
-    country: countryComponent?.short_name,
-    state: stateComponent?.short_name,
-    fullState: stateComponent?.long_name,
-    zip: zipCodeComponent?.short_name,
-    latitude: place.geometry?.location?.lat(),
-    longitude: place.geometry?.location?.lng(),
+    street: streetNumberComponent?.shortText
+      ? `${streetNumberComponent?.shortText} ${streetAddressComponent?.shortText || ''}`?.trim()
+      : streetAddressComponent?.shortText || '',
+    fullStreet: `${streetNumberComponent?.longText} ${streetAddressComponent?.longText}`,
+    city: cityComponent?.shortText ?? undefined,
+    street2: street2?.shortText ?? undefined,
+    county: countyComponent?.shortText ?? undefined,
+    country: countryComponent?.shortText ?? undefined,
+    state: stateComponent?.shortText ?? undefined,
+    fullState: stateComponent?.longText ?? undefined,
+    zip: zipCodeComponent?.shortText ?? undefined,
+    latitude: place.location?.lat(),
+    longitude: place.location?.lng(),
   };
 
   return location;
diff --git a/packages/web/titanium/drawer/drawer.ts b/packages/web/titanium/drawer/drawer.ts
index 5c9c886a4..7f45afc99 100644
--- a/packages/web/titanium/drawer/drawer.ts
+++ b/packages/web/titanium/drawer/drawer.ts
@@ -16,16 +16,10 @@ export class TitaniumDrawer extends LitElement {
   @query('dialog') private accessor dialog!: HTMLDialogElement | null;
 
   /**
-   * Set the position of content fixed when menu is closed. Only takes effect if always-show-content is set.
+   * Set the position of content fixed when menu is closed. Only takes effect in inline mode.
    */
   @property({ type: Boolean, reflect: true }) accessor fixed: boolean = false;
 
-  /**
-   * Show the slotted content regardless if the menu is open or closed
-   * @deprecated use mode instead
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'always-show-content' }) accessor alwayShowContent: boolean = false;
-
   /**
    * Reverse the direction of the drawer opening and closing animations
    */
@@ -44,11 +38,6 @@ export class TitaniumDrawer extends LitElement {
   async updated(changedProps: PropertyValues<this>) {
     if (changedProps.has('mode')) {
       if (this.mode === 'inline') {
-        if (this.isOpen) {
-          //drawer was already open in inline mode, so we need to keep it open
-          this.alwayShowContent = true;
-        }
-
         //close the flyover drawer, we are inline
         this.dialog?.close();
       }
@@ -64,9 +53,6 @@ export class TitaniumDrawer extends LitElement {
             this.#setOpen(false);
           }
         }
-
-        //we are now in flyover mode, we need to hide the inline content
-        this.alwayShowContent = false;
       }
     }
   }
@@ -130,7 +116,6 @@ export class TitaniumDrawer extends LitElement {
   open() {
     if (this.mode === 'inline') {
       this.#setOpen(true);
-      this.alwayShowContent = true;
     } else {
       this.dialog?.showModal();
       this.dialog?.removeAttribute('hide');
@@ -144,7 +129,6 @@ export class TitaniumDrawer extends LitElement {
   async close() {
     if (this.mode === 'inline') {
       this.#setOpen(false);
-      this.alwayShowContent = false;
     } else {
       this.dialog?.setAttribute('hide', '');
       await TitaniumDrawer.animationsComplete(this.dialog!);
@@ -167,7 +151,6 @@ export class TitaniumDrawer extends LitElement {
   closeQuick() {
     if (this.mode === 'inline') {
       this.#setOpen(false);
-      this.alwayShowContent = false;
     } else {
       this.dialog?.close();
     }
@@ -281,7 +264,7 @@ export class TitaniumDrawer extends LitElement {
       opacity: 0.8;
     }
 
-    :host([always-show-content]) dialog:not([open]) {
+    :host([mode='inline'][open]) dialog:not([open]) {
       position: sticky;
       top: var(--titanium-drawer-full-height-padding, 48px);
 
@@ -299,7 +282,7 @@ export class TitaniumDrawer extends LitElement {
       animation: show 0.25s ease normal;
     }
 
-    :host([always-show-content][direction='rtl']) dialog:not([open]) {
+    :host([mode='inline'][open][direction='rtl']) dialog:not([open]) {
       animation: show-reverse 0.25s ease normal;
     }
 
diff --git a/packages/web/titanium/single-select-base/single-select-base.ts b/packages/web/titanium/single-select-base/single-select-base.ts
index 145097bf3..a03ffd714 100644
--- a/packages/web/titanium/single-select-base/single-select-base.ts
+++ b/packages/web/titanium/single-select-base/single-select-base.ts
@@ -339,7 +339,7 @@ export class TitaniumSingleSelectBase<T extends Identifier> extends ThemePrefere
         --md-filled-text-field-hover-active-indicator-height: 0;
         --md-filled-text-field-focus-active-indicator-height: 0;
         --md-filled-text-field-disabled-active-indicator-height: 0;
-      }
+
         --md-filled-text-field-input-text-size: 1.125rem;
         --md-filled-text-field-input-text-line-height: 1.75rem;
         --md-filled-text-field-label-text-size: 1.125rem;