@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/core/ICustomElement.d.ts

@@ -1,291 +0,0 @@
-/* eslint-disable no-use-before-define */
-
-import Composition from './Composition.js';
-import {
-  CompositionEventListener,
-  CompositionEventListenerObject,
-  HTMLTemplater,
-  ObserverOptions,
-  ObserverPropertyType,
-  ParsedObserverPropertyType,
-  ParsedProps,
-} from './typings.js';
-
-type ClassOf<T extends { prototype: unknown; } > = T;
-
-type CallbackArguments<T1 = any, T2 = T1> = {
-  composition: Composition<T1>;
-  html: HTMLTemplater<T1, Partial<T2>>;
-  inline: (fn: (this:T1, data: {[K in keyof T2]?: T2[K]}) => any) => string;
-  template: DocumentFragment;
-  element: T1;
-}
-
-type IDLParameter<C extends object> = {
-  [P in string] :
-    ObserverPropertyType
-    | ObserverOptions<ObserverPropertyType, unknown, C>
-    | ((this:C, data:Partial<C>, fn?: () => any) => any)
-};
-
-type ExtendedClass<T1 extends typeof ICustomElement, T2 extends abstract new (...args: any) => any> =
-  Omit<T1, 'prototype'> & T2;
-
-type ConstructorLess<T1 extends object, T2 extends abstract new (...args: any) => any> = T1 & T2;
-
-declare type DefinedPropertiesOf<T extends ({ prototype: unknown; } & (new (...args: any) => any)), P> =
-  {[K in keyof T]: T[K]}
-  & { new(): (...args: ConstructorParameters<T>) => InstanceType<T> & P}
-  & { prototype: T['prototype'] & P };
-
-type CompositionCallback<T1, T2=T1> = {
-    composed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    constructed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    connected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    disconnected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    props?: {
-      [P in keyof T1] : (
-      this: T1,
-      oldValue: T1[P],
-      newValue: T1[P],
-      changes:any,
-      element: T1
-      ) => any
-    },
-    attrs?: {[K in keyof any]: (
-      this: T1,
-      oldValue: string,
-      newValue: string,
-      element: T1
-      ) => unknown
-    },
-  } & {
-    [P in keyof T1 & string as `${P}Changed`]?: (
-      this: T1,
-      oldValue: T1[P],
-      newValue: T1[P],
-      changes:any,
-      element: T1
-      ) => any
-  }
-
-declare interface ICustomElementInstance extends HTMLElement {
-  ariaActiveDescendantElement: Element
-  propChangedCallback<
-    T extends ICustomElementInstance,
-    K extends string = string,
-  >(this:T,
-      name: K,
-      oldValue: K extends keyof T ? T[K] : unknown,
-      newValue: K extends keyof T ? T[K] : unknown,
-      changes?: K extends keyof T ? T[K] extends object ? Partial<T[K]> : T[K] : unknown): void;
-
-}
-
-interface ConstructorOf<T> {
-  new(): T;
-}
-
-export declare const ICustomElement: {
-  new(): ICustomElementInstance;
-  prototype: ICustomElementInstance;
-
-  _onComposeCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onConnectedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onDisconnectedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onConstructedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  schema: Record<string, unknown>;
-
-  extend<T extends typeof ICustomElement>(this: T): T;
-
-  tsClassFix<T extends typeof ICustomElement>(this:T): T & (new (...args:any[]) => InstanceType<T>)
-
-  html<T extends typeof ICustomElement>(
-    this: T,
-    string: TemplateStringsArray,
-    // eslint-disable-next-line no-shadow
-    ...substitutions: (string|Element|((this:InstanceType<T>, data:InstanceType<T> & T['schema'], injections?:any) => any))[]
-    ): T
-
-  css<
-    T1 extends typeof ICustomElement,
-    T2 extends TemplateStringsArray|HTMLStyleElement|CSSStyleSheet>(
-    this: T1,
-    array: T2,
-    ...rest: T2 extends TemplateStringsArray ? any[] : (HTMLStyleElement|CSSStyleSheet)[]
-  ): T1
-
-  define<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends {
-        [P in keyof any] :
-          {
-            enumerable?: boolean;
-            configurable?: boolean;
-            writable?: boolean;
-            value?: any;
-            get?: ((this: INSTANCE) => any);
-            set?: (this: INSTANCE, value: any) => void;
-          } | ((this: INSTANCE, ...args:any[]) => any)
-      },
-    VALUE extends {
-      [KEY in keyof PROPS]: PROPS[KEY] extends (...args2:any[]) => infer R ? R
-        : PROPS[KEY] extends TypedPropertyDescriptor<infer R> ? R : never
-    }>
-    (this: CLASS, props: PROPS & ThisType<PROPS & INSTANCE>): CLASS
-      & (new (...args: ARGS) => INSTANCE & VALUE)
-
-  observe<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends IDLParameter<INSTANCE>,
-    VALUE extends {
-      [KEY in keyof PROPS]:
-      PROPS[KEY] extends (...args2:any[]) => infer R ? R
-          : PROPS[KEY] extends ObserverPropertyType ? ParsedObserverPropertyType<PROPS[KEY]>
-          : PROPS[KEY] extends {type: 'object'} & ObserverOptions<any, infer R> ? (unknown extends R ? object : R)
-          : PROPS[KEY] extends {type: ObserverPropertyType} ? ParsedObserverPropertyType<PROPS[KEY]['type']>
-          : PROPS[KEY] extends ObserverOptions<any, infer R> ? (unknown extends R ? string : R)
-          : never
-    },
-    > (this: CLASS, props: PROPS)
-      : CLASS & (new (...args: ARGS) => INSTANCE & VALUE)
-
-  props: typeof ICustomElement.observe;
-
-  set<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends object>
-    (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
-    : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
-
-  methods: typeof ICustomElement.set;
-
-  overrides<
-  CLASS extends typeof ICustomElement,
-  ARGS extends ConstructorParameters<CLASS>,
-  INSTANCE extends InstanceType<CLASS>,
-  PROPS extends Partial<INSTANCE>>
-  (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
-  : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
-
-  expressions<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends {
-      [K in keyof any]: ((this: INSTANCE, data?: INSTANCE & CLASS['schema']) => string|boolean|null)
-    }
-    >(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>):
-    CLASS & (new (...args: ARGS) => INSTANCE & PROPS)
-
-  defineStatic<
-    T1 extends typeof ICustomElement,
-    T2 extends IDLParameter<T1>>
-    (this: T1, props: T2):T1 & ParsedProps<T2>;
-
-  setStatic<
-    T1 extends typeof ICustomElement,
-    T2 extends {
-      [K in keyof any]: (
-        ((this:T1, ...args:any[]) => any)
-        |string|number|boolean|any[]|object)}
-    >
-    (this: T1, source: T2 & ThisType<T1 & T2>):T1 & T2;
-
-  autoRegister<T extends typeof ICustomElement>
-    (this: T, elementName: string): T;
-
-  setSchema<
-    T1 extends typeof ICustomElement,
-    T2 extends {[K in keyof any]: unknown}
-    >
-    (this: T1, schema: T2): T1 & {schema: T2};
-
-  register<T extends typeof ICustomElement>
-    (this: T, elementName?: string, force?: boolean): T;
-
-  append<
-    T extends typeof ICustomElement,
-    >
-    (this: T, ...parts: ConstructorParameters<typeof Composition<InstanceType<T>>>): T;
-
-  mixin<
-    BASE extends typeof ICustomElement,
-    FN extends (...args:any[]) => any,
-    RETURN extends ReturnType<FN>,
-    SUBCLASS extends ClassOf<RETURN>,
-    ARGS extends ConstructorParameters<SUBCLASS>,
-    BASE_INSTANCE extends InstanceType<BASE>,
-    SUBCLASS_INSTANCE extends InstanceType<SUBCLASS>>
-    (this: BASE, mixin: FN): SUBCLASS & BASE
-      & (new (...args: ARGS) => SUBCLASS_INSTANCE & BASE_INSTANCE)
-
-  events<T extends typeof ICustomElement>
-    (
-      this: T,
-      listeners?: CompositionEventListenerObject<InstanceType<T>>,
-      options?: Partial<CompositionEventListener<InstanceType<T>>>,
-    ): T;
-
-  childEvents<T extends typeof ICustomElement>
-    (
-      this: T,
-      listenerMap: {
-        [P in keyof any]: CompositionEventListenerObject<InstanceType<T>>
-      },
-      options?: Partial<CompositionEventListener<InstanceType<T>>>,
-    ): T;
-
-  on<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>,
-    T3 extends CompositionCallback<T2, T2 & T1['schema']>,
-    T4 extends keyof T3,
-    >
-    (this: T1, name: T3|T4, callbacks?: T3[T4] & ThisType<T2>): T1
-
-  onPropChanged<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>
-    >
-    (
-      this: T1,
-      options: {
-        [P in keyof T2]? : (
-        // eslint-disable-next-line no-shadow
-        this: T2,
-        oldValue: T2[P],
-        newValue: T2[P],
-        changes:any,
-        element: T2
-        ) => void
-      },
-    ): T1;
-
-  onAttributeChanged<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>
-    >
-    (
-      this: T1,
-      options: {
-        [x:string]: (
-        // eslint-disable-next-line no-shadow
-        this: T2,
-        oldValue: string,
-        newValue: string,
-        element: T2
-        ) => void
-      },
-    ): T1;
-};

package/core/ICustomElement.js

@@ -1 +0,0 @@
-export class ICustomElement extends HTMLElement {}

package/core/test.js

@@ -1,126 +0,0 @@
-import CustomElement from './CustomElement.js';
-
-/** @param {number} max */
-function _random(max) {
-  return Math.round(Math.random() * 1000) % max;
-}
-
-CustomElement
-  .extend()
-  .observe({
-    data: { type: 'object', reflect: false, value: [] },
-    selected: { type: 'integer', reflect: false },
-  })
-  .methods({
-    buildData(count = 1000) {
-      const adjectives = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'];
-      const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
-      const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
-      const data = [];
-      for (let i = 0; i < count; i++) { data.push({ id: this.id++, label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` }); }
-      return data;
-    },
-    updateData(mod = 10) {
-      for (let i = 0; i < this.data.length; i += 10) {
-        this.data[i].label += ' !!!';
-        // this.data[i] = Object.assign({}, this.data[i], {label: this.data[i].label +' !!!'});
-      }
-    },
-
-    onItemClick({ currentTarget }) {
-      this.selected = currentTarget.dataset.id;
-      return false;
-    },
-    onRemoveClick({ currentTarget }) {
-      const id = currentTarget.dataset.id;
-      this.data = this.data.filter((item) => item.id !== id);
-      return false;
-    },
-  })
-  .html`
-    <link href="/css/currentStyle.css" rel="stylesheet"/>
-      <div class=container>
-        <div class=jumbotron>
-          <div class=row>
-            <div class=col-md-6><h1>MDW unkeyed</h1></div>
-            <div class=col-md-6>
-              <div class=row>
-                <div class="col-sm-6 smallpad">
-                  <button id=run class="btn btn-primary btn-block">Create 1,000 rows</button>
-                </div>
-                <div class="col-sm-6 smallpad">
-                  <button id=runlots class="btn btn-primary btn-block">Create 10,000 rows</button>
-                </div>
-                <div class="col-sm-6 smallpad">
-                  <button id=add class="btn btn-primary btn-block">Append 1,000 rows</button>
-                </div>
-                <div class="col-sm-6 smallpad">
-                  <button id=update class="btn btn-primary btn-block">Update every 10th row</button>
-                </div>
-                <div class="col-sm-6 smallpad">
-                  <button id=clear class="btn btn-primary btn-block" >Clear</button>
-                </div>
-                <div class="col-sm-6 smallpad">
-                  <button id=swaprows class="btn btn-primary btn-block">Swap Rows</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <table id=table class="table table-hover table-striped test-data">
-          <tbody>
-            <tr mdw-for="{item of data}" id={item.id} class=${({ item, _selected }) => (item?.id == _selected ? 'danger' : '')}>
-              <td class="col-md-1">{item.id}</td>
-              <td class="col-md-4"><a on-click={onLabelClick} data-id={item.id} >{item.label}</a></td>
-              <td class="col-md-1"><a on-click={onRemoveClick} data-id={item.id} ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
-              <td class="col-md-6"></td>
-            </tr>
-          </tbody>
-        </table>
-        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
-      </div>
-  `
-  .childEvents({
-    run: {
-      click() {
-        this.data = this.buildData();
-        this.selected = null;
-      },
-    },
-    runlots: {
-      click() {
-        this.data = this.buildData(10_000);
-        this.selected = null;
-      },
-    },
-    add: {
-      click() {
-        this.data = this.data.concat(this.buildData(1000));
-        this.selected = null;
-      },
-    },
-    update: {
-      click() {
-        this.updateData();
-        this.data = this.data.slice();
-        this.selected = null;
-      },
-    },
-    swaprows: {
-      click() {
-        if (this.data.length > 998) {
-          const newData = this.data.slice();
-          const tmp = this.newData[1];
-          this.newData[1] = this.newData[998];
-          this.newData[998] = tmp;
-          this.data = newData;
-        }
-      },
-    },
-    clear: {
-      click() {
-        this.data = [];
-        this.selected = null;
-      },
-    },
-  }).register('benchmark-app');

package/core/typings.d.ts

@@ -1,142 +0,0 @@
-type ObserverPropertyType = 'string' | 'boolean' | 'map' | 'set' | 'float' | 'integer' | 'object' | 'function' | 'array';
-
-type InlineTemplate<T1, T2=T1> = (fn: (this:T1, data: T2) => any) => string;
-
-type HTMLTemplater<T1, T2=T1> = ((
-  string: TemplateStringsArray, ...substitutions: (string|DocumentFragment|Element|((this:T1, data:T2) => any))[]
-) => DocumentFragment);
-
-type ParsedObserverPropertyType<T extends ObserverPropertyType> =
-  T extends 'boolean' ? boolean
-  : T extends 'string' ? string
-  : T extends 'float' | 'integer' ? number
-  : T extends 'array' ? any[]
-  : T extends 'object' ? any
-  : T extends 'function' ? (...args:any) => any
-  : unknown;
-
-type ObserverOptions<
-  T1 extends ObserverPropertyType,
-  T2 = any,
-  C extends object = any
-  > = {
-  type?: T1;
-  attr?: string;
-
-  /** Default true */
-  readonly?: boolean
-  enumerable?: boolean;
-
-  /** Defaults to false if type is boolean */
-  nullable?: boolean;
-
-  /** Empty value when not nullable */
-  empty?: T2;
-  /** Initial value (empty value if not specified) */
-  value?: T2;
-  values?: WeakMap<C, T2>;
-  reflect?: boolean | 'write' | 'read';
-  /** Function used when null passed */
-  changedCallback?: (this:C, oldValue:T2, newValue:T2, changes:any)=>any;
-  nullParser?: (this:C, value:null|undefined)=>T2;
-  parser?: (this:C, value:any)=>T2;
-  /** Function used when comparing */
-  diff?: (this:C, a:T2, b:T2)=> any,
-  is?: (this:C, a:T2, b:T2)=>boolean
-  get?: (this:C, data:Partial<C>, fn?: () => T2) => T2
-  set?: (this:C, value: T2, fn?:(value2: T2) => any) => any,
-  attributeChangedCallback?: (this:C, name:string, oldValue: string, newValue: string) => any;
-  propChangedCallback?: (this:C, name:string, oldValue: T2, newValue: T2, changes:any) => any;
-  computedValues?: WeakMap<C, T2>;
-  watchers?: [keyof C, (this:C, ...args:any[]) => any][];
-  needsSelfInvalidation?: WeakSet<C>,
-}
-
-type ObserverConfiguration<
-  T1 extends ObserverPropertyType,
-  T2 = any,
-  K = string,
-  C extends object = any> = ObserverOptions<T1, T2, C> & {
-    key: K,
-    values?: WeakMap<C, T2>;
-    attrValues?: WeakMap<C, string>;
-  };
-
-type ParsedProps<T> = {
-  [P in keyof T]:
-    T[P] extends (...args:any[]) => infer T2 ? T2
-      : T[P] extends ObserverPropertyType
-      ? ParsedObserverPropertyType<T[P]>
-      : T[P] extends {type: ObserverPropertyType}
-      ? ParsedObserverPropertyType<T[P]['type']>
-      : T[P] extends ObserverOptions<null, infer T2>
-      ? unknown extends T2 ? string : T2
-      : never
-};
-
-interface HTMLElementEventMapFixed extends HTMLElementEventMap {
-  input: InputEvent;
-}
-
-type HTMLElementCancellableEventMap = Pick<HTMLElementEventMapFixed,
-  'auxclick' |
-  'beforeinput' |
-  // 'cancel' |
-  'click' |
-  'compositionstart' |
-  'contextmenu' |
-  'drag' |
-  'dragenter' |
-  'dragover' |
-  'dragstart' |
-  'drop' |
-  'invalid' |
-  'keydown' |
-  'keypress' |
-  'keyup' |
-  'mousedown' |
-  'mousemove' |
-  'mouseout' |
-  'mouseover' |
-  'mouseup' |
-  'pointerdown' |
-  'pointermove' |
-  'pointerout' |
-  'pointerover' |
-  'pointerup' |
-  'reset' |
-  'selectstart' |
-  'submit' |
-  'touchend' |
-  'touchmove' |
-  'touchstart' |
-  'wheel'
-  >
-
-type CompositionEventMap = HTMLElementEventMapFixed & {
-  [P in keyof HTMLElementCancellableEventMap as `~${P}`]: Omit<HTMLElementCancellableEventMap[P], 'preventDefault'>
-};
-
-type CompositionEventListener<T, K = keyof CompositionEventMap> = {
-  type?: K
-  tag?: string,
-  capture?: boolean;
-  once?: boolean;
-  passive?: boolean;
-  signal?: AbortSignal;
-  handleEvent?: (
-      this: T,
-      event: (K extends keyof CompositionEventMap ? CompositionEventMap[K] : Event) & {currentTarget:HTMLElement}
-    ) => any;
-  prop?: string;
-  deepProp?: string[],
- };
-
-type CompositionEventListenerObject<T> =
-  {
-    [P in keyof CompositionEventMap]?: (keyof T & string)
-      | ((this: T, event: CompositionEventMap[P] & {currentTarget:HTMLElement}) => any)
-      | CompositionEventListener<T, P>
-  };
-
-export type dummyObject = {};

package/core/typings.js

@@ -1 +0,0 @@
-export {};

package/mixins/SurfaceMixin.js

@@ -1,127 +0,0 @@
-/**
- * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
- */
-export default function SurfaceMixin(Base) {
-  return Base
-    .observe({
-      elevated: 'boolean',
-      elevation: 'integer',
-      _raised: {
-        type: 'boolean',
-        get({ hoveredState, pressedState }) {
-          return hoveredState && !pressedState;
-        },
-      },
-    })
-    .html`
-      <div id=surface class=surface raised={_raised} disabled={disabledState} color={color}></div>
-    `
-    .css`
-      :host {
-
-        /** Filter blur is 1/2 CSS blur */
-      
-        /** Reference Properties */
-        /*
-        --mdw-surface__box-shadow__1__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
-        --mdw-surface__box-shadow__2__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
-        --mdw-surface__box-shadow__3__umbra: 0px 1px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
-        --mdw-surface__box-shadow__4__umbra: 0px 2px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
-        --mdw-surface__box-shadow__5__umbra: 0px 4px 4px 0px rgba(var(--mdw-color__shadow), 0.30);
-      
-        --mdw-surface__filter__0__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0));
-        --mdw-surface__filter__1__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
-        --mdw-surface__filter__2__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
-        --mdw-surface__filter__3__umbra: drop-shadow(0px 1px 1.5px rgba(var(--mdw-color__shadow), 0.30));
-        --mdw-surface__filter__4__umbra: drop-shadow(0px 2px 1.5px rgba(var(--mdw-color__shadow), 0.30));
-        --mdw-surface__filter__5__umbra: drop-shadow(0px 4px 2px rgba(var(--mdw-color__shadow), 0.30));
-      
-        --mdw-surface__box-shadow__1__penumbra: 0px 1px 3px 1px  rgba(var(--mdw-color__shadow), 0.15);
-        --mdw-surface__box-shadow__2__penumbra: 0px 2px 6px 2px  rgba(var(--mdw-color__shadow), 0.15);
-        --mdw-surface__box-shadow__3__penumbra: 0px 4px 8px 3px  rgba(var(--mdw-color__shadow), 0.15);
-        --mdw-surface__box-shadow__4__penumbra: 0px 6px 10px 4px rgba(var(--mdw-color__shadow), 0.15);
-        --mdw-surface__box-shadow__5__penumbra: 0px 8px 12px 6px rgba(var(--mdw-color__shadow), 0.15);
-      
-        --mdw-surface__filter__0__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0));
-        --mdw-surface__filter__1__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0.25));
-        --mdw-surface__filter__2__penumbra: drop-shadow(0px 2px 5px rgba(var(--mdw-color__shadow), 0.25));
-        --mdw-surface__filter__3__penumbra: drop-shadow(0px 4px 7px rgba(var(--mdw-color__shadow), 0.263));
-        --mdw-surface__filter__4__penumbra: drop-shadow(0px 6px 9px rgba(var(--mdw-color__shadow), 0.27));
-        --mdw-surface__filter__5__penumbra: drop-shadow(0px 8px 12px rgba(var(--mdw-color__shadow), 0.30));
-      
-        --mdw-surface__filter__0: var(--mdw-surface__shadow__0__umbra) var(--mdw-surface__shadow__0__penumbra);
-        --mdw-surface__filter__1: var(--mdw-surface__shadow__1__umbra) var(--mdw-surface__shadow__1__penumbra);
-        --mdw-surface__filter__2: var(--mdw-surface__shadow__2__umbra) var(--mdw-surface__shadow__2__penumbra);
-        --mdw-surface__filter__3: var(--mdw-surface__shadow__3__umbra) var(--mdw-surface__shadow__3__penumbra);
-        --mdw-surface__filter__4: var(--mdw-surface__shadow__4__umbra) var(--mdw-surface__shadow__4__penumbra);
-        --mdw-surface__filter__5: var(--mdw-surface__shadow__5__umbra) var(--mdw-surface__shadow__5__penumbra);
-        */
-      
-        /** Flatten for performance */
-        --mdw-surface__shadow__0: drop-shadow(0px 1px 001px rgba(0,0,0,000)) drop-shadow(0px 1px 2.5px rgba(0,0,0,00000));
-        --mdw-surface__shadow__1: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 1px 2.5px rgba(0,0,0,0.250));
-        --mdw-surface__shadow__2: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 2px 005px rgba(0,0,0,0.250));
-        --mdw-surface__shadow__3: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 4px 007px rgba(0,0,0,0.263));
-        --mdw-surface__shadow__4: drop-shadow(0px 2px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 6px 009px rgba(0,0,0,0.270));
-        --mdw-surface__shadow__5: drop-shadow(0px 4px 2.0px rgba(0,0,0,0.3)) drop-shadow(0px 8px 012px rgba(0,0,0,0.300));
-
-        /** Configurables */
-      
-        --mdw-surface__shadow__resting: none;
-        --mdw-surface__shadow: var(--mdw-surface__shadow__resting);
-        z-index: 0;
-      }
-      
-      :host([elevation="0"]) {
-        --mdw-surface__shadow__resting: none;
-      }
-      
-      :host([elevation="1"]) {
-        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-      }
-      
-      :host([elevation="2"]) {
-        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__2);
-      }
-      
-      :host([elevation="3"]) {
-        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-      }
-      
-      :host([elevation="4"]) {
-        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__4);
-      }
-      
-      :host([elevation="5"]) {
-        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__5);
-      }
-      
-      :host([elevation]) {
-        --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
-      }
-      
-      .surface {
-        position: absolute;
-        inset: 0;
-      
-        pointer-events: none;
-      
-        filter: var(--mdw-surface__shadow);
-        z-index: -1;
-      
-        transition-delay: 1ms;
-        transition-duration: 200ms;
-        transition-property: filter;
-        transition-timing-function: linear;
-        will-change: filter;
-      }
-      
-      .surface[raised] {
-        filter: var(--mdw-surface__shadow__raised, var(--mdw-surface__shadow__resting));
-      }
-      
-      .surface[disabled] {
-        filter:none;
-      }
-    `;
-}