@shortfuse/materialdesignweb 0.9.3 → 0.10.0

package/bin/mdw-css.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
-import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../services/theme.js';
+import { generateResetCSS, generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../services/theme.js';
 import { getSearchParams } from '../utils/cli.js';
 
-process.stdout.write(
-  generateThemeCSS(
-    themeOptionsFromSearchParams(
-      getSearchParams(),
-    ),
-  ),
-);
+const options = themeOptionsFromSearchParams(getSearchParams());
+process.stdout.write(generateThemeCSS(options));
+
 process.stdout.write(generateTypographyGlobalCSS());
+
+if (options.resetCSS) {
+  process.stdout.write(generateResetCSS());
+}

package/components/BottomSheet.js

@@ -2,7 +2,7 @@ import CustomElement from '../core/CustomElement.js';
 import { ELEMENT_ANIMATION_TYPE, EVENT_HANDLER_TYPE } from '../core/customTypes.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import FlexboxMixin from '../mixins/FlexboxMixin.js';
 import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
@@ -98,7 +98,7 @@ CustomElement
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
+  .mixin(FlexboxMixin)
   .mixin(ShapeMixin)
   .mixin(AriaReflectorMixin)
   .mixin(DelegatesFocusMixin)

package/components/Box.js

@@ -1,5 +1,5 @@
 import CustomElement from '../core/CustomElement.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import FlexboxMixin from '../mixins/FlexboxMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /**
@@ -9,7 +9,7 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
+  .mixin(FlexboxMixin)
   .html`<slot id=slot></slot>`
   .css`
     :host(:where([color])) {

package/components/NavItem.js

@@ -62,6 +62,9 @@ export default CustomElement
     iconVariation({ active }) {
       return active ? 'filled' : null;
     },
+    _customRippleState({ active }) {
+      return active ? null : 'complete';
+    },
   })
   .html`
     <mdw-icon id=icon aria-hidden=true src={src} active={active} icon={icon} variation={iconVariation}></mdw-icon>
@@ -76,7 +79,7 @@ export default CustomElement
     anchor.setAttribute('href', '{_anchorHref}');
     anchor.before(html`
       <mdw-shape id=shape active={active} shape-style=full>
-        <mdw-ripple id=ripple ripple-origin=center keep-alive hold-ripple ripple-state=${({ active }) => ((active) ? null : 'complete')}></mdw-ripple>
+        <mdw-ripple id=ripple ripple-origin=center keep-alive hold-ripple ripple-state={_customRippleState}></mdw-ripple>
         ${state}
         ${rippleContainer}
       </mdw-shape>

package/components/Page.js

@@ -66,6 +66,8 @@ export default CustomElement
       --mdw-pane__max-width: 1040px;
       --mdw-pane__margin-inline: 16px;
       --mdw-pane__padding-inline: max(var(--mdw-pane__margin-inline), calc((100% - var(--mdw-pane__max-width)) / 2));
+      --mdw-pane__padding-block: 16px;
+      --mdw-pane__padding: var(--mdw-pane__padding-block) var(--mdw-pane__padding-inline);
       --mdw-pane__shape__size: 0;
       display: grid;
       column-gap: var(--mdw-page__margin);
@@ -83,6 +85,7 @@ export default CustomElement
     @media (min-width: 648px) {
       :host {
         --mdw-pane__margin-inline: 24px;
+        --mdw-pane__padding-block: 24px;
       }
     }
 

package/components/Pane.js

@@ -19,8 +19,6 @@ export default Box
       --mdw-ink: var(--mdw-color__on-surface);
       background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
-
-      overflow: auto;
     }
   `
   .autoRegister('mdw-pane');

package/components/SideSheet.js

@@ -4,7 +4,7 @@ import { isRtl } from '../core/dom.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
 import ElevationMixin from '../mixins/ElevationMixin.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import FlexboxMixin from '../mixins/FlexboxMixin.js';
 import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
@@ -36,7 +36,7 @@ const SUPPORTS_SCROLLEND = 'onscrollend' in window;
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
+  .mixin(FlexboxMixin)
   .mixin(ElevationMixin)
   .mixin(ShapeMixin)
   .mixin(AriaReflectorMixin)

package/components/Surface.js

@@ -1,6 +1,6 @@
 import CustomElement from '../core/CustomElement.js';
 import ElevationMixin from '../mixins/ElevationMixin.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import FlexboxMixin from '../mixins/FlexboxMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
@@ -12,7 +12,7 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
+  .mixin(FlexboxMixin)
   .mixin(ElevationMixin)
   .mixin(ShapeMixin)
   .html`<slot id=slot></slot>`

package/core/Composition.js

@@ -28,6 +28,7 @@ import { generateUID } from './uid.js';
  * @prop {ShadowRoot} [shadowRoot] where
  * @prop {any} [context] `this` on callbacks/events
  * @prop {any} [injections]
+ * @prop {number} [iterationIndex]
  */
 
 /**
@@ -162,6 +163,7 @@ import { generateUID } from './uid.js';
  * @prop {any} [defaultValue]
  * @prop {RenderGraphSearch} search
  * @prop {InterpolateOptions['injections']} [injections]
+ * @prop {number} [adapterIndex]
  */
 
 /**
@@ -379,7 +381,7 @@ function searchWithDeepProp(state, changes, data) {
  * @typedef InitializationState
  * @prop {Element} lastElement
  * @prop {ChildNode} lastChildNode
- * @prop {(Element|Text)[]} nodes
+ * @prop {(ChildNode)[]} nodes
  * @prop {any[]} caches
  * @prop {Comment[]} comments
  * @prop {Uint8Array} nodeStates
@@ -387,6 +389,7 @@ function searchWithDeepProp(state, changes, data) {
  * @prop {HTMLElement[]} refs
  * @prop {number} lastChildNodeIndex
  * @prop {RenderOptions<?>} options
+ * @prop {CompositionAdapter<any>[][]} adapters
  */
 
 /** Splits: `{template}text{template}` as `['', 'template', 'text', 'template', '']` */
@@ -480,6 +483,7 @@ export default class Composition {
     searchIndex: 0,
     cacheIndex: 0,
     commentIndex: 0,
+    adapterIndex: 0,
     /** @type {this['nodesToBind'][0]} */
     nodeEntry: null,
   };
@@ -698,6 +702,7 @@ export default class Composition {
       nodes: [],
       caches: this.initCache.slice(),
       refs: [],
+      adapters: [],
       options,
     };
 
@@ -743,6 +748,7 @@ export default class Composition {
      * @param {Partial<T>} changes
      * @param {T} data
      */
+    // eslint-disable-next-line no-shadow
     const draw = (changes, data) => {
       if (!changes) return;
       let ranSearch = false;
@@ -796,6 +802,7 @@ export default class Composition {
      * @param {any} value
      * @param {Partial<T>} [data]
      */
+    // eslint-disable-next-line no-shadow
     draw.byProp = (prop, value, data) => {
       if (!this.actionsByPropsUsed?.has(prop)) return;
       let ranSearch = false;
@@ -813,6 +820,7 @@ export default class Composition {
       }
 
       /** @type {Partial<T>} */
+      // eslint-disable-next-line no-shadow
       let changes;
       const actions = this.actionsByPropsUsed.get(prop);
       for (const action of actions) {
@@ -1256,7 +1264,7 @@ export default class Composition {
       return null;
     }
     const parsedValue = trimmed.slice(1, -1);
-    const [valueName, iterableName] = parsedValue.split(/\s+of\s+/);
+    const [valueName, iterableClause] = parsedValue.split(/\s+of\s+/);
     element.removeAttribute('mdw-for');
     // Create a new composition targetting element as root
 
@@ -1286,6 +1294,9 @@ export default class Composition {
       index: null,
     };
 
+    const iterableParts = iterableClause.split('.');
+    const iterableDeepProp = iterableParts.length > 1 ? iterableParts : null;
+    const iterableName = iterableDeepProp ? iterableParts[0] : iterableClause;
     const propsUsed = [iterableName];
     /** @type {RenderGraphSearch} */
     const search = {
@@ -1293,9 +1304,9 @@ export default class Composition {
       searchIndex: this._interpolationState.searchIndex++,
       query: null,
       prop: null,
-      deepProp: null,
+      deepProp: iterableDeepProp,
       propsUsed,
-      deepPropsUsed: [[iterableName]],
+      deepPropsUsed: iterableDeepProp ? [iterableDeepProp] : [[iterableName]],
       defaultValue: {},
       invocation: null,
     };
@@ -1306,16 +1317,27 @@ export default class Composition {
       nodeIndex: this._interpolationState.nodeIndex,
       search,
       commentIndex: this._interpolationState.commentIndex++,
+      adapterIndex: this._interpolationState.adapterIndex++,
       injections,
       invocation(state, value, changes, data) {
-        if (!newComposition.adapter) {
-          // console.log({ state.options });
+        // Optimistic get
+        let adaptersArray = state.adapters[this.adapterIndex];
+        const iterationIndex = state.options.iterationIndex ?? 0;
+        let adapter;
+        if (!adaptersArray || (!(adapter = adaptersArray[iterationIndex]))) {
           const instanceAnchorElement = state.nodes[this.nodeIndex];
           const anchorNode = createEmptyComment();
+
+          if (state.comments[this.commentIndex]) {
+            throw new Error('Comment already exists at index');
+          }
+
           // Avoid leak
           state.comments[this.commentIndex] = anchorNode;
+
+          // @ts-ignore DocumentFragment in documents can be replaced (bad typings)
           instanceAnchorElement.replaceWith(anchorNode);
-          newComposition.adapter = new CompositionAdapter({
+          adapter = new CompositionAdapter({
             anchorNode,
             composition: newComposition,
             renderOptions: {
@@ -1325,15 +1347,32 @@ export default class Composition {
               injections: this.injections,
             },
           });
+
+          // eslint-disable-next-line no-multi-assign
+          adaptersArray = ((state.adapters[this.adapterIndex] ??= []));
+          adaptersArray[iterationIndex] = adapter;
+        }
+
+        const currentInjections = state.options.injections ?? this.injections;
+        const source = data ?? state.options.store;
+        let iterable = iterableDeepProp
+          ? deepPropFromObject(iterableDeepProp, source)
+          : source[iterableName];
+        if (iterable === undefined && iterableDeepProp && currentInjections) {
+          iterable = deepPropFromObject(iterableDeepProp, currentInjections);
         }
-        const { adapter } = newComposition;
-        const iterable = (data ?? state.options.store)[iterableName];
         // Remove oversized
         if (!iterable || iterable.length === 0) {
           adapter.removeEntries();
           return;
         }
-        const changeList = changes[iterableName];
+
+        const changeList = iterableDeepProp
+          ? deepPropFromObject(iterableDeepProp, changes)
+          : changes[iterableName];
+
+        if (changeList === undefined) return;
+
         const innerChanges = { ...changes };
         const needTargetAll = newComposition.props.some((prop) => prop !== iterableName && prop in changes);
 
@@ -1351,9 +1390,10 @@ export default class Composition {
             const index = (+key);
             const resource = iterable[index];
             innerChanges[valueName] = change;
-            this.injections[valueName] = resource;
-            this.injections.index = index;
-
+            currentInjections[valueName] = resource;
+            currentInjections.index = index;
+            adapter.renderOptions.injections = currentInjections;
+            adapter.renderOptions.iterationIndex = index;
             adapter.renderData(index, innerChanges, data, resource, change);
           }
         } else {
@@ -1376,9 +1416,10 @@ export default class Composition {
               }
               innerChanges[valueName] = change;
             }
-            this.injections[valueName] = resource;
-            this.injections.index = index;
-
+            currentInjections[valueName] = resource;
+            currentInjections.index = index;
+            adapter.renderOptions.injections = currentInjections;
+            adapter.renderOptions.iterationIndex = index;
             adapter.renderData(index, innerChanges, data, resource, change);
             // adapter.renderIndex(index, innerChanges, data, resource);
           }

package/core/CompositionAdapter.js

@@ -29,6 +29,38 @@ import { createEmptyComment } from './optimizations.js';
  * @prop {Comment} [comment]
  */
 
+/**
+ * @param {any} node
+ * @return {HTMLElement}
+ */
+function captureFocus(node) {
+  return node?.matches?.(':focus') ? node : node?.querySelector?.(':focus');
+}
+
+/** @param {HTMLElement} focused */
+function restoreFocus(focused) {
+  if (focused && focused.isConnected && !focused.matches(':focus')) {
+    focused.focus();
+  }
+}
+
+/**
+ *  @param {Element|Comment} node
+ *  @param {ChildNode} beforeNode
+ */
+function moveNode(node, beforeNode) {
+  const focused = captureFocus(node);
+  if (beforeNode) {
+    beforeNode.before(node);
+  } else {
+    node.parentNode?.append(node);
+  }
+  restoreFocus(focused);
+}
+
+// @ts-expect-error Bad typings
+const hasMoveBefore = typeof Element.prototype.moveBefore === 'function';
+
 /** @template T */
 export default class CompositionAdapter {
   /** @param {DomAdapterCreateOptions<T>} options */
@@ -216,28 +248,37 @@ export default class CompositionAdapter {
 
         const correctMetadata = this.metadata[oldIndex];
 
-        // Move back <=
+        // Swap metadata entries instead of removing/recreating.
         this.metadata[newIndex] = correctMetadata;
-        this.metadata.splice(oldIndex, 1);
+        this.metadata[oldIndex] = metadataAtIndex;
 
         const { domNode: domNodeToRemove } = metadataAtIndex;
-        domNodeToRemove.replaceWith(correctMetadata.domNode);
+
+        const removalContainer = domNodeToRemove.parentNode;
+        const correctNext = correctMetadata.domNode.nextSibling;
+        if (hasMoveBefore) {
+          // @ts-expect-error Bad typings
+          removalContainer.moveBefore(correctMetadata.domNode, domNodeToRemove);
+          if (correctNext) {
+            // @ts-expect-error Bad typings
+            removalContainer.moveBefore(domNodeToRemove, correctNext);
+          }
+        } else {
+          moveNode(correctMetadata.domNode, domNodeToRemove);
+          if (correctNext) {
+            moveNode(domNodeToRemove, correctNext);
+          }
+        }
 
         if (!skipOnMatch) {
-          console.warn('no skip on match on swap', newIndex);
+          // console.warn('no skip on match on swap', newIndex);
           correctMetadata.render(changes, data);
         }
 
         // Remove posterior
 
         this.keys[newIndex] = key;
-        this.keys.splice(oldIndex, 1);
-
-        domNodeToRemove.remove();
-
-        // Don't release in case we may need it later
-        // console.debug('Caching key', key);
-        metadataCache.set(currentKey, metadataAtIndex);
+        this.keys[oldIndex] = currentKey;
 
         return;
       }
@@ -266,7 +307,9 @@ export default class CompositionAdapter {
   removeEntries(startIndex = 0) {
     const { length } = this.metadata;
     for (let index = length - 1; index >= startIndex; index--) {
-      this.metadata[index].domNode.remove();
+      const entry = this.metadata[index];
+      if (!entry || !entry.domNode) continue;
+      entry.domNode.remove();
     }
     this.metadata.length = startIndex;
     this.keys.length = startIndex;