@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/TopAppBar.js

@@ -1,36 +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 DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
 import SemiStickyMixin from '../mixins/SemiStickyMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.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)
   .mixin(ShapeMixin)
   .mixin(AriaToolbarMixin)
   .mixin(SemiStickyMixin)
-  .set({
-    elevated: true,
-  })
+  .mixin(DelegatesFocusMixin)
   .observe({
     _raised: 'boolean',
     _headlineOpacity: { type: 'float', default: 0 },
     headline: 'string',
     size: { value: /** @type {'small'|'medium'|'large'|null} */ (null) },
-    /** Convert native to observable */
-    ariaLabel: 'string',
-    color: { empty: 'surface' },
-  })
-  .overrides({
-    _getSemiStickyElement() { return this.refs.surface; },
+    color: 'string',
+    raisedColor: 'string',
   })
   .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ raisedColor }) {
+        if (raisedColor) {
+          return '#raised-background:where([raised])'
+         + `{background-color:rgb(var(--mdw-color__${raisedColor}))`
+         + '}';
+        }
+      },
+    },
     _headlineStyle: {
-      ...ELEMENT_STYLER_TYPE,
+      ...ELEMENT_ANIMATION_TYPE,
       get({ size, _headlineOpacity }) {
         if (size !== 'medium' && size !== 'large') return null;
         return {
@@ -45,32 +57,24 @@ export default CustomElement
       },
     },
   })
+  .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 mdw-if=${({ size }) => size === 'medium' || size === 'large'} id=companion aria-hidden=true size={size} color={color} raised={_raised}>
+    <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, shape, leading, headline, trailing } = this.refs;
-      shape.append(leading, headline, trailing);
-      surface.append(shape);
-      surface.setAttribute('size', '{size}');
-      surface.setAttribute('role', 'toolbar');
-      surface.setAttribute('aria-label', '{ariaLabel}');
-      surface.setAttribute(
-        'aria-labelledby',
-        inline(({ ariaLabel }) => (ariaLabel ? null : 'headline')),
-      );
-      surface.setAttribute('raised', '{_raised}');
-      shape.setAttribute('raised', '{_raised}');
-    },
     _scrollListenerPositionYChanged(oldValue, newValue) {
       this._raised = (newValue > this._semiStickyOffsetY);
       if (this.size === 'medium' || this.size === 'large') {
@@ -91,60 +95,20 @@ export default CustomElement
       }
     },
   })
-  .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;
-      },
-    },
-  })
   .css`
     /* https://m3.material.io/components/bottom-app-bar/specs */
-
     :host {
       --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
-      display: contents;
-
-      z-index:2;
-    }
 
-    #surface {
       position: sticky;
-      inset-block-end: auto;
-
-      grid-area: app-bar;
-
-      margin: inherit; /** Pass through */
-
-      padding: inherit; /** Pass through */
-
-      filter: none; /* Never receive shadow */
-
-      transform: translateY(0);
-
-      z-index: 5;
-
-      background-color: rgb(var(--mdw-bg));
-
-      transition: grid-template-columns 100ms, background-color 100ms;
-
-      will-change: transform;
-    }
-
-    #shape{
-      position: initial;
-      inset: initial;
+      inset-block-start: 0;
 
       display: grid;
 
       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);
@@ -152,8 +116,6 @@ export default CustomElement
       overflow-y: visible;
 
       box-sizing: border-box;
-      max-inline-size: calc(var(--mdw-content__max-width, 100%) + (2 * var(--mdw-content__padding, 16px) -  4px));
-      margin-inline: auto;
 
       /* 16px from icon */
       /* inset = (button.width / 2) - (icon.width / 2) */
@@ -161,15 +123,33 @@ export default CustomElement
       /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
       /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
 
-      padding-inline: calc(var(--mdw-content__padding, 16px) - 8px);
+      padding-inline: var(--mdw-pane__padding-inline, 16px);
 
       pointer-events: auto;
 
-      z-index: initial;
+      transform: translateY(0);
+      z-index: 5;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition: grid-template-columns 100ms;
+      will-change: transform;
+    }
+
+    #raised-background {
+      position: absolute;
+      inset: 0;
+
+      z-index: -1;
 
       background-color: transparent;
 
-      color: rgb(var(--mdw-ink));
+      transition: background-color 200ms;
+    }
+
+    #raised-background:where([raised]) {
+      background-color: rgb(var(--mdw-color__surface-container));
     }
 
     #leading {
@@ -314,15 +294,13 @@ export default CustomElement
       will-change: opacity;
     }
 
-    #surface:where([color="none"], [color="transparent"]),
+    :host(:where([color="none"], [color="transparent"])),
     #companion:where([color="none"], [color="transparent"]) {
       background-color: transparent;
     }
 
-    #surface[raised]:where([color="surface"],[color="none"],[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)',
+      },
+    },
+  },
+};