diff --git a/packages/app/src/elements/hljs/hljs.ts b/packages/app/src/elements/hljs/hljs.ts
index c26f0ebb..30bb0100 100644
--- a/packages/app/src/elements/hljs/hljs.ts
+++ b/packages/app/src/elements/hljs/hljs.ts
@@ -12,7 +12,7 @@ export class Hljs {
   codeEl: HTMLElement;
   observer?: MutationObserver;
 
-  @bindable
+  @bindable.none
   language: string;
 
   attached() {
diff --git a/packages/banner/src/mdc-banner.ts b/packages/banner/src/mdc-banner.ts
index 2216d548..9cc7248a 100644
--- a/packages/banner/src/mdc-banner.ts
+++ b/packages/banner/src/mdc-banner.ts
@@ -27,13 +27,13 @@ export class MdcBanner extends MdcComponent<MDCBannerFoundation> {
   @bindable.booleanAttr
   centered: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
-  @bindable
+  @bindable.none
   primaryAction: string;
 
-  @bindable
+  @bindable.none
   secondaryAction: string;
 
   @bindable.booleanAttr
diff --git a/packages/base/src/attributes/mdc-focus-trap.ts b/packages/base/src/attributes/mdc-focus-trap.ts
index 6a548304..96ba56b6 100644
--- a/packages/base/src/attributes/mdc-focus-trap.ts
+++ b/packages/base/src/attributes/mdc-focus-trap.ts
@@ -13,7 +13,7 @@ export class MdcFocusTrap {
   @bindable.booleanAttr
   delay: boolean;
 
-  @bindable
+  @bindable.none
   initialFocusEl?: HTMLElement | (() => HTMLElement);
 
   @bindable.booleanAttr
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
index 1adba0fd..75f055fa 100644
--- a/packages/base/src/index.ts
+++ b/packages/base/src/index.ts
@@ -1,4 +1,5 @@
 import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';
+import { coerceFunctions, createTypedBindable } from 'aurelia-typed-observable-plugin';
 
 export { MdcComponent } from './mdc-component';
 export { MdcComponentAdapters } from './mdc-component-adapters';
@@ -15,3 +16,9 @@ export function configure(config: FrameworkConfiguration) {
     PLATFORM.moduleName('./elements/mdc-promisify-reference')
   ]);
 }
+
+coerceFunctions.none = function (a) {
+  return a;
+}
+
+createTypedBindable('none');
diff --git a/packages/button/src/mdc-button.ts b/packages/button/src/mdc-button.ts
index 49a35a81..f0576387 100644
--- a/packages/button/src/mdc-button.ts
+++ b/packages/button/src/mdc-button.ts
@@ -39,7 +39,7 @@ export class MdcButton {
   /**
    * Set the button label
    */
-  @bindable
+  @bindable.none
   label: string;
 
   /**
@@ -56,7 +56,7 @@ export class MdcButton {
   }
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {
diff --git a/packages/chips/src/mdc-chip-action/mdc-chip-action.ts b/packages/chips/src/mdc-chip-action/mdc-chip-action.ts
index f0ec0695..2c74a954 100644
--- a/packages/chips/src/mdc-chip-action/mdc-chip-action.ts
+++ b/packages/chips/src/mdc-chip-action/mdc-chip-action.ts
@@ -49,7 +49,7 @@ export class MdcChipAction extends MdcComponent<MDCChipActionFoundation> impleme
   @bindable.booleanAttr
   trailing: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
   @bindable.booleanAttr
diff --git a/packages/chips/src/mdc-chip/mdc-chip.ts b/packages/chips/src/mdc-chip/mdc-chip.ts
index 03badbc0..7172883f 100644
--- a/packages/chips/src/mdc-chip/mdc-chip.ts
+++ b/packages/chips/src/mdc-chip/mdc-chip.ts
@@ -69,7 +69,7 @@ export class MdcChip extends MdcComponent<MDCChipFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   icon: string;
 
   actions: Map<MDCChipActionType, MdcChipAction>;
diff --git a/packages/data-table/src/mdc-data-table.ts b/packages/data-table/src/mdc-data-table.ts
index af9b028e..ed07110f 100644
--- a/packages/data-table/src/mdc-data-table.ts
+++ b/packages/data-table/src/mdc-data-table.ts
@@ -69,15 +69,15 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
   pagination: boolean;
 
   /** Caption for the page size selector */
-  @bindable
+  @bindable.none
   rowsPerPageLabel: string = 'Rows per page';
 
   /** Page sizes available for selection, e.g. [10, 25, 100, 'All'] */
-  @bindable
+  @bindable.none
   pageSizes: unknown[] = [10, 25, 100];
 
   /** Selected page size */
-  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable.none({ defaultBindingMode: bindingMode.twoWay })
   pageSize: unknown = 10;
 
   /** Makes header row sticky (fixed) on vertical scroll.
diff --git a/packages/dialog/src/mdc-dialog.ts b/packages/dialog/src/mdc-dialog.ts
index 1c169700..dd263f64 100644
--- a/packages/dialog/src/mdc-dialog.ts
+++ b/packages/dialog/src/mdc-dialog.ts
@@ -30,7 +30,7 @@ export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements Even
   content_?: MdcDialogContent; // assigned in initialize()
 
   /** Action returned when the dialog is closed via the scrim click */
-  @bindable
+  @bindable.none
   scrimClickAction: string;
   async scrimClickActionChanged() {
     await this.initialised;
@@ -38,7 +38,7 @@ export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements Even
   }
 
   /** Action returned when the dialog is closed via the ESC key */
-  @bindable
+  @bindable.none
   escapeKeyAction: string;
   async escapeKeyActionChanged() {
     await this.initialised;
diff --git a/packages/expandable/src/mdc-expandable.ts b/packages/expandable/src/mdc-expandable.ts
index b89dfa66..dd6175a8 100644
--- a/packages/expandable/src/mdc-expandable.ts
+++ b/packages/expandable/src/mdc-expandable.ts
@@ -29,7 +29,7 @@ export class MdcExpandable {
   }
 
   /** Set the expandable to be in an accordion group */
-  @bindable
+  @bindable.none
   accordion?: string;
 
   handleEvent(e: Event) {
diff --git a/packages/fab/src/mdc-fab.ts b/packages/fab/src/mdc-fab.ts
index c50d5362..a2096bb6 100644
--- a/packages/fab/src/mdc-fab.ts
+++ b/packages/fab/src/mdc-fab.ts
@@ -29,11 +29,11 @@ export class MdcFab {
   exited: boolean;
 
   /** Optional. Apply a Material Icon. */
-  @bindable
+  @bindable.none
   icon: string;
 
   /** Optional, for the text label. Applicable only for Extended FAB. */
-  @bindable
+  @bindable.none
   label: string;
 
   /** Set the button disabled */
diff --git a/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts b/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts
index 04b0e4a4..14901a93 100644
--- a/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts
+++ b/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts
@@ -13,6 +13,6 @@ export class MdcIconButtonIcon {
   on: boolean;
 
   /** Optional. Set a Material icon. */
-  @bindable
+  @bindable.none
   icon: string;
 }
diff --git a/packages/icon-button/src/mdc-icon-button.ts b/packages/icon-button/src/mdc-icon-button.ts
index 2142f80d..cbdaf7a8 100644
--- a/packages/icon-button/src/mdc-icon-button.ts
+++ b/packages/icon-button/src/mdc-icon-button.ts
@@ -18,14 +18,14 @@ export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
   on: boolean;
 
   /** Optional. Set a Material icon as a non-toggle icon. */
-  @bindable
+  @bindable.none
   icon: string;
 
   @children('mdc-icon-button-icon')
   icons?: MdcIconButtonIcon[];
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {
diff --git a/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts b/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts
index 1443a841..cfb4a3d9 100644
--- a/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts
+++ b/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts
@@ -12,11 +12,11 @@ export class MdcImageListItem {
   constructor(private root: HTMLElement) { }
 
   /** Image url */
-  @bindable
+  @bindable.none
   src: string;
 
   /** Image label */
-  @bindable
+  @bindable.none
   label: string;
 
   hasAspect: boolean;
diff --git a/packages/image-list/src/mdc-image-list.ts b/packages/image-list/src/mdc-image-list.ts
index 24b24846..c1271706 100644
--- a/packages/image-list/src/mdc-image-list.ts
+++ b/packages/image-list/src/mdc-image-list.ts
@@ -28,7 +28,7 @@ export class MdcImageList {
   textProtection: boolean;
 
   /** Number of columns in the list */
-  @bindable
+  @bindable.none
   columns: string | Partial<IColumnsOptions>[];
   columnsChanged() {
     if (!this.columns) {
diff --git a/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts b/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts
index 46b03a6a..2e9550fe 100644
--- a/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts
+++ b/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts
@@ -8,34 +8,34 @@ import { bindable } from 'aurelia-typed-observable-plugin';
 @customElement('mdc-layout-grid-cell')
 export class MdcLayoutGridCell {
   /** Optional, specifies the order of the cell */
-  @bindable
+  @bindable.none
   order: string;
 
   /** Optional, specifies the alignment of cell */
-  @bindable
+  @bindable.none
   position: 'top' | 'middle' | 'bottom';
 
   /** Optional, specifies the number of columns the cell spans */
-  @bindable
+  @bindable.none
   span: string;
 
   /** Optional, specifies the number of columns the cell spans on a desktop */
-  @bindable
+  @bindable.none
   desktopSpan: string;
 
   /** Optional, specifies the number of columns the cell spans on a tablet */
-  @bindable
+  @bindable.none
   tabletSpan: string;
 
   /** Optional, specifies the number of columns the cell spans on a phone */
-  @bindable
+  @bindable.none
   phoneSpan: string;
 
   @bindable.booleanAttr
   newRow: string;
 
   /** Optional, specifies the number of columns the cell spans for all screen sizes */
-  @bindable
+  @bindable.none
   spans: string;
   spansChanged() {
     [this.phoneSpan, this.tabletSpan, this.desktopSpan] = this.spans.split(' ');
diff --git a/packages/layout-grid/src/mdc-layout-grid.ts b/packages/layout-grid/src/mdc-layout-grid.ts
index 3a52f658..4a396297 100644
--- a/packages/layout-grid/src/mdc-layout-grid.ts
+++ b/packages/layout-grid/src/mdc-layout-grid.ts
@@ -11,7 +11,7 @@ export class MdcLayoutGrid {
   constructor(private root: HTMLElement) { }
 
   /** Set grid alignment. Has no effect when the grid already fills its container. */
-  @bindable
+  @bindable.none
   position: 'left' | 'right';
 
   /** Specifies the grid should have fixed column width */
diff --git a/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts b/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts
index 43343ff2..b13dd919 100644
--- a/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts
+++ b/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts
@@ -54,7 +54,7 @@ export class MdcDeprecatedListItem {
   activated: boolean;
 
   /** Random data associated with the list item. Passed in events payload. */
-  @bindable
+  @bindable.none
   value: unknown;
 
   /** Disables ripple effect */
@@ -62,7 +62,7 @@ export class MdcDeprecatedListItem {
   disableRipple: boolean;
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {
diff --git a/packages/list/src/mdc-list-divider/mdc-list-divider.ts b/packages/list/src/mdc-list-divider/mdc-list-divider.ts
index 7e97973d..bb7fd643 100644
--- a/packages/list/src/mdc-list-divider/mdc-list-divider.ts
+++ b/packages/list/src/mdc-list-divider/mdc-list-divider.ts
@@ -15,10 +15,10 @@ export class MdcListDivider {
   padded: boolean;
 
   /** Aligns the divider’s leading edge with the item’s content block */
-  @bindable
+  @bindable.none
   leadingType: MdcListItemLeading['value'];
 
   /** Aligns the divider’s leading edge with the item’s trailing padding */
-  @bindable
+  @bindable.none
   trailingType: MdcListItemTrailing['value'];
  }
diff --git a/packages/list/src/mdc-list-item/mdc-list-item.ts b/packages/list/src/mdc-list-item/mdc-list-item.ts
index d3e6feaa..20729f11 100644
--- a/packages/list/src/mdc-list-item/mdc-list-item.ts
+++ b/packages/list/src/mdc-list-item/mdc-list-item.ts
@@ -89,7 +89,7 @@ export class MdcListItem {
   threeLine: boolean;
 
   /** Random data associated with the list item. Passed in events payload. */
-  @bindable
+  @bindable.none
   value: unknown;
 
   /** Disables ripple effect */
@@ -97,7 +97,7 @@ export class MdcListItem {
   disableRipple: boolean;
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {
diff --git a/packages/lookup/src/mdc-lookup.ts b/packages/lookup/src/mdc-lookup.ts
index bed60518..281a8a36 100644
--- a/packages/lookup/src/mdc-lookup.ts
+++ b/packages/lookup/src/mdc-lookup.ts
@@ -29,7 +29,7 @@ export class MdcLookup implements EventListenerObject {
   public menu: MdcMenu;
 
   /** Reference to the input */
-  @bindable
+  @bindable.none
   public input?: HTMLInputElement & { isFocused: boolean };
 
   /** Sets the menu list to have two lines */
@@ -42,7 +42,7 @@ export class MdcLookup implements EventListenerObject {
    * When set to a function, it is called with an option as a parameter to retrieve the display string.
    * When undefined, an option.toString() is used.
    */
-  @bindable
+  @bindable.none
   displayField: string | undefined | ((option: unknown) => string);
   displayFieldChanged() {
     if (this.displayField instanceof Function) {
@@ -62,7 +62,7 @@ export class MdcLookup implements EventListenerObject {
    * When set to a function, it is called with an option as a parameter to retrieve the value.
    * When undefined, an option is used as a value.
    */
-  @bindable
+  @bindable.none
   valueField: string | undefined | ((option: unknown) => unknown);
   valueFieldChanged() {
     if (this.valueField instanceof Function) {
@@ -80,7 +80,7 @@ export class MdcLookup implements EventListenerObject {
    * Sets the array of options to display.
    * Can be an async function which returns an array.
    */
-  @bindable
+  @bindable.none
   options: unknown[] | undefined | ((filter: string, value: unknown) => Promise<unknown[]>);
   optionsChanged() {
     const shouldRefresh = this.getOptions !== undefined;
@@ -111,7 +111,7 @@ export class MdcLookup implements EventListenerObject {
   naturalWidth: boolean;
 
   /** The CSS class to set on the menu. Helps styling body hoisted menus */
-  @bindable
+  @bindable.none
   menuClass: string;
 
   getOptions: (filter: string | undefined, value: unknown) => Promise<unknown[]>;
@@ -126,7 +126,7 @@ export class MdcLookup implements EventListenerObject {
   }
 
   /** The selected value */
-  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable.none({ defaultBindingMode: bindingMode.twoWay })
   value: unknown;
   suppressValueChanged: boolean;
   async valueChanged() {
diff --git a/packages/menu-surface/src/mdc-menu-surface.ts b/packages/menu-surface/src/mdc-menu-surface.ts
index b22ee3f3..c0bacdf2 100644
--- a/packages/menu-surface/src/mdc-menu-surface.ts
+++ b/packages/menu-surface/src/mdc-menu-surface.ts
@@ -13,7 +13,7 @@ export class MdcMenuSurface extends MdcComponent<MDCMenuSurfaceFoundation> imple
   originalParent: HTMLElement | null;
   private previousFocus?: HTMLElement | SVGElement | null;
 
-  @bindable
+  @bindable.none
   anchor?: Element | null;
 
   /** Sets the foundation to use page offsets for an positioning when the menu is hoisted to the body. */
@@ -32,14 +32,14 @@ export class MdcMenuSurface extends MdcComponent<MDCMenuSurfaceFoundation> imple
     this.foundation?.setFixedPosition(this.fixed);
   }
 
-  @bindable
+  @bindable.none
   anchorCorner: keyof typeof Corner;
   async anchorCornerChanged() {
     await this.initialised;
     this.foundation?.setAnchorCorner(Corner[this.anchorCorner]);
   }
 
-  @bindable
+  @bindable.none
   anchorMargin: Partial<MDCMenuDistance>;
   async anchorMarginChanged(margin: Partial<MDCMenuDistance>) {
     await this.initialised;
diff --git a/packages/menu/src/mdc-menu.ts b/packages/menu/src/mdc-menu.ts
index 79ff67aa..44b33804 100644
--- a/packages/menu/src/mdc-menu.ts
+++ b/packages/menu/src/mdc-menu.ts
@@ -45,11 +45,11 @@ export class MdcMenu extends MdcComponent<MDCMenuFoundation> {
   hoistToBody: boolean;
 
   /** Set to indicate an element the menu should be anchored to */
-  @bindable
+  @bindable.none
   anchor?: Element | null;
 
   /** Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root ('list') element by default. */
-  @bindable
+  @bindable.none
   defaultFocusState: keyof typeof DefaultFocusState = 'LIST_ROOT';
   async defaultFocusStateChanged() {
     await this.initialised;
@@ -57,11 +57,11 @@ export class MdcMenu extends MdcComponent<MDCMenuFoundation> {
   }
 
   /** Override the opening point of the menu. (Default: TOP_START) */
-  @bindable
+  @bindable.none
   anchorCorner: keyof typeof Corner;
 
   /** Sets the distance from the anchor point that the menu surface should be shown */
-  @bindable
+  @bindable.none
   anchorMargin: Partial<MDCMenuDistance>;
 
   /** Sets whether the menu should open and close without animation when the open/close methods are called */
diff --git a/packages/ripple/src/mdc-ripple.ts b/packages/ripple/src/mdc-ripple.ts
index 5463f680..28bbce43 100644
--- a/packages/ripple/src/mdc-ripple.ts
+++ b/packages/ripple/src/mdc-ripple.ts
@@ -12,16 +12,16 @@ export class MdcRipple extends MdcComponent<MDCRippleFoundation> {
 
   inputBindingPromiseResolver: (value?: unknown) => void;
   inputBindingPromise = new Promise(r => this.inputBindingPromiseResolver = r);
-  @bindable
+  @bindable.none
   input?: HTMLInputElement;
   inputChanged() {
     this.inputBindingPromiseResolver();
   }
 
-  @bindable
+  @bindable.none
   surface?: HTMLElement;
 
-  @bindable
+  @bindable.none
   computeBoundingRect: () => ClientRect;
 
   @bindable.booleanAttr
diff --git a/packages/segmented-button/src/mdc-segmented-button-segment/mdc-segmented-button-segment.ts b/packages/segmented-button/src/mdc-segmented-button-segment/mdc-segmented-button-segment.ts
index cf438489..6fdd5585 100644
--- a/packages/segmented-button/src/mdc-segmented-button-segment/mdc-segmented-button-segment.ts
+++ b/packages/segmented-button/src/mdc-segmented-button-segment/mdc-segmented-button-segment.ts
@@ -24,7 +24,7 @@ export class MdcSegmentedButtonSegment extends MdcComponent<MDCSegmentedButtonSe
   touch: boolean;
 
   /** Sets an icon in the segment */
-  @bindable
+  @bindable.none
   icon: string;
 
   private _checked?: boolean;
diff --git a/packages/select/src/mdc-select-helper-text/mdc-select-helper-text.ts b/packages/select/src/mdc-select-helper-text/mdc-select-helper-text.ts
index 5cef515a..3c989766 100644
--- a/packages/select/src/mdc-select-helper-text/mdc-select-helper-text.ts
+++ b/packages/select/src/mdc-select-helper-text/mdc-select-helper-text.ts
@@ -20,7 +20,7 @@ export class MdcSelectHelperText extends MdcComponent<MDCSelectHelperTextFoundat
   @bindable.booleanAttr
   validation: boolean;
 
-  @bindable
+  @bindable.none
   errors: string[];
 
   // Provided for access by MDCTextField component
diff --git a/packages/select/src/mdc-select.ts b/packages/select/src/mdc-select.ts
index 332841bc..8813bae1 100644
--- a/packages/select/src/mdc-select.ts
+++ b/packages/select/src/mdc-select.ts
@@ -61,7 +61,7 @@ export class MdcSelect extends MdcComponent<MDCSelectFoundationAurelia>{
   errors = new Map<IError, boolean>();
 
   /** Sets the select label */
-  @bindable
+  @bindable.none
   label: string;
   labelChanged() {
     this.taskQueue.queueTask(() => this.foundation?.layout());
@@ -105,7 +105,7 @@ export class MdcSelect extends MdcComponent<MDCSelectFoundationAurelia>{
   fixed: boolean;
 
   /** Sets the margin between the select input and the dropdown */
-  @bindable
+  @bindable.none
   anchorMargin: Partial<MDCMenuDistance>;
 
   /** Sets the select dropdown width to match content */
diff --git a/packages/slider/src/mdc-slider.ts b/packages/slider/src/mdc-slider.ts
index c7f0c71b..b3ff7350 100644
--- a/packages/slider/src/mdc-slider.ts
+++ b/packages/slider/src/mdc-slider.ts
@@ -113,7 +113,7 @@ export class MdcSlider extends MdcComponent<MdcSliderFoundationAurelia> {
     this.foundation?.layout();
   }
 
-  @bindable
+  @bindable.none
   step: string = '1';
   async stepChanged() {
     await this.initialised;
@@ -124,7 +124,7 @@ export class MdcSlider extends MdcComponent<MdcSliderFoundationAurelia> {
     this.foundation?.init();
   }
 
-  @bindable
+  @bindable.none
   valueToAriaValueTextFn: ((value: number) => string) | null = null;
 
   _value: number = 0;
diff --git a/packages/snackbar/src/mdc-snackbar.ts b/packages/snackbar/src/mdc-snackbar.ts
index 06d73f55..bb047747 100644
--- a/packages/snackbar/src/mdc-snackbar.ts
+++ b/packages/snackbar/src/mdc-snackbar.ts
@@ -15,10 +15,10 @@ export class MdcSnackbar extends MdcComponent<MDCSnackbarFoundation> {
 
   private labelEl_!: Element; // assigned in html
 
-  @bindable
+  @bindable.none
   label: string;
 
-  @bindable
+  @bindable.none
   actions: string[];
 
   @bindable.booleanAttr
@@ -41,13 +41,13 @@ export class MdcSnackbar extends MdcComponent<MDCSnackbarFoundation> {
     this.foundation?.setCloseOnEscape(this.closeOnEscape);
   }
 
-  @bindable
+  @bindable.none
   classes: string;
 
-  @bindable
+  @bindable.none
   actionClasses: string;
 
-  @bindable
+  @bindable.none
   dismissClasses: string;
 
   @bindable.booleanAttr
diff --git a/packages/tab-bar/src/indicator/mdc-tab-indicator.ts b/packages/tab-bar/src/indicator/mdc-tab-indicator.ts
index 2314979b..d1ff51bc 100644
--- a/packages/tab-bar/src/indicator/mdc-tab-indicator.ts
+++ b/packages/tab-bar/src/indicator/mdc-tab-indicator.ts
@@ -16,7 +16,7 @@ export class MdcTabIndicator extends MdcComponent<MDCTabIndicatorFoundation> {
   @bindable.booleanAttr
   active: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
   computeContentClientRect(): ClientRect {
diff --git a/packages/tab-bar/src/mdc-tab-bar.ts b/packages/tab-bar/src/mdc-tab-bar.ts
index af7367e5..1084a57b 100644
--- a/packages/tab-bar/src/mdc-tab-bar.ts
+++ b/packages/tab-bar/src/mdc-tab-bar.ts
@@ -30,7 +30,7 @@ export class MdcTabBar extends MdcComponent<MDCTabBarFoundation> {
     this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);
   }
 
-  @bindable
+  @bindable.none
   align: MdcTabScroller['align'];
 
   async initialise() {
diff --git a/packages/tab-bar/src/scroller/mdc-tab-scroller.ts b/packages/tab-bar/src/scroller/mdc-tab-scroller.ts
index 68d496f6..1bd7d020 100644
--- a/packages/tab-bar/src/scroller/mdc-tab-scroller.ts
+++ b/packages/tab-bar/src/scroller/mdc-tab-scroller.ts
@@ -12,7 +12,7 @@ export class MdcTabScroller extends MdcComponent<MDCTabScrollerFoundation> {
   private content_: HTMLElement; // assigned in html
   private area_: HTMLElement; // assigned in html
 
-  @bindable
+  @bindable.none
   align: 'start' | 'end' | 'center';
 
   @children('mdc-tab')
diff --git a/packages/tab-bar/src/tab/mdc-tab.ts b/packages/tab-bar/src/tab/mdc-tab.ts
index 7b2dd1cf..a749f683 100644
--- a/packages/tab-bar/src/tab/mdc-tab.ts
+++ b/packages/tab-bar/src/tab/mdc-tab.ts
@@ -16,7 +16,7 @@ export class MdcTab extends MdcComponent<MDCTabFoundation> {
   private tabIndicator_: MdcTabIndicator; // assigned in initialize();
   private content_: HTMLElement; // assigned in initialize();
 
-  @bindable
+  @bindable.none
   id: string = `mdc-tab-${++tabId}`;
 
   @bindable.booleanAttr
@@ -25,10 +25,10 @@ export class MdcTab extends MdcComponent<MDCTabFoundation> {
   @bindable.booleanAttr({ defaultBindingMode: bindingMode.twoWay })
   active: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
-  @bindable
+  @bindable.none
   label: string;
 
   @bindable.booleanAttr
@@ -40,7 +40,7 @@ export class MdcTab extends MdcComponent<MDCTabFoundation> {
   @bindable.booleanAttr
   stacked: boolean;
 
-  @bindable
+  @bindable.none
   indicatorIcon: string;
 
   handleClick_() {
diff --git a/packages/text-field/src/mdc-text-field-helper-line/mdc-text-field-helper-line.ts b/packages/text-field/src/mdc-text-field-helper-line/mdc-text-field-helper-line.ts
index f940c3a6..5e4872de 100644
--- a/packages/text-field/src/mdc-text-field-helper-line/mdc-text-field-helper-line.ts
+++ b/packages/text-field/src/mdc-text-field-helper-line/mdc-text-field-helper-line.ts
@@ -5,7 +5,7 @@ import { bindable } from 'aurelia-typed-observable-plugin';
 @useView(PLATFORM.moduleName('./mdc-text-field-helper-line.html'))
 @customElement('mdc-text-field-helper-line')
 export class MdcTextFieldHelperLine {
-  @bindable
+  @bindable.none
   errors: string[];
 }
 
diff --git a/packages/text-field/src/mdc-text-field.ts b/packages/text-field/src/mdc-text-field.ts
index 49758319..2ca25b5a 100644
--- a/packages/text-field/src/mdc-text-field.ts
+++ b/packages/text-field/src/mdc-text-field.ts
@@ -49,7 +49,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
   errors = new Map<IError, boolean>();
   mutationObserver = new MutationObserver(mutations => this.mutated(mutations));
 
-  @bindable
+  @bindable.none
   label: string;
   async labelChanged() {
     await this.initialised;
@@ -73,10 +73,10 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
   @bindable.booleanAttr
   outlined?: boolean = this.defaultConfiguration.outlined;
 
-  @bindable
+  @bindable.none
   prefix: string;
 
-  @bindable
+  @bindable.none
   suffix: string;
 
   @bindable.booleanAttr
@@ -105,7 +105,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
   @bindable.booleanAttr
   blurOnEnter: boolean;
 
-  @bindable
+  @bindable.none
   maxlength: string;
   maxlengthChanged() {
     if (this.maxlength) {
@@ -115,7 +115,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   rows: string;
   rowsChanged() {
     if (this.rows) {
@@ -125,7 +125,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   cols: string;
   colsChanged() {
     if (this.rows) {
@@ -135,7 +135,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   max: string;
   maxChanged() {
     if (this.max === undefined) {
@@ -145,7 +145,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   min: string;
   minChanged() {
     if (this.min === undefined) {
@@ -155,7 +155,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   step: string;
   stepChanged() {
     if (this.step === undefined) {
@@ -165,7 +165,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   autocomplete: string;
   autocompleteChanged() {
     if (this.autocomplete === undefined) {
@@ -185,7 +185,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   type: string;
   typeChanged() {
     if (!this.textarea) {
@@ -197,7 +197,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   name: string;
   nameChanged() {
     if (this.name === undefined) {
@@ -207,7 +207,7 @@ export class MdcTextField extends MdcComponent<MDCTextFieldFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   placeholder: string = ' '; // non empty placeholder solves the issue of misplaced labels in Safari
 
   private initialValue: string;
diff --git a/packages/tooltip/src/mdc-tooltip-attribute.ts b/packages/tooltip/src/mdc-tooltip-attribute.ts
index 77ad8110..288dd41a 100644
--- a/packages/tooltip/src/mdc-tooltip-attribute.ts
+++ b/packages/tooltip/src/mdc-tooltip-attribute.ts
@@ -25,17 +25,17 @@ export class MdcTooltipAttribute {
   persistent: boolean;
 
   /** Sets the horizontal alignment of the tooltip */
-  @bindable
+  @bindable.none
   xPosition: keyof typeof XPosition;
 
   /** Sets the vertical alignment of the tooltip */
-  @bindable
+  @bindable.none
   yPosition: keyof typeof YPosition;
 
   /** Specifies whether the anchor element is bounded (element has an identifiable boundary such as a button) or unbounded (element does not have a visually declared boundary such as a text link).
    * Tooltips are placed closer to bounded anchor elements compared to unbounded anchor elements. If no type is specified, defaults to BOUNDED.
    **/
-  @bindable
+  @bindable.none
   boundaryType: keyof typeof AnchorBoundaryType;
 
   @bindable.number
@@ -44,7 +44,7 @@ export class MdcTooltipAttribute {
   @bindable.number
   hideDelay: number;
 
-  @bindable
+  @bindable.none
   scrollHost?: HTMLElement | string = this.defaultConfiguration.scrollHost;
 
   tooltip: HTMLElement;
diff --git a/packages/tooltip/src/mdc-tooltip.ts b/packages/tooltip/src/mdc-tooltip.ts
index f2226385..a9cced2f 100644
--- a/packages/tooltip/src/mdc-tooltip.ts
+++ b/packages/tooltip/src/mdc-tooltip.ts
@@ -16,7 +16,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
   }
 
   /** Sets the anchor element */
-  @bindable
+  @bindable.none
   anchorElem?: HTMLElement;
 
   @bindable.booleanAttr
@@ -26,7 +26,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
   persistent: boolean;
 
   /** Sets the horizontal alignment of the tooltip */
-  @bindable
+  @bindable.none
   xPosition?: keyof typeof XPosition;
   async xPositionChanged() {
     if (this.xPosition !== undefined) {
@@ -36,7 +36,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
   }
 
   /** Sets the vertical alignment of the tooltip */
-  @bindable
+  @bindable.none
   yPosition?: keyof typeof YPosition;
   async yPositionChanged() {
     if (this.yPosition !== undefined) {
@@ -46,7 +46,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
   }
 
   /** Sets the caret position relative to the tooltip */
-  @bindable
+  @bindable.none
   withCaretPos?: keyof typeof PositionWithCaret;
   async withCaretPosChanged() {
     if (this.withCaretPos !== undefined) {
@@ -58,7 +58,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
   /** Specifies whether the anchor element is bounded (element has an identifiable boundary such as a button) or unbounded (element does not have a visually declared boundary such as a text link).
    * Tooltips are placed closer to bounded anchor elements compared to unbounded anchor elements. If no type is specified, defaults to BOUNDED.
    **/
-  @bindable
+  @bindable.none
   boundaryType?: keyof typeof AnchorBoundaryType;
   async boundaryTypeChanged() {
     if (this.boundaryType !== undefined) {
@@ -81,7 +81,7 @@ export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements Ev
     this.foundation?.setHideDelay(this.hideDelay ?? numbers.HIDE_DELAY_MS);
   }
 
-  @bindable
+  @bindable.none
   scrollHost?: HTMLElement | string = this.defaultConfiguration.scrollHost;
 
   // eslint-disable-next-line @typescript-eslint/require-await
diff --git a/packages/top-app-bar/src/mdc-top-app-bar.ts b/packages/top-app-bar/src/mdc-top-app-bar.ts
index d6e7166b..9217d292 100644
--- a/packages/top-app-bar/src/mdc-top-app-bar.ts
+++ b/packages/top-app-bar/src/mdc-top-app-bar.ts
@@ -30,7 +30,7 @@ export class MdcTopAppBar extends MdcComponent<MDCTopAppBarBaseFoundation> {
   @bindable.booleanAttr
   dense: boolean;
 
-  @bindable
+  @bindable.none
   scrollTarget: EventTarget = window;
   scrollTargetChanged(newValue: EventTarget, oldValue: EventTarget) {
     // Remove scroll handler from the previous scroll target