@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/TopAppBar.js

@@ -1,79 +1,48 @@
 import CustomElement from '../core/CustomElement.js';
-import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+import { ELEMENT_ANIMATION_TYPE, ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
 import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
-import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
-import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import SemiStickyMixin from '../mixins/SemiStickyMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/**
+ * Top App Bars should have a background-color that is identical to
+ * `transparent`, though an explicit value allows updating the environment's
+ * to match the app bar (eg: color system bar).
+ *
+ * Top corners are shaped when not scrolling to allow matching with pane, but
+ * removed when raised
+ */
+
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
-  .mixin(SurfaceMixin) // TopAppBars are non-shaped surfaces
+  .mixin(ShapeMixin)
   .mixin(AriaToolbarMixin)
-  .mixin(ScrollListenerMixin)
-  .mixin(ResizeObserverMixin)
-  .extend()
-  .set({
-    elevated: true,
-  })
+  .mixin(SemiStickyMixin)
+  .mixin(DelegatesFocusMixin)
   .observe({
+    _raised: 'boolean',
+    _headlineOpacity: { type: 'float', default: 0 },
     headline: 'string',
-    _raised: 'boolean', // Change to raw value instead of computed
-    hideOnScroll: 'boolean',
     size: { value: /** @type {'small'|'medium'|'large'|null} */ (null) },
-    _cssPosition: {
-      /** @type {'sticky'|'relative'} */
-      empty: 'relative',
-    },
-    _visibleStart: { type: 'float', default: 0 },
-    _translateY: { type: 'float', empty: 0 },
-    _duration: { type: 'float', empty: 0 },
-    _easing: { empty: 'ease-in' },
-    _headlineOpacity: { type: 'float', default: 0 },
-    /** Convert to observable */
-    ariaLabel: 'string',
-    color: { empty: 'surface' },
+    color: 'string',
+    raisedColor: 'string',
   })
   .observe({
-    _scrollDirection: {
-      /**
-       * @param {'up'|'down'} oldValue
-       * @param {'up'|'down'} newValue
-       */
-      changedCallback(oldValue, newValue) {
-        if (newValue === 'down') {
-          if (this._cssPosition !== 'sticky') return;
-          // Was sticky, switch to relative and let appbar scroll away
-          this._cssPosition = 'relative';
-          this._translateY = this.scrollListenerPositionY;
-          return;
-        }
-        if (this._visibleStart < 1) return;
-        // Align appbar.bottom with scroll position (top of screen)
-        this._translateY = this.scrollListenerPositionY - this.refs.surface.scrollHeight;
-      },
-    },
-    _surfaceStyle: {
-      ...ELEMENT_STYLER_TYPE,
-      get({ hideOnScroll, _cssPosition, _translateY, _duration, _easing }) {
-        if (!hideOnScroll) {
-          return null;
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ raisedColor }) {
+        if (raisedColor) {
+          return '#raised-background:where([raised])'
+         + `{background-color:rgb(var(--mdw-color__${raisedColor}))`
+         + '}';
         }
-        return {
-          target: 'surface',
-          styles: {
-            position: _cssPosition,
-            transform: `translateY(${_translateY}px)`,
-          },
-          timing: {
-            duration: _duration,
-            easing: _easing,
-          },
-        };
       },
     },
     _headlineStyle: {
-      ...ELEMENT_STYLER_TYPE,
+      ...ELEMENT_ANIMATION_TYPE,
       get({ size, _headlineOpacity }) {
         if (size !== 'medium' && size !== 'large') return null;
         return {
@@ -88,127 +57,50 @@ export default CustomElement
       },
     },
   })
-  .html/* html */`
+  .expressions({
+    _companionIf({ size }) {
+      return size === 'medium' || size === 'large';
+    },
+  })
+  .html`
+    <div id=raised-background raised={_raised}></div>
     <slot id=leading name=leading on-slotchange={refreshTabIndexes}></slot>
     <div id=headline ink={ink} color={color} type-style={typeStyle} on-slotchange={refreshTabIndexes}>
       {headline}
       <slot id=headline-slot></slot>
     </div>
     <slot id=trailing name=trailing on-slotchange={refreshTabIndexes}></slot>
-    <div _if=${({ size }) => size === 'medium' || size === 'large'} id=companion aria-hidden=true size={size}>
-      <div _if={showSurfaceTint} id=companion-tint raised={_raised} class=surface-tint color={color}></div>
+    <div mdw-if={_companionIf} id=companion aria-hidden=true size={size} color={color} raised={_raised}>
       <slot id=companion-slot name=companion size={size}>{headline}</span>
     </div>
   `
   .on({
-    composed({ inline }) {
-      const { surface, leading, headline, trailing } = this.refs;
-      surface.append(leading, headline, trailing);
-      surface.setAttribute('size', '{size}');
-      surface.setAttribute('hide-on-scroll', '{hideOnScroll}');
-      surface.setAttribute('role', 'toolbar');
-      surface.setAttribute('aria-label', '{ariaLabel}');
-      surface.setAttribute(
-        'aria-labelledby',
-        inline(({ ariaLabel }) => (ariaLabel ? null : 'headline')),
-      );
-    },
-    scrollListenerPositionYChanged(oldValue, newValue) {
-      this._raised = (newValue > 0);
+    _scrollListenerPositionYChanged(oldValue, newValue) {
+      this._raised = (newValue > this._semiStickyOffsetY);
       if (this.size === 'medium' || this.size === 'large') {
         const max = this.refs.companion.scrollHeight;
         const min = (0.5 * max);
         this._headlineOpacity = Math.max(0, Math.min(1, (newValue - min) / (max - min)));
       }
-
-      if (!this.hideOnScroll) return;
-
-      this._duration = 0;
-      if (newValue <= 0) {
-      // Set at rest (top of parent, but allow overscroll)
-        this._cssPosition = 'relative';
-        this._translateY = 0;
-        this._visibleStart = 0;
-      } else if (newValue < this._translateY) {
-      // Align appbar.top with scroll position (top of screen)
-        this._cssPosition = 'sticky';
-        this._translateY = 0;
-        this._visibleStart = 0;
-      } else if (this._cssPosition !== 'sticky') {
-        this._visibleStart = (newValue - this._translateY) / this.refs.surface.scrollHeight;
-      }
-
-      this._scrollDirection = newValue > oldValue ? 'down' : 'up';
     },
-  })
-  .methods({
-    onScrollIdle() {
-      const _visibleStart = this._visibleStart;
+    _scrollListenerLastIdleChanged() {
       if (this._headlineOpacity > 0) {
         // Fill in opacity on idle
         this._headlineOpacity = 1;
       }
-      if (_visibleStart <= 0) return;
-      if (_visibleStart >= 1) return;
-      if (this.scrollListenerPositionY < (this.refs.surface.scrollHeight)) return;
-      if (_visibleStart <= 0.5) {
-        // Reveal all
-        this._duration = 250;
-        this._easing = 'ease-in';
-        this._cssPosition = 'relative';
-        this._translateY = this.scrollListenerPositionY;
-        this._headlineOpacity = 1;
-      } else {
-        this._duration = 200;
-        this._easing = 'ease-out';
-        this._cssPosition = 'relative';
-        this._translateY = this.scrollListenerPositionY - this.refs.surface.scrollHeight;
-      }
-    },
-  })
-  .define({
-    ariaActiveDescendantElement: {
-      get() {
-        // @ts-ignore Accessibility Object Model
-        return this.refs.surface.ariaActiveDescendantElement;
-      },
-      set(value) {
-        // @ts-ignore Accessibility Object Model
-        this.refs.surface.ariaActiveDescendantElement = value;
-      },
     },
-  })
-  .on({
-    connected() {
-      const { surface } = this.refs;
-      if (surface.offsetParent) {
-        this.startScrollListener(surface.offsetParent ?? window);
-      } else {
-        const resizeObserver = new ResizeObserver(() => {
-          this.startScrollListener(surface.offsetParent ?? window);
-          resizeObserver.disconnect();
-        });
-        resizeObserver.observe(surface);
+    _semiStickyTranslateYChanged(oldValue, newValue) {
+      if (newValue === 0) {
+        this._headlineOpacity = 1;
       }
     },
-    disconnected() {
-      this.clearScrollListener();
-    },
   })
   .css`
     /* https://m3.material.io/components/bottom-app-bar/specs */
-
     :host {
       --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-      display: contents;
-
-      z-index:2;
-    }
 
-    #surface {
       position: sticky;
       inset-block-start: 0;
 
@@ -216,6 +108,7 @@ export default CustomElement
 
       align-items: center;
       gap: 12px;
+
       grid-auto-flow: row;
       grid-template-rows: minmax(64px,min-content);
       grid-template-columns: minmax(auto,1fr) minmax(0,auto) minmax(auto,1fr);
@@ -223,8 +116,6 @@ export default CustomElement
       overflow-y: visible;
 
       box-sizing: border-box;
-      inline-size: 100%;
-      max-inline-size: 100%;
 
       /* 16px from icon */
       /* inset = (button.width / 2) - (icon.width / 2) */
@@ -232,26 +123,33 @@ export default CustomElement
       /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
       /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
 
-      padding-inline: 4px;
+      padding-inline: var(--mdw-pane__padding-inline, 16px);
 
       pointer-events: auto;
 
-      filter: none; /* Never receive shadow */
-
+      transform: translateY(0);
       z-index: 5;
-      /* inset-inline: 0; */
 
       background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
 
       transition: grid-template-columns 100ms;
-
+      will-change: transform;
     }
 
-    #surface-tint {
-      position: 0;
+    #raised-background {
+      position: absolute;
+      inset: 0;
+
+      z-index: -1;
+
+      background-color: transparent;
 
-      z-index: 1;
+      transition: background-color 200ms;
+    }
+
+    #raised-background:where([raised]) {
+      background-color: rgb(var(--mdw-color__surface-container));
     }
 
     #leading {
@@ -318,10 +216,10 @@ export default CustomElement
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */
       margin-block-start: calc(28px - var(--mdw-typescale__headline-small__line-height));
       padding-block-end: 20px;
-
       padding-inline: 16px;
 
       background-color: rgb(var(--mdw-bg));
+
       box-shadow: none;
 
       font: var(--mdw-typescale__headline-small__font);
@@ -385,16 +283,6 @@ export default CustomElement
       }
     }
 
-    #surface[hide-on-scroll] {
-      position: relative;
-
-      inset-block-start: 0;
-
-      transform: translateY(0);
-
-      will-change: transform, position;
-    }
-
     #surface[size="small"] {
       gap: 4px;
       grid-template-columns: auto 1fr auto;
@@ -406,5 +294,13 @@ export default CustomElement
       will-change: opacity;
     }
 
+    :host(:where([color="none"], [color="transparent"])),
+    #companion:where([color="none"], [color="transparent"]) {
+      background-color: transparent;
+    }
+
+    #companion[raised]:where([color="surface"],[color="none"],[color="transparent"]) {
+      background-color: rgb(var(--mdw-color__surface-container));
+    }
   `
   .autoRegister('mdw-top-app-bar');

package/constants/shapes.js

@@ -0,0 +1,36 @@
+export const CIRCLE_PATH = 'M0 12A12 12 0 1012 0 12 12 0 000 12Z';
+export const DIAMOND_PATH = 'M 0 12 12 0 24 12 12 24 Z';
+export const SQUIRCLE_PATH = 'M12 24C17.2583 24 20.1815 24 22.0908 22.0908 24 20.1815 24 17.2583 24 12 24 6.7417 24 3.8185 22.0908 1.9092 20.1815-0 17.2583-0 12-0 6.7417-0 3.8185-0 1.9092 1.9092-0 3.8185-0 6.7417-0 12-0 17.2583-0 20.1815 1.9092 22.0908 3.8185 24 6.7417 24 12 24Z';
+export const HALF_NOTCH_PATH = 'M0 6H6V0H18V6H24V18H18V24H6V18H0Z';
+
+export const SHAPE_ROUNDED_DEFAULT = {
+  size: {
+    extraSmall: '4px',
+    small: '8px',
+    medium: '12px',
+    large: '16px',
+    extraLarge: '28px',
+    full: '32px',
+  },
+  /** @type {string?} */
+  mask: CIRCLE_PATH, // CIRCLE_PATH
+  convex: false,
+};
+
+export const SHAPE_CUT_DEFAULT = {
+  ...SHAPE_ROUNDED_DEFAULT,
+  size: {
+    extraSmall: '4px',
+    small: '8px',
+    medium: '12px',
+    large: '16px',
+    extraLarge: '28px',
+    full: '32px',
+  },
+  mask: DIAMOND_PATH,
+};
+
+export const SHAPE_SQUIRCLE_DEFAULT = {
+  ...SHAPE_ROUNDED_DEFAULT,
+  mask: SQUIRCLE_PATH,
+};

package/constants/typography.js

@@ -0,0 +1,127 @@
+export const TYPOGRAPHY_DEFAULT = {
+  face: {
+    brand: '"Roboto Medium", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    plain: '"Roboto Regular", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    weight: {
+      regular: 400,
+      medium: 500,
+    },
+  },
+  scale: {
+    display: {
+      large: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 64,
+        fontSize: 57,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      medium: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 52,
+        fontSize: 45,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      small: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 44,
+        fontSize: 36,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+    },
+    headline: {
+      large: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 40,
+        fontSize: 32,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      medium: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 36,
+        fontSize: 28,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      small: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 32,
+        fontSize: 24,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+    },
+    title: {
+      large: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 28,
+        fontSize: 22,
+        letterSpacing: 0,
+        weight: 'var(--mdw-typeface__weight-medium)', // Figma style has regular
+      },
+      medium: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 24,
+        fontSize: 16,
+        letterSpacing: 0.15,
+        weight: 'var(--mdw-typeface__weight-medium)',
+      },
+      small: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 20,
+        fontSize: 14,
+        letterSpacing: 0.1,
+        weight: 'var(--mdw-typeface__weight-medium)',
+      },
+    },
+    label: {
+      large: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 20,
+        fontSize: 14,
+        letterSpacing: 0.1,
+        weight: 'var(--mdw-typeface__weight-medium)',
+      },
+      medium: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 16,
+        fontSize: 12,
+        letterSpacing: 0.5,
+        weight: 'var(--mdw-typeface__weight-medium)',
+      },
+      small: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 16,
+        fontSize: 11,
+        letterSpacing: 0.5,
+        weight: 'var(--mdw-typeface__weight-medium)',
+      },
+    },
+    body: {
+      large: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 24,
+        fontSize: 16,
+        letterSpacing: 0.5, // Figma text has 0.15
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      medium: {
+        fontFamily: 'var(--mdw-typeface__plain)',
+        lineHeight: 20,
+        fontSize: 14,
+        letterSpacing: 0.25,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+      small: {
+        fontFamily: 'var(--mdw-typeface__brand)',
+        lineHeight: 16,
+        fontSize: 12,
+        letterSpacing: 0.4,
+        weight: 'var(--mdw-typeface__weight-regular)',
+      },
+    },
+  },
+};